fix: feed store

Signed-off-by: Innei <i@innei.in>

src/renderer/src/hono.ts

@@ -21,20 +21,6 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
             };
             outputFormat: "json";
             status: 200;
-        } | {
-            input: {
-                json: {
-                    userId: string;
-                    amount: string;
-                    entryId?: string | undefined;
-                };
-            };
-            output: {
-                code: 1;
-                message: string;
-            };
-            outputFormat: "json";
-            status: 400;
         };
     };
     "/wallets": {
@@ -49,9 +35,9 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                 code: 0;
                 data: {
                     userId: string;
-                    createdAt: string;
                     addressIndex: number;
                     address: string | null;
+                    createdAt: string;
                     powerToken: bigint;
                 }[];
             };
@@ -64,9 +50,9 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                 code: 0;
                 data: {
                     userId: string;
-                    createdAt: string;
                     addressIndex: number;
                     address: string | null;
+                    createdAt: string;
                     powerToken: bigint;
                 };
             };

src/renderer/src/hooks/biz/useEntryActions.tsx

@@ -1,7 +1,7 @@
 import { apiClient } from "@renderer/lib/api-fetch"
 import { client } from "@renderer/lib/client"
 import type { EntryModel } from "@renderer/models"
-import { entryActions } from "@renderer/store/entry/entry"
+import { entryActions } from "@renderer/store"
 import { useMutation, useQuery } from "@tanstack/react-query"
 import type { FetchError } from "ofetch"
 import { ofetch } from "ofetch"

src/renderer/src/hooks/biz/useNavigateEntry.ts

@@ -5,11 +5,15 @@ import { isUndefined } from "lodash-es"
 import { useCallback } from "react"
 import { useNavigate, useParams, useSearchParams } from "react-router-dom"
 
+import { useRefValue } from "../common"
+
 type NavigateEntryOptions = Partial<{
   feedId: string | null
   entryId: string | null
   view: FeedViewType
   level: string | null
+
+  category: string | null
 }>
 /**
  * @description a hook to navigate to `feedId`, `entryId`, add search for `view`, `level`
@@ -18,26 +22,37 @@ export const useNavigateEntry = () => {
   const [searchParams] = useSearchParams()
   const navigate = useNavigate()
   const params = useParams()
+
+  const paramsRef = useRefValue(params)
+  const searchRef = useRefValue(searchParams)
   return useCallback(
     (options: NavigateEntryOptions) => {
-      const { entryId, feedId, level, view } = options || {}
-      let finalFeedId = feedId || params.feedId || ROUTE_FEED_PENDING
+      const { entryId, feedId, level, view, category } = options || {}
+      let finalFeedId = feedId || paramsRef.current.feedId || ROUTE_FEED_PENDING
 
       if ("feedId" in options && feedId === null) {
         finalFeedId = ROUTE_FEED_PENDING
       }
 
-      const nextSearchParams = new URLSearchParams(searchParams)
+      const nextSearchParams = new URLSearchParams(searchRef.current)
 
       !isUndefined(view) && nextSearchParams.set("view", view.toString())
       level && nextSearchParams.set("level", level.toString())
 
+      if ("category" in options) {
+        if (!category) {
+          nextSearchParams.delete("category")
+        } else {
+          nextSearchParams.set("category", category.toString())
+        }
+      }
+
       return navigate(
         `/feeds/${finalFeedId}/${
           entryId || ROUTE_FEED_PENDING
         }?${nextSearchParams.toString()}`,
       )
     },
-    [navigate, params.feedId, searchParams],
+    [navigate, paramsRef, searchRef],
   )
 }

src/renderer/src/hooks/biz/useRouteParams.ts

@@ -43,5 +43,6 @@ export const useRouteParms = () => {
     entryId: params.entryId || undefined,
     feedId: params.feedId || undefined,
     level: search.get("level") || undefined,
+    category: search.get("category") || undefined,
   }
 }

src/renderer/src/modules/entry-column/index.tsx

@@ -7,7 +7,9 @@ import {
   PopoverTrigger,
 } from "@renderer/components/ui/popover"
 import { useRead, useRefValue } from "@renderer/hooks"
+import { useNavigateEntry } from "@renderer/hooks/biz/useNavigateEntry"
 import {
+  useRouteEntryId,
   useRouteParms,
 } from "@renderer/hooks/biz/useRouteParams"
 import { apiClient } from "@renderer/lib/api-fetch"
@@ -16,11 +18,10 @@ import { buildStorageNS } from "@renderer/lib/ns"
 import { getEntriesParams } from "@renderer/lib/utils"
 import { useEntries } from "@renderer/queries/entries"
 import {
-  feedActions,
-  getCurrentEntryId,
+  entryActions,
   subscriptionActions,
+  useFeedHeaderTitle,
 } from "@renderer/store"
-import { entryActions } from "@renderer/store/entry/entry"
 import {
   useEntry,
   useEntryIdsByFeedIdOrView,
@@ -131,10 +132,14 @@ export function EntryColumn() {
     ),
   }
 
+  const navigate = useNavigateEntry()
   return (
     <div
       className="relative flex h-full flex-1 flex-col"
-      onClick={() => feedActions.setActiveEntry(null)}
+      onClick={() =>
+        navigate({
+          entryId: null,
+        })}
       data-total-count={virtuosoOptions.totalCount}
     >
       <ListHeader totalCount={virtuosoOptions.totalCount} />
@@ -256,6 +261,7 @@ const ListHeader: FC<{
     setMarkPopoverOpen(false)
   }, [routerParams])
 
+  const headerTitle = useFeedHeaderTitle()
   return (
     <div className="mb-5 flex w-full flex-col pl-11 pr-4 pt-2.5">
       <div className="flex w-full justify-end">
@@ -292,7 +298,7 @@ const ListHeader: FC<{
         </div>
       </div>
       <div>
-        <div className="text-lg font-bold leading-none">{routerParams?.name}</div>
+        <div className="text-lg font-bold leading-none">{headerTitle}</div>
         <div className="text-xs font-medium text-zinc-400">
           {totalCount || 0}
           {" "}
@@ -343,6 +349,9 @@ const EntryList: FC<VirtuosoProps<string, unknown>> = ({
 
   const dataRef = useRefValue(virtuosoOptions.data!)
 
+  const currentEntryIdRef = useRefValue(useRouteEntryId())
+
+  const navigate = useNavigateEntry()
   useEffect(() => {
     if (!virtuosoRef.current) return
     if (!$mainContainer) return
@@ -364,7 +373,7 @@ const EntryList: FC<VirtuosoProps<string, unknown>> = ({
         hotkeys(registerKeys, scope, (handler) => {
           const data = dataRef.current
           const currentActiveEntryIndex = data.indexOf(
-            getCurrentEntryId() || "",
+            currentEntryIdRef.current || "",
           )
 
           switch (handler.key) {
@@ -387,7 +396,10 @@ const EntryList: FC<VirtuosoProps<string, unknown>> = ({
                 index: nextIndex,
               })
               const nextId = data![nextIndex]
-              feedActions.setActiveEntry(nextId)
+
+              navigate({
+                entryId: nextId,
+              })
             }
           }
         })
@@ -409,7 +421,7 @@ const EntryList: FC<VirtuosoProps<string, unknown>> = ({
 
       document.removeEventListener("focusin", focusHandler)
     }
-  }, [$mainContainer])
+  }, [$mainContainer, currentEntryIdRef, dataRef, navigate])
 
   const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = useCallback(
     (e) => {

src/renderer/src/modules/entry-content/index.tsx

@@ -8,7 +8,7 @@ import {
   WrappedElementProvider,
 } from "@renderer/providers/wrapped-element-provider"
 import { Queries } from "@renderer/queries"
-import { useEntry, useFeedStore } from "@renderer/store"
+import { useEntry, useFeedHeaderTitle } from "@renderer/store"
 import { m } from "framer-motion"
 import { useEffect, useState } from "react"
 
@@ -18,8 +18,7 @@ import { setEntryTitleMeta } from "./atoms"
 import { EntryHeader } from "./header"
 
 export const EntryContent = ({ entryId }: { entryId: ActiveEntryId }) => {
-  const activeList = useFeedStore((state) => state.activeList)
-
+  const title = useFeedHeaderTitle()
   if (!entryId) {
     return (
       <m.div
@@ -28,7 +27,7 @@ export const EntryContent = ({ entryId }: { entryId: ActiveEntryId }) => {
         animate={{ opacity: 1, y: 0 }}
       >
         <Logo className="size-16 opacity-40 grayscale" />
-        {activeList?.name}
+        {title}
       </m.div>
     )
   }
@@ -169,7 +168,9 @@ const TitleMetaHandler: Component<{
   } = useEntry(entryId)!
 
   useEffect(() => {
-    if (!isAtTop && entryTitle && feedTitle) { setEntryTitleMeta({ title: entryTitle, description: feedTitle }) }
+    if (!isAtTop && entryTitle && feedTitle) {
+      setEntryTitleMeta({ title: entryTitle, description: feedTitle })
+    }
     return () => {
       setEntryTitleMeta(null)
     }

src/renderer/src/modules/feed-column/category.tsx

@@ -2,25 +2,21 @@ import {
   Collapsible,
   CollapsibleTrigger,
 } from "@renderer/components/ui/collapsible"
+import { useNavigateEntry } from "@renderer/hooks/biz/useNavigateEntry"
 import { useRouteParms } from "@renderer/hooks/biz/useRouteParams"
 import { levels } from "@renderer/lib/constants"
 import { showNativeMenu } from "@renderer/lib/native-menu"
 import { cn } from "@renderer/lib/utils"
 import type { FeedListModel } from "@renderer/models"
-import {
-  feedActions,
-  useUnreadStore,
-} from "@renderer/store"
+import { useUnreadStore } from "@renderer/store"
 import { AnimatePresence, m } from "framer-motion"
-import { useEffect, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 
 import { useModalStack } from "../../components/ui/modal/stacked/hooks"
 import { CategoryRemoveDialogContent } from "./category-remove-dialog"
 import { CategoryRenameContent } from "./category-rename-dialog"
 import { FeedItem } from "./item"
 
-const { setActiveList } = feedActions
-
 export function FeedCategory({
   data,
   view,
@@ -42,13 +38,17 @@ export function FeedCategory({
     }
   }, [expansion])
 
+  const navigate = useNavigateEntry()
+
   const setCategoryActive = () => {
     if (view !== undefined) {
-      setActiveList({
+      navigate({
+        entryId: null,
+        // TODO joint feedId is too long, need to be optimized
+        feedId: data.list.map((feed) => feed.feedId).join(","),
         level: levels.folder,
-        id: data.list.map((feed) => feed.feedId).join(","),
-        name: data.name,
         view,
+        category: data.name,
       })
     }
   }
@@ -62,6 +62,13 @@ export function FeedCategory({
       (a, b) => (state.data[b.feedId] || 0) - (state.data[a.feedId] || 0),
     ),
   )
+
+  const isActive = useMemo(
+    () =>
+      routerParams?.level === levels.folder &&
+      routerParams.feedId === data.list.map((feed) => feed.feedId).join(","),
+    [data.list, routerParams.feedId, routerParams?.level],
+  )
   const { present } = useModalStack()
   return (
     <Collapsible
@@ -73,9 +80,7 @@ export function FeedCategory({
         <div
           className={cn(
             "flex w-full items-center justify-between rounded-md px-2.5 transition-colors",
-            routerParams?.level === levels.folder &&
-            routerParams.name === data.name &&
-            "bg-native-active",
+            isActive && "bg-native-active",
           )}
           onClick={(e) => {
             e.stopPropagation()
@@ -154,7 +159,7 @@ export function FeedCategory({
             {sortByUnreadFeedList.map((feed) => (
               <FeedItem
                 key={feed.feedId}
-                feed={feed}
+                subscription={feed}
                 view={view}
                 className={data.name ? "pl-6" : "pl-2.5"}
               />