feat: add font size setting

- Add fontSize to UserSettings interface
- Add font size dropdown in Settings with options from 12px to 22px
- Apply font size to preview content instantly
- Set --reading-font-size CSS variable in Bookmarks when settings change
- Apply font-size variable to .reader-html and .reader-markdown
- Condense code in Bookmarks.tsx to stay under 210 lines (now at 207)

src/components/Bookmarks.tsx

@@ -55,14 +55,16 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   }, [relayPool, activeAccount?.pubkey])
 
   useEffect(() => {
+    const root = document.documentElement.style
     if (settings.defaultViewMode) setViewMode(settings.defaultViewMode)
     if (settings.showUnderlines !== undefined) setShowUnderlines(settings.showUnderlines)
     if (settings.sidebarCollapsed !== undefined) setIsCollapsed(settings.sidebarCollapsed)
     if (settings.highlightsCollapsed !== undefined) setIsHighlightsCollapsed(settings.highlightsCollapsed)
     if (settings.readingFont) {
       loadFont(settings.readingFont)
-      document.documentElement.style.setProperty('--reading-font', getFontFamily(settings.readingFont))
+      root.setProperty('--reading-font', getFontFamily(settings.readingFont))
     }
+    if (settings.fontSize) root.setProperty('--reading-font-size', `${settings.fontSize}px`)
   }, [settings])
 
   const handleFetchBookmarks = async () => {
@@ -119,12 +121,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     setReaderLoading(true)
     setReaderContent(undefined)
     setShowSettings(false)
-    
-    // Collapse sidebar if setting is enabled (default true)
-    if (settings.collapseOnArticleOpen !== false) {
-      setIsCollapsed(true)
-    }
-    
+    if (settings.collapseOnArticleOpen !== false) setIsCollapsed(true)
     try {
       const content = await fetchReadableContent(url)
       setReaderContent(content)

src/components/Settings.tsx

@@ -70,6 +70,23 @@ 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>
+
             <div className="setting-group">
               <label htmlFor="showUnderlines" className="checkbox-label">
                 <input
@@ -87,7 +104,10 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
               <div className="preview-label">Preview</div>
               <div 
                 className="preview-content" 
-                style={{ fontFamily: previewFontFamily }}
+                style={{ 
+                  fontFamily: previewFontFamily,
+                  fontSize: `${localSettings.fontSize || 16}px`
+                }}
               >
                 <h3>The Quick Brown Fox</h3>
                 <p>

src/index.css

@@ -14,6 +14,7 @@
   -webkit-text-size-adjust: 100%;
   
   --reading-font: system-ui, -apple-system, sans-serif;
+  --reading-font-size: 16px;
 }
 
 body {
@@ -527,12 +528,14 @@ body {
   overflow-wrap: break-word;
   word-break: break-word;
   font-family: var(--reading-font);
+  font-size: var(--reading-font-size);
 }
 
 .reader-markdown {
   color: #ddd;
   line-height: 1.7;
   font-family: var(--reading-font);
+  font-size: var(--reading-font-size);
 }
 
 /* Ensure content is left-aligned even if source markup uses center */

src/services/settingsService.ts

@@ -15,6 +15,7 @@ export interface UserSettings {
   sidebarCollapsed?: boolean
   highlightsCollapsed?: boolean
   readingFont?: string
+  fontSize?: number
 }
 
 export async function loadSettings(