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 ( 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() { )}
- +
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() { )}
- +
{feedQuery.isLoading &&

Загрузка...

} 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() {
- +
{feedQuery.isLoading &&

Загрузка...

}