Refactor: Enhance email change status handling

src/components/settings/AccountProfileTab.tsx

@@ -14,11 +14,12 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { useToast } from '@/hooks/use-toast';
 import { useAuth } from '@/hooks/useAuth';
 import { supabase } from '@/integrations/supabase/client';
-import { User, Upload, Trash2, Mail } from 'lucide-react';
+import { User, Upload, Trash2, Mail, AlertCircle } from 'lucide-react';
 import { PhotoUpload } from '@/components/upload/PhotoUpload';
 import { notificationService } from '@/lib/notificationService';
 import { EmailChangeDialog } from './EmailChangeDialog';
 import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 
 const profileSchema = z.object({
   username: z.string().min(3).max(30).regex(/^[a-zA-Z0-9_-]+$/),
@@ -32,7 +33,7 @@ const profileSchema = z.object({
 type ProfileFormData = z.infer<typeof profileSchema>;
 
 export function AccountProfileTab() {
-  const { user, profile, refreshProfile } = useAuth();
+  const { user, profile, refreshProfile, pendingEmail } = useAuth();
   const { toast } = useToast();
   const [loading, setLoading] = useState(false);
   const [avatarLoading, setAvatarLoading] = useState(false);
@@ -275,13 +276,29 @@ export function AccountProfileTab() {
       <div className="space-y-4">
         <h3 className="text-lg font-medium">Account Information</h3>
         <div className="space-y-4">
+          {pendingEmail && (
+            <Alert className="border-blue-500/20 bg-blue-500/10">
+              <AlertCircle className="h-4 w-4 text-blue-500" />
+              <AlertTitle className="text-blue-500">Email Change in Progress</AlertTitle>
+              <AlertDescription className="text-sm text-muted-foreground">
+                You have a pending email change to <strong>{pendingEmail}</strong>.
+                Please check both your current email ({user?.email}) and new email ({pendingEmail}) for confirmation links.
+                Both must be confirmed to complete the change.
+              </AlertDescription>
+            </Alert>
+          )}
+          
           <div className="p-4 bg-muted/50 rounded-lg space-y-4">
             <div className="flex items-center justify-between">
               <div className="flex-1">
                 <p className="text-sm font-medium">Email Address</p>
                 <div className="flex items-center gap-2 mt-1">
                   <p className="text-sm text-muted-foreground">{user?.email}</p>
-                  {user?.email_confirmed_at ? (
+                  {pendingEmail ? (
+                    <Badge variant="secondary" className="bg-blue-500/10 text-blue-500 border-blue-500/20 text-xs">
+                      Change Pending
+                    </Badge>
+                  ) : user?.email_confirmed_at ? (
                     <Badge variant="secondary" className="text-xs">Verified</Badge>
                   ) : (
                     <Badge variant="outline" className="text-xs">Pending Verification</Badge>
@@ -292,6 +309,7 @@ export function AccountProfileTab() {
                 variant="outline" 
                 size="sm"
                 onClick={() => setShowEmailDialog(true)}
+                disabled={!!pendingEmail}
               >
                 <Mail className="w-4 h-4 mr-2" />
                 Change Email