- Send force: true in scan API request body
- Rename 'Scan Library' button to 'Rescan Library'
- Replace Settings card with Watch Status display
- Add loadWatchStatus() to fetch and display watch mode status
- Remove inline script from admin.templ (moved to admin.ts)
Features:
- Complete dashboard redesign with improved UI components and layout
- Implement custom section builder for personalized book organization
- Add new events tracking system for user interactions
- Enhance search functionality with better static search.js
- Update TypeScript type definitions for API responses
Backend:
- Update Go dependencies in go.mod
- Add new frontend routes in router
Templates:
- Update admin and dashboard templates with new components
Frontend:
- Refactor analytics, collections, conflicts, and queue modules
- Add new documentation features in docs.ts
- Implement linking between books and collections
- Add toast notifications for user feedback
- Include placeholder book SVG asset
This commit consolidates multiple feature additions and improvements
across the entire stack including backend, templates, and frontend.
Fix text color display issues on wood gradient backgrounds in the
dashboard's collections container, ensuring small text matches big text
and "View All" links stand out with proper wood-specific colors.
Changes:
- Remove .text-sm from grey text rule to match big text colors
- Keep .text-secondary as only grey text class
- Links maintain wood-specific standout colors via specific selectors
Problem:
- Small text (.text-sm) was forced to grey (--wood-text-secondary)
- "View All" links inherited grey instead of wood link colors
- Inconsistent text sizing created visual hierarchy issues
Root Cause:
input.css:243-247 applied --wood-text-secondary to .text-sm
This overrode wood-specific link colors at lines 250-257
Solution:
Remove .text-sm and p.text-sm from the grey text rule:
- Before: .text-sm, .text-secondary, p.text-sm → grey
- After: .text-secondary only → grey
- .text-sm now uses --wood-text-primary (matches big text)
- Links (including "View All") use wood-specific blue colors
Impact:
- All small text now matches big text color on wood backgrounds
- "View All" links stand out with proper colors (#0066cc for light wood, #66ccff for dark)
- Improved readability and visual consistency
- Better user experience on wood gradient themes
Wood Theme Colors:
- Wood Light: #0066cc (dark blue for contrast on light background)
- Wood Dark: #66ccff (light blue for visibility on dark background)
- Wood Mahogany: #66ccff (light blue for visibility on dark background)
Files: web/static/input.css
Lines Modified: 243-247 (removed selectors)
Related: templates/dashboard.templ:100 (View All link)
- Fix View All link flashing by preserving data-wood attribute when dashboard re-renders
- Update wood-dark text color to match wood-mahogany (#f5f5f5) for better consistency
- Add smart link colors for wood paneling (#0066cc for light wood, #66ccff for dark woods)
- Fix carousel arrow gradients to be less harsh on wood backgrounds (0.6 for light, 0.3 for dark)
- Remove accent color preservation rule that was conflicting with wood-specific link colors
- Add data-wood attribute to collections container for CSS targeting
- Update woodPaneling.ts and woodPanelingInit.ts to set/remove attribute
- Add CSS variables for wood-specific text colors (dark text on light wood, light text on dark wood)
- Add !important rules to override theme colors when wood is active
- Replace wood-dark and wood-mahogany textures with darker variants
- Add subtle borders to book cards on wood backgrounds
- Fix library edit form to use type_name instead of library_type_id for type dropdown
- Clear library-id input after successful delete to prevent create-then-delete bug
- This fixes the issue where creating a new library after deleting one would fail with 'Unknown error' due to stale library-id
- Add bg-theme-active/inactive for theme buttons
- Add bg-wood-active/inactive for wood paneling buttons
- Use CSS variables already defined in input.css
- Use !important to override inline styles
- Create themeDropdown.ts to manage active state highlighting
- Show which theme/wood option is currently selected
- Use CSS classes instead of inline styles for indicators
- Wrap existing functions to update indicators on toggle
- Auto-initialize indicators on DOM ready
- Add woodPaneling.ts with localStorage-based paneling preferences
- Add woodPanelingInit.ts for early initialization (prevents flash)
- Support none, wood-light, wood-dark, wood-mahogany options
- Apply paneling to #collections-container only (not full body)
- Use Tailwind utility classes for backgrounds
- Use CSS variable classes for active indicators
- Export functions for HTML onclick handlers
- Auto-initialize on DOM ready
- Remove wood-light, wood-dark, wood-mahogany from ThemeType
- Remove wood theme gradient logic from applyTheme()
- Wood themes will be reimplemented as separate paneling feature
- Paneling will target dashboard bookshelf background only
-- Add dedicated delete confirmation modal to admin/library page
-- Refactor deleteLibrary() to use modal instead of inline confirm()
-- Add showDeleteModal(), hideDeleteModal(), confirmDeleteLibrary() functions
-- Modal displays clear warning about what gets deleted
-- Improves UX by making the confirmation dialog more prominent and informative
- Add optional data parameter to apiDelete() with generic type safety
- Enables DELETE requests with request bodies (needed for folder deletion)
- 100% backward compatible (optional parameter)
- Supports type-safe request body passing
Part of: Issue 1
- Reuse Create Library modal for edit mode
- Add hidden library-id input to track create vs edit
- Update handleCreateLibrarySubmit to detect mode and use PUT vs POST
- Implement editLibrary() to populate modal with existing data
- Pass library data to Edit button via data attributes
- Reset modal title when opening for create mode
Fixes: Issue 3
- Add password requirements checklist with visual indicators (✓/○)
- Implement real-time validation for length, case, numbers, special chars
- Add confirm password field with matching validation
- Disable submit button until all requirements are met
- Add TypeScript client-side validation with password manager compatibility
Phase 10.5.1: Add /custom-section frontend route
- Added route handler in internal/router/frontend.go
- Fetches user libraries and renders custom section builder template
Phase 10.5.2: Create custom section builder template
- Created templates/custom_section.templ with full UI
- Includes section details form, filter rules builder, manual book selection
- Live preview functionality with preview container
- Form actions for save/cancel
Phase 10.5.3: Create custom-section-builder TypeScript
- Created web/src/custom-section-builder.ts with 13+ filter fields
- Filter fields: title, author, genre, series, progress, rating, date_added, last_read, publisher, language, format, tags, narrators
- Procedural/imperative style (no OOP) as per guidelines
- Rule builder with AND/OR logic support
- Book search and multi-select functionality
- Live preview via /api/collections/preview endpoint
- Form validation and submission to /api/collections
Phase 10.5.4: Build TypeScript modules
- Compiled custom-section-builder.ts to web/static/custom-section-builder.js
- Verified successful compilation with no errors
- All existing TypeScript modules continue to compile
Phase 10.5.5: Add Bruno tests for custom section creation
- create-custom-section-rules.bru: Test creating section with filter rules
- create-custom-section-manual.bru: Test creating section with manual book selection
- create-custom-section-missing-fields.bru: Test error handling for missing required fields
Phase 10.6: Build Verification
- ✅ TypeScript modules compile successfully
- ✅ Templates generate successfully
- ✅ Go build succeeds with no compilation errors
- ✅ All build artifacts verified (dashboard.js, custom-section-builder.js, dashboard_templ.go, custom_section_templ.go)
This completes the Custom Section Builder feature, allowing users to create
personalized dashboard sections with flexible filter rules or manual book selection.
Replace library browser with Carousel-style collections carousel:
Template Changes (templates/dashboard.templ):
Complete rewrite from library browser to collections carousel:
1. Dashboard Main Template:
- Sticky library selector dropdown
- Customize dashboard button (settings modal)
- Refresh button
- Loading spinner for async operations
- Collections container with carousels
2. CollectionCarousel Component:
- Collection header with icon, title, description
- View All link for system collections
- Horizontal scrollable carousel track
- Left/right navigation buttons
- Book cards with cover images
- Empty state handling
3. BookCard Component:
- Aspect ratio [2/3] book cover
- Cover image with fallback to placeholder
- Title and author display
- Click handler for viewing book details
- Hover scale animation
4. DashboardSettingsModal Component:
- Draggable collection list for reordering
- Toggle switches for collection visibility
- "System" badges for system collections
- "Restore" buttons for system collections
- Items per section slider (10-50, step 5)
- Save/Cancel buttons
Template Features:
- Uses IsSystem boolean instead of Type string
- data-is-system attribute for JavaScript
- data-collection-id for DOM manipulation
- Supports drag-and-drop reordering
- Settings modal with live preview
TypeScript Implementation (web/src/dashboard.ts):
Core Functions:
- scrollCarousel: Smooth horizontal scrolling
- openDashboardSettings/closeDashboardSettings: Modal control
- toggleCollectionVisibility: Toggle visibility switches
- saveDashboardSettings: Save preferences to API
* Collects hidden_collections and collection_order
* Calls PUT /api/dashboard/preferences
* Reloads page on success
- restoreSystemCollection: Reset system collection to defaults
* Confirmation dialog
* Calls POST /api/dashboard/restore-system-collection
* Shows toast notifications
- switchLibrary: Switch between libraries
* Async fetch from API
* Re-renders collections
- renderCollections: Client-side rendering of collections
- renderBookCard: Generate book card HTML
- viewBook: Placeholder for book detail view
- reloadPage: Refresh page
- updateItemsCount: Update slider display
- initDragAndDrop: Drag-and-drop event handlers
Event Handling:
- Event delegation for performance
- data-action attributes for handler routing
- Proper type checking and null safety
- Error handling with toast notifications
Type Safety:
- Uses SectionData and BookInfo from api.d.ts
- Proper TypeScript types throughout
- Null checks for DOM elements
- Type assertions where needed
This implements Phase 9: Dashboard Template with unified collections terminology and full TypeScript interactivity.
- Compiled from web/src/search.ts
- Added proper type annotations
- Fixed null checks for DOM elements
- Added escapeHtml for library name display
- Updated onclick to use window.selectLibraryAndBook
- Update fetch interceptor to special-case 401 responses
- Clear invalid tokens from localStorage on 401 (token, refreshToken, user)
- Distinguish between page navigation and API calls:
- Page navigation: throw error to prevent further processing
- API calls: show toast error with session expired message
- Suppress network error toast for redirect errors
- Compile TypeScript to JavaScript
This ensures frontend properly handles expired sessions by clearing
stale credentials and showing appropriate error messages.
- Add Bearer token from localStorage to regenerate-token API request
- Update code formatting for consistency (double quotes, indentation)
This ensures the device token regeneration endpoint receives proper
authentication via the Authorization header.
- Serve static files from web/static directory
- Add theme class safelist to Tailwind config for dynamic theming support
- Regenerate CSS with updated configuration
- Add handler to regenerate device auth tokens
- Add PUT /api/devices/:id/regenerate-token route
- Returns new token and sync URLs for device configuration
- Add CSS rules to web/static/input.css for header positioning
- Header is sticky only on /docs pages via .page-docs body class
- Add page-docs class to body element in templates/docs.templ
- Non-docs pages have static header position
- Update Tailwind config to use CSS variables instead of hardcoded colors
- Colors now reference theme variables: var(--text-primary), var(--text-secondary), etc.
- Fix Tokyo Night theme: text-secondary corrected from #565f89 to #9aa5ce
- Typography plugin now uses var() for theme-aware prose styling
- Enables docs to respect theme system like rest of app
- Add eslint-disable comments around @tailwind directives
- Resolves 'Unknown at rule @tailwind' warnings in CSS editors
- Comments clearly mark tailwindcss section for maintainability
- Move code block styling from templates to centralized CSS file
- Add highlight.js overrides in @layer components section
- Use tokyo-night colors: #16161e for pre blocks, #1a1b26 for inline code
- Follows Tailwind best practices: custom CSS in input.css, not templates
- Maintains proper theme-adjustable styling
- Added htmx.min.js to git (previously only downloaded during build)
- Updated .gitignore to explicitly allow documentation dependencies
- Clarified compiled vs downloaded JS in gitignore comments
Installed @tailwindcss/typography plugin to fix 'wall of text' issue in documentation.
The prose classes now properly style markdown HTML elements with:
- Proper margins and spacing for headings, paragraphs, lists
- Line-height and typography improvements
- Styled code blocks, blockquotes, tables, and links
Changes:
- Add @tailwindcss/typography to devDependencies
- Configure plugin in tailwind.config.ts
- Regenerate CSS with typography styles included
Move theme CSS custom properties from individual templates to
centralized location in web/static/input.css using Tailwind @layer
directives for better maintainability and to eliminate duplicate
code across templates.
- Create search.js with debounced input (300ms)
- Display results in dropdown modal with highlighted matches
- Support keyboard navigation (arrows, Enter, Escape)
- Show result count and 'no results' state
- Highlight matching terms in results
- Add autocomplete attribute to search input
- Minimum 2 characters to trigger search
- Add header.templ component with app title, search, theme switcher, user menu
- Implement dropdown menus for theme selection and user actions
- Add wood theme options (Wood Light, Wood Dark, Wood Mahogany)
- Support all existing themes with visual color swatches
- Auto-close dropdowns when clicking outside
- TypeScript header functionality with proper type safety
Features:
- Left: App title "📚 Bookmann" linking to /bookshelf
- Center: Search box (ready for future search functionality)
- Right: Theme switcher button with color dropdown → User icon menu
- User menu includes Settings, Admin Panel (if admin), and Logout
- Theme persistence to localStorage and server via API
- Change from htmx:beforeSwap to htmx:afterSwap event for better error timing
- Simplify event listener setup (removed duplicate handlers)
- Remove 'export {}' statement that was causing syntax errors
- Add proper TypeScript interface for HTMX event details
- Errors now detected after content swap, ensuring accurate error messages
- Toast notifications work correctly for all backend HTTP errors
Resolves JavaScript syntax error on page load and improves error handling.
- Create web/src/ for TypeScript source files
- Create web/static/ for compiled assets and runtime files
- Move input.css and style.css to web/static/
- Add toast.ts - Functional toast notification system
- Add theme.ts - Functional theme management system
- All code uses functional programming (no classes, no OOP)
- TypeScript provides full type safety
Separates frontend code from backend for better organization.
john-okeefe