Fix mobile-only filter toggle specificity on desktop and add Reset Filters button

This commit is contained in:
airent106 committed 2026-10-29 12:16:30 -06:00
1 parent ff0fe0990e
commit ffe8fab1da
3 files changed
+44 -3

No files matched your search

+39 -1
View File
@@ -1923,9 +1923,43 @@ function bindGlobalEvents() {
}); });
// Global Filters // Global Filters
function syncFilterControlsUI() {
const hasActiveFilter =
Boolean(state.filters.search.trim()) ||
state.filters.category !== "all" ||
state.filters.tag !== "all" ||
Boolean(state.filters.hasMockup);
document.getElementById("btn-clear-filters")?.classList.toggle("hidden", !hasActiveFilter);
const mobileBtn = document.getElementById("btn-mobile-filter-toggle");
if (mobileBtn) {
mobileBtn.textContent = hasActiveFilter ? "🔍 Filters • Active" : "🔍 Filters";
}
}
document.getElementById("btn-mobile-filter-toggle")?.addEventListener("click", () => { document.getElementById("btn-mobile-filter-toggle")?.addEventListener("click", () => {
const bar = document.getElementById("global-filter-bar"); const bar = document.getElementById("global-filter-bar");
bar?.classList.toggle("mobile-filters-open"); const isOpen = bar?.classList.toggle("mobile-filters-open");
document.getElementById("btn-mobile-filter-toggle")?.classList.toggle("btn-primary", Boolean(isOpen));
if (isOpen) {
document.getElementById("filter-search")?.focus();
}
});
document.getElementById("btn-clear-filters")?.addEventListener("click", () => {
state.filters.search = "";
state.filters.category = "all";
state.filters.tag = "all";
state.filters.hasMockup = false;
const searchEl = document.getElementById("filter-search");
const catEl = document.getElementById("filter-category");
const tagEl = document.getElementById("filter-tag");
const mkEl = document.getElementById("filter-has-mockup");
if (searchEl) searchEl.value = "";
if (catEl) catEl.value = "all";
if (tagEl) tagEl.value = "all";
if (mkEl) mkEl.checked = false;
syncFilterControlsUI();
loadIdeas();
}); });
document.querySelectorAll("#mobile-stage-switcher .stage-tab").forEach((tab) => { document.querySelectorAll("#mobile-stage-switcher .stage-tab").forEach((tab) => {
@@ -1940,18 +1974,22 @@ function bindGlobalEvents() {
document.getElementById("filter-search")?.addEventListener("input", (e) => { document.getElementById("filter-search")?.addEventListener("input", (e) => {
state.filters.search = e.target.value; state.filters.search = e.target.value;
syncFilterControlsUI();
loadIdeas(); loadIdeas();
}); });
document.getElementById("filter-category")?.addEventListener("change", (e) => { document.getElementById("filter-category")?.addEventListener("change", (e) => {
state.filters.category = e.target.value; state.filters.category = e.target.value;
syncFilterControlsUI();
loadIdeas(); loadIdeas();
}); });
document.getElementById("filter-tag")?.addEventListener("change", (e) => { document.getElementById("filter-tag")?.addEventListener("change", (e) => {
state.filters.tag = e.target.value; state.filters.tag = e.target.value;
syncFilterControlsUI();
loadIdeas(); loadIdeas();
}); });
document.getElementById("filter-has-mockup")?.addEventListener("change", (e) => { document.getElementById("filter-has-mockup")?.addEventListener("change", (e) => {
state.filters.hasMockup = e.target.checked; state.filters.hasMockup = e.target.checked;
syncFilterControlsUI();
loadIdeas(); loadIdeas();
}); });
document.getElementById("filter-sort")?.addEventListener("change", (e) => { document.getElementById("filter-sort")?.addEventListener("change", (e) => {
+3
View File
@@ -141,6 +141,9 @@
<option value="updated">Sort: Recently Updated</option> <option value="updated">Sort: Recently Updated</option>
<option value="newest">Sort: Newest First</option> <option value="newest">Sort: Newest First</option>
</select> </select>
<button type="button" id="btn-clear-filters" class="btn btn-ghost btn-sm hidden" title="Clear active filters">
✕ Reset
</button>
</div> </div>
</nav> </nav>
+2 -2
View File
@@ -238,7 +238,7 @@ body {
} }
.mobile-only { .mobile-only {
display: none; display: none !important;
} }
.view-tabs { .view-tabs {
@@ -1438,7 +1438,7 @@ body {
========================================================= */ ========================================================= */
@media (max-width: 820px) { @media (max-width: 820px) {
.mobile-only { .mobile-only {
display: inline-flex; display: inline-flex !important;
} }
/* 1. Topbar & Quick Capture on Mobile */ /* 1. Topbar & Quick Capture on Mobile */