diff --git a/src/layout/Shell.css b/src/layout/Shell.css index 0d1f469..f1e94df 100644 --- a/src/layout/Shell.css +++ b/src/layout/Shell.css @@ -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); +} diff --git a/src/layout/Shell.jsx b/src/layout/Shell.jsx index 64ef4f7..05c252f 100644 --- a/src/layout/Shell.jsx +++ b/src/layout/Shell.jsx @@ -60,7 +60,7 @@ export default function Shell() { {c.urgent ? : 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 ? {c.working} : null} + {c.working ? {c.working} with AI : null} {n} ) : 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 (
-

- {group.label} - {ready && group.kind === 'needs' && outstanding ? ( - {outstanding} - ) : null} -

+

{group.label}

{inGroup.map(queue)}
)