Add robot deletion confirmation dialog

frontend/src/basic/RobotPage/RobotProfile.tsx

@@ -22,6 +22,7 @@ import { genBase62Token } from '../../utils';
 import { LoadingButton } from '@mui/lab';
 import { GarageContext, type UseGarageStoreType } from '../../contexts/GarageContext';
 import { type UseFederationStoreType, FederationContext } from '../../contexts/FederationContext';
+import { DeleteRobotConfirmationDialog } from '../../components/Dialogs';
 
 interface RobotProfileProps {
   robot: Robot;
@@ -48,6 +49,7 @@ const RobotProfile = ({
   const navigate = useNavigate();
 
   const [loading, setLoading] = useState<boolean>(true);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState<boolean>(false);
 
   useEffect(() => {
     const slot = garage.getSlot();
@@ -71,6 +73,20 @@ const RobotProfile = ({
     }
   };
 
+  const handleDeleteRobot = (): void => {
+    setDeleteDialogOpen(true);
+  };
+
+  const handleConfirmDelete = (): void => {
+    garage.deleteSlot();
+    setDeleteDialogOpen(false);
+    if (Object.keys(garage.slots).length < 1) setView('welcome');
+  };
+
+  const handleCancelDelete = (): void => {
+    setDeleteDialogOpen(false);
+  };
+
   const slot = garage.getSlot();
   const robot = slot?.getRobot();
 
@@ -300,13 +316,7 @@ const RobotProfile = ({
               ) : null}
 
               <Grid item>
-                <Button
-                  color='primary'
-                  onClick={() => {
-                    garage.deleteSlot();
-                    if (Object.keys(garage.slots).length < 1) setView('welcome');
-                  }}
-                >
+                <Button color='primary' onClick={handleDeleteRobot}>
                   <DeleteSweep /> <div style={{ width: '0.5em' }} />
                   {t('Delete Robot')}
                 </Button>
@@ -331,6 +341,13 @@ const RobotProfile = ({
           </Grid>
         </Box>
       </Grid>
+
+      <DeleteRobotConfirmationDialog
+        open={deleteDialogOpen}
+        onClose={handleCancelDelete}
+        onConfirm={handleConfirmDelete}
+        robotName={robot?.nickname}
+      />
     </Grid>
   );
 };

frontend/src/components/Dialogs/DeleteRobotConfirmation.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Dialog,
+  DialogTitle,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  Button,
+  Box,
+  Typography,
+} from '@mui/material';
+import { Warning } from '@mui/icons-material';
+
+interface DeleteRobotConfirmationDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  robotName?: string;
+}
+
+const DeleteRobotConfirmationDialog = ({
+  open,
+  onClose,
+  onConfirm,
+  robotName,
+}: DeleteRobotConfirmationDialogProps): React.JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth='sm' fullWidth>
+      <DialogTitle>
+        <Box display='flex' alignItems='center' gap={1}>
+          <Warning color='warning' />
+          {t('Delete Robot?')}
+        </Box>
+      </DialogTitle>
+
+      <DialogContent>
+        <DialogContentText component='div'>
+          <Typography variant='body1' gutterBottom>
+            {robotName
+              ? t('Are you sure you want to permanently delete "{{robotName}}"?', {
+                  robotName,
+                })
+              : t('Are you sure you want to permanently delete this robot?')}
+          </Typography>
+
+          <Typography variant='body2' color='warning.main' sx={{ mt: 2, fontWeight: 'bold' }}>
+            {t('⚠️ This action cannot be undone!')}
+          </Typography>
+
+          <Typography variant='body2' sx={{ mt: 2 }}>
+            {t('Before deleting, make sure you have:')}
+          </Typography>
+
+          <Box component='ul' sx={{ mt: 1, pl: 2 }}>
+            <Typography component='li' variant='body2'>
+              {t('Stored your robot token safely')}
+            </Typography>
+            <Typography component='li' variant='body2'>
+              {t('No active or pending orders')}
+            </Typography>
+            <Typography component='li' variant='body2'>
+              {t('Exported any important data')}
+            </Typography>
+          </Box>
+        </DialogContentText>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={onClose} color='primary'>
+          {t('Cancel')}
+        </Button>
+        <Button onClick={onConfirm} color='error' variant='contained'>
+          {t('Delete Robot')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default DeleteRobotConfirmationDialog;

frontend/src/components/Dialogs/index.ts

@@ -13,3 +13,4 @@ export { default as EnableTelegramDialog } from './EnableTelegram';
 export { default as F2fMapDialog } from './F2fMap';
 export { default as UpdateDialog } from './Update';
 export { default as WarningDialog } from './Warning';
+export { default as DeleteRobotConfirmationDialog } from './DeleteRobotConfirmation';