From e10ae00a1a214508dd84fdd0dec35673525a5886 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 02:57:04 +0100
Subject: [PATCH] refactor: organize settings into logical groups

- Create three sections: Reading & Display, Layout & Navigation, Startup Preferences
- Add section titles with consistent styling
- Group related settings together:
  - Reading & Display: font, highlight underlines, preview
  - Layout & Navigation: view mode, collapse behavior
  - Startup Preferences: initial sidebar states
- Add section title styling with border and uppercase text
- Better visual hierarchy and organization
---
 src/components/Settings.tsx | 222 +++++++++++++++++++-----------------
 src/index.css               |  19 +++
 2 files changed, 136 insertions(+), 105 deletions(-)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 5d2a1923..2d3ccf07 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -46,120 +46,132 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
       </div>
 
       <div className="settings-content">
-          <div className="setting-group">
-            <label htmlFor="collapseOnArticleOpen" className="checkbox-label">
-              <input
-                id="collapseOnArticleOpen"
-                type="checkbox"
-                checked={localSettings.collapseOnArticleOpen !== false}
-                onChange={(e) => setLocalSettings({ ...localSettings, collapseOnArticleOpen: e.target.checked })}
-                className="setting-checkbox"
-              />
-              <span>Collapse bookmark bar when opening an article</span>
-            </label>
-          </div>
+          <div className="settings-section">
+            <h3 className="section-title">Reading & Display</h3>
+            
+            <div className="setting-group">
+              <label htmlFor="readingFont">Reading Font</label>
+              <select
+                id="readingFont"
+                value={localSettings.readingFont || 'system'}
+                onChange={(e) => setLocalSettings({ ...localSettings, readingFont: e.target.value })}
+                className="setting-select"
+              >
+                <option value="system">System Default</option>
+                <option value="inter">Inter</option>
+                <option value="lora">Lora</option>
+                <option value="merriweather">Merriweather</option>
+                <option value="open-sans">Open Sans</option>
+                <option value="roboto">Roboto</option>
+                <option value="source-serif-4">Source Serif 4</option>
+                <option value="crimson-text">Crimson Text</option>
+                <option value="libre-baskerville">Libre Baskerville</option>
+                <option value="pt-serif">PT Serif</option>
+              </select>
+            </div>
 
-          <div className="setting-group setting-inline">
-            <label>Default View Mode</label>
-            <div className="setting-buttons">
-              <IconButton
-                icon={faList}
-                onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'compact' })}
-                title="Compact list view"
-                ariaLabel="Compact list view"
-                variant={(localSettings.defaultViewMode || 'compact') === 'compact' ? 'primary' : 'ghost'}
-              />
-              <IconButton
-                icon={faThLarge}
-                onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'cards' })}
-                title="Cards view"
-                ariaLabel="Cards view"
-                variant={localSettings.defaultViewMode === 'cards' ? 'primary' : 'ghost'}
-              />
-              <IconButton
-                icon={faImage}
-                onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'large' })}
-                title="Large preview view"
-                ariaLabel="Large preview view"
-                variant={localSettings.defaultViewMode === 'large' ? 'primary' : 'ghost'}
-              />
+            <div className="setting-group">
+              <label htmlFor="showUnderlines" className="checkbox-label">
+                <input
+                  id="showUnderlines"
+                  type="checkbox"
+                  checked={localSettings.showUnderlines !== false}
+                  onChange={(e) => setLocalSettings({ ...localSettings, showUnderlines: e.target.checked })}
+                  className="setting-checkbox"
+                />
+                <span>Show highlight underlines</span>
+              </label>
+            </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. <span className={localSettings.showUnderlines !== false ? "content-highlight" : ""}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> 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>
 
-          <div className="setting-group">
-            <label htmlFor="readingFont">Reading Font</label>
-            <select
-              id="readingFont"
-              value={localSettings.readingFont || 'system'}
-              onChange={(e) => setLocalSettings({ ...localSettings, readingFont: e.target.value })}
-              className="setting-select"
-            >
-              <option value="system">System Default</option>
-              <option value="inter">Inter</option>
-              <option value="lora">Lora</option>
-              <option value="merriweather">Merriweather</option>
-              <option value="open-sans">Open Sans</option>
-              <option value="roboto">Roboto</option>
-              <option value="source-serif-4">Source Serif 4</option>
-              <option value="crimson-text">Crimson Text</option>
-              <option value="libre-baskerville">Libre Baskerville</option>
-              <option value="pt-serif">PT Serif</option>
-            </select>
-          </div>
+          <div className="settings-section">
+            <h3 className="section-title">Layout & Navigation</h3>
+            
+            <div className="setting-group setting-inline">
+              <label>Default View Mode</label>
+              <div className="setting-buttons">
+                <IconButton
+                  icon={faList}
+                  onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'compact' })}
+                  title="Compact list view"
+                  ariaLabel="Compact list view"
+                  variant={(localSettings.defaultViewMode || 'compact') === 'compact' ? 'primary' : 'ghost'}
+                />
+                <IconButton
+                  icon={faThLarge}
+                  onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'cards' })}
+                  title="Cards view"
+                  ariaLabel="Cards view"
+                  variant={localSettings.defaultViewMode === 'cards' ? 'primary' : 'ghost'}
+                />
+                <IconButton
+                  icon={faImage}
+                  onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'large' })}
+                  title="Large preview view"
+                  ariaLabel="Large preview view"
+                  variant={localSettings.defaultViewMode === 'large' ? 'primary' : 'ghost'}
+                />
+              </div>
+            </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. <span className={localSettings.showUnderlines !== false ? "content-highlight" : ""}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> 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 className="setting-group">
+              <label htmlFor="collapseOnArticleOpen" className="checkbox-label">
+                <input
+                  id="collapseOnArticleOpen"
+                  type="checkbox"
+                  checked={localSettings.collapseOnArticleOpen !== false}
+                  onChange={(e) => setLocalSettings({ ...localSettings, collapseOnArticleOpen: e.target.checked })}
+                  className="setting-checkbox"
+                />
+                <span>Collapse bookmark bar when opening an article</span>
+              </label>
             </div>
           </div>
 
-          <div className="setting-group">
-            <label htmlFor="showUnderlines" className="checkbox-label">
-              <input
-                id="showUnderlines"
-                type="checkbox"
-                checked={localSettings.showUnderlines !== false}
-                onChange={(e) => setLocalSettings({ ...localSettings, showUnderlines: e.target.checked })}
-                className="setting-checkbox"
-              />
-              <span>Show highlight underlines</span>
-            </label>
-          </div>
+          <div className="settings-section">
+            <h3 className="section-title">Startup Preferences</h3>
+            
+            <div className="setting-group">
+              <label htmlFor="sidebarCollapsed" className="checkbox-label">
+                <input
+                  id="sidebarCollapsed"
+                  type="checkbox"
+                  checked={localSettings.sidebarCollapsed === true}
+                  onChange={(e) => setLocalSettings({ ...localSettings, sidebarCollapsed: e.target.checked })}
+                  className="setting-checkbox"
+                />
+                <span>Start with bookmarks sidebar collapsed</span>
+              </label>
+            </div>
 
-          <div className="setting-group">
-            <label htmlFor="sidebarCollapsed" className="checkbox-label">
-              <input
-                id="sidebarCollapsed"
-                type="checkbox"
-                checked={localSettings.sidebarCollapsed === true}
-                onChange={(e) => setLocalSettings({ ...localSettings, sidebarCollapsed: e.target.checked })}
-                className="setting-checkbox"
-              />
-              <span>Start with bookmarks sidebar collapsed</span>
-            </label>
-          </div>
-
-          <div className="setting-group">
-            <label htmlFor="highlightsCollapsed" className="checkbox-label">
-              <input
-                id="highlightsCollapsed"
-                type="checkbox"
-                checked={localSettings.highlightsCollapsed === true}
-                onChange={(e) => setLocalSettings({ ...localSettings, highlightsCollapsed: e.target.checked })}
-                className="setting-checkbox"
-              />
-              <span>Start with highlights panel collapsed</span>
-            </label>
+            <div className="setting-group">
+              <label htmlFor="highlightsCollapsed" className="checkbox-label">
+                <input
+                  id="highlightsCollapsed"
+                  type="checkbox"
+                  checked={localSettings.highlightsCollapsed === true}
+                  onChange={(e) => setLocalSettings({ ...localSettings, highlightsCollapsed: e.target.checked })}
+                  className="setting-checkbox"
+                />
+                <span>Start with highlights panel collapsed</span>
+              </label>
+            </div>
           </div>
       </div>
 
diff --git a/src/index.css b/src/index.css
index 92710264..d92ee808 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1458,6 +1458,25 @@ body {
   padding: 0 0.25rem;
 }
 
+.settings-section {
+  margin-bottom: 2.5rem;
+}
+
+.settings-section:last-child {
+  margin-bottom: 0;
+}
+
+.section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #fff;
+  margin: 0 0 1rem 0;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #333;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
 .setting-group {
   margin-bottom: 1.5rem;
   text-align: left;