From 14f2bac8f3ba7e8f2dbd3958a4394c5b11ea2537 Mon Sep 17 00:00:00 2001
From: Przeblysk <przeblysk@163.com>
Date: Thu, 31 Oct 2024 18:56:38 +0800
Subject: [PATCH] feat: List delete add secondary confirmation (#1254)

---
 .../src/modules/settings/tabs/lists/index.tsx | 58 +++++++++++++++----
 locales/settings/en.json                      |  2 +
 locales/settings/zh-CN.json                   |  2 +
 3 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/apps/renderer/src/modules/settings/tabs/lists/index.tsx b/apps/renderer/src/modules/settings/tabs/lists/index.tsx
index 79afb1d7f..0f12bce86 100644
--- a/apps/renderer/src/modules/settings/tabs/lists/index.tsx
+++ b/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>
diff --git a/locales/settings/en.json b/locales/settings/en.json
index e961b9efa..c57386d61 100644
--- a/locales/settings/en.json
+++ b/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.",
diff --git a/locales/settings/zh-CN.json b/locales/settings/zh-CN.json
index f088d5462..58d2d45b6 100644
--- a/locales/settings/zh-CN.json
+++ b/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": "编辑列表失败",