feat (ui): series onthouden in pulldown menu

app/static/app.js

@@ -31,6 +31,9 @@
     outputBox: document.getElementById("outputBox"),
     searchInput: document.getElementById("searchInput"),
     searchDropdownBtn: document.getElementById("searchDropdownBtn"),
+    searchCombobox: document.getElementById("searchCombobox"),
+    searchComboboxDropdown: document.getElementById("searchComboboxDropdown"),
+    rememberedDropdownList: document.getElementById("rememberedDropdownList"),
     searchBtn: document.getElementById("searchBtn"),
     searchResults: document.getElementById("searchResults"),
     seriesInfo: document.getElementById("seriesInfo"),
@@ -330,26 +333,36 @@
     });
   }
 
+  function openRememberedDropdown() {
+    renderRememberedDropdown();
+    el.searchComboboxDropdown.classList.remove("hidden");
+  }
+
+  function closeRememberedDropdown() {
+    el.searchComboboxDropdown.classList.add("hidden");
+  }
+
+  function toggleRememberedDropdown() {
+    if (el.searchComboboxDropdown.classList.contains("hidden")) {
+      openRememberedDropdown();
+      return;
+    }
+    closeRememberedDropdown();
+  }
+
   function renderRememberedDropdown() {
     const query = (el.searchInput.value || "").trim();
     const items = rememberedForQuery(query);
-    el.searchResults.innerHTML = "";
+    el.rememberedDropdownList.innerHTML = "";
 
     items.forEach((item) => {
       const li = document.createElement("li");
       const left = document.createElement("span");
       const label = item.display_name || item.name || "(series)";
       left.textContent = label;
-
-      const right = document.createElement("div");
-      const tag = document.createElement("span");
-      tag.className = "badge";
-      tag.textContent = "Remembered";
-      right.appendChild(tag);
       li.appendChild(left);
-      li.appendChild(right);
       li.addEventListener("click", () => withHandler(() => selectSeries(item), li));
-      el.searchResults.appendChild(li);
+      el.rememberedDropdownList.appendChild(li);
     });
   }
 
@@ -366,6 +379,7 @@
   }
 
   async function selectSeries(item) {
+    closeRememberedDropdown();
     state.selectedSeries = item;
     state.selectedSeriesSummary = null;
     el.seriesInfo.textContent = `Selected: ${item.display_name || item.name}`;
@@ -470,12 +484,13 @@
     const query = (el.searchInput.value || "").trim();
     if (!query || query.length < 2) {
       state.liveSearchItems = [];
-      renderRememberedDropdown();
+      el.searchResults.innerHTML = "";
       return;
     }
     const data = await api(`/api/tvdb/search?q=${encodeURIComponent(query)}`);
     state.liveSearchItems = data.items || [];
     renderSearchResults(state.liveSearchItems);
+    closeRememberedDropdown();
     out("Search result", data);
   }
 
@@ -785,10 +800,17 @@
 
   function bindEvents() {
     el.searchBtn.addEventListener("click", () => withHandler(doSearch, el.searchBtn));
-    el.searchInput.addEventListener("focus", renderRememberedDropdown);
-    el.searchInput.addEventListener("click", renderRememberedDropdown);
-    el.searchInput.addEventListener("input", renderRememberedDropdown);
-    el.searchDropdownBtn.addEventListener("click", renderRememberedDropdown);
+    el.searchInput.addEventListener("focus", openRememberedDropdown);
+    el.searchInput.addEventListener("click", openRememberedDropdown);
+    el.searchInput.addEventListener("input", openRememberedDropdown);
+    el.searchDropdownBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      toggleRememberedDropdown();
+    });
+    el.searchCombobox.addEventListener("click", (e) => {
+      e.stopPropagation();
+    });
+    document.addEventListener("click", closeRememberedDropdown);
     el.settingsBtn.addEventListener("click", openSettingsModal);
     el.closeSettingsModalBtn.addEventListener("click", closeSettingsModal);
     el.saveSettingsBtn.addEventListener("click", () => withHandler(saveSettings, el.saveSettingsBtn));
@@ -853,6 +875,7 @@
     await loadSettings();
     await loadRememberedSeries();
     renderRememberedDropdown();
+    closeRememberedDropdown();
     await loadSelectedEpisodes();
     await loadSelectedFiles();
     await loadRoots();