refactor(desktop): use inbox store

apps/desktop/layer/renderer/src/hooks/biz/useEntryActions.tsx

@@ -1,6 +1,7 @@
 import { isMobile } from "@follow/components/hooks/useMobile.js"
 import { FeedViewType, UserRole, views } from "@follow/constants"
 import { IN_ELECTRON } from "@follow/shared/constants"
+import { useIsInbox } from "@follow/store/inbox/hooks"
 import { doesTextContainHTML } from "@follow/utils/utils"
 import { useMemo } from "react"
 
@@ -27,7 +28,6 @@ import { useToolbarOrderMap } from "~/modules/customize-toolbar/hooks"
 import type { FlatEntryModel } from "~/store/entry"
 import { useEntry } from "~/store/entry"
 import { useFeedById } from "~/store/feed"
-import { useInboxById } from "~/store/inbox"
 
 export const enableEntryReadability = async ({ id, url }: { id: string; url: string }) => {
   const status = getReadabilityStatus()[id]
@@ -186,8 +186,7 @@ export const useEntryActions = ({
     }
   })
 
-  const inbox = useInboxById(entry?.inboxId)
-  const isInbox = !!inbox
+  const isInbox = useIsInbox(entry?.inboxId)
   const isShowSourceContent = useShowSourceContent()
   const isShowAISummaryAuto = useShowAISummaryAuto(entry?.summary)
   const isShowAISummaryOnce = useShowAISummaryOnce()

apps/desktop/layer/renderer/src/hooks/biz/useFeedActions.tsx

@@ -1,6 +1,7 @@
 import type { FeedViewType } from "@follow/constants"
 import { IN_ELECTRON } from "@follow/shared/constants"
 import { env } from "@follow/shared/env.desktop"
+import { useInboxById, useIsInbox } from "@follow/store/inbox/hooks"
 import { isBizId } from "@follow/utils/utils"
 import { useMutation } from "@tanstack/react-query"
 import { useMemo } from "react"
@@ -26,7 +27,6 @@ import { useCategoryCreationModal } from "~/modules/settings/tabs/lists/hooks"
 import { ListCreationModalContent } from "~/modules/settings/tabs/lists/modals"
 import { useResetFeed } from "~/queries/feed"
 import { getFeedById, useFeedById } from "~/store/feed"
-import { useInboxById } from "~/store/inbox"
 import { listActions, useListById, useOwnedListByView } from "~/store/list"
 import {
   subscriptionActions,
@@ -448,11 +448,11 @@ export const useListActions = ({ listId, view }: { listId: string; view?: FeedVi
 
 export const useInboxActions = ({ inboxId }: { inboxId: string }) => {
   const { t } = useTranslation()
-  const inbox = useInboxById(inboxId)
+  const isInbox = useIsInbox(inboxId)
   const { present } = useModalStack()
 
   const items = useMemo(() => {
-    if (!inbox) return []
+    if (!isInbox) return []
 
     const items: FollowMenuItem[] = [
       new MenuItemText({
@@ -461,7 +461,7 @@ export const useInboxActions = ({ inboxId }: { inboxId: string }) => {
         click: () => {
           present({
             title: t("sidebar.feed_actions.edit_inbox"),
-            content: ({ dismiss }) => <InboxForm asWidget id={inboxId} onSuccess={dismiss} />,
+            content: () => <InboxForm asWidget id={inboxId} />,
           })
         },
       }),
@@ -476,7 +476,7 @@ export const useInboxActions = ({ inboxId }: { inboxId: string }) => {
     ]
 
     return items
-  }, [inbox, t, inboxId, present])
+  }, [isInbox, t, inboxId, present])
 
   return { items }
 }

apps/desktop/layer/renderer/src/hooks/common/useFeedSafeUrl.ts

@@ -1,9 +1,9 @@
+import { useIsInbox } from "@follow/store/inbox/hooks"
 import { resolveUrlWithBase } from "@follow/utils/utils"
 import { useMemo } from "react"
 
 import { useEntry } from "~/store/entry"
 import { useFeedById } from "~/store/feed"
-import { useInboxById } from "~/store/inbox"
 
 export const useFeedSafeUrl = (entryId: string) => {
   const entry = useEntry(entryId, (state) => {
@@ -19,10 +19,10 @@ export const useFeedSafeUrl = (entryId: string) => {
     type: feed?.type,
     siteUrl: feed?.siteUrl,
   }))
-  const inbox = useInboxById(entry?.inboxId, (inbox) => inbox !== null)
+  const isInbox = useIsInbox(entry?.inboxId)
 
   return useMemo(() => {
-    if (inbox) return entry?.authorUrl
+    if (isInbox) return entry?.authorUrl
     const href = entry?.url
     if (!href) return "#"
 
@@ -35,5 +35,5 @@ export const useFeedSafeUrl = (entryId: string) => {
     const feedSiteUrl = feed?.type === "feed" ? feed?.siteUrl : null
     if (feedSiteUrl) return resolveUrlWithBase(href, feedSiteUrl)
     return href
-  }, [entry?.authorUrl, entry?.url, feed?.type, feed?.siteUrl, inbox])
+  }, [entry?.authorUrl, entry?.url, feed?.type, feed?.siteUrl, isInbox])
 }

apps/desktop/layer/renderer/src/modules/discover/DiscoverInboxList.tsx

@@ -7,7 +7,6 @@ import { useEventCallback } from "usehooks-ts"
 import { useUserRole } from "~/atoms/user"
 import { useModalStack } from "~/components/ui/modal/stacked/hooks"
 import { CustomSafeError } from "~/errors/CustomSafeError"
-import { useInboxList } from "~/queries/inboxes"
 
 import { useActivationModal } from "../activation"
 import { InboxForm } from "./InboxForm"
@@ -39,7 +38,6 @@ const useCanCreateMoreInboxAndNotify = () => {
 }
 export function DiscoverInboxList() {
   const { t } = useTranslation()
-  const { refetch } = useInboxList()
 
   const { present } = useModalStack()
 
@@ -68,15 +66,7 @@ export function DiscoverInboxList() {
             preCheck() &&
             present({
               title: t("sidebar.feed_actions.new_inbox"),
-              content: ({ dismiss }) => (
-                <InboxForm
-                  asWidget
-                  onSuccess={() => {
-                    refetch()
-                    dismiss()
-                  }}
-                />
-              ),
+              content: () => <InboxForm asWidget />,
             })
           }
         >

apps/desktop/layer/renderer/src/modules/discover/InboxForm.tsx

@@ -10,9 +10,10 @@ import {
   FormMessage,
 } from "@follow/components/ui/form/index.jsx"
 import { Input } from "@follow/components/ui/input/index.js"
-import { FeedViewType } from "@follow/constants"
-import type { InboxModel } from "@follow/models/types"
 import { env } from "@follow/shared/env.desktop"
+import { useInboxById } from "@follow/store/inbox/hooks"
+import { inboxSyncService } from "@follow/store/inbox/store"
+import type { InboxModel } from "@follow/store/inbox/types"
 import { cn } from "@follow/utils/utils"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation } from "@tanstack/react-query"
@@ -21,23 +22,14 @@ import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 import { z } from "zod"
 
-import { apiClient } from "~/lib/api-fetch"
+import { useCurrentModal } from "~/components/ui/modal/stacked/hooks"
 import { createErrorToaster } from "~/lib/error-parser"
 import { FollowSummary } from "~/modules/feed/feed-summary"
-import { useInbox } from "~/queries/inboxes"
-import { useInboxById } from "~/store/inbox"
-import { subscriptionActions } from "~/store/subscription"
 
 export const InboxForm: Component<{
   id?: string
   asWidget?: boolean
-  onSuccess?: () => void
-}> = ({ id: _id, asWidget, onSuccess }) => {
-  const queryParams = { id: _id }
-
-  const feedQuery = useInbox(queryParams)
-
-  const id = feedQuery.data?.id || _id
+}> = ({ id, asWidget }) => {
   const inbox = useInboxById(id)
 
   const isSubscribed = true
@@ -59,7 +51,6 @@ export const InboxForm: Component<{
       )}
       <InboxInnerForm
         {...{
-          onSuccess,
           inbox,
         }}
       />
@@ -78,13 +69,9 @@ const formSchema = z.object({
   title: z.string(),
 })
 
-const InboxInnerForm = ({
-  onSuccess,
-  inbox,
-}: {
-  onSuccess?: () => void
-  inbox?: Nullable<InboxModel>
-}) => {
+const InboxInnerForm = ({ inbox }: { inbox?: Nullable<InboxModel> }) => {
+  const currentModal = useCurrentModal()
+
   const { t } = useTranslation()
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -96,33 +83,25 @@ const InboxInnerForm = ({
 
   const mutationCreate = useMutation({
     mutationFn: async ({ handle, title }: { handle: string; title: string }) => {
-      await apiClient.inboxes.$post({
-        json: {
-          handle,
-          title,
-        },
+      await inboxSyncService.createInbox({
+        handle,
+        title,
       })
-      onSuccess?.()
     },
     onSuccess: (_) => {
-      subscriptionActions.fetchByView(FeedViewType.Articles)
       toast.success(t("discover.inbox_create_success"))
     },
     onError: createErrorToaster(t("discover.inbox_create_error")),
   })
 
   const mutationChange = useMutation({
     mutationFn: async ({ handle, title }: { handle: string; title: string }) => {
-      await apiClient.inboxes.$put({
-        json: {
-          handle,
-          title,
-        },
+      await inboxSyncService.updateInbox({
+        handle,
+        title,
       })
-      onSuccess?.()
     },
     onSuccess: () => {
-      subscriptionActions.fetchByView(FeedViewType.Articles)
       toast.success(t("discover.inbox_update_success"))
     },
     onError: createErrorToaster(t("discover.inbox_update_error")),
@@ -134,6 +113,7 @@ const InboxInnerForm = ({
     } else {
       mutationCreate.mutate({ handle: values.handle, title: values.title })
     }
+    currentModal.dismiss?.()
   }
 
   return (

apps/desktop/layer/renderer/src/modules/discover/InboxTable.electron.tsx

@@ -1,4 +1,3 @@
-import { LoadingCircle } from "@follow/components/ui/loading/index.jsx"
 import {
   Table,
   TableBody,
@@ -7,12 +6,10 @@ import {
   TableHeader,
   TableRow,
 } from "@follow/components/ui/table/index.jsx"
+import { useInboxById, useInboxList } from "@follow/store/inbox/hooks"
 import { memo } from "react"
 import { useTranslation } from "react-i18next"
 
-import { useInboxList } from "~/queries/inboxes"
-import { useInboxById } from "~/store/inbox"
-
 import { InboxActions, InboxEmail, InboxSecret } from "./InboxTable.shared"
 
 export const InboxTable = () => {
@@ -29,19 +26,7 @@ export const InboxTable = () => {
           <TableHead className="center px-0">{t("discover.inbox.actions")}</TableHead>
         </TableRow>
       </TableHeader>
-      <TableBody>
-        {inboxes.isLoading ? (
-          <TableRow>
-            <TableCell size="sm" colSpan={5}>
-              <div className="center w-full">
-                <LoadingCircle size="large" />
-              </div>
-            </TableCell>
-          </TableRow>
-        ) : (
-          inboxes.data?.map((inbox) => <Row id={inbox.id} key={inbox.id} />)
-        )}
-      </TableBody>
+      <TableBody>{inboxes?.map((inbox) => <Row id={inbox.id} key={inbox.id} />)}</TableBody>
     </Table>
   )
 }

apps/desktop/layer/renderer/src/modules/discover/InboxTable.mobile.tsx

@@ -1,20 +1,15 @@
-import { LoadingCircle } from "@follow/components/ui/loading/index.jsx"
+import { useInboxById, useInboxList } from "@follow/store/inbox/hooks"
 import { memo } from "react"
 
-import { useInboxList } from "~/queries/inboxes"
-import { useInboxById } from "~/store/inbox"
-
 import { InboxActions, InboxEmail, InboxSecret } from "./InboxTable.shared"
 
 export const InboxTable = () => {
   const inboxes = useInboxList()
-  return inboxes.isLoading ? (
-    <div className="center w-full">
-      <LoadingCircle size="large" />
-    </div>
-  ) : (
+  return (
     <ul className="mt-4 flex flex-col gap-2">
-      {inboxes.data?.map((inbox) => <Row id={inbox.id} key={inbox.id} />)}
+      {inboxes.map((inbox) => (
+        <Row id={inbox.id} key={inbox.id} />
+      ))}
     </ul>
   )
 }

apps/desktop/layer/renderer/src/modules/discover/InboxTable.shared.tsx

@@ -1,15 +1,13 @@
 import { ActionButton, Button } from "@follow/components/ui/button/index.js"
-import { FeedViewType } from "@follow/constants"
 import { env } from "@follow/shared/env.desktop"
+import { inboxSyncService } from "@follow/store/inbox/store"
 import { useMutation } from "@tanstack/react-query"
 import { useTranslation } from "react-i18next"
 import { toast } from "sonner"
 
 import { CopyButton } from "~/components/ui/button/CopyButton"
 import { useCurrentModal, useModalStack } from "~/components/ui/modal/stacked/hooks"
 import { createErrorToaster } from "~/lib/error-parser"
-import { inboxActions } from "~/store/inbox"
-import { subscriptionActions } from "~/store/subscription"
 
 import { InboxForm } from "./InboxForm"
 
@@ -62,7 +60,7 @@ export const InboxActions = ({ id }: { id: string }) => {
         onClick={() => {
           present({
             title: t("sidebar.feed_actions.edit_inbox"),
-            content: ({ dismiss }) => <InboxForm asWidget id={id} onSuccess={dismiss} />,
+            content: () => <InboxForm asWidget id={id} />,
           })
         }}
       >
@@ -78,10 +76,9 @@ const ConfirmDestroyModalContent = ({ id }: { id: string }) => {
 
   const mutationDestroy = useMutation({
     mutationFn: async (id: string) => {
-      return inboxActions.deleteInbox(id)
+      return inboxSyncService.deleteInbox(id)
     },
     onSuccess: () => {
-      subscriptionActions.fetchByView(FeedViewType.Articles)
       toast.success(t("discover.inbox_destroy_success"))
     },
     onMutate: () => {

apps/desktop/layer/renderer/src/modules/entry-column/templates/list-item-template.tsx

@@ -1,5 +1,6 @@
 import { useMobile } from "@follow/components/hooks/useMobile.js"
 import { EllipsisHorizontalTextWithTooltip } from "@follow/components/ui/typography/index.js"
+import { useInboxById } from "@follow/store/inbox/hooks"
 import { clsx, cn, formatEstimatedMins, formatTimeToSeconds, isSafari } from "@follow/utils/utils"
 import { useMemo } from "react"
 import { titleCase } from "title-case"
@@ -18,7 +19,6 @@ import { FeedIcon } from "~/modules/feed/feed-icon"
 import { FeedTitle } from "~/modules/feed/feed-title"
 import { useEntry } from "~/store/entry/hooks"
 import { getPreferredTitle, useFeedById } from "~/store/feed"
-import { useInboxById } from "~/store/inbox"
 
 import { StarIcon } from "../star-icon"
 import type { UniversalItemProps } from "../types"

apps/desktop/layer/renderer/src/modules/entry-content/components/EntryTitle.tsx

@@ -1,3 +1,4 @@
+import { useInboxById } from "@follow/store/inbox/hooks"
 import { formatEstimatedMins, formatTimeToSeconds } from "@follow/utils"
 import { titleCase } from "title-case"
 
@@ -11,7 +12,6 @@ import { FeedIcon } from "~/modules/feed/feed-icon"
 import { useEntryTranslation } from "~/store/ai/hook"
 import { useEntry, useEntryReadHistory } from "~/store/entry"
 import { getPreferredTitle, useFeedById } from "~/store/feed"
-import { useInboxById } from "~/store/inbox"
 
 import { EntryTranslation } from "../../entry-column/translation"