From bf8dfe79dddb4088f9bb17609e32cfae3384df2b Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 02:53:22 +0100
Subject: [PATCH] feat: add live preview of reading font in settings

- Add preview section showing Lorem Ipsum passage
- Preview updates instantly when font is changed
- Load font dynamically for preview
- Style preview to match reader appearance
- Helps users see font changes before saving
---
 src/components/Settings.tsx | 26 ++++++++++++++++++++++++++
 src/index.css               | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index cecfa696..8e943fa0 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTimes, faSave, faList, faThLarge, faImage } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../services/settingsService'
 import IconButton from './IconButton'
+import { loadFont, getFontFamily } from '../utils/fontLoader'
 
 interface SettingsProps {
   settings: UserSettings
@@ -18,10 +19,19 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
     setLocalSettings(settings)
   }, [settings])
 
+  useEffect(() => {
+    // Load font for preview when it changes
+    if (localSettings.readingFont) {
+      loadFont(localSettings.readingFont)
+    }
+  }, [localSettings.readingFont])
+
   const handleSave = async () => {
     await onSave(localSettings)
   }
 
+  const previewFontFamily = getFontFamily(localSettings.readingFont)
+
   return (
     <div className="settings-view">
       <div className="settings-header">
@@ -97,6 +107,22 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
             </select>
           </div>
 
+          <div className="setting-preview">
+            <div className="preview-label">Preview</div>
+            <div 
+              className="preview-content" 
+              style={{ fontFamily: previewFontFamily }}
+            >
+              <h3>The Quick Brown Fox</h3>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+              </p>
+              <p>
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+              </p>
+            </div>
+          </div>
+
           <div className="setting-group">
             <label htmlFor="showUnderlines" className="checkbox-label">
               <input
diff --git a/src/index.css b/src/index.css
index 61a49b62..92710264 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1487,6 +1487,39 @@ body {
   gap: 0.5rem;
 }
 
+.setting-preview {
+  margin: 1.5rem 0;
+  padding: 1rem;
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 8px;
+}
+
+.preview-label {
+  font-size: 0.875rem;
+  color: #999;
+  margin-bottom: 0.75rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.preview-content {
+  color: #ddd;
+  line-height: 1.7;
+}
+
+.preview-content h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+  color: #fff;
+}
+
+.preview-content p {
+  margin: 0.75rem 0;
+  font-size: 1rem;
+}
+
 .setting-select {
   width: 100%;
   padding: 0.5rem;