fix: Hide bookmark global actions when there's no bookmark grid shown

3 files changed, 27 insertions, 3 deletions

diff --git a/apps/web/components/dashboard/GlobalActions.tsx b/apps/web/components/dashboard/GlobalActions.tsx
index d36b93d9..d385111a 100644
--- a/apps/web/components/dashboard/GlobalActions.tsx
+++ b/apps/web/components/dashboard/GlobalActions.tsx
@@ -3,13 +3,17 @@
 import BulkBookmarksAction from "@/components/dashboard/BulkBookmarksAction";
 import SortOrderToggle from "@/components/dashboard/SortOrderToggle";
 import ViewOptions from "@/components/dashboard/ViewOptions";
+import { useInBookmarkGridStore } from "@/lib/store/useInBookmarkGridStore";
 
 export default function GlobalActions() {
+  const inBookmarkGrid = useInBookmarkGridStore(
+    (state) => state.inBookmarkGrid,
+  );
   return (
     <div className="flex min-w-max flex-wrap overflow-hidden">
-      <ViewOptions />
-      <SortOrderToggle />
-      <BulkBookmarksAction />
+      {inBookmarkGrid && <ViewOptions />}
+      {inBookmarkGrid && <BulkBookmarksAction />}
+      {inBookmarkGrid && <SortOrderToggle />}
     </div>
   );
 }
diff --git a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
index 954a7751..f726c703 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo } from "react";
 import NoBookmarksBanner from "@/components/dashboard/bookmarks/NoBookmarksBanner";
 import { ActionButton } from "@/components/ui/action-button";
 import useBulkActionsStore from "@/lib/bulkActions";
+import { useInBookmarkGridStore } from "@/lib/store/useInBookmarkGridStore";
 import {
   bookmarkLayoutSwitch,
   useBookmarkLayout,
@@ -62,6 +63,7 @@ export default function BookmarksGrid({
   const layout = useBookmarkLayout();
   const gridColumns = useGridColumns();
   const bulkActionsStore = useBulkActionsStore();
+  const inBookmarkGrid = useInBookmarkGridStore();
   const breakpointConfig = useMemo(
     () => getBreakpointConfig(gridColumns),
     [gridColumns],
@@ -76,6 +78,13 @@ export default function BookmarksGrid({
   }, [bookmarks]);
 
   useEffect(() => {
+    inBookmarkGrid.setInBookmarkGrid(true);
+    return () => {
+      inBookmarkGrid.setInBookmarkGrid(false);
+    };
+  }, []);
+
+  useEffect(() => {
     if (loadMoreButtonInView && hasNextPage && !isFetchingNextPage) {
       fetchNextPage();
     }
diff --git a/apps/web/lib/store/useInBookmarkGridStore.ts b/apps/web/lib/store/useInBookmarkGridStore.ts
new file mode 100644
index 00000000..d534dc4c
--- /dev/null
+++ b/apps/web/lib/store/useInBookmarkGridStore.ts
@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+interface InBookmarkGridState {
+  inBookmarkGrid: boolean;
+  setInBookmarkGrid: (inBookmarkGrid: boolean) => void;
+}
+
+export const useInBookmarkGridStore = create<InBookmarkGridState>((set) => ({
+  inBookmarkGrid: false,
+  setInBookmarkGrid: (inBookmarkGrid) => set({ inBookmarkGrid }),
+}));