From 177516751523e42e1468e149fe0121639bf17349 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Thu, 5 Nov 2026 00:53:16 +0100
Subject: [PATCH] fix(ui): simplify filters and space controls

---
 web/index.html    |  9 +++++----
 web/src/main.ts   |  5 -----
 web/src/style.css | 25 +++++--------------------
 3 files changed, 10 insertions(+), 29 deletions(-)

diff --git a/web/index.html b/web/index.html
index a509b4d..e4280f5 100644
--- a/web/index.html
+++ b/web/index.html
@@ -60,11 +60,12 @@
       <button id="account-btn" type="button" class="avatar-btn" title="account" aria-label="account" aria-controls="account"></button>
     </div>
   </header>
-  <div id="discovery-options" hidden>
-    <label><span class="sr-only">chart</span><select id="chart-kind"><option value="sales">best sellers</option><option value="free">top free downloads</option></select></label>
-    <label><span class="sr-only">period</span><select id="chart-period"><option value="week">this week</option><option value="year">this year</option><option value="all-time">all time</option></select></label>
+  <div id="discovery-controls">
+    <div id="discovery-options" hidden>
+      <label><span class="sr-only">chart</span><select id="chart-kind"><option value="sales">best sellers</option><option value="free">top free downloads</option></select></label>
+      <label><span class="sr-only">period</span><select id="chart-period"><option value="week">this week</option><option value="year">this year</option><option value="all-time">all time</option></select></label>
+    </div>
   </div>
-  <button type="button" id="active-filters" hidden></button>
 
   <div id="login" hidden>
     <div class="login-box">
diff --git a/web/src/main.ts b/web/src/main.ts
index e8cd898..b83e67e 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -792,7 +792,6 @@ $("history-clear").addEventListener("click", () => {
 const bpmMin = filtersForm.elements.namedItem("bpm_min") as HTMLInputElement;
 const bpmMax = filtersForm.elements.namedItem("bpm_max") as HTMLInputElement;
 const bpmOut = $("bpm-out");
-const activeFilters = $<HTMLButtonElement>("active-filters");
 
 function matchesFilters(t: Track): boolean {
   if (filters.free === "1" && t.price !== 0) return false;
@@ -831,9 +830,6 @@ function showFilters(): void {
   presetTempo = filters.bpm_equiv === "1";
   showBpm();
   filtersBtn.classList.toggle("active", Object.keys(filters).length > 0);
-  const labels = [filters.free === "1" ? "free only" : "", filters.bpm_min || filters.bpm_max ? `${filters.bpm_min || "any"}–${filters.bpm_max || "any"} bpm${filters.bpm_equiv ? " ± half/double" : ""}` : ""].filter(Boolean);
-  activeFilters.hidden = !labels.length;
-  activeFilters.textContent = `${labels.join(" · ")}  × clear`;
 }
 
 function applyFilters(): void {
@@ -870,7 +866,6 @@ for (const b of filtersForm.querySelectorAll<HTMLButtonElement>("[data-bpm]")) {
   });
 }
 
-activeFilters.addEventListener("click", () => { filters = {}; localStorage.setItem(FILTERS_KEY, "{}"); showFilters(); refill(); });
 
 function showSetting(name: string, value: string): void {
   for (const input of filtersForm.querySelectorAll<HTMLInputElement>(`input[name=${name}]`)) input.checked = input.value === value;
diff --git a/web/src/style.css b/web/src/style.css
index 8fc99f4..fefc4c0 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -82,14 +82,12 @@ body.zen #bar { display: none; }
 .logo b { color: var(--accent); font-weight: 700; }
 .logo svg { width: 1.3em; height: 1.3em; color: var(--accent); flex: none; }
 .bar-end { justify-self: end; display: flex; align-items: center; gap: 0.4rem; }
-#discovery-options, #active-filters { position: fixed; z-index: 11; left: 50%; transform: translateX(-50%); }
+#discovery-controls { position: fixed; z-index: 11; top: 4.8rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 0.5rem; max-width: calc(100vw - 2rem); }
 #discovery-options { top: 4.2rem; display: flex; gap: 0.5rem; align-items: center; }
 #discovery-options label { display: flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.75rem; }
 #discovery-options select { color: var(--fg); background: #18181b; border: 1px solid #ffffff40; border-radius: 8px; padding: 0.45rem; font: inherit; }
 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
-#active-filters { top: 7.3rem; padding: 0.35rem 0.7rem; background: #19191de8; border-radius: 8px; font-size: 0.75rem; white-space: nowrap; }
-body:has(#discovery-options[hidden]) #active-filters { top: 4.3rem; }
-body.zen :is(#discovery-options, #active-filters) { display: none; }
+body.zen #discovery-controls { display: none; }
 
 /* Feed modes as segmented tabs, the middle of the bar. */
 #mode-tabs {
@@ -1196,8 +1194,6 @@ button.primary:disabled { opacity: 0.35; cursor: default; }
   #volume { display: none; }
   .logo-pl8 { display: none; }
   #discovery-options { top: calc(max(0.6rem, env(safe-area-inset-top)) + 5.8rem); }
-  #active-filters { top: calc(max(0.6rem, env(safe-area-inset-top)) + 8.5rem); }
-  body:has(#discovery-options[hidden]) #active-filters { top: calc(max(0.6rem, env(safe-area-inset-top)) + 5.8rem); }
   #station { place-items: end stretch; padding: 0; }
   .station-box { width: 100%; border-radius: var(--radius-l) var(--radius-l) 0 0; padding-bottom: max(1.4rem, env(safe-area-inset-bottom)); }
   .sheet {
@@ -1352,29 +1348,18 @@ body.zen .content { gap: 0.3rem; }
 #discovery-options select { -webkit-appearance: none; appearance: none; min-height: 2rem; padding: 0.4rem 2rem 0.4rem 0.8rem; border: 0; border-radius: 999px; background: transparent; font-size: 0.8rem; cursor: pointer; }
 #discovery-options select:hover { background: #ffffff12; }
 #discovery-options select option { color: #fff; background: #18181b; }
-#active-filters { top: 7.8rem; }
-/* Keep chart options centered while active filters sit alongside them. */
-@media (min-width: 641px) {
-  body:has(#discovery-options:not([hidden])) #active-filters {
-    top: 4.8rem; left: calc(50% + 7rem); transform: none;
-    max-width: calc(50vw - 8rem); min-height: 2.4rem;
-    overflow: hidden; text-overflow: ellipsis;
-  }
-}
-#active-filters { max-width: calc(100vw - 2rem); overflow: hidden; text-overflow: ellipsis; border: 1px solid #ffffff24; border-radius: 999px; color: var(--fg); }
-#active-filters:hover { background: #303034; border-color: #ffffff50; }
 .time { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.75rem 0.5rem; }
 .time .cur { grid-column: 1; grid-row: 1; justify-self: start; }
 .time .counts { grid-column: 2; grid-row: 1; text-align: center; overflow-wrap: anywhere; }
 .time .dur { grid-column: 3; grid-row: 1; justify-self: end; }
 @media (max-width: 640px) {
+  #discovery-controls { top: calc(max(0.6rem, env(safe-area-inset-top)) + 6.4rem); width: max-content; flex-wrap: wrap; }
   .bar-end { gap: 0.45rem; }
   .bar-end .icon-btn, .avatar-btn { width: 2.75rem; height: 2.75rem; }
   .art { width: min(14rem, 29dvh, 58vw); }
   .card.liquid .art { margin-bottom: 1.5rem; }
   .content { margin-top: 2.5rem; }
   #discovery-options { top: calc(max(0.6rem, env(safe-area-inset-top)) + 6.4rem); gap: 0; }
-  #active-filters { top: calc(max(0.6rem, env(safe-area-inset-top)) + 9.2rem); }
 }
 @media (max-width: 640px) and (max-height: 700px) {
   .art { width: min(9rem, 21dvh, 48vw); }
@@ -1401,7 +1386,7 @@ button.danger:not(.link) { background: var(--danger); color: #111; }
 .content .actions {
   position: relative; inset: auto; translate: none; transform: none;
   width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
-  align-items: center; gap: 0.5rem; margin-top: 0.65rem; padding: 0.75rem 0 0;
+  align-items: center; gap: 0.5rem; margin-top: 1.25rem; padding: 0.75rem 0 0;
   border: none; border-radius: 0;
   background: none;
 }
@@ -1431,7 +1416,7 @@ body.zen .content .actions { display: none; }
 @media (max-width: 640px) {
   #discovery-options select { min-height: 2.75rem; font-size: 1rem; }
   .content { margin-bottom: 4.5rem; }
-  .content .actions { padding: 0.5rem 0 0; gap: 0.25rem; margin-top: 0.25rem; }
+  .content .actions { padding: 0.5rem 0 0; gap: 0.25rem; margin-top: 0.8rem; }
   .content .act { gap: 0.25rem; font-size: 0.75rem; }
   #up-next { bottom: max(0.8rem, env(safe-area-inset-bottom)); }
   #toast { bottom: calc(max(0.8rem, env(safe-area-inset-bottom)) + 4.6rem); }