feat(settings): add option to hide read subscriptions, fixed #3584

Innei · Innei · commit 1b88d72d32b2 · 2025-05-09T22:53:58.000+08:00
- Introduced a new setting to hide read subscriptions in the general settings.
- Updated the FeedItem and ListItem components to conditionally render based on the new setting.
- Modified the general settings UI to include the new option and updated translations accordingly.

Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/src/modules/settings/tabs/general.tsx b/apps/desktop/layer/renderer/src/modules/settings/tabs/general.tsx
@@ -97,13 +97,18 @@ export const SettingGeneral = () => {
 
           {
             type: "title",
-            value: t("general.sidebar"),
+            value: t("general.subscription"),
           },
           defineSettingItem("autoGroup", {
             label: t("general.auto_group.label"),
             description: t("general.auto_group.description"),
           }),
 
+          defineSettingItem("hideAllReadSubscriptions", {
+            label: t("general.hide_all_read_subscriptions.label"),
+            description: t("general.hide_all_read_subscriptions.description"),
+          }),
+
           {
             type: "title",
             value: t("general.timeline"),
diff --git a/apps/desktop/layer/renderer/src/modules/timeline-column/FeedCategory.tsx b/apps/desktop/layer/renderer/src/modules/timeline-column/FeedCategory.tsx
@@ -38,7 +38,7 @@ import { useModalStack } from "../../components/ui/modal/stacked/hooks"
 import { ListCreationModalContent } from "../settings/tabs/lists/modals"
 import { useFeedListSortSelector } from "./atom"
 import { CategoryRemoveDialogContent } from "./CategoryRemoveDialogContent"
-import { FeedItem } from "./FeedItem"
+import { FeedItemAutoHideUnread } from "./FeedItem"
 import { feedColumnStyles } from "./styles"
 import { UnreadNumber } from "./UnreadNumber"
 
@@ -487,7 +487,7 @@ const SortByAlphabeticalList = (props: SortListProps) => {
   return (
     <Fragment>
       {sortedFeedList.map((feedId) => (
-        <FeedItem
+        <FeedItemAutoHideUnread
           key={feedId}
           feedId={feedId}
           view={view}
@@ -512,7 +512,7 @@ const SortByUnreadList = ({ ids, showCollapse, view }: SortListProps) => {
   return (
     <Fragment>
       {sortByUnreadFeedList.map((feedId) => (
-        <FeedItem
+        <FeedItemAutoHideUnread
           key={feedId}
           feedId={feedId}
           view={view}
diff --git a/apps/desktop/layer/renderer/src/modules/timeline-column/FeedItem.tsx b/apps/desktop/layer/renderer/src/modules/timeline-column/FeedItem.tsx
@@ -12,11 +12,12 @@ import type { FeedViewType } from "@follow/constants"
 import { nextFrame } from "@follow/utils/dom"
 import { cn, isKeyForMultiSelectPressed } from "@follow/utils/utils"
 import dayjs from "dayjs"
-import { memo, use, useCallback, useState } from "react"
+import { createElement, memo, use, useCallback, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 import { MenuItemSeparator, MenuItemText, useShowContextMenu } from "~/atoms/context-menu"
 import { getMainContainerElement } from "~/atoms/dom"
+import { useGeneralSettingKey } from "~/atoms/settings/general"
 import { useFeedActions, useInboxActions, useListActions } from "~/hooks/biz/useFeedActions"
 import { useFollow } from "~/hooks/biz/useFollow"
 import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
@@ -242,14 +243,36 @@ const FeedItemImpl = ({ view, feedId, className, isPreview }: FeedItemProps) =>
   )
 }
 
+const FilterReadFeedItem: Component<FeedItemProps> = (props) => {
+  const feedUnread = useFeedUnreadStore((state) => state.data[props.feedId] || 0)
+
+  if (!feedUnread) return null
+  return createElement(FeedItemImpl, props)
+}
+
 export const FeedItem = memo(FeedItemImpl)
 
-const ListItemImpl: Component<{
+export const FeedItemAutoHideUnread: Component<FeedItemProps> = memo((props) => {
+  const hideAllReadSubscriptions = useGeneralSettingKey("hideAllReadSubscriptions")
+
+  if (hideAllReadSubscriptions) return createElement(FilterReadFeedItem, props)
+  return createElement(FeedItemImpl, props)
+})
+
+interface ListItemProps {
   listId: string
   view: FeedViewType
   iconSize?: number
   isPreview?: boolean
-}> = ({ view, listId, className, iconSize = 22, isPreview }) => {
+}
+
+const ListItemImpl: Component<ListItemProps> = ({
+  view,
+  listId,
+  className,
+  iconSize = 22,
+  isPreview,
+}) => {
   const list = useListById(listId)
 
   const isActive = useRouteParamsSelector((routerParams) => routerParams.listId === listId)
@@ -339,11 +362,26 @@ const ListItemImpl: Component<{
 
 export const ListItem = memo(ListItemImpl)
 
-const InboxItemImpl: Component<{
+const FilterReadListItem: Component<ListItemProps> = (props) => {
+  const listUnread = useUnreadByListId(props.listId)
+
+  if (!listUnread) return null
+  return createElement(ListItem, props)
+}
+
+export const ListItemAutoHideUnread: Component<ListItemProps> = memo((props) => {
+  const hideAllReadSubscriptions = useGeneralSettingKey("hideAllReadSubscriptions")
+
+  if (hideAllReadSubscriptions) return createElement(FilterReadListItem, props)
+  return createElement(ListItemImpl, props)
+})
+
+interface InboxItemProps {
   inboxId: string
   view: FeedViewType
   iconSize?: number
-}> = ({ view, inboxId, className, iconSize = 16 }) => {
+}
+const InboxItemImpl: Component<InboxItemProps> = ({ view, inboxId, className, iconSize = 16 }) => {
   const inbox = useInboxById(inboxId)
 
   const isActive = useRouteParamsSelector((routerParams) => routerParams.inboxId === inboxId)
diff --git a/apps/desktop/layer/renderer/src/modules/timeline-column/FeedList.electron.tsx b/apps/desktop/layer/renderer/src/modules/timeline-column/FeedList.electron.tsx
@@ -25,7 +25,7 @@ import {
   useSelectedFeedIdsState,
 } from "./atom"
 import { DraggableContext } from "./context"
-import { FeedItem, ListItem } from "./FeedItem"
+import { FeedItem, ListItemAutoHideUnread } from "./FeedItem"
 import type { FeedListProps } from "./FeedList"
 import { EmptyFeedList, ListHeader, StarredItem } from "./FeedList.shared"
 import { useShouldFreeUpSpace } from "./hook"
@@ -232,7 +232,12 @@ const FeedListImpl = ({ ref, className, view }: FeedListProps) => {
               {t("words.lists")}
             </div>
             {isListPreview && listId && (
-              <ListItem listId={listId} view={view} className="pl-2.5 pr-0" isPreview />
+              <ListItemAutoHideUnread
+                listId={listId}
+                view={view}
+                className="pl-2.5 pr-0"
+                isPreview
+              />
             )}
             <SortByAlphabeticalList view={view} data={listsData} />
           </>
diff --git a/apps/desktop/layer/renderer/src/modules/timeline-column/sort-by/SortByAlphabeticalList.tsx b/apps/desktop/layer/renderer/src/modules/timeline-column/sort-by/SortByAlphabeticalList.tsx
@@ -7,7 +7,7 @@ import { useSubscriptionStore } from "~/store/subscription"
 
 import { useFeedListSortSelector } from "../atom"
 import { FeedCategory } from "../FeedCategory"
-import { InboxItem, ListItem } from "../FeedItem"
+import { InboxItem, ListItemAutoHideUnread } from "../FeedItem"
 import type { FeedListProps, ListListProps } from "./types"
 
 export const SortByAlphabeticalFeedList = ({
@@ -97,7 +97,7 @@ export const SortByAlphabeticalListList = ({ view, data }: ListListProps) => {
   return (
     <div>
       {Object.keys(data).map((listId) => (
-        <ListItem key={listId} listId={listId} view={view} />
+        <ListItemAutoHideUnread key={listId} listId={listId} view={view} />
       ))}
     </div>
   )
diff --git a/locales/settings/en.json b/locales/settings/en.json
@@ -180,6 +180,8 @@
   "general.export_database.label": "Export Database",
   "general.group_by_date.description": "Group entries by date.",
   "general.group_by_date.label": "Group by date",
+  "general.hide_all_read_subscriptions.description": "Hide read subscriptions and no updated in the subscription list.",
+  "general.hide_all_read_subscriptions.label": "Hide read",
   "general.language": "Language",
   "general.launch_at_login": "Launch at login",
   "general.log_file.button": "Reveal",
@@ -211,11 +213,11 @@
   "general.show_quick_timeline.label": "Show feed list timeline",
   "general.show_unread_on_launch.description": "Show unread content on launch",
   "general.show_unread_on_launch.label": "Show unread content on launch",
-  "general.sidebar": "Sidebar",
   "general.sidebar_title": "General",
   "general.startup_screen.subscription": "Subscription",
   "general.startup_screen.timeline": "Timeline",
   "general.startup_screen.title": "Startup Screen",
+  "general.subscription": "Subscription",
   "general.subscriptions": "Subscriptions",
   "general.timeline": "Timeline",
   "general.translation_mode.bilingual": "Bilingual Comparison",
diff --git a/locales/settings/ja.json b/locales/settings/ja.json
@@ -161,7 +161,6 @@
   "general.show_quick_timeline.label": "フィードリストにタイムラインを表示する",
   "general.show_unread_on_launch.description": "起動時に未読数を表示する",
   "general.show_unread_on_launch.label": "起動時に未読コンテンツを表示",
-  "general.sidebar": "サイドバー",
   "general.sidebar_title": "一般",
   "general.startup_screen.subscription": "購読",
   "general.startup_screen.timeline": "タイムライン",
diff --git a/locales/settings/zh-CN.json b/locales/settings/zh-CN.json
@@ -210,7 +210,6 @@
   "general.show_quick_timeline.label": "显示时间线快速导航",
   "general.show_unread_on_launch.description": "启动时显示未读内容。",
   "general.show_unread_on_launch.label": "启动时显示未读内容",
-  "general.sidebar": "侧边栏",
   "general.sidebar_title": "通用",
   "general.startup_screen.subscription": "订阅",
   "general.startup_screen.timeline": "时间线",
diff --git a/locales/settings/zh-TW.json b/locales/settings/zh-TW.json
@@ -209,7 +209,6 @@
   "general.show_quick_timeline.label": "顯示 RSS 摘要列表時間軸",
   "general.show_unread_on_launch.description": "啟動時顯示未讀內容",
   "general.show_unread_on_launch.label": "啟動時顯示未讀內容",
-  "general.sidebar": "側邊欄",
   "general.sidebar_title": "一般",
   "general.startup_screen.subscription": "訂閱",
   "general.startup_screen.timeline": "時間軸",
diff --git a/packages/internal/shared/src/settings/defaults.ts b/packages/internal/shared/src/settings/defaults.ts
@@ -16,7 +16,9 @@ export const defaultGeneralSettings: GeneralSettings = {
   sendAnonymousData: true,
   showQuickTimeline: true,
 
+  // subscription
   autoGroup: true,
+  hideAllReadSubscriptions: false,
 
   // view
   unreadOnly: true,
diff --git a/packages/internal/shared/src/settings/interface.ts b/packages/internal/shared/src/settings/interface.ts
@@ -16,7 +16,10 @@ export interface GeneralSettings {
   jumpOutLinkWarn: boolean
   // TTS
   voice: string
+
+  // subscription
   autoGroup: boolean
+  hideAllReadSubscriptions: boolean
   /**
    * Top timeline for mobile
    */
