From 36f14811ae5df68af315b33246a02a0949eee931 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sat, 18 Oct 2025 21:47:34 +0200
Subject: [PATCH] refactor: add dedicated Explore section in settings

Create new ExploreSettings component and organize explore-related settings.

Changes:
- Create src/components/Settings/ExploreSettings.tsx
- Move "Default Explore Scope" from ReadingDisplaySettings to ExploreSettings
- Add ExploreSettings to Settings.tsx above Zap Splits section
- Better organization: explore settings now in dedicated section

Settings order:
1. Theme
2. Reading Display
3. Explore (new)
4. Zap Splits
5. Layout & Behavior
6. PWA
7. Relays
---
 src/components/Settings.tsx                   |  2 +
 src/components/Settings/ExploreSettings.tsx   | 59 +++++++++++++++++++
 .../Settings/ReadingDisplaySettings.tsx       | 39 ------------
 3 files changed, 61 insertions(+), 39 deletions(-)
 create mode 100644 src/components/Settings/ExploreSettings.tsx

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 97a4371d..f3001a06 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -6,6 +6,7 @@ import IconButton from './IconButton'
 import { loadFont } from '../utils/fontLoader'
 import ThemeSettings from './Settings/ThemeSettings'
 import ReadingDisplaySettings from './Settings/ReadingDisplaySettings'
+import ExploreSettings from './Settings/ExploreSettings'
 import LayoutBehaviorSettings from './Settings/LayoutBehaviorSettings'
 import ZapSettings from './Settings/ZapSettings'
 import RelaySettings from './Settings/RelaySettings'
@@ -166,6 +167,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, relayPoo
       <div className="settings-content">
         <ThemeSettings settings={localSettings} onUpdate={handleUpdate} />
         <ReadingDisplaySettings settings={localSettings} onUpdate={handleUpdate} />
+        <ExploreSettings settings={localSettings} onUpdate={handleUpdate} />
         <ZapSettings settings={localSettings} onUpdate={handleUpdate} />
         <LayoutBehaviorSettings settings={localSettings} onUpdate={handleUpdate} />
         <PWASettings settings={localSettings} onUpdate={handleUpdate} onClose={onClose} />
diff --git a/src/components/Settings/ExploreSettings.tsx b/src/components/Settings/ExploreSettings.tsx
new file mode 100644
index 00000000..8bb33f8f
--- /dev/null
+++ b/src/components/Settings/ExploreSettings.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import { faNetworkWired, faUserGroup, faUser } from '@fortawesome/free-solid-svg-icons'
+import { UserSettings } from '../../services/settingsService'
+import IconButton from '../IconButton'
+
+interface ExploreSettingsProps {
+  settings: UserSettings
+  onUpdate: (updates: Partial<UserSettings>) => void
+}
+
+const ExploreSettings: React.FC<ExploreSettingsProps> = ({ settings, onUpdate }) => {
+  return (
+    <div className="settings-section">
+      <h3>Explore</h3>
+
+      <div className="setting-group setting-inline">
+        <label>Default Explore Scope</label>
+        <div className="highlight-level-toggles">
+          <IconButton
+            icon={faNetworkWired}
+            onClick={() => onUpdate({ defaultExploreScopeNostrverse: !(settings.defaultExploreScopeNostrverse !== false) })}
+            title="Nostrverse content"
+            ariaLabel="Toggle nostrverse content by default in explore"
+            variant="ghost"
+            style={{ 
+              color: (settings.defaultExploreScopeNostrverse !== false) ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined,
+              opacity: (settings.defaultExploreScopeNostrverse !== false) ? 1 : 0.4
+            }}
+          />
+          <IconButton
+            icon={faUserGroup}
+            onClick={() => onUpdate({ defaultExploreScopeFriends: !(settings.defaultExploreScopeFriends !== false) })}
+            title="Friends content"
+            ariaLabel="Toggle friends content by default in explore"
+            variant="ghost"
+            style={{ 
+              color: (settings.defaultExploreScopeFriends !== false) ? 'var(--highlight-color-friends, #f97316)' : undefined,
+              opacity: (settings.defaultExploreScopeFriends !== false) ? 1 : 0.4
+            }}
+          />
+          <IconButton
+            icon={faUser}
+            onClick={() => onUpdate({ defaultExploreScopeMine: !(settings.defaultExploreScopeMine !== false) })}
+            title="My content"
+            ariaLabel="Toggle my content by default in explore"
+            variant="ghost"
+            style={{ 
+              color: (settings.defaultExploreScopeMine !== false) ? 'var(--highlight-color-mine, #eab308)' : undefined,
+              opacity: (settings.defaultExploreScopeMine !== false) ? 1 : 0.4
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ExploreSettings
+
diff --git a/src/components/Settings/ReadingDisplaySettings.tsx b/src/components/Settings/ReadingDisplaySettings.tsx
index 862e2a1d..15565f79 100644
--- a/src/components/Settings/ReadingDisplaySettings.tsx
+++ b/src/components/Settings/ReadingDisplaySettings.tsx
@@ -98,45 +98,6 @@ const ReadingDisplaySettings: React.FC<ReadingDisplaySettingsProps> = ({ setting
         </div>
       </div>
 
-      <div className="setting-group setting-inline">
-        <label>Default Explore Scope</label>
-        <div className="highlight-level-toggles">
-          <IconButton
-            icon={faNetworkWired}
-            onClick={() => onUpdate({ defaultExploreScopeNostrverse: !(settings.defaultExploreScopeNostrverse !== false) })}
-            title="Nostrverse content"
-            ariaLabel="Toggle nostrverse content by default in explore"
-            variant="ghost"
-            style={{ 
-              color: (settings.defaultExploreScopeNostrverse !== false) ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined,
-              opacity: (settings.defaultExploreScopeNostrverse !== false) ? 1 : 0.4
-            }}
-          />
-          <IconButton
-            icon={faUserGroup}
-            onClick={() => onUpdate({ defaultExploreScopeFriends: !(settings.defaultExploreScopeFriends !== false) })}
-            title="Friends content"
-            ariaLabel="Toggle friends content by default in explore"
-            variant="ghost"
-            style={{ 
-              color: (settings.defaultExploreScopeFriends !== false) ? 'var(--highlight-color-friends, #f97316)' : undefined,
-              opacity: (settings.defaultExploreScopeFriends !== false) ? 1 : 0.4
-            }}
-          />
-          <IconButton
-            icon={faUser}
-            onClick={() => onUpdate({ defaultExploreScopeMine: !(settings.defaultExploreScopeMine !== false) })}
-            title="My content"
-            ariaLabel="Toggle my content by default in explore"
-            variant="ghost"
-            style={{ 
-              color: (settings.defaultExploreScopeMine !== false) ? 'var(--highlight-color-mine, #eab308)' : undefined,
-              opacity: (settings.defaultExploreScopeMine !== false) ? 1 : 0.4
-            }}
-          />
-        </div>
-      </div>
-
       <div className="setting-group setting-inline">
         <label htmlFor="readingFont">Reading Font</label>
         <div className="setting-control">