From 702c001d461c56dde980c8c2061c5ce8fcaa2cb3 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Thu, 9 Oct 2025 12:21:09 +0100
Subject: [PATCH] feat(settings): add educational links about relays in reader
 view

- Add message with links to learn about relays (nostr.how and substack article)
- Links open in Boris's reader view via /r/ route instead of external tabs
- Close settings panel when links are clicked to show the content
- Use react-router navigation for seamless in-app experience
---
 src/components/Settings.tsx               |  2 +-
 src/components/Settings/RelaySettings.tsx | 35 +++++++++++++++++++++--
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 3eb7588b..48edcbbb 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -158,7 +158,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} />
-        <RelaySettings relayStatuses={relayStatuses} />
+        <RelaySettings relayStatuses={relayStatuses} onClose={onClose} />
       </div>
     </div>
   )
diff --git a/src/components/Settings/RelaySettings.tsx b/src/components/Settings/RelaySettings.tsx
index 9c91a2d4..f88aae25 100644
--- a/src/components/Settings/RelaySettings.tsx
+++ b/src/components/Settings/RelaySettings.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCheckCircle, faCircle, faClock } from '@fortawesome/free-solid-svg-icons'
 import { RelayStatus } from '../../services/relayStatusService'
@@ -6,12 +7,19 @@ import { formatDistanceToNow } from 'date-fns'
 
 interface RelaySettingsProps {
   relayStatuses: RelayStatus[]
+  onClose?: () => void
 }
 
-const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses }) => {
+const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses, onClose }) => {
+  const navigate = useNavigate()
   const activeRelays = relayStatuses.filter(r => r.isInPool)
   const recentRelays = relayStatuses.filter(r => !r.isInPool)
 
+  const handleLinkClick = (url: string) => {
+    if (onClose) onClose()
+    navigate(`/r/${encodeURIComponent(url)}`)
+  }
+
   const formatRelayUrl = (url: string) => {
     return url.replace(/^wss?:\/\//, '')
   }
@@ -165,7 +173,7 @@ const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses }) => {
         fontSize: '0.9rem',
         lineHeight: '1.6'
       }}>
-        <p style={{ margin: 0, color: 'var(--text-secondary)' }}>
+        <p style={{ margin: '0 0 0.75rem 0', color: 'var(--text-secondary)' }}>
           Boris works best with a local relay. Consider running{' '}
           <a 
             href="https://github.com/greenart7c3/Citrine?tab=readme-ov-file#download" 
@@ -186,6 +194,29 @@ const RelaySettings: React.FC<RelaySettingsProps> = ({ relayStatuses }) => {
           </a>
           .
         </p>
+        <p style={{ margin: 0, color: 'var(--text-secondary)' }}>
+          Don't know what relays are? Learn more{' '}
+          <a 
+            onClick={(e) => {
+              e.preventDefault()
+              handleLinkClick('https://nostr.how/en/relays')
+            }}
+            style={{ color: 'var(--accent, #8b5cf6)', cursor: 'pointer' }}
+          >
+            here
+          </a>
+          {' and '}
+          <a 
+            onClick={(e) => {
+              e.preventDefault()
+              handleLinkClick('https://davidebtc186.substack.com/p/the-importance-of-hosting-your-own')
+            }}
+            style={{ color: 'var(--accent, #8b5cf6)', cursor: 'pointer' }}
+          >
+            here
+          </a>
+          .
+        </p>
       </div>
     </div>
   )