From d1fa58ecc302874a463ff771ba45eb77daa4e94b Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Wed, 2 Sep 2026 17:24:23 +0500
Subject: [PATCH] Inbox: surface the All toggle at the top of the queue

The unpaged switch lived only in the bottom Per-page dropdown and went
unnoticed. The bulk bar now carries a Show all (N) / Show paged button
(hidden while rows are ticked, since the bar swaps to selection
actions); it drives the same pageSize state, so the dropdown stays in
sync. The bar wraps now - four controls no longer fit one line in the
34%-wide split column at laptop widths.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/screens/Inbox.jsx | 21 ++++++++++++++++++++-
 frontend/src/styles/styles.css |  6 +++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/src/screens/Inbox.jsx b/frontend/src/screens/Inbox.jsx
index 0c8e999..1bf403e 100644
--- a/frontend/src/screens/Inbox.jsx
+++ b/frontend/src/screens/Inbox.jsx
@@ -607,7 +607,7 @@ const READ_TICK_MS = 1000
  * `rows` rather than a count, because the bar needs each row's read state, and
  * `selectedIds` narrows it to what the selected pair of buttons would touch.
  */
-function BulkReadBar({ rows, selection, onSetRead, onSetAllRead, busy, canEdit, scopeLabel }) {
+function BulkReadBar({ rows, selection, onSetRead, onSetAllRead, busy, canEdit, scopeLabel, showAll, onToggleShowAll, tabTotal }) {
   const { selectedIds, toggleAll, clear, allSelected } = selection
   const n = selectedIds.size
   const total = rows.length
@@ -658,6 +658,17 @@ function BulkReadBar({ rows, selection, onSetRead, onSetAllRead, busy, canEdit,
           ? `${n} selected`
           : `${total}${unreadCount ? ` · ${unreadCount}` : ''}`}
       </span>
+      {/* Same switch as the Per-page "All" entry below, surfaced at the top of
+          the queue where the eye actually is. */}
+      {onToggleShowAll && n === 0 && (
+        <button
+          className={`btn btn-sm ${showAll ? 'btn-primary' : 'btn-secondary'}`}
+          title={showAll ? 'Back to paged view' : `Show all ${tabTotal || ''} in one list`}
+          onClick={onToggleShowAll}
+        >
+          {showAll ? 'Show paged' : `Show all${tabTotal ? ` (${tabTotal})` : ''}`}
+        </button>
+      )}
       <div className="inbox-bulk-actions">
         {n > 0 ? (
           <>
@@ -1112,6 +1123,14 @@ export default function Inbox() {
                   busy={setRead.isPending || setReadAll.isPending}
                   canEdit={canEdit}
                   scopeLabel={scopeLabel}
+                  showAll={showAll}
+                  tabTotal={total}
+                  onToggleShowAll={() => {
+                    setPageSize(showAll ? DEFAULT_PAGE_SIZE : 'all')
+                    setSkip(0)
+                    setSelectedId(null)
+                    selection.clear()
+                  }}
                 />
               )}
               <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)' }}>
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index 04c6693..e3676ca 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -1084,7 +1084,10 @@ canvas { width: 100%; max-width: 100%; display: block; }
   gap: 8px;
   padding: 8px 12px;
   border-bottom: 1px solid var(--border);
-  flex-wrap: nowrap;
+  /* wrap: the Show all toggle joined the row, and in the 34%-wide split
+     column the four controls no longer fit on one line at laptop widths. */
+  flex-wrap: wrap;
+  row-gap: 6px;
   min-width: 0;
 }
 .inbox-bulk-count {
@@ -1582,6 +1585,7 @@ canvas { width: 100%; max-width: 100%; display: block; }
   /* When the Ask button wraps under the input, let it take the full row. */
   .ask-form .btn { flex: 1 1 auto; }
 
+
   /* Find Talent: stack the toolbar controls edge to edge. */
   .talent-controls .tc-job, .talent-controls .tc-loc,
   .talent-controls .tc-custom, .talent-controls .btn {
-- 
2.40.1