From 4053334f7fb72f05ab2068c15f04a28e47982b27 Mon Sep 17 00:00:00 2001
From: mrwnslz <mrwnslz@pm.me>
Date: Fri, 2 Oct 2026 19:32:32 +0200
Subject: [PATCH] =?UTF-8?q?Reader:=20gr=C3=B6=C3=9Fere=20Standards=20auf?=
 =?UTF-8?q?=20breiten=20Bildschirmen,=20Breite=20bis=20140=20Zeichen=20(SW?=
 =?UTF-8?q?=20v66)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ab 900 px Fensterbreite starten Bücher mit 20 px, Zeilenhöhe 1.6, 90 Zeichen
  Breite und Gewicht 375; Handys behalten 16 / 1.8 / 65 / normal.
- Gespeicherte Einstellungen tragen jetzt v: 2. In älteren gelten Werte, die
  genau dem alten Standard entsprechen, als nie gewählt und weichen dem
  heutigen Standard; bewusst geänderte Werte bleiben.
- Der Breiten-Regler geht bis 140 statt 90 Zeichen.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 static/js/app.js | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index 5ca46fc..822d78b 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -4064,13 +4064,32 @@ function jumpToTocEntry(href) {
 // Reader Settings
 // ---------------------------------------------------------------------------
 
+// Typography defaults. Phones keep the long-standing ones; a wide screen
+// (desktop browser, diora desktop) starts bigger and wider.
+const _READER_TYPE_DEFAULTS_NARROW = { fontSize: 16, lineHeight: 1.8, maxWidth: 65, fontWeight: null };
+const _READER_TYPE_DEFAULTS_WIDE = { fontSize: 20, lineHeight: 1.6, maxWidth: 90, fontWeight: 375 };
+const _READER_WIDTH_MAX = 140; // ch, the width slider's upper end ("Full" stays separate)
+
+function _readerTypeDefaults() {
+  return window.matchMedia('(min-width: 900px)').matches
+    ? _READER_TYPE_DEFAULTS_WIDE : _READER_TYPE_DEFAULTS_NARROW;
+}
+
 function loadReaderSettings(bookId) {
   // Reset to defaults, then apply per-book overrides
-  Object.assign(readerSettings, { fontSize: 16, lineHeight: 1.8, maxWidth: 65, theme: 'dark',
-                                   fontFamily: 'serif', noBold: false, fontWeight: null,
-                                   pdfZoom: 100, pdfInverted: false, pdfPaginated: false, pdfSpread: false });
+  Object.assign(readerSettings, { theme: 'dark', fontFamily: 'serif', noBold: false,
+                                   pdfZoom: 100, pdfInverted: false, pdfPaginated: false, pdfSpread: false },
+                _readerTypeDefaults());
   try {
     const saved = JSON.parse(localStorage.getItem(`diora_reader_settings_${bookId}`) || '{}');
+    // Settings saved before v2 hold every value, changed or not. A value equal
+    // to the old default was never chosen, so it gives way to today's default.
+    if (!saved.v) {
+      for (const [key, old] of Object.entries(_READER_TYPE_DEFAULTS_NARROW)) {
+        if (saved[key] === old) delete saved[key];
+      }
+    }
+    delete saved.v;
     Object.assign(readerSettings, saved);
     if (saved.pdfPaginated === undefined) {
       readerSettings.pdfPaginated = window.innerWidth < 768;
@@ -4080,7 +4099,7 @@ function loadReaderSettings(bookId) {
 
 function saveReaderSettings() {
   if (currentBookId) {
-    localStorage.setItem(`diora_reader_settings_${currentBookId}`, JSON.stringify(readerSettings));
+    localStorage.setItem(`diora_reader_settings_${currentBookId}`, JSON.stringify({ ...readerSettings, v: 2 }));
   }
 }
 
@@ -4170,7 +4189,7 @@ function toggleSettingsPanel() {
     panel.innerHTML = `
       <label>Font <button class="btn btn-sm" id="rs-font-minus">−</button> <input type="range" id="rs-font" min="12" max="24" step="1" value="${readerSettings.fontSize}"> <button class="btn btn-sm" id="rs-font-plus">+</button> <span id="rs-font-val">${readerSettings.fontSize}px</span></label>
       <label>Line <button class="btn btn-sm" id="rs-line-minus">−</button> <input type="range" id="rs-line" min="12" max="30" step="1" value="${Math.round(readerSettings.lineHeight * 10)}"> <button class="btn btn-sm" id="rs-line-plus">+</button> <span id="rs-line-val">${readerSettings.lineHeight}</span></label>
-      <label>Width <button class="btn btn-sm" id="rs-width-minus">−</button> <input type="range" id="rs-width" min="40" max="90" step="5" value="${readerSettings.maxWidth}"> <button class="btn btn-sm" id="rs-width-plus">+</button> <span id="rs-width-val">${readerSettings.maxWidth}ch</span></label>
+      <label>Width <button class="btn btn-sm" id="rs-width-minus">−</button> <input type="range" id="rs-width" min="40" max="${_READER_WIDTH_MAX}" step="5" value="${Math.min(readerSettings.maxWidth, _READER_WIDTH_MAX)}"> <button class="btn btn-sm" id="rs-width-plus">+</button> <span id="rs-width-val">${readerSettings.maxWidth}ch</span></label>
       <button class="btn btn-sm" id="rs-width-full">Full</button>
       <label>Weight <button class="btn btn-sm" id="rs-weight-minus">−</button> <input type="range" id="rs-weight" min="200" max="800" step="${_readerWeightStep()}" value="${_readerWeight()}"> <button class="btn btn-sm" id="rs-weight-plus">+</button> <span id="rs-weight-val">${_readerWeight()}</span></label>
       <button class="btn btn-sm ${readerSettings.fontFamily === 'serif'    ? 'active' : ''}" data-rs-font="serif">Serif</button>