From 52cbcfb99ea9fc73bc04edd45a2d7cbdd1e10006 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Sat, 30 May 2026 20:03:22 +0200
Subject: [PATCH] refactor(frontend): split inbound vless/http/mixed/hysteria
 protocol forms

Extract the remaining inbound protocol blocks into inbounds/form/protocols/: vless (auth handlers/state as props), http + mixed (shared accounts-list), hysteria. Drop now-unused HysteriaMasqueradeForm/Typography/Text imports from the modal. InboundFormModal.tsx 2841 -> 2478. Inbound snapshots unchanged -> no behavior change. typecheck/lint/build green.
---
 .../pages/inbounds/form/InboundFormModal.tsx  | 147 ++----------------
 .../inbounds/form/protocols/accounts-list.tsx |  47 ++++++
 .../pages/inbounds/form/protocols/http.tsx    |  20 +++
 .../inbounds/form/protocols/hysteria.tsx      |  27 ++++
 .../pages/inbounds/form/protocols/index.ts    |   4 +
 .../pages/inbounds/form/protocols/mixed.tsx   |  33 ++++
 .../pages/inbounds/form/protocols/vless.tsx   |  60 +++++++
 7 files changed, 205 insertions(+), 133 deletions(-)
 create mode 100644 frontend/src/pages/inbounds/form/protocols/accounts-list.tsx
 create mode 100644 frontend/src/pages/inbounds/form/protocols/http.tsx
 create mode 100644 frontend/src/pages/inbounds/form/protocols/hysteria.tsx
 create mode 100644 frontend/src/pages/inbounds/form/protocols/mixed.tsx
 create mode 100644 frontend/src/pages/inbounds/form/protocols/vless.tsx

diff --git a/frontend/src/pages/inbounds/form/InboundFormModal.tsx b/frontend/src/pages/inbounds/form/InboundFormModal.tsx
index 571a7286..02908bd9 100644
--- a/frontend/src/pages/inbounds/form/InboundFormModal.tsx
+++ b/frontend/src/pages/inbounds/form/InboundFormModal.tsx
@@ -16,7 +16,6 @@ import {
   Switch,
   Tabs,
   Tooltip,
-  Typography,
   message,
 } from 'antd';
 import {
@@ -77,12 +76,20 @@ import { XHttpStreamSettingsSchema } from '@/schemas/protocols/stream/xhttp';
 import { DateTimePicker } from '@/components/form';
 import { FinalMaskForm } from '@/lib/xray/forms/transport';
 import { HeaderMapEditor } from '@/components/form';
-import { HysteriaMasqueradeForm } from '@/lib/xray/forms/protocols/shared';
 import { InputAddon } from '@/components/ui';
 import './InboundFormModal.css';
 
 import { AdvancedAllEditor, AdvancedSliceEditor } from './advanced-editors';
-import { ShadowsocksFields, TunFields, TunnelFields, WireguardFields } from './protocols';
+import {
+  HttpFields,
+  HysteriaFields,
+  MixedFields,
+  ShadowsocksFields,
+  TunFields,
+  TunnelFields,
+  VlessFields,
+  WireguardFields,
+} from './protocols';
 
 const { TextArea } = Input;
 import { coerceInboundJsonField, type DBInbound } from '@/models/dbinbound';
@@ -93,8 +100,6 @@ import type { NodeRecord } from '@/api/queries/useNodesQuery';
 // InboundsPage continues to render the old InboundFormModal.tsx until the
 // atomic swap at the end (Core Decision 7).
 
-const { Text } = Typography;
-
 
 const PROTOCOL_OPTIONS = Object.values(Protocols).map((p) => ({ value: p, label: p }));
 const TRAFFIC_RESETS = ['never', 'hourly', 'daily', 'weekly', 'monthly'] as const;
@@ -952,119 +957,12 @@ export default function InboundFormModal({
 
       {protocol === Protocols.TUNNEL && <TunnelFields />}
 
-      {(protocol === Protocols.HTTP || protocol === Protocols.MIXED) && (
-        <>
-          <Form.List name={['settings', 'accounts']}>
-            {(fields, { add, remove }) => (
-              <>
-                <Form.Item label={t('pages.inbounds.form.accounts')}>
-                  <Button
-                    size="small"
-                    onClick={() => add({
-                      user: RandomUtil.randomLowerAndNum(8),
-                      pass: RandomUtil.randomLowerAndNum(12),
-                    })}
-                  >
-                    <PlusOutlined /> {t('add')}
-                  </Button>
-                </Form.Item>
-                {fields.length > 0 && (
-                  <Form.Item wrapperCol={{ span: 24 }}>
-                    {fields.map((field, idx) => (
-                      <Space.Compact key={field.key} className="mb-8" block>
-                        <InputAddon>{String(idx + 1)}</InputAddon>
-                        <Form.Item name={[field.name, 'user']} noStyle>
-                          <Input placeholder={t('username')} />
-                        </Form.Item>
-                        <Form.Item name={[field.name, 'pass']} noStyle>
-                          <Input placeholder={t('password')} />
-                        </Form.Item>
-                        <Button onClick={() => remove(field.name)}>
-                          <MinusOutlined />
-                        </Button>
-                      </Space.Compact>
-                    ))}
-                  </Form.Item>
-                )}
-              </>
-            )}
-          </Form.List>
-          {protocol === Protocols.HTTP && (
-            <Form.Item
-              name={['settings', 'allowTransparent']}
-              label={t('pages.inbounds.form.allowTransparent')}
-              valuePropName="checked"
-            >
-              <Switch />
-            </Form.Item>
-          )}
-          {protocol === Protocols.MIXED && (
-            <>
-              <Form.Item name={['settings', 'auth']} label={t('pages.inbounds.info.auth')}>
-                <Select
-                  options={[
-                    { value: 'noauth', label: 'noauth' },
-                    { value: 'password', label: 'password' },
-                  ]}
-                />
-              </Form.Item>
-              <Form.Item
-                name={['settings', 'udp']}
-                label="UDP"
-                valuePropName="checked"
-              >
-                <Switch />
-              </Form.Item>
-              {mixedUdpOn && (
-                <Form.Item name={['settings', 'ip']} label="UDP IP">
-                  <Input />
-                </Form.Item>
-              )}
-            </>
-          )}
-        </>
-      )}
+      {protocol === Protocols.HTTP && <HttpFields />}
+      {protocol === Protocols.MIXED && <MixedFields mixedUdpOn={mixedUdpOn} />}
 
       {protocol === Protocols.SHADOWSOCKS && <ShadowsocksFields form={form} isSSWith2022={isSSWith2022} />}
 
-      {protocol === Protocols.VLESS && (
-        <>
-          <Form.Item name={['settings', 'decryption']} label={t('pages.inbounds.decryption')}>
-            <Input />
-          </Form.Item>
-          <Form.Item name={['settings', 'encryption']} label={t('pages.inbounds.encryption')}>
-            <Input />
-          </Form.Item>
-          <Form.Item label=" ">
-            <Space size={8} wrap>
-              <Button type="primary" loading={saving} onClick={() => getNewVlessEnc('x25519')}>
-                {t('pages.inbounds.vlessAuthX25519')}
-              </Button>
-              <Button type="primary" loading={saving} onClick={() => getNewVlessEnc('mlkem768')}>
-                {t('pages.inbounds.vlessAuthMlkem768')}
-              </Button>
-              <Button danger onClick={clearVlessEnc}>{t('clear')}</Button>
-            </Space>
-            <Text type="secondary" className="vless-auth-state">
-              {t('pages.inbounds.vlessAuthSelected', { auth: selectedVlessAuth })}
-            </Text>
-          </Form.Item>
-          {network === 'tcp' && (security === 'tls' || security === 'reality') && (
-            <Form.Item
-              label={t('pages.inbounds.form.visionTestseed')}
-              extra="Applies only to clients using the xtls-rprx-vision flow; ignored otherwise."
-            >
-              <Space.Compact block>
-                {[900, 500, 900, 256].map((def, i) => (
-                  <Form.Item key={i} name={['settings', 'testseed', i]} noStyle initialValue={def}>
-                    <InputNumber min={1} style={{ width: '25%' }} />
-                  </Form.Item>
-                ))}
-              </Space.Compact>
-            </Form.Item>
-          )}
-        </>
-      )}
+      {protocol === Protocols.VLESS && <VlessFields saving={saving} selectedVlessAuth={selectedVlessAuth} network={network} security={security} getNewVlessEnc={getNewVlessEnc} clearVlessEnc={clearVlessEnc} />}
 
       {isFallbackHost && fallbacksCard}
     </>
@@ -1148,24 +1046,7 @@ export default function InboundFormModal({
           auth + udpIdleTimeout are required, masquerade is an optional
           sub-object that lets xray-core disguise the listener as an
           HTTP server when probed. */}
-      {protocol === Protocols.HYSTERIA && (
-        <>
-          <Form.Item
-            label={t('pages.inbounds.form.version')}
-            name={['streamSettings', 'hysteriaSettings', 'version']}
-          >
-            <InputNumber min={2} max={2} disabled />
-          </Form.Item>
-          <Form.Item
-            label={t('pages.inbounds.form.udpIdleTimeout')}
-            name={['streamSettings', 'hysteriaSettings', 'udpIdleTimeout']}
-          >
-            <InputNumber min={1} style={{ width: '100%' }} />
-          </Form.Item>
-
-          <HysteriaMasqueradeForm form={form} />
-        </>
-      )}
+      {protocol === Protocols.HYSTERIA && <HysteriaFields form={form} />}
 
       {network === 'tcp' && (
         <>
diff --git a/frontend/src/pages/inbounds/form/protocols/accounts-list.tsx b/frontend/src/pages/inbounds/form/protocols/accounts-list.tsx
new file mode 100644
index 00000000..850dd3ba
--- /dev/null
+++ b/frontend/src/pages/inbounds/form/protocols/accounts-list.tsx
@@ -0,0 +1,47 @@
+import { useTranslation } from 'react-i18next';
+import { Button, Form, Input, Space } from 'antd';
+import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
+
+import { RandomUtil } from '@/utils';
+import { InputAddon } from '@/components/ui';
+
+export default function AccountsList() {
+  const { t } = useTranslation();
+  return (
+    <Form.List name={['settings', 'accounts']}>
+      {(fields, { add, remove }) => (
+        <>
+          <Form.Item label={t('pages.inbounds.form.accounts')}>
+            <Button
+              size="small"
+              onClick={() => add({
+                user: RandomUtil.randomLowerAndNum(8),
+                pass: RandomUtil.randomLowerAndNum(12),
+              })}
+            >
+              <PlusOutlined /> {t('add')}
+            </Button>
+          </Form.Item>
+          {fields.length > 0 && (
+            <Form.Item wrapperCol={{ span: 24 }}>
+              {fields.map((field, idx) => (
+                <Space.Compact key={field.key} className="mb-8" block>
+                  <InputAddon>{String(idx + 1)}</InputAddon>
+                  <Form.Item name={[field.name, 'user']} noStyle>
+                    <Input placeholder={t('username')} />
+                  </Form.Item>
+                  <Form.Item name={[field.name, 'pass']} noStyle>
+                    <Input placeholder={t('password')} />
+                  </Form.Item>
+                  <Button onClick={() => remove(field.name)}>
+                    <MinusOutlined />
+                  </Button>
+                </Space.Compact>
+              ))}
+            </Form.Item>
+          )}
+        </>
+      )}
+    </Form.List>
+  );
+}
diff --git a/frontend/src/pages/inbounds/form/protocols/http.tsx b/frontend/src/pages/inbounds/form/protocols/http.tsx
new file mode 100644
index 00000000..11806fae
--- /dev/null
+++ b/frontend/src/pages/inbounds/form/protocols/http.tsx
@@ -0,0 +1,20 @@
+import { useTranslation } from 'react-i18next';
+import { Form, Switch } from 'antd';
+
+import AccountsList from './accounts-list';
+
+export default function HttpFields() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <AccountsList />
+      <Form.Item
+        name={['settings', 'allowTransparent']}
+        label={t('pages.inbounds.form.allowTransparent')}
+        valuePropName="checked"
+      >
+        <Switch />
+      </Form.Item>
+    </>
+  );
+}
diff --git a/frontend/src/pages/inbounds/form/protocols/hysteria.tsx b/frontend/src/pages/inbounds/form/protocols/hysteria.tsx
new file mode 100644
index 00000000..a0b78c24
--- /dev/null
+++ b/frontend/src/pages/inbounds/form/protocols/hysteria.tsx
@@ -0,0 +1,27 @@
+import { useTranslation } from 'react-i18next';
+import { Form, InputNumber, type FormInstance } from 'antd';
+
+import { HysteriaMasqueradeForm } from '@/lib/xray/forms/protocols/shared';
+import type { InboundFormValues } from '@/schemas/forms/inbound-form';
+
+export default function HysteriaFields({ form }: { form: FormInstance<InboundFormValues> }) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Form.Item
+        label={t('pages.inbounds.form.version')}
+        name={['streamSettings', 'hysteriaSettings', 'version']}
+      >
+        <InputNumber min={2} max={2} disabled />
+      </Form.Item>
+      <Form.Item
+        label={t('pages.inbounds.form.udpIdleTimeout')}
+        name={['streamSettings', 'hysteriaSettings', 'udpIdleTimeout']}
+      >
+        <InputNumber min={1} style={{ width: '100%' }} />
+      </Form.Item>
+
+      <HysteriaMasqueradeForm form={form} />
+    </>
+  );
+}
diff --git a/frontend/src/pages/inbounds/form/protocols/index.ts b/frontend/src/pages/inbounds/form/protocols/index.ts
index f44af7eb..a92744e6 100644
--- a/frontend/src/pages/inbounds/form/protocols/index.ts
+++ b/frontend/src/pages/inbounds/form/protocols/index.ts
@@ -2,3 +2,7 @@ export { default as TunFields } from './tun';
 export { default as TunnelFields } from './tunnel';
 export { default as ShadowsocksFields } from './shadowsocks';
 export { default as WireguardFields } from './wireguard';
+export { default as HysteriaFields } from './hysteria';
+export { default as HttpFields } from './http';
+export { default as MixedFields } from './mixed';
+export { default as VlessFields } from './vless';
diff --git a/frontend/src/pages/inbounds/form/protocols/mixed.tsx b/frontend/src/pages/inbounds/form/protocols/mixed.tsx
new file mode 100644
index 00000000..274aa03d
--- /dev/null
+++ b/frontend/src/pages/inbounds/form/protocols/mixed.tsx
@@ -0,0 +1,33 @@
+import { useTranslation } from 'react-i18next';
+import { Form, Input, Select, Switch } from 'antd';
+
+import AccountsList from './accounts-list';
+
+export default function MixedFields({ mixedUdpOn }: { mixedUdpOn: boolean }) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <AccountsList />
+      <Form.Item name={['settings', 'auth']} label={t('pages.inbounds.info.auth')}>
+        <Select
+          options={[
+            { value: 'noauth', label: 'noauth' },
+            { value: 'password', label: 'password' },
+          ]}
+        />
+      </Form.Item>
+      <Form.Item
+        name={['settings', 'udp']}
+        label="UDP"
+        valuePropName="checked"
+      >
+        <Switch />
+      </Form.Item>
+      {mixedUdpOn && (
+        <Form.Item name={['settings', 'ip']} label="UDP IP">
+          <Input />
+        </Form.Item>
+      )}
+    </>
+  );
+}
diff --git a/frontend/src/pages/inbounds/form/protocols/vless.tsx b/frontend/src/pages/inbounds/form/protocols/vless.tsx
new file mode 100644
index 00000000..d924c880
--- /dev/null
+++ b/frontend/src/pages/inbounds/form/protocols/vless.tsx
@@ -0,0 +1,60 @@
+import { useTranslation } from 'react-i18next';
+import { Button, Form, Input, InputNumber, Space, Typography } from 'antd';
+
+interface VlessFieldsProps {
+  saving: boolean;
+  selectedVlessAuth: string;
+  network: string;
+  security: string;
+  getNewVlessEnc: (kind: 'x25519' | 'mlkem768') => void;
+  clearVlessEnc: () => void;
+}
+
+export default function VlessFields({
+  saving,
+  selectedVlessAuth,
+  network,
+  security,
+  getNewVlessEnc,
+  clearVlessEnc,
+}: VlessFieldsProps) {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Form.Item name={['settings', 'decryption']} label={t('pages.inbounds.decryption')}>
+        <Input />
+      </Form.Item>
+      <Form.Item name={['settings', 'encryption']} label={t('pages.inbounds.encryption')}>
+        <Input />
+      </Form.Item>
+      <Form.Item label=" ">
+        <Space size={8} wrap>
+          <Button type="primary" loading={saving} onClick={() => getNewVlessEnc('x25519')}>
+            {t('pages.inbounds.vlessAuthX25519')}
+          </Button>
+          <Button type="primary" loading={saving} onClick={() => getNewVlessEnc('mlkem768')}>
+            {t('pages.inbounds.vlessAuthMlkem768')}
+          </Button>
+          <Button danger onClick={clearVlessEnc}>{t('clear')}</Button>
+        </Space>
+        <Typography.Text type="secondary" className="vless-auth-state">
+          {t('pages.inbounds.vlessAuthSelected', { auth: selectedVlessAuth })}
+        </Typography.Text>
+      </Form.Item>
+      {network === 'tcp' && (security === 'tls' || security === 'reality') && (
+        <Form.Item
+          label={t('pages.inbounds.form.visionTestseed')}
+          extra="Applies only to clients using the xtls-rprx-vision flow; ignored otherwise."
+        >
+          <Space.Compact block>
+            {[900, 500, 900, 256].map((def, i) => (
+              <Form.Item key={i} name={['settings', 'testseed', i]} noStyle initialValue={def}>
+                <InputNumber min={1} style={{ width: '25%' }} />
+              </Form.Item>
+            ))}
+          </Space.Compact>
+        </Form.Item>
+      )}
+    </>
+  );
+}