[Feat] Add bulk edit option for bookmarks

apps/web/app/dashboard/archive/page.tsx

@@ -1,5 +1,5 @@
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
-import ChangeLayout from "@/components/dashboard/ChangeLayout";
+import GlobalActions from "@/components/dashboard/GlobalActions";
 import InfoTooltip from "@/components/ui/info-tooltip";
 
 function header() {
@@ -12,7 +12,7 @@ function header() {
         </InfoTooltip>
       </div>
       <div>
-        <ChangeLayout />
+        <GlobalActions />
       </div>
     </div>
   );

apps/web/app/dashboard/bookmarks/page.tsx

@@ -1,16 +1,16 @@
 import React from "react";
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
-import ChangeLayout from "@/components/dashboard/ChangeLayout";
+import GlobalActions from "@/components/dashboard/GlobalActions";
 import { SearchInput } from "@/components/dashboard/search/SearchInput";
 
 export default async function BookmarksPage() {
   return (
     <div>
       <div className="flex gap-2">
         <SearchInput />
-        <ChangeLayout />
+        <GlobalActions />
       </div>
-      <div className="my-4 flex-1">
+      <div className="my-4">
         <Bookmarks query={{ archived: false }} showEditorCard={true} />
       </div>
     </div>

apps/web/app/dashboard/favourites/page.tsx

@@ -1,13 +1,13 @@
 import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks";
-import ChangeLayout from "@/components/dashboard/ChangeLayout";
+import GlobalActions from "@/components/dashboard/GlobalActions";
 
 export default async function FavouritesBookmarkPage() {
   return (
     <Bookmarks
       header={
         <div className="flex items-center justify-between">
           <p className="text-2xl">⭐️ Favourites</p>
-          <ChangeLayout />
+          <GlobalActions />
         </div>
       }
       query={{ favourited: true }}

apps/web/app/dashboard/search/page.tsx

@@ -2,7 +2,7 @@
 
 import { Suspense, useRef } from "react";
 import BookmarksGrid from "@/components/dashboard/bookmarks/BookmarksGrid";
-import ChangeLayout from "@/components/dashboard/ChangeLayout";
+import GlobalActions from "@/components/dashboard/GlobalActions";
 import { SearchInput } from "@/components/dashboard/search/SearchInput";
 import { FullPageSpinner } from "@/components/ui/full-page-spinner";
 import { useBookmarkSearch } from "@/lib/hooks/bookmark-search";
@@ -17,7 +17,7 @@ function SearchComp() {
     <div className="flex flex-col gap-3">
       <div className="flex gap-2">
         <SearchInput ref={inputRef} autoFocus={true} />
-        <ChangeLayout />
+        <GlobalActions />
       </div>
       {data ? (
         <BookmarksGrid bookmarks={data.bookmarks} />

apps/web/components/dashboard/BulkBookmarksAction.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import { Button, ButtonWithTooltip } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useToast } from "@/components/ui/use-toast";
+import bulkActions from "@/store/bulkBookmarksAction";
+import { Archive, ArchiveRestore, Pencil, Star, Trash2, X } from "lucide-react";
+
+import {
+  useDeleteBookmark,
+  useUpdateBookmark,
+} from "@hoarder/shared-react/hooks/bookmarks";
+
+function DeleteModal({
+  open,
+  setOpen,
+  deleteBookmarks,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  deleteBookmarks: () => void;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete Bookmarks</DialogTitle>
+          <DialogClose />
+        </DialogHeader>
+        <p>Are you sure you want to delete these bookmarks?</p>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() => {
+              deleteBookmarks();
+              setOpen(false);
+            }}
+          >
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default function BulkBookmarksAction() {
+  const { selectedBookmarks, isBulkEditEnabled } = bulkActions();
+  const handleBulkEdit = bulkActions((state) => state.handleBulkEdit);
+  const { toast } = useToast();
+  const pathname = usePathname();
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  useEffect(() => {
+    handleBulkEdit(false); // turn off toggle + clear selected bookmarks on mount
+  }, []);
+
+  const onError = () => {
+    toast({
+      variant: "destructive",
+      title: "Something went wrong",
+      description: "There was a problem with your request.",
+    });
+  };
+
+  const deleteBookmarkMutator = useDeleteBookmark({
+    onSuccess: () => {
+      handleBulkEdit(false);
+    },
+    onError,
+  });
+
+  const updateBookmarkMutator = useUpdateBookmark({
+    onSuccess: () => {
+      handleBulkEdit(false);
+    },
+    onError,
+  });
+
+  interface UpdateBookmarkProps {
+    favourited?: boolean;
+    archived?: boolean;
+  }
+
+  const updateBookmarks = ({
+    favourited,
+    archived,
+  }: UpdateBookmarkProps): void => {
+    selectedBookmarks.map((item) => {
+      updateBookmarkMutator.mutate({
+        bookmarkId: item.id,
+        favourited: favourited ?? item.favourited,
+        archived: archived ?? item.archived,
+      });
+    });
+    toast({
+      description: `${selectedBookmarks.length} bookmarks have been updated!`,
+    });
+  };
+
+  const deleteBookmarks = () => {
+    selectedBookmarks.map((item) => {
+      deleteBookmarkMutator.mutate({ bookmarkId: item.id });
+    });
+    toast({
+      description: `${selectedBookmarks.length} bookmarks have been deleted!`,
+    });
+  };
+
+  const alreadyFavourited =
+    (selectedBookmarks.length &&
+      selectedBookmarks.every((item) => item.favourited === true)) ||
+    pathname.includes("favourites");
+
+  const alreadyArchived =
+    (selectedBookmarks.length &&
+      selectedBookmarks.every((item) => item.archived === true)) ||
+    pathname.includes("archive");
+
+  const actionList = [
+    {
+      name: alreadyFavourited ? "Unfavourite" : "Favourite",
+      icon: (
+        <Star
+          color={alreadyFavourited ? "#ebb434" : "#000"}
+          fill={alreadyFavourited ? "#ebb434" : "transparent"}
+          size={18}
+        />
+      ),
+      action: () => updateBookmarks({ favourited: !alreadyFavourited }),
+    },
+    {
+      name: alreadyArchived ? "Un-arhcive" : "Archive",
+      icon: alreadyArchived ? (
+        <ArchiveRestore size={18} />
+      ) : (
+        <Archive size={18} />
+      ),
+      action: () => updateBookmarks({ archived: !alreadyArchived }),
+    },
+    {
+      name: "Delete",
+      icon: <Trash2 size={18} />,
+      action: () => setShowDeleteModal(true),
+    },
+    {
+      name: "Close bulk edit",
+      icon: <X size={18} />,
+      action: () => handleBulkEdit(false),
+    },
+  ];
+
+  if (!isBulkEditEnabled) {
+    return (
+      <div>
+        <ButtonWithTooltip
+          tooltip="Bulk Edit"
+          delayDuration={100}
+          variant="ghost"
+          onClick={() => handleBulkEdit(true)}
+        >
+          <Pencil size={18} />
+        </ButtonWithTooltip>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {showDeleteModal && (
+        <DeleteModal
+          open={showDeleteModal}
+          setOpen={setShowDeleteModal}
+          deleteBookmarks={deleteBookmarks}
+        />
+      )}
+      <div className="flex">
+        {actionList.map(({ name, icon: Icon, action }) => (
+          <ButtonWithTooltip
+            tooltip={name}
+            delayDuration={100}
+            variant="ghost"
+            key={name}
+            onClick={action}
+          >
+            {Icon}
+          </ButtonWithTooltip>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/web/components/dashboard/ChangeLayout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { Button } from "@/components/ui/button";
+import { ButtonWithTooltip } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -20,15 +20,19 @@ const iconMap = {
   list: LayoutList,
 };
 
-export default function SidebarProfileOptions() {
+export default function ChangeLayout() {
   const layout = useBookmarkLayout();
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline">
+        <ButtonWithTooltip
+          tooltip="Change layout"
+          delayDuration={100}
+          variant="ghost"
+        >
           {React.createElement(iconMap[layout], { size: 18 })}
-        </Button>
+        </ButtonWithTooltip>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-fit">
         {Object.keys(iconMap).map((key) => (

apps/web/components/dashboard/GlobalActions.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import BulkBookmarksAction from "@/components/dashboard/BulkBookmarksAction";
+import ChangeLayout from "@/components/dashboard/ChangeLayout";
+import { cn } from "@/lib/utils";
+import bulkActions from "@/store/bulkBookmarksAction";
+
+export default function GlobalActions() {
+  const { isBulkEditEnabled } = bulkActions();
+
+  return (
+    <div
+      className={cn(
+        "flex rounded-md border bg-background transition-all",
+        isBulkEditEnabled ? "w-[251px]" : "w-[102px]",
+      )}
+    >
+      <ChangeLayout />
+      <BulkBookmarksAction />
+    </div>
+  );
+}

apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx

@@ -22,7 +22,7 @@ export default function BookmarkActionBar({
         href={`/dashboard/preview/${bookmark.id}`}
         className={cn(buttonVariants({ variant: "ghost" }), "px-2")}
       >
-        <Maximize2 size="20" />
+        <Maximize2 size={16} />
       </Link>
       <BookmarkOptions bookmark={bookmark} />
     </div>