From 44f81f0f0d936d5ce17c8a6d46a9f9ac21e1f7d0 Mon Sep 17 00:00:00 2001
From: vrubelroman <vrubelroman@gmail.com>
Date: Wed, 16 Sep 2026 20:38:06 +0000
Subject: [PATCH] Show channel counts in the left CategoryNav sidebar
 (Feed/Channels/Saved)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same "channels per category" counts as the categories management page,
now next to each button in the sidebar used across all three pages.
Categories already carry channel_count; "Все"/"Без категории" counts are
derived client-side from one extra unfiltered channels query, reused
across the three pages via a shared ['channels', 'all-for-counts'] key.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 frontend/src/App.css                    | 12 ++++++++++++
 frontend/src/components/CategoryNav.tsx |  7 ++++++-
 frontend/src/pages/Channels.tsx         | 15 ++++++++++++++-
 frontend/src/pages/Feed.tsx             | 17 +++++++++++++++--
 frontend/src/pages/Saved.tsx            | 17 +++++++++++++++--
 5 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index b62c032..82051b2 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -63,6 +63,10 @@
 }
 
 .category-nav button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
   text-align: left;
   padding: 6px 10px;
   border: none;
@@ -76,6 +80,14 @@
   font-weight: 600;
 }
 
+.category-nav-count {
+  font-size: 11px;
+  color: #999;
+  background: #eee;
+  border-radius: 8px;
+  padding: 1px 6px;
+}
+
 .content {
   flex: 1;
   min-width: 0;
diff --git a/frontend/src/components/CategoryNav.tsx b/frontend/src/components/CategoryNav.tsx
index db942a2..d808533 100644
--- a/frontend/src/components/CategoryNav.tsx
+++ b/frontend/src/components/CategoryNav.tsx
@@ -6,16 +6,20 @@ interface Props {
   categories: CategoryDto[]
   value: CategoryFilter
   onChange: (filter: CategoryFilter) => void
+  allCount?: number
+  uncategorizedCount?: number
 }
 
-function CategoryNav({ categories, value, onChange }: Props) {
+function CategoryNav({ categories, value, onChange, allCount, uncategorizedCount }: Props) {
   return (
     <nav className="category-nav">
       <button className={value === 'all' ? 'active' : ''} onClick={() => onChange('all')}>
         Все
+        {allCount != null && <span className="category-nav-count">{allCount}</span>}
       </button>
       <button className={value === 'uncategorized' ? 'active' : ''} onClick={() => onChange('uncategorized')}>
         Без категории
+        {uncategorizedCount != null && <span className="category-nav-count">{uncategorizedCount}</span>}
       </button>
       {categories.map((category) => (
         <button
@@ -24,6 +28,7 @@ function CategoryNav({ categories, value, onChange }: Props) {
           onClick={() => onChange(category.id)}
         >
           {category.name}
+          <span className="category-nav-count">{category.channel_count}</span>
         </button>
       ))}
     </nav>
diff --git a/frontend/src/pages/Channels.tsx b/frontend/src/pages/Channels.tsx
index babc3be..43891d4 100644
--- a/frontend/src/pages/Channels.tsx
+++ b/frontend/src/pages/Channels.tsx
@@ -12,6 +12,13 @@ function Channels() {
 
   const categoriesQuery = useQuery({ queryKey: ['categories'], queryFn: listCategories })
 
+  const allChannelsQuery = useQuery({
+    queryKey: ['channels', 'all-for-counts'],
+    queryFn: () => listChannels({ subscribed: true }),
+  })
+  const allChannels = allChannelsQuery.data ?? []
+  const uncategorizedCount = allChannels.filter((c) => c.category_ids.length === 0).length
+
   const channelsQuery = useQuery({
     queryKey: ['channels', filter],
     queryFn: () =>
@@ -74,7 +81,13 @@ function Channels() {
       )}
 
       <div className="layout">
-        <CategoryNav categories={categories} value={filter} onChange={setFilter} />
+        <CategoryNav
+          categories={categories}
+          value={filter}
+          onChange={setFilter}
+          allCount={allChannels.length}
+          uncategorizedCount={uncategorizedCount}
+        />
 
         <div className="content">
           <input
diff --git a/frontend/src/pages/Feed.tsx b/frontend/src/pages/Feed.tsx
index 0a76344..49c6096 100644
--- a/frontend/src/pages/Feed.tsx
+++ b/frontend/src/pages/Feed.tsx
@@ -1,6 +1,6 @@
 import { useMutation, useInfiniteQuery, useQuery, useQueryClient } from '@tanstack/react-query'
 import { Link } from 'react-router-dom'
-import { getFeed, getSyncStatus, listCategories, logout, syncVideos } from '../api/client'
+import { getFeed, getSyncStatus, listCategories, listChannels, logout, syncVideos } from '../api/client'
 import CategoryNav, { type CategoryFilter } from '../components/CategoryNav'
 import VideoCard from '../components/VideoCard'
 import { useState } from 'react'
@@ -12,6 +12,13 @@ function Feed() {
   const categoriesQuery = useQuery({ queryKey: ['categories'], queryFn: listCategories })
   const categories = categoriesQuery.data ?? []
 
+  const allChannelsQuery = useQuery({
+    queryKey: ['channels', 'all-for-counts'],
+    queryFn: () => listChannels({ subscribed: true }),
+  })
+  const allChannels = allChannelsQuery.data ?? []
+  const uncategorizedCount = allChannels.filter((c) => c.category_ids.length === 0).length
+
   const feedQuery = useInfiniteQuery({
     queryKey: ['feed', filter],
     queryFn: ({ pageParam }) =>
@@ -69,7 +76,13 @@ function Feed() {
       )}
 
       <div className="layout">
-        <CategoryNav categories={categories} value={filter} onChange={setFilter} />
+        <CategoryNav
+          categories={categories}
+          value={filter}
+          onChange={setFilter}
+          allCount={allChannels.length}
+          uncategorizedCount={uncategorizedCount}
+        />
 
         <div className="content">
           {feedQuery.isLoading && <p>Загрузка...</p>}
diff --git a/frontend/src/pages/Saved.tsx b/frontend/src/pages/Saved.tsx
index b03048e..b823bbf 100644
--- a/frontend/src/pages/Saved.tsx
+++ b/frontend/src/pages/Saved.tsx
@@ -1,6 +1,6 @@
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
 import { Link } from 'react-router-dom'
-import { getFeed, listCategories } from '../api/client'
+import { getFeed, listCategories, listChannels } from '../api/client'
 import CategoryNav, { type CategoryFilter } from '../components/CategoryNav'
 import VideoCard from '../components/VideoCard'
 import { useState } from 'react'
@@ -11,6 +11,13 @@ function Saved() {
   const categoriesQuery = useQuery({ queryKey: ['categories'], queryFn: listCategories })
   const categories = categoriesQuery.data ?? []
 
+  const allChannelsQuery = useQuery({
+    queryKey: ['channels', 'all-for-counts'],
+    queryFn: () => listChannels({ subscribed: true }),
+  })
+  const allChannels = allChannelsQuery.data ?? []
+  const uncategorizedCount = allChannels.filter((c) => c.category_ids.length === 0).length
+
   const feedQuery = useInfiniteQuery({
     queryKey: ['feed', 'saved', filter],
     queryFn: ({ pageParam }) =>
@@ -38,7 +45,13 @@ function Saved() {
       </header>
 
       <div className="layout">
-        <CategoryNav categories={categories} value={filter} onChange={setFilter} />
+        <CategoryNav
+          categories={categories}
+          value={filter}
+          onChange={setFilter}
+          allCount={allChannels.length}
+          uncategorizedCount={uncategorizedCount}
+        />
 
         <div className="content">
           {feedQuery.isLoading && <p>Загрузка...</p>}