From 9d46475d4ef94abebf844d2442085a50a57e5e34 Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Mon, 8 Jun 2026 15:14:20 -0700
Subject: Replace sticky search bar with icon-toggle toolbar on mobile

On mobile, the sticky feed toolbar consumed most of the viewport.
Replaced it with a compact icon bar (search + sort) that expands
into mutually exclusive panels. Sort options render as radio-style
buttons generated dynamically from the existing select, which
remains for desktop unchanged.
---
 templates/index.html | 51 +++++++++++++++++++++++++++++++++------------------
 1 file changed, 33 insertions(+), 18 deletions(-)

(limited to 'templates/index.html')

diff --git a/templates/index.html b/templates/index.html
index 5820cf4..5cda8e7 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -25,24 +25,39 @@
   </section>
 
   <section class="feed-toolbar">
-    <div class="search-row">
-      <input
-        type="search"
-        id="film-search"
-        placeholder="Search by title or director…"
-        autocomplete="off"
-      >
-      <select id="film-sort">
-        <option value="">Default order</option>
-        <option value="date_watched_desc">Date watched — newest</option>
-        <option value="date_watched_asc">Date watched — oldest</option>
-        <option value="title_asc">Title — A → Z</option>
-        <option value="title_desc">Title — Z → A</option>
-        <option value="year_desc">Year — newest</option>
-        <option value="year_asc">Year — oldest</option>
-        <option value="stars_desc">Stars — highest</option>
-        <option value="stars_asc">Stars — lowest</option>
-      </select>
+    <div class="toolbar-toggles">
+      <button class="toolbar-toggle" data-panel="search" type="button" aria-label="Search">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+      </button>
+      <button class="toolbar-toggle" data-panel="sort" type="button" aria-label="Sort">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="16" y2="6"/><line x1="4" y1="12" x2="12" y2="12"/><line x1="4" y1="18" x2="8" y2="18"/><polyline points="15 15 18 18 21 15"/><line x1="18" y1="9" x2="18" y2="18"/></svg>
+      </button>
+    </div>
+    <div class="toolbar-panel toolbar-panel-search">
+      <div class="search-row">
+        <input
+          type="search"
+          id="film-search"
+          placeholder="Search by title or director…"
+          autocomplete="off"
+        >
+      </div>
+    </div>
+    <div class="toolbar-panel toolbar-panel-sort">
+      <div class="sort-options" id="sort-options"></div>
+      <div class="search-row">
+        <select id="film-sort">
+          <option value="">Default order</option>
+          <option value="date_watched_desc">Date watched — newest</option>
+          <option value="date_watched_asc">Date watched — oldest</option>
+          <option value="title_asc">Title — A → Z</option>
+          <option value="title_desc">Title — Z → A</option>
+          <option value="year_desc">Year — newest</option>
+          <option value="year_asc">Year — oldest</option>
+          <option value="stars_desc">Stars — highest</option>
+          <option value="stars_asc">Stars — lowest</option>
+        </select>
+      </div>
     </div>
   </section>
 
-- 
cgit v1.3-2-g0d8e