Rework inbox bulk selection UX

Made-with: Cursor

Author: Twixes

apps/code/src/renderer/features/inbox/components/InboxSignalsTab.tsx

@@ -11,6 +11,7 @@ import { useInboxReportSelectionStore } from "@features/inbox/stores/inboxReport
 import { useInboxSignalsFilterStore } from "@features/inbox/stores/inboxSignalsFilterStore";
 import { useInboxSignalsSidebarStore } from "@features/inbox/stores/inboxSignalsSidebarStore";
 import { useInboxSourcesDialogStore } from "@features/inbox/stores/inboxSourcesDialogStore";
+import { getEffectiveBulkSelectionIds } from "@features/inbox/utils/bulkSelection";
 import {
   buildSignalReportListOrdering,
   buildStatusFilterParam,
@@ -110,11 +111,26 @@ export function InboxSignalsTab() {
   const selectedReportIds = useInboxReportSelectionStore(
     (s) => s.selectedReportIds ?? [],
   );
+  const setSelectedReportIds = useInboxReportSelectionStore(
+    (s) => s.setSelectedReportIds,
+  );
   const toggleReportSelection = useInboxReportSelectionStore(
     (s) => s.toggleReportSelection,
   );
   const pruneSelection = useInboxReportSelectionStore((s) => s.pruneSelection);
 
+  // When true, an empty store means "nothing selected" — no virtual fallback.
+  // Set once the user first explicitly interacts with any checkbox.
+  // Resets when the open report changes while the store is still empty (fresh report).
+  const [selectionExplicitlyActivated, setSelectionExplicitlyActivated] =
+    useState(false);
+
+  // Stable refs so callbacks don't need re-registration on every render
+  const selectedReportIdsRef = useRef(selectedReportIds);
+  selectedReportIdsRef.current = selectedReportIds;
+  const selectionExplicitlyActivatedRef = useRef(false);
+  selectionExplicitlyActivatedRef.current = selectionExplicitlyActivated;
+
   useEffect(() => {
     if (reports.length === 0) {
       setSelectedReportId(null);
@@ -135,11 +151,79 @@ export function InboxSignalsTab() {
     pruneSelection(reports.map((report) => report.id));
   }, [reports, pruneSelection]);
 
+  // Reset to virtual mode when a different report is opened while the store is empty.
+  // selectedReportIdsRef is read (not declared) in the callback — biome can't see it
+  // depends on selectedReportId, so the dep is intentional.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: selectedReportId is the trigger; store length is read via a ref to avoid adding it as a dep
+  useEffect(() => {
+    if (selectedReportIdsRef.current.length === 0) {
+      setSelectionExplicitlyActivated(false);
+    }
+  }, [selectedReportId]);
+
   const selectedReport = useMemo(
     () => reports.find((report) => report.id === selectedReportId) ?? null,
     [reports, selectedReportId],
   );
 
+  const effectiveBulkIds = useMemo(
+    () =>
+      getEffectiveBulkSelectionIds(
+        selectedReportIds,
+        selectedReportId,
+        selectionExplicitlyActivated,
+      ),
+    [selectedReportIds, selectedReportId, selectionExplicitlyActivated],
+  );
+
+  // Toggle a report's checkbox, handling the virtual → explicit mode transition.
+  // When the first explicit toggle happens in virtual mode (store empty, a report is open):
+  //   - toggling a DIFFERENT report: seed the open report into the store too (keep it checked)
+  //   - toggling the OPEN report itself: transition to explicit-empty (uncheck it)
+  const handleToggleReportSelection = useCallback(
+    (reportId: string) => {
+      if (
+        !selectionExplicitlyActivatedRef.current &&
+        selectedReportIdsRef.current.length === 0
+      ) {
+        setSelectionExplicitlyActivated(true);
+        if (
+          selectedReportIdRef.current !== null &&
+          reportId !== selectedReportIdRef.current
+        ) {
+          // Seed the open report + add the newly toggled one
+          setSelectedReportIds([selectedReportIdRef.current, reportId]);
+        }
+        // If toggling the open report's own checkbox, the store stays empty
+        // and explicit = true → effective = [] (it becomes unchecked)
+      } else {
+        toggleReportSelection(reportId);
+      }
+    },
+    [setSelectedReportIds, toggleReportSelection],
+  );
+
+  // Handle the select-all checkbox. Parent owns all state transitions.
+  const handleToggleSelectAll = useCallback(
+    (checked: boolean) => {
+      if (checked) {
+        setSelectedReportIds(reportsRef.current.map((r) => r.id));
+        setSelectionExplicitlyActivated(true);
+      } else {
+        setSelectedReportIds([]);
+        if (!selectionExplicitlyActivatedRef.current) {
+          // Was in virtual mode (open report only virtually selected):
+          // close the report so there is truly nothing selected.
+          setSelectedReportId(null);
+          setSelectionExplicitlyActivated(false);
+        }
+        // If already in explicit mode, keep the flag true so the empty store
+        // means nothing selected — no fallback to the virtual open report.
+      }
+    },
+    [setSelectedReportIds],
+  );
+
   // ── Sidebar resize ─────────────────────────────────────────────────────
   const sidebarWidth = useInboxSignalsSidebarStore((state) => state.width);
   const sidebarIsResizing = useInboxSignalsSidebarStore(
@@ -279,14 +363,17 @@ export function InboxSignalsTab() {
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
         navigateReport(-1);
-      } else if (e.key === " " && selectedReportIdRef.current) {
+      } else if (
+        (e.key === " " || e.key === "Enter") &&
+        selectedReportIdRef.current
+      ) {
         e.preventDefault();
-        toggleReportSelection(selectedReportIdRef.current);
+        handleToggleReportSelection(selectedReportIdRef.current);
       }
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [navigateReport, toggleReportSelection]);
+  }, [navigateReport, handleToggleReportSelection]);
 
   const searchDisabledReason =
     !hasReports && !searchQuery.trim()
@@ -381,6 +468,8 @@ export function InboxSignalsTab() {
                     readyCount={readyCount}
                     processingCount={processingCount}
                     reports={reports}
+                    effectiveBulkIds={effectiveBulkIds}
+                    onToggleSelectAll={handleToggleSelectAll}
                   />
                 </Box>
                 <ReportListPane
@@ -397,9 +486,9 @@ export function InboxSignalsTab() {
                   searchQuery={searchQuery}
                   hasActiveFilters={hasActiveFilters}
                   selectedReportId={selectedReportId}
-                  selectedReportIds={selectedReportIds}
+                  selectedReportIds={effectiveBulkIds}
                   onSelectReport={setSelectedReportId}
-                  onToggleReportSelection={toggleReportSelection}
+                  onToggleReportSelection={handleToggleReportSelection}
                 />
               </Flex>
             </ScrollArea>

apps/code/src/renderer/features/inbox/components/list/SignalsToolbar.tsx

@@ -142,7 +142,7 @@ export function SignalsToolbar({
     snoozeSelected,
     deleteSelected,
     reingestSelected,
-  } = useInboxBulkActions(reports);
+  } = useInboxBulkActions(reports, effectiveBulkIds);
 
   const countLabel = isSearchActive
     ? `${filteredCount} of ${totalCount}`

apps/code/src/renderer/features/inbox/hooks/useInboxBulkActions.ts

@@ -135,18 +135,18 @@ function getSelectedReportEligibility(
   };
 }
 
-export function useInboxBulkActions(reports: SignalReport[]) {
+export function useInboxBulkActions(
+  reports: SignalReport[],
+  effectiveBulkIds: string[],
+) {
   const queryClient = useQueryClient();
-  const selectedReportIds = useInboxReportSelectionStore(
-    (state) => state.selectedReportIds ?? [],
-  );
   const clearSelection = useInboxReportSelectionStore(
     (state) => state.clearSelection,
   );
 
   const eligibility = useMemo(
-    () => getSelectedReportEligibility(reports, selectedReportIds),
-    [reports, selectedReportIds],
+    () => getSelectedReportEligibility(reports, effectiveBulkIds),
+    [reports, effectiveBulkIds],
   );
 
   const invalidateInboxQueries = useCallback(async () => {

apps/code/src/renderer/features/inbox/utils/bulkSelection.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import { getEffectiveBulkSelectionIds } from "./bulkSelection";
+
+describe("getEffectiveBulkSelectionIds", () => {
+  describe("virtual mode (selectionExplicitlyActivated = false, default)", () => {
+    it("uses store ids when non-empty", () => {
+      expect(getEffectiveBulkSelectionIds(["a", "b"], "c")).toEqual(["a", "b"]);
+    });
+
+    it("falls back to open report when store is empty", () => {
+      expect(getEffectiveBulkSelectionIds([], "r1")).toEqual(["r1"]);
+    });
+
+    it("returns empty when store is empty and nothing is open", () => {
+      expect(getEffectiveBulkSelectionIds([], null)).toEqual([]);
+    });
+  });
+
+  describe("explicit mode (selectionExplicitlyActivated = true)", () => {
+    it("returns store ids when non-empty", () => {
+      expect(getEffectiveBulkSelectionIds(["a", "b"], "c", true)).toEqual([
+        "a",
+        "b",
+      ]);
+    });
+
+    it("returns empty when store is empty, even with an open report", () => {
+      expect(getEffectiveBulkSelectionIds([], "r1", true)).toEqual([]);
+    });
+
+    it("returns empty when store is empty and nothing is open", () => {
+      expect(getEffectiveBulkSelectionIds([], null, true)).toEqual([]);
+    });
+  });
+});

apps/code/src/renderer/features/inbox/utils/bulkSelection.ts

@@ -0,0 +1,19 @@
+/**
+ * Returns the effective set of report IDs for bulk actions and list checkboxes.
+ *
+ * Two modes:
+ * - Virtual (selectionExplicitlyActivated = false, store empty): the currently open
+ *   report is treated as selected so bulk actions work without requiring a checkbox click.
+ * - Explicit (selectionExplicitlyActivated = true OR store non-empty): the store is the
+ *   sole source of truth. An empty store means nothing is selected — no fallback.
+ */
+export function getEffectiveBulkSelectionIds(
+  storeIds: string[],
+  openReportId: string | null,
+  selectionExplicitlyActivated = false,
+): string[] {
+  if (selectionExplicitlyActivated || storeIds.length > 0) {
+    return storeIds;
+  }
+  return openReportId != null ? [openReportId] : [];
+}