refactor(ui): move logout button to top-right of app

- Move logout IconButton from sidebar to App component
- Position logout button fixed at top-right corner
- Remove onLogout prop from Bookmarks and BookmarkList components
- Clean up sidebar header by removing logout button
- Add app-header CSS with fixed positioning and high z-index

src/App.tsx

@@ -4,8 +4,10 @@ import { EventStore } from 'applesauce-core'
 import { AccountManager } from 'applesauce-accounts'
 import { RelayPool } from 'applesauce-relay'
 import { createAddressLoader } from 'applesauce-loaders/loaders'
+import { faRightFromBracket } from '@fortawesome/free-solid-svg-icons'
 import Login from './components/Login'
 import Bookmarks from './components/Bookmarks'
+import IconButton from './components/IconButton'
 
 function App() {
   const [eventStore, setEventStore] = useState<EventStore | null>(null)
@@ -63,13 +65,21 @@ function App() {
     <EventStoreProvider eventStore={eventStore}>
       <AccountsProvider manager={accountManager}>
         <div className="app">
+          {isAuthenticated && (
+            <div className="app-header">
+              <IconButton
+                icon={faRightFromBracket}
+                onClick={() => setIsAuthenticated(false)}
+                title="Logout"
+                ariaLabel="Logout"
+                variant="ghost"
+              />
+            </div>
+          )}
           {!isAuthenticated ? (
             <Login onLogin={() => setIsAuthenticated(true)} />
           ) : (
-            <Bookmarks 
-              relayPool={relayPool}
-              onLogout={() => setIsAuthenticated(false)} 
-            />
+            <Bookmarks relayPool={relayPool} />
           )}
         </div>
       </AccountsProvider>

src/components/BookmarkList.tsx

@@ -1,15 +1,13 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faChevronRight, faRightFromBracket } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'
 import { Bookmark, ActiveAccount } from '../types/bookmarks'
 import { BookmarkItem } from './BookmarkItem'
 import { formatDate, renderParsedContent } from '../utils/bookmarkUtils'
-import IconButton from './IconButton'
 
 interface BookmarkListProps {
   bookmarks: Bookmark[]
   activeAccount: ActiveAccount | null
-  onLogout: () => void
   formatUserDisplay: () => string
   onSelectUrl?: (url: string) => void
   isCollapsed: boolean
@@ -19,7 +17,6 @@ interface BookmarkListProps {
 export const BookmarkList: React.FC<BookmarkListProps> = ({ 
   bookmarks, 
   activeAccount, 
-  onLogout, 
   formatUserDisplay,
   onSelectUrl,
   isCollapsed,
@@ -57,13 +54,6 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
           >
             <FontAwesomeIcon icon={faChevronLeft} />
           </button>
-          <IconButton
-            icon={faRightFromBracket}
-            onClick={onLogout}
-            title="Logout"
-            ariaLabel="Logout"
-            variant="ghost"
-          />
         </div>
       </div>
       

src/components/Bookmarks.tsx

@@ -3,20 +3,17 @@ import { Hooks } from 'applesauce-react'
 import { useEventModel } from 'applesauce-react/hooks'
 import { Models } from 'applesauce-core'
 import { RelayPool } from 'applesauce-relay'
-import { faRightFromBracket } from '@fortawesome/free-solid-svg-icons'
 import { Bookmark } from '../types/bookmarks'
 import { BookmarkList } from './BookmarkList'
 import { fetchBookmarks } from '../services/bookmarkService'
 import ContentPanel from './ContentPanel'
 import { fetchReadableContent, ReadableContent } from '../services/readerService'
-import IconButton from './IconButton'
 
 interface BookmarksProps {
   relayPool: RelayPool | null
-  onLogout: () => void
 }
 
-const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
+const Bookmarks: React.FC<BookmarksProps> = ({ relayPool }) => {
   const [bookmarks, setBookmarks] = useState<Bookmark[]>([])
   const [loading, setLoading] = useState(true)
   const [selectedUrl, setSelectedUrl] = useState<string | undefined>(undefined)
@@ -106,13 +103,6 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
               <p className="user-info">Logged in as: {formatUserDisplay()}</p>
             )}
           </div>
-          <IconButton
-            icon={faRightFromBracket}
-            onClick={onLogout}
-            title="Logout"
-            ariaLabel="Logout"
-            variant="ghost"
-          />
         </div>
         <div className="loading">Loading bookmarks...</div>
       </div>
@@ -125,7 +115,6 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
         <BookmarkList 
           bookmarks={bookmarks}
           activeAccount={activeAccount || null}
-          onLogout={onLogout}
           formatUserDisplay={formatUserDisplay}
           onSelectUrl={handleSelectUrl}
           isCollapsed={isCollapsed}

src/index.css

@@ -28,6 +28,14 @@ body {
 
 .app {
   text-align: center;
+  position: relative;
+}
+
+.app-header {
+  position: fixed;
+  top: 1rem;
+  right: 2rem;
+  z-index: 1000;
 }
 
 .app header {