feat(ts): centralized library storage with cookie-based SSR support

- storage.ts: Centralize ALL_LIBRARIES = "__all__" sentinel constant.
  setSelectedLibrary() now writes both localStorage and a cookie
  (selectedLibrary, Path=/, SameSite=Lax, max-age=365d). The
  sentinel "__all__" is used in both storage mediums — empty strings
  are never stored. getSelectedLibrary() maps __all__ back to "".
  Cookie enables server-side rendering to read the stored library
  selection without access to localStorage.

- library-switcher.ts: Import ALL_LIBRARIES and setSelectedLibrary/
  getSelectedLibrary from storage.ts instead of managing localStorage
  directly. Remove local constants.

- dashboard.ts: Remove duplicate localStorage.setItem call that was
  overwriting the __all__ sentinel with raw empty string. Fix
  reloadPage() and scan-complete handler to work with empty libraryId.
  openDashboardSettings/saveDashboardSettings show clear messages for
  All Libraries mode.

- collections.ts: Remove library switcher initialization from the
  collections list page — the list page no longer has a switcher.

- series.ts: Rewrite to use initLibrarySwitcher from library-switcher
  module and switchWithTransition for navigation. Series card links
  no longer include library_id in their URLs.

- bookshelf.ts: Autocomplete fetch calls handle empty libraryId
  correctly for All Libraries mode.

- search.ts, collection-rules.ts: Use setSelectedLibrary() and
  getSelectedLibrary() from storage.ts instead of direct localStorage
  access.

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");
+    const libParam = currentLibraryId ? `&library_id=${currentLibraryId}` : "";
-      return;
-    }
 
     try {
       const response = await fetch(
         `/api/media-items/search?${field}=${encodeURIComponent(
           search,
-        )}&library_id=${currentLibraryId}&limit=50`,
+        )}${libParam}&limit=50`,
         {
           headers: { Authorization: `Bearer ${token}` },
         },

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}`;

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

web/src/dashboard.ts

@@ -21,7 +21,7 @@ async function openDashboardSettings(): Promise<void> {
   ) 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<void> {
+  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<void> {
   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<void> {
@@ -150,7 +150,7 @@ async function saveDashboardSettings(): Promise<void> {
       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<void> {
   const librarySelect = document.getElementById(
     "library-select",
   ) as HTMLSelectElement;
-  const libraryId = librarySelect?.value;
+  const libraryId = librarySelect?.value || "";
-
-  if (!libraryId) {
-    showToast("No library selected", "error");
-    return;
-  }
 
   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")}`,

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);
+  const stored = localStorage.getItem("selectedLibrary");
-  if (stored) {
+  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);
   });
 }

web/src/search.ts

@@ -1,4 +1,5 @@
 import { Alpine } from "./alpine";
+import { setSelectedLibrary } from "./storage";
 
 let searchInputTimeout: ReturnType<typeof setTimeout> | 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();
 }

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 {
+function renderSeriesCard(series: SeriesItem): string {
-  const href = `/series/detail?name=${encodeURIComponent(series.name)}&library_id=${libraryId}`;
+  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(
       </main>`;
   }
 
-  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
-        ? `<a href="/series?library_id=${libraryId}&page=${currentPage - 1}" class="px-4 py-2 rounded-lg border" style="border-color: var(--border); color: var(--text-primary);">← Previous</a>`
+        ? `<a href="/series?${libParam}page=${currentPage - 1}" class="px-4 py-2 rounded-lg border" style="border-color: var(--border); color: var(--text-primary);">← Previous</a>`
         : "";
     const nextLink =
       currentPage < totalPages
-        ? `<a href="/series?library_id=${libraryId}&page=${currentPage + 1}" class="px-4 py-2 rounded-lg border" style="border-color: var(--border); color: var(--text-primary);">Next →</a>`
+        ? `<a href="/series?${libParam}page=${currentPage + 1}" class="px-4 py-2 rounded-lg border" style="border-color: var(--border); color: var(--text-primary);">Next →</a>`
         : "";
     paginationHtml = `
       <div class="flex justify-center items-center gap-4 mt-8">
@@ -89,19 +90,10 @@ function renderSeriesContent(
 }
 
 async function switchLibrary(libraryId: string): Promise<void> {
-  const container = document.getElementById("series-container") as HTMLElement;
+  await switchWithTransition("series-container", async () => {
-  const loading = document.getElementById("loading-spinner") as HTMLElement;
+    const param = libraryId ? `library_id=${libraryId}&` : "";
-
-  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");
-
     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<void> {
     const total: number = data.total || 0;
     const totalPages = Math.max(1, Math.ceil(total / 24));
 
-    container.innerHTML = renderSeriesContent(seriesList, libraryId, totalPages, 1);
+    const container = document.getElementById("series-container");
-    setSelectedLibrary(libraryId);
+    if (container) {
-  } catch (error) {
+      container.innerHTML = renderSeriesContent(seriesList, libraryId, totalPages, 1);
-    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);
-  }
 }
 
 Alpine.data("seriesPage", () => ({
   initSeriesPage() {
-    const librarySelect = document.getElementById(
+    initLibrarySwitcher({
-      "library-select",
+      onSwitch: switchLibrary,
-    ) 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();
-        }
-      });
-    }
   },
 }));

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 {
+function getSelectedLibrary(): string {
-  return localStorage.getItem("selectedLibrary");
+  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,