feature(web): Allow adding to lists in bulk actions. #368

1 files changed, 15 insertions, 1 deletions

diff --git a/apps/web/components/dashboard/BulkBookmarksAction.tsx b/apps/web/components/dashboard/BulkBookmarksAction.tsx
index bed1bda8..5dd31fa5 100644
--- a/apps/web/components/dashboard/BulkBookmarksAction.tsx
+++ b/apps/web/components/dashboard/BulkBookmarksAction.tsx
@@ -8,13 +8,14 @@ import {
 import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
 import { useToast } from "@/components/ui/use-toast";
 import useBulkActionsStore from "@/lib/bulkActions";
-import { Pencil, Trash2, X } from "lucide-react";
+import { List, Pencil, Trash2, X } from "lucide-react";
 
 import {
   useDeleteBookmark,
   useUpdateBookmark,
 } from "@hoarder/shared-react/hooks/bookmarks";
 
+import BulkManageListsModal from "./bookmarks/BulkManageListsModal";
 import { ArchivedActionIcon, FavouritedActionIcon } from "./bookmarks/icons";
 
 export default function BulkBookmarksAction() {
@@ -24,6 +25,7 @@ export default function BulkBookmarksAction() {
   );
   const { toast } = useToast();
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [manageListsModal, setManageListsModalOpen] = useState(false);
 
   useEffect(() => {
     setIsBulkEditEnabled(false); // turn off toggle + clear selected bookmarks on mount
@@ -96,6 +98,13 @@ export default function BulkBookmarksAction() {
 
   const actionList = [
     {
+      name: "Add to List",
+      icon: <List size={18} />,
+      action: () => setManageListsModalOpen(true),
+      isPending: false,
+      hidden: !isBulkEditEnabled,
+    },
+    {
       name: alreadyFavourited ? "Unfavourite" : "Favourite",
       icon: <FavouritedActionIcon favourited={!!alreadyFavourited} size={18} />,
       action: () => updateBookmarks({ favourited: !alreadyFavourited }),
@@ -149,6 +158,11 @@ export default function BulkBookmarksAction() {
           </ActionButton>
         )}
       />
+      <BulkManageListsModal
+        bookmarkIds={selectedBookmarks.map((b) => b.id)}
+        open={manageListsModal}
+        setOpen={setManageListsModalOpen}
+      />
       <div className="flex">
         {actionList.map(
           ({ name, icon: Icon, action, isPending, hidden, alwaysEnable }) => (