Add confirmation modal before deletion

ui/src/pages/settings.tsx

@@ -4,12 +4,20 @@ import { Input } from "@ui/components/ui/input";
 import { Label } from "@ui/components/ui/label";
 import { Textarea } from "@ui/components/ui/textarea";
 import { Avatar, AvatarFallback, AvatarImage } from "@ui/components/ui/avatar";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@ui/components/ui/dialog";
 import { useUser } from "@ui/providers/UserStoreProvider";
 import { useState, useRef } from "react";
 import { TypographyH3, TypographyMuted, TypographySmall } from "@ui/components/ui/typography";
 import { useIntroduction } from "src/hooks/intros";
 import { useRemoveAvatar, useUpdateProfile, useUploadAvatar } from "@ui/hooks/profile";
-import { CameraIcon, Trash2Icon, UploadIcon } from "lucide-react";
+import { CameraIcon, Loader2Icon, Trash2Icon, UploadIcon } from "lucide-react";
 import { toast } from "@ui/lib/toast";
 import { ImageCropDialog } from "@ui/components/ImageCropDialog";
 
@@ -23,7 +31,7 @@ export default function SettingsPage() {
   } = useIntroduction();
   const { mutate: updateProfile, isPending: updateProfilePending } = useUpdateProfile();
   const { mutate: uploadAvatar } = useUploadAvatar();
-  const { mutateAsync: removeAvatar } = useRemoveAvatar();
+  const { mutateAsync: removeAvatar, isPending: removeAvatarPending } = useRemoveAvatar();
 
   const [firstName, setFirstName] = useState(user?.first_name || "");
   const [lastName, setLastName] = useState(user?.last_name || "");
@@ -31,6 +39,7 @@ export default function SettingsPage() {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [imageToCrop, setImageToCrop] = useState<string | null>(null);
   const [isCropDialogOpen, setIsCropDialogOpen] = useState(false);
+  const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -68,13 +77,18 @@ export default function SettingsPage() {
     }
   };
 
-  const handleRemoveAvatar = async () => {
+  const handleRemoveAvatarClick = () => {
+    setIsDeleteConfirmOpen(true);
+  };
+
+  const handleConfirmRemoveAvatar = async () => {
     await removeAvatar();
     setAvatarPreview(null);
     setSelectedFile(null);
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
+    setIsDeleteConfirmOpen(false);
   };
 
   const handleUploadAvatar = () => {
@@ -187,7 +201,7 @@ export default function SettingsPage() {
                         <Button
                           variant="outline"
                           size="sm"
-                          onClick={handleRemoveAvatar}
+                          onClick={handleRemoveAvatarClick}
                           className="gap-2 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950"
                         >
                           <Trash2Icon className="w-4 h-4" />
@@ -306,6 +320,36 @@ export default function SettingsPage() {
           onCropComplete={handleCropComplete}
         />
       )}
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={isDeleteConfirmOpen} onOpenChange={setIsDeleteConfirmOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Supprimer la photo de profil</DialogTitle>
+            <DialogDescription>
+              Êtes-vous sûr de vouloir supprimer votre photo de profil ? Cette action est
+              irréversible.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsDeleteConfirmOpen(false)}>
+              Annuler
+            </Button>
+            <Button
+              variant="outline"
+              onClick={handleConfirmRemoveAvatar}
+              className="gap-2 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950"
+            >
+              {removeAvatarPending ? (
+                <Loader2Icon className="w-4 h-4 animate-spin" />
+              ) : (
+                <Trash2Icon className="w-4 h-4" />
+              )}
+              {removeAvatarPending ? "Suppression..." : "Supprimer"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }