From f808b8325ae9cce02ae594b29bb4a0d18205f097 Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Sat, 9 May 2026 14:00:13 +0800
Subject: [PATCH] feat: wire photo upload/delete changes upward for instant
 page-wide refresh

---
 app/profile/page.tsx                        |  5 +++++
 components/profile/profile-photo-upload.tsx |  5 ++++-
 components/profile/settings-container.tsx   |  3 +++
 components/profile/settings-profile-tab.tsx | 13 +++++++++++--
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index baa1c88..c3ec0eb 100644
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@@ -82,6 +82,10 @@ export default function ProfilePage() {
         return null
     }
 
+    const handleImageChange = (url: string | null) => {
+        setProfile((prev) => (prev ? { ...prev, image: url } : null))
+    }
+
     const tabs: { id: Tab; label: string; icon: typeof Bookmark }[] = [
         { id: "overview", label: "Overview", icon: TrendingUp },
         { id: "saved", label: "Saved Games", icon: Bookmark },
@@ -178,6 +182,7 @@ export default function ProfilePage() {
                                 createdAt={profile.createdAt}
                                 image={profile.image}
                                 userId={profile.id}
+                                onImageChange={handleImageChange}
                             />
                         )}
                     </motion.div>
diff --git a/components/profile/profile-photo-upload.tsx b/components/profile/profile-photo-upload.tsx
index 6764b34..6ad113b 100644
--- a/components/profile/profile-photo-upload.tsx
+++ b/components/profile/profile-photo-upload.tsx
@@ -8,6 +8,7 @@ interface ProfilePhotoUploadProps {
   currentImage: string | null
   userName: string
   userId: string
+  onImageChange?: (url: string | null) => void
 }
 
 const ALLOWED_TYPES = ["image/jpeg", "image/png", "image/webp"]
@@ -22,7 +23,7 @@ function getInitials(name: string): string {
   return name.charAt(0).toUpperCase()
 }
 
-export function ProfilePhotoUpload({ currentImage, userName, userId }: ProfilePhotoUploadProps) {
+export function ProfilePhotoUpload({ currentImage, userName, userId, onImageChange }: ProfilePhotoUploadProps) {
   const [previewUrl, setPreviewUrl] = useState<string | null>(currentImage)
   const [uploadState, setUploadState] = useState<"idle" | "uploading" | "success" | "error">("idle")
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
@@ -89,6 +90,7 @@ export function ProfilePhotoUpload({ currentImage, userName, userId }: ProfilePh
       if (data.url) {
         setPreviewUrl(data.url)
         cleanupTempUrl()
+        onImageChange?.(data.url)
       }
       setUploadState("success")
     } catch (err) {
@@ -139,6 +141,7 @@ export function ProfilePhotoUpload({ currentImage, userName, userId }: ProfilePh
       setPreviewUrl(null)
       setUploadState("idle")
       setErrorMessage(null)
+      onImageChange?.(null)
     } catch (err) {
       setErrorMessage(err instanceof Error ? err.message : "Delete failed")
       setUploadState("error")
diff --git a/components/profile/settings-container.tsx b/components/profile/settings-container.tsx
index 7591ece..7a0a0cf 100644
--- a/components/profile/settings-container.tsx
+++ b/components/profile/settings-container.tsx
@@ -28,6 +28,7 @@ interface SettingsContainerProps {
     createdAt: string
     image?: string | null
     userId: string
+    onImageChange?: (url: string | null) => void
 }
 
 export function SettingsContainer({
@@ -37,6 +38,7 @@ export function SettingsContainer({
     createdAt,
     image,
     userId,
+    onImageChange,
 }: SettingsContainerProps) {
     const [activeSubTab, setActiveSubTab] = useState<SettingsSubTab>("profile")
     const [authMethods, setAuthMethods] = useState<AuthMethods | null>(null)
@@ -126,6 +128,7 @@ export function SettingsContainer({
                         createdAt={createdAt}
                         image={image}
                         userId={userId}
+                        onImageChange={onImageChange}
                     />
                 )}
                 {activeSubTab === "security" && (
diff --git a/components/profile/settings-profile-tab.tsx b/components/profile/settings-profile-tab.tsx
index 9127957..2046daf 100644
--- a/components/profile/settings-profile-tab.tsx
+++ b/components/profile/settings-profile-tab.tsx
@@ -14,9 +14,10 @@ interface SettingsProfileTabProps {
   createdAt: string
   image?: string | null
   userId: string
+  onImageChange?: (url: string | null) => void
 }
 
-export function SettingsProfileTab({ name, email, role, createdAt, image, userId }: SettingsProfileTabProps) {
+export function SettingsProfileTab({ name, email, role, createdAt, image, userId, onImageChange }: SettingsProfileTabProps) {
   const [displayName, setDisplayName] = useState(name)
   const [isSaving, setIsSaving] = useState(false)
   const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null)
@@ -54,7 +55,15 @@ export function SettingsProfileTab({ name, email, role, createdAt, image, userId
       className="space-y-6"
     >
       {/* Profile Photo */}
-      <ProfilePhotoUpload currentImage={image ?? null} userName={name} userId={userId} />
+      <ProfilePhotoUpload
+        currentImage={image ?? null}
+        userName={name}
+        userId={userId}
+        onImageChange={async (url) => {
+          onImageChange?.(url)
+          await authClient.updateUser({ image: url ?? "" })
+        }}
+      />
 
       {/* Display Name */}
       <div className="rounded-xl border border-border bg-text/[0.03] p-5">