Commit Graph
6 Commits
Author SHA1 Message Date
john-okeefe 4b524075a7 feat(reader): Update reader template for dynamic initialization and metadata
Update the reader template to support dynamic configuration and manga metadata:

templates/reader_templ.go:
- Remove direct foliate-js/view.js script tag (integrated into reader.js)
- Add foliate-themes.css stylesheet for theming support
- Update initReader() call to accept configuration object with:
  - mediaItemId: Unique media item identifier
  - title: Media item title
  - enablePanelDetection: Boolean for comic/manga panel detection
  - libraryType: Media type for reader initialization
  - formatGroup: Format category (ebook, comic, manga)
  - mangaType: Manga subtype for specialized handling
  - readingDirection: RTL/LTR/vertical reading direction
- Simplify theme to always use tokyo-night (theme handled in JS)

These changes enable the reader to dynamically configure itself based on
media item metadata, supporting enhanced manga reading features and
panel detection for comic formats.
2026-04-13 09:27:01 -04:00
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