From f99550f6c8a9b20c05fe92728d24db80a92c4a94 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Thu, 7 May 2026 15:09:06 +0200
Subject: [PATCH] Add pinned profile image support with `next/image` in
 ProfileHeader layout

---
 web/components/profile/profile-info.tsx | 38 ++++++++++++++++++-------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/web/components/profile/profile-info.tsx b/web/components/profile/profile-info.tsx
index e8824bb9..5d44e9cf 100644
--- a/web/components/profile/profile-info.tsx
+++ b/web/components/profile/profile-info.tsx
@@ -2,6 +2,7 @@ import {JSONContent} from '@tiptap/core'
 import {debug} from 'common/logger'
 import {Profile} from 'common/profiles/profile'
 import {UserActivity} from 'common/user'
+import Image from 'next/image'
 import {ProfileAnswers} from 'web/components/answers/profile-answers'
 import {ProfileBio} from 'web/components/bio/profile-bio'
 import {Col} from 'web/components/layout/col'
@@ -72,17 +73,32 @@ export function ProfileInfo(props: {
 
   return (
     <>
-      <ProfileHeader
-        user={user}
-        userActivity={userActivity}
-        profile={profile}
-        simpleView={!!fromProfilePage}
-        starredUserIds={starredUserIds ?? []}
-        refreshStars={refreshStars}
-        showMessageButton={showMessageButton}
-        refreshProfile={refreshProfile}
-        isHiddenFromMe={isHiddenFromMe}
-      />
+      <Row className={'gap-4'}>
+        {profile.pinned_url && (
+          <div className="h-[150px] w-[150px] flex-none snap-start">
+            <Image
+              priority={true}
+              src={profile.pinned_url}
+              height={300}
+              width={300}
+              sizes="(max-width: 640px) 100vw, 300px"
+              alt=""
+              className="h-full cursor-pointer rounded-3xl object-cover"
+            />
+          </div>
+        )}
+        <ProfileHeader
+          user={user}
+          userActivity={userActivity}
+          profile={profile}
+          simpleView={!!fromProfilePage}
+          starredUserIds={starredUserIds ?? []}
+          refreshStars={refreshStars}
+          showMessageButton={showMessageButton}
+          refreshProfile={refreshProfile}
+          isHiddenFromMe={isHiddenFromMe}
+        />
+      </Row>
       {isProfileVisible ? (
         <ProfileContent
           user={user}