diff --git a/web/src/bookshelf.ts b/web/src/bookshelf.ts index 30438d2..4439c5e 100644 --- a/web/src/bookshelf.ts +++ b/web/src/bookshelf.ts @@ -337,16 +337,14 @@ Alpine.data("bookshelf", () => ({ const currentLibraryId = ( document.getElementById("library-select") as HTMLSelectElement )?.value; - if (!currentLibraryId) { - console.error("No library selected"); - return; - } + + const libParam = currentLibraryId ? `&library_id=${currentLibraryId}` : ""; try { const response = await fetch( `/api/media-items/search?${field}=${encodeURIComponent( search, - )}&library_id=${currentLibraryId}&limit=50`, + )}${libParam}&limit=50`, { headers: { Authorization: `Bearer ${token}` }, }, diff --git a/web/src/collection-rules.ts b/web/src/collection-rules.ts index 3295bd4..d25291e 100644 --- a/web/src/collection-rules.ts +++ b/web/src/collection-rules.ts @@ -1,4 +1,5 @@ import { Alpine } from "./alpine"; +import { getSelectedLibrary } from "./storage"; import { showToast } from "./toast"; // ============================================================ @@ -37,7 +38,7 @@ function setupEventDelegation(): void { function backToCollection(): void { if (!collectionId) return; - const libraryId = localStorage.getItem("selectedLibrary"); + const libraryId = getSelectedLibrary(); const url = libraryId ? `/collections/${collectionId}?library_id=${libraryId}` : `/collections/${collectionId}`; diff --git a/web/src/collections.ts b/web/src/collections.ts index 168e5b8..2dbdaf0 100644 --- a/web/src/collections.ts +++ b/web/src/collections.ts @@ -547,23 +547,6 @@ function initCollectionsPage(): void { }); }, }); - } else { - initLibrarySwitcher({ - onSwitch: async (libraryId) => { - await switchWithTransition("collections-list", async () => { - const param = libraryId ? `?library_id=${libraryId}` : ""; - const response = await fetch(`/api/collections${param}`, { - headers: { - Authorization: `Bearer ${localStorage.getItem("token")}`, - "Content-Type": "application/json", - }, - }); - if (!response.ok) throw new Error("Failed to load collections"); - const data = await response.json(); - renderCollectionsGrid(data.collections || []); - }); - }, - }); } initializeCollectionWebSocket(); diff --git a/web/src/dashboard.ts b/web/src/dashboard.ts index 36e0e46..8744cf4 100644 --- a/web/src/dashboard.ts +++ b/web/src/dashboard.ts @@ -21,7 +21,7 @@ async function openDashboardSettings(): Promise { ) as HTMLSelectElement; const libraryId = librarySelect?.value; if (!libraryId) { - showToast("No library selected", "error"); + showToast("Select a specific library to customize preferences", "error"); return; } @@ -95,8 +95,9 @@ function closeDashboardSettings(): void { } async function fetchAndRenderSections(libraryId: string): Promise { + const param = libraryId ? `library_id=${libraryId}` : ""; const response = await fetch( - `/api/dashboard/sections?library_id=${libraryId}`, + `/api/dashboard/sections?${param}`, { headers: { Authorization: `Bearer ${localStorage.getItem("token")}`, @@ -107,7 +108,6 @@ async function fetchAndRenderSections(libraryId: string): Promise { if (!response.ok) throw new Error("Failed to load sections"); const data = await response.json(); renderDashboardCollections(data.sections); - localStorage.setItem("selectedLibrary", libraryId); } async function saveDashboardSettings(): Promise { @@ -150,7 +150,7 @@ async function saveDashboardSettings(): Promise { showToast("Dashboard settings saved", "success"); closeDashboardSettings(); if (!libraryId) { - showToast("Unable to refresh dashboard - no library selected", "error"); + showToast("Select a specific library to customize preferences", "error"); return; } await fetchAndRenderSections(libraryId); @@ -302,12 +302,7 @@ async function reloadPage(): Promise { const librarySelect = document.getElementById( "library-select", ) as HTMLSelectElement; - const libraryId = librarySelect?.value; - - if (!libraryId) { - showToast("No library selected", "error"); - return; - } + const libraryId = librarySelect?.value || ""; await switchWithTransition("collections-container", () => fetchAndRenderSections(libraryId), @@ -444,13 +439,13 @@ function initDashboard() { const librarySelect = document.getElementById( "library-select", ) as HTMLSelectElement; - const libraryId = librarySelect?.value; + const libraryId = librarySelect?.value || ""; console.log("[dashboard] libraryId:", libraryId); - if (!libraryId) return; try { + const param = libraryId ? `library_id=${libraryId}` : ""; const response = await fetch( - `/api/dashboard/sections?library_id=${libraryId}`, + `/api/dashboard/sections?${param}`, { headers: { Authorization: `Bearer ${localStorage.getItem("token")}`, diff --git a/web/src/library-switcher.ts b/web/src/library-switcher.ts index 84f9161..2969b28 100644 --- a/web/src/library-switcher.ts +++ b/web/src/library-switcher.ts @@ -1,10 +1,9 @@ import { Alpine } from "./alpine"; +import { ALL_LIBRARIES, getSelectedLibrary, setSelectedLibrary } from "./storage"; import { showToast } from "./toast"; -const STORAGE_KEY = "selectedLibrary"; - export function getCurrentLibraryId(): string { - return localStorage.getItem(STORAGE_KEY) || ""; + return getSelectedLibrary(); } export async function switchWithTransition( @@ -60,8 +59,10 @@ export function initLibrarySwitcher(options: LibrarySwitcherOptions): void { ) as HTMLSelectElement; if (!librarySelect) return; - const stored = localStorage.getItem(STORAGE_KEY); - if (stored) { + const stored = localStorage.getItem("selectedLibrary"); + if (stored === ALL_LIBRARIES) { + librarySelect.value = ""; + } else if (stored) { const option = librarySelect.querySelector( `option[value="${stored}"]`, ); @@ -72,10 +73,9 @@ export function initLibrarySwitcher(options: LibrarySwitcherOptions): void { librarySelect.addEventListener("change", async (e) => { const target = e.target as HTMLSelectElement; - if (!target.value && target.value !== "") return; - const libraryId = target.value; - localStorage.setItem(STORAGE_KEY, libraryId); + + setSelectedLibrary(libraryId); await options.onSwitch(libraryId); }); } diff --git a/web/src/search.ts b/web/src/search.ts index 028e91b..2118e11 100644 --- a/web/src/search.ts +++ b/web/src/search.ts @@ -1,4 +1,5 @@ import { Alpine } from "./alpine"; +import { setSelectedLibrary } from "./storage"; let searchInputTimeout: ReturnType | null = null; const SEARCH_DEBOUNCE_MS = 300; @@ -298,7 +299,7 @@ function searchEscapeHtml(text: string): string { } function selectLibraryAndBook(libraryId: string, bookId: string): void { - localStorage.setItem("selectedLibrary", libraryId); + setSelectedLibrary(libraryId); localStorage.setItem("selectedBook", bookId); hideSearchResults(); } diff --git a/web/src/series.ts b/web/src/series.ts index 616b466..56c2980 100644 --- a/web/src/series.ts +++ b/web/src/series.ts @@ -1,6 +1,6 @@ import { Alpine } from "./alpine"; import { showToast } from "./toast"; -import { setSelectedLibrary } from "./storage"; +import { initLibrarySwitcher, switchWithTransition } from "./library-switcher"; interface SeriesItem { name: string; @@ -10,8 +10,8 @@ interface SeriesItem { last_entry_at: string; } -function renderSeriesCard(series: SeriesItem, libraryId: string): string { - const href = `/series/detail?name=${encodeURIComponent(series.name)}&library_id=${libraryId}`; +function renderSeriesCard(series: SeriesItem): string { + const href = `/series/detail?name=${encodeURIComponent(series.name)}`; const coverCount = series.cover_paths.length; const coverClass = `cover-count-${coverCount}`; @@ -58,17 +58,18 @@ function renderSeriesContent( `; } - const cardsHtml = seriesList.map((s) => renderSeriesCard(s, libraryId)).join(""); + const cardsHtml = seriesList.map((s) => renderSeriesCard(s)).join(""); let paginationHtml = ""; if (totalPages > 1) { + const libParam = libraryId ? `library_id=${libraryId}&` : ""; const prevLink = currentPage > 1 - ? `← Previous` + ? `← Previous` : ""; const nextLink = currentPage < totalPages - ? `Next →` + ? `Next →` : ""; paginationHtml = `
@@ -89,19 +90,10 @@ function renderSeriesContent( } async function switchLibrary(libraryId: string): Promise { - const container = document.getElementById("series-container") as HTMLElement; - const loading = document.getElementById("loading-spinner") as HTMLElement; - - if (!container || !loading) return; - - try { - container.classList.add("opacity-0", "transition-opacity", "duration-150"); - await new Promise((resolve) => setTimeout(resolve, 150)); - - loading.classList.remove("hidden"); - + await switchWithTransition("series-container", async () => { + const param = libraryId ? `library_id=${libraryId}&` : ""; const response = await fetch( - `/api/series?library_id=${libraryId}&limit=24&offset=0`, + `/api/series?${param}limit=24&offset=0`, { headers: { Authorization: `Bearer ${localStorage.getItem("token")}`, @@ -119,55 +111,17 @@ async function switchLibrary(libraryId: string): Promise { const total: number = data.total || 0; const totalPages = Math.max(1, Math.ceil(total / 24)); - container.innerHTML = renderSeriesContent(seriesList, libraryId, totalPages, 1); - setSelectedLibrary(libraryId); - } catch (error) { - showToast("Failed to load series", "error"); - console.error("Switch library error:", error); - } finally { - loading.classList.add("hidden"); - - container.classList.remove("duration-150"); - container.classList.add("duration-300"); - void container.offsetHeight; - container.classList.remove("opacity-0"); - - setTimeout(() => { - container.classList.remove("transition-opacity", "duration-300"); - }, 300); - } + const container = document.getElementById("series-container"); + if (container) { + container.innerHTML = renderSeriesContent(seriesList, libraryId, totalPages, 1); + } + }); } Alpine.data("seriesPage", () => ({ initSeriesPage() { - const librarySelect = document.getElementById( - "library-select", - ) as HTMLSelectElement; - if (librarySelect) { - librarySelect.addEventListener("change", () => { - if (librarySelect.value) { - switchLibrary(librarySelect.value); - } - }); - } - }, -})); - -Alpine.data("seriesDetailPage", () => ({ - initSeriesDetailPage() { - const librarySelect = document.getElementById( - "library-select", - ) as HTMLSelectElement; - if (librarySelect) { - librarySelect.addEventListener("change", () => { - if (librarySelect.value) { - const url = new URL(window.location.href); - const currentLib = url.searchParams.get("library_id"); - if (currentLib === librarySelect.value) return; - url.searchParams.set("library_id", librarySelect.value); - window.location.href = url.toString(); - } - }); - } + initLibrarySwitcher({ + onSwitch: switchLibrary, + }); }, })); diff --git a/web/src/storage.ts b/web/src/storage.ts index 29df0fd..956bc8a 100644 --- a/web/src/storage.ts +++ b/web/src/storage.ts @@ -1,3 +1,5 @@ +const ALL_LIBRARIES = "__all__"; + function getToken(): string | null { return localStorage.getItem("token"); } @@ -30,12 +32,17 @@ function setTheme(theme: string): void { localStorage.setItem("theme", theme); } -function getSelectedLibrary(): string | null { - return localStorage.getItem("selectedLibrary"); +function getSelectedLibrary(): string { + const stored = localStorage.getItem("selectedLibrary"); + if (stored === ALL_LIBRARIES) return ""; + if (stored) return stored; + return ""; } function setSelectedLibrary(libraryId: string): void { - localStorage.setItem("selectedLibrary", libraryId); + const value = libraryId === "" ? ALL_LIBRARIES : libraryId; + localStorage.setItem("selectedLibrary", value); + document.cookie = `selectedLibrary=${encodeURIComponent(value)};path=/;max-age=${365 * 24 * 60 * 60};samesite=lax`; } function getSelectedBook(): string | null { @@ -51,6 +58,7 @@ function clearAll(): void { } export { + ALL_LIBRARIES, clearAll, getRefreshToken, getSelectedBook,