Updated TASKS-scanning-progress.md Part 1 with critical fixes and
clarifications for implementing the admin page scan button functionality.
Fixes Applied:
- Converted inline JavaScript to TypeScript using existing web/src/admin.ts
- Fixed animation implementation to use TailwindCSS classes instead of custom CSS
- Added missing implementation steps:
* Include admin.js in admin.templ
* Remove old quickScan() function after migration
* Build frontend assets step
- Fixed animation trigger by removing opacity/transform classes that prevented display
- Corrected API endpoint usage (/api/libraries/{id}/scan not /api/scanner/scan)
Root Cause Analysis:
- Original quickScan() sent empty folder_paths array causing 400 errors
- No "scan all libraries" endpoint exists - must scan each library individually
- Frontend had admin.ts but wasn't including it in templates
Implementation Approach:
- Fetch all libraries via GET /api/libraries
- Trigger scan for each library via POST /api/libraries/{id}/scan
- Display consolidated progress UI with animation
- Handle errors gracefully per library
- Use TypeScript for type safety
- Leverage TailwindCSS for all styling (no custom CSS)
Documentation Structure:
- Part 1: Admin scan button implementation (frontend)
- Part 2: Dashboard diagnosis and fixes (to be completed after backend work)
This plan is now ready for implementation after backend progress tracking
is completed (as documented in TASKS-backend-progress-tracking.md).
Created detailed implementation guide (704 lines) for adding real-time progress
reporting to the scanning system, addressing user request to track files_scanned,
new_items, and errors during scan operations.
Problem:
- Current scan API only returns 0% then 100% progress
- No visibility into how many files have been scanned
- No tracking of new items discovered or errors encountered
- Frontend cannot display meaningful progress to users
Solution Overview:
- Extend JobResult with progress details: TotalFiles, FilesScanned, NewItems, Errors
- Add progress callback to MediaScanner for real-time updates
- Implement batching (every 10 files) to reduce mutex contention
- Update scan status API to expose new metrics
- Add comprehensive integration tests using test_helpers.go
Implementation Plan (8 steps):
1. Extend JobResult struct with new fields
2. Add progress callback mechanism to WorkerService
3. Track scan statistics in MediaScanner
4. Report progress in real-time during scan
5. Update scan status API response
6. Update unit tests
7. Add integration tests with test_helpers.go
8. Build and test in container
Key Design Decisions:
- Batch progress updates every 10 files for performance (reduces mutex contention)
- Use callback pattern to decouple scanner from job management
- Maintain backward compatibility with existing scan API
- Follow service layer pattern (no business logic in handlers)
- All integration tests use setupTestServer() from test_helpers.go
Testing Strategy:
- Unit tests for WorkerService progress tracking
- Integration tests for end-to-end scan with progress updates
- Container-only testing for scanner functionality
- Verified against PROJECT_GUIDELINES.md constraints
Document is ready for immediate implementation - all code examples included
and validated against project standards.
Fixed a critical bug where watch mode failed to start automatically during container
initialization, despite comments in app.go:79 claiming it would start "after 2-second delay."
Root Cause:
- StartWatchModeForAllLibraries() function existed but was never invoked
- Comment in app.go claimed watch mode started automatically, but no startup code existed
Changes:
- Added "context" import to internal/router/router.go
- Added goroutine in configureRouter() that:
* Waits 2 seconds after server initialization
* Calls StartWatchModeForAllLibraries() to activate monitoring
* Logs startup status or errors
This ensures watch mode begins scanning for new media files automatically when the
container starts, rather than requiring manual intervention.
Testing: Verified watch mode now activates automatically in container logs.
Remove outdated planning documents that have been implemented or are no
longer relevant. All features have been completed and documented elsewhere.
Removed Files:
- THEME_FIX_PLAN.md
- WOOD_PANELING_FONT_FIX_PLAN.md
- WOOD_PANELING_PLAN.md
Reason:
- Wood paneling feature is complete and in production
- Theme fixes have been implemented
- Font color issues resolved
- Documentation consolidated into TASKS-scanning-progress.md
Migration:
- See TASKS-scanning-progress.md for current implementation plans
- Wood paneling is documented in code comments
- Theme system is functional with multiple color schemes
Impact:
- Cleaner repository structure
- Reduced documentation maintenance burden
- Single source of truth for pending work
Update Bruno environment configuration with current library and job IDs
to support API testing workflows.
Changes:
- Update library_id to current active library
- Update job_id to recent scan job
- Add collection_id variable for collection testing
Variables Updated:
- library_id: 551ac19c-896a-4406-b479-353fc489b295
- job_id: 450094c6-a8f1-4125-aea7-77df80223877
- collection_id: 11e8d915-ef95-4257-98b3-b8eeacfd59b9 (new)
Impact:
- Bruno requests reference current test data
- Supports testing scan functionality
- Enables collection endpoint testing
- Maintains test environment consistency
File: bruno/environments/Bookhoard.yml
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 critical bug where library_id variable was not quoted in the request
body, causing invalid JSON that was rejected by the API parser.
Changes:
- Quote library_id variable: {{library_id}} → "{{library_id}}"
- Add explicit Content-Type header
- Update request body format to use proper YAML multi-line string
Root Cause:
- Unquoted UUID in JSON: {"library_id": 551ac19c-896a-...}
- Produced invalid JSON that failed c.Bind() in scanner handler
- Handler returned 400 "invalid request" error
Impact:
- Bruno requests for scanning now work correctly
- API scan endpoint accepts request successfully
- Enables proper testing of scan functionality via Bruno
Testing:
- Verified scan request completes successfully
- Job ID returned correctly
- Scanner processes files as expected
File: bruno/scanner/Scan Media Items.yml
- 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
- Create comprehensive implementation plan for smart font colors on wood paneling backgrounds
- Addresses readability issues where current theme colors don't contrast well with wood textures
- Includes CSS strategy, TypeScript changes, texture replacements, and testing checklist
- Ready to implement when needed
- 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
- Remove wood themes (wood-light, wood-dark, wood-mahogany) from profile theme selector
- Add wood paneling as separate section in header theme dropdown
- Update script references to include new theme management files
- Change header layout to full-width design
- Replace inline ternary operators with activeClass helper function
- Change layout containers from max-w-7xl to w-full for full-width design
- Update file path references in error messages for better debugging
- Document all available color themes with descriptions
- Explain wood paneling feature and available textures
- Provide step-by-step instructions for changing themes
- Add tips for theme/texture pairing
- Remove max-w-7xl containers from all page templates
- Replace with w-full for full-screen width utilization
- Maintain padding for readability
- Admin templates: modify inner content div only (preserve sidebar layout)
- Remove max-w-7xl constraints from library selector and collections
- Include woodPanelingInit.js script for early paneling application
- Prevent flash of wrong background on page load
- Wood paneling applied only to #collections-container
- 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 theme dropdown
- Wood paneling is now browser-only (localStorage preference)
- Users select wood paneling from header dropdown, not profile
- Profile form only controls server-synced color themes
- 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
- Phase 5: Change line number to structural reference (before closing brace)
- Fix all TypeScript build commands from 'npm run build' to 'npm run build:ts'
- Ensures plan aligns with actual package.json scripts
- Prevents execution failures during implementation
- Add Phase 1b to remove wood themes from profile_form.templ
- Add woodPanelingInit.ts to Phase 2 for early initialization
- Remove inline JavaScript from Phase 7, use TypeScript instead
- Update Critical Requirements to prohibit inline scripts entirely
- Update Files Summary with new files and modifications
- All changes align with PROJECT_GUIDELINES.md requirements
- Add .zed/ to gitignore (Zed editor config)
- Add .opencode/ to gitignore (opencode tool data)
- Remove .zed/settings.json from version control
- Keeps repository clean of IDE-specific files
- Add theme.js script include to header template
- Fixes theme selector not working on pages using Header component
- Ensures applyTheme() is defined before changeThemeTo() calls it
- Update admin.templ to use @AdminSidebar component
- Update admin_library.templ to use @AdminSidebar component
- Update admin_users.templ to use @AdminSidebar component
- Add sidebar layout wrapper to admin_users.templ (previously missing)
- Fix theme rendering to use user.Theme in all admin templates
- Remove duplicated sidebar markup across admin pages
- Create AdminSidebar component for admin panel navigation
- Support active state highlighting based on currentPath
- Consistent navigation across all admin pages
- Replaces duplicated sidebar markup in admin templates
- Add THEME_FIX_PLAN.md: comprehensive plan for theme system consistency
- Add ADMIN_SIDEBAR_PLAN.md: reusable admin sidebar component plan
- Add WOOD_PANELING_PLAN.md: wood paneling and full-width layout plan
- Document root cause of theme flashing issue
- Detail implementation plan for server-side theme rendering
- Include testing checklist and rollback strategy
- Cover wood theme gradient persistence fix
-- Rename 'build' to 'rebuild' for clarity (rebuilds all containers)
-- Rename 'build-force' to 'rebuild-force' for consistency
-- Add 'rebuild-app-force' target for app-only rebuild without cache
-- Add 'rebuild-force-db' target that DELETES database for clean rebuild
-- Improve help text to clarify what each target does
-- Remove circular dependency (rebuild no longer depends on clean)
-- All rebuild targets now preserve database unless explicitly stated
-- Reformat all generated template Go files with consistent indentation
-- Standardize code style across templates/
-- No functional changes, formatting only
-- Generated by templ tool during development
-- 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
- Create bruno/library/browse-folders.yml
- Single manual test case for admin context
- Unit/integration tests cover all scenarios (no auth, user, admin)
- Bruno provides quick manual API contract verification
Fixes: Issue 2 (manual testing)
- Add unit tests in internal/services/library_service_test.go
- Test path traversal protection
- Test non-existent path handling
- Test file vs directory validation
- Test successful directory listing
- Add integration tests in cmd/server/tests/library_browse_test.go
- Use setupTestServer() helper from test_helpers.go
- Test no authentication returns 401
- Test regular user returns 403 forbidden
- Test admin can browse directories
- Test path traversal blocking
- All tests use table-driven approach with t.Run()
Fixes: Issue 2 (tests)
- Add BrowseDirectories() to library service with path traversal protection
- Add BrowseDirectories handler with proper error handling
- Register GET /api/libraries/browse endpoint (admin-only)
- Returns current path, parent path, and list of subdirectories
- Security: blocks "..", validates path exists, checks is directory
Fixes: Issue 2 (backend)
- 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
john-okeefe