Commit Graph
5 Commits
Author SHA1 Message Date
john-okeefe db4de823f3 feat: Update reader template for foliate-js integration
Update reader page template to use foliate-js custom element and add theme selector UI.

Template Changes:
1. Add foliate-js integration:
   - Load foliate-themes.css for reading theme system
   - Load foliate-js/view.js to register <foliate-view> custom element
   - Replace <main id="reader-content"> with <foliate-view id="reader-view">
   - Foliate auto-initializes from the custom element

2. Add Reading Theme selector:
   - New section in settings panel (before Typography)
   - Single dropdown with 18 themes organized by category using <optgroup>
   - Categories: Classic Reading, Sky & Atmosphere, Sunset & Warmth, Nature & Earth, High Performance
   - Each theme shows descriptive name
   - Themes organized for easy discovery (grouped by mood/use case)

3. Remove broken references:
   - Remove ebook-content class (tied to broken CSS columns approach)
   - Clean up old reader-specific CSS class references

Reader Template Structure:
- Chrome (top/bottom bars): Back button, title, settings gear
- Bottom bar: Progress display, TOC/bookmarks/notes buttons, panel editor (comics)
- Settings panel: Chrome behavior, progress mode, reading themes, typography (fonts, spacing)
- TOC panel: Table of contents navigation
- Navigator panel: Page thumbnail with draggable viewport
- Bookmarks panel: User bookmarks with add button
- Dictionary popup: Word definition popup

Template Generator:
- Regenerated reader_templ.go via go generate
- Syncs template changes with Go backend
2026-04-12 12:09:56 -04:00
john-okeefe 74b485faa7 feat(reader): update reader template for module loading and accessibility
- Change main.js script to use type=module for proper ES module loading
- Add reader-fonts.css link for custom reading fonts
- Add tabindex=0 to reader-content for keyboard accessibility
- Fix metadata.MediaItemID reference in back link
- Add panel editor button for comics/manga
2026-04-06 16:02:48 -04:00
john-okeefe 2e0779bec8 chore: add generated reader_templ.go file
This is the generated Go code from templ for the reader template.
The source template reader.templ generates this file during the build process.
2026-04-03 17:21:50 -04:00
john-okeefe b49c036010 chore: remove generated reader_templ.go file
This file is auto-generated by templ from reader.templ source file.
It should not be tracked in version control as it can be regenerated.
2026-04-03 17:21:19 -04:00
john-okeefe bef57f7acd feat: add reader template with dockable panels
- Create templates/reader_templ.go with main Reader() function
- Implement reader shell with top/bottom chrome bars
- Add dockable panels: TOC, Settings (left side)
- Add dockable panels: Navigator, Bookmarks (right side)
- Include panel lock and window-shade toggle buttons
- Support all media types: ebook, comic, manga, pdf
- Initialize reader shell via Alpine.js data attribute
2026-04-03 17:20:16 -04:00