feat(mobile): edit list subscription

hyoban · hyoban · commit 13f110fecc70 · 2025-04-28T18:14:37.000+08:00
diff --git a/apps/mobile/src/database/schemas/index.ts b/apps/mobile/src/database/schemas/index.ts
@@ -30,7 +30,7 @@ export const subscriptionsTable = sqliteTable("subscriptions", {
   inboxId: text("inbox_id"),
   userId: text("user_id").notNull(),
   view: integer("view").notNull().$type<FeedViewType>(),
-  isPrivate: integer("is_private").notNull(),
+  isPrivate: integer("is_private", { mode: "boolean" }).notNull(),
   title: text("title"),
   category: text("category"),
   createdAt: text("created_at"),
diff --git a/apps/mobile/src/database/schemas/types.ts b/apps/mobile/src/database/schemas/types.ts
@@ -14,7 +14,11 @@ import type {
   usersTable,
 } from "."
 
-export type SubscriptionSchema = typeof subscriptionsTable.$inferSelect
+type NullWithUndefined<T> = {
+  [K in keyof T]: null extends T[K] ? T[K] | undefined : T[K]
+}
+
+export type SubscriptionSchema = NullWithUndefined<typeof subscriptionsTable.$inferSelect>
 
 export type FeedSchema = typeof feedsTable.$inferSelect
 
diff --git a/apps/mobile/src/modules/context-menu/lists.tsx b/apps/mobile/src/modules/context-menu/lists.tsx
@@ -5,9 +5,10 @@ import { useTranslation } from "react-i18next"
 import { Alert, Clipboard } from "react-native"
 
 import { ContextMenu } from "@/src/components/ui/context-menu"
+import { useNavigation } from "@/src/lib/navigation/hooks"
 import { toast } from "@/src/lib/toast"
+import { FollowScreen } from "@/src/screens/(modal)/FollowScreen"
 import { getList } from "@/src/store/list/getters"
-import { useIsOwnList } from "@/src/store/list/hooks"
 import { subscriptionSyncService } from "@/src/store/subscription/store"
 
 export const SubscriptionListItemContextMenu: FC<
@@ -16,15 +17,18 @@ export const SubscriptionListItemContextMenu: FC<
   }
 > = ({ id, children }) => {
   const { t } = useTranslation()
-  const isOwnList = useIsOwnList(id)
+  const navigation = useNavigation()
   const actions = useMemo(
     () => [
-      isOwnList && {
+      {
         title: t("operation.edit"),
         onSelect: () => {
           const list = getList(id)
           if (!list) return
-          // TODO
+          navigation.presentControllerView(FollowScreen, {
+            type: "list",
+            id: list.id,
+          })
         },
       },
       {
@@ -56,7 +60,7 @@ export const SubscriptionListItemContextMenu: FC<
         },
       },
     ],
-    [id, isOwnList, t],
+    [id, navigation, t],
   )
 
   return (
diff --git a/apps/mobile/src/modules/list/FollowList.tsx b/apps/mobile/src/modules/list/FollowList.tsx
@@ -19,23 +19,23 @@ import { GroupedInsetListCard } from "@/src/components/ui/grouped/GroupedList"
 import { IconWithFallback } from "@/src/components/ui/icon/fallback-icon"
 import { PlatformActivityIndicator } from "@/src/components/ui/loading/PlatformActivityIndicator"
 import { PowerIcon } from "@/src/icons/power"
-import { apiClient } from "@/src/lib/api-fetch"
 import { useNavigation, useScreenIsInSheetModal } from "@/src/lib/navigation/hooks"
 import { useSetModalScreenOptions } from "@/src/lib/navigation/ScreenOptionsContext"
 import { toast } from "@/src/lib/toast"
 import { useList } from "@/src/store/list/hooks"
 import { listSyncServices } from "@/src/store/list/store"
 import { useSubscriptionByListId } from "@/src/store/subscription/hooks"
+import { subscriptionSyncService } from "@/src/store/subscription/store"
 import { accentColor } from "@/src/theme/colors"
 
 import { FeedViewSelector } from "../feed/view-selector"
 
 export const FollowList = (props: { id: string }) => {
   const { id } = props
-  const list = useList(id as string)
+  const list = useList(id)
   const { isLoading } = useQuery({
     queryKey: ["list", id],
-    queryFn: () => listSyncServices.fetchListById({ id: id as string }),
+    queryFn: () => listSyncServices.fetchListById({ id }),
     enabled: !list,
   })
 
@@ -51,27 +51,32 @@ export const FollowList = (props: { id: string }) => {
 }
 
 const formSchema = z.object({
-  view: z.string(),
-  isPrivate: z.boolean().optional(),
+  view: z.number(),
+  isPrivate: z.boolean().default(false),
   title: z.string().optional(),
 })
-const defaultValues = { view: FeedViewType.Articles.toString() }
 
 const Impl = (props: { id: string }) => {
   const { id } = props
-  const list = useList(id as string)!
+  const list = useList(id)
 
-  const isSubscribed = useSubscriptionByListId(id as string)
+  const subscription = useSubscriptionByListId(id)
+  const isSubscribed = !!subscription
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-    defaultValues,
+    defaultValues: {
+      view: list?.view ?? FeedViewType.Articles,
+      isPrivate: subscription?.isPrivate,
+      title: subscription?.title ?? undefined,
+    },
   })
   const { isValid, isDirty } = form.formState
 
   const isModal = useScreenIsInSheetModal()
   const navigation = useNavigation()
   const submit = async () => {
+    if (!list) return
     const payload = form.getValues()
 
     const subscribeOrUpdate = async () => {
@@ -82,11 +87,16 @@ const Impl = (props: { id: string }) => {
         isPrivate: payload.isPrivate,
         title: payload.title,
       }
-      const $method = isSubscribed ? apiClient.subscriptions.$patch : apiClient.subscriptions.$post
 
-      await $method({
-        json: body,
-      })
+      if (isSubscribed) {
+        await subscriptionSyncService.edit({
+          ...subscription,
+          ...body,
+        })
+      } else {
+        await subscriptionSyncService.subscribe(body)
+      }
+
       if (isModal) {
         navigation.dismiss()
       } else {
@@ -125,6 +135,11 @@ const Impl = (props: { id: string }) => {
       gestureEnabled: !isDirty,
     })
   }, [isDirty, setModalOptions])
+
+  if (!list) {
+    return null
+  }
+
   return (
     <SafeNavigationScrollView
       className="bg-system-grouped-background"
diff --git a/apps/mobile/src/modules/subscription/items/ListSubscriptionItem.tsx b/apps/mobile/src/modules/subscription/items/ListSubscriptionItem.tsx
@@ -2,7 +2,9 @@ import { cn } from "@follow/utils"
 import { memo } from "react"
 import { Text, View } from "react-native"
 import Animated, { FadeOutUp } from "react-native-reanimated"
+import { useColor } from "react-native-uikit-colors"
 
+import { OouiUserAnonymous } from "@/src/components/icons/OouiUserAnonymous"
 import { GROUPED_ICON_TEXT_GAP, GROUPED_LIST_MARGIN } from "@/src/components/ui/grouped/constants"
 import { FallbackIcon } from "@/src/components/ui/icon/fallback-icon"
 import { Image } from "@/src/components/ui/image/Image"
@@ -11,6 +13,7 @@ import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
 import { useNavigation } from "@/src/lib/navigation/hooks"
 import { FeedScreen } from "@/src/screens/(stack)/feeds/[feedId]/FeedScreen"
 import { useList } from "@/src/store/list/hooks"
+import { useSubscription } from "@/src/store/subscription/hooks"
 import { useListUnreadCount } from "@/src/store/unread/hooks"
 
 import { SubscriptionListItemContextMenu } from "../../context-menu/lists"
@@ -21,7 +24,10 @@ import { UnreadCount } from "./UnreadCount"
 
 interface ListSubscriptionItemProps extends SubscriptionItemBaseProps {}
 export const ListSubscriptionItem = memo(({ id, isFirst, isLast }: ListSubscriptionItemProps) => {
+  const colorLabel = useColor("label")
+
   const list = useList(id)
+  const subscription = useSubscription(id)
   const unreadCount = useListUnreadCount(id)
   const navigation = useNavigation()
 
@@ -64,9 +70,20 @@ export const ListSubscriptionItem = memo(({ id, isFirst, isLast }: ListSubscript
               {!list.image && <FallbackIcon title={list.title} size={20} />}
             </View>
 
-            <Text className="text-label font-medium" style={{ marginLeft: GROUPED_ICON_TEXT_GAP }}>
-              {list.title}
-            </Text>
+            <View className="flex-1 flex-row items-center gap-2">
+              <Text
+                numberOfLines={1}
+                className="text-text shrink font-medium"
+                style={{ marginLeft: GROUPED_ICON_TEXT_GAP }}
+              >
+                {subscription?.title || list.title}
+              </Text>
+
+              {!!subscription?.isPrivate && (
+                <OouiUserAnonymous color={colorLabel} height={18} width={18} />
+              )}
+            </View>
+
             <UnreadCount unread={unreadCount} className="ml-auto" />
           </ItemPressable>
         </SubscriptionListItemContextMenu>
diff --git a/apps/mobile/src/morph/store-db.ts b/apps/mobile/src/morph/store-db.ts
@@ -14,7 +14,6 @@ class StoreDbMorph {
     return {
       ...subscription,
       id: buildSubscriptionDbId(subscription),
-      isPrivate: subscription.isPrivate ? 1 : 0,
     }
   }
   toEntrySchema(entry: EntryModel): EntrySchema {
diff --git a/apps/mobile/src/store/subscription/store.ts b/apps/mobile/src/store/subscription/store.ts
@@ -18,9 +18,8 @@ import { getInboxStoreId, getSubscriptionStoreId } from "./utils"
 type FeedId = string
 type ListId = string
 type InboxId = string
-export type SubscriptionModel = Omit<SubscriptionSchema, "id" | "isPrivate"> & {
-  isPrivate: boolean
-}
+export type SubscriptionModel = Omit<SubscriptionSchema, "id">
+
 interface SubscriptionState {
   /**
    * Key: feedId
@@ -240,6 +239,9 @@ class SubscriptionSyncService {
     subscriptionActions.upsertMany([
       {
         ...subscription,
+        title: subscription.title ?? null,
+        category: subscription.category ?? null,
+
         type: data.list ? "list" : "feed",
         createdAt: new Date().toISOString(),
         feedId: data.feed?.id ?? null,
diff --git a/apps/mobile/src/store/subscription/types.ts b/apps/mobile/src/store/subscription/types.ts
@@ -3,9 +3,9 @@ import type { FeedViewType } from "@follow/constants"
 export interface SubscriptionForm {
   url?: string
   view: FeedViewType
-  category: string
+  category?: string
   isPrivate: boolean
-  title: string
+  title?: string | null
   feedId?: string
   listId?: string
 }

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,6 @@ class StoreDbMorph {`
`14`	`14`	`return {`
`15`	`15`	`...subscription,`
`16`	`16`	`id: buildSubscriptionDbId(subscription),`
`17`		`- isPrivate: subscription.isPrivate ? 1 : 0,`
`18`	`17`	`}`
`19`	`18`	`}`
`20`	`19`	`toEntrySchema(entry: EntryModel): EntrySchema {`