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();

app/static/styles.css

@@ -120,6 +120,27 @@ body {
   padding-right: 8px;
 }
 
+.search-combobox {
+  position: relative;
+}
+
+.combobox-dropdown {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% - 6px);
+  z-index: 20;
+  background: #ffffff;
+  border: 1px solid #d7dee9;
+  border-radius: 6px;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
+  padding: 6px;
+}
+
+#rememberedDropdownList {
+  max-height: 220px;
+}
+
 .stack {
   display: flex;
   flex-direction: column;

app/templates/index.html

@@ -19,11 +19,16 @@
           <div class="panel-head-actions panel-head-actions-empty" aria-hidden="true"></div>
         </div>
         <div class="panel-body">
+          <div class="search-combobox" id="searchCombobox">
             <div class="row search-combobox-row">
               <input id="searchInput" type="text" placeholder="Search series..." />
               <button id="searchDropdownBtn" class="secondary" aria-label="Show remembered series">▼</button>
               <button id="searchBtn">Search</button>
             </div>
+            <div id="searchComboboxDropdown" class="combobox-dropdown hidden">
+              <ul id="rememberedDropdownList" class="list"></ul>
+            </div>
+          </div>
           <div id="seriesInfo" class="muted"></div>
           <ul id="searchResults" class="list"></ul>
           <div id="seriesDetails" class="series-details hidden">