feat: sync profile data with session and implement visibility-based refetching in ProfileSettingsForm

src/components/settings/ProfileSettingsForm.tsx

@@ -87,8 +87,6 @@ export function ProfileSettingsForm({
   // Track if initial profile fetch is done to avoid re-showing loading spinner
   const hasFetchedRef = useRef(false);
 
-  // Fetch profile data on mount based on user role
-  useEffect(() => {
   const fetchProfile = async () => {
     try {
       // Only show loading spinner on initial fetch, not on session-triggered re-fetches
@@ -107,7 +105,17 @@ export function ProfileSettingsForm({
           phone: profile.phone || '',
         };
         setFormData(profileData);
-          setOriginalData(profileData); // Store original for cancel
+        setOriginalData(profileData);
+
+        // If backend email diverges from session (email change verified in another tab),
+        // refresh the next-auth JWT so header/other places also pick up the new address.
+        if (profile.email && session?.user?.email && profile.email !== session.user.email) {
+          try {
+            await updateSession({ user: { email: profile.email } });
+          } catch {
+            // updateSession is best-effort
+          }
+        }
 
         if (profile.avatar) {
           try {
@@ -122,12 +130,20 @@ export function ProfileSettingsForm({
         const profileData = {
           firstName: profile.firstName || '',
           lastName: profile.lastName || '',
-            career: '', // Users don't have career/agent type
+          career: '',
           email: profile.email || session?.user?.email || '',
           phone: profile.phone || '',
         };
         setFormData(profileData);
-          setOriginalData(profileData); // Store original for cancel
+        setOriginalData(profileData);
+
+        if (profile.email && session?.user?.email && profile.email !== session.user.email) {
+          try {
+            await updateSession({ user: { email: profile.email } });
+          } catch {
+            // best-effort
+          }
+        }
 
         if (profile.avatar) {
           try {
@@ -140,7 +156,6 @@ export function ProfileSettingsForm({
       }
     } catch (err) {
       console.error('Failed to fetch profile:', err);
-        // Use session data as fallback
       if (session?.user) {
         const nameParts = (session.user?.name || '').split(' ');
         setFormData(prev => ({
@@ -159,11 +174,27 @@ export function ProfileSettingsForm({
     }
   };
 
+  // Initial fetch on mount
+  useEffect(() => {
     if (session) {
-      // Skip re-fetching on session changes after initial load (e.g. after updateSession in handleSave)
       if (hasFetchedRef.current) return;
       fetchProfile();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session]);
+
+  // Re-fetch when the tab becomes visible again (e.g. user verified email
+  // change in another tab and returned). Ensures email/phone/avatar stay in
+  // sync with the source of truth.
+  useEffect(() => {
+    const onVisible = () => {
+      if (document.visibilityState === 'visible' && session && hasFetchedRef.current) {
+        fetchProfile();
+      }
+    };
+    document.addEventListener('visibilitychange', onVisible);
+    return () => document.removeEventListener('visibilitychange', onVisible);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [session]);
 
   const handleChange = (field: string, value: string) => {