From 8cddff2c415879a9c431e595cbb9d305e1da335b Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Sat, 30 May 2026 21:04:37 +0200
Subject: [PATCH] refactor(frontend): fold HysteriaMasqueradeForm into the
 hysteria forms

Inline the masquerade fields directly into both hysteria transport forms
(inbounds/form/protocols/hysteria + xray/outbounds/transport/hysteria)
and delete the shared lib/xray/forms/transport/HysteriaMasqueradeForm so
each hysteria form is self-contained. The masquerade JSX is unchanged;
form is typed as the untyped FormInstance (as the shared component was)
so the masquerade name paths still resolve. No behavior change.
---
 .../transport/HysteriaMasqueradeForm.tsx      | 120 ------------------
 .../src/lib/xray/forms/transport/index.ts     |   1 -
 .../inbounds/form/protocols/hysteria.tsx      | 111 +++++++++++++++-
 .../xray/outbounds/transport/hysteria.tsx     | 112 +++++++++++++++-
 4 files changed, 213 insertions(+), 131 deletions(-)
 delete mode 100644 frontend/src/lib/xray/forms/transport/HysteriaMasqueradeForm.tsx

diff --git a/frontend/src/lib/xray/forms/transport/HysteriaMasqueradeForm.tsx b/frontend/src/lib/xray/forms/transport/HysteriaMasqueradeForm.tsx
deleted file mode 100644
index 26c59847..00000000
--- a/frontend/src/lib/xray/forms/transport/HysteriaMasqueradeForm.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Form, Input, InputNumber, Select, Switch } from 'antd';
-import type { FormInstance } from 'antd';
-
-import { HeaderMapEditor } from '@/components/form';
-
-const MASQ_PATH = ['streamSettings', 'hysteriaSettings', 'masquerade'];
-
-interface HysteriaMasqueradeFormProps {
-  form: FormInstance;
-}
-
-export default function HysteriaMasqueradeForm({ form }: HysteriaMasqueradeFormProps) {
-  const { t } = useTranslation();
-  return (
-    <>
-      <Form.Item label={t('pages.inbounds.form.masquerade')}>
-        <Form.Item shouldUpdate noStyle>
-          {() => {
-            const m = form.getFieldValue(MASQ_PATH);
-            return (
-              <Switch
-                checked={!!m}
-                onChange={(checked) =>
-                  form.setFieldValue(
-                    MASQ_PATH,
-                    checked
-                      ? {
-                        type: '', dir: '', url: '',
-                        rewriteHost: false, insecure: false,
-                        content: '', headers: {}, statusCode: 0,
-                      }
-                      : undefined,
-                  )
-                }
-              />
-            );
-          }}
-        </Form.Item>
-      </Form.Item>
-      <Form.Item shouldUpdate noStyle>
-        {() => {
-          const m = form.getFieldValue(MASQ_PATH) as { type?: string } | undefined;
-          if (!m) return null;
-          return (
-            <>
-              <Form.Item
-                label={t('pages.inbounds.form.type')}
-                name={[...MASQ_PATH, 'type']}
-              >
-                <Select
-                  options={[
-                    { value: '', label: 'default (404 page)' },
-                    { value: 'proxy', label: 'proxy (reverse proxy)' },
-                    { value: 'file', label: 'file (serve directory)' },
-                    { value: 'string', label: 'string (fixed body)' },
-                  ]}
-                />
-              </Form.Item>
-              {m.type === 'proxy' && (
-                <>
-                  <Form.Item
-                    label={t('pages.inbounds.form.upstreamUrl')}
-                    name={[...MASQ_PATH, 'url']}
-                  >
-                    <Input placeholder="https://www.example.com" />
-                  </Form.Item>
-                  <Form.Item
-                    label={t('pages.inbounds.form.rewriteHost')}
-                    name={[...MASQ_PATH, 'rewriteHost']}
-                    valuePropName="checked"
-                  >
-                    <Switch />
-                  </Form.Item>
-                  <Form.Item
-                    label={t('pages.inbounds.form.skipTlsVerify')}
-                    name={[...MASQ_PATH, 'insecure']}
-                    valuePropName="checked"
-                  >
-                    <Switch />
-                  </Form.Item>
-                </>
-              )}
-              {m.type === 'file' && (
-                <Form.Item
-                  label={t('pages.inbounds.form.directory')}
-                  name={[...MASQ_PATH, 'dir']}
-                >
-                  <Input placeholder="/var/www/html" />
-                </Form.Item>
-              )}
-              {m.type === 'string' && (
-                <>
-                  <Form.Item
-                    label={t('pages.inbounds.form.statusCode')}
-                    name={[...MASQ_PATH, 'statusCode']}
-                  >
-                    <InputNumber min={0} max={599} style={{ width: '100%' }} />
-                  </Form.Item>
-                  <Form.Item
-                    label={t('pages.inbounds.form.body')}
-                    name={[...MASQ_PATH, 'content']}
-                  >
-                    <Input.TextArea autoSize={{ minRows: 3 }} />
-                  </Form.Item>
-                  <Form.Item
-                    label={t('pages.inbounds.form.headers')}
-                    name={[...MASQ_PATH, 'headers']}
-                  >
-                    <HeaderMapEditor mode="v1" />
-                  </Form.Item>
-                </>
-              )}
-            </>
-          );
-        }}
-      </Form.Item>
-    </>
-  );
-}
diff --git a/frontend/src/lib/xray/forms/transport/index.ts b/frontend/src/lib/xray/forms/transport/index.ts
index c9b18741..d2ab3e39 100644
--- a/frontend/src/lib/xray/forms/transport/index.ts
+++ b/frontend/src/lib/xray/forms/transport/index.ts
@@ -1,2 +1 @@
 export { default as FinalMaskForm } from './FinalMaskForm';
-export { default as HysteriaMasqueradeForm } from './HysteriaMasqueradeForm';
diff --git a/frontend/src/pages/inbounds/form/protocols/hysteria.tsx b/frontend/src/pages/inbounds/form/protocols/hysteria.tsx
index 905f635c..5a933778 100644
--- a/frontend/src/pages/inbounds/form/protocols/hysteria.tsx
+++ b/frontend/src/pages/inbounds/form/protocols/hysteria.tsx
@@ -1,10 +1,11 @@
 import { useTranslation } from 'react-i18next';
-import { Form, InputNumber, type FormInstance } from 'antd';
+import { Form, Input, InputNumber, Select, Switch, type FormInstance } from 'antd';
 
-import { HysteriaMasqueradeForm } from '@/lib/xray/forms/transport';
-import type { InboundFormValues } from '@/schemas/forms/inbound-form';
+import { HeaderMapEditor } from '@/components/form';
 
-export default function HysteriaFields({ form }: { form: FormInstance<InboundFormValues> }) {
+const MASQ_PATH = ['streamSettings', 'hysteriaSettings', 'masquerade'];
+
+export default function HysteriaFields({ form }: { form: FormInstance }) {
   const { t } = useTranslation();
   return (
     <>
@@ -21,7 +22,107 @@ export default function HysteriaFields({ form }: { form: FormInstance<InboundFor
         <InputNumber min={1} style={{ width: '100%' }} />
       </Form.Item>
 
-      <HysteriaMasqueradeForm form={form} />
+      <Form.Item label={t('pages.inbounds.form.masquerade')}>
+        <Form.Item shouldUpdate noStyle>
+          {() => {
+            const m = form.getFieldValue(MASQ_PATH);
+            return (
+              <Switch
+                checked={!!m}
+                onChange={(checked) =>
+                  form.setFieldValue(
+                    MASQ_PATH,
+                    checked
+                      ? {
+                        type: '', dir: '', url: '',
+                        rewriteHost: false, insecure: false,
+                        content: '', headers: {}, statusCode: 0,
+                      }
+                      : undefined,
+                  )
+                }
+              />
+            );
+          }}
+        </Form.Item>
+      </Form.Item>
+      <Form.Item shouldUpdate noStyle>
+        {() => {
+          const m = form.getFieldValue(MASQ_PATH) as { type?: string } | undefined;
+          if (!m) return null;
+          return (
+            <>
+              <Form.Item
+                label={t('pages.inbounds.form.type')}
+                name={[...MASQ_PATH, 'type']}
+              >
+                <Select
+                  options={[
+                    { value: '', label: 'default (404 page)' },
+                    { value: 'proxy', label: 'proxy (reverse proxy)' },
+                    { value: 'file', label: 'file (serve directory)' },
+                    { value: 'string', label: 'string (fixed body)' },
+                  ]}
+                />
+              </Form.Item>
+              {m.type === 'proxy' && (
+                <>
+                  <Form.Item
+                    label={t('pages.inbounds.form.upstreamUrl')}
+                    name={[...MASQ_PATH, 'url']}
+                  >
+                    <Input placeholder="https://www.example.com" />
+                  </Form.Item>
+                  <Form.Item
+                    label={t('pages.inbounds.form.rewriteHost')}
+                    name={[...MASQ_PATH, 'rewriteHost']}
+                    valuePropName="checked"
+                  >
+                    <Switch />
+                  </Form.Item>
+                  <Form.Item
+                    label={t('pages.inbounds.form.skipTlsVerify')}
+                    name={[...MASQ_PATH, 'insecure']}
+                    valuePropName="checked"
+                  >
+                    <Switch />
+                  </Form.Item>
+                </>
+              )}
+              {m.type === 'file' && (
+                <Form.Item
+                  label={t('pages.inbounds.form.directory')}
+                  name={[...MASQ_PATH, 'dir']}
+                >
+                  <Input placeholder="/var/www/html" />
+                </Form.Item>
+              )}
+              {m.type === 'string' && (
+                <>
+                  <Form.Item
+                    label={t('pages.inbounds.form.statusCode')}
+                    name={[...MASQ_PATH, 'statusCode']}
+                  >
+                    <InputNumber min={0} max={599} style={{ width: '100%' }} />
+                  </Form.Item>
+                  <Form.Item
+                    label={t('pages.inbounds.form.body')}
+                    name={[...MASQ_PATH, 'content']}
+                  >
+                    <Input.TextArea autoSize={{ minRows: 3 }} />
+                  </Form.Item>
+                  <Form.Item
+                    label={t('pages.inbounds.form.headers')}
+                    name={[...MASQ_PATH, 'headers']}
+                  >
+                    <HeaderMapEditor mode="v1" />
+                  </Form.Item>
+                </>
+              )}
+            </>
+          );
+        }}
+      </Form.Item>
     </>
   );
 }
diff --git a/frontend/src/pages/xray/outbounds/transport/hysteria.tsx b/frontend/src/pages/xray/outbounds/transport/hysteria.tsx
index 38f0c171..8b45d082 100644
--- a/frontend/src/pages/xray/outbounds/transport/hysteria.tsx
+++ b/frontend/src/pages/xray/outbounds/transport/hysteria.tsx
@@ -1,10 +1,11 @@
 import { useTranslation } from 'react-i18next';
-import { Form, Input, InputNumber, type FormInstance } from 'antd';
+import { Form, Input, InputNumber, Select, Switch, type FormInstance } from 'antd';
 
-import { HysteriaMasqueradeForm } from '@/lib/xray/forms/transport';
-import type { OutboundFormValues } from '@/schemas/forms/outbound-form';
+import { HeaderMapEditor } from '@/components/form';
 
-export default function HysteriaForm({ form }: { form: FormInstance<OutboundFormValues> }) {
+const MASQ_PATH = ['streamSettings', 'hysteriaSettings', 'masquerade'];
+
+export default function HysteriaForm({ form }: { form: FormInstance }) {
   const { t } = useTranslation();
   return (
     <>
@@ -26,7 +27,108 @@ export default function HysteriaForm({ form }: { form: FormInstance<OutboundForm
       >
         <InputNumber min={1} style={{ width: '100%' }} />
       </Form.Item>
-      <HysteriaMasqueradeForm form={form} />
+
+      <Form.Item label={t('pages.inbounds.form.masquerade')}>
+        <Form.Item shouldUpdate noStyle>
+          {() => {
+            const m = form.getFieldValue(MASQ_PATH);
+            return (
+              <Switch
+                checked={!!m}
+                onChange={(checked) =>
+                  form.setFieldValue(
+                    MASQ_PATH,
+                    checked
+                      ? {
+                        type: '', dir: '', url: '',
+                        rewriteHost: false, insecure: false,
+                        content: '', headers: {}, statusCode: 0,
+                      }
+                      : undefined,
+                  )
+                }
+              />
+            );
+          }}
+        </Form.Item>
+      </Form.Item>
+      <Form.Item shouldUpdate noStyle>
+        {() => {
+          const m = form.getFieldValue(MASQ_PATH) as { type?: string } | undefined;
+          if (!m) return null;
+          return (
+            <>
+              <Form.Item
+                label={t('pages.inbounds.form.type')}
+                name={[...MASQ_PATH, 'type']}
+              >
+                <Select
+                  options={[
+                    { value: '', label: 'default (404 page)' },
+                    { value: 'proxy', label: 'proxy (reverse proxy)' },
+                    { value: 'file', label: 'file (serve directory)' },
+                    { value: 'string', label: 'string (fixed body)' },
+                  ]}
+                />
+              </Form.Item>
+              {m.type === 'proxy' && (
+                <>
+                  <Form.Item
+                    label={t('pages.inbounds.form.upstreamUrl')}
+                    name={[...MASQ_PATH, 'url']}
+                  >
+                    <Input placeholder="https://www.example.com" />
+                  </Form.Item>
+                  <Form.Item
+                    label={t('pages.inbounds.form.rewriteHost')}
+                    name={[...MASQ_PATH, 'rewriteHost']}
+                    valuePropName="checked"
+                  >
+                    <Switch />
+                  </Form.Item>
+                  <Form.Item
+                    label={t('pages.inbounds.form.skipTlsVerify')}
+                    name={[...MASQ_PATH, 'insecure']}
+                    valuePropName="checked"
+                  >
+                    <Switch />
+                  </Form.Item>
+                </>
+              )}
+              {m.type === 'file' && (
+                <Form.Item
+                  label={t('pages.inbounds.form.directory')}
+                  name={[...MASQ_PATH, 'dir']}
+                >
+                  <Input placeholder="/var/www/html" />
+                </Form.Item>
+              )}
+              {m.type === 'string' && (
+                <>
+                  <Form.Item
+                    label={t('pages.inbounds.form.statusCode')}
+                    name={[...MASQ_PATH, 'statusCode']}
+                  >
+                    <InputNumber min={0} max={599} style={{ width: '100%' }} />
+                  </Form.Item>
+                  <Form.Item
+                    label={t('pages.inbounds.form.body')}
+                    name={[...MASQ_PATH, 'content']}
+                  >
+                    <Input.TextArea autoSize={{ minRows: 3 }} />
+                  </Form.Item>
+                  <Form.Item
+                    label={t('pages.inbounds.form.headers')}
+                    name={[...MASQ_PATH, 'headers']}
+                  >
+                    <HeaderMapEditor mode="v1" />
+                  </Form.Item>
+                </>
+              )}
+            </>
+          );
+        }}
+      </Form.Item>
     </>
   );
 }