click to open profile photo on profile page

packages/app/src/Element/User/Avatar.tsx

@@ -15,9 +15,10 @@ interface AvatarProps {
   image?: string;
   imageOverlay?: ReactNode;
   icons?: ReactNode;
+  className?: string;
 }
 
-const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons }: AvatarProps) => {
+const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons, className }: AvatarProps) => {
   const [url, setUrl] = useState("");
   const { proxy } = useImgProxy();
 
@@ -43,7 +44,7 @@ const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons }: Ava
     <div
       onClick={onClick}
       style={style}
-      className={`avatar${imageOverlay ? " with-overlay" : ""}`}
+      className={`avatar${imageOverlay ? " with-overlay" : ""} ${className ?? ""}`}
       data-domain={domain?.toLowerCase()}
       title={getDisplayName(user, "")}>
       {icons && <div className="icons">{icons}</div>}

packages/app/src/Pages/ProfilePage.tsx

@@ -58,6 +58,7 @@ import { ZapTarget } from "Zapper";
 import { useStatusFeed } from "Feed/StatusFeed";
 
 import messages from "./messages";
+import { SpotlightMediaModal } from "../Element/Deck/SpotlightMedia";
 
 const NOTES = 0;
 const REACTIONS = 1;
@@ -120,6 +121,7 @@ export default function ProfilePage() {
   const isMe = loginPubKey === id;
   const [showLnQr, setShowLnQr] = useState<boolean>(false);
   const [showProfileQr, setShowProfileQr] = useState<boolean>(false);
+  const [showAvatarModal, setShowAvatarModal] = useState<boolean>(false);
   const aboutText = user?.about || "";
   const npub = !id?.startsWith(NostrPrefix.PublicKey) ? hexToBech32(NostrPrefix.PublicKey, id || undefined) : id;
 
@@ -428,7 +430,12 @@ export default function ProfilePage() {
   function avatar() {
     return (
       <div className="avatar-wrapper w-max">
-        <Avatar pubkey={id ?? ""} user={user} />
+        <Avatar
+          pubkey={id ?? ""}
+          user={user}
+          onClick={() => user?.picture && setShowAvatarModal(true)}
+          className="pointer"
+        />
         <div className="profile-actions">
           {renderIcons()}
           {!isMe && id && <FollowButton className="primary" pubkey={id} />}
@@ -520,6 +527,9 @@ export default function ProfilePage() {
         </div>
       </div>
       <div className="main-content">{tabContent()}</div>
+      {user?.picture && showAvatarModal && (
+        <SpotlightMediaModal onClose={() => setShowAvatarModal(false)} images={[user.picture]} idx={0} />
+      )}
     </>
   );
 }