Skip to content

Queue tab redesign: meta row, scope segment, accent-rail rows, markdown note composer#3746

Merged
BunsDev merged 1 commit into
mainfrom
feat/queue-list-redesign-refresh
Jul 24, 2026
Merged

Queue tab redesign: meta row, scope segment, accent-rail rows, markdown note composer#3746
BunsDev merged 1 commit into
mainfrom
feat/queue-list-redesign-refresh

Conversation

@BunsDev

@BunsDev BunsDev commented Jul 24, 2026

Copy link
Copy Markdown
Member

Implements the Queue.dc.html design handoff (tasks-list-redesign-refresh) for the Familiar Work Queue — the Queue tab of the Tasks page. This is a visual/interaction refresh: the queue's real lane model, per-familiar rollup, degradation banners, Attention/Asana strips, and bead inspector are all preserved.

What changed

  • Meta rowN actionable · N total · updated Xm ago + Refresh, replacing the shared surface-compact header.
  • Scope segmentAll / Unassigned (whole-queue split); composes with the existing per-familiar filter chips rather than replacing them.
  • Segmented triage toolbar — search + priority bands (All/P0/P1/P2+) + sort, restyled to the mock.
  • Group headers — per-tone left accent border, uppercase label, mono count chip.
  • Rows — full-width list rows with a priority (bead) / lane (PR) accent rail, an assignment pill + sigil, a bead-id chip, a check-state dot-pill, review/merge/stale pills, and a mono priority + "updated" readout.
  • Inline markdown note composer — Write/Preview tabs + a formatting toolbar (bold/italic/code/heading/list/quote/link) over a self-contained, HTML-escaping renderer. Keeps the Handoff note for <id> AT name and the post-merge-cleanup Close-gating flow; commit button is now Save note.
  • Forward-to-familiar dropdown (ForwardMenu) — replaces the split StandardSelect, keeping the Claim for familiar… trigger name and menuitemradio items so the a11y + e2e contract is unchanged.

Scope notes

  • Only the Queue tab is in scope here. Tasks.dc.html (the Tasks table/board/gantt tab) is a separate design and is not touched.
  • All colour comes from semantic tokens; the surface tracks every theme.

Validation

  • tsc --noEmit — 0 errors
  • pnpm lint (design codemod + eslint --max-warnings=0) — clean, 0 drift
  • check:tests-wired — ✓
  • Unit source-pins (familiar-work-queue-view.test.ts) — rewritten for the redesign, passing
  • pnpm build — exit 0
  • E2E (familiar-work-queue.spec.ts) — updated (Add noteSave note); preserved region labels, .fwq-lane, Claim/Close/Refresh/note-gating/claim-for selectors

🤖 Generated with Claude Code

Copilot AI review requested due to automatic review settings July 24, 2026 04:45

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Implements the Queue tab redesign for the Familiar Work Queue surface, aligning the UI with the Queue.dc.html handoff while preserving the underlying lane model and existing workflows (claim/close/note/inspector).

Changes:

  • Replaces the shared compact header with a dedicated meta row, adds an All/Unassigned scope segment, and restyles the triage toolbar (search / priority / sort).
  • Redesigns lane groups and queue rows with accent rails, updated metadata/pills, and updated action controls (including a new forward-to-familiar dropdown).
  • Reworks the inline note composer into a Write/Preview markdown editor and updates unit + e2e pins/selectors accordingly.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
tests/familiar-work-queue.spec.ts Updates e2e to match the new “Save note” action label.
src/styles/familiar-work-queue.css Adds new layout/styling for meta row, segmented controls, lane headers, rows, forward menu, and note composer.
src/components/familiar-work-queue-view.tsx Adds scope filtering and replaces the old header/toolbar styling with the redesigned structure.
src/components/familiar-work-queue-view.test.ts Updates source-pin assertions to match redesigned DOM structure and note composer behavior.
src/components/familiar-work-queue-sections.tsx Introduces per-row accent rail logic, the ForwardMenu dropdown, and a custom markdown preview renderer for the new composer.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +295 to +304
const esc = (s: string) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
const inline = (s: string) =>
esc(s)
.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
.replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<em>$2</em>")
.replace(
/`([^`]+)`/g,
'<code style="font-family:var(--font-mono),monospace;font-size:12px;background:var(--bg-elevated);padding:1px 5px;border-radius:6px;">$1</code>',
)
.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
background: var(--popover);
border: 1px solid var(--border-hairline);
border-radius: var(--radius-panel, 8px);
box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.55);
…wn note composer (tasks-list-redesign-refresh)

Implements the Queue.dc.html design handoff for the Familiar Work Queue (the
Tasks page's Queue tab). Keeps the queue's real lane model, per-familiar rollup,
degradation banners, and bead inspector intact — this is a visual/interaction
refresh, not a data-model change.

- Meta row: actionable · total · "updated Xm ago" + Refresh (was surface-compact).
- Scope segment: All / Unassigned (whole-queue split), composes with familiar chips.
- Segmented triage toolbar: search + priority bands + sort, matching the mock.
- Group headers gain a per-tone left accent border; rows become full-width list
  rows with a priority/lane accent rail, an assignment pill + sigil, a bead
  chip, a check-state dot-pill, and a mono priority/updated readout.
- Note composer upgraded to the design's inline markdown editor: Write/Preview
  tabs + a formatting toolbar over a self-contained, HTML-escaping renderer.
  Keeps the "Handoff note for <id>" AT name and the cleanup Close-gating flow;
  commit button is now "Save note".
- Claim-for-familiar split control becomes the design's "Forward to familiar"
  dropdown (ForwardMenu), keeping the "Claim for familiar…" trigger name and
  menuitemradio items so the a11y + e2e contract is unchanged.

Tests: unit source-pins rewritten for the redesign; e2e updated (Add note →
Save note). tsc/eslint/design-codemod/tests-wired/build all green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@BunsDev
BunsDev force-pushed the feat/queue-list-redesign-refresh branch from a76b9e4 to 953fbc1 Compare July 24, 2026 05:05
@BunsDev
BunsDev merged commit 52d043c into main Jul 24, 2026
15 checks passed
@BunsDev
BunsDev deleted the feat/queue-list-redesign-refresh branch July 24, 2026 05:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants