refactor: merge Layout & Navigation and Startup & Behavior into Layout & Behavior section

src/components/Settings.tsx

@@ -6,8 +6,7 @@ import IconButton from './IconButton'
 import { loadFont } from '../utils/fontLoader'
 import ThemeSettings from './Settings/ThemeSettings'
 import ReadingDisplaySettings from './Settings/ReadingDisplaySettings'
-import LayoutNavigationSettings from './Settings/LayoutNavigationSettings'
-import StartupPreferencesSettings from './Settings/StartupPreferencesSettings'
+import LayoutBehaviorSettings from './Settings/LayoutBehaviorSettings'
 import ZapSettings from './Settings/ZapSettings'
 import RelaySettings from './Settings/RelaySettings'
 import PWASettings from './Settings/PWASettings'
@@ -163,8 +162,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
         <ThemeSettings settings={localSettings} onUpdate={handleUpdate} />
         <ReadingDisplaySettings settings={localSettings} onUpdate={handleUpdate} />
         <ZapSettings settings={localSettings} onUpdate={handleUpdate} />
-        <LayoutNavigationSettings settings={localSettings} onUpdate={handleUpdate} />
-        <StartupPreferencesSettings settings={localSettings} onUpdate={handleUpdate} />
+        <LayoutBehaviorSettings settings={localSettings} onUpdate={handleUpdate} />
         <PWASettings settings={localSettings} onUpdate={handleUpdate} onClose={onClose} />
         <RelaySettings relayStatuses={relayStatuses} onClose={onClose} />
       </div>

src/components/Settings/LayoutBehaviorSettings.tsx

@@ -1,16 +1,58 @@
 import React from 'react'
+import { faList, faThLarge, faImage } from '@fortawesome/free-solid-svg-icons'
 import { UserSettings } from '../../services/settingsService'
+import IconButton from '../IconButton'
 
-interface StartupPreferencesSettingsProps {
+interface LayoutBehaviorSettingsProps {
   settings: UserSettings
   onUpdate: (updates: Partial<UserSettings>) => void
 }
 
-const StartupPreferencesSettings: React.FC<StartupPreferencesSettingsProps> = ({ settings, onUpdate }) => {
+const LayoutBehaviorSettings: React.FC<LayoutBehaviorSettingsProps> = ({ settings, onUpdate }) => {
   return (
     <div className="settings-section">
-      <h3 className="section-title">Startup & Behavior</h3>
+      <h3 className="section-title">Layout & Behavior</h3>
       
+      <div className="setting-group setting-inline">
+        <label>Default Bookmark View</label>
+        <div className="setting-buttons">
+          <IconButton 
+            icon={faList} 
+            onClick={() => onUpdate({ defaultViewMode: 'compact' })} 
+            title="Compact list view" 
+            ariaLabel="Compact list view" 
+            variant={(settings.defaultViewMode || 'compact') === 'compact' ? 'primary' : 'ghost'} 
+          />
+          <IconButton 
+            icon={faThLarge} 
+            onClick={() => onUpdate({ defaultViewMode: 'cards' })} 
+            title="Cards view" 
+            ariaLabel="Cards view" 
+            variant={settings.defaultViewMode === 'cards' ? 'primary' : 'ghost'} 
+          />
+          <IconButton 
+            icon={faImage} 
+            onClick={() => onUpdate({ defaultViewMode: 'large' })} 
+            title="Large preview view" 
+            ariaLabel="Large preview view" 
+            variant={settings.defaultViewMode === 'large' ? 'primary' : 'ghost'} 
+          />
+        </div>
+      </div>
+
+      <div className="setting-group">
+        <label htmlFor="collapseOnArticleOpen" className="checkbox-label">
+          <input
+            id="collapseOnArticleOpen"
+            type="checkbox"
+            checked={settings.collapseOnArticleOpen !== false}
+            onChange={(e) => onUpdate({ collapseOnArticleOpen: e.target.checked })}
+            className="setting-checkbox"
+          />
+          <span>Collapse bookmark bar when opening an article</span>
+        </label>
+      </div>
+
       <div className="setting-group">
         <label htmlFor="sidebarCollapsed" className="checkbox-label">
           <input
@@ -66,5 +108,5 @@ const StartupPreferencesSettings: React.FC<StartupPreferencesSettingsProps> = ({
   )
 }
 
-export default StartupPreferencesSettings
+export default LayoutBehaviorSettings
 

src/components/Settings/LayoutNavigationSettings.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-import { faList, faThLarge, faImage } from '@fortawesome/free-solid-svg-icons'
-import { UserSettings } from '../../services/settingsService'
-import IconButton from '../IconButton'
-
-interface LayoutNavigationSettingsProps {
-  settings: UserSettings
-  onUpdate: (updates: Partial<UserSettings>) => void
-}
-
-const LayoutNavigationSettings: React.FC<LayoutNavigationSettingsProps> = ({ settings, onUpdate }) => {
-  return (
-    <div className="settings-section">
-      <h3 className="section-title">Layout & Navigation</h3>
-      
-      <div className="setting-group setting-inline">
-        <label>Default Bookmark View</label>
-        <div className="setting-buttons">
-          <IconButton 
-            icon={faList} 
-            onClick={() => onUpdate({ defaultViewMode: 'compact' })} 
-            title="Compact list view" 
-            ariaLabel="Compact list view" 
-            variant={(settings.defaultViewMode || 'compact') === 'compact' ? 'primary' : 'ghost'} 
-          />
-          <IconButton 
-            icon={faThLarge} 
-            onClick={() => onUpdate({ defaultViewMode: 'cards' })} 
-            title="Cards view" 
-            ariaLabel="Cards view" 
-            variant={settings.defaultViewMode === 'cards' ? 'primary' : 'ghost'} 
-          />
-          <IconButton 
-            icon={faImage} 
-            onClick={() => onUpdate({ defaultViewMode: 'large' })} 
-            title="Large preview view" 
-            ariaLabel="Large preview view" 
-            variant={settings.defaultViewMode === 'large' ? 'primary' : 'ghost'} 
-          />
-        </div>
-      </div>
-
-      <div className="setting-group">
-        <label htmlFor="collapseOnArticleOpen" className="checkbox-label">
-          <input
-            id="collapseOnArticleOpen"
-            type="checkbox"
-            checked={settings.collapseOnArticleOpen !== false}
-            onChange={(e) => onUpdate({ collapseOnArticleOpen: e.target.checked })}
-            className="setting-checkbox"
-          />
-          <span>Collapse bookmark bar when opening an article</span>
-        </label>
-      </div>
-    </div>
-  )
-}
-
-export default LayoutNavigationSettings
-