From badf697d0b83ef4d093e781f04ed73d3901e6a9f Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Fri, 27 Sep 2024 09:17:51 +0000
Subject: feature(web): Add a select all button to bulk actions

---
 .../components/dashboard/BulkBookmarksAction.tsx   | 24 +++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

(limited to 'apps/web/components/dashboard/BulkBookmarksAction.tsx')

diff --git a/apps/web/components/dashboard/BulkBookmarksAction.tsx b/apps/web/components/dashboard/BulkBookmarksAction.tsx
index 9e831e80..a3f0ea55 100644
--- a/apps/web/components/dashboard/BulkBookmarksAction.tsx
+++ b/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
-- 
cgit v1.2.3-70-g09d2

