diff --git a/src/components/SidebarHeader.tsx b/src/components/SidebarHeader.tsx index 5d583f41..534c6ca8 100644 --- a/src/components/SidebarHeader.tsx +++ b/src/components/SidebarHeader.tsx @@ -1,6 +1,6 @@ import React from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faChevronLeft, faRightFromBracket } from '@fortawesome/free-solid-svg-icons' +import { faChevronLeft, faRightFromBracket, faUser } from '@fortawesome/free-solid-svg-icons' import { Hooks } from 'applesauce-react' import { useEventModel } from 'applesauce-react/hooks' import { Models } from 'applesauce-core' @@ -15,22 +15,20 @@ const SidebarHeader: React.FC = ({ onToggleCollapse, onLogou const activeAccount = Hooks.useActiveAccount() const profile = useEventModel(Models.ProfileModel, activeAccount ? [activeAccount.pubkey] : null) - const formatUserDisplay = () => { + const getProfileImage = () => { + return profile?.picture || null + } + + const getUserDisplayName = () => { 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 - } - + 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)}` } + const profileImage = getProfileImage() + return (
-

Logged in as: {formatUserDisplay()}

+
+ {profileImage ? ( + {getUserDisplayName()} + ) : ( + + )} +