diff --git a/src/App.tsx b/src/App.tsx index 94bc2646..f3c4b57b 100644 --- a/src/App.tsx +++ b/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(null) @@ -66,15 +65,7 @@ function App() {
{isAuthenticated && ( -
- setIsAuthenticated(false)} - title="Logout" - ariaLabel="Logout" - variant="ghost" - /> -
+ setIsAuthenticated(false)} /> )} {!isAuthenticated ? ( setIsAuthenticated(true)} /> diff --git a/src/components/BookmarkList.tsx b/src/components/BookmarkList.tsx index ae874f00..b0508b9e 100644 --- a/src/components/BookmarkList.tsx +++ b/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 = ({ bookmarks, - activeAccount, - formatUserDisplay, onSelectUrl, isCollapsed, onToggleCollapse @@ -40,21 +36,14 @@ export const BookmarkList: React.FC = ({ return (
-
- {activeAccount && ( -

Logged in as: {formatUserDisplay()}

- )} -
-
- -
+
{bookmarks.length === 0 ? ( diff --git a/src/components/Bookmarks.tsx b/src/components/Bookmarks.tsx index b1fb801f..6b3702c2 100644 --- a/src/components/Bookmarks.tsx +++ b/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' @@ -22,9 +20,6 @@ const Bookmarks: React.FC = ({ relayPool }) => { const [isCollapsed, setIsCollapsed] = useState(false) 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') @@ -72,38 +67,9 @@ const Bookmarks: React.FC = ({ 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 (
-
-
- {activeAccount && ( -

Logged in as: {formatUserDisplay()}

- )} -
-
Loading bookmarks...
) @@ -114,8 +80,6 @@ const Bookmarks: React.FC = ({ relayPool }) => {
setIsCollapsed(!isCollapsed)} diff --git a/src/components/UserHeader.tsx b/src/components/UserHeader.tsx new file mode 100644 index 00000000..ed274c62 --- /dev/null +++ b/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 = ({ 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 ( +
+

Logged in as: {formatUserDisplay()}

+ +
+ ) +} + +export default UserHeader + diff --git a/src/index.css b/src/index.css index e3be0ba1..407e891e 100644 --- a/src/index.css +++ b/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; - align-items: flex-start; - margin-bottom: 2rem; + justify-content: flex-start; + align-items: center; + 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;