refactor: integrate rebroadcast settings into Relays section

- Move rebroadcast checkboxes from separate section into Relays section
- Add plane and globe icons to rebroadcast settings
- Remove separate RelayRebroadcastSettings component
- Settings now flow better with rebroadcast options at top, relay list below
- Maintains all functionality while improving UI organization

src/components/Settings.tsx

@@ -9,7 +9,6 @@ import LayoutNavigationSettings from './Settings/LayoutNavigationSettings'
 import StartupPreferencesSettings from './Settings/StartupPreferencesSettings'
 import ZapSettings from './Settings/ZapSettings'
 import RelaySettings from './Settings/RelaySettings'
-import RelayRebroadcastSettings from './Settings/RelayRebroadcastSettings'
 import { useRelayStatus } from '../hooks/useRelayStatus'
 
 const DEFAULT_SETTINGS: UserSettings = {
@@ -162,8 +161,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
         <LayoutNavigationSettings settings={localSettings} onUpdate={handleUpdate} />
         <StartupPreferencesSettings settings={localSettings} onUpdate={handleUpdate} />
         <ZapSettings settings={localSettings} onUpdate={handleUpdate} />
-        <RelayRebroadcastSettings settings={localSettings} onUpdate={handleUpdate} />
-        <RelaySettings relayStatuses={relayStatuses} onClose={onClose} />
+        <RelaySettings relayStatuses={relayStatuses} settings={localSettings} onUpdate={handleUpdate} onClose={onClose} />
       </div>
     </div>
   )

src/components/Settings/RelayRebroadcastSettings.tsx

@@ -1,71 +0,0 @@
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlane, faGlobe, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
-import { UserSettings } from '../../services/settingsService'
-
-interface RelayRebroadcastSettingsProps {
-  settings: UserSettings
-  onUpdate: (updates: Partial<UserSettings>) => void
-}
-
-const RelayRebroadcastSettings: React.FC<RelayRebroadcastSettingsProps> = ({
-  settings,
-  onUpdate
-}) => {
-  return (
-    <div className="settings-section">
-      <h3>Relay Rebroadcast</h3>
-      
-      <div className="settings-group">
-        <label className="settings-checkbox-label">
-          <input
-            type="checkbox"
-            checked={settings.useLocalRelayAsCache ?? true}
-            onChange={(e) => onUpdate({ useLocalRelayAsCache: e.target.checked })}
-          />
-          <div className="settings-label-content">
-            <div className="settings-label-title">
-              <FontAwesomeIcon icon={faPlane} style={{ marginRight: '0.5rem', color: '#f59e0b' }} />
-              Use local relay(s) as cache
-            </div>
-            <div className="settings-label-description">
-              Rebroadcast articles, bookmarks, and highlights to your local relays when fetched.
-              Helps keep your data available offline.
-            </div>
-          </div>
-        </label>
-      </div>
-
-      <div className="settings-group">
-        <label className="settings-checkbox-label">
-          <input
-            type="checkbox"
-            checked={settings.rebroadcastToAllRelays ?? false}
-            onChange={(e) => onUpdate({ rebroadcastToAllRelays: e.target.checked })}
-          />
-          <div className="settings-label-content">
-            <div className="settings-label-title">
-              <FontAwesomeIcon icon={faGlobe} style={{ marginRight: '0.5rem', color: '#646cff' }} />
-              Rebroadcast events to all relays
-            </div>
-            <div className="settings-label-description">
-              Rebroadcast articles, bookmarks, and highlights to all your relays.
-              Helps propagate content across the nostr network.
-            </div>
-          </div>
-        </label>
-      </div>
-
-      <div className="settings-info-box">
-        <FontAwesomeIcon icon={faInfoCircle} style={{ marginRight: '0.5rem' }} />
-        <div>
-          <strong>Why rebroadcast?</strong> Rebroadcasting helps preserve content and makes it available 
-          on more relays. Local caching ensures you can access your bookmarks and highlights even when offline.
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default RelayRebroadcastSettings
-

src/components/Settings/RelaySettings.tsx

@@ -1,17 +1,20 @@
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCheckCircle, faCircle, faClock, faPlane } from '@fortawesome/free-solid-svg-icons'
+import { faCheckCircle, faCircle, faClock, faPlane, faGlobe } from '@fortawesome/free-solid-svg-icons'
 import { RelayStatus } from '../../services/relayStatusService'
 import { formatDistanceToNow } from 'date-fns'
 import { isLocalRelay } from '../../utils/helpers'
+import { UserSettings } from '../../services/settingsService'
 
 interface RelaySettingsProps {
   relayStatuses: RelayStatus[]
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
   onClose?: () => void
 }
 
-const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses, onClose }) => {
+const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses, settings, onUpdate, onClose }) => {
   const navigate = useNavigate()
   const activeRelays = relayStatuses.filter(r => r.isInPool)
   const recentRelays = relayStatuses.filter(r => !r.isInPool)
@@ -37,6 +40,44 @@ const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses, onClose })
     <div className="settings-section">
       <h3>Relays</h3>
 
+      <div className="settings-group">
+        <label className="settings-checkbox-label">
+          <input
+            type="checkbox"
+            checked={settings.useLocalRelayAsCache ?? true}
+            onChange={(e) => onUpdate({ useLocalRelayAsCache: e.target.checked })}
+          />
+          <div className="settings-label-content">
+            <div className="settings-label-title">
+              <FontAwesomeIcon icon={faPlane} style={{ marginRight: '0.5rem', color: '#f59e0b' }} />
+              Use local relay(s) as cache
+            </div>
+            <div className="settings-label-description">
+              Rebroadcast articles, bookmarks, and highlights to your local relays when fetched
+            </div>
+          </div>
+        </label>
+      </div>
+
+      <div className="settings-group">
+        <label className="settings-checkbox-label">
+          <input
+            type="checkbox"
+            checked={settings.rebroadcastToAllRelays ?? false}
+            onChange={(e) => onUpdate({ rebroadcastToAllRelays: e.target.checked })}
+          />
+          <div className="settings-label-content">
+            <div className="settings-label-title">
+              <FontAwesomeIcon icon={faGlobe} style={{ marginRight: '0.5rem', color: '#646cff' }} />
+              Rebroadcast events to all relays
+            </div>
+            <div className="settings-label-description">
+              Rebroadcast articles, bookmarks, and highlights to all your relays to help propagate content
+            </div>
+          </div>
+        </label>
+      </div>
+
       {activeRelays.length > 0 && (
         <div className="relay-group" style={{ marginBottom: '1.5rem' }}>
           <div className="relay-list">