From d1625fe231d6a716bd176fa38a8c9d92ba9ddf06 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Sat, 21 Mar 2026 00:16:14 -0400
Subject: [PATCH] feat(frontend): update bookshelf to use saved filters API

Update bookshelf page to use new generic saved filters endpoint
for persisting and loading user filter presets.

API Endpoint Changes:
- loadSavedFilters(): Use /api/saved-filters?resource_type=media-items
  (OLD: /api/bookshelf/filters - removed endpoint)
- saveFilter(): Include resource_type: "media-items" in request body

Filter Persistence:
- Filters saved to backend instead of localStorage only
- Supports multiple resource types (extensible design)
- Maintains existing Alpine.js store integration
- Automatic reload after saving filters

User Experience:
- No breaking changes to UI
- Same save/load workflow for users
- Better data persistence (server-side storage)
- Cross-device filter sync (future enhancement)

Error Handling:
- Toast notifications for save success/failure
- Proper error logging to console
- Graceful handling of missing authentication

Migration:
- Fully backward compatible with existing UI
- No changes to HTML template needed
- Alpine store remains unchanged

Part of: Saved Filters Implementation (Phase 3: Frontend)
Related: #saved-filters-feature
---
 web/src/bookshelf.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/src/bookshelf.ts b/web/src/bookshelf.ts
index 759afaf..338ab87 100644
--- a/web/src/bookshelf.ts
+++ b/web/src/bookshelf.ts
@@ -9,9 +9,12 @@ async function loadSavedFilters(): Promise<void> {
   const token = localStorage.getItem("token");
   if (!token) return;
   try {
-    const response = await fetch("/api/bookshelf/filters", {
-      headers: { Authorization: `Bearer ${token}` },
-    });
+    const response = await fetch(
+      "/api/saved-filters?resource_type=media-items",
+      {
+        headers: { Authorization: `Bearer ${token}` },
+      },
+    );
 
     if (response.ok) {
       const filters = await response.json();
@@ -46,7 +49,7 @@ async function saveFilter(event: Event): Promise<void> {
   }
 
   try {
-    const response = await fetch("/api/bookshelf/filters", {
+    const response = await fetch("/api/saved-filters", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -54,6 +57,7 @@ async function saveFilter(event: Event): Promise<void> {
       },
       body: JSON.stringify({
         name: filterName,
+        resource_type: "media-items",
         filters: filterData,
       }),
     });