feat: update backend contract version and enhance xHTTP extra parameters functionality

- Upgraded @remnawave/backend-contract to version 0.3.60 in package.json and package-lock.json.
- Added new localization entries for xHTTP extra parameters in English, Persian, and Russian locale files.
- Implemented a drawer in BaseHostForm for managing xHTTP extra parameters with sample JSON input.
- Updated EditHostModalWidget to handle xHTTP extra parameters during host updates.

Author: kastov

package-lock.json

@@ -45,7 +45,7 @@
     "@mantine/nprogress": "^7.17.2",
     "@monaco-editor/react": "^4.7.0",
     "@paralleldrive/cuid2": "2.2.2",
-    "@remnawave/backend-contract": "0.3.54",
+    "@remnawave/backend-contract": "0.3.60",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",
     "@tabler/icons-react": "^3.31.0",

package.json

@@ -304,7 +304,13 @@
         "tls-transport-layer-security": "TLS (Transport Layer Security)",
         "none": "None",
         "inbounds-default": "Inbound's default",
-        "here-you-can-override-security-settings-from-xtls-config": "Here you can override security settings from XTLS Config."
+        "here-you-can-override-security-settings-from-xtls-config": "Here you can override security settings from XTLS Config.",
+        "extra-xhttp": "Extra xHTTP",
+        "xhttp-extra-params": "xHTTP extra params",
+        "extra-xhttp-description": "This extra params will work only with xHTTP protocol. Pass object \"extra\" to the client. This JSON input is not validated, be sure to paste the correct extra params. Use the button below to copy the basic extra params, then paste it into the JSON input.",
+        "invalid-json": "Invalid JSON",
+        "fill-with-sample-xhttp-extra-params": "Fill with sample xHTTP extra params",
+        "close": "Close"
     },
     "base-node-form": {
         "country": "Country",
@@ -802,4 +808,4 @@
             "updated-at": "Updated At"
         }
     }
-}
+}

public/locales/en/remnawave.json

@@ -304,7 +304,13 @@
         "inbounds-default": "پیش فرض ورودی",
         "none": "هیچ کدام",
         "security-layer": "لایه امنیتی",
-        "tls-transport-layer-security": "TLS (امنیت لایه حمل و نقل)"
+        "tls-transport-layer-security": "TLS (امنیت لایه حمل و نقل)",
+        "extra-xhttp": "Extra xHTTP",
+        "xhttp-extra-params": "xHTTP extra params",
+        "extra-xhttp-description": "This extra params will work only with xHTTP protocol. Pass object \"extra\" to the client. This JSON input is not validated, be sure to paste the correct extra params. Use the button below to copy the basic extra params, then paste it into the JSON input.",
+        "invalid-json": "Invalid JSON",
+        "fill-with-sample-xhttp-extra-params": "Fill with sample xHTTP extra params",
+        "close": "Close"
     },
     "base-node-form": {
         "country": "کشور",

public/locales/fa/remnawave.json

@@ -304,7 +304,13 @@
         "inbounds-default": "По умолчанию",
         "none": "None",
         "security-layer": "Security Layer",
-        "tls-transport-layer-security": "TLS"
+        "tls-transport-layer-security": "TLS",
+        "extra-xhttp": "Extra xHTTP",
+        "xhttp-extra-params": "xHTTP extra params",
+        "extra-xhttp-description": "This extra params will work only with xHTTP protocol. Pass object \"extra\" to the client. This JSON input is not validated, be sure to paste the correct extra params. Use the button below to copy the basic extra params, then paste it into the JSON input.",
+        "invalid-json": "Invalid JSON",
+        "fill-with-sample-xhttp-extra-params": "Fill with sample xHTTP extra params",
+        "close": "Close"
     },
     "base-node-form": {
         "country": "Страна",

public/locales/ru/remnawave.json

@@ -2,43 +2,112 @@ import {
     ActionIcon,
     Button,
     Collapse,
+    Drawer,
     Group,
+    JsonInput,
     NumberInput,
     Select,
     Stack,
     Switch,
+    Text,
     TextInput,
     Tooltip
 } from '@mantine/core'
+import {
+    PiArrowUpDuotone,
+    PiCaretDown,
+    PiCaretUp,
+    PiFloppyDiskDuotone,
+    PiInfo,
+    PiPencilDuotone
+} from 'react-icons/pi'
 import {
     ALPN,
     CreateHostCommand,
     FINGERPRINTS,
     SECURITY_LAYERS,
     UpdateHostCommand
 } from '@remnawave/backend-contract'
-import { PiCaretDown, PiCaretUp, PiFloppyDiskDuotone, PiInfo } from 'react-icons/pi'
+import { useDisclosure } from '@mantine/hooks'
 import { useTranslation } from 'react-i18next'
 
 import { DeleteHostFeature } from '@features/ui/dashboard/hosts/delete-host'
 import { RemarkInfoPopoverWidget } from '@widgets/dashboard/hosts/popovers'
 
 import { IProps } from './interfaces'
 
+const basicXHttpExtraParams = `{
+  "headers": {},
+  "xPaddingBytes": "100-1000",
+  "noGRPCHeader": false,
+  "scMaxEachPostBytes": 1000000,
+  "scMinPostsIntervalMs": 30,
+  "scStreamUpServerSecs": "20-80",
+  "xmux": {
+    "maxConcurrency": "16-32",
+    "maxConnections": 0,
+    "cMaxReuseTimes": 0,
+    "hMaxRequestTimes": "600-900",
+    "hMaxReusableSecs": "1800-3000",
+    "hKeepAlivePeriod": 0
+  },
+  "downloadSettings": {
+    "address": "",
+    "port": 443,
+    "network": "xhttp",
+    "security": "tls",
+    "tlsSettings": {},
+    "xhttpSettings": {
+      "path": "/yourpath"
+    },
+    "sockopt": {}
+  }
+}`
+
+const pasteBasicXHttpExtraParams = `{
+  "headers": {},
+  "xPaddingBytes": "100-1000",
+  "noGRPCHeader": false,
+  "scMaxEachPostBytes": 1000000,
+  "scMinPostsIntervalMs": 30,
+  "scStreamUpServerSecs": "20-80",
+  "xmux": {
+    "maxConcurrency": "16-32",
+    "maxConnections": 0,
+    "cMaxReuseTimes": 0,
+    "hMaxRequestTimes": "600-900",
+    "hMaxReusableSecs": "1800-3000",
+    "hKeepAlivePeriod": 0
+  }
+}
+`
+
 export const BaseHostForm = <T extends CreateHostCommand.Request | UpdateHostCommand.Request>(
     props: IProps<T>
 ) => {
     const { form, advancedOpened, handleSubmit, host, inbounds, setAdvancedOpened, isSubmitting } =
         props
 
     const { t } = useTranslation()
+    const [opened, { open, close }] = useDisclosure(false)
 
     const securityLayerLabels = {
         [SECURITY_LAYERS.TLS]: t('base-host-form.tls-transport-layer-security'),
         [SECURITY_LAYERS.NONE]: t('base-host-form.none'),
         [SECURITY_LAYERS.DEFAULT]: t('base-host-form.inbounds-default')
     }
 
+    const isXhttpExtraButtonDisabled = () => {
+        return (
+            !inbounds ||
+            !form.getValues().inboundUuid ||
+            !inbounds.some(
+                (inbound) =>
+                    inbound.uuid === form.getValues().inboundUuid && inbound.network === 'xhttp'
+            )
+        )
+    }
+
     return (
         <form onSubmit={handleSubmit}>
             <Stack gap="md">
@@ -226,6 +295,17 @@ export const BaseHostForm = <T extends CreateHostCommand.Request | UpdateHostCom
                                     {...form.getInputProps('fingerprint')}
                                     w="55%"
                                 />
+
+                                <Button
+                                    color="pink"
+                                    disabled={isXhttpExtraButtonDisabled()}
+                                    leftSection={<PiPencilDuotone />}
+                                    mt={'xs'}
+                                    onClick={open}
+                                    variant="light"
+                                >
+                                    {t('base-host-form.extra-xhttp')}
+                                </Button>
                             </Group>
                         </Stack>
                     </Collapse>
@@ -249,6 +329,43 @@ export const BaseHostForm = <T extends CreateHostCommand.Request | UpdateHostCom
                     {t('base-host-form.save')}
                 </Button>
             </Group>
+
+            <Drawer
+                onClose={close}
+                opened={opened}
+                overlayProps={{ backgroundOpacity: 0.6, blur: 0 }}
+                padding="lg"
+                position="right"
+                size="lg"
+                title={t('base-host-form.xhttp-extra-params')}
+            >
+                <Stack gap="md">
+                    <Text size="sm">{t('base-host-form.extra-xhttp-description')}</Text>
+                    <JsonInput
+                        autosize
+                        formatOnBlur
+                        key={form.key('xHttpExtraParams')}
+                        minRows={15}
+                        placeholder={basicXHttpExtraParams}
+                        validationError={t('base-host-form.invalid-json')}
+                        {...form.getInputProps('xHttpExtraParams')}
+                    />
+
+                    <Button
+                        color="gray"
+                        leftSection={<PiArrowUpDuotone size="1.2rem" />}
+                        onClick={() => {
+                            // @ts-expect-error -- TODO: fix this
+                            form.setFieldValue('xHttpExtraParams', pasteBasicXHttpExtraParams)
+                        }}
+                        variant="light"
+                    >
+                        {t('base-host-form.fill-with-sample-xhttp-extra-params')}
+                    </Button>
+
+                    <Button onClick={close}>{t('base-host-form.close')}</Button>
+                </Stack>
+            </Drawer>
         </form>
     )
 }

src/shared/ui/forms/hosts/base-host-form/base-host-form.tsx

@@ -26,7 +26,9 @@ export const EditHostModalWidget = () => {
     const form = useForm<UpdateHostCommand.Request>({
         name: 'edit-host-form',
         mode: 'uncontrolled',
-        validate: zodResolver(UpdateHostCommand.RequestSchema.omit({ uuid: true }))
+        validate: zodResolver(
+            UpdateHostCommand.RequestSchema.omit({ uuid: true, xHttpExtraParams: true })
+        )
     })
 
     const handleClose = () => {
@@ -50,6 +52,14 @@ export const EditHostModalWidget = () => {
 
     useEffect(() => {
         if (host && inbounds) {
+            let xHttpExtraParamsParsed: null | object | string
+
+            if (typeof host.xHttpExtraParams === 'object' && host.xHttpExtraParams !== null) {
+                xHttpExtraParamsParsed = JSON.stringify(host.xHttpExtraParams, null, 2)
+            } else {
+                xHttpExtraParamsParsed = ''
+            }
+
             form.setValues({
                 remark: host.remark,
                 address: host.address,
@@ -61,6 +71,7 @@ export const EditHostModalWidget = () => {
                 host: host.host ?? undefined,
                 path: host.path ?? undefined,
                 alpn: (host.alpn as UpdateHostCommand.Request['alpn']) ?? undefined,
+                xHttpExtraParams: xHttpExtraParamsParsed,
                 fingerprint:
                     (host.fingerprint as UpdateHostCommand.Request['fingerprint']) ?? undefined
             })
@@ -79,11 +90,25 @@ export const EditHostModalWidget = () => {
             return
         }
 
+        let xHttpExtraParams
+
+        try {
+            if (values.xHttpExtraParams === '') {
+                xHttpExtraParams = null
+            } else {
+                xHttpExtraParams = JSON.parse(values.xHttpExtraParams as unknown as string)
+            }
+        } catch (error) {
+            xHttpExtraParams = null
+            // silence
+        }
+
         updateHost({
             variables: {
                 ...values,
                 isDisabled: !values.isDisabled,
-                uuid: host.uuid
+                uuid: host.uuid,
+                xHttpExtraParams
             }
         })
     })