From f26716a9eecf9e90912647a91b9e0a73a8f6c8e9 Mon Sep 17 00:00:00 2001 From: Tyler Koenig Date: Sat, 16 May 2026 09:37:32 -0400 Subject: [PATCH] =?UTF-8?q?feat(ui):=20phase=204=20=E2=80=94=20promote=20m?= =?UTF-8?q?odal=20polish,=20TODO=20complete?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- TODO.md | 64 +++++++++++++++++++++++++------------------------- web/app.js | 4 ++++ web/index.html | 26 ++++++++++++-------- web/style.css | 1 + 4 files changed, 53 insertions(+), 42 deletions(-) diff --git a/TODO.md b/TODO.md index a93ac00..e532696 100644 --- a/TODO.md +++ b/TODO.md @@ -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 diff --git a/web/app.js b/web/app.js index 79b8032..1e5fe57 100644 --- a/web/app.js +++ b/web/app.js @@ -1091,6 +1091,10 @@ modal.classList.add('visible'); modal.dataset.entityId = id; + const sub = $('#promote-sub'); + const label = (e.body || '').slice(0, 64) + ((e.body || '').length > 64 ? '…' : ''); + sub.textContent = label; + const suggested = detectCardType(e.body); $$('.type-btn').forEach(btn => { btn.classList.toggle('suggested', btn.dataset.type === suggested); diff --git a/web/index.html b/web/index.html index c9ede77..42aed17 100644 --- a/web/index.html +++ b/web/index.html @@ -41,26 +41,32 @@

promote to card

+
diff --git a/web/style.css b/web/style.css index 21a35be..9ca81e6 100644 --- a/web/style.css +++ b/web/style.css @@ -1158,6 +1158,7 @@ kbd { background: var(--raised); border: 1px solid var(--border); border-radius: .type-btn.suggested { border-color: var(--accent); background: var(--a-bg); } .type-glyph { font-size: 13px; width: 16px; flex-shrink: 0; } +.type-name { font-family: var(--mono); font-size: 12px; color: var(--text); min-width: 72px; } .type-hint { font-family: var(--sans);