feat: Add bulk edit option for bookmarks. Fixes #84 (#259)

* feat: add bulk edit option for bookmarks

* fix: resolve comments

* fix: resolve comments

* fix: resolve comments

* fix: resolve comments

* rename bulk action store, simplify the bulk action toolbar

---------

Co-authored-by: MohamedBassem <me@mbassem.com>

3 files changed, 68 insertions, 8 deletions

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx b/apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx
index 6cc8e44e..299f47eb 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkActionBar.tsx
+++ b/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>
diff --git a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
index e1cc1f7c..33b65108 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkLayoutAdaptingCard.tsx
@@ -1,12 +1,15 @@
 import type { BookmarksLayoutTypes } from "@/lib/userLocalSettings/types";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
+import useBulkActionsStore from "@/lib/bulkActions";
 import {
   bookmarkLayoutSwitch,
   useBookmarkLayout,
 } from "@/lib/userLocalSettings/bookmarksLayout";
 import { cn } from "@/lib/utils";
 import dayjs from "dayjs";
+import { Check } from "lucide-react";
+import { useTheme } from "next-themes";
 
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
 import { isBookmarkStillTagging } from "@hoarder/shared-react/utils/bookmarkUtils";
@@ -45,6 +48,57 @@ function BottomRow({
   );
 }
 
+function MultiBookmarkSelector({ bookmark }: { bookmark: ZBookmark }) {
+  const { selectedBookmarks, isBulkEditEnabled } = useBulkActionsStore();
+  const toggleBookmark = useBulkActionsStore((state) => state.toggleBookmark);
+  const [isSelected, setIsSelected] = useState(false);
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    setIsSelected(selectedBookmarks.some((item) => item.id === bookmark.id));
+  }, [selectedBookmarks]);
+
+  if (!isBulkEditEnabled) return null;
+
+  const getIconColor = () => {
+    if (theme === "dark") {
+      return isSelected ? "black" : "white";
+    }
+    return isSelected ? "white" : "black";
+  };
+
+  const getIconBackgroundColor = () => {
+    if (theme === "dark") {
+      return isSelected ? "bg-white" : "bg-white bg-opacity-10";
+    }
+    return isSelected ? "bg-black" : "bg-white bg-opacity-40";
+  };
+
+  return (
+    <button
+      className={cn(
+        "absolute left-0 top-0 z-50 h-full w-full bg-opacity-0",
+        {
+          "bg-opacity-10": isSelected,
+        },
+        theme === "dark" ? "bg-white" : "bg-black",
+      )}
+      onClick={() => toggleBookmark(bookmark)}
+    >
+      <button className="absolute right-2 top-2 z-50 opacity-100">
+        <div
+          className={cn(
+            "flex h-4 w-4 items-center justify-center rounded-full border border-gray-600",
+            getIconBackgroundColor(),
+          )}
+        >
+          <Check size={12} color={getIconColor()} />
+        </div>
+      </button>
+    </button>
+  );
+}
+
 function ListView({
   bookmark,
   image,
@@ -56,10 +110,11 @@ function ListView({
   return (
     <div
       className={cn(
-        "flex max-h-96 gap-4 overflow-hidden rounded-lg p-2 shadow-md",
+        "relative flex max-h-96 gap-4 overflow-hidden rounded-lg p-2 shadow-md",
         className,
       )}
     >
+      <MultiBookmarkSelector bookmark={bookmark} />
       <div className="flex size-32 items-center justify-center overflow-hidden">
         {image("list", "object-cover rounded-lg size-32")}
       </div>
@@ -100,11 +155,12 @@ function GridView({
   return (
     <div
       className={cn(
-        "flex flex-col overflow-hidden rounded-lg shadow-md",
+        "relative flex flex-col overflow-hidden rounded-lg shadow-md",
         className,
         fitHeight && layout != "grid" ? "max-h-96" : "h-96",
       )}
     >
+      <MultiBookmarkSelector bookmark={bookmark} />
       {img && <div className="h-56 w-full shrink-0 overflow-hidden">{img}</div>}
       <div className="flex h-full flex-col justify-between gap-2 overflow-hidden p-2">
         <div className="grow-1 flex flex-col gap-2 overflow-hidden">
diff --git a/apps/web/components/dashboard/bookmarks/icons.tsx b/apps/web/components/dashboard/bookmarks/icons.tsx
index d899f19d..04e3ff32 100644
--- a/apps/web/components/dashboard/bookmarks/icons.tsx
+++ b/apps/web/components/dashboard/bookmarks/icons.tsx
@@ -3,27 +3,31 @@ import { Archive, ArchiveRestore, Star } from "lucide-react";
 export function FavouritedActionIcon({
   favourited,
   className,
+  size,
 }: {
   favourited: boolean;
   className?: string;
+  size?: number;
 }) {
   return favourited ? (
-    <Star className={className} color="#ebb434" fill="#ebb434" />
+    <Star size={size} className={className} color="#ebb434" fill="#ebb434" />
   ) : (
-    <Star className={className} />
+    <Star size={size} className={className} />
   );
 }
 
 export function ArchivedActionIcon({
   archived,
   className,
+  size,
 }: {
   archived: boolean;
   className?: string;
+  size?: number;
 }) {
   return archived ? (
-    <ArchiveRestore className={className} />
+    <ArchiveRestore size={size} className={className} />
   ) : (
-    <Archive className={className} />
+    <Archive size={size} className={className} />
   );
 }