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>

8 files changed, 325 insertions, 3 deletions

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}
@@ -67,6 +74,13 @@ export function ListOptions({
         </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)}
         >
           <Trash2 className="size-4" />
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": {
diff --git a/packages/shared-react/hooks/lists.ts b/packages/shared-react/hooks/lists.ts
index 4dd9bc2b..1a98cac5 100644
--- a/packages/shared-react/hooks/lists.ts
+++ b/packages/shared-react/hooks/lists.ts
@@ -36,6 +36,21 @@ export function useEditBookmarkList(
   });
 }
 
+export function useMergeLists(
+  ...opts: Parameters<typeof api.lists.merge.useMutation>
+) {
+  const apiUtils = api.useUtils();
+  return api.lists.merge.useMutation({
+    ...opts[0],
+    onSuccess: (res, req, meta) => {
+      apiUtils.lists.list.invalidate();
+      apiUtils.bookmarks.getBookmarks.invalidate({ listId: req.targetId });
+      apiUtils.lists.stats.invalidate();
+      return opts[0]?.onSuccess?.(res, req, meta);
+    },
+  });
+}
+
 export function useAddBookmarkToList(
   ...opts: Parameters<typeof api.lists.addToList.useMutation>
 ) {
diff --git a/packages/shared/types/lists.ts b/packages/shared/types/lists.ts
index 474405ee..7ef5687c 100644
--- a/packages/shared/types/lists.ts
+++ b/packages/shared/types/lists.ts
@@ -85,3 +85,16 @@ export const zEditBookmarkListSchemaWithValidation = zEditBookmarkListSchema
       "Smart lists cannot have unqualified terms (aka full text search terms) in the query",
     path: ["query"],
   });
+
+export const zMergeListSchema = z
+  .object({
+    sourceId: z.string(),
+    targetId: z.string(),
+    deleteSourceAfterMerge: z.boolean(),
+  })
+  .refine((val) => val.sourceId !== val.targetId, {
+    message: "Cannot merge a list into itself",
+    path: ["targetId"],
+  });
+
+export type ZMergeList = z.infer<typeof zMergeListSchema>;
diff --git a/packages/trpc/models/lists.ts b/packages/trpc/models/lists.ts
index a6b1720c..8072060f 100644
--- a/packages/trpc/models/lists.ts
+++ b/packages/trpc/models/lists.ts
@@ -145,6 +145,10 @@ export abstract class List implements PrivacyAware {
   abstract getSize(ctx: AuthedContext): Promise<number>;
   abstract addBookmark(bookmarkId: string): Promise<void>;
   abstract removeBookmark(bookmarkId: string): Promise<void>;
+  abstract mergeInto(
+    targetList: List,
+    deleteSourceAfterMerge: boolean,
+  ): Promise<void>;
 }
 
 export class SmartList extends List {
@@ -200,6 +204,16 @@ export class SmartList extends List {
       message: "Smart lists cannot be removed from",
     });
   }
+
+  mergeInto(
+    _targetList: List,
+    _deleteSourceAfterMerge: boolean,
+  ): Promise<void> {
+    throw new TRPCError({
+      code: "BAD_REQUEST",
+      message: "Smart lists cannot be merged",
+    });
+  }
 }
 
 export class ManualList extends List {
@@ -276,4 +290,36 @@ export class ManualList extends List {
     }
     return super.update(input);
   }
+
+  async mergeInto(
+    targetList: List,
+    deleteSourceAfterMerge: boolean,
+  ): Promise<void> {
+    if (targetList.type !== "manual") {
+      throw new TRPCError({
+        code: "BAD_REQUEST",
+        message: "You can only merge into a manual list",
+      });
+    }
+
+    const bookmarkIds = await this.getBookmarkIds();
+
+    await this.ctx.db.transaction(async (tx) => {
+      await tx
+        .insert(bookmarksInLists)
+        .values(
+          bookmarkIds.map((id) => ({
+            bookmarkId: id,
+            listId: targetList.list.id,
+          })),
+        )
+        .onConflictDoNothing();
+
+      if (deleteSourceAfterMerge) {
+        await tx
+          .delete(bookmarkLists)
+          .where(eq(bookmarkLists.id, this.list.id));
+      }
+    });
+  }
 }
diff --git a/packages/trpc/routers/lists.ts b/packages/trpc/routers/lists.ts
index f988eb8b..12960316 100644
--- a/packages/trpc/routers/lists.ts
+++ b/packages/trpc/routers/lists.ts
@@ -4,6 +4,7 @@ import { z } from "zod";
 import {
   zBookmarkListSchema,
   zEditBookmarkListSchemaWithValidation,
+  zMergeListSchema,
   zNewBookmarkListSchema,
 } from "@karakeep/shared/types/lists";
 
@@ -39,6 +40,18 @@ export const listsAppRouter = router({
     .mutation(async ({ input, ctx }) => {
       return await ctx.list.update(input);
     }),
+  merge: authedProcedure
+    .input(zMergeListSchema)
+    .mutation(async ({ input, ctx }) => {
+      const [sourceList, targetList] = await Promise.all([
+        List.fromId(ctx, input.sourceId),
+        List.fromId(ctx, input.targetId),
+      ]);
+      return await sourceList.mergeInto(
+        targetList,
+        input.deleteSourceAfterMerge,
+      );
+    }),
   delete: authedProcedure
     .input(
       z.object({