feat: enhance subpage config editor

kastov · kastov · commit 7e780dfd5a6f · 2025-12-15T17:06:57.000+03:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -85,6 +85,7 @@
     "i18next": "^25.7.2",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
+    "is-svg": "^6.1.0",
     "json-edit-react": "^1.29.0",
     "lodash": "^4.17.21",
     "lottie-react": "^2.4.1",
@@ -196,4 +197,4 @@
       "inquirer": "9.3.5"
     }
   }
-}
+}
diff --git a/public/locales/en/remnawave.json b/public/locales/en/remnawave.json
@@ -1813,7 +1813,10 @@
             "only-latin-characters-allowed": "Only latin characters allowed",
             "icon-key": "Icon Key",
             "svg-code": "SVG Code",
-            "preview": "Preview"
+            "preview": "Preview",
+            "where-to-find-icons": "Where to find icons?",
+            "you-can-find-beautiful-icons-at": "You can find beautiful icons at",
+            "where-to-find-icons-description": "Сlick on any icon, select \"Copy SVG\" and paste it here. Make sure to choose \"Outline\" or \"Filled\" style."
         }
     },
     "external-squads-subpage-config": {
diff --git a/src/pages/dashboard/subpage-config/ui/components/subpage-config-editor-page.component..tsx b/src/pages/dashboard/subpage-config/ui/components/subpage-config-editor-page.component..tsx
@@ -1,6 +1,6 @@
 import { GetSubscriptionPageConfigCommand } from '@remnawave/backend-contract'
 import { ActionIcon, CopyButton, Group, Tooltip } from '@mantine/core'
-import { TbArrowBack, TbFile } from 'react-icons/tb'
+import { TbArrowBack, TbDownload, TbFile } from 'react-icons/tb'
 import { PiCheck, PiCopy } from 'react-icons/pi'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
@@ -18,6 +18,19 @@ export const SubpageConfigEditorPageComponent = (props: Props) => {
     const { t } = useTranslation()
     const navigate = useNavigate()
 
+    const handleDownloadConfig = () => {
+        const json = JSON.stringify(config.config, null, 2)
+        const blob = new Blob([json], { type: 'application/json' })
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `subpage-${config.uuid}.json`
+        document.body.appendChild(a)
+        a.click()
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+    }
+
     // TODO: Help Article
     return (
         <Page title={config.name}>
@@ -29,6 +42,15 @@ export const SubpageConfigEditorPageComponent = (props: Props) => {
                             screen="EDITOR_TEMPLATES_XRAY_JSON"
                         /> */}
 
+                        <ActionIcon
+                            color="gray"
+                            onClick={handleDownloadConfig}
+                            size="input-md"
+                            variant="light"
+                        >
+                            <TbDownload size={24} />
+                        </ActionIcon>
+
                         <CopyButton timeout={2000} value={config.uuid}>
                             {({ copied, copy }) => (
                                 <Tooltip label={t('common.copy-uuid')}>
diff --git a/src/shared/constants/theme/overrides/drawer/drawer.module.css b/src/shared/constants/theme/overrides/drawer/drawer.module.css
@@ -1,10 +1,10 @@
-.drawerContent {
+/* .drawerContent {
     background-color: #161b23;
     background-image:
         linear-gradient(to right, rgba(128, 128, 128, 0.03) 1px, transparent 1px),
         linear-gradient(to bottom, rgba(128, 128, 128, 0.03) 1px, transparent 1px);
     background-size: 40px 40px;
-}
+} */
 
 .drawerHeader {
     background: rgba(22, 27, 35, 0.95);
@@ -14,5 +14,4 @@
 
 .drawerBody {
     padding: var(--mantine-spacing-lg);
-    background: transparent;
 }
diff --git a/src/shared/constants/theme/overrides/drawer/index.tsx b/src/shared/constants/theme/overrides/drawer/index.tsx
@@ -6,8 +6,7 @@ export default {
     Drawer: Drawer.extend({
         classNames: {
             header: classes.drawerHeader,
-            body: classes.drawerBody,
-            content: classes.drawerContent
+            body: classes.drawerBody
         },
         defaultProps: {
             radius: 'md'
diff --git a/src/shared/ui/overlays/base-overlay-header/index.tsx b/src/shared/ui/overlays/base-overlay-header/index.tsx
@@ -22,7 +22,7 @@ export const BaseOverlayHeader = (props: IProps) => {
     } = props
 
     return (
-        <Group gap="sm">
+        <Group gap="sm" wrap="nowrap">
             <ThemeIcon size="lg" variant={iconVariant} {...actionIconProps}>
                 <IconComponent size={iconSize} />
             </ThemeIcon>
diff --git a/src/widgets/dashboard/subpage-configs/subpage-config-editor/editor-components/localized-text-editor.component.tsx b/src/widgets/dashboard/subpage-configs/subpage-config-editor/editor-components/localized-text-editor.component.tsx
@@ -53,17 +53,19 @@ export function LocalizedTextEditor(props: IProps) {
         <>
             <UnstyledButton className={styles.localizedTextButton} onClick={open} w="100%">
                 <Group gap="sm" justify="space-between" wrap="nowrap">
-                    <Group gap="xs" wrap="nowrap">
-                        <IconLanguage className={styles.localizedTextIcon} size={16} />
-                        <div style={{ minWidth: 0 }}>
-                            <Text c="dimmed" size="xs">
+                    <Group gap="xs" style={{ flex: 1, minWidth: 0 }} wrap="nowrap">
+                        <IconLanguage
+                            className={styles.localizedTextIcon}
+                            size={16}
+                            style={{ flexShrink: 0 }}
+                        />
+                        <div style={{ minWidth: 0, flex: 1, overflow: 'hidden' }}>
+                            <Text c="dimmed" size="xs" truncate>
                                 {label}
                             </Text>
                             <Text
                                 c="white"
                                 className={styles.localizedTextPreview}
-                                lineClamp={1}
-                                maw="30ch"
                                 size="sm"
                                 truncate="end"
                             >
@@ -102,9 +104,10 @@ export function LocalizedTextEditor(props: IProps) {
                             }
                             key={locale}
                             label={LOCALE_LABELS[locale]}
-                            minRows={multiline ? 3 : undefined}
+                            minRows={multiline ? 4 : undefined}
                             onChange={(e) => handleChange(locale, e.target.value)}
                             placeholder={`Enter ${label.toLowerCase()}...`}
+                            resize={multiline ? 'vertical' : undefined}
                             value={value[locale] || ''}
                         />
                     ))}
diff --git a/src/widgets/dashboard/subpage-configs/subpage-config-editor/editor-components/required-asterisk.tsx b/src/widgets/dashboard/subpage-configs/subpage-config-editor/editor-components/required-asterisk.tsx
@@ -0,0 +1,9 @@
+import { Text } from '@mantine/core'
+
+export function RequiredAsterisk() {
+    return (
+        <Text c="red" component="span" fz="inherit" inherit ml={4}>
+            *
+        </Text>
+    )
+}
diff --git a/src/widgets/dashboard/subpage-configs/subpage-config-editor/editor-components/svg-icon-select.component.tsx b/src/widgets/dashboard/subpage-configs/subpage-config-editor/editor-components/svg-icon-select.component.tsx
@@ -4,8 +4,10 @@ import { IconCheck, IconPhoto } from '@tabler/icons-react'
 import { useDisclosure } from '@mantine/hooks'
 import { useTranslation } from 'react-i18next'
 import { useMemo } from 'react'
+import isSvg from 'is-svg'
 
 import styles from '../subpage-config-visual-editor.module.css'
+import { RequiredAsterisk } from './required-asterisk'
 
 interface IProps {
     label?: string
@@ -23,8 +25,7 @@ export function SvgIconSelect(props: IProps) {
     const entries = useMemo(() => Object.entries(svgLibrary), [svgLibrary])
 
     const selectedSvg = svgLibrary[value]
-    const isValidSvg =
-        selectedSvg && selectedSvg.trim().startsWith('<svg') && selectedSvg.includes('</svg>')
+    const isValidSelectedSvg = isSvg(selectedSvg ?? '')
 
     const handleSelect = (key: string) => {
         onChange(key)
@@ -36,6 +37,7 @@ export function SvgIconSelect(props: IProps) {
             {label && (
                 <Text c="dimmed" fw={500} mb={4} size="sm">
                     {label}
+                    <RequiredAsterisk />
                 </Text>
             )}
             <Popover
@@ -50,7 +52,7 @@ export function SvgIconSelect(props: IProps) {
                     <Box className={styles.iconSelectTrigger} onClick={toggle}>
                         <Group gap="sm" wrap="nowrap">
                             <Box className={styles.iconSelectPreview}>
-                                {isValidSvg ? (
+                                {isValidSelectedSvg ? (
                                     <Box
                                         className={styles.iconSelectSvg}
                                         dangerouslySetInnerHTML={{ __html: selectedSvg }}
@@ -79,8 +81,6 @@ export function SvgIconSelect(props: IProps) {
                     ) : (
                         <SimpleGrid cols={5} spacing={6}>
                             {entries.map(([key, svg]) => {
-                                const isValid =
-                                    svg && svg.trim().startsWith('<svg') && svg.includes('</svg>')
                                 const isSelected = key === value
 
                                 return (
@@ -98,17 +98,11 @@ export function SvgIconSelect(props: IProps) {
                                             size={52}
                                             variant="subtle"
                                         >
-                                            {isValid ? (
-                                                <Box
-                                                    className={styles.iconSelectItemSvg}
-                                                    dangerouslySetInnerHTML={{ __html: svg }}
-                                                />
-                                            ) : (
-                                                <IconPhoto
-                                                    color="var(--mantine-color-dimmed)"
-                                                    size={18}
-                                                />
-                                            )}
+                                            <Box
+                                                className={styles.iconSelectItemSvg}
+                                                dangerouslySetInnerHTML={{ __html: svg }}
+                                            />
+
                                             {isSelected && (
                                                 <Box className={styles.iconSelectCheck}>
                                                     <IconCheck size={12} />
diff --git a/src/widgets/dashboard/subpage-configs/subpage-config-editor/editor-components/svg-library-modal.component.tsx b/src/widgets/dashboard/subpage-configs/subpage-config-editor/editor-components/svg-library-modal.component.tsx
diff --git a/src/widgets/dashboard/subpage-configs/subpage-config-editor/subpage-config-visual-editor.module.css b/src/widgets/dashboard/subpage-configs/subpage-config-editor/subpage-config-visual-editor.module.css
diff --git a/src/widgets/dashboard/subpage-configs/subpage-config-editor/subpage-config-visual-editor.widget.tsx b/src/widgets/dashboard/subpage-configs/subpage-config-editor/subpage-config-visual-editor.widget.tsx

Original file line number	Diff line number	Diff line change
`@@ -85,6 +85,7 @@`
`85`	`85`	`"i18next": "^25.7.2",`
`86`	`86`	`"i18next-browser-languagedetector": "^8.2.0",`
`87`	`87`	`"i18next-http-backend": "^3.0.2",`
	`88`	`+ "is-svg": "^6.1.0",`
`88`	`89`	`"json-edit-react": "^1.29.0",`
`89`	`90`	`"lodash": "^4.17.21",`
`90`	`91`	`"lottie-react": "^2.4.1",`
`@@ -196,4 +197,4 @@`
`196`	`197`	`"inquirer": "9.3.5"`
`197`	`198`	`}`
`198`	`199`	`}`
`199`		`-}`
	`200`	`+}`