Show channel count for "Без категории" on the categories management page
Reuses the existing GET /api/channels?uncategorized=true endpoint client-side rather than changing the /api/categories response shape, which stays a plain array (kept several existing call sites simple). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
parent
b29bcfb8d7
commit
cdb1c2ded2
2 changed files with 23 additions and 0 deletions
|
|
@ -239,6 +239,16 @@
|
|||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.category-row-virtual {
|
||||
background: #f7f7f7;
|
||||
border-style: dashed;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.category-row-virtual .reorder-buttons {
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.reorder-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {
|
|||
createCategory,
|
||||
deleteCategory,
|
||||
listCategories,
|
||||
listChannels,
|
||||
reorderCategories,
|
||||
updateCategory,
|
||||
} from '../api/client'
|
||||
|
|
@ -16,6 +17,10 @@ function Categories() {
|
|||
const [editingName, setEditingName] = useState('')
|
||||
|
||||
const categoriesQuery = useQuery({ queryKey: ['categories'], queryFn: listCategories })
|
||||
const uncategorizedQuery = useQuery({
|
||||
queryKey: ['channels', 'uncategorized-count'],
|
||||
queryFn: () => listChannels({ subscribed: true, uncategorized: true }),
|
||||
})
|
||||
|
||||
const invalidate = () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['categories'] })
|
||||
|
|
@ -85,6 +90,14 @@ function Categories() {
|
|||
{createMutation.isError && <p className="error">{(createMutation.error as Error).message}</p>}
|
||||
|
||||
<ul className="category-list">
|
||||
<li className="category-row category-row-virtual">
|
||||
<div className="reorder-buttons" />
|
||||
<span className="category-name">Без категории</span>
|
||||
<span className="category-count">
|
||||
{uncategorizedQuery.isLoading ? '…' : `${uncategorizedQuery.data?.length ?? 0} канал(ов)`}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{categories.map((category, index) => (
|
||||
<li key={category.id} className="category-row">
|
||||
<div className="reorder-buttons">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue