remove giant superpowers files
This commit is contained in:
vineyardbovines
@@ -1,167 +0,0 @@
|
||||
<h2>GIF Category Pills — Full Design</h2>
|
||||
<p class="subtitle">Horizontal scrollable pill row on the idle GIF picker screen</p>
|
||||
|
||||
<div class="section">
|
||||
<h3>Interaction Flow</h3>
|
||||
<div style="display:flex;gap:16px;flex-wrap:wrap">
|
||||
<!-- State 1: Idle / Trending selected -->
|
||||
<div style="flex:1;min-width:220px">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">1. Idle — "Trending" active</div>
|
||||
<div class="mockup-body" style="padding:12px;font-family:system-ui;background:#1a1a2e;color:#e0e0e0;font-size:13px">
|
||||
<div style="background:#2a2a4a;border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px;margin-bottom:8px">
|
||||
<span style="opacity:0.4">🔍</span>
|
||||
<span style="opacity:0.4">Search GIFs</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;font-size:12px">
|
||||
<div style="background:#4a4a7a;border-radius:16px;padding:5px 12px;white-space:nowrap">🔥 Trending</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:16px;padding:5px 12px;white-space:nowrap">❤️ Love</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:16px;padding:5px 12px;white-space:nowrap">😄 Happy</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:16px;padding:5px 12px;white-space:nowrap;opacity:0.5">...</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px">
|
||||
<div style="flex:1;background:#444;border-radius:6px;height:50px"></div>
|
||||
<div style="flex:1;background:#444;border-radius:6px;height:40px"></div>
|
||||
</div>
|
||||
<div style="text-align:center;margin-top:6px;font-size:10px;opacity:0.4">Featured GIFs</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- State 2: Category selected -->
|
||||
<div style="flex:1;min-width:220px">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">2. "Happy" tapped</div>
|
||||
<div class="mockup-body" style="padding:12px;font-family:system-ui;background:#1a1a2e;color:#e0e0e0;font-size:13px">
|
||||
<div style="background:#2a2a4a;border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px;margin-bottom:8px">
|
||||
<span style="opacity:0.4">🔍</span>
|
||||
<span style="opacity:0.4">Search GIFs</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px;margin-bottom:10px;overflow-x:auto;font-size:12px">
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:16px;padding:5px 12px;white-space:nowrap">🔥 Trending</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:16px;padding:5px 12px;white-space:nowrap">❤️ Love</div>
|
||||
<div style="background:#4a4a7a;border-radius:16px;padding:5px 12px;white-space:nowrap">😄 Happy</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:16px;padding:5px 12px;white-space:nowrap;opacity:0.5">...</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px">
|
||||
<div style="flex:1;background:#555;border-radius:6px;height:50px"></div>
|
||||
<div style="flex:1;background:#555;border-radius:6px;height:40px"></div>
|
||||
</div>
|
||||
<div style="text-align:center;margin-top:6px;font-size:10px;opacity:0.4">Search results for "happy"</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- State 3: User typing -->
|
||||
<div style="flex:1;min-width:220px">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">3. Typing — pills hidden</div>
|
||||
<div class="mockup-body" style="padding:12px;font-family:system-ui;background:#1a1a2e;color:#e0e0e0;font-size:13px">
|
||||
<div style="background:#2a2a4a;border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px;margin-bottom:8px">
|
||||
<span style="opacity:0.4">🔍</span>
|
||||
<span>sponge<span style="opacity:0.3">|</span></span>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px">
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:6px">
|
||||
<div style="background:#555;border-radius:6px;height:50px"></div>
|
||||
<div style="background:#555;border-radius:6px;height:40px"></div>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:6px">
|
||||
<div style="background:#555;border-radius:6px;height:40px"></div>
|
||||
<div style="background:#555;border-radius:6px;height:50px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:center;margin-top:6px;font-size:10px;opacity:0.4">Search results</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Architecture</h3>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Component & Data Flow</div>
|
||||
<div class="mockup-body" style="padding:20px;font-family:system-ui;font-size:14px;line-height:1.6">
|
||||
<div style="display:flex;gap:32px;flex-wrap:wrap">
|
||||
<div style="flex:1;min-width:280px">
|
||||
<div style="font-weight:600;margin-bottom:10px;color:#7c7cff;text-transform:uppercase;font-size:11px;letter-spacing:1px">Component Tree</div>
|
||||
<div style="font-family:monospace;font-size:13px;line-height:2">
|
||||
<div>GifPickerBody</div>
|
||||
<div style="padding-left:20px">├─ GifPickerHeader</div>
|
||||
<div style="padding-left:40px">│ └─ TextField.Input</div>
|
||||
<div style="padding-left:20px">├─ <span style="color:#5cdb5c;font-weight:600">GifCategoryPills</span> <span style="color:#5cdb5c;opacity:0.7">← NEW</span></div>
|
||||
<div style="padding-left:40px">│ <span style="opacity:0.5">(hidden when typing)</span></div>
|
||||
<div style="padding-left:20px">├─ GifPickerPlaceholder</div>
|
||||
<div style="padding-left:20px">└─ GifPickerGrid</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:280px">
|
||||
<div style="font-weight:600;margin-bottom:10px;color:#ff7c7c;text-transform:uppercase;font-size:11px;letter-spacing:1px">Data Flow</div>
|
||||
<div style="font-family:monospace;font-size:13px;line-height:2">
|
||||
<div><span style="opacity:0.5">1.</span> Idle → "Trending" active → featured endpoint</div>
|
||||
<div><span style="opacity:0.5">2.</span> Tap pill → set search to pill's searchterm</div>
|
||||
<div><span style="opacity:0.5">3.</span> useGifPickerData sees search → fires GIF search</div>
|
||||
<div><span style="opacity:0.5">4.</span> User types → pills hide, search takes over</div>
|
||||
<div><span style="opacity:0.5">5.</span> User clears input → pills reappear, "Trending" resets</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>File Changes</h3>
|
||||
<div style="font-family:monospace;font-size:13px;line-height:2.2;padding:0 8px">
|
||||
<div><span style="color:#5cdb5c">+</span> <strong>src/features/gifPicker/components/GifCategoryPills.tsx</strong> — pill row component</div>
|
||||
<div><span style="color:#ffcc00">~</span> <strong>src/features/gifPicker/GifPickerDialog.tsx</strong> — add category state, render pills in header, connect to search</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Curated Categories</h3>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:8px">
|
||||
<div style="background:#2a2a4a;border:1px solid #555;border-radius:20px;padding:6px 14px;font-size:13px;font-family:system-ui">🔥 Trending</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #555;border-radius:20px;padding:6px 14px;font-size:13px;font-family:system-ui">❤️ Love</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #555;border-radius:20px;padding:6px 14px;font-size:13px;font-family:system-ui">😄 Happy</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #555;border-radius:20px;padding:6px 14px;font-size:13px;font-family:system-ui">😢 Sad</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #555;border-radius:20px;padding:6px 14px;font-size:13px;font-family:system-ui">🎉 Party</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #555;border-radius:20px;padding:6px 14px;font-size:13px;font-family:system-ui">👍 Yes</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #555;border-radius:20px;padding:6px 14px;font-size:13px;font-family:system-ui">😂 LOL</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #555;border-radius:20px;padding:6px 14px;font-size:13px;font-family:system-ui">🤩 Excited</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Key Design Decisions</h3>
|
||||
<div style="font-family:system-ui;font-size:14px;line-height:1.8;padding:0 8px">
|
||||
<div><strong>No new API endpoint needed</strong> — tapping a category pill just sets the search query to the category's searchterm and uses the existing search flow</div>
|
||||
<div><strong>"Trending" = featured endpoint</strong> — the default active pill uses the existing featured GIFs, no search query</div>
|
||||
<div><strong>Pills hide while typing</strong> — simple visibility toggle based on whether rawSearch has content</div>
|
||||
<div><strong>Clearing input resets to Trending</strong> — pills reappear with "Trending" active again</div>
|
||||
<div><strong>Hardcoded category list</strong> — curated for quality, no extra API call needed</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Scope</h3>
|
||||
<div class="pros-cons">
|
||||
<div class="pros">
|
||||
<h4>In Scope</h4>
|
||||
<ul>
|
||||
<li>GifCategoryPills component (horizontal scroll, active state)</li>
|
||||
<li>8 curated category pills with emoji + label</li>
|
||||
<li>Tap pill → search GIFs for that category</li>
|
||||
<li>Pills hide when typing, reappear when cleared</li>
|
||||
<li>Active pill highlight styling</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cons">
|
||||
<h4>Out of Scope</h4>
|
||||
<ul>
|
||||
<li>Recent / Favorited (needs client-side persistence)</li>
|
||||
<li>Dynamic categories from API</li>
|
||||
<li>Category GIF thumbnails on the pills</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,106 +0,0 @@
|
||||
<h2>Category pills — where and how?</h2>
|
||||
<p class="subtitle">These appear on the idle/featured GIF screen, before the user starts typing</p>
|
||||
|
||||
<div class="options">
|
||||
<div class="option" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>Horizontal scrollable row of text pills</h3>
|
||||
<p>A single row of pill buttons below the search input. Scrolls horizontally. Compact, leaves maximum space for the GIF grid. Like how Threads does it.</p>
|
||||
<div class="mockup" style="margin-top:12px">
|
||||
<div class="mockup-header">Text pills — horizontal scroll</div>
|
||||
<div class="mockup-body" style="padding:16px;font-family:system-ui;background:#1a1a2e;color:#e0e0e0">
|
||||
<div style="background:#2a2a4a;border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px;margin-bottom:12px">
|
||||
<span style="opacity:0.4">🔍</span>
|
||||
<span style="opacity:0.4">Search GIFs</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:4px">
|
||||
<div style="background:#3a3a5a;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">🔥 Trending</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">❤️ Love</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">😄 Happy</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">😢 Sad</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">🎉 Party</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">👍 Yes</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">😭 LOL</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:8px">
|
||||
<div style="background:#444;border-radius:8px;height:80px"></div>
|
||||
<div style="background:#444;border-radius:8px;height:60px"></div>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:8px">
|
||||
<div style="background:#444;border-radius:8px;height:60px"></div>
|
||||
<div style="background:#444;border-radius:8px;height:80px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>Grid of GIF thumbnail tiles with labels</h3>
|
||||
<p>A 2-3 column grid of category tiles, each showing the category's preview GIF with a text label overlay. More visual, but takes up more space and replaces the featured GIFs initially.</p>
|
||||
<div class="mockup" style="margin-top:12px">
|
||||
<div class="mockup-header">GIF thumbnail grid</div>
|
||||
<div class="mockup-body" style="padding:16px;font-family:system-ui;background:#1a1a2e;color:#e0e0e0">
|
||||
<div style="background:#2a2a4a;border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px;margin-bottom:12px">
|
||||
<span style="opacity:0.4">🔍</span>
|
||||
<span style="opacity:0.4">Search GIFs</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px">
|
||||
<div style="background:#333;border-radius:8px;height:70px;display:flex;align-items:flex-end;justify-content:center;padding:6px;font-size:12px;font-weight:600">🔥 Trending</div>
|
||||
<div style="background:#333;border-radius:8px;height:70px;display:flex;align-items:flex-end;justify-content:center;padding:6px;font-size:12px;font-weight:600">❤️ Love</div>
|
||||
<div style="background:#333;border-radius:8px;height:70px;display:flex;align-items:flex-end;justify-content:center;padding:6px;font-size:12px;font-weight:600">😄 Happy</div>
|
||||
<div style="background:#333;border-radius:8px;height:70px;display:flex;align-items:flex-end;justify-content:center;padding:6px;font-size:12px;font-weight:600">😢 Sad</div>
|
||||
<div style="background:#333;border-radius:8px;height:70px;display:flex;align-items:flex-end;justify-content:center;padding:6px;font-size:12px;font-weight:600">🎉 Party</div>
|
||||
<div style="background:#333;border-radius:8px;height:70px;display:flex;align-items:flex-end;justify-content:center;padding:6px;font-size:12px;font-weight:600">👍 Yes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="c" onclick="toggleSelect(this)">
|
||||
<div class="letter">C</div>
|
||||
<div class="content">
|
||||
<h3>Horizontal pills + featured GIFs below (Threads-style)</h3>
|
||||
<p>Exactly like Threads: category pills as a scrollable row, with featured/trending GIFs filling the grid below. Tapping a pill replaces the grid with results for that category. Best of both worlds.</p>
|
||||
<div class="mockup" style="margin-top:12px">
|
||||
<div class="mockup-header">Pills + featured grid (Threads)</div>
|
||||
<div class="mockup-body" style="padding:16px;font-family:system-ui;background:#1a1a2e;color:#e0e0e0">
|
||||
<div style="background:#2a2a4a;border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px;margin-bottom:12px">
|
||||
<span style="opacity:0.4">🔍</span>
|
||||
<span style="opacity:0.4">Search GIFs</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:4px">
|
||||
<div style="background:#3a3a5a;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">🔥 Trending</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">❤️ Love</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">😄 Happy</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">😢 Sad</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">🎉 Party</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">👍 Yes</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:8px">
|
||||
<div style="background:#444;border-radius:8px;height:90px"></div>
|
||||
<div style="background:#444;border-radius:8px;height:70px"></div>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:8px">
|
||||
<div style="background:#444;border-radius:8px;height:70px"></div>
|
||||
<div style="background:#444;border-radius:8px;height:90px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:center;margin-top:8px;font-size:11px;opacity:0.5">Featured / Trending GIFs</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" style="margin-top:20px">
|
||||
<h3>My recommendation: Option C</h3>
|
||||
<p>Matches the Threads pattern exactly. Pills provide quick category access, the featured GIF grid fills the space below. "Trending" is the default selected pill, tapping another pill swaps the grid to that category's results. When the user starts typing, the pills hide and the search takes over.</p>
|
||||
</div>
|
||||
@@ -1,3 +0,0 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
@@ -1 +0,0 @@
|
||||
{"reason":"owner process exited","timestamp":1776198924022}
|
||||
@@ -1,6 +0,0 @@
|
||||
{"type":"server-started","port":53072,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:53072","screen_dir":"/Users/pope/dev/bsky/social-app/.superpowers/brainstorm/71603-1776195983/content","state_dir":"/Users/pope/dev/bsky/social-app/.superpowers/brainstorm/71603-1776195983/state"}
|
||||
{"type":"screen-added","file":"/Users/pope/dev/bsky/social-app/.superpowers/brainstorm/71603-1776195983/content/category-layout.html"}
|
||||
{"source":"user-event","type":"click","text":"C\n \n Horizontal pills + featured GIFs below (Threads-style)\n Exactly like Threads: category pills as a scrollable row, with featured/trending GIFs filling the grid below. Tapping a pill replaces the grid with results for that category. Best of both worlds.\n \n Pills + featured grid (Threads)\n \n \n 🔍\n Search GIFs\n \n \n 🔥 Trending\n ❤️ Love\n 😄 Happy\n 😢 Sad\n 🎉 Party\n 👍 Yes\n \n \n \n \n \n \n \n \n \n \n \n Featured / Trending GIFs","choice":"c","id":null,"timestamp":1776196240353}
|
||||
{"type":"screen-added","file":"/Users/pope/dev/bsky/social-app/.superpowers/brainstorm/71603-1776195983/content/waiting.html"}
|
||||
{"type":"screen-added","file":"/Users/pope/dev/bsky/social-app/.superpowers/brainstorm/71603-1776195983/content/category-design.html"}
|
||||
{"type":"server-stopped","reason":"owner process exited"}
|
||||
@@ -1 +0,0 @@
|
||||
71612
|
||||
@@ -1,173 +0,0 @@
|
||||
<h2>GIF Autocomplete — Full Design</h2>
|
||||
<p class="subtitle">Inline search suggestions powered by Klipy's autocomplete endpoint</p>
|
||||
|
||||
<div class="section">
|
||||
<h3>Architecture Overview</h3>
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Component & Data Flow</div>
|
||||
<div class="mockup-body" style="padding:24px;font-family:system-ui;font-size:14px;line-height:1.6">
|
||||
<div style="display:flex;gap:32px;flex-wrap:wrap">
|
||||
<!-- Left: component tree -->
|
||||
<div style="flex:1;min-width:300px">
|
||||
<div style="font-weight:600;margin-bottom:12px;color:#7c7cff;text-transform:uppercase;font-size:11px;letter-spacing:1px">Component Tree</div>
|
||||
<div style="font-family:monospace;font-size:13px;line-height:2">
|
||||
<div>GifPickerDialog</div>
|
||||
<div style="padding-left:20px;opacity:0.6">└─ GifPickerBody</div>
|
||||
<div style="padding-left:40px">├─ <span style="color:#7c7cff">GifPickerHeader</span></div>
|
||||
<div style="padding-left:60px">│ ├─ TextField.Input <span style="opacity:0.5">(search box)</span></div>
|
||||
<div style="padding-left:60px">│ └─ <span style="color:#5cdb5c;font-weight:600">GifAutocompleteSuggestions</span> <span style="color:#5cdb5c;opacity:0.7">← NEW</span></div>
|
||||
<div style="padding-left:40px">├─ GifPickerPlaceholder</div>
|
||||
<div style="padding-left:40px">└─ GifPickerGrid</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right: data flow -->
|
||||
<div style="flex:1;min-width:300px">
|
||||
<div style="font-weight:600;margin-bottom:12px;color:#ff7c7c;text-transform:uppercase;font-size:11px;letter-spacing:1px">Data Flow</div>
|
||||
<div style="font-family:monospace;font-size:13px;line-height:2">
|
||||
<div><span style="opacity:0.5">1.</span> User types → rawSearch state</div>
|
||||
<div><span style="opacity:0.5">2.</span> rawSearch throttled @ <span style="color:#5cdb5c">200ms</span> → autocomplete query</div>
|
||||
<div><span style="opacity:0.5">3.</span> rawSearch throttled @ 500ms → GIF search query</div>
|
||||
<div><span style="opacity:0.5">4.</span> Autocomplete response → suggestion strings</div>
|
||||
<div><span style="opacity:0.5">5.</span> User taps suggestion → fills input + fires search</div>
|
||||
<div><span style="opacity:0.5">6.</span> Suggestions hide when input matches a selected term</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>New Files</h3>
|
||||
<div style="font-family:monospace;font-size:13px;line-height:2.2;padding:0 8px">
|
||||
<div><span style="color:#5cdb5c">+</span> <strong>src/lib/constants.ts</strong> — add <code>GIF_KLIPY_AUTOCOMPLETE</code> endpoint</div>
|
||||
<div><span style="color:#5cdb5c">+</span> <strong>src/state/queries/klipy.ts</strong> — add <code>useKlipyAutocompleteQuery</code> hook</div>
|
||||
<div><span style="color:#5cdb5c">+</span> <strong>src/features/gifPicker/hooks/useGifAutocomplete.ts</strong> — orchestration hook (throttle + query + keyboard state)</div>
|
||||
<div><span style="color:#5cdb5c">+</span> <strong>src/features/gifPicker/components/GifAutocompleteSuggestions.tsx</strong> — inline suggestion list UI</div>
|
||||
<div><span style="color:#ffcc00">~</span> <strong>src/features/gifPicker/components/GifPickerHeader.tsx</strong> — render suggestions below input</div>
|
||||
<div><span style="color:#ffcc00">~</span> <strong>src/features/gifPicker/GifPickerDialog.tsx</strong> — wire up autocomplete state</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Interaction Flow</h3>
|
||||
<div style="display:flex;gap:16px;flex-wrap:wrap">
|
||||
<!-- State 1: Idle -->
|
||||
<div style="flex:1;min-width:220px">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">1. Idle — no suggestions</div>
|
||||
<div class="mockup-body" style="padding:12px;font-family:system-ui;background:#1a1a2e;color:#e0e0e0;font-size:13px">
|
||||
<div style="background:#2a2a4a;border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px;margin-bottom:12px">
|
||||
<span style="opacity:0.4">🔍</span>
|
||||
<span style="opacity:0.4">Search GIFs</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px">
|
||||
<div style="flex:1;background:#333;border-radius:6px;height:50px;opacity:0.4"></div>
|
||||
<div style="flex:1;background:#333;border-radius:6px;height:40px;opacity:0.4"></div>
|
||||
</div>
|
||||
<div style="text-align:center;margin-top:8px;font-size:11px;opacity:0.5">Featured GIFs</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- State 2: Typing, suggestions visible -->
|
||||
<div style="flex:1;min-width:220px">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">2. Typing — suggestions appear</div>
|
||||
<div class="mockup-body" style="padding:12px;font-family:system-ui;background:#1a1a2e;color:#e0e0e0;font-size:13px">
|
||||
<div style="background:#2a2a4a;border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px;margin-bottom:8px">
|
||||
<span style="opacity:0.4">🔍</span>
|
||||
<span>hap<span style="opacity:0.3">|</span></span>
|
||||
</div>
|
||||
<div style="background:#22223a;border-radius:6px;margin-bottom:8px;overflow:hidden;border:1px solid #333">
|
||||
<div style="padding:7px 10px;background:#2a2a5a;display:flex;align-items:center;gap:6px;font-size:12px">
|
||||
<span style="opacity:0.3">🔍</span> happy birthday
|
||||
</div>
|
||||
<div style="padding:7px 10px;display:flex;align-items:center;gap:6px;font-size:12px;border-top:1px solid #2a2a3a">
|
||||
<span style="opacity:0.3">🔍</span> happy
|
||||
</div>
|
||||
<div style="padding:7px 10px;display:flex;align-items:center;gap:6px;font-size:12px;border-top:1px solid #2a2a3a">
|
||||
<span style="opacity:0.3">🔍</span> happy easter
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px;opacity:0.3">
|
||||
<div style="flex:1;background:#333;border-radius:6px;height:30px"></div>
|
||||
<div style="flex:1;background:#333;border-radius:6px;height:30px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- State 3: Selected, search fires -->
|
||||
<div style="flex:1;min-width:220px">
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">3. Selected — GIFs load</div>
|
||||
<div class="mockup-body" style="padding:12px;font-family:system-ui;background:#1a1a2e;color:#e0e0e0;font-size:13px">
|
||||
<div style="background:#2a2a4a;border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px;margin-bottom:12px">
|
||||
<span style="opacity:0.4">🔍</span>
|
||||
<span>happy birthday</span>
|
||||
<span style="margin-left:auto;opacity:0.4;font-size:11px">✕</span>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px">
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:6px">
|
||||
<div style="background:#444;border-radius:6px;height:50px"></div>
|
||||
<div style="background:#444;border-radius:6px;height:40px"></div>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:6px">
|
||||
<div style="background:#444;border-radius:6px;height:40px"></div>
|
||||
<div style="background:#444;border-radius:6px;height:50px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align:center;margin-top:8px;font-size:11px;opacity:0.5">Results for "happy birthday"</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Keyboard Navigation (Web)</h3>
|
||||
<div style="font-family:monospace;font-size:13px;line-height:2;padding:0 8px">
|
||||
<div><strong>ArrowDown / ArrowUp</strong> — move active highlight through suggestions</div>
|
||||
<div><strong>Enter</strong> — select highlighted suggestion (fills input, fires search)</div>
|
||||
<div><strong>Escape</strong> — dismiss suggestions (existing behavior closes dialog)</div>
|
||||
<div><strong>Continue typing</strong> — resets active index to 0, re-fetches suggestions</div>
|
||||
</div>
|
||||
<p style="margin-top:8px;font-size:13px;opacity:0.7">
|
||||
ARIA: input gets <code>role="combobox"</code> + <code>aria-controls</code>, list gets <code>role="listbox"</code>,
|
||||
items get <code>role="option"</code> + <code>aria-selected</code>. ~30 lines of <code>onKeyDown</code> handling on web only.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Visibility Rules</h3>
|
||||
<div style="font-family:monospace;font-size:13px;line-height:2;padding:0 8px">
|
||||
<div><span style="color:#5cdb5c">SHOW</span> when: rawSearch.length ≥ 1 AND suggestions.length > 0 AND user hasn't just selected a suggestion</div>
|
||||
<div><span style="color:#ff7c7c">HIDE</span> when: rawSearch is empty OR user selected a suggestion OR user clears input</div>
|
||||
<div><span style="color:#ffcc00">RE-SHOW</span> when: user edits the input after a selection (e.g., backspace to modify)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Scope Boundaries</h3>
|
||||
<div class="pros-cons">
|
||||
<div class="pros">
|
||||
<h4>In Scope</h4>
|
||||
<ul>
|
||||
<li>Klipy autocomplete endpoint integration</li>
|
||||
<li>Inline suggestion list in GifPickerHeader</li>
|
||||
<li>200ms throttle for autocomplete, independent of 500ms search throttle</li>
|
||||
<li>Keyboard navigation on web (arrow keys, enter, escape)</li>
|
||||
<li>ARIA accessibility attributes</li>
|
||||
<li>Tap-to-select on native</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cons">
|
||||
<h4>Out of Scope</h4>
|
||||
<ul>
|
||||
<li>Tenor autocomplete (Klipy only)</li>
|
||||
<li>Trending/popular suggestions on empty input</li>
|
||||
<li>Search history / recents</li>
|
||||
<li>Categories or tag browsing</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,149 +0,0 @@
|
||||
<h2>Where should autocomplete suggestions appear?</h2>
|
||||
<p class="subtitle">As you type in the GIF search box, where do completion suggestions show up?</p>
|
||||
|
||||
<div class="options">
|
||||
<div class="option" data-choice="a" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>Inline list below the search input</h3>
|
||||
<p>Suggestions render as a vertical list between the search bar and the GIF grid. Tapping a suggestion fills the search field and triggers a GIF search. Simple, no z-index or portal concerns inside the dialog.</p>
|
||||
<div class="mockup" style="margin-top:12px">
|
||||
<div class="mockup-header">GIF Dialog — Inline Suggestions</div>
|
||||
<div class="mockup-body" style="padding:16px;font-family:system-ui;background:#1a1a2e;color:#e0e0e0">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
|
||||
<div style="background:#2a2a4a;border-radius:8px;padding:8px 12px;flex:1;display:flex;align-items:center;gap:8px">
|
||||
<span style="opacity:0.5">🔍</span>
|
||||
<span>hap<span style="opacity:0.4;border-right:2px solid #7c7cff">|</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:#22223a;border-radius:8px;margin-bottom:12px;overflow:hidden">
|
||||
<div style="padding:10px 14px;border-bottom:1px solid #333;display:flex;align-items:center;gap:8px;cursor:pointer">
|
||||
<span style="opacity:0.4">🔍</span> <span>happy birthday</span>
|
||||
</div>
|
||||
<div style="padding:10px 14px;border-bottom:1px solid #333;display:flex;align-items:center;gap:8px;cursor:pointer">
|
||||
<span style="opacity:0.4">🔍</span> <span>happy</span>
|
||||
</div>
|
||||
<div style="padding:10px 14px;border-bottom:1px solid #333;display:flex;align-items:center;gap:8px;cursor:pointer">
|
||||
<span style="opacity:0.4">🔍</span> <span>happy easter</span>
|
||||
</div>
|
||||
<div style="padding:10px 14px;display:flex;align-items:center;gap:8px;cursor:pointer">
|
||||
<span style="opacity:0.4">🔍</span> <span>happy dance</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:8px">
|
||||
<div style="background:#333;border-radius:8px;height:80px;opacity:0.3"></div>
|
||||
<div style="background:#333;border-radius:8px;height:60px;opacity:0.3"></div>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:8px">
|
||||
<div style="background:#333;border-radius:8px;height:60px;opacity:0.3"></div>
|
||||
<div style="background:#333;border-radius:8px;height:80px;opacity:0.3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="b" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>Horizontal chips below the search input</h3>
|
||||
<p>Suggestions render as a scrollable row of pill/chip buttons. Compact, leaves more vertical space for the GIF grid. Common in mobile search UIs (YouTube, Google Images).</p>
|
||||
<div class="mockup" style="margin-top:12px">
|
||||
<div class="mockup-header">GIF Dialog — Chip Suggestions</div>
|
||||
<div class="mockup-body" style="padding:16px;font-family:system-ui;background:#1a1a2e;color:#e0e0e0">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
|
||||
<div style="background:#2a2a4a;border-radius:8px;padding:8px 12px;flex:1;display:flex;align-items:center;gap:8px">
|
||||
<span style="opacity:0.5">🔍</span>
|
||||
<span>hap<span style="opacity:0.4;border-right:2px solid #7c7cff">|</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;margin-bottom:12px;overflow-x:auto;padding-bottom:4px">
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">happy birthday</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">happy</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">happy easter</div>
|
||||
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">happy dance</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:8px">
|
||||
<div style="background:#333;border-radius:8px;height:90px;opacity:0.3"></div>
|
||||
<div style="background:#333;border-radius:8px;height:70px;opacity:0.3"></div>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:8px">
|
||||
<div style="background:#333;border-radius:8px;height:70px;opacity:0.3"></div>
|
||||
<div style="background:#333;border-radius:8px;height:90px;opacity:0.3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="c" onclick="toggleSelect(this)">
|
||||
<div class="letter">C</div>
|
||||
<div class="content">
|
||||
<h3>Sift popover dropdown (like Composer autocomplete)</h3>
|
||||
<p>Uses the <code>@bsky.app/sift</code> library to show a positioned popover below the input, matching how @mentions work in the Composer. Keyboard navigable on web. Needs Portal/z-index verification inside the dialog.</p>
|
||||
<div class="mockup" style="margin-top:12px">
|
||||
<div class="mockup-header">GIF Dialog — Sift Popover</div>
|
||||
<div class="mockup-body" style="padding:16px;font-family:system-ui;background:#1a1a2e;color:#e0e0e0">
|
||||
<div style="position:relative">
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-bottom:4px">
|
||||
<div style="background:#2a2a4a;border-radius:8px;padding:8px 12px;flex:1;display:flex;align-items:center;gap:8px">
|
||||
<span style="opacity:0.5">🔍</span>
|
||||
<span>hap<span style="opacity:0.4;border-right:2px solid #7c7cff">|</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:absolute;top:40px;left:0;right:0;background:#22223a;border:1px solid #444;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.4);z-index:10;overflow:hidden">
|
||||
<div style="padding:8px 12px;background:#3a3a5a;display:flex;align-items:center;gap:8px">
|
||||
<span style="opacity:0.4">🔍</span> <span>happy birthday</span>
|
||||
</div>
|
||||
<div style="padding:8px 12px;display:flex;align-items:center;gap:8px">
|
||||
<span style="opacity:0.4">🔍</span> <span>happy</span>
|
||||
</div>
|
||||
<div style="padding:8px 12px;display:flex;align-items:center;gap:8px">
|
||||
<span style="opacity:0.4">🔍</span> <span>happy easter</span>
|
||||
</div>
|
||||
<div style="padding:8px 12px;display:flex;align-items:center;gap:8px">
|
||||
<span style="opacity:0.4">🔍</span> <span>happy dance</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;margin-top:12px;filter:blur(1px);opacity:0.5">
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:8px">
|
||||
<div style="background:#333;border-radius:8px;height:90px"></div>
|
||||
<div style="background:#333;border-radius:8px;height:70px"></div>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:8px">
|
||||
<div style="background:#333;border-radius:8px;height:70px"></div>
|
||||
<div style="background:#333;border-radius:8px;height:90px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section" style="margin-top:24px">
|
||||
<h3>My recommendation: Option A (inline list)</h3>
|
||||
<div class="pros-cons">
|
||||
<div class="pros">
|
||||
<h4>Why A</h4>
|
||||
<ul>
|
||||
<li>No Portal/z-index issues inside the bottom sheet (native) or modal (web)</li>
|
||||
<li>Naturally fits the reserved slot in GifPickerHeader ("future: tabs render here")</li>
|
||||
<li>Clear visual hierarchy — suggestions push the grid down, making them prominent</li>
|
||||
<li>Simple to implement — just a conditional list render</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cons">
|
||||
<h4>Tradeoffs</h4>
|
||||
<ul>
|
||||
<li>Takes more vertical space than chips (B) when visible</li>
|
||||
<li>Doesn't reuse Sift (C), but that's OK — Sift solves cursor-anchored popovers which we don't need here</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,3 +0,0 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
@@ -1 +0,0 @@
|
||||
{"reason":"idle timeout","timestamp":1776191006962}
|
||||
@@ -1,5 +0,0 @@
|
||||
{"type":"server-started","port":49342,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:49342","screen_dir":"/Users/pope/dev/bsky/social-app/.superpowers/brainstorm/86663-1776187526/content","state_dir":"/Users/pope/dev/bsky/social-app/.superpowers/brainstorm/86663-1776187526/state"}
|
||||
{"type":"screen-added","file":"/Users/pope/dev/bsky/social-app/.superpowers/brainstorm/86663-1776187526/content/suggestion-placement.html"}
|
||||
{"type":"screen-added","file":"/Users/pope/dev/bsky/social-app/.superpowers/brainstorm/86663-1776187526/content/waiting.html"}
|
||||
{"type":"screen-added","file":"/Users/pope/dev/bsky/social-app/.superpowers/brainstorm/86663-1776187526/content/design-overview.html"}
|
||||
{"type":"server-stopped","reason":"idle timeout"}
|
||||
@@ -1 +0,0 @@
|
||||
86672
|
||||
Reference in New Issue
Block a user