feat: load default article on startup with collapsed sidebars

- Redirect root path to default article (naddr)
- Start with both sidebars (bookmarks and highlights) collapsed
- Auto-fetch and show highlights for the article author
- No authentication required to view articles
- Highlights panel auto-expands when article loads
- Login page moved to /login route

src/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import { EventStoreProvider, AccountsProvider } from 'applesauce-react'
 import { EventStore } from 'applesauce-core'
 import { AccountManager } from 'applesauce-accounts'
@@ -8,11 +8,12 @@ import { createAddressLoader } from 'applesauce-loaders/loaders'
 import Login from './components/Login'
 import Bookmarks from './components/Bookmarks'
 
+const DEFAULT_ARTICLE = 'naddr1qvzqqqr4gupzqmjxss3dld622uu8q25gywum9qtg4w4cv4064jmg20xsac2aam5nqqxnzd3cxqmrzv3exgmr2wfesgsmew'
+
 function App() {
   const [eventStore, setEventStore] = useState<EventStore | null>(null)
   const [accountManager, setAccountManager] = useState<AccountManager | null>(null)
   const [relayPool, setRelayPool] = useState<RelayPool | null>(null)
-  const [isAuthenticated, setIsAuthenticated] = useState(false)
 
   useEffect(() => {
     // Initialize event store, account manager, and relay pool
@@ -71,20 +72,12 @@ function App() {
                 element={
                   <Bookmarks 
                     relayPool={relayPool}
-                    onLogout={() => setIsAuthenticated(false)}
+                    onLogout={() => {}}
                   />
                 } 
               />
-              <Route path="/" element={
-                !isAuthenticated ? (
-                  <Login onLogin={() => setIsAuthenticated(true)} />
-                ) : (
-                  <Bookmarks 
-                    relayPool={relayPool}
-                    onLogout={() => setIsAuthenticated(false)}
-                  />
-                )
-              } />
+              <Route path="/" element={<Navigate to={`/a/${DEFAULT_ARTICLE}`} replace />} />
+              <Route path="/login" element={<Login onLogin={() => {}} />} />
             </Routes>
           </div>
         </BrowserRouter>

src/components/Bookmarks.tsx

@@ -31,8 +31,8 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   const [selectedUrl, setSelectedUrl] = useState<string | undefined>(undefined)
   const [readerLoading, setReaderLoading] = useState(false)
   const [readerContent, setReaderContent] = useState<ReadableContent | undefined>(undefined)
-  const [isCollapsed, setIsCollapsed] = useState(false)
-  const [isHighlightsCollapsed, setIsHighlightsCollapsed] = useState(false)
+  const [isCollapsed, setIsCollapsed] = useState(true) // Start collapsed
+  const [isHighlightsCollapsed, setIsHighlightsCollapsed] = useState(true) // Start collapsed
   const [viewMode, setViewMode] = useState<ViewMode>('compact')
   const [showUnderlines, setShowUnderlines] = useState(true)
   const [selectedHighlightId, setSelectedHighlightId] = useState<string | undefined>(undefined)
@@ -57,14 +57,27 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
       setReaderContent(undefined)
       setSelectedUrl(`nostr:${naddr}`) // Use naddr as the URL identifier
       setIsCollapsed(true)
+      setIsHighlightsCollapsed(false) // Show highlights for the article
       
       try {
         const article = await fetchArticleByNaddr(relayPool, naddr)
         setReaderContent({
           title: article.title,
           markdown: article.markdown,
+          image: article.image,
           url: `nostr:${naddr}`
         })
+        
+        // Fetch highlights for this article (using the article author's pubkey)
+        try {
+          setHighlightsLoading(true)
+          const fetchedHighlights = await fetchHighlights(relayPool, article.author)
+          setHighlights(fetchedHighlights)
+        } catch (err) {
+          console.error('Failed to fetch highlights:', err)
+        } finally {
+          setHighlightsLoading(false)
+        }
       } catch (err) {
         console.error('Failed to load article:', err)
         setReaderContent({
@@ -72,6 +85,7 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
           html: `<p>Failed to load article: ${err instanceof Error ? err.message : 'Unknown error'}</p>`,
           url: `nostr:${naddr}`
         })
+        setReaderLoading(false)
       } finally {
         setReaderLoading(false)
       }