From b2660d43ebfd04b385aa1b929eceb9b2d1fff0a2 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Sat, 30 May 2026 20:52:57 +0200
Subject: [PATCH] refactor(frontend): break down DnsTab columns/helpers/types

Extract DnsTab's pure pieces into the dns/ folder: helpers.ts
(STRATEGIES/DEFAULT_FAKEDNS + addr/domains/expectedIPs accessors),
types.ts (DnsConfig/HostRow/FakednsRow), and useDnsColumns.tsx
(useDnsServerColumns + useFakednsColumns table-column hooks taking their
row handlers as params). DnsTab stays the orchestrator for dns state,
mutate, hosts sync and the Collapse panels, and drops from 539 to 424
lines. No behavior change.
---
 frontend/src/pages/xray/dns/DnsTab.tsx        | 131 ++----------------
 frontend/src/pages/xray/dns/helpers.ts        |  19 +++
 frontend/src/pages/xray/dns/types.ts          |  14 ++
 frontend/src/pages/xray/dns/useDnsColumns.tsx | 122 ++++++++++++++++
 4 files changed, 163 insertions(+), 123 deletions(-)
 create mode 100644 frontend/src/pages/xray/dns/helpers.ts
 create mode 100644 frontend/src/pages/xray/dns/types.ts
 create mode 100644 frontend/src/pages/xray/dns/useDnsColumns.tsx

diff --git a/frontend/src/pages/xray/dns/DnsTab.tsx b/frontend/src/pages/xray/dns/DnsTab.tsx
index 8ef3f9e4..c0ca4465 100644
--- a/frontend/src/pages/xray/dns/DnsTab.tsx
+++ b/frontend/src/pages/xray/dns/DnsTab.tsx
@@ -1,49 +1,24 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Collapse, Dropdown, Empty, Input, InputNumber, Modal, Select, Space, Switch, Table } from 'antd';
-import { PlusOutlined, MoreOutlined, EditOutlined, DeleteOutlined, MenuOutlined } from '@ant-design/icons';
-import type { ColumnsType } from 'antd/es/table';
+import { Button, Collapse, Empty, Input, InputNumber, Modal, Select, Space, Switch, Table } from 'antd';
+import { PlusOutlined, DeleteOutlined, MenuOutlined } from '@ant-design/icons';
 
 import { SettingListItem } from '@/components/ui';
 import DnsServerModal from './DnsServerModal';
 import type { DnsServerValue } from './DnsServerModal';
 import DnsPresetsModal from './DnsPresetsModal';
 import type { XraySettingsValue, SetTemplate } from '@/hooks/useXraySetting';
-import { DnsQueryStrategySchema, type DnsObject } from '@/schemas/dns';
 import './DnsTab.css';
 
+import { STRATEGIES, DEFAULT_FAKEDNS } from './helpers';
+import type { DnsConfig, HostRow, FakednsRow } from './types';
+import { useDnsServerColumns, useFakednsColumns } from './useDnsColumns';
+
 interface DnsTabProps {
   templateSettings: XraySettingsValue | null;
   setTemplateSettings: SetTemplate;
 }
 
-const STRATEGIES = DnsQueryStrategySchema.options;
-const DEFAULT_FAKEDNS = () => ({ ipPool: '198.18.0.0/15', poolSize: 65535 });
-
-type DnsConfig = Omit<DnsObject, 'servers'> & { servers?: DnsServerValue[] };
-
-interface HostRow {
-  domain: string;
-  values: string[];
-}
-
-interface FakednsRow {
-  ipPool: string;
-  poolSize: number;
-}
-
-function addrFor(server: DnsServerValue): string {
-  return typeof server === 'string' ? server : server?.address || '';
-}
-function domainsFor(server: DnsServerValue): string {
-  return typeof server === 'object' && server !== null ? (server.domains || []).join(',') : '';
-}
-function expectedIPsFor(server: DnsServerValue): string {
-  if (typeof server !== 'object' || !server) return '';
-  const list = server.expectedIPs || server.expectIPs || [];
-  return Array.isArray(list) ? list.join(',') : '';
-}
-
 export default function DnsTab({ templateSettings, setTemplateSettings }: DnsTabProps) {
   const { t } = useTranslation();
   const [modal, modalContextHolder] = Modal.useModal();
@@ -142,52 +117,7 @@ export default function DnsTab({ templateSettings, setTemplateSettings }: DnsTab
     return list.map((server, idx) => ({ key: idx, server }));
   }, [dns?.servers]);
 
-  const dnsColumns: ColumnsType<{ key: number; server: DnsServerValue }> = useMemo(
-    () => [
-      {
-        title: '#',
-        key: 'action',
-        align: 'center',
-        width: 60,
-        render: (_v, _record, index) => (
-          <Space size={6}>
-            <span className="row-index">{index + 1}</span>
-            <Dropdown
-              trigger={['click']}
-              menu={{
-                items: [
-                  { key: 'edit', label: <><EditOutlined /> {t('edit')}</>, onClick: () => openEditServer(index) },
-                  { key: 'del', danger: true, label: <><DeleteOutlined /> {t('delete')}</>, onClick: () => deleteServer(index) },
-                ],
-              }}
-            >
-              <Button shape="circle" size="small" icon={<MoreOutlined />} />
-            </Dropdown>
-          </Space>
-        ),
-      },
-      {
-        title: t('pages.inbounds.address'),
-        key: 'address',
-        align: 'left',
-        render: (_v, record) => addrFor(record.server),
-      },
-      {
-        title: t('pages.xray.dns.domains'),
-        key: 'domains',
-        align: 'left',
-        render: (_v, record) => <span className="muted">{domainsFor(record.server)}</span>,
-      },
-      {
-        title: t('pages.xray.dns.expectIPs'),
-        key: 'expectedIPs',
-        align: 'left',
-        render: (_v, record) => <span className="muted">{expectedIPsFor(record.server)}</span>,
-      },
-    ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [t],
-  );
+  const dnsColumns = useDnsServerColumns({ openEditServer, deleteServer });
 
   function openAddServer() {
     setEditingServer(null);
@@ -241,52 +171,7 @@ export default function DnsTab({ templateSettings, setTemplateSettings }: DnsTab
     return list.map((entry, idx) => ({ key: idx, ...entry }));
   }, [templateSettings?.fakedns]);
 
-  const fakednsColumns: ColumnsType<{ key: number; ipPool: string; poolSize: number }> = useMemo(
-    () => [
-      {
-        title: '#',
-        key: 'action',
-        align: 'center',
-        width: 60,
-        render: (_v, _record, index) => (
-          <Space size={6}>
-            <span className="row-index">{index + 1}</span>
-            <Button shape="circle" size="small" danger icon={<DeleteOutlined />} onClick={() => deleteFakedns(index)} />
-          </Space>
-        ),
-      },
-      {
-        title: 'IP pool',
-        dataIndex: 'ipPool',
-        key: 'ipPool',
-        align: 'left',
-        render: (_v, record, index) => (
-          <Input
-            value={record.ipPool}
-            size="small"
-            onChange={(e) => updateFakednsField(index, 'ipPool', e.target.value)}
-          />
-        ),
-      },
-      {
-        title: 'Pool size',
-        dataIndex: 'poolSize',
-        key: 'poolSize',
-        align: 'right',
-        width: 120,
-        render: (_v, record, index) => (
-          <InputNumber
-            value={record.poolSize}
-            min={1}
-            size="small"
-            onChange={(v) => updateFakednsField(index, 'poolSize', Number(v) || 0)}
-          />
-        ),
-      },
-    ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  );
+  const fakednsColumns = useFakednsColumns({ deleteFakedns, updateFakednsField });
 
   function addFakedns() {
     mutate((tt) => {
diff --git a/frontend/src/pages/xray/dns/helpers.ts b/frontend/src/pages/xray/dns/helpers.ts
new file mode 100644
index 00000000..4bdb0ed9
--- /dev/null
+++ b/frontend/src/pages/xray/dns/helpers.ts
@@ -0,0 +1,19 @@
+import { DnsQueryStrategySchema } from '@/schemas/dns';
+import type { DnsServerValue } from './DnsServerModal';
+
+export const STRATEGIES = DnsQueryStrategySchema.options;
+export const DEFAULT_FAKEDNS = () => ({ ipPool: '198.18.0.0/15', poolSize: 65535 });
+
+export function addrFor(server: DnsServerValue): string {
+  return typeof server === 'string' ? server : server?.address || '';
+}
+
+export function domainsFor(server: DnsServerValue): string {
+  return typeof server === 'object' && server !== null ? (server.domains || []).join(',') : '';
+}
+
+export function expectedIPsFor(server: DnsServerValue): string {
+  if (typeof server !== 'object' || !server) return '';
+  const list = server.expectedIPs || server.expectIPs || [];
+  return Array.isArray(list) ? list.join(',') : '';
+}
diff --git a/frontend/src/pages/xray/dns/types.ts b/frontend/src/pages/xray/dns/types.ts
new file mode 100644
index 00000000..f240fa74
--- /dev/null
+++ b/frontend/src/pages/xray/dns/types.ts
@@ -0,0 +1,14 @@
+import type { DnsObject } from '@/schemas/dns';
+import type { DnsServerValue } from './DnsServerModal';
+
+export type DnsConfig = Omit<DnsObject, 'servers'> & { servers?: DnsServerValue[] };
+
+export interface HostRow {
+  domain: string;
+  values: string[];
+}
+
+export interface FakednsRow {
+  ipPool: string;
+  poolSize: number;
+}
diff --git a/frontend/src/pages/xray/dns/useDnsColumns.tsx b/frontend/src/pages/xray/dns/useDnsColumns.tsx
new file mode 100644
index 00000000..818b5a3c
--- /dev/null
+++ b/frontend/src/pages/xray/dns/useDnsColumns.tsx
@@ -0,0 +1,122 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Dropdown, Input, InputNumber, Space } from 'antd';
+import { MoreOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import type { ColumnsType } from 'antd/es/table';
+
+import { addrFor, domainsFor, expectedIPsFor } from './helpers';
+import type { DnsServerValue } from './DnsServerModal';
+
+export type DnsServerRow = { key: number; server: DnsServerValue };
+export type FakednsTableRow = { key: number; ipPool: string; poolSize: number };
+
+export function useDnsServerColumns({
+  openEditServer,
+  deleteServer,
+}: {
+  openEditServer: (idx: number) => void;
+  deleteServer: (idx: number) => void;
+}): ColumnsType<DnsServerRow> {
+  const { t } = useTranslation();
+  return useMemo(
+    () => [
+      {
+        title: '#',
+        key: 'action',
+        align: 'center',
+        width: 60,
+        render: (_v, _record, index) => (
+          <Space size={6}>
+            <span className="row-index">{index + 1}</span>
+            <Dropdown
+              trigger={['click']}
+              menu={{
+                items: [
+                  { key: 'edit', label: <><EditOutlined /> {t('edit')}</>, onClick: () => openEditServer(index) },
+                  { key: 'del', danger: true, label: <><DeleteOutlined /> {t('delete')}</>, onClick: () => deleteServer(index) },
+                ],
+              }}
+            >
+              <Button shape="circle" size="small" icon={<MoreOutlined />} />
+            </Dropdown>
+          </Space>
+        ),
+      },
+      {
+        title: t('pages.inbounds.address'),
+        key: 'address',
+        align: 'left',
+        render: (_v, record) => addrFor(record.server),
+      },
+      {
+        title: t('pages.xray.dns.domains'),
+        key: 'domains',
+        align: 'left',
+        render: (_v, record) => <span className="muted">{domainsFor(record.server)}</span>,
+      },
+      {
+        title: t('pages.xray.dns.expectIPs'),
+        key: 'expectedIPs',
+        align: 'left',
+        render: (_v, record) => <span className="muted">{expectedIPsFor(record.server)}</span>,
+      },
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t],
+  );
+}
+
+export function useFakednsColumns({
+  deleteFakedns,
+  updateFakednsField,
+}: {
+  deleteFakedns: (idx: number) => void;
+  updateFakednsField: (idx: number, field: 'ipPool' | 'poolSize', value: string | number) => void;
+}): ColumnsType<FakednsTableRow> {
+  return useMemo(
+    () => [
+      {
+        title: '#',
+        key: 'action',
+        align: 'center',
+        width: 60,
+        render: (_v, _record, index) => (
+          <Space size={6}>
+            <span className="row-index">{index + 1}</span>
+            <Button shape="circle" size="small" danger icon={<DeleteOutlined />} onClick={() => deleteFakedns(index)} />
+          </Space>
+        ),
+      },
+      {
+        title: 'IP pool',
+        dataIndex: 'ipPool',
+        key: 'ipPool',
+        align: 'left',
+        render: (_v, record, index) => (
+          <Input
+            value={record.ipPool}
+            size="small"
+            onChange={(e) => updateFakednsField(index, 'ipPool', e.target.value)}
+          />
+        ),
+      },
+      {
+        title: 'Pool size',
+        dataIndex: 'poolSize',
+        key: 'poolSize',
+        align: 'right',
+        width: 120,
+        render: (_v, record, index) => (
+          <InputNumber
+            value={record.poolSize}
+            min={1}
+            size="small"
+            onChange={(v) => updateFakednsField(index, 'poolSize', Number(v) || 0)}
+          />
+        ),
+      },
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+}