console: the nav navigates, and the screens act

"New lead" sat in the sidebar. A sidebar is for moving between places;
filing a lead is an action, and an action in a list of destinations is
the one item that does not behave like its neighbours — everything above
and below it changes what you are looking at, and it did something.

It now sits on the overview and on every queue, beside the lists it adds
to, which is also where somebody is standing when they realise they have
a lead to file. Same role gate as before: shown only to a user who holds
an entry door.

The sidebar's own button CSS went with it rather than being left for
someone to wonder about.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/layout/Shell.css

@@ -195,41 +195,6 @@
   animation: zk-rise 0.28s var(--ease) both;
 }
 
-/* ── Primary action ────────────────────────────────────────── */
-.shell__add {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  margin: 0 2px 22px;
-  padding: 11px 14px;
-  border-radius: var(--r-md);
-  text-decoration: none;
-  font-size: 0.86rem;
-  font-weight: 500;
-  color: var(--zk-white);
-  background: var(--grad-blue);
-  box-shadow: var(--sh-sm);
-  transition: box-shadow var(--t), transform var(--t-fast), background var(--t);
-}
-
-.shell__add:hover {
-  background: var(--grad-blue-hover);
-  box-shadow: var(--sh-md);
-  transform: translateY(-1px);
-}
-
-.shell__add:active {
-  transform: none;
-  box-shadow: var(--sh-xs);
-}
-
-.shell__add svg {
-  width: 15px;
-  height: 15px;
-  flex: none;
-}
-
 /* ── Narrow viewports: the rail lies down and scrolls ──────── */
 @media (max-width: 900px) {
   .shell__body {

src/layout/Shell.jsx

@@ -1,6 +1,6 @@
 import { NavLink, Outlet } from 'react-router-dom'
-import { ENTRY, NAV_GROUPS } from '../api/config.js'
-import { entryDoorsFor, rolesOf, visibleStages } from '../api/permissions.js'
+import { NAV_GROUPS } from '../api/config.js'
+import { rolesOf, visibleStages } from '../api/permissions.js'
 import { useStageCounts } from '../api/portfolio.jsx'
 import { useZino } from '../api/provider.jsx'
 import UserMenu from './UserMenu.jsx'
@@ -36,7 +36,6 @@ export default function Shell() {
   // The sidebar shows the queues this role WORKS in. Reporting on the rest
   // lives on the overview, which counts the whole book for everyone.
   const stages = visibleStages(roles)
-  const canFile = entryDoorsFor(roles, ENTRY).length > 0
   const { counts, ready } = useStageCounts()
 
   // One queue row. Extracted because the live groups and the folded Closed
@@ -98,15 +97,11 @@ export default function Shell() {
             All leads
           </NavLink>
 
-          {canFile ? (
-          <NavLink to="/add" className="shell__add">
-            <svg viewBox="0 0 16 16" aria-hidden="true">
-              <path d="M8 3.2v9.6M3.2 8h9.6" fill="none" stroke="currentColor" strokeWidth="1.7"
-                    strokeLinecap="round" />
-            </svg>
-            New lead
-          </NavLink>
-          ) : null}
+          {/* "New lead" used to sit here. A sidebar is for moving between
+              places; filing a lead is an ACTION, and an action in a list of
+              destinations is the one item that does not behave like its
+              neighbours. It lives on the screens where leads are looked at —
+              the overview and the queues — beside the thing it adds to. */}
 
           {NAV_GROUPS.filter((g) => g.kind !== 'end').map((group) => {
             const inGroup = stages.filter((s) => s.kind === group.kind)

src/screens/Overview.jsx

@@ -2,8 +2,8 @@ import { useMemo } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { usePortfolio } from '../api/portfolio.jsx'
 import { useZino } from '../api/provider.jsx'
-import { STAGES, phaseOf } from '../api/config.js'
-import { rolesOf, visibleStages } from '../api/permissions.js'
+import { ENTRY, STAGES, phaseOf } from '../api/config.js'
+import { entryDoorsFor, rolesOf, visibleStages } from '../api/permissions.js'
 import { describeError } from '../api/errors.js'
 import './screens.css'
 
@@ -58,6 +58,7 @@ export default function Overview() {
   const { user } = useZino()
   const navigate = useNavigate()
   const roles = rolesOf(user)
+  const canFile = entryDoorsFor(roles, ENTRY).length > 0
   const state = usePortfolio()
 
   const m = useMemo(() => {
@@ -167,11 +168,25 @@ export default function Overview() {
           <h1 className="page__title">Portfolio overview</h1>
           <p className="page__sub">Motor and SME renewals · organisation-wide</p>
         </div>
+        {/* The action sits with the thing it acts on. It was in the sidebar,
+            which is for moving between places — an action among destinations
+            is the one item that does not behave like its neighbours. */}
+        <div className="page__right">
           {state.at ? (
             <span className="stamp">
               Updated {state.at.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit' })}
             </span>
           ) : null}
+          {canFile ? (
+            <Link to="/add" className="newlead">
+              <svg viewBox="0 0 16 16" aria-hidden="true">
+                <path d="M8 3.2v9.6M3.2 8h9.6" fill="none" stroke="currentColor"
+                      strokeWidth="1.7" strokeLinecap="round" />
+              </svg>
+              New lead
+            </Link>
+          ) : null}
+        </div>
       </header>
 
       <div className="kpis">

src/screens/Pipeline.jsx

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { Link, useNavigate, useParams } from 'react-router-dom'
 import { useZino } from '../api/provider.jsx'
-import { CHANNELS, RV_LEADS, STAGES, phaseOf } from '../api/config.js'
+import { CHANNELS, ENTRY, RV_LEADS, STAGES, phaseOf } from '../api/config.js'
+import { entryDoorsFor, rolesOf } from '../api/permissions.js'
 import { describeError } from '../api/errors.js'
 
 /** Short absolute date plus how long ago — a queue needs both: the absolute
@@ -70,12 +71,20 @@ import './screens.css'
 export default function Pipeline() {
   const { stageUid } = useParams()
   const navigate = useNavigate()
-  const { client } = useZino()
-  // "all" is not a stage — it is every open lead in one list. An operator
-  // wanting to find a lead should not have to guess which queue it is in.
+  const { client, user } = useZino()
+  const canFile = entryDoorsFor(rolesOf(user), ENTRY).length > 0
+  // "all" is not a stage — it is every lead in one list, so an operator
+  // wanting to find one does not have to guess which queue it is in.
+  //
+  // IT MEANS ALL. This view used to drop closed leads, so a lead that was lost
+  // or onboarded disappeared from the page called "All leads" — the one place
+  // somebody goes when they cannot find something. A lead that ended is still
+  // a lead, and "where did it go?" is exactly the question this page exists to
+  // answer. Closed rows are shown, and dimmed, and can be hidden by choice.
   const isAll = stageUid === 'all'
+  const [hideClosed, setHideClosed] = useState(false)
   const stage = isAll
-    ? { uid: 'all', name: 'All open leads', kind: 'all', by: 'everyone' }
+    ? { uid: 'all', name: 'All leads', kind: 'all', by: 'everyone' }
     : STAGES.find((s) => s.uid === stageUid)
 
   const [state, setState] = useState({ status: 'loading', rows: [], total: 0, error: null })
@@ -99,10 +108,9 @@ export default function Pipeline() {
         .then((res) => {
           if (cancelled) return
           let rows = res?.data ?? res?.rows ?? res?.records ?? []
-          if (isAll) {
-            const closed = new Set(STAGES.filter((x) => x.kind === 'end').map((x) => x.name))
-            rows = rows.filter((r) => !closed.has(r.current_state_name))
-          }
+          // Nothing is dropped here any more. Whether closed leads are shown
+          // is a choice made below, on data already fetched — a filter that
+          // throws rows away at the query cannot be undone by a toggle.
           // total_count is the size of the QUEUE; rows is one page of at most
           // 100 of it. Counting the page would quietly under-report a busy stage.
           const total = isAll ? rows.length : (res?.pagination?.total_count ?? rows.length)
@@ -124,6 +132,14 @@ export default function Pipeline() {
     return () => { cancelled = true; clearInterval(id) }
   }, [client, stageUid, stage?.name, isAll])
 
+  // Split rather than filtered at the query, so the header can say how many
+  // are closed instead of silently showing fewer than the page claims.
+  const CLOSED = new Set(STAGES.filter((x) => x.kind === 'end').map((x) => x.name))
+  const closedCount = isAll ? state.rows.filter((r) => CLOSED.has(r.current_state_name)).length : 0
+  const shownRows = isAll && hideClosed
+    ? state.rows.filter((r) => !CLOSED.has(r.current_state_name))
+    : state.rows
+
   if (!stage) return <p className="empty">Unknown stage.</p>
 
   return (
@@ -145,9 +161,29 @@ export default function Pipeline() {
           </p>
         </div>
         {state.status === 'ready' ? (
+          <div className="page__right">
+            {/* Offered only where there is something to hide, and OFF by
+                default: this page's job is that nothing disappears from it. */}
+            {isAll && closedCount ? (
+              <label className="toggle">
+                <input type="checkbox" checked={hideClosed}
+                       onChange={(ev) => setHideClosed(ev.target.checked)} />
+                Hide {closedCount} closed
+              </label>
+            ) : null}
             <div className="page__count">
-            <strong>{state.total}</strong>
-            <span>{state.total === 1 ? 'lead' : 'leads'}</span>
+              <strong>{isAll ? shownRows.length : state.total}</strong>
+              <span>{(isAll ? shownRows.length : state.total) === 1 ? 'lead' : 'leads'}</span>
+            </div>
+            {canFile ? (
+            <Link to="/add" className="newlead">
+              <svg viewBox="0 0 16 16" aria-hidden="true">
+                <path d="M8 3.2v9.6M3.2 8h9.6" fill="none" stroke="currentColor"
+                      strokeWidth="1.7" strokeLinecap="round" />
+              </svg>
+              New lead
+            </Link>
+            ) : null}
           </div>
         ) : null}
       </header>
@@ -166,11 +202,11 @@ export default function Pipeline() {
         </div>
       ) : null}
 
-      {state.status === 'ready' && state.rows.length === 0 ? (
-        <p className="empty">No records in this stage.</p>
+      {state.status === 'ready' && shownRows.length === 0 ? (
+        <p className="empty">{isAll ? 'No leads yet.' : 'No records in this stage.'}</p>
       ) : null}
 
-      {state.status === 'ready' && state.rows.length > 0 ? (
+      {state.status === 'ready' && shownRows.length > 0 ? (
         <div className="gridwrap">
           <table className="grid">
             <thead>
@@ -183,7 +219,7 @@ export default function Pipeline() {
               </tr>
             </thead>
             <tbody>
-              {state.rows.map((r) => {
+              {shownRows.map((r) => {
                 const id = r.instance_id ?? r.id
                 const ch = CHANNELS[r.source_channel] || { label: r.source_channel || '—' }
                 const exp = expiry(r.renewal_due_date)
@@ -196,7 +232,9 @@ export default function Pipeline() {
                 return (
                   <tr
                     key={id}
-                    className={'grid__row' + (prog ? ' is-' + prog.state : '')}
+                    className={'grid__row'
+                      + (prog ? ' is-' + prog.state : '')
+                      + (CLOSED.has(r.current_state_name) ? ' is-done' : '')}
                     onClick={() => navigate(`/lead/${id}`)}
                     onKeyDown={(e) => {
                       if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); navigate(`/lead/${id}`) }

src/screens/screens.css

@@ -1369,3 +1369,49 @@
   background: var(--zk-amber-tint);
 }
 .doing--stalled strong { color: var(--zk-amber-ink); }
+
+/* ---- header right-hand cluster ---- */
+.page__right { display: flex; align-items: center; gap: 18px; flex: none; }
+
+.toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 0.78rem;
+  color: var(--zk-muted);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+.toggle input { accent-color: var(--zk-blue); cursor: pointer; }
+.toggle:hover { color: var(--zk-ink); }
+
+/* A finished lead, still listed. Dimmed rather than removed: "where did it
+   go?" is the question this page exists to answer, and a lead that ended is
+   still a lead. Hover restores it — it is muted, not disabled. */
+.grid__row.is-done { color: var(--zk-grey); }
+.grid__row.is-done .grid__name { color: var(--zk-muted); font-weight: 400; }
+.grid__row.is-done:hover { color: var(--zk-ink); }
+.grid__row.is-done:hover .grid__name { color: var(--zk-blue-dark); }
+
+/* ---- file a lead ----
+   Moved off the sidebar. A nav is for moving between places; this adds
+   something, and it now sits beside the lists it adds to. */
+.newlead {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+  padding: 9px 16px;
+  border-radius: var(--r-pill);
+  text-decoration: none;
+  font-size: 0.84rem;
+  font-weight: 500;
+  color: var(--zk-white);
+  background: var(--grad-blue);
+  box-shadow: var(--sh-sm);
+  transition: box-shadow var(--t), transform var(--t-fast), background var(--t);
+}
+.newlead svg { width: 14px; height: 14px; }
+.newlead:hover { background: var(--grad-blue-hover); box-shadow: var(--sh-md); transform: translateY(-1px); }
+.newlead:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 2px; }