From 84d3e0df67a9d32762872988be4a765fbcc6b847 Mon Sep 17 00:00:00 2001
From: matt <matt@takoyaki.cool>
Date: Tue, 14 Oct 2025 12:34:09 -0700
Subject: [PATCH] feat: add font size customization with slider control
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented global font size scaling with range slider:
- Adjustable from 80% to 140% in 10% increments
- Slider in Appearance tab with live value display
- Persistent preference saved to localStorage
- Updates CSS custom property --base-font-size
- Scales entire UI proportionally from 11.2px to 19.6px
- Smooth transitions with styled slider thumb
- Live preview as you drag the slider

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/index.html | 19 ++++++++++++++++
 src/main.js    | 40 ++++++++++++++++++++++++++++++++++
 src/styles.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 118 insertions(+)

diff --git a/src/index.html b/src/index.html
index f2610db..a2c62ea 100644
--- a/src/index.html
+++ b/src/index.html
@@ -369,6 +369,25 @@
               <small style="color: var(--text-secondary); margin-top: 4px; display: block;">Adjust message density and spacing</small>
             </div>
 
+            <div class="form-group">
+              <label for="font-size-slider">
+                Font Size: <span id="font-size-value">100%</span>
+              </label>
+              <input
+                type="range"
+                id="font-size-slider"
+                min="80"
+                max="140"
+                value="100"
+                step="10"
+                class="font-size-slider"
+              />
+              <div style="display: flex; justify-content: space-between; margin-top: 4px;">
+                <small style="color: var(--text-secondary);">Small (80%)</small>
+                <small style="color: var(--text-secondary);">Large (140%)</small>
+              </div>
+            </div>
+
             <div class="theme-preview-container">
               <div class="theme-preview-label">Preview</div>
               <div class="theme-preview">
diff --git a/src/main.js b/src/main.js
index 28b2422..1c0ac9a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -170,6 +170,37 @@ function loadSavedViewMode() {
   applyViewMode(savedMode);
 }
 
+// Apply font size
+function applyFontSize(scale) {
+  const root = document.documentElement;
+
+  // Calculate font size based on scale (80-140%)
+  const baseFontSize = 14; // Default base size in px
+  const newFontSize = (baseFontSize * scale) / 100;
+
+  root.style.setProperty('--base-font-size', `${newFontSize}px`);
+  root.style.fontSize = `${newFontSize}px`;
+
+  // Update the display value
+  const fontSizeValue = document.getElementById('font-size-value');
+  if (fontSizeValue) {
+    fontSizeValue.textContent = `${scale}%`;
+  }
+
+  // Store preference
+  localStorage.setItem('claudia-font-size', scale.toString());
+}
+
+// Load saved font size
+function loadSavedFontSize() {
+  const savedSize = parseInt(localStorage.getItem('claudia-font-size') || '100');
+  const fontSizeSlider = document.getElementById('font-size-slider');
+  if (fontSizeSlider) {
+    fontSizeSlider.value = savedSize;
+  }
+  applyFontSize(savedSize);
+}
+
 // Helper function to get avatar URL
 async function getAvatarUrl(avatarFilename) {
   if (!avatarFilename) return null;
@@ -1211,6 +1242,14 @@ function setupAppControls() {
       applyViewMode(e.target.value);
     });
   }
+
+  // Setup font size slider
+  const fontSizeSlider = document.getElementById('font-size-slider');
+  if (fontSizeSlider) {
+    fontSizeSlider.addEventListener('input', (e) => {
+      applyFontSize(parseInt(e.target.value));
+    });
+  }
 }
 
 // Keyboard shortcuts
@@ -1608,6 +1647,7 @@ window.addEventListener('DOMContentLoaded', () => {
   // Load saved preferences before anything else
   loadSavedTheme();
   loadSavedViewMode();
+  loadSavedFontSize();
 
   loadExistingConfig();
 });
diff --git a/src/styles.css b/src/styles.css
index e211e15..052643a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1324,6 +1324,65 @@ body {
   cursor: pointer;
 }
 
+/* Font size slider */
+.font-size-slider {
+  width: 100%;
+  height: 6px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+
+.font-size-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  background: var(--accent);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.font-size-slider::-webkit-slider-thumb:hover {
+  background: var(--accent-hover);
+  transform: scale(1.1);
+}
+
+.font-size-slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  background: var(--accent);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.font-size-slider::-moz-range-thumb:hover {
+  background: var(--accent-hover);
+  transform: scale(1.1);
+}
+
+.font-size-slider::-moz-range-track {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  height: 6px;
+}
+
+#font-size-value {
+  color: var(--accent);
+  font-weight: 600;
+  font-size: 13px;
+}
+
 /* View Mode Styles */
 
 /* Compact Mode */