From c2506ef7fdc11de5f25e3bcd14fb3875b4d254e5 Mon Sep 17 00:00:00 2001
From: Tyler Koenig <tyler@lerkolabs.com>
Date: Sun, 17 May 2026 13:01:04 -0400
Subject: [PATCH] feat(ui): restructure promote modal into read/grab/fill
 columns

Card types grouped by intent: read (note, link, decision),
grab (snippet), fill (template, checklist). 3-column grid layout
with stacked buttons and intent headers.
---
 web/index.html | 69 ++++++++++++++++++++++++++++----------------------
 web/style.css  | 29 ++++++++++++++++-----
 2 files changed, 62 insertions(+), 36 deletions(-)

diff --git a/web/index.html b/web/index.html
index 9794a4b..cfa9da4 100644
--- a/web/index.html
+++ b/web/index.html
@@ -44,36 +44,45 @@
             <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 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 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 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 glyph-decision">⚖</span>
-                    <span class="type-name">decision</span>
-                    <span class="type-hint">record a choice + rationale</span>
-                </button>
-                <button data-type="note" class="type-btn">
-                    <span class="type-glyph glyph-note">¶</span>
-                    <span class="type-name">note</span>
-                    <span class="type-hint">readable markdown content</span>
-                </button>
-                <button data-type="link" class="type-btn">
-                    <span class="type-glyph glyph-link">↗</span>
-                    <span class="type-name">link</span>
-                    <span class="type-hint">reference URL</span>
-                </button>
+                <div class="type-col">
+                    <div class="type-col-lbl">read</div>
+                    <button data-type="note" class="type-btn">
+                        <span class="type-glyph glyph-note">¶</span>
+                        <span class="type-name">note</span>
+                        <span class="type-hint">markdown content</span>
+                    </button>
+                    <button data-type="link" class="type-btn">
+                        <span class="type-glyph glyph-link">↗</span>
+                        <span class="type-name">link</span>
+                        <span class="type-hint">reference URL</span>
+                    </button>
+                    <button data-type="decision" class="type-btn">
+                        <span class="type-glyph glyph-decision">⚖</span>
+                        <span class="type-name">decision</span>
+                        <span class="type-hint">choice + rationale</span>
+                    </button>
+                </div>
+                <div class="type-col">
+                    <div class="type-col-lbl">grab</div>
+                    <button data-type="snippet" class="type-btn">
+                        <span class="type-glyph glyph-snippet">◆</span>
+                        <span class="type-name">snippet</span>
+                        <span class="type-hint">code, command, text</span>
+                    </button>
+                </div>
+                <div class="type-col">
+                    <div class="type-col-lbl">fill</div>
+                    <button data-type="template" class="type-btn">
+                        <span class="type-glyph glyph-template">◈</span>
+                        <span class="type-name">template</span>
+                        <span class="type-hint">fillable ${slot}s</span>
+                    </button>
+                    <button data-type="checklist" class="type-btn">
+                        <span class="type-glyph glyph-checklist">☐</span>
+                        <span class="type-name">checklist</span>
+                        <span class="type-hint">step-by-step</span>
+                    </button>
+                </div>
             </div>
             <button class="modal-close">esc to cancel</button>
         </div>
diff --git a/web/style.css b/web/style.css
index e3393dc..3a07d22 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1380,7 +1380,8 @@ kbd { background: var(--raised); border: 1px solid var(--border); border-radius:
     border-radius: var(--r3);
     padding: 22px;
     z-index: 101;
-    min-width: 300px;
+    min-width: 380px;
+    max-width: 90vw;
     box-shadow: 0 20px 60px rgba(0,0,0,.5);
 }
 
@@ -1403,16 +1404,32 @@ kbd { background: var(--raised); border: 1px solid var(--border); border-radius:
 }
 
 .type-picker {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 10px;
+}
+
+.type-col {
     display: flex;
     flex-direction: column;
     gap: 4px;
 }
 
+.type-col-lbl {
+    font-family: var(--mono);
+    font-size: 9px;
+    text-transform: uppercase;
+    letter-spacing: .14em;
+    color: var(--dim);
+    padding: 0 4px 4px;
+}
+
 .type-btn {
     display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 8px 12px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 3px;
+    padding: 8px 10px;
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: var(--r2);
@@ -1426,8 +1443,8 @@ kbd { background: var(--raised); border: 1px solid var(--border); border-radius:
 .type-btn:hover { border-color: var(--accent); background: var(--raised); }
 .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-glyph { font-size: 13px; flex-shrink: 0; }
+.type-name { font-family: var(--mono); font-size: 11px; color: var(--text); }
 
 .type-hint {
     font-family: var(--sans);