add "show feeds and categories with no unread entries" option

commafeed-client/src/components/settings/DisplaySettings.tsx

@@ -1,7 +1,7 @@
 import { t } from "@lingui/macro"
 import { Divider, Select, SimpleGrid, Stack, Switch } from "@mantine/core"
 import { Constants } from "app/constants"
-import { changeLanguage, changeScrollSpeed, changeSharingSetting } from "app/slices/user"
+import { changeLanguage, changeScrollSpeed, changeSharingSetting, changeShowRead } from "app/slices/user"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { SharingSettings } from "app/types"
 import { locales } from "i18n"
@@ -9,6 +9,7 @@ import { locales } from "i18n"
 export function DisplaySettings() {
     const language = useAppSelector(state => state.user.settings?.language)
     const scrollSpeed = useAppSelector(state => state.user.settings?.scrollSpeed)
+    const showRead = useAppSelector(state => state.user.settings?.showRead)
     const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
     const dispatch = useAppDispatch()
 
@@ -30,6 +31,12 @@ export function DisplaySettings() {
                 onChange={e => dispatch(changeScrollSpeed(e.currentTarget.checked))}
             />
 
+            <Switch
+                label={t`Show feeds and categories with no unread entries`}
+                checked={showRead}
+                onChange={e => dispatch(changeShowRead(e.currentTarget.checked))}
+            />
+
             <Divider label={t`Sharing sites`} labelPosition="center" />
 
             <SimpleGrid cols={2}>

commafeed-client/src/components/sidebar/Tree.tsx

@@ -22,6 +22,7 @@ const errorThreshold = 9
 export function Tree() {
     const root = useAppSelector(state => state.tree.rootCategory)
     const source = useAppSelector(state => state.entries.source)
+    const showRead = useAppSelector(state => state.user.settings?.showRead)
     const dispatch = useAppDispatch()
 
     const feedClicked = (e: React.MouseEvent, id: string) => {
@@ -74,13 +75,16 @@ export function Tree() {
     )
 
     const categoryNode = (category: Category, level: number = 0) => {
+        const unreadCount = categoryUnreadCount(category)
+        if (unreadCount === 0 && !showRead) return null
+
         const hasError = !category.expanded && flattenCategoryTree(category).some(c => c.feeds.some(f => f.errorCount > errorThreshold))
         return (
             <TreeNode
                 id={category.id}
                 name={category.name}
                 icon={category.expanded ? expandedIcon : collapsedIcon}
-                unread={categoryUnreadCount(category)}
+                unread={unreadCount}
                 selected={source.type === "category" && source.id === category.id}
                 expanded={category.expanded}
                 level={level}
@@ -92,19 +96,23 @@ export function Tree() {
         )
     }
 
-    const feedNode = (feed: Subscription, level: number = 0) => (
-        <TreeNode
-            id={String(feed.id)}
-            name={feed.name}
-            icon={feed.iconUrl}
-            unread={feed.unread}
-            selected={source.type === "feed" && source.id === String(feed.id)}
-            level={level}
-            hasError={feed.errorCount > errorThreshold}
-            onClick={feedClicked}
-            key={feed.id}
-        />
-    )
+    const feedNode = (feed: Subscription, level: number = 0) => {
+        if (feed.unread === 0 && !showRead) return null
+
+        return (
+            <TreeNode
+                id={String(feed.id)}
+                name={feed.name}
+                icon={feed.iconUrl}
+                unread={feed.unread}
+                selected={source.type === "feed" && source.id === String(feed.id)}
+                level={level}
+                hasError={feed.errorCount > errorThreshold}
+                onClick={feedClicked}
+                key={feed.id}
+            />
+        )
+    }
 
     const recursiveCategoryNode = (category: Category, level: number = 0) => (
         <React.Fragment key={`recursiveCategoryNode-${category.id}`}>