Files
nib-v1/TODO.md
T
lerko f26716a9ee feat(ui): phase 4 — promote modal polish, TODO complete
- Promote modal: colored glyphs, type names, hint descriptions per type
- Show truncated entry body in promote modal subtitle
- Mark all redesign phases complete in TODO.md
2026-05-16 09:37:32 -04:00

1.7 KiB

UI Redesign — Design Handoff Implementation

Phase 1: Layout + Tokens + Header + Rail ✓

  • Update CSS tokens (add --a-str, switch mono font to JetBrains Mono)
  • Fix grid dimensions (192px rail, 400px peek)
  • Move capture bar from header to bottom of center panel
  • Add search bar to header (centered, max-width 400px)
  • Redesign tag rail: grid layout (arrow ▸ + dot + name + count)
  • Add intent section (grab/read/fill) for cards view in rail

Phase 2: Stream + Cards Views ✓

  • Stream rows: promoted entries get card-style border/radius + card-type badge
  • Card rows: rich single-line with title — preview — affordance badges — tag pills — pin — use count
  • Affordance detection client-side (fill, steps, decide, link, code)
  • Affordance badge components
  • Cards sub-header (scope label + card count + sort dropdown)
  • Section labels (★ pinned, recent)
  • Flash animation on copy
  • Bottom capture bar styling per view (different placeholders)

Phase 3: Peek Pane + Modes ✓

  • Idle state with keyboard shortcuts display
  • Stream entry peek: eyebrow, body, tags, context, actions
  • Card peek: card container with eyebrow, title, desc, meta, content sections
  • Code block with content display
  • Decision section display
  • Steps section display
  • Link section display
  • Run mode (interactive checklist with progress bar)
  • Fill mode (inline slot editor with tab navigation)
  • Edit mode (form fields)
  • Toast notifications

Phase 4: Polish ✓

  • Promote modal enhancement (add hint text per type, show entry body preview)
  • Keyboard shortcuts (r=run, f=fill, p=pin in cards view)
  • Escape exits active modes