diff --git a/app/static/app.js b/app/static/app.js index 4d4c948..34d3000 100644 --- a/app/static/app.js +++ b/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(); diff --git a/app/static/styles.css b/app/static/styles.css index 1dff0cc..63f6f22 100644 --- a/app/static/styles.css +++ b/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; diff --git a/app/templates/index.html b/app/templates/index.html index b648914..fc9c48d 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -19,10 +19,15 @@
-
- - - +
+
+ + + +
+
diff --git a/data/session_state.sqlite3 b/data/session_state.sqlite3 index 326eeb4..b635bc1 100644 Binary files a/data/session_state.sqlite3 and b/data/session_state.sqlite3 differ