Replace sticky search bar with icon-toggle toolbar on mobileHEADmaster

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.

1 files changed, 55 insertions, 0 deletions

diff --git a/static/app.js b/static/app.js
index 7a60c52..b38c586 100644
--- a/static/app.js
+++ b/static/app.js
@@ -497,6 +497,61 @@ document.querySelectorAll(".star-control[data-form-stars]").forEach((control) =>
     sortSelect.addEventListener("change", () => {
       currentSort = sortSelect.value;
       resetFeed();
+      syncSortRadios(sortSelect.value);
     });
   }
+
+  const sortOptions = document.querySelector("#sort-options");
+  if (sortOptions && sortSelect) {
+    Array.from(sortSelect.options).forEach((opt) => {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "sort-option" + (opt.value === "" ? " is-active" : "");
+      btn.dataset.value = opt.value;
+      btn.textContent = opt.textContent;
+      btn.addEventListener("click", () => {
+        sortSelect.value = opt.value;
+        currentSort = opt.value;
+        resetFeed();
+        syncSortRadios(opt.value);
+        closePanels();
+      });
+      sortOptions.appendChild(btn);
+    });
+  }
+
+  function syncSortRadios(value) {
+    if (!sortOptions) return;
+    sortOptions.querySelectorAll(".sort-option").forEach((btn) => {
+      btn.classList.toggle("is-active", btn.dataset.value === value);
+    });
+  }
+
+  const toggles = document.querySelectorAll(".toolbar-toggle");
+  const panels = document.querySelectorAll(".toolbar-panel");
+
+  function closePanels() {
+    panels.forEach((p) => p.classList.remove("is-open"));
+    toggles.forEach((t) => t.classList.remove("is-active"));
+  }
+
+  toggles.forEach((toggle) => {
+    toggle.addEventListener("click", () => {
+      const panelName = toggle.dataset.panel;
+      const panel = document.querySelector(
+        `.toolbar-panel-${panelName}`
+      );
+      const isOpen = toggle.classList.contains("is-active");
+
+      closePanels();
+
+      if (!isOpen && panel) {
+        panel.classList.add("is-open");
+        toggle.classList.add("is-active");
+        if (panelName === "search" && searchInput) {
+          searchInput.focus();
+        }
+      }
+    });
+  });
 })();