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
This commit is contained in:
2026-03-21 00:16:14 -04:00
parent ddfc832b68
commit d1625fe231
+8 -4
View File
@@ -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,
}),
});