feat(frontend): integrate shared library switcher into all pages

Wire up the shared library switcher module on dashboard, collections list, collection detail, and collection rules pages. All pages use SSR for initial load and AJAX with fade transitions on library switch. web/src/collections.ts: - Add initCollectionsPage() that auto-detects list vs detail page by checking for #collection-data element - Collections list: onSwitch fetches /api/collections?library_id=X and re-renders the grid with per-library book counts - Collection detail: onSwitch fetches /api/collections/:id?library_id=X and re-renders the books grid - Add renderCollectionsGrid() and renderCollectionBooks() with Alpine.initTree() calls for dynamic content - Collection cards now link with ?library_id= from selected library - Update hidden #collection-data data-library-id on switch web/src/dashboard.ts: - Replace standalone switchLibrary() with initLibrarySwitcher() + switchWithTransition() from shared module - Extract fetchAndRenderSections() helper shared by onSwitch callback, reloadPage(), and saveDashboardSettings() - Remove inline #library-select change listener and switch-library data-action handler (now handled by shared module) - Scan-complete event handler unchanged (independent incremental logic) web/src/collection-rules.ts: - Update backToCollection() to preserve library context by appending ?library_id= from localStorage selectedLibrary key
2026-05-17 21:12:45 -04:00
parent 8e48aa4334
commit 64d3e8d272
3 changed files with 184 additions and 152 deletions
@@ -1,6 +1,11 @@
 import { Alpine } from "./alpine";
 import { showToast } from "./toast";
 import { createWebSocket } from "./websocket";
+import {
+  getCurrentLibraryId,
+  initLibrarySwitcher,
+  switchWithTransition,
+} from "./library-switcher";

 let collectionId: string | null = null;

@@ -60,39 +65,104 @@ async function loadCollections(): Promise<void> {

    if (response.ok) {
      const data = await response.json();
-      renderCollections(data.collections || []);
+      renderCollectionsGrid(data.collections || []);
    }
  } catch (error) {
    console.error("Failed to load collections:", error);
  }
 }

-function renderCollections(collections: CollectionData[]): void {
+function renderCollectionsGrid(collections: CollectionData[]): void {
  const container = document.getElementById("collections-list");
  if (!container) return;

  if (collections.length === 0) {
-    container.innerHTML =
-      '<p class="text-center p-4" style="color: var(--text-secondary)">No collections yet</p>';
+    container.innerHTML = `
+      <div class="text-center py-16 col-span-full" style="color: var(--text-secondary)">
+        <div class="text-6xl mb-4">📚</div>
+        <h3 class="text-xl font-semibold mb-2" style="color: var(--text-primary)">No Collections Yet</h3>
+        <p class="mb-4">Create collections to organize your books</p>
+        <button hx-get="/collections/create-modal" hx-target="#modal-container" hx-swap="innerHTML"
+                class="btn-primary px-4 py-2 rounded-lg">Create Your First Collection</button>
+      </div>`;
    return;
  }

+  const libraryId = getCurrentLibraryId();
+  const libraryParam = libraryId ? `?library_id=${libraryId}` : "";
+
  container.innerHTML = collections
    .map(
-      (collection) => `
-        <a href="/collections/${collection.id}" class="block p-4 rounded-lg border transition-colors hover:border-opacity-50"
-           style="background-color: var(--bg-secondary); border-color: var(--border)">
-            <div class="flex items-center space-x-3">
-                <span class="text-2xl">${collection.icon || "📁"}</span>
-                <div>
-                    <h3 class="font-medium" style="color: var(--text-primary)">${collection.name}</h3>
-                    ${collection.description ? `<p class="text-sm" style="color: var(--text-secondary)">${collection.description}</p>` : ""}
-                </div>
+      (col) => `
+        <div @click="navigateToCollection($el)" data-href="/collections/${col.id}${libraryParam}" class="block">
+          <div class="card p-6 rounded-lg border-l-4 cursor-pointer hover:shadow-lg transition-shadow"
+               style="background-color: var(--bg-secondary);"
+               data-color="${col.color}">
+            <div class="flex justify-between items-start mb-4">
+              <div class="text-3xl">${col.icon}</div>
+              <div class="flex space-x-2">
+                <button hx-get="/collections/${col.id}/edit-modal" hx-target="#modal-container"
+                        hx-swap="innerHTML" class="p-2 hover:opacity-80 rounded"
+                        style="color: var(--text-secondary); background-color: var(--bg-primary);">✏️</button>
+                <button hx-delete="/api/collections/${col.id}" hx-redirect="/collections"
+                        hx-confirm="Are you sure you want to delete this collection?"
+                        class="p-2 hover:opacity-80 rounded"
+                        style="color: var(--text-secondary); background-color: var(--bg-primary);">🗑️</button>
+              </div>
            </div>
-        </a>
+            <h3 class="text-lg font-semibold mb-2" style="color: var(--text-primary)">${col.name}</h3>
+            <p class="text-sm mb-4" style="color: var(--text-secondary)">${col.description}</p>
+            ${col.book_count > 0 ? `<p class="text-xs" style="color: var(--text-secondary)">${col.book_count} books</p>` : ""}
+          </div>
+        </div>
    `,
    )
    .join("");
+
+  initColorSelection();
+  Alpine.initTree(container);
+}
+
+function renderCollectionBooks(books: BookInfo[]): void {
+  const container = document.getElementById("books-container");
+  if (!container) return;
+
+  if (books.length === 0) {
+    container.innerHTML = `<div id="empty-state" class="col-span-full text-center py-16" style="color: var(--text-secondary)">No books in this collection yet.</div>`;
+    return;
+  }
+
+  container.innerHTML = books
+    .map(
+      (book) => `
+      <a href="/media/${book.media_item_id}">
+        <div class="card p-4 rounded-lg border hover:shadow-lg transition-shadow"
+             style="background-color: var(--bg-secondary); border-color: var(--border);">
+          <div class="flex gap-4">
+            <div class="flex-shrink-0 pt-1">
+              <input type="checkbox" onchange="toggleBookForRemoval('${book.media_item_id}')" class="w-5 h-5"/>
+            </div>
+            <div class="flex-1 min-w-0">
+              <h3 class="font-semibold text-lg mb-1 line-clamp-2" style="color: var(--text-primary)">${book.title}</h3>
+              ${book.author ? `<p class="text-sm line-clamp-1" style="color: var(--text-secondary)">by ${book.author}</p>` : ""}
+            </div>
+            <div class="flex-shrink-0 w-16 sm:w-20">
+              <img src="${book.cover_image_path || "/static/placeholder-book.svg"}" alt="Cover"
+                   class="w-full aspect-[3/4] object-cover rounded shadow-md"
+                   onerror="this.src='/static/placeholder-book.svg'"/>
+            </div>
+          </div>
+          <div class="mt-3 pt-3 border-t" style="border-color: var(--border);">
+            <button @click="removeBook('${book.media_item_id}')" class="px-3 py-1 text-sm border rounded hover:opacity-80"
+                    style="border-color: var(--border); color: var(--text-secondary);">🗑️ Remove from Collection</button>
+          </div>
+        </div>
+      </a>
+    `,
+    )
+    .join("");
+
+  Alpine.initTree(container);
 }

 async function loadCollectionRules(collectionId: string): Promise<void> {
@@ -240,7 +310,6 @@ function renderTestResults(results: unknown[]): void {
  container.innerHTML = `<p class="p-2 text-sm" style="color: var(--text-secondary)">${Array.isArray(results) ? results.length : 0} matching books</p>`;
 }

-// Add authorization header to all HTMX requests
 function setupHTMXAuth(): void {
  document.body.addEventListener("htmx:configRequest", function (evt: Event) {
    const token = localStorage.getItem("token");
@@ -249,27 +318,20 @@ function setupHTMXAuth(): void {
 }

 function navigateToCollection(element: HTMLElement): void {
-  // Check if the click target is a button
  const event = window.event as Event;
  if (event && event.target instanceof HTMLElement) {
    const target = event.target as HTMLElement;
-
-    // If user clicked a button or button icon, don't navigate
    if (target.tagName === "BUTTON" || target.closest("button") !== null) {
-      return; // Let HTMX handle the button action
+      return;
    }
  }

-  // Only navigate if clicking the card body
  const href = element.getAttribute("data-href");
  if (href) {
    window.location.href = href;
  }
 }

-// ============================================================================
-// Collection Modal UI Helpers
-// ============================================================================
 const borderClasses: Record<string, string> = {
  blue: "border-blue-500",
  red: "border-red-500",
@@ -278,7 +340,6 @@ const borderClasses: Record<string, string> = {
  purple: "border-purple-500",
 };

-// Color selection for create/edit modal
 function selectColor(color: string): void {
  const colorInput = document.getElementById(
    "collection-color",
@@ -286,7 +347,6 @@ function selectColor(color: string): void {
  if (colorInput) {
    colorInput.value = color;
  }
-  // Update visual selection
  document.querySelectorAll(".color-option").forEach((btn) => {
    (btn as HTMLElement).style.outline = "none";
    (btn as HTMLElement).style.outlineOffset = "0";
@@ -299,7 +359,7 @@ function selectColor(color: string): void {
    selectedBtn.style.outlineOffset = "3px";
  }
 }
-// Close modal (removes from DOM)
+
 function closeCollectionModal(): void {
  const modal = document.querySelector(".fixed.inset-0");
  if (modal) {
@@ -307,7 +367,6 @@ function closeCollectionModal(): void {
  }
 }

-// Initialize color selection on page load
 function initColorSelection(): void {
  const colorInput = document.getElementById(
    "collection-color",
@@ -316,21 +375,17 @@ function initColorSelection(): void {
    selectColor(colorInput.value);
  }

-  // Apply border color classes to collection cards
  document.querySelectorAll("[data-color]").forEach((card) => {
    const color = (card as HTMLElement).getAttribute("data-color");
    if (color && borderClasses[color]) {
-      // Remove old border color classes
      Object.values(borderClasses).forEach((cls) => {
        (card as HTMLElement).classList.remove(cls);
      });
-      // Add new border color class
      (card as HTMLElement).classList.add(borderClasses[color]);
    }
  });
 }

-// Initialize icon grid when modal is loaded via HTMX
 function setupHTMXModalInit(): void {
  document.body.addEventListener("htmx:afterSwap", function (evt: CustomEvent) {
    const target = evt.detail.target;
@@ -342,10 +397,8 @@ function setupHTMXModalInit(): void {
 }

 function showAllIcons(): void {
-  // Populate grid if empty
  populateIconGrid();

-  // Clear search filter
  const searchInput = document.getElementById(
    "icon-search",
  ) as HTMLInputElement;
@@ -353,7 +406,6 @@ function showAllIcons(): void {
    searchInput.value = "";
  }

-  // Show all icons
  const iconGrid = document.getElementById("icon-grid");
  if (!iconGrid) return;

@@ -363,9 +415,7 @@ function showAllIcons(): void {
  });
 }

-// Icon data with keywords (single source of truth)
 const iconData: Record<string, string[]> = {
-  // Books & Reading
  "📚": ["book", "books", "library", "read", "reading"],
  "📖": ["book", "open", "read", "reading"],
  "📝": ["memo", "note", "write", "writing", "edit"],
@@ -379,8 +429,6 @@ const iconData: Record<string, string[]> = {
  "📗": ["book", "read", "green"],
  "📘": ["book", "read", "blue"],
  "📙": ["book", "read", "orange"],
-
-  // Favorites & Activities
  "⭐": ["star", "favorite", "like", "rating"],
  "❤️": ["heart", "love", "favorite", "like"],
  "🔥": ["fire", "hot", "popular", "trending", "flame"],
@@ -392,8 +440,6 @@ const iconData: Record<string, string[]> = {
  "❌": ["cross", "x", "wrong", "error", "fail"],
  "⚡️": ["bolt", "fast", "quick", "energy"],
  "🚀": ["rocket", "fast", "launch", "space"],
-
-  // Places & Objects
  "💎": ["gem", "diamond", "stone", "rich"],
  "👍": ["thumb", "up", "good", "yes", "like"],
  "👎": ["thumb", "down", "bad", "no", "dislike"],
@@ -403,14 +449,11 @@ const iconData: Record<string, string[]> = {
  "✈️": ["plane", "airplane", "fly", "travel"],
  "🎮": ["game", "play", "video", "gaming"],
 };
-// Helper: Get just the emoji list

 function populateIconGrid(): void {
  const iconGrid = document.getElementById("icon-grid");
  if (!iconGrid) return;
-  // Clear any existing content
  iconGrid.innerHTML = "";
-  // Generate buttons from iconData
  Object.entries(iconData).forEach(([emoji, keywords]) => {
    const button = document.createElement("button");
    button.type = "button";
@@ -433,7 +476,6 @@ function selectIcon(icon: string): void {
  if (iconInput) iconInput.value = icon;
  if (searchInput) searchInput.value = icon;

-  // Visual feedback
  document.querySelectorAll(".icon-btn").forEach((btn) => {
    (btn as HTMLElement).style.outline = "none";
    (btn as HTMLElement).style.backgroundColor = "";
@@ -447,12 +489,12 @@ function selectIcon(icon: string): void {
    selectedBtn.style.backgroundColor = "var(--bg-secondary)";
  }
 }
+
 function filterIcons(searchTerm: string): void {
  const iconGrid = document.getElementById("icon-grid");
  const iconInput = document.getElementById(
    "collection-icon",
  ) as HTMLInputElement;
-  // Update hidden input with typed value
  if (iconInput) iconInput.value = searchTerm;
  if (!iconGrid) return;
  const buttons = iconGrid.querySelectorAll(".icon-btn");
@@ -462,7 +504,6 @@ function filterIcons(searchTerm: string): void {
    const emoji = (btn as HTMLElement).textContent || "";
    const keywords = iconData[emoji] || [];

-    // Search in keywords OR emoji itself
    const matches =
      searchTerm === "" ||
      emoji.includes(searchTerm) ||
@@ -474,7 +515,61 @@ function filterIcons(searchTerm: string): void {
  });
 }

-// Export functions globally
+function isDetailPage(): boolean {
+  const dataEl = document.getElementById("collection-data");
+  return !!dataEl?.dataset.id;
+}
+
+function initCollectionsPage(): void {
+  if (isDetailPage()) {
+    const dataEl = document.getElementById("collection-data");
+    const collId = dataEl?.dataset.id || "";
+
+    initLibrarySwitcher({
+      onSwitch: async (libraryId) => {
+        const dataEl = document.getElementById("collection-data");
+        if (dataEl) dataEl.dataset.libraryId = libraryId;
+
+        await switchWithTransition("books-container", async () => {
+          const param = libraryId ? `?library_id=${libraryId}` : "";
+          const response = await fetch(
+            `/api/collections/${collId}${param}`,
+            {
+              headers: {
+                Authorization: `Bearer ${localStorage.getItem("token")}`,
+                "Content-Type": "application/json",
+              },
+            },
+          );
+          if (!response.ok) throw new Error("Failed to load collection");
+          const data = await response.json();
+          renderCollectionBooks(data.books || []);
+        });
+      },
+    });
+  } 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();
+  setupHTMXModalInit();
+}
+
 export {
  closeCollectionModal,
  createRule,
@@ -482,6 +577,7 @@ export {
  filterIcons,
  initColorSelection,
  initializeCollectionWebSocket,
+  initCollectionsPage,
  loadCollectionRules,
  loadCollections,
  navigateToCollection,
@@ -495,13 +591,13 @@ export {
 };

 Alpine.data("collections", () => ({
-  // Collection Methods
  closeCollectionModal,
  createRule,
  deleteRule,
  filterIcons,
  initColorSelection,
  initializeCollectionWebSocket,
+  initCollectionsPage,
  loadCollectionRules,
  loadCollections,
  navigateToCollection,