feat: delete or rename category for mobile, improve local data update, close #3945

hyoban · hyoban · commit f108a45601e2 · 2025-06-18T16:14:52.000+08:00
diff --git a/apps/desktop/layer/renderer/src/modules/subscription-column/CategoryRemoveDialogContent.tsx b/apps/desktop/layer/renderer/src/modules/subscription-column/CategoryRemoveDialogContent.tsx
@@ -1,4 +1,5 @@
 import { Button } from "@follow/components/ui/button/index.js"
+import type { FeedViewType } from "@follow/constants"
 import { subscriptionSyncService } from "@follow/store/subscription/store"
 import { useMutation } from "@tanstack/react-query"
 import { Trans, useTranslation } from "react-i18next"
@@ -8,10 +9,16 @@ import { createErrorToaster } from "~/lib/error-parser"
 
 import { useCurrentModal } from "../../components/ui/modal/stacked/hooks"
 
-export function CategoryRemoveDialogContent({ feedIdList }: { feedIdList: string[] }) {
+export function CategoryRemoveDialogContent({
+  category,
+  view,
+}: {
+  category: string
+  view: FeedViewType
+}) {
   const { t } = useTranslation()
   const deleteMutation = useMutation({
-    mutationFn: () => subscriptionSyncService.deleteCategory(feedIdList),
+    mutationFn: () => subscriptionSyncService.deleteCategory({ category, view }),
     onError: createErrorToaster(t("sidebar.category_remove_dialog.error")),
     onSuccess: () => {
       toast.success(t("sidebar.category_remove_dialog.success"))
diff --git a/apps/desktop/layer/renderer/src/modules/subscription-column/FeedCategory.tsx b/apps/desktop/layer/renderer/src/modules/subscription-column/FeedCategory.tsx
@@ -48,7 +48,7 @@ import { UnreadNumber } from "./UnreadNumber"
 type FeedId = string
 interface FeedCategoryProps {
   data: FeedId[]
-  view?: number
+  view: FeedViewType
   categoryOpenStateData: Record<string, boolean>
 }
 
@@ -251,7 +251,7 @@ function FeedCategoryImpl({ data: ids, view, categoryOpenStateData }: FeedCatego
                 title: t("sidebar.feed_column.context_menu.delete_category_confirmation", {
                   folderName,
                 }),
-                content: () => <CategoryRemoveDialogContent feedIdList={ids} />,
+                content: () => <CategoryRemoveDialogContent category={folderName!} view={view} />,
               })
             },
           }),
@@ -313,6 +313,7 @@ function FeedCategoryImpl({ data: ids, view, categoryOpenStateData }: FeedCatego
             {isCategoryEditing ? (
               <RenameCategoryForm
                 currentCategory={folderName!}
+                view={view}
                 onFinished={() => setIsCategoryEditing(false)}
               />
             ) : (
@@ -375,8 +376,9 @@ export const FeedCategoryAutoHideUnread = memo(function FeedCategoryAutoHideUnre
 
 const RenameCategoryForm: FC<{
   currentCategory: string
+  view: FeedViewType
   onFinished: () => void
-}> = ({ currentCategory, onFinished }) => {
+}> = ({ currentCategory, view, onFinished }) => {
   const navigate = useNavigateEntry()
   const { t } = useTranslation()
   const renameMutation = useMutation({
@@ -386,7 +388,7 @@ const RenameCategoryForm: FC<{
     }: {
       lastCategory: string
       newCategory: string
-    }) => subscriptionSyncService.renameCategory(lastCategory, newCategory),
+    }) => subscriptionSyncService.renameCategory({ lastCategory, newCategory, view }),
     onMutate({ lastCategory, newCategory }) {
       const routeParams = getRouteParams()
 
diff --git a/apps/desktop/layer/renderer/src/modules/subscription-column/SubscriptionList.entry.tsx b/apps/desktop/layer/renderer/src/modules/subscription-column/SubscriptionList.entry.tsx
@@ -1,4 +1,5 @@
 import { withResponsiveSyncComponent } from "@follow/components/utils/selector.js"
+import type { FeedViewType } from "@follow/constants"
 import { cn } from "@follow/utils"
 
 import { SubscriptionList as FeedListDesktop } from "./SubscriptionList.electron"
@@ -21,7 +22,7 @@ export const SubscriptionList = function SubscriptionList(props: SubscriptionPro
 }
 
 export type SubscriptionProps = ComponentType<
-  { className?: string; view: number } & {
+  { className?: string; view: FeedViewType } & {
     ref?: React.Ref<HTMLDivElement | null> | ((node: HTMLDivElement | null) => void)
   }
 >
diff --git a/apps/desktop/layer/renderer/src/modules/subscription-column/sort-by/types.tsx b/apps/desktop/layer/renderer/src/modules/subscription-column/sort-by/types.tsx
@@ -1,7 +1,7 @@
 import type { FeedViewType } from "@follow/constants"
 
 export type FeedListProps = {
-  view: number
+  view: FeedViewType
   data: Record<string, string[]>
   categoryOpenStateData: Record<string, boolean>
 }
diff --git a/apps/mobile/src/modules/context-menu/feeds.tsx b/apps/mobile/src/modules/context-menu/feeds.tsx
@@ -255,12 +255,14 @@ const generateSubscriptionContextMenu = (navigation: Navigation, id: string) =>
 
 export const SubscriptionFeedCategoryContextMenu = ({
   feedIds,
+  category,
 
   children,
   asChild,
   style,
 }: PropsWithChildren<{
   feedIds: string[]
+  category: string
 
   asChild?: boolean
   style?: CSSProperties
@@ -316,15 +318,55 @@ export const SubscriptionFeedCategoryContextMenu = ({
           </ContextMenu.SubContent>
         </ContextMenu.Sub>
 
-        <ContextMenu.Item key="EditCategory">
+        <ContextMenu.Item
+          key="EditCategory"
+          onSelect={() => {
+            Alert.prompt(
+              t("operation.rename_category"),
+              t("operation.enter_new_name_for_category", {
+                category,
+              }),
+              (newCategory) => {
+                if (!newCategory) return
+                subscriptionSyncService.renameCategory({
+                  lastCategory: category,
+                  newCategory,
+                  view: currentView,
+                })
+              },
+            )
+          }}
+        >
           <ContextMenu.ItemTitle>{t("operation.rename_category")}</ContextMenu.ItemTitle>
           <ContextMenu.ItemIcon
             ios={{
               name: "square.and.pencil",
             }}
           />
         </ContextMenu.Item>
-        <ContextMenu.Item key="DeleteCategory" destructive>
+        <ContextMenu.Item
+          key="DeleteCategory"
+          destructive
+          onSelect={() => {
+            Alert.alert(
+              t("operation.delete_category_which", { category }),
+              t("operation.delete_category_confirm"),
+              [
+                {
+                  text: t("words.cancel", { ns: "common" }),
+                  style: "cancel",
+                },
+                {
+                  text: t("words.delete", { ns: "common" }),
+                  style: "destructive",
+                  onPress: () => {
+                    subscriptionSyncService.deleteCategory({ category, view: currentView })
+                  },
+                },
+              ],
+            )
+          }}
+        >
           <ContextMenu.ItemTitle>{t("operation.delete_category")}</ContextMenu.ItemTitle>
           <ContextMenu.ItemIcon
             ios={{
diff --git a/apps/mobile/src/modules/subscription/CategoryGrouped.tsx b/apps/mobile/src/modules/subscription/CategoryGrouped.tsx
@@ -47,7 +47,11 @@ export const CategoryGrouped = memo(
     return (
       <>
         <View style={{ marginHorizontal: GROUPED_LIST_MARGIN }}>
-          <SubscriptionFeedCategoryContextMenu feedIds={subscriptionIds} asChild>
+          <SubscriptionFeedCategoryContextMenu
+            feedIds={subscriptionIds}
+            category={category}
+            asChild
+          >
             <ItemPressable
               itemStyle={ItemPressableStyle.Grouped}
               onPress={() => {
diff --git a/locales/mobile/default/en.json b/locales/mobile/default/en.json
@@ -34,7 +34,10 @@
   "operation.copy_which": "Copy {{which}}",
   "operation.copy_which_success": "{{which}} Copied to Clipboard",
   "operation.delete_category": "Delete Category",
+  "operation.delete_category_confirm": "This operation will delete your category, but the feeds it contains will be retained and grouped by website.",
+  "operation.delete_category_which": "Delete Category {{category}}",
   "operation.edit": "Edit",
+  "operation.enter_new_name_for_category": "Enter new name for {{category}}",
   "operation.error_since": "Error since",
   "operation.mark_all_as_read": "Mark all as read",
   "operation.mark_all_as_read_confirm": "Confirm mark all as read?",
diff --git a/packages/internal/database/src/services/subscription.ts b/packages/internal/database/src/services/subscription.ts
@@ -40,6 +40,10 @@ class SubscriptionServiceStatic implements Resetable {
       .where(eq(subscriptionsTable.id, subscription.id))
   }
 
+  async patchMany({ feedIds, data }: { feedIds: string[]; data: Partial<SubscriptionSchema> }) {
+    await db.update(subscriptionsTable).set(data).where(inArray(subscriptionsTable.feedId, feedIds))
+  }
+
   async deleteNotExists(existsIds: string[], view?: FeedViewType) {
     const notExistsIds = await db.query.subscriptionsTable.findMany({
       where: and(
diff --git a/packages/internal/store/src/subscription/getter.ts b/packages/internal/store/src/subscription/getter.ts
@@ -67,3 +67,19 @@ export const getSubscriptionByCategory = ({
 
 export const getFolderFeedsByFeedId = ({ feedId, view }: { feedId?: string; view: FeedViewType }) =>
   folderFeedsByFeedIdSelector({ feedId, view })(useSubscriptionStore.getState())
+
+export const getCategoryFeedIds = (category: string, view: FeedViewType): string[] => {
+  const feedIds = [] as string[]
+  const state = useSubscriptionStore.getState()
+  for (const id of state.feedIdByView[view].keys()) {
+    const subscription = state.data[id]
+    if (!subscription) continue
+    if (
+      subscription.view === view &&
+      (subscription.category === category || getDefaultCategory(subscription) === category)
+    ) {
+      feedIds.push(id)
+    }
+  }
+  return feedIds
+}
diff --git a/packages/internal/store/src/subscription/store.ts b/packages/internal/store/src/subscription/store.ts
@@ -15,6 +15,7 @@ import { dbStoreMorph } from "../morph/db-store"
 import { honoMorph } from "../morph/hono"
 import { buildSubscriptionDbId, storeDbMorph } from "../morph/store-db"
 import { whoami } from "../user/getters"
+import { getCategoryFeedIds } from "./getter"
 import type { SubscriptionForm, SubscriptionModel } from "./types"
 import { getDefaultCategory, getInboxStoreId, getSubscriptionStoreId } from "./utils"
 
@@ -452,16 +453,52 @@ class SubscriptionSyncService {
     await tx.run()
   }
 
-  async deleteCategory(ids: string[]) {
-    // TODO: handle local state update
-    await apiClient().categories.$delete({
-      json: {
-        feedIdList: ids,
-        deleteSubscriptions: false,
-      },
+  async deleteCategory({ category, view }: { category: string; view: FeedViewType }) {
+    const feedIds = getCategoryFeedIds(category, view)
+
+    const tx = createTransaction()
+    tx.store(() => {
+      immerSet((draft) => {
+        for (const feedId of feedIds) {
+          const subscription = draft.data[feedId]
+          if (!subscription) continue
+          subscription.category = null
+        }
+        draft.categories[view].delete(category)
+      })
+    })
+
+    tx.request(async () => {
+      await apiClient().categories.$delete({
+        json: {
+          feedIdList: feedIds,
+          deleteSubscriptions: false,
+        },
+      })
+    })
+
+    tx.rollback(() => {
+      immerSet((draft) => {
+        for (const feedId of feedIds) {
+          const subscription = draft.data[feedId]
+          if (!subscription) continue
+          subscription.category = category
+        }
+
+        draft.categories[view].add(category)
+      })
+    })
+
+    tx.persist(() => {
+      return SubscriptionService.patchMany({
+        feedIds,
+        data: {
+          category: null,
+        },
+      })
     })
 
-    this.fetch()
+    await tx.run()
   }
 
   async changeCategoryView(
@@ -491,28 +528,74 @@ class SubscriptionSyncService {
     )
   }
 
-  async renameCategory(lastCategory: string, newCategory: string) {
-    // TODO: handle local state update
-    const subscriptionIds = [] as string[]
-    const state = get()
-    for (const feedId in state.data) {
-      const subscription = state.data[feedId]!
-      if (
-        subscription.category === lastCategory ||
-        getDefaultCategory(subscription) === lastCategory
-      ) {
-        subscriptionIds.push(feedId)
-      }
-    }
+  async renameCategory({
+    lastCategory,
+    newCategory,
+    view,
+  }: {
+    lastCategory: string
+    newCategory: string
+    view: FeedViewType
+  }) {
+    const feedIds = getCategoryFeedIds(lastCategory, view)
 
-    await apiClient().categories.$patch({
-      json: {
-        feedIdList: subscriptionIds,
-        category: newCategory,
-      },
+    const tx = createTransaction()
+    tx.store(() => {
+      immerSet((draft) => {
+        for (const id of feedIds) {
+          const subscription = draft.data[id]
+          if (!subscription) continue
+          subscription.category = newCategory
+        }
+        draft.categories[view].add(newCategory)
+        draft.categories[view].delete(lastCategory)
+
+        const lastCategoryOpenState = draft.categoryOpenStateByView[view][lastCategory]
+        if (typeof lastCategoryOpenState === "boolean") {
+          draft.categoryOpenStateByView[view][newCategory] = lastCategoryOpenState
+          delete draft.categoryOpenStateByView[view][lastCategory]
+        }
+      })
     })
 
-    await this.fetch()
+    tx.request(async () => {
+      await apiClient().categories.$patch({
+        json: {
+          feedIdList: feedIds,
+          category: newCategory,
+        },
+      })
+    })
+
+    tx.rollback(() => {
+      immerSet((draft) => {
+        for (const id of feedIds) {
+          const subscription = draft.data[id]
+          if (!subscription) continue
+          const defaultCategory = getDefaultCategory(subscription)
+          subscription.category = lastCategory !== defaultCategory ? lastCategory : null
+        }
+        draft.categories[view].delete(newCategory)
+        draft.categories[view].add(lastCategory)
+
+        const lastCategoryOpenState = draft.categoryOpenStateByView[view][newCategory]
+        if (typeof lastCategoryOpenState === "boolean") {
+          draft.categoryOpenStateByView[view][lastCategory] = lastCategoryOpenState
+          delete draft.categoryOpenStateByView[view][newCategory]
+        }
+      })
+    })
+
+    tx.persist(() => {
+      return SubscriptionService.patchMany({
+        feedIds,
+        data: {
+          category: newCategory,
+        },
+      })
+    })
+
+    await tx.run()
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import { withResponsiveSyncComponent } from "@follow/components/utils/selector.js"`
	`2`	`+import type { FeedViewType } from "@follow/constants"`
`2`	`3`	`import { cn } from "@follow/utils"`
`3`	`4`
`4`	`5`	`import { SubscriptionList as FeedListDesktop } from "./SubscriptionList.electron"`
`@@ -21,7 +22,7 @@ export const SubscriptionList = function SubscriptionList(props: SubscriptionPro`
`21`	`22`	`}`
`22`	`23`
`23`	`24`	`export type SubscriptionProps = ComponentType<`
`24`		`- { className?: string; view: number } & {`
	`25`	`+ { className?: string; view: FeedViewType } & {`
`25`	`26`	`ref?: React.Ref<HTMLDivElement \| null> \| ((node: HTMLDivElement \| null) => void)`
`26`	`27`	`}`
`27`	`28`	`>`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`import type { FeedViewType } from "@follow/constants"`
`2`	`2`
`3`	`3`	`export type FeedListProps = {`
`4`		`- view: number`
	`4`	`+ view: FeedViewType`
`5`	`5`	`data: Record<string, string[]>`
`6`	`6`	`categoryOpenStateData: Record<string, boolean>`
`7`	`7`	`}`