feat: recursive list delete (#1989)

1 files changed, 39 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>
       )}
     >