✨ Add confirmation modal for config deletion

public/locales/en/settings/general/config-changer.json

@@ -6,6 +6,7 @@
     "pleaseWait": "Please wait until your new config is loaded!"
   },
   "modal": {
+    "copy": {
       "title": "Choose the name of your new config",
       "form": {
         "configName": {
@@ -32,6 +33,15 @@
         }
       }
     },
+    "confirmDeletion": {
+      "title": "Confirm deletion of your config",
+      "warningText": "You're about to delete '<b>{{configName}}</b>'",
+      "text": "Please note, that the deletion is not invertible and your data will be lost permanently. After clicking this button, the file will be permanently deleted from your disk. Make sure to create an adequate backup of your configuration.",
+      "buttons": {
+        "confirm": "Yes, delete '<b>{{configName}}</b>'"
+      }
+    }
+  },
   "buttons": {
     "download": "Download config",
     "delete": {

src/components/Settings/Common/Config/ConfigActions.tsx

@@ -1,9 +1,18 @@
-import { ActionIcon, Center, createStyles, Flex, Text, useMantineTheme } from '@mantine/core';
+import {
+  ActionIcon,
+  Alert,
+  Center,
+  createStyles,
+  Flex,
+  Text,
+  useMantineTheme,
+} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+import { openConfirmModal } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
-import { IconCheck, IconCopy, IconDownload, IconTrash } from '@tabler/icons';
+import { IconAlertTriangle, IconCheck, IconCopy, IconDownload, IconTrash } from '@tabler/icons';
 import fileDownload from 'js-file-download';
-import { useTranslation } from 'next-i18next';
+import { Trans, useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { useDeleteConfigMutation } from '../../../../tools/config/mutations/useDeleteConfigMutation';
@@ -11,7 +20,7 @@ import Tip from '../../../layout/Tip';
 import { CreateConfigCopyModal } from './CreateCopyModal';
 
 export default function ConfigActions() {
-  const { t } = useTranslation(['settings/general/config-changer', 'settings/common']);
+  const { t } = useTranslation(['settings/general/config-changer', 'settings/common', 'common']);
   const [createCopyModalOpened, createCopyModal] = useDisclosure(false);
   const { config } = useConfigContext();
   const { removeConfig } = useConfigStore();
@@ -24,6 +33,32 @@ export default function ConfigActions() {
   };
 
   const handleDeletion = async () => {
+    openConfirmModal({
+      title: t('modal.confirmDeletion.title'),
+      children: (
+        <>
+          <Alert icon={<IconAlertTriangle />} mb="md">
+            <Trans
+              i18nKey="settings/general/config-changer:modal.confirmDeletion.warningText"
+              values={{ configName: config.configProperties.name ?? 'default' }}
+              components={{ b: <b />, code: <code /> }}
+            />
+          </Alert>
+          <Text>{t('modal.confirmDeletion.text')}</Text>
+        </>
+      ),
+      labels: {
+        confirm: (
+          <Trans
+            i18nKey="settings/general/config-changer:modal.confirmDeletion.buttons.confirm"
+            values={{ configName: config.configProperties.name ?? 'default' }}
+            components={{ b: <b />, code: <code /> }}
+          />
+        ),
+        cancel: t('common:cancel'),
+      },
+      zIndex: 201,
+      onConfirm: async () => {
         const response = await mutateAsync();
 
         if (response.message) {
@@ -44,6 +79,8 @@ export default function ConfigActions() {
         });
 
         removeConfig(config?.configProperties.name ?? 'default');
+      },
+    });
   };
 
   const { classes } = useStyles();