From 821d280f5cbcff61aad47cb6ee9bef723b73386a Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Mon, 1 Dec 2025 16:09:35 +0100
Subject: [PATCH] Refresh profile pics and make them square

---
 web/components/profile-carousel.tsx           | 28 +++++++++++--------
 web/components/profile/profile-info.tsx       |  2 +-
 .../widgets/editable-photo-grid.tsx           |  2 +-
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/web/components/profile-carousel.tsx b/web/components/profile-carousel.tsx
index 83eec333..8409931d 100644
--- a/web/components/profile-carousel.tsx
+++ b/web/components/profile-carousel.tsx
@@ -15,8 +15,11 @@ import {PlusIcon} from '@heroicons/react/solid'
 import {EditablePhotoGrid} from './widgets/editable-photo-grid'
 import {AddPhotosWidget} from './widgets/add-photos'
 
-export default function ProfileCarousel(props: { profile: Profile }) {
-  const {profile} = props
+export default function ProfileCarousel(props: {
+  profile: Profile,
+  refreshProfile: () => void,
+}) {
+  const {profile, refreshProfile} = props
   const photoNums = profile.photo_urls ? profile.photo_urls.length : 0
 
   const [lightboxUrl, setLightboxUrl] = useState('')
@@ -36,19 +39,20 @@ export default function ProfileCarousel(props: { profile: Profile }) {
       photo_urls: photoUrls,
     })
     setIsEditMode(false)
+    refreshProfile()
   }
 
   if (!currentUser && profile.visibility !== 'public') {
     return (
       <Carousel>
         {profile.pinned_url && (
-          <div className="h-80 w-[250px] flex-none snap-start">
+          <div className="h-[300px] w-[300px] flex-none snap-start">
             <Image
               priority={true}
               src={profile.pinned_url}
-              height={360}
-              width={240}
-              sizes="(max-width: 640px) 100vw, 240px"
+              height={300}
+              width={300}
+              sizes="(max-width: 640px) 100vw, 300px"
               alt=""
               className="h-full cursor-pointer rounded object-cover"
             />
@@ -56,7 +60,7 @@ export default function ProfileCarousel(props: { profile: Profile }) {
         )}
         {photoNums > 0 && (
           <Col
-            className="bg-canvas-100 dark:bg-canvas-0 text-ink-500 relative h-80 w-[250px] flex-none items-center rounded text-6xl ">
+            className="bg-canvas-100 dark:bg-canvas-0 text-ink-500 relative h-[300px] w-[300px] flex-none items-center rounded text-6xl ">
             <Col className=" m-auto items-center gap-1">
               <div className="select-none font-semibold">+{photoNums}</div>
               <SignUpButton
@@ -149,13 +153,13 @@ export default function ProfileCarousel(props: { profile: Profile }) {
       ) : (
         <Carousel>
           {buildArray(profile.pinned_url, profile.photo_urls).map((url, i) => (
-            <div key={url} className="h-80 w-[250px] flex-none snap-start">
+            <div key={url} className="h-[300px] w-[300px] flex-none snap-start">
               <Image
                 priority={i < 3}
                 src={url}
-                height={360}
-                width={240}
-                sizes="(max-width: 640px) 100vw, 240px"
+                height={300}
+                width={300}
+                sizes="(max-width: 640px) 100vw, 300px"
                 alt=""
                 className="h-full cursor-pointer rounded object-cover"
                 onClick={() => {
@@ -167,7 +171,7 @@ export default function ProfileCarousel(props: { profile: Profile }) {
           ))}
           {isCurrentUser && (profile.photo_urls?.length ?? 0) > 1 && (
             <button
-              className="bg-ink-200 text-ink-0 group flex h-80 w-[250px] flex-none cursor-pointer snap-start items-center justify-center rounded ease-in-out"
+              className="bg-ink-200 text-ink-0 group flex h-[300px] w-[300px] flex-none cursor-pointer snap-start items-center justify-center rounded ease-in-out"
               onClick={() => setAddPhotosOpen(true)}
             >
               <PlusIcon className="w-20 transition-all group-hover:w-24"/>
diff --git a/web/components/profile/profile-info.tsx b/web/components/profile/profile-info.tsx
index 56b52158..d9635bf9 100644
--- a/web/components/profile/profile-info.tsx
+++ b/web/components/profile/profile-info.tsx
@@ -176,7 +176,7 @@ function ProfileContent(props: {
         fromProfilePage={fromProfilePage}
         profile={profile}
       />
-      {isProfileVisible && profile.photo_urls && <ProfileCarousel profile={profile}/>}
+      {isProfileVisible && profile.photo_urls && <ProfileCarousel profile={profile} refreshProfile={refreshProfile}/>}
       <ProfileCommentSection
         onUser={user}
         profile={profile}
diff --git a/web/components/widgets/editable-photo-grid.tsx b/web/components/widgets/editable-photo-grid.tsx
index c3ce8733..e6039948 100644
--- a/web/components/widgets/editable-photo-grid.tsx
+++ b/web/components/widgets/editable-photo-grid.tsx
@@ -149,7 +149,7 @@ const PhotoItem = ({
             index === 0 &&
               'after:bg-canvas-50/75 after:absolute after:inset-0 after:[mask-image:radial-gradient(transparent_32px,black_32px)]',
           ]
-        : ['h-[300px] w-[200px]'],
+        : ['h-[300px] w-[300px]'],
       isDragging && 'opacity-50'
     )}
     draggable