feature(web): Add a select all button to bulk actions

apps/web/components/dashboard/BulkBookmarksAction.tsx

@@ -25,6 +25,13 @@ export default function BulkBookmarksAction() {
   const setIsBulkEditEnabled = useBulkActionsStore(
     (state) => state.setIsBulkEditEnabled,
   );
+  const selectAllBookmarks = useBulkActionsStore((state) => state.selectAll);
+  const unSelectAllBookmarks = useBulkActionsStore(
+    (state) => state.unSelectAll,
+  );
+  const isEverythingSelected = useBulkActionsStore(
+    (state) => state.isEverythingSelected,
+  );
   const { toast } = useToast();
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [manageListsModal, setManageListsModalOpen] = useState(false);
@@ -168,6 +175,18 @@ export default function BulkBookmarksAction() {
       action: () => setIsDeleteDialogOpen(true),
       hidden: !isBulkEditEnabled,
     },
+    {
+      name: isEverythingSelected() ? "Unselect All" : "Select All",
+      icon: (
+        <p className="flex items-center gap-2">
+          ( <CheckCheck size={18} /> {selectedBookmarks.length} )
+        </p>
+      ),
+      action: () =>
+        isEverythingSelected() ? unSelectAllBookmarks() : selectAllBookmarks(),
+      alwaysEnable: true,
+      hidden: !isBulkEditEnabled,
+    },
     {
       name: "Close bulk edit",
       icon: <X size={18} />,
@@ -213,11 +232,6 @@ export default function BulkBookmarksAction() {
         setOpen={setBulkTagModalOpen}
       />
       <div className="flex items-center">
-        {isBulkEditEnabled && (
-          <p className="flex items-center gap-2">
-            ( <CheckCheck size={18} /> {selectedBookmarks.length} )
-          </p>
-        )}
         {actionList.map(
           ({ name, icon: Icon, action, isPending, hidden, alwaysEnable }) => (
             <ActionButtonWithTooltip

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

@@ -1,5 +1,6 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { ActionButton } from "@/components/ui/action-button";
+import useBulkActionsStore from "@/lib/bulkActions";
 import {
   bookmarkLayoutSwitch,
   useBookmarkLayout,
@@ -48,8 +49,16 @@ export default function BookmarksGrid({
   fetchNextPage?: () => void;
 }) {
   const layout = useBookmarkLayout();
+  const bulkActionsStore = useBulkActionsStore();
   const breakpointConfig = useMemo(() => getBreakpointConfig(), []);
 
+  useEffect(() => {
+    bulkActionsStore.setVisibleBookmarks(bookmarks);
+    return () => {
+      bulkActionsStore.setVisibleBookmarks([]);
+    };
+  }, [bookmarks]);
+
   if (bookmarks.length == 0 && !showEditorCard) {
     return <p>No bookmarks</p>;
   }

apps/web/lib/bulkActions.ts

@@ -5,13 +5,19 @@ import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
 
 interface BookmarkState {
   selectedBookmarks: ZBookmark[];
+  visibleBookmarks: ZBookmark[];
   isBulkEditEnabled: boolean;
   setIsBulkEditEnabled: (isEnabled: boolean) => void;
   toggleBookmark: (bookmark: ZBookmark) => void;
+  setVisibleBookmarks: (visibleBookmarks: ZBookmark[]) => void;
+  selectAll: () => void;
+  unSelectAll: () => void;
+  isEverythingSelected: () => boolean;
 }
 
 const useBulkActionsStore = create<BookmarkState>((set, get) => ({
   selectedBookmarks: [],
+  visibleBookmarks: [],
   isBulkEditEnabled: false,
 
   toggleBookmark: (bookmark: ZBookmark) => {
@@ -30,10 +36,27 @@ const useBulkActionsStore = create<BookmarkState>((set, get) => ({
     }
   },
 
+  selectAll: () => {
+    set({ selectedBookmarks: get().visibleBookmarks });
+  },
+  unSelectAll: () => {
+    set({ selectedBookmarks: [] });
+  },
+
+  isEverythingSelected: () => {
+    return get().selectedBookmarks.length === get().visibleBookmarks.length;
+  },
+
   setIsBulkEditEnabled: (isEnabled) => {
     set({ isBulkEditEnabled: isEnabled });
     set({ selectedBookmarks: [] });
   },
+
+  setVisibleBookmarks: (visibleBookmarks: ZBookmark[]) => {
+    set({
+      visibleBookmarks,
+    });
+  },
 }));
 
 export default useBulkActionsStore;