feature(web): Manage tags in bulk actions

1 files changed, 15 insertions, 1 deletions

diff --git a/apps/web/components/dashboard/BulkBookmarksAction.tsx b/apps/web/components/dashboard/BulkBookmarksAction.tsx
index 383b9a4e..2e6fc75b 100644
--- a/apps/web/components/dashboard/BulkBookmarksAction.tsx
+++ b/apps/web/components/dashboard/BulkBookmarksAction.tsx
@@ -8,7 +8,7 @@ import {
 import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
 import { useToast } from "@/components/ui/use-toast";
 import useBulkActionsStore from "@/lib/bulkActions";
-import { CheckCheck, List, Pencil, Trash2, X } from "lucide-react";
+import { CheckCheck, Hash, List, Pencil, Trash2, X } from "lucide-react";
 
 import {
   useDeleteBookmark,
@@ -16,6 +16,7 @@ import {
 } from "@hoarder/shared-react/hooks/bookmarks";
 
 import BulkManageListsModal from "./bookmarks/BulkManageListsModal";
+import BulkTagModal from "./bookmarks/BulkTagModal";
 import { ArchivedActionIcon, FavouritedActionIcon } from "./bookmarks/icons";
 
 export default function BulkBookmarksAction() {
@@ -26,6 +27,7 @@ export default function BulkBookmarksAction() {
   const { toast } = useToast();
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [manageListsModal, setManageListsModalOpen] = useState(false);
+  const [bulkTagModal, setBulkTagModalOpen] = useState(false);
 
   useEffect(() => {
     setIsBulkEditEnabled(false); // turn off toggle + clear selected bookmarks on mount
@@ -105,6 +107,13 @@ export default function BulkBookmarksAction() {
       hidden: !isBulkEditEnabled,
     },
     {
+      name: "Edit Tags",
+      icon: <Hash size={18} />,
+      action: () => setBulkTagModalOpen(true),
+      isPending: false,
+      hidden: !isBulkEditEnabled,
+    },
+    {
       name: alreadyFavourited ? "Unfavourite" : "Favourite",
       icon: <FavouritedActionIcon favourited={!!alreadyFavourited} size={18} />,
       action: () => updateBookmarks({ favourited: !alreadyFavourited }),
@@ -163,6 +172,11 @@ export default function BulkBookmarksAction() {
         open={manageListsModal}
         setOpen={setManageListsModalOpen}
       />
+      <BulkTagModal
+        bookmarkIds={selectedBookmarks.map((b) => b.id)}
+        open={bulkTagModal}
+        setOpen={setBulkTagModalOpen}
+      />
       <div className="flex items-center">
         {isBulkEditEnabled && (
           <p className="flex items-center gap-2">