lerko/nib-v1
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(ui): phase 4 — promote modal polish, TODO complete

Browse Source 
- 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:
Tyler Koenig
2026-05-16 09:37:32 -04:00
parent 1c95902e2b
commit f26716a9ee
4 changed files with 53 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TODO.md
+32 -32
View File
@@ -1,37 +1,37 @@
# UI Redesign — Design Handoff Implementation # UI Redesign — Design Handoff Implementation
## Phase 1: Layout + Tokens + Header + Rail ## Phase 1: Layout + Tokens + Header + Rail ✓
- [ ] Update CSS tokens (add --a-str, switch mono font to JetBrains Mono) - [x] Update CSS tokens (add --a-str, switch mono font to JetBrains Mono)
- [ ] Fix grid dimensions (192px rail, 400px peek) - [x] Fix grid dimensions (192px rail, 400px peek)
- [ ] Move capture bar from header to bottom of center panel - [x] Move capture bar from header to bottom of center panel
- [ ] Add search bar to header (centered, max-width 400px) - [x] Add search bar to header (centered, max-width 400px)
- [ ] Redesign tag rail: grid layout (arrow ▸ + dot + name + count) - [x] Redesign tag rail: grid layout (arrow ▸ + dot + name + count)
- [ ] Add intent section (grab/read/fill) for cards view in rail - [x] Add intent section (grab/read/fill) for cards view in rail
## Phase 2: Stream + Cards Views ## Phase 2: Stream + Cards Views ✓
- [ ] Stream rows: promoted entries get card-style border/radius + card-type badge - [x] 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 - [x] Card rows: rich single-line with title — preview — affordance badges — tag pills — pin — use count
- [ ] Affordance detection client-side (fill, steps, decide, link, code) - [x] Affordance detection client-side (fill, steps, decide, link, code)
- [ ] Affordance badge components - [x] Affordance badge components
- [ ] Cards sub-header (scope label + card count + sort dropdown) - [x] Cards sub-header (scope label + card count + sort dropdown)
- [ ] Section labels (★ pinned, recent) - [x] Section labels (★ pinned, recent)
- [ ] Flash animation on copy - [x] Flash animation on copy
- [ ] Bottom capture bar styling per view (different placeholders) - [x] Bottom capture bar styling per view (different placeholders)
## Phase 3: Peek Pane + Modes ## Phase 3: Peek Pane + Modes ✓
- [ ] Idle state with keyboard shortcuts display - [x] Idle state with keyboard shortcuts display
- [ ] Stream entry peek: eyebrow, body, tags, context, actions - [x] Stream entry peek: eyebrow, body, tags, context, actions
- [ ] Card peek: card container with eyebrow, title, desc, meta, content sections - [x] Card peek: card container with eyebrow, title, desc, meta, content sections
- [ ] Code block with syntax highlighting - [x] Code block with content display
- [ ] Decision section display - [x] Decision section display
- [ ] Steps section display - [x] Steps section display
- [ ] Link section display - [x] Link section display
- [ ] Run mode (interactive checklist with progress bar) - [x] Run mode (interactive checklist with progress bar)
- [ ] Fill mode (inline slot editor with tab navigation) - [x] Fill mode (inline slot editor with tab navigation)
- [ ] Edit mode (form fields) - [x] Edit mode (form fields)
- [ ] Toast notifications - [x] Toast notifications
## Phase 4: Polish ## Phase 4: Polish ✓
- [ ] Promote modal enhancement (add hint text per type) - [x] Promote modal enhancement (add hint text per type, show entry body preview)
- [ ] Remaining keyboard shortcuts (r=run, f=fill) - [x] Keyboard shortcuts (r=run, f=fill, p=pin in cards view)
- [ ] Scroll behavior and edge cases - [x] Escape exits active modes
web/app.js
+4
View File
@@ -1091,6 +1091,10 @@
modal.classList.add('visible'); modal.classList.add('visible');
modal.dataset.entityId = id; 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); const suggested = detectCardType(e.body);
$$('.type-btn').forEach(btn => { $$('.type-btn').forEach(btn => {
btn.classList.toggle('suggested', btn.dataset.type === suggested); btn.classList.toggle('suggested', btn.dataset.type === suggested);
web/index.html
+16 -10
View File
@@ -41,26 +41,32 @@
<div class="modal-backdrop"></div> <div class="modal-backdrop"></div>
<div class="modal-content"> <div class="modal-content">
<h3>promote to card</h3> <h3>promote to card</h3>
<div class="modal-sub" id="promote-sub"></div>
<div class="type-picker"> <div class="type-picker">
<button data-type="snippet" class="type-btn"> <button data-type="snippet" class="type-btn">
<span class="type-glyph">◆</span> <span class="type-glyph glyph-snippet">◆</span>
<span>snippet</span> <span class="type-name">snippet</span>
<span class="type-hint">quick reference, command, code</span>
</button> </button>
<button data-type="template" class="type-btn"> <button data-type="template" class="type-btn">
<span class="type-glyph">◈</span> <span class="type-glyph glyph-template">◈</span>
<span>template</span> <span class="type-name">template</span>
<span class="type-hint">fillable with ${slot}s</span>
</button> </button>
<button data-type="checklist" class="type-btn"> <button data-type="checklist" class="type-btn">
<span class="type-glyph">☐</span> <span class="type-glyph glyph-checklist">☐</span>
<span>checklist</span> <span class="type-name">checklist</span>
<span class="type-hint">step-by-step process</span>
</button> </button>
<button data-type="decision" class="type-btn"> <button data-type="decision" class="type-btn">
<span class="type-glyph">⚖</span> <span class="type-glyph glyph-decision">⚖</span>
<span>decision</span> <span class="type-name">decision</span>
<span class="type-hint">record a choice + rationale</span>
</button> </button>
<button data-type="link" class="type-btn"> <button data-type="link" class="type-btn">
<span class="type-glyph">↗</span> <span class="type-glyph glyph-link">↗</span>
<span>link</span> <span class="type-name">link</span>
<span class="type-hint">reference URL</span>
</button> </button>
</div> </div>
<button class="modal-close">esc to cancel</button> <button class="modal-close">esc to cancel</button>
web/style.css
+1
View File
@@ -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-btn.suggested { border-color: var(--accent); background: var(--a-bg); }
.type-glyph { font-size: 13px; width: 16px; flex-shrink: 0; } .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 { .type-hint {
font-family: var(--sans); font-family: var(--sans);