From 188de7ab1d84d8b85d672f73a6de4c711a705275 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 14 Oct 2025 11:20:17 +0200
Subject: [PATCH] feat(explore): clicking highlight opens source article in
 reader

- Add handleHighlightClick handler in explore page
- For nostr-native articles: convert eventReference to naddr and navigate to /a/{naddr}
- For web URLs: navigate to /r/{encoded-url}
- Pass onHighlightClick to HighlightItem component
- Users can now click highlights to read the full source content
---
 src/components/Explore.tsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/components/Explore.tsx b/src/components/Explore.tsx
index 934d417e..f3a164b3 100644
--- a/src/components/Explore.tsx
+++ b/src/components/Explore.tsx
@@ -201,6 +201,36 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
     return `/a/${naddr}`
   }
 
+  const handleHighlightClick = (highlightId: string) => {
+    const highlight = highlights.find(h => h.id === highlightId)
+    if (!highlight) return
+
+    // For nostr-native articles
+    if (highlight.eventReference) {
+      // Convert eventReference to naddr
+      if (highlight.eventReference.includes(':')) {
+        const parts = highlight.eventReference.split(':')
+        const kind = parseInt(parts[0])
+        const pubkey = parts[1]
+        const identifier = parts[2] || ''
+        
+        const naddr = nip19.naddrEncode({
+          kind,
+          pubkey,
+          identifier
+        })
+        navigate(`/a/${naddr}`)
+      } else {
+        // Already an naddr
+        navigate(`/a/${highlight.eventReference}`)
+      }
+    } 
+    // For web URLs
+    else if (highlight.urlReference) {
+      navigate(`/r/${encodeURIComponent(highlight.urlReference)}`)
+    }
+  }
+
   const renderTabContent = () => {
     switch (activeTab) {
       case 'writings':
@@ -232,6 +262,7 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
                 key={highlight.id}
                 highlight={highlight}
                 relayPool={relayPool}
+                onHighlightClick={handleHighlightClick}
               />
             ))}
           </div>