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>

1 files changed, 15 insertions, 1 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" />