From cf9920593ed472c3a889215271ef5d2b37d07a98 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Sat, 30 May 2026 16:37:25 +0200
Subject: [PATCH] refactor(frontend): extract OutboundFormModal
 loopback/blackhole/dns field blocks

Moved the outbound-only protocol field blocks (loopback, blackhole, dns) out of the modal render body into outbound-only-fields.tsx. First render-body extraction behind the per-protocol snapshot net: loopback/blackhole/dns snapshots unchanged -> verified no behavior change. typecheck/lint/build green.
---
 .../xray/outbounds/OutboundFormModal.tsx      | 82 +----------------
 .../xray/outbounds/outbound-only-fields.tsx   | 92 +++++++++++++++++++
 2 files changed, 94 insertions(+), 80 deletions(-)
 create mode 100644 frontend/src/pages/xray/outbounds/outbound-only-fields.tsx

diff --git a/frontend/src/pages/xray/outbounds/OutboundFormModal.tsx b/frontend/src/pages/xray/outbounds/OutboundFormModal.tsx
index ef6af2b5..3be86a46 100644
--- a/frontend/src/pages/xray/outbounds/OutboundFormModal.tsx
+++ b/frontend/src/pages/xray/outbounds/OutboundFormModal.tsx
@@ -36,7 +36,6 @@ import {
   type OutboundFormValues,
 } from '@/schemas/forms/outbound-form';
 import {
-  DNSRuleActions,
   DOMAIN_STRATEGY_OPTION,
   OutboundDomainStrategies,
   SNIFFING_OPTION,
@@ -75,6 +74,7 @@ import {
   isMuxAllowed,
   newStreamSlice,
 } from './outbound-form-helpers';
+import { OutboundOnlyProtocolFields } from './outbound-only-fields';
 import './OutboundFormModal.css';
 
 // Pattern A rewrite of OutboundFormModal. Built as a sibling `.new.tsx`
@@ -504,85 +504,7 @@ export default function OutboundFormModal({
                       </>
                     )}
 
-                    {protocol === 'loopback' && (
-                      <Form.Item label={t('pages.xray.outboundForm.inboundTag')} name={['settings', 'inboundTag']}>
-                        <Input placeholder={t('pages.xray.outboundForm.inboundTagPlaceholder')} />
-                      </Form.Item>
-                    )}
-
-                    {protocol === 'blackhole' && (
-                      <Form.Item label={t('pages.xray.outboundForm.responseType')} name={['settings', 'type']}>
-                        <Select
-                          options={[
-                            { value: '', label: '(empty)' },
-                            { value: 'none', label: 'none' },
-                            { value: 'http', label: 'http' },
-                          ]}
-                        />
-                      </Form.Item>
-                    )}
-
-                    {protocol === 'dns' && (
-                      <>
-                        <Form.Item label={t('pages.xray.outboundForm.rewriteNetwork')} name={['settings', 'rewriteNetwork']}>
-                          <Select
-                            allowClear
-                            placeholder={t('pages.xray.outboundForm.unchanged')}
-                            options={[
-                              { value: 'udp', label: 'udp' },
-                              { value: 'tcp', label: 'tcp' },
-                            ]}
-                          />
-                        </Form.Item>
-                        <Form.Item label={t('pages.inbounds.form.rewriteAddress')} name={['settings', 'rewriteAddress']}>
-                          <Input placeholder={t('pages.xray.outboundForm.unchangedAddress')} />
-                        </Form.Item>
-                        <Form.Item label={t('pages.inbounds.form.rewritePort')} name={['settings', 'rewritePort']}>
-                          <InputNumber min={0} max={65535} style={{ width: '100%' }} />
-                        </Form.Item>
-                        <Form.Item label={t('pages.xray.tun.userLevel')} name={['settings', 'userLevel']}>
-                          <InputNumber min={0} style={{ width: '100%' }} />
-                        </Form.Item>
-                        <Form.List name={['settings', 'rules']}>
-                          {(fields, { add, remove }) => (
-                            <>
-                              <Form.Item label={t('pages.xray.outboundForm.rules')}>
-                                <Button
-                                  size="small"
-                                  type="primary"
-                                  icon={<PlusOutlined />}
-                                  onClick={() => add({ action: 'direct', qtype: '', domain: '' })}
-                                />
-                              </Form.Item>
-                              {fields.map((field, index) => (
-                                <div key={field.key}>
-                                  <Form.Item wrapperCol={{ md: { span: 14, offset: 8 } }}>
-                                    <div className="item-heading">
-                                      <span>{t('pages.xray.outboundForm.ruleN', { n: index + 1 })}</span>
-                                      <DeleteOutlined
-                                        className="danger-icon"
-                                        onClick={() => remove(field.name)}
-                                      />
-                                    </div>
-                                  </Form.Item>
-                                  <Form.Item label={t('pages.xray.outboundForm.action')} name={[field.name, 'action']}>
-                                    <Select
-                                      options={DNSRuleActions.map((a) => ({ value: a, label: a }))}
-                                    />
-                                  </Form.Item>
-                                  <Form.Item label="QType" name={[field.name, 'qtype']}>
-                                    <Input placeholder="1,3,23-24" />
-                                  </Form.Item>
-                                  <Form.Item label={t('domainName')} name={[field.name, 'domain']}>
-                                    <Input placeholder="domain:example.com" />
-                                  </Form.Item>
-                                </div>
-                              ))}
-                            </>
-                          )}
-                        </Form.List>
-                      </>
-                    )}
+                    <OutboundOnlyProtocolFields protocol={protocol} />
 
                     {protocol === 'freedom' && (
                       <>
diff --git a/frontend/src/pages/xray/outbounds/outbound-only-fields.tsx b/frontend/src/pages/xray/outbounds/outbound-only-fields.tsx
new file mode 100644
index 00000000..e491a796
--- /dev/null
+++ b/frontend/src/pages/xray/outbounds/outbound-only-fields.tsx
@@ -0,0 +1,92 @@
+import { useTranslation } from 'react-i18next';
+import { Button, Form, Input, InputNumber, Select } from 'antd';
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+
+import { DNSRuleActions } from '@/schemas/primitives';
+
+export function OutboundOnlyProtocolFields({ protocol }: { protocol: string }) {
+  const { t } = useTranslation();
+  return (
+    <>
+      {protocol === 'loopback' && (
+        <Form.Item label={t('pages.xray.outboundForm.inboundTag')} name={['settings', 'inboundTag']}>
+          <Input placeholder={t('pages.xray.outboundForm.inboundTagPlaceholder')} />
+        </Form.Item>
+      )}
+
+      {protocol === 'blackhole' && (
+        <Form.Item label={t('pages.xray.outboundForm.responseType')} name={['settings', 'type']}>
+          <Select
+            options={[
+              { value: '', label: '(empty)' },
+              { value: 'none', label: 'none' },
+              { value: 'http', label: 'http' },
+            ]}
+          />
+        </Form.Item>
+      )}
+
+      {protocol === 'dns' && (
+        <>
+          <Form.Item label={t('pages.xray.outboundForm.rewriteNetwork')} name={['settings', 'rewriteNetwork']}>
+            <Select
+              allowClear
+              placeholder={t('pages.xray.outboundForm.unchanged')}
+              options={[
+                { value: 'udp', label: 'udp' },
+                { value: 'tcp', label: 'tcp' },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item label={t('pages.inbounds.form.rewriteAddress')} name={['settings', 'rewriteAddress']}>
+            <Input placeholder={t('pages.xray.outboundForm.unchangedAddress')} />
+          </Form.Item>
+          <Form.Item label={t('pages.inbounds.form.rewritePort')} name={['settings', 'rewritePort']}>
+            <InputNumber min={0} max={65535} style={{ width: '100%' }} />
+          </Form.Item>
+          <Form.Item label={t('pages.xray.tun.userLevel')} name={['settings', 'userLevel']}>
+            <InputNumber min={0} style={{ width: '100%' }} />
+          </Form.Item>
+          <Form.List name={['settings', 'rules']}>
+            {(fields, { add, remove }) => (
+              <>
+                <Form.Item label={t('pages.xray.outboundForm.rules')}>
+                  <Button
+                    size="small"
+                    type="primary"
+                    icon={<PlusOutlined />}
+                    onClick={() => add({ action: 'direct', qtype: '', domain: '' })}
+                  />
+                </Form.Item>
+                {fields.map((field, index) => (
+                  <div key={field.key}>
+                    <Form.Item wrapperCol={{ md: { span: 14, offset: 8 } }}>
+                      <div className="item-heading">
+                        <span>{t('pages.xray.outboundForm.ruleN', { n: index + 1 })}</span>
+                        <DeleteOutlined
+                          className="danger-icon"
+                          onClick={() => remove(field.name)}
+                        />
+                      </div>
+                    </Form.Item>
+                    <Form.Item label={t('pages.xray.outboundForm.action')} name={[field.name, 'action']}>
+                      <Select
+                        options={DNSRuleActions.map((a) => ({ value: a, label: a }))}
+                      />
+                    </Form.Item>
+                    <Form.Item label="QType" name={[field.name, 'qtype']}>
+                      <Input placeholder="1,3,23-24" />
+                    </Form.Item>
+                    <Form.Item label={t('domainName')} name={[field.name, 'domain']}>
+                      <Input placeholder="domain:example.com" />
+                    </Form.Item>
+                  </div>
+                ))}
+              </>
+            )}
+          </Form.List>
+        </>
+      )}
+    </>
+  );
+}