feat: enhance config editor with validation and save confirmation

- Added validation to check for valid JSON before saving configurations in the ConfigEditorActionsFeature.
- Introduced a "Save anyway" button with a confirmation modal for saving invalid configurations.
- Updated localization files for English, Persian, and Russian to include new messages related to save confirmation and error handling.

Author: kastov

public/locales/en/remnawave.json

@@ -53,7 +53,13 @@
         "feature": {
             "save": "Save",
             "format": "Format",
-            "copy-config": "Copy config"
+            "copy-config": "Copy config",
+            "failed-to-save-invalid-json": "Failed to save, invalid JSON.",
+            "error": "Error",
+            "save-anyway": "Save anyway",
+            "save-anyway-description": "Are you sure you want to save invalid XRay config? This action\n                                    can lead to unexpected behavior. Continue only if you know what\n                                    you are doing.",
+            "cancel": "Cancel",
+            "save-anyway-title": "Confirm action"
         }
     },
     "use-bandwidth-table-columns": {

public/locales/fa/remnawave.json

@@ -53,7 +53,13 @@
         "feature": {
             "save": "ذخیره",
             "format": "فرمت",
-            "copy-config": "کپی"
+            "copy-config": "کپی",
+            "save-anyway-description": "Are you sure you want to save invalid XRay config? This action\n                                    can lead to unexpected behavior. Continue only if you know what\n                                    you are doing.",
+            "cancel": "Cancel",
+            "save-anyway-title": "Confirm action",
+            "error": "Error",
+            "failed-to-save-invalid-json": "Failed to save, invalid JSON.",
+            "save-anyway": "Save anyway"
         }
     },
     "use-bandwidth-table-columns": {

public/locales/ru/remnawave.json

@@ -53,7 +53,13 @@
         "feature": {
             "save": "Сохранить",
             "format": "Форматировать",
-            "copy-config": "Скопировать"
+            "copy-config": "Скопировать",
+            "save-anyway-description": "Are you sure you want to save invalid XRay config? This action\n                                    can lead to unexpected behavior. Continue only if you know what\n                                    you are doing.",
+            "cancel": "Cancel",
+            "save-anyway-title": "Confirm action",
+            "error": "Error",
+            "failed-to-save-invalid-json": "Failed to save, invalid JSON.",
+            "save-anyway": "Save anyway"
         }
     },
     "use-bandwidth-table-columns": {

src/features/dashboard/config/config-editor-actions/config-editor-actions.feature.tsx

@@ -1,7 +1,9 @@
 import { PiCheck, PiCheckSquareOffset, PiCopy, PiFloppyDisk } from 'react-icons/pi'
+import { notifications } from '@mantine/notifications'
+import { Button, Group, Text } from '@mantine/core'
 import { useTranslation } from 'react-i18next'
-import { Button, Group } from '@mantine/core'
 import { useClipboard } from '@mantine/hooks'
+import { modals } from '@mantine/modals'
 
 import { useUpdateConfig } from '@shared/api/hooks'
 
@@ -24,6 +26,17 @@ export function ConfigEditorActionsFeature(props: Props) {
 
         const currentValue = editorRef.current.getValue()
 
+        try {
+            JSON.parse(currentValue)
+        } catch (error) {
+            notifications.show({
+                color: 'red',
+                message: t('config-editor-actions.feature.failed-to-save-invalid-json'),
+                title: t('config-editor-actions.feature.error')
+            })
+            return
+        }
+
         if (currentValue) {
             updateConfig({
                 variables: JSON.parse(currentValue),
@@ -84,6 +97,35 @@ export function ConfigEditorActionsFeature(props: Props) {
             >
                 {t('config-editor-actions.feature.save')}
             </Button>
+
+            <Button
+                color="red"
+                disabled={isConfigValid || isUpdating}
+                leftSection={<PiFloppyDisk size={16} />}
+                loading={isUpdating}
+                mb="md"
+                onClick={() => {
+                    modals.openConfirmModal({
+                        title: t('config-editor-actions.feature.save-anyway-title'),
+                        children: (
+                            <Text>
+                                {t('config-editor-actions.feature.save-anyway-description')}
+                            </Text>
+                        ),
+                        centered: true,
+                        labels: {
+                            confirm: t('config-editor-actions.feature.save'),
+                            cancel: t('config-editor-actions.feature.cancel')
+                        },
+                        confirmProps: {
+                            color: 'red'
+                        },
+                        onConfirm: handleSave
+                    })
+                }}
+            >
+                {t('config-editor-actions.feature.save-anyway')}
+            </Button>
         </Group>
     )
 }