refactor(ui): move user info to top-right app header

- Create UserHeader component to display user info and logout button
- Move 'Logged in as: user' from sidebar to app-header in top-right
- Remove user info display from BookmarkList and Bookmarks components
- Simplify bookmarks-header layout (only contains collapse button now)
- Update CSS to display user info and logout button inline with proper spacing

src/App.tsx

@@ -4,10 +4,9 @@ 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'
+import UserHeader from './components/UserHeader'
 
 function App() {
   const [eventStore, setEventStore] = useState<EventStore | null>(null)
@@ -66,15 +65,7 @@ function App() {
       <AccountsProvider manager={accountManager}>
         <div className="app">
           {isAuthenticated && (
-            <div className="app-header">
+            <UserHeader onLogout={() => setIsAuthenticated(false)} />
-              <IconButton
-                icon={faRightFromBracket}
-                onClick={() => setIsAuthenticated(false)}
-                title="Logout"
-                ariaLabel="Logout"
-                variant="ghost"
-              />
-            </div>
           )}
           {!isAuthenticated ? (
             <Login onLogin={() => setIsAuthenticated(true)} />

src/components/BookmarkList.tsx

@@ -1,14 +1,12 @@
 import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'
-import { Bookmark, ActiveAccount } from '../types/bookmarks'
+import { Bookmark } from '../types/bookmarks'
 import { BookmarkItem } from './BookmarkItem'
 import { formatDate, renderParsedContent } from '../utils/bookmarkUtils'
 
 interface BookmarkListProps {
   bookmarks: Bookmark[]
-  activeAccount: ActiveAccount | null
-  formatUserDisplay: () => string
   onSelectUrl?: (url: string) => void
   isCollapsed: boolean
   onToggleCollapse: () => void
@@ -16,8 +14,6 @@ interface BookmarkListProps {
 
 export const BookmarkList: React.FC<BookmarkListProps> = ({ 
   bookmarks, 
-  activeAccount, 
-  formatUserDisplay,
   onSelectUrl,
   isCollapsed,
   onToggleCollapse
@@ -40,12 +36,6 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
   return (
     <div className="bookmarks-container">
       <div className="bookmarks-header">
-        <div>
-          {activeAccount && (
-            <p className="user-info">Logged in as: {formatUserDisplay()}</p>
-          )}
-        </div>
-        <div className="header-actions">
         <button 
           onClick={onToggleCollapse}
           className="toggle-sidebar-btn"
@@ -55,7 +45,6 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
           <FontAwesomeIcon icon={faChevronLeft} />
         </button>
       </div>
-      </div>
       
       {bookmarks.length === 0 ? (
         <div className="empty-state">

src/components/Bookmarks.tsx

@@ -1,7 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import { Hooks } from 'applesauce-react'
-import { useEventModel } from 'applesauce-react/hooks'
-import { Models } from 'applesauce-core'
 import { RelayPool } from 'applesauce-relay'
 import { Bookmark } from '../types/bookmarks'
 import { BookmarkList } from './BookmarkList'
@@ -23,9 +21,6 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool }) => {
   const activeAccount = Hooks.useActiveAccount()
   const accountManager = Hooks.useAccountManager()
 
-  // Use ProfileModel to get user profile information
-  const profile = useEventModel(Models.ProfileModel, activeAccount ? [activeAccount.pubkey] : null)
-
   useEffect(() => {
     console.log('Bookmarks useEffect triggered')
     console.log('relayPool:', !!relayPool)
@@ -72,38 +67,9 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool }) => {
 
 
 
-  const formatUserDisplay = () => {
-    if (!activeAccount) return 'Unknown User'
-
-    // Debug profile loading
-    console.log('Profile data:', profile)
-    console.log('Active account pubkey:', activeAccount.pubkey)
-
-    // Use profile data from ProfileModel if available
-    if (profile?.name) {
-      return profile.name
-    }
-    if (profile?.display_name) {
-      return profile.display_name
-    }
-    if (profile?.nip05) {
-      return profile.nip05
-    }
-
-    // Fallback to formatted public key to avoid sticky loading text
-    return `${activeAccount.pubkey.slice(0, 8)}...${activeAccount.pubkey.slice(-8)}`
-  }
-
   if (loading) {
     return (
       <div className="bookmarks-container">
-        <div className="bookmarks-header">
-          <div>
-            {activeAccount && (
-              <p className="user-info">Logged in as: {formatUserDisplay()}</p>
-            )}
-          </div>
-        </div>
         <div className="loading">Loading bookmarks...</div>
       </div>
     )
@@ -114,8 +80,6 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool }) => {
       <div className="pane sidebar">
         <BookmarkList 
           bookmarks={bookmarks}
-          activeAccount={activeAccount || null}
-          formatUserDisplay={formatUserDisplay}
           onSelectUrl={handleSelectUrl}
           isCollapsed={isCollapsed}
           onToggleCollapse={() => setIsCollapsed(!isCollapsed)}

src/components/UserHeader.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Hooks } from 'applesauce-react'
+import { useEventModel } from 'applesauce-react/hooks'
+import { Models } from 'applesauce-core'
+import { faRightFromBracket } from '@fortawesome/free-solid-svg-icons'
+import IconButton from './IconButton'
+
+interface UserHeaderProps {
+  onLogout: () => void
+}
+
+const UserHeader: React.FC<UserHeaderProps> = ({ onLogout }) => {
+  const activeAccount = Hooks.useActiveAccount()
+  const profile = useEventModel(Models.ProfileModel, activeAccount ? [activeAccount.pubkey] : null)
+
+  const formatUserDisplay = () => {
+    if (!activeAccount) return 'Unknown User'
+
+    if (profile?.name) {
+      return profile.name
+    }
+    if (profile?.display_name) {
+      return profile.display_name
+    }
+    if (profile?.nip05) {
+      return profile.nip05
+    }
+
+    return `${activeAccount.pubkey.slice(0, 8)}...${activeAccount.pubkey.slice(-8)}`
+  }
+
+  return (
+    <div className="app-header">
+      <p className="user-info">Logged in as: {formatUserDisplay()}</p>
+      <IconButton
+        icon={faRightFromBracket}
+        onClick={onLogout}
+        title="Logout"
+        ariaLabel="Logout"
+        variant="ghost"
+      />
+    </div>
+  )
+}
+
+export default UserHeader
+

src/index.css

@@ -36,6 +36,13 @@ body {
   top: 1rem;
   right: 2rem;
   z-index: 1000;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.app-header .user-info {
+  margin: 0;
 }
 
 .app header {
@@ -107,28 +114,13 @@ body {
 
 .bookmarks-header {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid #333;
 }
 
-.bookmarks-header > div {
-  flex: 1;
-}
-
-.bookmarks-header h2 {
-  margin: 0;
-  color: #fff;
-}
-
-.header-actions {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-
 .toggle-sidebar-btn {
   background: #2a2a2a;
   color: #ddd;