feat: add unread count badge next to title

commafeed-client/src/pages/app/FeedEntriesPage.tsx

@@ -9,8 +9,9 @@ import type { EntrySourceType } from "@/app/entries/slice"
 import { loadEntries } from "@/app/entries/thunks"
 import { redirectToCategoryDetails, redirectToFeedDetails, redirectToTagDetails } from "@/app/redirect/thunks"
 import { useAppDispatch, useAppSelector } from "@/app/store"
-import { flattenCategoryTree } from "@/app/utils"
+import { categoryHasNewEntries, categoryUnreadCount, flattenCategoryTree } from "@/app/utils"
 import { FeedEntries } from "@/components/content/FeedEntries"
+import { UnreadCount } from "@/components/sidebar/UnreadCount"
 import { tss } from "@/tss"
 
 function NoSubscriptionHelp() {
@@ -48,6 +49,40 @@ export function FeedEntriesPage(props: Readonly<FeedEntriesPageProps>) {
     const sourceLabel = useAppSelector(state => state.entries.sourceLabel)
     const sourceWebsiteUrl = useAppSelector(state => state.entries.sourceWebsiteUrl)
     const hasMore = useAppSelector(state => state.entries.hasMore)
+    const unreadCount = useAppSelector(state => {
+        const root = state.tree.rootCategory
+        if (!root) return 0
+        if (props.sourceType === "category") {
+            if (id === Constants.categories.starred.id) return 0
+            if (id === Constants.categories.all.id) return categoryUnreadCount(root)
+            const category = flattenCategoryTree(root).find(c => c.id === id)
+            return categoryUnreadCount(category)
+        }
+        if (props.sourceType === "feed") {
+            return (
+                flattenCategoryTree(root)
+                    .flatMap(c => c.feeds)
+                    .find(f => String(f.id) === id)?.unread ?? 0
+            )
+        }
+        return 0
+    })
+    const hasNewEntries = useAppSelector(state => {
+        const root = state.tree.rootCategory
+        if (!root) return false
+        if (props.sourceType === "category") {
+            if (id === Constants.categories.starred.id) return false
+            if (id === Constants.categories.all.id) return categoryHasNewEntries(root)
+            const category = flattenCategoryTree(root).find(c => c.id === id)
+            return categoryHasNewEntries(category)
+        }
+        if (props.sourceType === "feed") {
+            return !!flattenCategoryTree(root)
+                .flatMap(c => c.feeds)
+                .find(f => String(f.id) === id)?.hasNewEntries
+        }
+        return false
+    })
     const dispatch = useAppDispatch()
 
     let title: React.ReactNode = sourceLabel
@@ -90,12 +125,15 @@ export function FeedEntriesPage(props: Readonly<FeedEntriesPageProps>) {
         // add some room at the bottom of the page in order to be able to scroll the current entry at the top of the page when expanding
         <Box mb={viewport.height * 0.7}>
             <Group gap="xl" className="cf-entries-title">
-                {sourceWebsiteUrl && (
-                    <a href={sourceWebsiteUrl} target="_blank" rel="noreferrer" className={classes.sourceWebsiteLink}>
-                        <Title order={3}>{title}</Title>
-                    </a>
-                )}
-                {!sourceWebsiteUrl && <Title order={3}>{title}</Title>}
+                <Group gap="xs">
+                    {sourceWebsiteUrl && (
+                        <a href={sourceWebsiteUrl} target="_blank" rel="noreferrer" className={classes.sourceWebsiteLink}>
+                            <Title order={3}>{title}</Title>
+                        </a>
+                    )}
+                    {!sourceWebsiteUrl && <Title order={3}>{title}</Title>}
+                    <UnreadCount unreadCount={unreadCount} showIndicator={hasNewEntries} />
+                </Group>
                 <ActionIcon onClick={titleClicked} variant="subtle" color={theme.primaryColor}>
                     <TbEdit size={18} />
                 </ActionIcon>