feat(ui): redesign to match design handoff prototype #9
@@ -0,0 +1,37 @@
|
||||
# UI Redesign — Design Handoff Implementation
|
||||
|
||||
## 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 ✓
|
||||
- [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 ✓
|
||||
- [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 ✓
|
||||
- [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
|
||||
+720
-156
File diff suppressed because it is too large
Load Diff
+22
-21
@@ -6,28 +6,22 @@
|
||||
<title>nib</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<style>
|
||||
@font-face { font-family: 'Monaspace Neon'; font-weight: 300; src: url('https://cdn.jsdelivr.net/gh/githubnext/monaspace@v1.000/fonts/webfonts/MonaspaceNeon-Light.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'Monaspace Neon'; font-weight: 400; src: url('https://cdn.jsdelivr.net/gh/githubnext/monaspace@v1.000/fonts/webfonts/MonaspaceNeon-Regular.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'Monaspace Neon'; font-weight: 500; src: url('https://cdn.jsdelivr.net/gh/githubnext/monaspace@v1.000/fonts/webfonts/MonaspaceNeon-Medium.woff2') format('woff2'); }
|
||||
@font-face { font-family: 'Monaspace Neon'; font-weight: 700; src: url('https://cdn.jsdelivr.net/gh/githubnext/monaspace@v1.000/fonts/webfonts/MonaspaceNeon-Bold.woff2') format('woff2'); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<header>
|
||||
<div class="header-left">
|
||||
<h1 class="logo">nib</h1>
|
||||
<span class="logo">nib</span>
|
||||
<nav>
|
||||
<button data-view="stream" class="nav-btn active">stream</button>
|
||||
<button data-view="cards" class="nav-btn">cards</button>
|
||||
</nav>
|
||||
</div>
|
||||
<form id="capture-bar" autocomplete="off">
|
||||
<input type="text" id="capture-input" placeholder="capture — - todo # note * event" spellcheck="false">
|
||||
</form>
|
||||
<div class="header-search">
|
||||
<input type="text" id="search-input" placeholder="? search #tag" spellcheck="false">
|
||||
</div>
|
||||
<button class="theme-toggle" id="theme-toggle" title="toggle theme">◑</button>
|
||||
</header>
|
||||
<main>
|
||||
@@ -35,6 +29,7 @@
|
||||
<section id="entity-panel">
|
||||
<div id="month-nav"></div>
|
||||
<div id="entity-list"></div>
|
||||
<div id="capture-bar"></div>
|
||||
</section>
|
||||
<aside id="detail-pane">
|
||||
<div class="detail-empty">select an entity</div>
|
||||
@@ -46,26 +41,32 @@
|
||||
<div class="modal-backdrop"></div>
|
||||
<div class="modal-content">
|
||||
<h3>promote to card</h3>
|
||||
<div class="modal-sub" id="promote-sub"></div>
|
||||
<div class="type-picker">
|
||||
<button data-type="snippet" class="type-btn">
|
||||
<span class="type-glyph">◆</span>
|
||||
<span>snippet</span>
|
||||
<span class="type-glyph glyph-snippet">◆</span>
|
||||
<span class="type-name">snippet</span>
|
||||
<span class="type-hint">quick reference, command, code</span>
|
||||
</button>
|
||||
<button data-type="template" class="type-btn">
|
||||
<span class="type-glyph">◈</span>
|
||||
<span>template</span>
|
||||
<span class="type-glyph glyph-template">◈</span>
|
||||
<span class="type-name">template</span>
|
||||
<span class="type-hint">fillable with ${slot}s</span>
|
||||
</button>
|
||||
<button data-type="checklist" class="type-btn">
|
||||
<span class="type-glyph">☐</span>
|
||||
<span>checklist</span>
|
||||
<span class="type-glyph glyph-checklist">☐</span>
|
||||
<span class="type-name">checklist</span>
|
||||
<span class="type-hint">step-by-step process</span>
|
||||
</button>
|
||||
<button data-type="decision" class="type-btn">
|
||||
<span class="type-glyph">⚖</span>
|
||||
<span>decision</span>
|
||||
<span class="type-glyph glyph-decision">⚖</span>
|
||||
<span class="type-name">decision</span>
|
||||
<span class="type-hint">record a choice + rationale</span>
|
||||
</button>
|
||||
<button data-type="link" class="type-btn">
|
||||
<span class="type-glyph">↗</span>
|
||||
<span>link</span>
|
||||
<span class="type-glyph glyph-link">↗</span>
|
||||
<span class="type-name">link</span>
|
||||
<span class="type-hint">reference URL</span>
|
||||
</button>
|
||||
</div>
|
||||
<button class="modal-close">esc to cancel</button>
|
||||
|
||||
+723
-180
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user