feat: recursive list delete (#1989)

2 files changed, 45 insertions, 5 deletions

diff --git a/apps/web/components/dashboard/lists/DeleteListConfirmationDialog.tsx b/apps/web/components/dashboard/lists/DeleteListConfirmationDialog.tsx
index 7eb25e6d..4996ddf1 100644
--- a/apps/web/components/dashboard/lists/DeleteListConfirmationDialog.tsx
+++ b/apps/web/components/dashboard/lists/DeleteListConfirmationDialog.tsx
@@ -1,7 +1,11 @@
+import React from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { ActionButton } from "@/components/ui/action-button";
 import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
 import { toast } from "@/components/ui/use-toast";
+import { useTranslation } from "@/lib/i18n/client";
 
 import type { ZBookmarkList } from "@karakeep/shared/types/lists";
 import { useDeleteBookmarkList } from "@karakeep/shared-react/hooks/lists";
@@ -17,13 +21,15 @@ export default function DeleteListConfirmationDialog({
   open: boolean;
   setOpen: (v: boolean) => void;
 }) {
+  const { t } = useTranslation();
   const currentPath = usePathname();
   const router = useRouter();
+  const [deleteChildren, setDeleteChildren] = React.useState(false);
 
   const { mutate: deleteList, isPending } = useDeleteBookmarkList({
     onSuccess: () => {
       toast({
-        description: `List "${list.icon} ${list.name}" is deleted!`,
+        description: `List "${list.icon} ${list.name}" ${deleteChildren ? "and all its children are " : "is "} deleted!`,
       });
       setOpen(false);
       if (currentPath.includes(list.id)) {
@@ -42,16 +48,44 @@ export default function DeleteListConfirmationDialog({
     <ActionConfirmingDialog
       open={open}
       setOpen={setOpen}
-      title={`Delete ${list.icon} ${list.name}?`}
-      description={`Are you sure you want to delete ${list.icon} ${list.name}?`}
+      title={t("lists.delete_list.title")}
+      description={
+        <div className="space-y-3">
+          <p className="text-balance">
+            Are you sure you want to delete {list.icon} {list.name}?
+          </p>
+          <p className="text-balance text-sm text-muted-foreground">
+            {t("lists.delete_list.description")}
+          </p>
+
+          <div className="flex items-center justify-between rounded-lg border border-border/50 bg-muted/50 p-4">
+            <div className="space-y-1">
+              <Label
+                htmlFor="delete-children"
+                className="cursor-pointer text-sm font-medium"
+              >
+                {t("lists.delete_list.delete_children")}
+              </Label>
+              <p className="text-xs text-muted-foreground">
+                {t("lists.delete_list.delete_children_description")}
+              </p>
+            </div>
+            <Switch
+              id="delete-children"
+              checked={deleteChildren}
+              onCheckedChange={setDeleteChildren}
+            />
+          </div>
+        </div>
+      }
       actionButton={() => (
         <ActionButton
           type="button"
           variant="destructive"
           loading={isPending}
-          onClick={() => deleteList({ listId: list.id })}
+          onClick={() => deleteList({ listId: list.id, deleteChildren })}
         >
-          Delete
+          {t("actions.delete")}
         </ActionButton>
       )}
     >
diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json
index ce8d2839..ab1306be 100644
--- a/apps/web/lib/i18n/locales/en/translation.json
+++ b/apps/web/lib/i18n/locales/en/translation.json
@@ -428,6 +428,12 @@
     "search_query": "Search Query",
     "search_query_help": "Learn more about the search query language.",
     "description": "Description (Optional)",
+    "delete_list": {
+      "title": "Delete List",
+      "description": "Deleting a list doesn't delete any bookmarks in that list.",
+      "delete_children": "Delete children lists (recursively)",
+      "delete_children_description": "If not checked, all direct children lists will become root lists"
+    },
     "rss": {
       "title": "RSS Feed",
       "description": "Enable an RSS feed for this list",