From 612f88868384a26c2284f111e58b771b0b70365f Mon Sep 17 00:00:00 2001 From: John O'Keefe Date: Fri, 14 Aug 2026 14:59:51 -0400 Subject: [PATCH] feat(reader): immersive chrome, slide-over drawers, tri-state PDF pointer mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Phase 1 of the reader redesign: - Reading surface is edge-to-edge; top/bottom bars overlay translucently (backdrop-blur) instead of reserving insets, killing the inset-coordination bug class entirely. Chrome auto-hides after 2.5s of pointer inactivity (chrome_behavior setting finally wired: auto-hide / always-visible; legacy values map to auto-hide). Pointer activity inside page iframes keeps it awake; Esc toggles. - TOC / Settings / Bookmarks become slide-over drawers with a scrim (z-50, full-height, safe-area aware), replacing the dockable-panel system and its window-shade headers. Only one drawer opens at a time; Esc or scrim click closes. - Bottom bar is contextual: reflowable keeps nav/slider/progress/TOC; fixed-layout row adds Fit Page/Width select, zoom cluster, magnifier (now shows active state), Double Page Spread toggle, and a Smart | Pan | Text segmented control replacing the cryptic two-state icon. Smart = text-aware drag; Text = selection-only (manual smart-detect off); Pan = force pan. Choice persists via pdf_interaction_mode (new setting + foliate 29bc958 'text' mode). - Settings drawer: Behavior (chrome, progress mode), Appearance with 18 Kindle-style theme swatches (single source of truth from THEME_COLORS), Typography, Layout โ€” each scoped by format. - Keyboard: t/s/b open TOC/settings/bookmark, Esc closes drawers before toggling chrome, shortcuts skip form inputs; both slider rows tracked correctly (no duplicate-ID lookups). - Topbar: Back, title, add-bookmark, bookmarks drawer, Aa settings; chrome follows user theme. --- internal/services/reader.go | 25 +- package.json | 2 +- templates/reader.templ | 580 +++++++++++++++-------------- templates/reader_templ.go | 235 ++++++++---- web/src/reader/reader.ts | 198 +++++++--- web/src/reader/settings-manager.ts | 1 + web/src/types/reader.d.ts | 3 +- web/static/input.css | 79 +++- 8 files changed, 678 insertions(+), 445 deletions(-) diff --git a/internal/services/reader.go b/internal/services/reader.go index 69b2919..813328c 100644 --- a/internal/services/reader.go +++ b/internal/services/reader.go @@ -392,18 +392,19 @@ func (s *ReaderService) UpdateSettings( func (s *ReaderService) getDefaultSettings() map[string]interface{} { return map[string]interface{}{ - "chrome_behavior": "auto-hide", - "progress_mode": "pages", - "chrome_theme": "tokyo-night", - "reading_theme": "dark", - "reading_font": "literata", - "font_size": 16, - "line_height": 1.6, - "margin_width": 20, - "tap_zone_size": 30, - "auto_scroll": false, - "panel_zoom_enabled": true, - "double_page_spread": true, + "chrome_behavior": "auto-hide", + "progress_mode": "pages", + "chrome_theme": "tokyo-night", + "reading_theme": "dark", + "reading_font": "literata", + "font_size": 16, + "line_height": 1.6, + "margin_width": 20, + "tap_zone_size": 30, + "auto_scroll": false, + "panel_zoom_enabled": true, + "double_page_spread": true, + "pdf_interaction_mode": "select", // Dockable panel defaults "panel_layout": map[string]interface{}{ diff --git a/package.json b/package.json index 0010e72..5e02b79 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "dev": "npm run build:ts:dev && npm run build:css" }, "dependencies": { - "@bookhoard/foliate-js": "git+https://github.com/john-okeefe/foliate-js.git#d4d87a9", + "@bookhoard/foliate-js": "git+https://github.com/john-okeefe/foliate-js.git#29bc958", "alpinejs": "^3.15.8", "chart.js": "^4.5.1", "highlight.js": "^11.11.1", diff --git a/templates/reader.templ b/templates/reader.templ index 3beb7f7..1b7d8f0 100644 --- a/templates/reader.templ +++ b/templates/reader.templ @@ -67,59 +67,102 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm x-init={ readerInitExpr(metadata, progress, bookmarks) } class={ "theme-" + user.Theme + " h-screen overflow-hidden" } > - @ReaderChrome(user, metadata, progress) - -
- -