diff --git a/src/components/Article/SearchAndSortBar.jsx b/src/components/Article/SearchAndSortBar.jsx index 5ce363696..2b26e4d91 100644 --- a/src/components/Article/SearchAndSortBar.jsx +++ b/src/components/Article/SearchAndSortBar.jsx @@ -23,7 +23,13 @@ import SidebarTrigger from "./SidebarTrigger.jsx" import CustomTooltip from "@/components/ui/CustomTooltip" import { polyglotState } from "@/hooks/useLanguage" import useScreenWidth from "@/hooks/useScreenWidth" -import { contentState, setFilterDate, setFilterString, setFilterType } from "@/store/contentState" +import { + contentState, + dynamicCountState, + setFilterDate, + setFilterString, + setFilterType, +} from "@/store/contentState" import { categoriesState, feedsState } from "@/store/dataState" import { settingsState, updateSettings } from "@/store/settingsState" import { getStartOfToday } from "@/utils/date" @@ -134,11 +140,12 @@ const ActiveButton = ({ active, icon, tooltip, onClick }) => ( ) const SearchAndSortBar = () => { - const { filterDate, filterString, infoFrom, isArticleListReady, total } = useStore(contentState) + const { filterDate, filterString, infoFrom, isArticleListReady } = useStore(contentState) const { orderDirection, showStatus } = useStore(settingsState) const { polyglot } = useStore(polyglotState) const feeds = useStore(feedsState) const categories = useStore(categoriesState) + const dynamicCount = useStore(dynamicCountState) const location = useLocation() const { id } = useParams() @@ -152,24 +159,24 @@ const SearchAndSortBar = () => { if (id) { if (infoFrom === "category") { const category = categories.find((c) => c.id === Number(id)) - return { title: category?.title, count: total } + return { title: category?.title, count: dynamicCount } } if (infoFrom === "feed") { const feed = feeds.find((f) => f.id === Number(id)) - return { title: feed?.title, count: total } + return { title: feed?.title, count: dynamicCount } } } const infoMap = { - all: { key: "sidebar.all", count: total }, - today: { key: "sidebar.today", count: total }, - starred: { key: "sidebar.starred", count: total }, - history: { key: "sidebar.history", count: total }, + all: { key: "sidebar.all", count: dynamicCount }, + today: { key: "sidebar.today", count: dynamicCount }, + starred: { key: "sidebar.starred", count: dynamicCount }, + history: { key: "sidebar.history", count: dynamicCount }, } const info = infoMap[infoFrom] || { key: "", count: 0 } return { title: info.key ? polyglot.t(info.key) : "", count: info.count } - }, [infoFrom, id, categories, feeds, total, polyglot]) + }, [infoFrom, id, categories, feeds, dynamicCount, polyglot]) const toggleOrderDirection = () => { const newOrderDirection = orderDirection === "desc" ? "asc" : "desc" diff --git a/src/components/Content/Content.jsx b/src/components/Content/Content.jsx index 581731b6e..739f61faf 100644 --- a/src/components/Content/Content.jsx +++ b/src/components/Content/Content.jsx @@ -21,7 +21,13 @@ import useEntryActions from "@/hooks/useEntryActions" import useKeyHandlers from "@/hooks/useKeyHandlers" import { polyglotState } from "@/hooks/useLanguage" import useScreenWidth from "@/hooks/useScreenWidth" -import { contentState, setActiveContent, setInfoFrom, setOffset } from "@/store/contentState" +import { + contentState, + setActiveContent, + setInfoFrom, + setInfoId, + setOffset, +} from "@/store/contentState" import { dataState } from "@/store/dataState" import { duplicateHotkeysState, hotkeysState } from "@/store/hotkeysState" import { settingsState } from "@/store/settingsState" @@ -168,6 +174,7 @@ const Content = ({ info, getEntries, markAllAsRead }) => { useEffect(() => { setInfoFrom(info.from) + setInfoId(info.id) if (activeContent) { setActiveContent(null) } diff --git a/src/components/Content/FooterPanel.jsx b/src/components/Content/FooterPanel.jsx index a1892fe9b..a7cd38a79 100644 --- a/src/components/Content/FooterPanel.jsx +++ b/src/components/Content/FooterPanel.jsx @@ -7,6 +7,7 @@ import { IconStarFill, } from "@arco-design/web-react/icon" import { useStore } from "@nanostores/react" +import { useEffect } from "react" import { getCounters } from "@/apis" import CustomTooltip from "@/components/ui/CustomTooltip" @@ -104,6 +105,12 @@ const FooterPanel = ({ info, refreshArticleList, markAllAsRead }) => { ) } + useEffect(() => { + if (info.from === "starred" && showStatus !== "unread") { + updateSettings({ showStatus: "all" }) + } + }, [info.from, showStatus]) + return (