lerko
dda8426113
- Switch mono font from Monaspace Neon to JetBrains Mono - Grid layout 192px | 1fr | 400px (was 180/320) - Move capture bar from header to bottom of center panel - Add search input to header center - Redesign tag rail: grid items with arrow/dot/name/count - Add intent section (grab/read/fill) in cards view rail - Add --a-str token, toast component - Logo 16px 700 weight
38 lines
1.7 KiB
Markdown
38 lines
1.7 KiB
Markdown
# 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 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 4: Polish
|
|
- [ ] Promote modal enhancement (add hint text per type)
|
|
- [ ] Remaining keyboard shortcuts (r=run, f=fill)
|
|
- [ ] Scroll behavior and edge cases
|