f26716a9ee
- 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
1.7 KiB
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