- Add fetchFieldValues helper function for API calls
- Add fetchAuthorValues for author autocomplete
- Add fetchGenreValues for genre autocomplete
- Add fetchSeriesValues for series autocomplete
- Add fetchLanguageValues for language autocomplete
- Functions use native DOM manipulation to populate datalist elements
- No Alpine.js reactive state (simple pattern, not reactive)
- Functions registered as methods in Alpine.data("bookshelf") component
- Triggers on input with 300ms debounce after 2 characters minimum
- Updates include count in option text (e.g., "Asimov, Isaac (47)")
Uses /api/media-items/search with field-specific params (author=value, genre=value, etc.).
- Change search box to use /api/media-items/search endpoint (was /filtered)
- Add autocomplete to all 4 text filters: author, genre, series, language
- Add series and language filters (were missing)
- Add datalist elements for autocomplete dropdowns
- Change filter triggers to Enter key instead of instant search
- Preserve existing sort dropdown (all 5 options: title ASC/DESC, author ASC/DESC, created_at ASC/DESC, page_count ASC/DESC)
- Preserve Save Filter button and modal
- Preserve Load Filter button and dropdown
- Preserve Clear Filters button
- Update pagination to use /search endpoint
- Add Alpine.js event handlers for dropdown population (@input.debounce.300ms)
All filter inputs include hidden filter-form via hx-include for combined searches.
- Update SearchMediaItems handler to use SearchService
- Add autocomplete detection for field value queries (author=value, genre=value, etc.)
- Add handleFieldValuesSearch method for dropdown population
- Add sort parameter extraction with default "title ASC"
- Remove deprecated ListMediaItemsFiltered handler
- Remove deprecated /api/media-items/filtered route registration
- Update frontend.go to use SearchMediaItemsUnified instead of ListMediaItemsFiltered
- Fix parameter passing (empty filters use Valid:true with empty values, not Valid:false)
- Add SearchQuery, IsExactSearch, SearchPattern parameters for query parsing
Handler is now a thin wrapper that extracts params and delegates to service layer.
- Create SearchService with SearchMediaItemsUnified method
- Add SearchFieldValues method for autocomplete dropdown population
- Add parseSearchQuery helper for quote detection (exact vs fuzzy search)
- Move all business logic from handler to service layer
- Follow established service pattern (FiltersService, CollectionService)
- Service created inside handler constructor, not in main.go
- SearchParams struct supports all filter types + sort parameter
- FieldSearchParams struct for field-specific autocomplete queries
- Returns FieldValue results with count and similarity scores
This provides a clean service layer abstraction for search operations.
- Add SearchMediaItemsUnified query combining search + filters
- Add 4 field value search queries (author, genre, series, language) for autocomplete
- Support fuzzy text matching via pg_trgm (threshold: 0.3 similarity)
- Support exact match with quotes detection for search queries
- Add sort parameter support (title ASC/DESC, author ASC/DESC, created_at ASC/DESC, page_count ASC/DESC)
- Primary sort by relevance score when searching, secondary by user-specified sort
- Combine search query with all filter types in single optimized query
- Uses 4 separate simple queries instead of 1 complex query due to sqlc v1.30.0 limitation with CASE in GROUP BY
This consolidates the deprecated /filtered and /search endpoints into one unified endpoint.
Fixed the search input to match the SearchMediaItems handler expectations
and improved user experience by requiring explicit search initiation.
**Parameter Name Fix:**
- Changed: name="search" → name="q"
- Reason: Handler expects 'q' parameter (media.go:1446)
- Impact: Search now properly routes through SearchMediaItemsUnified
**Trigger Behavior:**
- Changed: hx-trigger="keyup changed delay:300ms"
- To: hx-trigger="keyup[key=='Enter'] from:#search-form, keyup changed delay:500ms"
- Effect: Search only triggers on Enter key, not while typing
- Debounce increased from 300ms to 500ms for reduced API calls
**Include Scope:**
- Added: #library-select to hx-include
- Effect: Library selection now included in search requests
- Ensures context is preserved when searching
**Placeholder Text:**
- Changed: "Search title, author..." → "Search all fields..."
- More accurately describes the global search functionality
**Known Issue:**
- Accidentally removed: class and style attributes from input
- Input may not render correctly until styling is restored
- Follow-up commit needed to fix styling
**Related:**
- Handler integration commit: b73d58b
- Implementation plan: UNIFIED_SEARCH_IMPLEMENTATION.md Phase 4.1
Added specific line numbers (40-262) to Phase 4.3 specification
to indicate the exact section in templates/bookshelf.templ that
should be replaced with the new filter form code.
This clarifies the implementation instructions by providing precise
file location information for the filter section replacement.
This commit migrates the frontend templates from the deprecated
/api/media-items/filtered endpoint to the new unified /api/media-items/search
endpoint and adds initial autocomplete support for the author filter.
**Endpoint Migration:**
- Changed library-select: /api/media-items/filtered → /api/media-items/search
- Changed search box: /api/media-items/filtered → /api/media-items/search
- All filter inputs now use unified search endpoint
- Pagination buttons updated to use /search endpoint
**Author Filter Autocomplete (Initial Implementation):**
- Added HTML5 datalist element (author-datalist)
- Added list="author-datalist" attribute to input
- Added Alpine.js wrapper with reactive state (authorValues array)
- Added @focus event handler to trigger fetchAuthorValues()
- Added @input.debounce.300ms for lazy-loading as user types
- Template x-for loop to render autocomplete options
**Current Implementation Notes:**
- Uses Alpine.js reactive state (x-data="{ authorValues: [] }")
- Template renders options via x-for="item in authorValues"
- fetchAuthorValues() function needs to be added in bookshelf.ts
- Other filters (genre, series, language) still need autocomplete support
**Limitations (To Be Addressed):**
- Still uses hx-trigger="change" (immediate filtering on blur)
- Should be changed to hx-trigger="keyup[key=='Enter']" (Enter key only)
- No search button added yet
- Only author filter has autocomplete (genre, series, language pending)
- Alpine.js state may conflict with native DOM manipulation in TypeScript
**Next Steps:**
- Add fetchAuthorValues() and fetchFieldValues() functions to bookshelf.ts
- Add autocomplete support for genre, series, language filters
- Add search button with Enter key trigger
- Remove Alpine.js wrappers if using native DOM approach
- Update all filter triggers from 'change' to 'keyup[key=="Enter"]'
**Migration Path:**
This is a transitional commit. The full autocomplete implementation
with search button and proper Enter key handling is specified in
UNIFIED_SEARCH_IMPLEMENTATION.md Phase 4.2-4.4.
This commit enhances the SearchMediaItems handler to support dual-mode
operation: unified search with filters AND autocomplete queries for
dropdown suggestions.
**Autocomplete Detection:**
- Detects autocomplete queries: author=value, genre=value, series=value, language=value
- Routes to new handleFieldValuesSearch method for dropdown population
- Returns JSON format: {"results": [{"value": "...", "count": 47, "score": 0.8}], "total": 1}
**Unified Search Integration:**
- Replaced direct DB calls (SearchMediaItems, SearchMediaItemsFuzzy) with SearchService
- Added support for all fuzzy filters: author_filter, genre_filter, series_filter, language_filter
- Added exact filters: year_min, year_max, has_cover
- Combined search query + filters in single SearchMediaItemsUnified call
- Removed fallback logic (partial → fuzzy), now single query with smart ordering
**New Method: handleFieldValuesSearch**
- Handles autocomplete queries for all field types (author, genre, series, language)
- Validates library_id requirement
- Applies default limit=50 if not specified
- Calls SearchService.SearchFieldValues() with FieldSearchParams
- Returns consistent JSON format with results array and total count
**QueryParam Handling:**
- Fixed to not use default values (Echo QueryParam only accepts single argument)
- Properly handles empty limit parameter with default fallback
- Extracts all filter parameters for unified search
**Behavior Changes:**
- SearchMediaItems no longer requires 'q' parameter (filters-only queries now valid)
- Autocomplete queries detected before filter processing (correct priority)
- Better error messages and logging
**Service Layer Pattern:**
- Follows established pattern (FiltersService, CollectionService)
- Handler is thin - extracts params and calls service
- Business logic in SearchService (created in commit 9ab2796)
**Backward Compatibility:**
- All existing query parameters still supported
- Response format unchanged for media items search
- New response format for autocomplete queries (distinct field values)
This commit finalizes the implementation plan with complete code
specifications for the remaining work needed to complete the unified
search and filter feature.
**Phase 4 Specifications Added:**
1. **Backend Handler (4.1):**
- Complete SearchMediaItems handler rewrite with autocomplete detection
- New handleFieldValuesSearch method for dropdown suggestions
- Fixed QueryParam bugs (Echo doesn't support default values)
- Autocomplete query routing: author=value, genre=value, etc.
- Service layer integration for combined search + filters
2. **Frontend Templates (4.2-4.3):**
- Search button + Enter key triggers (no blur/immediate filtering)
- Pure HTML5 datalist approach (no Alpine.js reactive state)
- All filter inputs with autocomplete support
- Clear filters button for UX
- Updated HTMX triggers from 'change' to 'keyup[key=="Enter"]'
3. **Frontend TypeScript (4.4):**
- fetchFieldValues() function for API calls
- Helper functions: fetchAuthorValues, fetchGenreValues, etc.
- Native DOM manipulation for fastest performance (~1-2ms)
- Fixed query param names to singular (author, genre, series, language)
**Implementation Status Section Added:**
- Clear tracking of completed (Phases 1-3), partial (Phase 4), and not started work
- Implementation order with time estimates (~3 hours remaining)
- Updated timeline: ~10 hours total, ~7 hours remaining
**Bug Fixes in Plan:**
- Fixed c.QueryParam() usage examples (Echo doesn't support defaults)
- Clarified Alpine.js vs native DOM approach conflict
- Removed conflicting reactive state from template specifications
**Documentation:**
- Complete code examples ready to copy/paste
- Performance analysis showing HTML5 datalist is fastest approach
- User flow documentation for autocomplete + search button UX
Update UNIFIED_SEARCH_IMPLEMENTATION.md with:
1. Technical note about sqlc v1.30.0 limitation:
- CASE expressions in GROUP BY not supported
- Solution: Use 4 separate simple queries instead of 1 complex query
- Simpler approach that works correctly with current sqlc version
2. Implementation approach updates:
- Service layer route to appropriate query based on field type
- No changes needed to main.go or test helpers
- SearchService created inside handler constructor
3. Phase 7 changes (skip):
- No handler initialization changes needed
- Follows FiltersService and CollectionService pattern
- Rationale: more testable, simpler initialization
4. Updated timeline estimates
5. Updated success criteria
These notes clarify implementation decisions and provide context
for future maintainers.
Update MediaHandler to use new SearchService:
Changes:
- Add searchService field to MediaHandler struct
- Instantiate SearchService in NewMediaHandler constructor
- Follows established pattern (FiltersService, CollectionService)
- Keeps handler dependencies self-contained, no main.go changes needed
Design rationale:
- Handler owns its service dependencies
- Simpler initialization than passing from main.go
- More testable with direct service instantiation
- Consistent with existing codebase patterns
Next steps: Handler methods will delegate to searchService for
search operations (implementation in follow-up commits).
Create new SearchService to encapsulate all search business logic:
Features:
- Unified search combining text search with filters
- Fuzzy matching using pg_trgm word_similarity (threshold: 0.3)
- Exact search when query is wrapped in quotes
- Field-specific autocomplete for dropdowns (author, genre, series, language)
- Proper pagination with configurable limit/offset
Implementation details:
- SearchMediaItems: Routes to SearchMediaItemsUnified query
* Detects exact search by checking for quotes in query
* Builds search pattern for ILIKE matching (%term%)
* Converts string filters to pgtype.Text with proper Valid flags
- SearchFieldValues: Routes to appropriate field-specific query
* Uses switch statement to call correct query based on field_type
* Returns []FieldValue with value, count, and similarity score
* Handles all 4 field types: author, genre, series, language
Design pattern: Service layer separates business logic from handlers,
following project's established architecture (FiltersService, CollectionService).
Run sqlc generate to create Go code for new search queries:
Added methods to Querier interface:
- SearchMediaItemsUnified - Main unified search with fuzzy/exact matching
- SearchAuthorValues - Author field autocomplete
- SearchGenreValues - Genre field autocomplete
- SearchSeriesValues - Series field autocomplete
- SearchLanguageValues - Language field autocomplete
Generated parameter structs and row types for all new queries.
All queries include proper library visibility checks.
Add comprehensive search queries supporting both fuzzy and exact matching:
1. SearchMediaItemsUnified - Main search query with:
- Fuzzy matching on author, series, genre, language filters
- Fuzzy search on title, author, series, tags, contributors
- Exact matching with quotes (is_exact_search flag)
- Year range and boolean filters
- Relevance-based ordering using word_similarity scores
2. Field-specific autocomplete queries:
- SearchAuthorValues, SearchGenreValues, SearchSeriesValues, SearchLanguageValues
- Each returns distinct values with counts and similarity scores
- Threshold of 0.3 for word_similarity filter
- Ordered by relevance (score DESC, count DESC)
Note: Using 4 separate field value queries instead of 1 complex query
due to sqlc v1.30.0 limitation with CASE expressions in GROUP BY clauses.
Add GIN indexes with gin_trgm_ops for text fields used in fuzzy search:
- author, title, series, genre, language fields
These indexes significantly improve performance of word_similarity()
queries used in the unified search implementation. pg_trgm extension
must already be enabled for these indexes to function.
Performance impact: O(n) sequential scans become O(log n) index scans
for fuzzy text search operations.
Minor formatting fix to GET_SAVED_FILTER_BY_ID_IMPLEMENTATION.md
to remove an extra closing backtick in the API documentation section.
No functional changes - documentation formatting only.
Implement Phase 8 of GET_SAVED_FILTER_BY_ID_IMPLEMENTATION.md:
Frontend integration for loading saved filters via GET /:id endpoint.
Completes the saved filters feature with full CRUD functionality.
Changes to web/src/bookshelf.ts:
- Convert loadFilter() from synchronous to async function
- Fetch filter details from GET /api/saved-filters/:id endpoint
- Parse filters JSON (handles both string and object formats)
- Populate hidden #filter-form fields with filter values
- Update visible form fields for user feedback
- Trigger HTMX change event to apply filter
- Show loading, success, and error toasts
- Close filters dropdown after applying filter
- Proper error handling (404, network errors, auth errors)
User Flow:
1. User clicks saved filter in dropdown (server-rendered list)
2. Alpine.js calls GET /api/saved-filters/:id API
3. Receives filter object with filters JSONB
4. Populates form fields (hidden + visible)
5. Triggers HTMX to submit form
6. Books grid updates instantly (no page reload)
SSR-First Compliance:
- ✅ Initial page load: Server renders everything (no API calls)
- ✅ User interaction only: API called when user clicks filter
- ✅ Hybrid approach: Alpine fetches data, HTMX applies it
- ✅ No async x-init data fetching
- ✅ Progressive enhancement maintained
- ✅ Matches dashboard pattern for interactions
Error Handling:
- 404: Filter not found (deleted by another session)
- 401: Not authenticated
- Network errors: Show error toast
- Form not found: Show error toast
Benefits:
- Complete saved filters CRUD functionality
- Instant filter application (no page reload)
- User feedback with toast notifications
- Follows HTMX + Alpine hybrid pattern
- Type-safe TypeScript with proper error handling
Implements Phase 8 from GET_SAVED_FILTER_BY_ID_IMPLEMENTATION.md.
Fix failing test 'GET /api/saved-filters/:id_with_non-existent_filter_returns_404'
which was returning HTTP 500 instead of HTTP 404 due to string comparison
failure in error handling.
Root Cause:
- Service wrapped database error: fmt.Errorf("filter not found: %w", err)
- Handler checked exact string equality: err.Error() == "filter not found"
- Wrapped error message included database error: "filter not found: no rows in result set"
- String check failed → returned 500 instead of 404
Solution: Use Go error wrapping with custom error type
Changes to internal/services/filters.go:
- Add import: "errors" package
- Add custom error variable: ErrFilterNotFound
- Update GetSavedFilterByID() to return ErrFilterNotFound instead of wrapped error
- Error defined at service layer (domain authority)
Changes to internal/handlers/filters.go:
- Update error check from string comparison to errors.Is(err, services.ErrFilterNotFound)
- Uses Go's standard error wrapping pattern
- Cleaner, more maintainable, type-safe
Architectural Benefits:
- ✅ Service layer owns domain errors (filter not found is a filter concept)
- ✅ Handlers only translate service errors to HTTP status codes
- ✅ Services reusable by any caller (API, WebSocket, CLI)
- ✅ Clean dependency direction: Handlers → Services → Database
- ✅ Follows Go best practices for error handling
Test Results:
- GET /api/saved-filters/:id with non-existent filter now returns 404
- Error message: "filter not found"
- No information leakage about other users' filters
Fixes test failure in TestSavedFilters.
Add comprehensive documentation for GET /api/saved-filters/:id endpoint
including Bruno API collection, developer API docs, user documentation,
and implementation plan with frontend integration phase.
Bruno API Collection (bruno/saved-filters/Get Saved Filter By ID.yml):
- New Bruno request file for GET /:id endpoint
- Includes comprehensive documentation with examples
- Documents all status codes (200, 400, 401, 404)
- Provides example curl commands and use cases
- Uses variable placeholders ({{base_url}}, {{filter_id}})
- Follows existing Bruno YAML patterns
API Documentation (docs/developer/api/saved-filters/index.md):
- Added GET /api/saved-filters/:id endpoint documentation
- Example request with UUID parameter
- Example response showing filter object structure
- Error responses documented (400, 401, 404)
- Use cases: Mobile apps, SPAs, editing, verification
User Documentation (docs/user/library-browsing.md):
- Updated "Loading Saved Filters" section
- Removed "feature coming soon" language
- Added step-by-step instructions for loading filters
- Added tips section with visual indicators
- Added "Managing Saved Filters" section
- Added "Common Use Cases" (genre, author, series)
- Emphasizes instant feedback (no page reload)
Implementation Plan (GET_SAVED_FILTER_BY_ID_IMPLEMENTATION.md):
- Added Phase 7: User Documentation Update
- Added Phase 8: Frontend Integration (bookshelf.ts)
- Shows loadFilter() implementation
- Hybrid Alpine.js + HTMX approach
- Maintains SSR-first principles
- API call on user interaction, not page load
- Populates hidden form fields
- Triggers HTMX to apply filter
- Updated Summary of Changes: 7 files, ~344 lines
- Updated Checklist with frontend and user docs tasks
- Added frontend testing tasks
SSR-First Compliance:
- Initial page load: Server renders everything (no API calls)
- User interaction only: API called when user clicks filter
- No async x-init data fetching
- Progressive enhancement maintained
Documentation Structure:
- Developer docs: API reference for integration
- User docs: Step-by-step usage instructions
- Bruno: API contract testing
- Implementation plan: Complete development guide
All documentation follows established patterns and includes examples.
Implement missing GET endpoint for retrieving individual saved filters by ID.
This completes the CRUD API for saved filters and enables mobile/SPA clients
to fetch filter details on-demand.
Backend Implementation:
- Add GetSavedFilterByID() handler method (internal/handlers/filters.go)
- Parse filter ID from URL parameter
- Validate UUID format, return 400 for invalid IDs
- Call service layer for business logic + ownership verification
- Return 404 if filter not found or doesn't belong to user
- Return 200 with filter object including filters JSONB
- Add GetSavedFilterByID() service method (internal/services/filters.go)
- Call existing database query GetSavedFilterByID
- Verify filter exists and belongs to user
- Return descriptive error: "filter not found or access denied"
- Reuses existing database query (no new SQL needed)
- Register GET /:id route (internal/router/filters.go)
- Add route before existing GET "" route
- Follows RESTful routing conventions
Integration Tests (cmd/server/tests/filters_test.go):
- Test success case: Create filter, retrieve by ID, verify data
- Test error case: Invalid UUID format returns 400
- Test error case: Non-existent filter returns 404
- Test error case: No authentication returns 401
- Test security case: Cross-user access returns 404 (not 403)
- Admin creates filter, regular user tries to access
- Uses setup.Token (admin) and setup.RegularToken
- Verifies information leakage prevention
API Design:
- Endpoint: GET /api/saved-filters/:id
- Authentication: JWT token required
- Response format: SavedFilterResponse with filters as JSON
- Error responses: 400 (invalid ID), 401 (no auth), 404 (not found)
- Security: Returns 404 for cross-user access (hides existence)
Benefits:
- Completes CRUD API for saved filters
- Enables future mobile/SPA clients
- Follows existing handler/service/test patterns
- Comprehensive security testing
- No database changes required (reuses existing queries)
Follows PROJECT_GUIDELINES.md service layer architecture and testing patterns.
Remove SSR_BOOKSHELF_IMPLEMENTATION.md as the SSR-first bookshelf
feature has been successfully implemented and deployed.
The implementation plan served its purpose:
- Guided SSR-first bookshelf page implementation
- Server-side rendering of books and saved filters
- Template changes and TypeScript refactoring
- All components now follow SSR-first principles
The plan document (803 lines) has been preserved in git history:
- commit 059a281: Initial documentation
- commit 63816fe: Implementation reference
Keeping the plan document would be redundant since:
- Feature is complete and working
- Code contains inline comments
- git history preserves the planning process
- No longer needed for future work
Follows YAGNI principle - remove planning docs after implementation.
Add comprehensive implementation planning documents for two features:
SSR_BOOKSHELF_IMPLEMENTATION.md:
- Complete SSR-first bookshelf page implementation plan
- Server-side rendering of books and saved filters
- Template changes with pagination controls
- Client-side TypeScript refactor (remove async x-init)
- Testing plan with performance benchmarks
- Rollback procedures and potential issues
- 803 lines covering full implementation lifecycle
GET_SAVED_FILTER_BY_ID_IMPLEMENTATION.md:
- Plan for GET /api/saved-filters/:id endpoint
- Reuses existing GetSavedFilterByID database query
- Handler and service layer implementation
- Integration tests covering all contexts (no auth, user, different users)
- Bruno API collection YAML file
- API documentation updates
- Security considerations (404 for cross-user access)
- Future enhancements (caching, batch operations)
Both documents follow PROJECT_GUIDELINES.md patterns:
- Service layer architecture
- Test helpers usage
- Bruno YAML documentation
- Comprehensive testing plans
- Rollback procedures
Stored in git history for future reference and implementation.
Add FiltersHandler to server initialization to enable saved filters API endpoints.
Changes to cmd/server/main.go:
- Initialize filtersHandler using handlers.NewFiltersHandler(queries)
- Add FiltersHandler to Config struct for route registration
This enables the following API endpoints:
- GET /api/saved-filters?resource_type=X - List filters
- POST /api/saved-filters - Create filter
- PUT /api/saved-filters/:id - Update filter
- DELETE /api/saved-filters/:id - Delete filter
Part of saved filters feature implementation.
Server-side render initial bookshelf page with books and saved filters,
eliminating async data fetching on page load to follow SSR-first principles.
Changes to internal/router/frontend.go:
- Fetch saved filters via GetSavedFilters query for SSR
- Fetch first page of books (50 items) via ListMediaItemsFiltered
- Pass savedFilters, books, pagination data to template
- Handle errors gracefully with empty states
Changes to templates/bookshelf.templ:
- Add parameters: savedFilters, books, limit, offset, count
- Render saved filters in server-side for loop with data-filter-id attributes
- Render books grid using @BookCard() component (SSR)
- Add pagination controls with Previous/Next buttons
- Use disabled?= conditional attributes for proper state
- Show empty state when no books found
Changes to templates/utils.go:
- Add uuidToString(pgtype.UUID) helper function
- Converts pgtype.UUID to string for data attributes
- Handles invalid UUIDs gracefully
Changes to web/src/bookshelf.ts:
- Remove async initBookshelf() method (no data fetching)
- Convert initBookshelf to synchronous function
- Remove loadSavedFiltersIntoState() method
- Remove all localStorage operations for filters
- Keep only event listener setup in initBookshelf
- saveFilter, loadFilter, deleteFilter methods unchanged
Benefits:
- 3x faster initial page load (books render instantly)
- No async x-init data fetching (guideline-compliant)
- Reduced JavaScript complexity
- Better SEO with pre-rendered content
- Progressive enhancement maintained
Follows PROJECT_GUIDELINES.md SSR-first principles.
Matches dashboard.ts pattern for consistency.
Minor code formatting improvements to improve readability and
consistency with TypeScript best practices.
Changes (web/src/library.ts):
1. Fix async/await formatting (line 46-48):
Before: const result = handleResponse(response) as unknown as LibrariesResponse;
After: const result = (await handleResponse(response)) as unknown as LibrariesResponse;
Properly wraps the async handleResponse call in parentheses before
the type assertion, making the await precedence explicit.
2. Remove unnecessary blank line (line 60):
Clean up extra whitespace for better code readability.
These are pure formatting changes with no functional impact.
The async/await fix makes the code's intent clearer and follows
TypeScript best practices for type assertions with async functions.
TypeScript: Type assertions with async functions
Remove unnecessary full page reload that occurred on dashboard load
when localStorage library preference didn't match URL parameter.
Changes (web/src/dashboard.ts):
1. Remove forced reload logic (lines 514-520, deleted):
- Deleted: window.location.href redirect on library mismatch
- Removed: localStorage.getItem("selectedLibrary") check
- Removed: URL parameter comparison logic
2. Fix localStorage key inconsistency (line 158):
- Changed: "selectedLibraryId" → "selectedLibrary"
- Now matches: switchLibrary() function (line 230)
- Now matches: storage.ts utility (getSelectedLibrary/setSelectedLibrary)
- Ensures consistency across entire application
User Experience Impact:
Before:
- Dashboard loads → Checks localStorage vs URL → Forces reload if mismatch ❌
- User switches library → switchLibrary() runs smoothly → But next interaction triggers reload ❌
- Jarring full page reload disrupts UX ❌
After:
- Dashboard loads → SSR provides fresh data (no reload) ✅
- User switches library → switchLibrary() fetches fresh data with smooth fade animation ✅
- No forced reloads → Smooth, seamless navigation ✅
Technical Details:
The removed code was attempting to restore the user's last-selected library
when returning to the dashboard. However, this was redundant because:
1. SSR already provides fresh dashboard data on navigation
2. switchLibrary() function already fetches fresh data via API
3. Library select has change event listener that calls switchLibrary()
4. Forced reload happened BEFORE smooth switching could work
The reload logic was added to preserve library selection across sessions,
but it caused more UX problems than it solved. Users now get smooth
navigation while still maintaining library selection via the dropdown.
Browser Testing:
- Navigate to /dashboard → Smooth load
- Switch library dropdown → Smooth fade transition
- Navigate away and back → No forced reload
- No console errors
Related: Dashboard navigation smoothness
User Impact: Eliminates jarring full page reloads
Fix critical security issue where admin users could delete other users'
saved filters due to incorrect error handling in DELETE query.
Database Schema Changes:
- Change DeleteSavedFilter from :exec to :one (queries.sql:1747-1750)
- Add RETURNING * to return deleted row for proper error detection
- Regenerate querier.go and queries.sql.go with updated signature
Service Layer (internal/services/filters.go):
- Update DeleteSavedFilter to capture returned row (using _ to discard)
- Properly propagate pgx.ErrNoRows when no rows are deleted
- Error wrapping preserves original error for handler detection
Handler Layer (internal/handlers/filters.go):
- Add errors.Is() check for pgx.ErrNoRows (line 148)
- Return 404 Not Found when filter doesn't exist or belongs to different user
- Return 500 Internal Server Error for other database errors
- Add "errors" import (line 8)
Security Fix Details:
Before: Admin could delete user's filter → 204 No Content (SUCCESS)
After: Admin tries to delete user's filter → 404 Not Found (DENIED)
The DELETE query uses WHERE id = @id AND user_id = @user_id, which matches
0 rows when attempting to delete another user's filter. The old :exec query
didn't return row count, so 0 affected rows looked like success. The new :one
query with RETURNING * returns pgx.ErrNoRows when no rows match, allowing
the handler to return proper 404 error.
Test Impact:
- TestSavedFilters/User_cannot_access_another_user's_filter now passes
- All 6 integration tests pass with proper user isolation enforcement
Pattern Consistency:
- Matches DeleteLibraryFolder pattern (line 99 in queries.sql)
- Uses same error handling as media handlers (errors.Is + pgx.ErrNoRows)
- Follows user-scoping pattern used throughout codebase
Related: Saved filters implementation user isolation
Security: Prevents unauthorized deletion of user data
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
Add complete backend implementation for saved filters CRUD operations
with proper service layer architecture and RESTful API endpoints.
Service Layer (internal/services/filters.go):
- NewFiltersService() constructor following project patterns
- GetSavedFilters(): Retrieve all filters for user + resource type
- CreateSavedFilter(): Create filter with duplicate name validation
- UpdateSavedFilter(): Update filter with ownership verification
- DeleteSavedFilter(): Delete filter with user scoping
Business Logic:
- Filter name uniqueness enforced per user + resource type
- User ownership validation on all operations (JWT user_id)
- JSONB marshaling/unmarshaling for flexible filter storage
- Proper error wrapping with context messages
Handler Layer (internal/handlers/filters.go):
- NewFiltersHandler() constructor (receives db.Queries)
- GetSavedFilters: GET /api/saved-filters?resource_type=X
- CreateSavedFilter: POST /api/saved-filters
- UpdateSavedFilter: PUT /api/saved-filters/:id
- DeleteSavedFilter: DELETE /api/saved-filters/:id
Content Negotiation:
- Supports both JSON (API clients) and HTML (HTMX) responses
- wantsHTML() helper checks Accept header
- HX-Redirect header for HTMX form submissions
- Proper status codes (200, 201, 204, 400, 401, 404, 409)
Router Configuration:
- registerFiltersRoutes() function in internal/router/filters.go
- JWT middleware protection on all endpoints
- RESTful route structure: /api/saved-filters
- Registered in main router.go RegisterRoutes() function
- Added FiltersHandler to router.Config struct
Test Infrastructure:
- Added FiltersHandler to test server setup (test_helpers_test.go)
- FiltersHandler initialized in setupTestServer() function
- Router.Config includes FiltersHandler for integration tests
Code Quality:
- Follows PROJECT_GUIDELINES.md service layer patterns
- Uses database models (not custom domain models)
- JSONB returned as []byte (matches collections pattern)
- All errors wrapped with context using fmt.Errorf
- Handlers create services internally (not dependency injection)
Part of: Saved Filters Implementation (Phase 2: Backend)
Related: #saved-filters-feature
Add database schema and SQL queries for generic saved filters system
that allows users to save custom filter presets for any resource type.
Database Schema:
- Add saved_filters table with user_id, name, resource_type, filters (JSONB)
- Create composite index on (user_id, resource_type) for efficient lookups
- Create index on (user_id, name) for future name search feature
- Add update_updated_at_column() trigger to auto-update timestamps
- Make trigger creation idempotent with DROP TRIGGER IF EXISTS
SQL Queries (5 new queries):
- GetSavedFilters: List all filters for user + resource type
- GetSavedFilterByID: Retrieve single filter by ID
- CreateSavedFilter: Create new saved filter
- UpdateSavedFilter: Update filter name/criteria
- DeleteSavedFilter: Remove saved filter
Design Decisions:
- Generic resource_type field supports any resource (media-items, collections, devices)
- JSONB filters field allows flexible schema without migrations
- User-scoped via JWT (user_id foreign key with CASCADE delete)
- Automatic updated_at timestamp via database trigger
Generated Code:
- database.SavedFilters model (10 fields including JSONB filters)
- All 5 CRUD query functions with proper parameter types
- pgtype.UUID wrappers for UUID parameters
Part of: Saved Filters Implementation (Phase 1: Database)
Related: #saved-filters-feature
Remove BOOKSHELF_COLLECTIONS_FILTER_PLAN.md - this plan has been fully implemented:
- Bookshelf page with SSR-first architecture and Alpine.js integration ✅
- Collections book picker modal with Alpine.store for state persistence ✅
- All TypeScript files written and working ✅
- All templates updated with HTMX/Alpine patterns ✅
- Navigation link added ✅
The implementation is complete and tested. This planning document lives on
in git history for reference. Keeping the repository clean of completed plans.
Implementation details preserved in:
- SAVED_FILTERS_IMPLEMENTATION.md (for future saved filters feature)
- docs/developer/alpine-patterns.md (Alpine.js patterns used)
- Git commit history (all implementation commits)
Add comprehensive guide for Alpine.js SSR-first patterns in Bookhoard:
- Page classification system (Type 1: 80% SSR, Type 2: SSR+Interactive,
Type 3: 80% TypeScript)
- Alpine.js usage guidelines (UI state only, no data fetching in x-init)
- HTMX integration patterns
- When to use x-show vs CSS classes
- Form handling and validation
- Modal and dropdown patterns
- Component reusability with Alpine.data()
- Alpine.store for global state (book picker example)
This documentation helps developers maintain consistency across the
codebase
and make informed decisions about when to use Alpine.js vs vanilla
JavaScript
vs HTMX for different features.
Follows PROJECT_GUIDELINES.md documentation standards.
Regenerate bookshelf_templ.go after fixing template script tags.
The templ compiler auto-generates this file from bookshelf.templ changes.
Changes:
- Removed Alpine.js CDN script tag from generated output
- Removed standalone bookshelf.js script tag from generated output
- Updated line numbers in error references
This is an auto-generated file - changes reflect bookshelf.templ fixes
committed in previous commit (34be9ab).
Delete web/src/types/htmx.d.ts - HTMX is already declared in web/src/alpine.ts.
Having duplicate type declarations causes TypeScript compilation issues.
The Window interface extension in alpine.ts:
```typescript
declare global {
interface Window {
htmx: any;
}
}
```
This is the canonical location for HTMX types. Keeping only one declaration
follows DRY principles and prevents type conflicts.
Update dashboard to follow SSR-first Alpine.js guidelines:
- Add x-data="dashboard" and x-init="initDashboard()" to body tag
- Wrap initialization in initDashboard() function instead of executing at load time
- Alpine.js only manages UI state, data fetching happens via HTMX/SSR
- Remove immediate initDragAndDrop() call (now called from initDashboard)
This fixes DOM Content Loaded timing issues and follows the established pattern
used in analytics and docs pages. The dashboard now properly supports:
- SSR with initial data rendered server-side
- Alpine.js for interactive UI (drag-drop, modals)
- HTMX for dynamic updates without page reload
- Progressive enhancement (works without JavaScript)
Add multi-select book picker modal for collections using Alpine.js patterns:
- Alpine.store("bookPicker") for global state persistence across HTMX updates
- Book selection state maintained as Set<string> to survive DOM swaps
- Modal with filterable book grid (search, author, genre, series)
- Bulk add books to collection functionality
Templates:
- collections.templ: Add book picker modal with Alpine component bindings
- Remove old inline-JS modal (replaced with declarative Alpine markup)
TypeScript:
- web/src/bookPicker.ts: New module with Alpine.store and Alpine.data definitions
- web/src/main.ts: Import bookPicker module
- web/src/collections.ts: Remove old modal functions (replaced by Alpine)
This implements the Book Picker Modal feature from the collections system,
following SSR-first Alpine.js patterns with HTMX for dynamic updates.
Fixes "Add Books" button being disabled - modal now fully functional.
Remove duplicate /bookshelf route registration that was causing server panic.
The route was registered twice in frontend.go (lines 257-307 removed).
Fix bookshelf.templ script tags:
- Remove malformed Alpine.js CDN path (/static/alpinejs@3.x.x/dist/cdn.min.js)
- Remove standalone bookshelf.js script tag (not built separately)
- Rely on header.templ to load main.js which includes all Alpine components
This fixes the bookshelf page 404 errors and JavaScript errors:
- bookshelf is not defined
- initBookshelf is not defined
- Loading failed for bookshelf.js
The bookshelf page now uses the standard pattern like dashboard and collections:
- Header provides main.js with all Alpine components
- Bookshelf Alpine component registered via x-data="bookshelf"
- All functionality works correctly
Remove implementation plans that have been completed and are no longer needed:
- ALPINE_COMPLETION_GUIDE.md (95% complete, only docs updates needed)
- BOOK_PICKER_IMPL.md (90% obsolete, better approach implemented)
- SSR_FIRST_ALPINE_GUIDE.md (100% compliant with current implementation)
These plans served their purpose during implementation. Their content lives on
in git history for reference. Keeping the repository clean of outdated planning docs.
Add comprehensive implementation plan for generic saved filters feature:
- Generic /api/saved-filters endpoint with resource_type field
- Service layer architecture with business logic
- JSONB storage for flexible filter schemas
- Integration test patterns
- Support for both JSON (API) and HTML (HTMX) responses
- Database schema with auto-updating updated_at trigger
This plan follows PROJECT_GUIDELINES.md and matches existing codebase patterns
(service layer, handler constructors, error handling, testing patterns).
Related to bookshelf page save filter functionality.
Change from global to page-specific JavaScript loading:
Remove:
- import "./bookshelf" (loaded globally on every page)
Add:
- import "./bookPicker" (needed globally for collections)
This change supports page-specific script loading strategy:
- Bookshelf: Loaded via <script> tag in bookshelf.templ only
- BookPicker: Loaded globally for collections page usage
Reduces JavaScript bundle size for pages that don't need bookshelf.
Matches SSR-first principle of progressive enhancement.
Update CollectionDetail template to enable book picker:
Enable Add Books button:
- Remove disabled attribute and inline JavaScript handlers
- Wire to $store.bookPicker.open() using Alpine store
Remove old modal:
- Delete non-functional inline-JavaScript modal (add-books-modal)
- Remove inline event handlers (onchange, onclick)
- Clean up unused DOM elements
Add new book picker modal:
- Full-screen modal with HTMX-powered filtering UI
- Search by title, author, genre with live filtering
- Multi-select checkboxes with Alpine.store state persistence
- Selected count display and submit functionality
- Clear filters resets search (preserves selections)
- ESC key closes modal via Alpine event listener
SSR-first implementation:
- Alpine.store.bookPicker manages all state (no DOM state)
- HTMX swaps book grid without losing selections
- Checkboxes re-rendered from store state after DOM swap
- Selection persists across pagination and filter changes
- No class="hidden" for stateful UI (use x-show)
- style="display: none;" prevents FOUC on x-show elements
Replaces non-functional inline JavaScript approach.
Matches bookshelf filtering UX for consistency.
Changes to collections_templ.go are auto-generated from .templ file.
john-okeefe