feat(reader): webtoon reading mode + brightness/contrast/night filters

Phase 4 of the reader redesign (foliate-js ea268df):

- Webtoon mode for comics: continuous vertical scroll of all pages
  (900px centered column on wide screens), lazy-loaded with a 150%
  IntersectionObserver margin, far pages unloaded to bound memory
  with stable aspect-ratio placeholders so the scrollbar never jumps.
  Chosen per book (Paged | Webtoon segmented control in Settings →
  Layout & Display; stored in localStorage per media item since a
  webtoon title and a paged manga volume want different flows).
  Toggling reloads the reader — the renderer is chosen at open time —
  and progress restores from the saved page. Relocate events flow
  through the same pipeline, so the slider, progress saving, back
  stack, tap zones, and edge zones all work unchanged. Zoom/fit/
  magnifier/spread controls hide in webtoon (natural-width scroll).
- Display filters for fixed-layout: brightness (30-130%) and
  contrast (70-130%) sliders with live preview, plus Night Mode
  (invert) — also a quick row in the ⋯ tools menu. One --fx-filter
  CSS var drives everything: ::part(filter) on foliate-view iframes
  (forwarded via the new exportparts attribute) and the webtoon
  page images alike. Persisted as fx_brightness/fx_contrast/fx_invert
  (types + defaults both sides); Restore Defaults resets them.

internal/services/reader.go

@@ -405,6 +405,9 @@ func (s *ReaderService) getDefaultSettings() map[string]interface{} {
 		"panel_zoom_enabled":   true,
 		"double_page_spread":   true,
 		"pdf_interaction_mode": "select",
+		"fx_brightness":        1,
+		"fx_contrast":          1,
+		"fx_invert":            false,
 		"tap_zones_enabled":    true,
 
 		// Dockable panel defaults

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#1c812e8",
+    "@bookhoard/foliate-js": "git+https://github.com/john-okeefe/foliate-js.git#ea268df",
     "alpinejs": "^3.15.8",
     "chart.js": "^4.5.1",
     "highlight.js": "^11.11.1",

templates/reader.templ

@@ -70,7 +70,7 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm
 			<!-- Reading surface: edge-to-edge. Chrome overlays translucently;
 			     drawers and scrim float above everything. -->
 			<div id="reader-viewport" class="fixed inset-0">
-				<foliate-view id="reader-view" class="block w-full h-full"></foliate-view>
+				<foliate-view id="reader-view" exportparts="filter" class="block w-full h-full"></foliate-view>
 				<!-- Desktop edge page-turn zones: hover to reveal the arrow.
 				     Hidden on touch (tap zones cover that) and while a
 				     fixed-layout page is zoomed (edges belong to content then). -->
@@ -413,8 +413,8 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
 					</svg>
 				</button>
 				<div class="w-px h-6 mx-1 reader-sep"></div>
-				<!-- Fit mode + zoom cluster -->
-				<div class="flex items-center gap-1">
+				<!-- Fit mode + zoom cluster (not applicable in webtoon flow) -->
+				<div class="flex items-center gap-1" x-show="comicFlow !== 'webtoon'">
 					<select
 						@change="applyFitMode($event.target.value)"
 						class="reader-select text-xs px-1.5 py-1 rounded-lg shrink-0"
@@ -458,8 +458,8 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
 					<button :class="interactionMode === 'pan' ? 'active' : ''" @click="setInteractionMode('pan')" title="Pan: drag anywhere to move">Pan</button>
 					<button :class="interactionMode === 'text' ? 'active' : ''" @click="setInteractionMode('text')" title="Text: selection only, never pan (Shift overrides)">Text</button>
 				</div>
-				<!-- Double page spread -->
-				<button @click="toggleSpread()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" :class="doublePageSpread ? 'bg-blue-600 hover:bg-blue-700' : ''" title="Double Page Spread" aria-label="Toggle double page spread">
+				<!-- Double page spread (not applicable in webtoon flow) -->
+				<button x-show="comicFlow !== 'webtoon'" @click="toggleSpread()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" :class="doublePageSpread ? 'bg-blue-600 hover:bg-blue-700' : ''" title="Double Page Spread" aria-label="Toggle double page spread">
 					<svg class="reader-icon" width="20" height="20" aria-hidden="true">
 						<path d="M 3 5 h 6 v 14 h -6 z M 15 5 h 6 v 14 h -6 z"></path>
 					</svg>
@@ -540,7 +540,7 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
 					aria-label="Reader tools"
 					@pointerdown.stop
 				>
-					<div class="reader-tools-row">
+					<div class="reader-tools-row" x-show="comicFlow !== 'webtoon'">
 						<span>Zoom</span>
 						<div class="flex items-center gap-1">
 							<button @click="zoomOut()" class="reader-popover-btn" title="Zoom out">−</button>
@@ -548,7 +548,7 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
 							<button @click="zoomIn()" class="reader-popover-btn" title="Zoom in">+</button>
 						</div>
 					</div>
-					<div class="reader-tools-row">
+					<div class="reader-tools-row" x-show="comicFlow !== 'webtoon'">
 						<span>Fit</span>
 						<select
 							@change="applyFitMode($event.target.value)"
@@ -559,14 +559,18 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
 							<option value="fit-width">Fit Width</option>
 						</select>
 					</div>
-					<div class="reader-tools-row">
+					<div class="reader-tools-row" x-show="comicFlow !== 'webtoon'">
 						<span>Page position</span>
 						<button @click="recenterView()" class="reader-popover-btn text-xs px-2" title="Reset pan, keep zoom">Recenter</button>
 					</div>
-					<div class="reader-tools-row">
+					<div class="reader-tools-row" x-show="comicFlow !== 'webtoon'">
 						<span>Magnifier</span>
 						<button @click="toggleMagnifier()" class="reader-popover-btn text-xs px-2" :class="magnifierEnabled ? 'text-blue-400' : ''" x-text="magnifierEnabled ? 'On' : 'Off'">Off</button>
 					</div>
+					<div class="reader-tools-row" x-show="comicFlow !== 'webtoon'">
+						<span>Night mode</span>
+						<button @click="fxInvert = !fxInvert; applyFxFilter(true)" class="reader-popover-btn text-xs px-2" :class="fxInvert ? 'text-blue-400' : ''" x-text="fxInvert ? 'On' : 'Off'">Off</button>
+					</div>
 					<div class="reader-tools-row" x-show="isPDF">
 						<span>Pointer</span>
 						<div class="reader-seg" role="group" aria-label="Pointer mode">
@@ -575,7 +579,7 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
 							<button :class="interactionMode === 'text' ? 'active' : ''" @click="setInteractionMode('text')">Text</button>
 						</div>
 					</div>
-					<div class="reader-tools-row">
+					<div class="reader-tools-row" x-show="comicFlow !== 'webtoon'">
 						<span>Double page</span>
 						<button @click="toggleSpread()" class="reader-popover-btn text-xs px-2" :class="doublePageSpread ? 'text-blue-400' : ''" x-text="doublePageSpread ? 'On' : 'Off'">Off</button>
 					</div>
@@ -892,10 +896,31 @@ templ ReaderSettingsDrawer() {
 				<span class="text-xs" x-text="lineHeight" style="color: var(--text-secondary)">1.6</span>
 			</label>
 		</div>
-		<!-- Layout (fixed-layout only) -->
+		<!-- Layout & display (fixed-layout only) -->
 		<div class="mb-6" x-show="isFixedLayout">
-			<h3 class="font-semibold mb-2">Layout</h3>
+			<h3 class="font-semibold mb-2">Layout &amp; Display</h3>
+			<label class="block mb-3" x-show="isComic">
+				Reading Flow
+				<div class="reader-seg w-full mt-1" role="group" aria-label="Reading flow">
+					<button type="button" class="flex-1" :class="comicFlow !== 'webtoon' ? 'active' : ''" @click="setComicFlow('paged')" title="One page or spread at a time">Paged</button>
+					<button type="button" class="flex-1" :class="comicFlow === 'webtoon' ? 'active' : ''" @click="setComicFlow('webtoon')" title="Continuous vertical scroll (long-strip)">Webtoon</button>
+				</div>
+			</label>
+			<label class="block mb-2">
+				Brightness
+				<input type="range" name="fx_brightness" x-model.number="fxBrightness" @input="applyFxFilter()" @change="applyFxFilter(true)" min="0.3" max="1.3" step="0.05" class="w-full"/>
+				<span class="text-xs" x-text="Math.round(fxBrightness * 100) + '%'" style="color: var(--text-secondary)">100%</span>
+			</label>
+			<label class="block mb-2">
+				Contrast
+				<input type="range" name="fx_contrast" x-model.number="fxContrast" @input="applyFxFilter()" @change="applyFxFilter(true)" min="0.7" max="1.3" step="0.05" class="w-full"/>
+				<span class="text-xs" x-text="Math.round(fxContrast * 100) + '%'" style="color: var(--text-secondary)">100%</span>
+			</label>
 			<label class="flex items-center mb-2">
+				<input type="checkbox" name="fx_invert" x-model="fxInvert" @change="applyFxFilter(true)" class="mr-2"/>
+				Night Mode <span class="text-xs ml-1" style="color: var(--text-secondary)">(invert)</span>
+			</label>
+			<label class="flex items-center mb-2" x-show="comicFlow !== 'webtoon'">
 				<input type="checkbox" name="double_page_spread" x-model="doublePageSpread" @change="applyDoublePageSpread()" class="mr-2"/>
 				Double Page Spread
 			</label>

web/src/reader/reader.ts

@@ -388,6 +388,11 @@ document.addEventListener("alpine:init", () => {
     zoomPercent: 100,
     isFixedLayout: false,
     isPDF: false,
+    isComic: false,
+    comicFlow: "paged" as string,
+    fxBrightness: 1 as number,
+    fxContrast: 1 as number,
+    fxInvert: false as boolean,
     interactionMode: "select" as string,
     magnifierEnabled: false,
     doublePageSpread: true as boolean,
@@ -564,6 +569,14 @@ document.addEventListener("alpine:init", () => {
     }) {
       this.mediaItemId = config.mediaItemId;
       this.bookmarkItems = config.bookmarks ?? [];
+      this.isComic = config.formatGroup === "comic_archive";
+      // Reading flow for comics is a per-book preference (a webtoon title
+      // vs. a paged manga volume); read before the renderer is chosen.
+      this.comicFlow =
+        localStorage.getItem(`bookhoard:comic-flow:${config.mediaItemId}`) ===
+        "webtoon"
+          ? "webtoon"
+          : "paged";
       this.settings = await loadSettings();
       if (this.settings) {
         this.progressMode = this.settings.progress_mode || "pages";
@@ -581,6 +594,9 @@ document.addEventListener("alpine:init", () => {
         if (mode === "pan" || mode === "text" || mode === "select") {
           this.interactionMode = mode;
         }
+        this.fxBrightness = this.settings.fx_brightness || 1;
+        this.fxContrast = this.settings.fx_contrast || 1;
+        this.fxInvert = this.settings.fx_invert ?? false;
         if (this.settings.reading_mode) {
           this.readingMode = this.settings.reading_mode;
         } else {
@@ -592,6 +608,7 @@ document.addEventListener("alpine:init", () => {
       const themeColors =
         this.readingMode === "dark" ? themeSet.dark : themeSet.light;
       viewport.style.backgroundColor = themeColors.bg;
+      this.applyFxFilter();
       this.view = document.getElementById("reader-view") as any;
       await loadFontBlobUrls();
       const resp = await fetch(config.fileUrl, {
@@ -602,6 +619,7 @@ document.addEventListener("alpine:init", () => {
       const file = new File([blob], fileName, { type: blob.type });
       await this.view.open(file, {
         pdf: {},
+        comic: { flow: this.comicFlow },
       });
       this.renderer = this.view.renderer;
       this.book = this.view.book;
@@ -1453,6 +1471,34 @@ document.addEventListener("alpine:init", () => {
       this.renderer.recenter?.();
       this.renderer.dragOffset = { x: 0, y: 0 };
     },
+    // ----- fixed-layout display filters -----
+    // One CSS var drives everything: ::part(filter) on the foliate-view
+    // iframes (comics/PDFs) and the webtoon page images alike.
+    applyFxFilter(save = false) {
+      const viewport = document.getElementById("reader-viewport");
+      if (!viewport) return;
+      const parts = [
+        `brightness(${this.fxBrightness})`,
+        `contrast(${this.fxContrast})`,
+      ];
+      if (this.fxInvert) parts.push("invert(1)");
+      viewport.style.setProperty("--fx-filter", parts.join(" "));
+      if (save) {
+        saveSettings({
+          fx_brightness: this.fxBrightness,
+          fx_contrast: this.fxContrast,
+          fx_invert: this.fxInvert,
+        });
+      }
+    },
+    // Reading flow is chosen before the renderer is created, so toggling
+    // reloads the reader (progress restores from the saved page).
+    setComicFlow(mode: string) {
+      if (mode !== "paged" && mode !== "webtoon") return;
+      if (mode === this.comicFlow) return;
+      localStorage.setItem(`bookhoard:comic-flow:${this.mediaItemId}`, mode);
+      window.location.reload();
+    },
     applyFitMode(mode: string) {
       if (!this.isFixedLayout || !this.renderer) return;
       if (mode === "fit-width" || mode === "fit-page") {
@@ -1919,6 +1965,10 @@ document.addEventListener("alpine:init", () => {
       this.applyChromeBehavior();
       this.interactionMode = "select";
       this.setInteractionMode("select");
+      this.fxBrightness = 1;
+      this.fxContrast = 1;
+      this.fxInvert = false;
+      this.applyFxFilter(true);
       this.applyTheme();
       this.applyFont();
     },

web/src/reader/settings-manager.ts

@@ -80,6 +80,9 @@ export function getDefaultSettings(): ReaderSettings {
     margin_width: 20,
     double_page_spread: true,
     pdf_interaction_mode: "select",
+    fx_brightness: 1,
+    fx_contrast: 1,
+    fx_invert: false,
     tap_zones_enabled: true,
     reading_direction: "ltr",
     hardware_acceleration: true,

web/src/types/reader.d.ts

@@ -209,6 +209,9 @@ interface ReaderSettings {
 
   double_page_spread: boolean;
   pdf_interaction_mode: "select" | "pan" | "text";
+  fx_brightness: number;
+  fx_contrast: number;
+  fx_invert: boolean;
   tap_zones_enabled: boolean;
   reading_direction: "ltr" | "rtl" | "vertical";
   reading_mode: "dark" | "light";

web/static/input.css

@@ -1029,6 +1029,12 @@
     background-color: color-mix(in srgb, currentColor 6%, transparent);
   }
 
+  /* Fixed-layout display filters: one var drives the iframe ::part(filter)
+     (comics/PDFs via foliate-view exportparts) and the webtoon page images. */
+  #reader-view::part(filter) {
+    filter: var(--fx-filter, none);
+  }
+
   /* Page thumbnails grid (contents drawer, fixed-layout) */
   .reader-thumb-grid {
     display: grid;