console: declutter the pipeline sidebar
Five fixes to the confusing nav: - The two per-row numbers had no key. The AI's share now reads "N with AI" in quiet grey, so it stops competing with the pink "needs you" badge. - Removed the outline node circles (and the rail line they hung on) — with one queue per group they read as empty checkboxes, not a pipeline. Rows now align flush and the active queue is shown by its tint alone. - Dropped the section-header count that just repeated the single row beneath it. - Lightened and tightened the group labels so the queues lead, not the headers. - Closed now matches a queue row — same padding, hover and count badge — while staying a foldable disclosure. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
parent
f31d6cb866
commit
90290a8b37
@ -86,14 +86,15 @@
|
||||
margin: 0 0 var(--sp-3);
|
||||
padding: 0 var(--sp-3);
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: var(--fw-semi);
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--zk-grey);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.shell__group + .shell__group {
|
||||
margin-top: var(--sp-7);
|
||||
margin-top: var(--sp-5);
|
||||
}
|
||||
|
||||
/* The stage list is drawn as a rail with a node per state: the sidebar should
|
||||
@ -105,16 +106,6 @@
|
||||
gap: var(--sp-1);
|
||||
}
|
||||
|
||||
.shell__stages::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
top: 20px;
|
||||
bottom: 20px;
|
||||
width: 2px;
|
||||
border-radius: var(--r-pill);
|
||||
background: linear-gradient(180deg, var(--zk-line) 0%, var(--zk-line-soft) 100%);
|
||||
}
|
||||
|
||||
.shell__stage {
|
||||
position: relative;
|
||||
@ -122,7 +113,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-2);
|
||||
padding: var(--sp-3) var(--sp-3) var(--sp-3) 40px;
|
||||
padding: 9px 12px;
|
||||
border-radius: var(--r-md);
|
||||
text-decoration: none;
|
||||
color: var(--zk-muted);
|
||||
@ -130,41 +121,17 @@
|
||||
transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
|
||||
}
|
||||
|
||||
.shell__stage::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 50%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-top: -6px;
|
||||
border-radius: 50%;
|
||||
background: var(--zk-white);
|
||||
border: 2px solid var(--zk-line);
|
||||
transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
|
||||
}
|
||||
|
||||
.shell__stage:hover {
|
||||
background: var(--zk-tint);
|
||||
color: var(--zk-ink);
|
||||
}
|
||||
|
||||
.shell__stage:hover::before {
|
||||
border-color: var(--zk-blue-light);
|
||||
}
|
||||
|
||||
.shell__stage.is-active {
|
||||
background: var(--zk-tint-blue);
|
||||
color: var(--zk-blue-dark);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.shell__stage.is-active::before {
|
||||
background: var(--zk-blue);
|
||||
border-color: var(--zk-blue);
|
||||
box-shadow: 0 0 0 4px rgba(33, 103, 174, 0.14);
|
||||
}
|
||||
|
||||
/* Queues where the machine stops and a person decides. */
|
||||
.shell__stage.is-needed .shell__stagename {
|
||||
font-weight: 500;
|
||||
@ -292,12 +259,7 @@
|
||||
font-style: normal;
|
||||
font-size: var(--fs-2xs);
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--zk-blue-mid);
|
||||
}
|
||||
.shell__auto::after {
|
||||
content: '·';
|
||||
margin-left: 5px;
|
||||
color: var(--zk-line);
|
||||
color: var(--zk-grey);
|
||||
}
|
||||
|
||||
/* A renewal inside a week sitting in this queue. */
|
||||
@ -310,7 +272,6 @@
|
||||
}
|
||||
|
||||
.shell__stage.is-empty { color: var(--zk-grey); }
|
||||
.shell__stage.is-empty::before { border-color: var(--zk-line-soft); }
|
||||
.shell__stage.is-empty.is-needed .shell__stagename { color: var(--zk-muted); font-weight: 400; }
|
||||
|
||||
/* The one number worth carrying on a group heading: everything this role has
|
||||
@ -322,51 +283,46 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.shell__grouptally {
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--zk-white);
|
||||
background: var(--zk-blue);
|
||||
border-radius: var(--r-pill);
|
||||
padding: 1px 7px;
|
||||
}
|
||||
|
||||
/* ── Closed, folded ───────────────────────────────────────────────────────
|
||||
Three of the twelve queues, opened about once a week. */
|
||||
.shell__closed { margin-top: 22px; }
|
||||
.shell__closed { margin-top: var(--sp-4); }
|
||||
|
||||
/* Closed matches a queue row — same padding, hover and count — but stays a
|
||||
disclosure: a chevron marks it as foldable, closed by default because it is
|
||||
reporting, not work. */
|
||||
.shell__closed > summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
padding: 0 10px 10px;
|
||||
font-size: var(--fs-3xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--zk-grey);
|
||||
padding: 9px 12px;
|
||||
border-radius: var(--r-md);
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--zk-muted);
|
||||
transition: background var(--t-fast), color var(--t-fast);
|
||||
}
|
||||
.shell__closed > summary::-webkit-details-marker { display: none; }
|
||||
.shell__closed > summary:hover { color: var(--zk-muted); }
|
||||
.shell__closed > summary b {
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--zk-grey);
|
||||
}
|
||||
.shell__closed > summary::after {
|
||||
.shell__closed > summary:hover { background: var(--zk-tint); color: var(--zk-ink); }
|
||||
.shell__closed > summary::before {
|
||||
content: '';
|
||||
order: -1;
|
||||
flex: none;
|
||||
width: 5px; height: 5px;
|
||||
border-right: 1.5px solid currentColor;
|
||||
border-bottom: 1.5px solid currentColor;
|
||||
border-right: 1.5px solid var(--zk-grey);
|
||||
border-bottom: 1.5px solid var(--zk-grey);
|
||||
transform: rotate(-45deg);
|
||||
transition: transform var(--t-fast);
|
||||
}
|
||||
.shell__closed[open] > summary::after { transform: rotate(45deg); }
|
||||
.shell__closed[open] > summary::before { transform: rotate(45deg); }
|
||||
.shell__closed > summary b {
|
||||
margin-left: auto;
|
||||
min-width: 20px;
|
||||
padding: 1px 6px;
|
||||
border-radius: var(--r-pill);
|
||||
text-align: center;
|
||||
font-size: var(--fs-2xs);
|
||||
font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--zk-grey);
|
||||
background: var(--zk-tint);
|
||||
}
|
||||
|
||||
@ -60,7 +60,7 @@ export default function Shell() {
|
||||
{c.urgent ? <span className="shell__urgent" title={`${c.urgent} expiring within 7 days`} /> : null}
|
||||
{/* The agents' share is shown in the middle dot notation rather
|
||||
than added in: it is in the queue, it is not your work. */}
|
||||
{c.working ? <em className="shell__auto" title={`${c.working} being worked by an agent`}>{c.working}</em> : null}
|
||||
{c.working ? <em className="shell__auto" title={`${c.working} being worked by an agent`}>{c.working} with AI</em> : null}
|
||||
<b className={'shell__n' + (n ? '' : ' is-zero')}>{n}</b>
|
||||
</span>
|
||||
) : null}
|
||||
@ -106,15 +106,9 @@ export default function Shell() {
|
||||
{NAV_GROUPS.filter((g) => g.kind !== 'end').map((group) => {
|
||||
const inGroup = stages.filter((s) => s.kind === group.kind)
|
||||
if (!inGroup.length) return null
|
||||
const outstanding = inGroup.reduce((t, s) => t + (counts[s.uid]?.waiting || 0), 0)
|
||||
return (
|
||||
<div className="shell__group" key={group.kind}>
|
||||
<p className="shell__navlabel">
|
||||
{group.label}
|
||||
{ready && group.kind === 'needs' && outstanding ? (
|
||||
<span className="shell__grouptally">{outstanding}</span>
|
||||
) : null}
|
||||
</p>
|
||||
<p className="shell__navlabel">{group.label}</p>
|
||||
<div className="shell__stages">{inGroup.map(queue)}</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user