feat: integrate event viewer into three-pane layout for /e/:eventId

- Create useEventLoader hook to fetch and display individual events
- Events display in middle pane with metadata (ID, timestamp, kind)
- Integrates with existing Bookmarks three-pane layout
- Remove standalone EventViewer component
- Route /e/:eventId now uses Bookmarks component
- Metadata displayed above event content for context

src/App.tsx

@@ -32,7 +32,6 @@ import { readingProgressController } from './services/readingProgressController'
 import { nostrverseHighlightsController } from './services/nostrverseHighlightsController'
 import { nostrverseWritingsController } from './services/nostrverseWritingsController'
 import { archiveController } from './services/archiveController'
-import EventViewer from './components/EventViewer'
 
 const DEFAULT_ARTICLE = import.meta.env.VITE_DEFAULT_ARTICLE_NADDR || 
   'naddr1qvzqqqr4gupzqmjxss3dld622uu8q25gywum9qtg4w4cv4064jmg20xsac2aam5nqqxnzd3cxqmrzv3exgmr2wfesgsmew'
@@ -352,9 +351,12 @@ function AppRoutes({
       <Route 
         path="/e/:eventId" 
         element={
-          <EventViewer 
+          <Bookmarks 
             relayPool={relayPool}
-            eventStore={eventStore}
+            onLogout={handleLogout}
+            bookmarks={bookmarks}
+            bookmarksLoading={bookmarksLoading}
+            onRefreshBookmarks={handleRefreshBookmarks}
           />
         } 
       />

src/components/Bookmarks.tsx

@@ -13,6 +13,7 @@ import { useHighlightCreation } from '../hooks/useHighlightCreation'
 import { useBookmarksUI } from '../hooks/useBookmarksUI'
 import { useRelayStatus } from '../hooks/useRelayStatus'
 import { useOfflineSync } from '../hooks/useOfflineSync'
+import { useEventLoader } from '../hooks/useEventLoader'
 import { Bookmark } from '../types/bookmarks'
 import ThreePaneLayout from './ThreePaneLayout'
 import Explore from './Explore'
@@ -55,6 +56,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({
   const showMe = location.pathname.startsWith('/me')
   const showProfile = location.pathname.startsWith('/p/')
   const showSupport = location.pathname === '/support'
+  const showEvent = location.pathname.startsWith('/e/')
+  const eventId = showEvent ? location.pathname.slice(3) : undefined
   
   // Extract tab from explore routes
   const exploreTab = location.pathname === '/explore/writings' ? 'writings' : 'highlights'
@@ -255,6 +258,17 @@ const Bookmarks: React.FC<BookmarksProps> = ({
     setCurrentArticleEventId
   })
 
+  // Load event if /e/:eventId route is used
+  useEventLoader({
+    eventId,
+    relayPool,
+    eventStore,
+    setSelectedUrl,
+    setReaderContent,
+    setReaderLoading,
+    setIsCollapsed
+  })
+
   // Classify highlights with levels based on user context
   const classifiedHighlights = useMemo(() => {
     return classifyHighlights(highlights, activeAccount?.pubkey, followedPubkeys)

src/components/EventViewer.css

@@ -1,101 +0,0 @@
-.event-viewer {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background: var(--color-bg);
-  color: var(--color-text);
-}
-
-.event-viewer-header {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  border-bottom: 1px solid var(--color-border);
-  background: var(--color-bg-secondary, var(--color-bg));
-}
-
-.event-viewer-header h1 {
-  margin: 0;
-  font-size: 1.25rem;
-  flex: 1;
-}
-
-.back-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  border: none;
-  background: var(--color-border);
-  color: var(--color-text);
-  border-radius: 0.5rem;
-  cursor: pointer;
-  font-size: 1rem;
-  transition: background-color 0.2s;
-}
-
-.back-button:hover {
-  background: var(--color-text-muted);
-}
-
-.event-viewer-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-  max-width: 100%;
-}
-
-.event-meta {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-  font-size: 0.875rem;
-  color: var(--color-text-muted);
-  flex-wrap: wrap;
-}
-
-.event-id {
-  font-family: monospace;
-}
-
-.event-id code {
-  background: var(--color-border);
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem;
-}
-
-.event-time {
-  white-space: nowrap;
-}
-
-.event-text {
-  font-size: 1rem;
-  line-height: 1.6;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-/* Mobile optimization */
-@media (max-width: 640px) {
-  .event-viewer {
-    height: 100%;
-  }
-
-  .event-viewer-header {
-    padding: 0.75rem;
-  }
-
-  .event-viewer-header h1 {
-    font-size: 1.1rem;
-  }
-
-  .event-viewer-content {
-    padding: 1rem;
-  }
-
-  .event-meta {
-    gap: 0.5rem;
-  }
-}

src/components/EventViewer.tsx

@@ -1,114 +1 @@
-import { useParams, useNavigate } from 'react-router-dom'
-import { useState, useEffect } from 'react'
-import { RelayPool } from 'applesauce-relay'
-import { EventStore } from 'applesauce-core'
-import { Hooks } from 'applesauce-react'
-import { createEventLoader } from 'applesauce-loaders/loaders'
-import { NostrEvent } from 'nostr-tools'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
-import RichContent from './RichContent'
-import './EventViewer.css'
 
-interface EventViewerProps {
-  relayPool: RelayPool
-  eventStore: EventStore | null
-}
-
-export default function EventViewer({ relayPool, eventStore }: EventViewerProps) {
-  const { eventId } = useParams<{ eventId: string }>()
-  const navigate = useNavigate()
-  const [event, setEvent] = useState<NostrEvent | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!eventId || !relayPool || !eventStore) return
-
-    setLoading(true)
-    setError(null)
-
-    // Try to get from event store first
-    const cachedEvent = eventStore.getEvent(eventId)
-    if (cachedEvent) {
-      setEvent(cachedEvent)
-      setLoading(false)
-      return
-    }
-
-    // Otherwise fetch from relays
-    const eventLoader = createEventLoader(relayPool, {
-      eventStore,
-      cacheRequest: true
-    })
-
-    const subscription = eventLoader({ id: eventId }).subscribe({
-      next: (fetchedEvent) => {
-        setEvent(fetchedEvent)
-        setLoading(false)
-      },
-      error: (err) => {
-        console.error('Error fetching event:', err)
-        setError('Failed to load event')
-        setLoading(false)
-      },
-      complete: () => {
-        setLoading(false)
-      }
-    })
-
-    return () => subscription.unsubscribe()
-  }, [eventId, relayPool, eventStore])
-
-  if (loading) {
-    return (
-      <div className="event-viewer">
-        <div className="event-viewer-header">
-          <button className="back-button" onClick={() => navigate(-1)}>
-            <FontAwesomeIcon icon={faArrowLeft} />
-          </button>
-          <h1>Loading event...</h1>
-        </div>
-      </div>
-    )
-  }
-
-  if (error || !event) {
-    return (
-      <div className="event-viewer">
-        <div className="event-viewer-header">
-          <button className="back-button" onClick={() => navigate(-1)}>
-            <FontAwesomeIcon icon={faArrowLeft} />
-          </button>
-          <h1>{error || 'Event not found'}</h1>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="event-viewer">
-      <div className="event-viewer-header">
-        <button className="back-button" onClick={() => navigate(-1)}>
-          <FontAwesomeIcon icon={faArrowLeft} />
-        </button>
-        <h1>Note</h1>
-      </div>
-      
-      <div className="event-viewer-content">
-        <div className="event-meta">
-          <small className="event-id">
-            <code>{eventId?.slice(0, 16)}...</code>
-          </small>
-          <small className="event-time">
-            {new Date(event.created_at * 1000).toLocaleString()}
-          </small>
-        </div>
-
-        <div className="event-text">
-          <RichContent content={event.content} />
-        </div>
-      </div>
-    </div>
-  )
-}

src/hooks/useEventLoader.ts

@@ -0,0 +1,79 @@
+import { useEffect } from 'react'
+import { RelayPool } from 'applesauce-relay'
+import { EventStore } from 'applesauce-core'
+import { createEventLoader } from 'applesauce-loaders/loaders'
+import { NostrEvent } from 'nostr-tools'
+
+interface UseEventLoaderProps {
+  eventId?: string
+  relayPool?: RelayPool | null
+  eventStore?: EventStore | null
+  setSelectedUrl: (url: string) => void
+  setReaderContent: (content: string) => void
+  setReaderLoading: (loading: boolean) => void
+  setIsCollapsed: (collapsed: boolean) => void
+}
+
+export function useEventLoader({
+  eventId,
+  relayPool,
+  eventStore,
+  setSelectedUrl,
+  setReaderContent,
+  setReaderLoading,
+  setIsCollapsed
+}: UseEventLoaderProps) {
+  useEffect(() => {
+    if (!eventId) return
+
+    setReaderLoading(true)
+    setSelectedUrl('')
+    setIsCollapsed(false)
+
+    // Try to get from event store first
+    if (eventStore) {
+      const cachedEvent = eventStore.getEvent(eventId)
+      if (cachedEvent) {
+        displayEvent(cachedEvent)
+        setReaderLoading(false)
+        return
+      }
+    }
+
+    // Otherwise fetch from relays
+    if (!relayPool) {
+      setReaderLoading(false)
+      return
+    }
+
+    const eventLoader = createEventLoader(relayPool, {
+      eventStore,
+      cacheRequest: true
+    })
+
+    const subscription = eventLoader({ id: eventId }).subscribe({
+      next: (event) => {
+        displayEvent(event)
+        setReaderLoading(false)
+      },
+      error: (err) => {
+        console.error('Error fetching event:', err)
+        setReaderContent(`Error loading event: ${err instanceof Error ? err.message : 'Unknown error'}`)
+        setReaderLoading(false)
+      }
+    })
+
+    return () => subscription.unsubscribe()
+  }, [eventId, relayPool, eventStore])
+
+  function displayEvent(event: NostrEvent) {
+    // Format event for display with metadata
+    const meta = `<div style="opacity: 0.6; font-size: 0.9em; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem;">
+      <div>Event ID: <code>${event.id.slice(0, 16)}...</code></div>
+      <div>Posted: ${new Date(event.created_at * 1000).toLocaleString()}</div>
+      <div>Kind: ${event.kind}</div>
+    </div>`
+
+    setReaderContent(meta + event.content)
+  }
+}