feat(explore): scroll to highlight and open sidebar on click

- Pass highlight ID and openHighlights flag via navigation state
- Add useEffect in Bookmarks to handle navigation state
- Open highlights sidebar when clicking highlight from explore
- Auto-scroll to selected highlight (handled by useHighlightInteractions)
- Clear state after handling to prevent re-triggering
- Enhanced UX for discovering and reading highlighted content

src/components/Bookmarks.tsx

@@ -31,6 +31,9 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   const navigate = useNavigate()
   const previousLocationRef = useRef<string>()
   
+  // Check for highlight navigation state
+  const navigationState = location.state as { highlightId?: string; openHighlights?: boolean } | null
+  
   const externalUrl = location.pathname.startsWith('/r/') 
     ? decodeURIComponent(location.pathname.slice(3))
     : undefined
@@ -128,6 +131,19 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location.pathname])
 
+  // Handle highlight navigation from explore page
+  useEffect(() => {
+    if (navigationState?.highlightId && navigationState?.openHighlights) {
+      // Open the highlights sidebar
+      setIsHighlightsCollapsed(false)
+      // Select the highlight (scroll happens automatically in useHighlightInteractions)
+      setSelectedHighlightId(navigationState.highlightId)
+      
+      // Clear the state after handling to avoid re-triggering
+      navigate(location.pathname, { replace: true, state: {} })
+    }
+  }, [navigationState, setIsHighlightsCollapsed, setSelectedHighlightId, navigate, location.pathname])
+
   const {
     bookmarks,
     bookmarksLoading,

src/components/Explore.tsx

@@ -219,15 +219,15 @@ const Explore: React.FC<ExploreProps> = ({ relayPool, activeTab: propActiveTab }
           pubkey,
           identifier
         })
-        navigate(`/a/${naddr}`)
+        navigate(`/a/${naddr}`, { state: { highlightId, openHighlights: true } })
       } else {
         // Already an naddr
-        navigate(`/a/${highlight.eventReference}`)
+        navigate(`/a/${highlight.eventReference}`, { state: { highlightId, openHighlights: true } })
       }
     } 
     // For web URLs
     else if (highlight.urlReference) {
-      navigate(`/r/${encodeURIComponent(highlight.urlReference)}`)
+      navigate(`/r/${encodeURIComponent(highlight.urlReference)}`, { state: { highlightId, openHighlights: true } })
     }
   }