From 14a429ca618b19b456617326ccef2693fed97e6c Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 03:18:43 +0100
Subject: [PATCH] feat: replace font size dropdown with icon buttons

- Replace dropdown with visual 'A' buttons at different sizes
- Buttons show the actual size they represent
- Active state highlights selected size
- Consistent with view mode button pattern
- More intuitive and visual UX
---
 src/components/Settings.tsx | 30 +++++++++++++++---------------
 src/index.css               | 27 +++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index d8752aa6..f061d7aa 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -70,21 +70,21 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
               </select>
             </div>
 
-            <div className="setting-group">
-              <label htmlFor="fontSize">Font Size</label>
-              <select
-                id="fontSize"
-                value={localSettings.fontSize || 16}
-                onChange={(e) => setLocalSettings({ ...localSettings, fontSize: parseInt(e.target.value) })}
-                className="setting-select"
-              >
-                <option value="12">12px (Very Small)</option>
-                <option value="14">14px (Small)</option>
-                <option value="16">16px (Medium)</option>
-                <option value="18">18px (Large)</option>
-                <option value="20">20px (Very Large)</option>
-                <option value="22">22px (Extra Large)</option>
-              </select>
+            <div className="setting-group setting-inline">
+              <label>Font Size</label>
+              <div className="setting-buttons">
+                {[14, 16, 18, 20, 22].map(size => (
+                  <button
+                    key={size}
+                    onClick={() => setLocalSettings({ ...localSettings, fontSize: size })}
+                    className={`font-size-btn ${(localSettings.fontSize || 16) === size ? 'active' : ''}`}
+                    title={`${size}px`}
+                    style={{ fontSize: `${size - 2}px` }}
+                  >
+                    A
+                  </button>
+                ))}
+              </div>
             </div>
 
             <div className="setting-group">
diff --git a/src/index.css b/src/index.css
index a1b463b0..559a3955 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1509,6 +1509,33 @@ body {
   gap: 0.5rem;
 }
 
+.font-size-btn {
+  min-width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.5rem;
+  background: transparent;
+  border: 1px solid #444;
+  border-radius: 4px;
+  color: #ccc;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.font-size-btn:hover {
+  background: #333;
+  border-color: #666;
+}
+
+.font-size-btn.active {
+  background: #646cff;
+  border-color: #646cff;
+  color: white;
+}
+
 .setting-preview {
   margin: 1.5rem 0;
   padding: 1rem;