feat: edit lists

apps/renderer/src/modules/feed-column/list.tsx

@@ -155,15 +155,11 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
           <i className="i-mgc-star-cute-fi mr-2 text-amber-500" />
           {t("words.starred")}
         </div>
-        <div className="flex h-8 w-full shrink-0 items-center rounded-md px-2.5 font-semibold transition-colors">
-          <i className="i-mgc-rada-cute-fi mr-2 text-lime-500" />
-          {t("words.lists")}
-        </div>
-        <SortableList view={view} expansion={expansion} data={listsData} />
-        <div className="flex h-8 w-full shrink-0 items-center rounded-md px-2.5 font-semibold transition-colors">
-          <i className="i-mgc-rss-2-cute-fi mr-2 text-orange-500" />
-          {t("words.feeds")}
-        </div>
+        {Object.keys(listsData).length > 0 && (
+          <div className="my-2">
+            <SortableList view={view} expansion={expansion} data={listsData} />
+          </div>
+        )}
         {hasData ? (
           <SortableList view={view} expansion={expansion} data={feedsData} />
         ) : (

apps/renderer/src/modules/settings/tabs/lists.tsx

@@ -35,7 +35,9 @@ import { views } from "~/constants"
 import { useAuthQuery } from "~/hooks/common"
 import { apiClient } from "~/lib/api-fetch"
 import { cn } from "~/lib/utils"
+import type { ListModel } from "~/models"
 import { Queries } from "~/queries"
+import { useFeedById } from "~/store/feed"
 
 export const SettingLists = () => {
   const { t: appT } = useTranslation()
@@ -47,7 +49,7 @@ export const SettingLists = () => {
   return (
     <section className="mt-4">
       <div className="mb-4 space-y-2 text-sm">
-        <p>{t("lists.description")}</p>
+        <p>{t("lists.info")}</p>
       </div>
       <Button
         onClick={() => {
@@ -76,6 +78,9 @@ export const SettingLists = () => {
                   <TableHead className="w-48 text-center" size="sm">
                     {t("lists.fee")}
                   </TableHead>
+                  <TableHead className="w-20 text-center" size="sm">
+                    {t("lists.edit")}
+                  </TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody className="border-t-[12px] border-transparent">
@@ -109,6 +114,21 @@ export const SettingLists = () => {
                         <i className="i-mgc-power shrink-0 text-lg text-accent" />
                       </div>
                     </TableCell>
+                    <TableCell align="center" size="sm">
+                      <Button
+                        variant="ghost"
+                        onClick={() => {
+                          present({
+                            title: t("lists.edit"),
+                            content: ({ dismiss }) => (
+                              <ListCreationModalContent dismiss={dismiss} id={row.id} />
+                            ),
+                          })
+                        }}
+                      >
+                        <i className="i-mgc-edit-cute-re" />
+                      </Button>
+                    </TableCell>
                   </TableRow>
                 ))}
               </TableBody>
@@ -129,37 +149,54 @@ export const SettingLists = () => {
 const formSchema = z.object({
   view: z.string(),
   title: z.string(),
+  description: z.string().optional(),
   image: z.string().optional(),
   fee: z.number().min(0),
 })
 
-const ListCreationModalContent = ({ dismiss }: { dismiss: () => void }) => {
+const ListCreationModalContent = ({ dismiss, id }: { dismiss: () => void; id?: string }) => {
   const { t: appT } = useTranslation()
   const { t } = useTranslation("settings")
 
+  const list = useFeedById(id) as ListModel
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      view: views[0].view.toString(),
-      fee: 0,
+      view: list?.view.toString() || views[0].view.toString(),
+      fee: list?.fee || 0,
+      title: list?.title || "",
+      description: list?.description || "",
+      image: list?.image || "",
     },
   })
 
   const createMutation = useMutation({
     mutationFn: async (values: z.infer<typeof formSchema>) => {
-      await apiClient.lists.$post({
-        json: {
-          ...values,
-          view: Number.parseInt(values.view),
-        },
-      })
+      if (id) {
+        await apiClient.lists.$patch({
+          json: {
+            listId: id,
+            ...values,
+            view: Number.parseInt(values.view),
+          },
+        })
+      } else {
+        await apiClient.lists.$post({
+          json: {
+            ...values,
+            view: Number.parseInt(values.view),
+          },
+        })
+      }
     },
     onSuccess: () => {
-      toast.success(t("lists.created.success"))
+      toast.success(t(id ? "lists.edit.success" : "lists.created.success"))
+      Queries.lists.list().invalidate()
       dismiss()
     },
     async onError() {
-      toast.error(t("lists.created.error"))
+      toast.error(t(id ? "lists.edit.error" : "lists.created.error"))
     },
   })
 
@@ -188,6 +225,21 @@ const ListCreationModalContent = ({ dismiss }: { dismiss: () => void }) => {
             </FormItem>
           )}
         />
+        <FormField
+          control={form.control}
+          name="description"
+          render={({ field }) => (
+            <FormItem>
+              <div>
+                <FormLabel>{t("lists.description")}</FormLabel>
+              </div>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
         <FormField
           control={form.control}
           name="image"
@@ -255,7 +307,7 @@ const ListCreationModalContent = ({ dismiss }: { dismiss: () => void }) => {
                 <FormDescription>{t("lists.fee.description")}</FormDescription>
               </div>
               <FormControl>
-                <div className="flex w-40 items-center">
+                <div className="flex items-center">
                   <Input
                     {...field}
                     type="number"

apps/renderer/src/queries/lists.ts

@@ -1,16 +1,9 @@
-import { apiClient } from "~/lib/api-fetch"
 import { defineQuery } from "~/lib/defineQuery"
+import { feedActions } from "~/store/feed"
 
 export const lists = {
   list: () =>
-    defineQuery(
-      ["lists"],
-      async () => {
-        const res = await apiClient.lists.list.$get()
-        return res.data
-      },
-      {
-        rootKey: ["lists"],
-      },
-    ),
+    defineQuery(["lists"], async () => feedActions.fetchOwnedLists(), {
+      rootKey: ["lists"],
+    }),
 }

apps/renderer/src/store/feed/store.ts

@@ -124,6 +124,13 @@ class FeedActions {
       feed: !finalData.id ? { ...finalData, id: nonce } : finalData,
     }
   }
+
+  async fetchOwnedLists() {
+    const res = await apiClient.lists.list.$get()
+    this.upsertMany(res.data)
+
+    return res.data
+  }
 }
 export const feedActions = new FeedActions()
 

locales/app/en.json

@@ -193,11 +193,9 @@
   "words.confirm": "Confirm",
   "words.discover": "Discover",
   "words.email": "Email",
-  "words.feeds": "Feeds",
   "words.import": "Import",
   "words.items": "Items",
   "words.language": "Language",
-  "words.lists": "Lists",
   "words.load_archived_entries": "Load archived entries",
   "words.login": "Login",
   "words.rss": "RSS",

locales/settings/en.json

@@ -153,10 +153,14 @@
   "lists.create": "Create New List",
   "lists.created.error": "Failed to create list.",
   "lists.created.success": "List created successfully!",
-  "lists.description": "Lists are collections of feeds that you can share or sell for others to subscribe to. Subscribers will synchronize and access all feeds in the list.",
+  "lists.description": "Description",
+  "lists.edit": "Edit",
+  "lists.edit.error": "Failed to edit list.",
+  "lists.edit.success": "List edited successfully!",
   "lists.fee": "Subscription Fee",
   "lists.fee.description": "The fee others need to pay you to subscribe to this list.",
   "lists.image": "Image",
+  "lists.info": "Lists are collections of feeds that you can share or sell for others to subscribe to. Subscribers will synchronize and access all feeds in the list.",
   "lists.noLists": "No lists",
   "lists.submit": "Submit",
   "lists.title": "Title",