Skip to content

Left-Rail Sidebar Redesign (Expert Mode)

Status: Proposal (April 2026) — Phases A + B implementing on branch leftsidebar-redesign-claude. Comments tab (ReviewPanel mode="com") UI redesign landed on branch codex/dfm-injection-molding-rules-bar-refinement-comments at commit 8a61fd3. The broader five-panel LeftPanel shell still tracks this proposal; see Implementation status at the bottom for specifics. Reviewer role assumed: Product designer + frontend architect with enterprise-SaaS experience (Linear, Notion, Figma) and a study of CoLab Software's Workspace Feedback + Cross-Functional Review patterns Purpose: Replace the big-card, low-density left-panel look with a dense, scannable, CoLab-inspired feedback/issue list shell that all five panels inherit. Related: - Home Redesign — shared tokens and recent-items pattern - DraftLint Redesign — severity palette, stage tracker - Code Review — Frontend (D) — D1/D2 (store + API client) will land naturally on this shared shell

What CoLab Does Well (relevant to our sidebars)

From C:\Users\adeel\OneDrive\100_Knowledge\203_TextCAD\08_Competition_Inspiration\colabsoftware and the 25-page PRD:

  1. Feedback is the central object. Every issue, idea, comment, lesson learned lives in one "Workspace Feedback" table, filterable by priority / owner / status / part / revision.
  2. Dense rows, not big cards. trackissue.png shows ~15 rows on a laptop screen. Row = Key · Title · Type chip · Status · Revision.
  3. Saved Views + Filter at top. Persistent strip — engineers return to "My Open Issues", "Reviews Due This Week", "Latest Rev Feedback".
  4. Avatars everywhere. Review owners, reviewers, commenters, assignees are circles with initials + status dots (crossfunctional.png, peerreview.png, assignreview.png).
  5. Type chips with icons, not full-width colored pills. Compact, color-dim, icon-forward.
  6. Pinned-comment floating card echoes the row shape (avatar, role, tag, reply count, timestamp).
  7. PRD emphases: automatic issue tracking, search + filter, status tracking (open/in progress/resolved/closed), assignment, priorities, due dates, @mention, real-time + async, saved views.

Current State — The Five Left-Rail Panels

All five panels render through two components:

Tab Component Data
views ViewsPanel.tsx view/shape/occ/iso URLs
com (Comments) ReviewPanel.tsx mode="com" tickets[] (real)
reviews ReviewPanel mode="reviews" designReviews[] (real)
dfm ReviewPanel mode="dfm" DFM_CARDS (static mock)
km ReviewPanel mode="km" KM_CARDS (static mock)
req ReviewPanel mode="req" REQ_CARDS (static mock)

A single 1,400-line component shape-shifts across five panels.

What's wrong visually

  1. Table-header column labels above a card list — mismatched mental model.
  2. Massive cards, 2–3 items visible.
  3. Giant blue tag pills, no severity color, no icon.
  4. No avatars anywhere.
  5. No priority/severity dots at row level.
  6. No Saved Views / Filter strip.
  7. No search input.
  8. Metadata rendered as raw "Severity: High · Status: Open · Source: …" prose.
  9. Empty state is "No items yet.".
  10. Saturated orange Start Review CTA clashes with the calm palette.
  11. No count strip (All / Open / In Progress / Resolved).
  12. No sort, group-by, bulk actions, row hover actions.
  13. DFM / KM / Requirements panels render static mock data.
  14. Comments and Reviews look identical — no distinction cue.

Design Principles

  1. Feedback-first, not CAD-first. The sidebar is where issues, reviews, DFM findings, knowledge entries live.
  2. Shared shell, per-panel content. Five panels inherit the same chrome so muscle memory carries.
  3. Row density first. Default view is a dense row list; 15+ items visible.
  4. Status through color, not prose. Severity dots, type chips with icons.
  5. Avatars are first-class. Author, owner, assignee, reviewer always visible.
  6. Saved Views + Filter chips persistent, not buried.
  7. Detail opens a split-pane, list context stays visible.
  8. Calm palette reusing existing tokens + PDF-report severity palette (Critical #C0392B, Major #E67E22, Minor #F1C40F).
  9. No new npm packages in Phase A or B.

Proposed Shared Shell (all 5 panels inherit this)

┌─────────────────────────────────────────────────────────────┐
│  DFM · Design for Manufacturing            ≡ + ••• │
├─────────────────────────────────────────────────────────────┤
│  [All 24]  [Open 12]  [In Prog 3]  [Resolved 9]             │
├─────────────────────────────────────────────────────────────┤
│  🔍 Search…          Saved views ▾   Filter ▾    Sort ▾      │
├─────────────────────────────────────────────────────────────┤
│  🔴 DFM-07  Sharp internal corner at load path    👤 AY  3h │
│  🟠 DFM-06  Minimum wall thickness risk           👤 MF  5h │
│  🟠 DFM-05  Hole-to-edge distance too small       👤 AY  6h │
│  🟡 DFM-04  Draft angle missing on vertical faces 👤 TE  1d │
│  ─ rows continue ─                                          │
├─────────────────────────────────────────────────────────────┤
│  Showing 24 of 24                          Export · Settings│
└─────────────────────────────────────────────────────────────┘

Row anatomy

●  KEY-##   Title goes here (truncates)             [Type]  👤 AY   3h
↑      ↑         ↑                                    ↑     ↑     ↑
dot   key     title                                  type avatar time

Selected-row split pane

List stays visible at ~42% of panel; detail opens at ~58% on the right. On narrow widths it takes over the panel with a back chevron (preserves current mobile behaviour).

Per-Panel Specifics

Comments (com)

  • Type chips: Issue / Idea / Comment / Question.
  • Default saved view: Open on this part.
  • Rows show a 📍 when the comment is anchored to geometry; click jumps the viewer to the pin.

Reviews (reviews)

  • Row = status chip + checklist progress bar + reviewer avatars.
  • Primary action: + Start Review using --accent-1 (not saturated orange).
  • Detail renders the checklist with inline status toggles.

Design for Manufacturing (dfm)

  • Severity dot + title + finding tags + owner avatar + source chip (DFM checklist, CAE feedback, Tooling).
  • Header action: Re-run DFM (opens right-rail DFM sidebar).
  • Visual redesign keeps mock data until Phase C wires this panel to dfm_review_v2 output.

Knowledge Management (km)

  • Row = topic title + tags + source chip + last-used time.
  • Prominent Search since KM is retrieval-first.
  • Empty state gets an illustration-lite card with a clear capture CTA.
  • Static today.

Requirements (req)

  • Priority dot + req ID + title + status chip + owner avatar.
  • Tree grouping in Phase C.
  • Static today.

Views (views)

Different beast — generator control panel. Phase A just aligns CTAs + placeholder cards with new tokens; no structural change.

Interaction Patterns

Pattern Behaviour
Search ⌘F focuses; 150ms debounce; matches title + key + tags.
Status strip Click to filter; click active chip again to clear.
Filter menu Owner, tags, severity, source; multi-select.
Sort menu Recent / Oldest / Severity / Priority / Alphabetical.
Saved Views Dropdown with 4 built-ins + user-saved (localStorage; server sync later).
Keyboard j/k move selection, Enter open detail, Esc close, R reply, A assign, ⌘E export.
Bulk actions Shift-click range; ⌘A select all; bar shows Assign / Change status / Export.
Row hover Reply / Assign / Resolve fade in at row's right edge.
Empty state Icon + one-liner + primary CTA; no more "No items yet.".
Detail drawer Split-pane default; full-panel takeover on narrow widths.

Design Tokens (all reused, no new additions)

  • --accent-1 for all primary CTAs (removes orange gradients).
  • --surface-1 / --surface-2 / --surface-3 for panel/row/selected-row backgrounds.
  • --border-1 / --border-2 for separators.
  • --text-1 / --text-2 / --text-3 for heading/body/meta.
  • Severity palette from PDF-report tokens: Critical #C0392B, Major #E67E22, Minor #F1C40F, Info #3498DB, Pass #27AE60.
  • Typography: --font-body (Aptos), 13px / 1.45 row text, 11px mono for keys (DFM-07).

Phased Plan

Phase A — Visual refresh (IMPLEMENTING NOW, frontend only)

No structural changes; modernize the existing screens.

  • Dense row layout with severity dots, type chips, avatars, relative time.
  • Filter chips + sort dropdown replace the table-style column header.
  • Status count strip at top.
  • Calm empty states.
  • Align ViewsPanel CTAs + placeholder cards.
  • Swap every orange gradient CTA for --accent-1.

Phase B — Shared shell + split-pane detail (IMPLEMENTING NOW, frontend only)

Reorganize so every panel inherits the shell.

  • New web/src/components/LeftPanel/ package:
  • LeftPanel.tsx — layout shell.
  • LeftPanelRow.tsx — dense row.
  • LeftPanelDetail.tsx — split-pane detail.
  • useLeftPanelFilters.ts — search/filter/sort hook.
  • Avatar.tsx, SeverityDot.tsx, TypeChip.tsx — atoms.
  • savedViews.ts — localStorage for saved views.
  • ReviewPanel.tsx shrinks to a thin adapter: mode → data mapper + detail renderer + header action.
  • Keyboard j/k/Enter/Esc.
  • Saved Views with 4 built-ins.
  • Split-pane detail on wide panels; takeover on narrow.

Deferred to Phase B+: CSV export, bulk multi-select, checkbox filter menus, list virtualization.

Phase C — Data wiring (frontend + backend, deferred)

  • DFM left panel reads from dfm_review_v2 output (evidence pointers per row).
  • KM + Requirements need backend surfaces; flagged.
  • Server-side saved views (ties into code-review F1 activity log).
  • Bulk assign / bulk status change APIs.

Open Questions (do not block A/B)

  1. Default row density: compact 44px (my pick) or comfort 60px.
  2. Merge Comments + Reviews into one stream (CoLab-style)? My pick: keep separate, same chrome.
  3. Keep req tab if still static? My pick: keep with friendly empty state.
  4. Rail icons: icon + 11px label below (current), or label-on-hover? My pick: keep as-is.
  5. Saved Views localStorage vs server-backed? My pick: localStorage first.
  6. Comments vs DraftLint findings overlap — which panel owns promoted findings? My pick: Comments = inbox; Reviews = structured view.

Implementation Notes

  • Branch: leftsidebar-redesign-claude, cut from draftlint-redesign-claude (so local deploys show home + draftlint + left-sidebar redesigns together).
  • Repo: D:\02_Code\54_ClaudeReview_Rapiddraft\rapiddraft_utumpitch.
  • No new npm packages.
  • Reuse existing tokens in styles.css.
  • Build verification: npm run build must pass.
  • Local only; never pushed.

Acceptance Criteria For Phases A + B

  • All five left-rail panels use the same shared shell (LeftPanel).
  • ReviewPanel.tsx is under 600 lines.
  • Rows show severity dot, key, title, type chip, avatar, relative time.
  • Status count strip filters the list.
  • Search and Sort work client-side on all five panels.
  • Saved Views menu has 4 built-ins + localStorage-backed custom views.
  • Split-pane detail renders when a row is selected; keyboard j/k/Enter/Esc work.
  • ViewsPanel's CTAs + placeholders match the new tokens.
  • npm run build passes; existing Playwright specs still pass.

Implementation status — Comments tab (April 2026)

Landed on branch codex/dfm-injection-molding-rules-bar-refinement-comments, commit 8a61fd3. The broader shared-shell work in this proposal is still open; this section tracks only what's live for the Comments tab (mode="com").

Pin layer (ReviewPins.tsx) - 22px circular glyph pins with hover tooltip (REV-003 · title · author). - Type-specific glyph: ! issue, ✦ idea, + comment, ✓ resolved, ✕ failed review. - Resolved state drops to muted gray with lower shadow intensity. - Selected pin's card redesigned Colab-style: REV-nnn pill, type chip, title, author → assignee row, status pill, reply count.

Composer (CommentForm.tsx) - Replaced the full-screen modal with an inline popover anchored at the pin-click viewport coordinates. Clamped to viewport margins. - Title autofocused; Cmd/Ctrl+Enter submits; Escape cancels; click-outside soft-dismiss scrim. - Chip rows for type (Issue / Idea / Comment) and priority (Low / Med / High / Crit with arrow glyphs) — no dropdowns for the common case. - Expandable "Details" reveals assignee picker (with <datalist> fed from known authors) + tag + author (when not locked).

Detail pane (ReviewPanel.tsx ticket-detail render) - Header: REV-nnn pill, type chip, priority chip, status pill, right-aligned Resolve / Reopen button. - Title + byline with avatar initials and relative timestamp (3h ago, expands to absolute on hover). - Markdown-rendered description and replies via marked + DOMPurify (see web/src/utils/markdown.ts); @mention chips rendered as inline pills. - Three-column assignee / priority / status controls; assignee input uses known-authors datalist. - Thread with avatars, relative timestamps, inline delete. - Reply composer: markdown textarea, Cmd+Enter to send, compact submit; delete moved to a low-weight footer action. - Resolved state shows Resolved by X · 2h ago banner and fades the title.

Data model - ReviewTicket gained assignee?: string | null, resolvedAt?: string | null, resolvedBy?: string | null. - Backend CreateTicketBody accepts assignee; UpdateTicketBody accepts assignee, resolvedAt, resolvedBy. - review_store.create_ticket seeds all three as null on new tickets; existing stored tickets without these fields continue to render.

Still in proposal (not landed) - DFM / KM / Requirements tabs still mock-card-backed (mode="dfm" / "km" / "req"). - Saved Views menu with localStorage persistence. - Keyboard shortcuts j/k/Enter/Esc across all five panels. - ReviewPanel.tsx is still above the 600-line ceiling after the comments redesign — reduction pass deferred to the shared-shell rollout.