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

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);

web/index.html

@@ -41,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>

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);