acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity
Files
651ab90aa125369a31f0f79171dbe58ba7a7d407
bsky-social-app/.superpowers/brainstorm/71603-1776195983/content/category-layout.html
T
vineyardbovines 651ab90aa1 wip
2026-04-15 08:32:07 -04:00

107 lines
8.1 KiB
HTML
Raw Blame History

<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">&#128269;</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">&#128293; Trending</div>
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">&#x2764;&#xFE0F; Love</div>
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">&#128516; Happy</div>
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">&#128546; Sad</div>
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">&#127881; Party</div>
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">&#128077; Yes</div>
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">&#128557; 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">&#128269;</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">&#128293; 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">&#x2764;&#xFE0F; 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">&#128516; 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">&#128546; 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">&#127881; 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">&#128077; 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">&#128269;</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">&#128293; Trending</div>
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">&#x2764;&#xFE0F; Love</div>
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">&#128516; Happy</div>
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">&#128546; Sad</div>
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">&#127881; Party</div>
<div style="background:#2a2a4a;border:1px solid #444;border-radius:20px;padding:6px 14px;white-space:nowrap;font-size:13px;cursor:pointer">&#128077; 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>
Reference in New Issue View Git Blame Copy Permalink