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
This commit is contained in:
2026-05-16 09:37:32 -04:00
parent 1c95902e2b
commit f26716a9ee
4 changed files with 53 additions and 42 deletions
+32 -32
View File
@@ -1,37 +1,37 @@
# 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 1: Layout + Tokens + Header + Rail
- [x] Update CSS tokens (add --a-str, switch mono font to JetBrains Mono)
- [x] Fix grid dimensions (192px rail, 400px peek)
- [x] Move capture bar from header to bottom of center panel
- [x] Add search bar to header (centered, max-width 400px)
- [x] Redesign tag rail: grid layout (arrow ▸ + dot + name + count)
- [x] 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 2: Stream + Cards Views
- [x] Stream rows: promoted entries get card-style border/radius + card-type badge
- [x] Card rows: rich single-line with title — preview — affordance badges — tag pills — pin — use count
- [x] Affordance detection client-side (fill, steps, decide, link, code)
- [x] Affordance badge components
- [x] Cards sub-header (scope label + card count + sort dropdown)
- [x] Section labels (★ pinned, recent)
- [x] Flash animation on copy
- [x] 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 syntax highlighting
- [ ] 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 3: Peek Pane + Modes
- [x] Idle state with keyboard shortcuts display
- [x] Stream entry peek: eyebrow, body, tags, context, actions
- [x] Card peek: card container with eyebrow, title, desc, meta, content sections
- [x] Code block with content display
- [x] Decision section display
- [x] Steps section display
- [x] Link section display
- [x] Run mode (interactive checklist with progress bar)
- [x] Fill mode (inline slot editor with tab navigation)
- [x] Edit mode (form fields)
- [x] Toast notifications
## Phase 4: Polish
- [ ] Promote modal enhancement (add hint text per type)
- [ ] Remaining keyboard shortcuts (r=run, f=fill)
- [ ] Scroll behavior and edge cases
## Phase 4: Polish
- [x] Promote modal enhancement (add hint text per type, show entry body preview)
- [x] Keyboard shortcuts (r=run, f=fill, p=pin in cards view)
- [x] Escape exits active modes