From 71a474268e6381f8630f6d906471c830342dc50f Mon Sep 17 00:00:00 2001
From: omnitrix <gaobowei.ovo@gmail.com>
Date: Wed, 16 Apr 2025 16:18:04 +0200
Subject: feat(web): Add support for merging lists (#1231)

* feat: Support list merging

* some fixes

* move @hoarder to @karakeep

---------

Co-authored-by: Mohamed Bassem <me@mbassem.com>
---
 .../web/components/dashboard/lists/ListOptions.tsx |  16 +-
 .../components/dashboard/lists/MergeListModal.tsx  | 209 +++++++++++++++++++++
 apps/web/lib/i18n/locales/en/translation.json      |   8 +-
 apps/web/lib/i18n/locales/zh/translation.json      |   8 +-
 4 files changed, 238 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/components/dashboard/lists/MergeListModal.tsx

(limited to 'apps')

diff --git a/apps/web/components/dashboard/lists/ListOptions.tsx b/apps/web/components/dashboard/lists/ListOptions.tsx
index 6b900265..9a979686 100644
--- a/apps/web/components/dashboard/lists/ListOptions.tsx
+++ b/apps/web/components/dashboard/lists/ListOptions.tsx
@@ -6,12 +6,13 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useTranslation } from "@/lib/i18n/client";
-import { Pencil, Plus, Trash2 } from "lucide-react";
+import { FolderInput, Pencil, Plus, Trash2 } from "lucide-react";
 
 import { ZBookmarkList } from "@karakeep/shared/types/lists";
 
 import { EditListModal } from "../lists/EditListModal";
 import DeleteListConfirmationDialog from "./DeleteListConfirmationDialog";
+import { MergeListModal } from "./MergeListModal";
 
 export function ListOptions({
   list,
@@ -28,6 +29,7 @@ export function ListOptions({
 
   const [deleteListDialogOpen, setDeleteListDialogOpen] = useState(false);
   const [newNestedListModalOpen, setNewNestedListModalOpen] = useState(false);
+  const [mergeListModalOpen, setMergeListModalOpen] = useState(false);
   const [editModalOpen, setEditModalOpen] = useState(false);
 
   return (
@@ -44,6 +46,11 @@ export function ListOptions({
         setOpen={setEditModalOpen}
         list={list}
       />
+      <MergeListModal
+        open={mergeListModalOpen}
+        setOpen={setMergeListModalOpen}
+        list={list}
+      />
       <DeleteListConfirmationDialog
         list={list}
         open={deleteListDialogOpen}
@@ -65,6 +72,13 @@ export function ListOptions({
           <Plus className="size-4" />
           <span>{t("lists.new_nested_list")}</span>
         </DropdownMenuItem>
+        <DropdownMenuItem
+          className="flex gap-2"
+          onClick={() => setMergeListModalOpen(true)}
+        >
+          <FolderInput className="size-4" />
+          <span>{t("lists.merge_list")}</span>
+        </DropdownMenuItem>
         <DropdownMenuItem
           className="flex gap-2"
           onClick={() => setDeleteListDialogOpen(true)}
diff --git a/apps/web/components/dashboard/lists/MergeListModal.tsx b/apps/web/components/dashboard/lists/MergeListModal.tsx
new file mode 100644
index 00000000..a6b23971
--- /dev/null
+++ b/apps/web/components/dashboard/lists/MergeListModal.tsx
@@ -0,0 +1,209 @@
+import { useEffect, useState } from "react";
+import { ActionButton } from "@/components/ui/action-button";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { toast } from "@/components/ui/use-toast";
+import { useTranslation } from "@/lib/i18n/client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { X } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { useMergeLists } from "@karakeep/shared-react/hooks/lists";
+import { ZBookmarkList, zMergeListSchema } from "@karakeep/shared/types/lists";
+
+import { BookmarkListSelector } from "./BookmarkListSelector";
+
+export function MergeListModal({
+  open: userOpen,
+  setOpen: userSetOpen,
+  list,
+  children,
+}: {
+  open?: boolean;
+  setOpen?: (v: boolean) => void;
+  list: ZBookmarkList;
+  children?: React.ReactNode;
+}) {
+  const { t } = useTranslation();
+  if (
+    (userOpen !== undefined && !userSetOpen) ||
+    (userOpen === undefined && userSetOpen)
+  ) {
+    throw new Error("You must provide both open and setOpen or neither");
+  }
+  const [customOpen, customSetOpen] = useState(false);
+  const form = useForm<z.infer<typeof zMergeListSchema>>({
+    resolver: zodResolver(zMergeListSchema),
+    defaultValues: {
+      sourceId: list.id,
+      targetId: "",
+      deleteSourceAfterMerge: true,
+    },
+  });
+  const [open, setOpen] = [
+    userOpen ?? customOpen,
+    userSetOpen ?? customSetOpen,
+  ];
+
+  useEffect(() => {
+    form.reset({
+      sourceId: list.id,
+      targetId: "",
+      deleteSourceAfterMerge: true,
+    });
+  }, [open]);
+
+  const { mutate: mergeLists, isPending: isMerging } = useMergeLists({
+    onSuccess: () => {
+      toast({
+        description: t("toasts.lists.merged"),
+      });
+      setOpen(false);
+      form.reset();
+    },
+    onError: (e) => {
+      if (e.data?.code == "BAD_REQUEST") {
+        if (e.data.zodError) {
+          toast({
+            variant: "destructive",
+            description: Object.values(e.data.zodError.fieldErrors)
+              .flat()
+              .join("\n"),
+          });
+        } else {
+          toast({
+            variant: "destructive",
+            description: e.message,
+          });
+        }
+      } else {
+        toast({
+          variant: "destructive",
+          title: t("common.something_went_wrong"),
+        });
+      }
+    },
+  });
+
+  const onSubmit = form.handleSubmit(
+    async (value: z.infer<typeof zMergeListSchema>) => {
+      mergeLists(value);
+    },
+  );
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(s) => {
+        form.reset();
+        setOpen(s);
+      }}
+    >
+      {children && <DialogTrigger asChild>{children}</DialogTrigger>}
+      <DialogContent>
+        <Form {...form}>
+          <form onSubmit={onSubmit}>
+            <DialogHeader>
+              <DialogTitle>{t("lists.merge_list")}</DialogTitle>
+            </DialogHeader>
+            <div className="flex w-full gap-2 py-4">
+              <span className="inline-flex aspect-square h-10 items-center justify-center rounded border border-input bg-transparent px-2 text-2xl">
+                {list.icon}
+              </span>
+              <Input
+                type="text"
+                className="w-full"
+                value={list.name}
+                disabled
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="deleteSourceAfterMerge"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center justify-between space-x-2 space-y-0 pb-4">
+                  <label className="text-xs text-muted-foreground">
+                    {t("lists.delete_after_merge")}
+                  </label>
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={(checked) => {
+                        field.onChange(checked);
+                      }}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="targetId"
+              render={({ field }) => (
+                <FormItem className="grow pb-4">
+                  <FormLabel>{t("lists.destination_list")}</FormLabel>
+                  <div className="flex items-center gap-1">
+                    <FormControl>
+                      <BookmarkListSelector
+                        hideSubtreeOf={list.id}
+                        value={field.value}
+                        onChange={field.onChange}
+                        placeholder={t("lists.no_destination")}
+                      />
+                    </FormControl>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      onClick={() => {
+                        form.resetField("targetId");
+                      }}
+                    >
+                      <X />
+                    </Button>
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter className="sm:justify-end">
+              <DialogClose asChild>
+                <Button type="button" variant="secondary">
+                  {t("actions.cancel")}
+                </Button>
+              </DialogClose>
+              <ActionButton
+                type="submit"
+                onClick={onSubmit}
+                loading={isMerging}
+              >
+                {t("actions.merge")}
+              </ActionButton>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json
index 4cce6295..3398045e 100644
--- a/apps/web/lib/i18n/locales/en/translation.json
+++ b/apps/web/lib/i18n/locales/en/translation.json
@@ -223,6 +223,10 @@
     "new_list": "New List",
     "edit_list": "Edit List",
     "new_nested_list": "New Nested List",
+    "merge_list": "Merge List",
+    "destination_list": "Destination List",
+    "delete_after_merge": "Delete original list after merge",
+    "no_destination": "No Destination",
     "parent_list": "Parent List",
     "no_parent": "No Parent",
     "list_type": "List Type",
@@ -361,7 +365,9 @@
     },
     "lists": {
       "created": "List has been created!",
-      "updated": "List has been updated!"
+      "updated": "List has been updated!",
+      "merged": "List has been merged!",
+      "deleted": "List has been deleted!"
     }
   },
   "banners": {
diff --git a/apps/web/lib/i18n/locales/zh/translation.json b/apps/web/lib/i18n/locales/zh/translation.json
index 8132cb1f..178baca8 100644
--- a/apps/web/lib/i18n/locales/zh/translation.json
+++ b/apps/web/lib/i18n/locales/zh/translation.json
@@ -214,6 +214,10 @@
     "favourites": "收藏",
     "new_list": "新列表",
     "new_nested_list": "新嵌套列表",
+    "merge_list": "合并列表",
+    "destination_list": "目标列表",
+    "delete_after_merge": "合并后删除源列表",
+    "no_destination": "未选中目标",
     "no_parent": "没有父级",
     "parent_list": "父级列表",
     "list_type": "列表类型",
@@ -309,7 +313,9 @@
     },
     "lists": {
       "created": "列表已创建！",
-      "updated": "列表已更新！"
+      "updated": "列表已更新！",
+      "merged": "列表已合并！",
+      "deleted": "列表已删除！"
     }
   },
   "cleanups": {
-- 
cgit v1.2.3-70-g09d2