feat: List delete add secondary confirmation (#1254)

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

@@ -1,5 +1,5 @@
 import { Avatar, AvatarImage } from "@follow/components/ui/avatar/index.jsx"
-import { Button } from "@follow/components/ui/button/index.js"
+import { ActionButton, Button } from "@follow/components/ui/button/index.js"
 import { Divider } from "@follow/components/ui/divider/index.js"
 import { LoadingCircle } from "@follow/components/ui/loading/index.jsx"
 import { ScrollArea } from "@follow/components/ui/scroll-area/index.js"
@@ -32,11 +32,14 @@ import { listActions } from "~/store/list"
 
 import { ListCreationModalContent, ListFeedsModalContent } from "./modals"
 
-export const SettingLists = () => {
+const ConfirmDestroyModalContent = ({
+  listId,
+  onSuccess,
+}: {
+  listId: string
+  onSuccess: () => void
+}) => {
   const t = useI18n()
-  const listList = useAuthQuery(Queries.lists.list())
-
-  const { present } = useModalStack()
 
   const deleteFeedList = useMutation({
     mutationFn: async (payload: { listId: string }) => {
@@ -50,12 +53,34 @@ export const SettingLists = () => {
     onSuccess: () => {
       toast.success(t.settings("lists.delete.success"))
       Queries.lists.list().invalidate()
+      onSuccess()
     },
     async onError() {
       toast.error(t.settings("lists.delete.error"))
     },
   })
 
+  return (
+    <div className="w-[540px]">
+      <div className="mb-4">
+        <i className="i-mingcute-warning-fill -mb-1 mr-1 size-5 text-red-500" />
+        {t.settings("lists.delete.warning")}
+      </div>
+      <div className="flex justify-end">
+        <Button className="bg-red-600" onClick={() => deleteFeedList.mutate({ listId })}>
+          {t("words.confirm")}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export const SettingLists = () => {
+  const t = useI18n()
+  const listList = useAuthQuery(Queries.lists.list())
+
+  const { present } = useModalStack()
+
   return (
     <section className="mt-4">
       <div className="mb-4 space-y-2 text-sm">
@@ -169,14 +194,25 @@ export const SettingLists = () => {
                       </Tooltip>
                       <Tooltip>
                         <TooltipTrigger asChild>
-                          <Button
-                            variant="ghost"
-                            onClick={() => {
-                              deleteFeedList.mutate({ listId: row.id })
-                            }}
+                          <ActionButton
+                            size="sm"
+                            onClick={() =>
+                              present({
+                                title: t.settings("lists.delete.confirm"),
+                                content: ({ dismiss }) => (
+                                  <ConfirmDestroyModalContent
+                                    listId={row.id}
+                                    onSuccess={() => {
+                                      listList.refetch()
+                                      dismiss()
+                                    }}
+                                  />
+                                ),
+                              })
+                            }
                           >
                             <i className="i-mgc-delete-2-cute-re" />
-                          </Button>
+                          </ActionButton>
                         </TooltipTrigger>
                         <TooltipPortal>
                           <TooltipContent>{t.common("words.delete")}</TooltipContent>

locales/settings/en.json

@@ -189,8 +189,10 @@
   "lists.create": "Create New List",
   "lists.created.error": "Failed to create list.",
   "lists.created.success": "List created successfully!",
+  "lists.delete.confirm": "Confirm deletion of the list?",
   "lists.delete.error": "Failed to delete list.",
   "lists.delete.success": "List deleted successfully!",
+  "lists.delete.warning": "Warning: Once deleted, the list will no longer be available and all content will be permanently deleted and unrecoverable!..",
   "lists.description": "Description",
   "lists.earnings": "Earn",
   "lists.edit.error": "Failed to edit list.",

locales/settings/zh-CN.json

@@ -177,8 +177,10 @@
   "lists.create": "创建列表",
   "lists.created.error": "创建列表失败",
   "lists.created.success": "创建列表成功",
+  "lists.delete.confirm": "确认删除列表？",
   "lists.delete.error": "删除列表失败",
   "lists.delete.success": "删除列表成功",
+  "lists.delete.warning": "警告：一旦删除，列表将不再可用，所有内容将被永久删除且无法恢复",
   "lists.description": "描述",
   "lists.earnings": "收入",
   "lists.edit.error": "编辑列表失败",