From 8b4963e1c27d1bf1ed2022839650741fd2593997 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Tue, 16 Jun 2026 17:29:48 +0200
Subject: [PATCH] fix: scope browse param sync to browse form and sync genres

---
 static/htmx.ts | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/static/htmx.ts b/static/htmx.ts
index 4fe7b18..1a2bce4 100644
--- a/static/htmx.ts
+++ b/static/htmx.ts
@@ -46,21 +46,38 @@ const getTriggerFromHtmxEvent = (event: Event): Element | null => {
   return detail.detail?.elt ?? null;
 };
 
-const syncSFWRequestParameter = (event: Event): void => {
+const isBrowseForm = (form: HTMLFormElement): boolean =>
+  form.getAttribute("action") === "/browse" || form.getAttribute("hx-get") === "/browse";
+
+const selectedGenreValues = (): string[] =>
+  Array.from(document.querySelectorAll<HTMLInputElement>("[data-genre-visual]:checked"))
+    .map((input) => input.value)
+    .filter((value) => value !== "");
+
+const syncBrowseRequestParameters = (event: Event): void => {
   const detail = (event as CustomEvent<HtmxConfigRequestDetail>).detail;
   if (!detail.parameters) return;
 
   const form = detail.elt instanceof HTMLFormElement ? detail.elt : detail.elt?.closest("form");
   if (!(form instanceof HTMLFormElement)) return;
+  if (!isBrowseForm(form)) return;
 
-  const checkbox = form.querySelector<HTMLInputElement>("[data-sfw-checkbox]");
-  if (!checkbox) return;
+  const checkbox = document.querySelector<HTMLInputElement>("[data-sfw-checkbox]");
+  if (checkbox) {
+    detail.parameters.sfw = String(checkbox.checked);
+  }
 
-  detail.parameters.sfw = String(checkbox.checked);
+  const genres = selectedGenreValues();
+  if (genres.length > 0) {
+    detail.parameters.genres = genres;
+    return;
+  }
+
+  delete detail.parameters.genres;
 };
 
 onReady(() => {
-  document.addEventListener("htmx:configRequest", syncSFWRequestParameter);
+  document.addEventListener("htmx:configRequest", syncBrowseRequestParameters);
 
   document.addEventListener("htmx:beforeRequest", (event) => {
     setBusy(getTriggerFromHtmxEvent(event), true);