Move to TypeScript 7 and the oxc toolchain (oxlint + oxfmt) (#6262)

* chore(frontend,docs): move to TypeScript 7 and replace ESLint with oxlint TypeScript 7 is the native Go port and ships no programmatic compiler API, so typescript-eslint cannot run at all: it peer-pins typescript >=4.8.4 <6.1.0 (canary too) and hard-crashes with "typescript-eslint does not support TS 7.0". Upstream support is tracked in typescript-eslint#10940 and targets TS >=7.1. Rather than wait, or carry Microsoft's side-by-side alias (which keeps a second TS 6 install alive purely to feed the linter), both projects move to oxlint, which never depended on the TypeScript API. Typecheck drops from ~9.7s to ~2.2s and 167 packages leave frontend/. oxlint has no no-restricted-syntax, so the #6121/#6127 cleared- InputNumber guard is reimplemented as a JS plugin in frontend/tools/oxlint/. It was verified to still fire in pages/settings/** and pages/xray/** and to stay exempt in *Modal.tsx. The type-aware @deprecated sweep survives too, as `npm run lint:deprecated`: oxlint's type-aware mode runs on oxlint-tsgolint, which drives the TS 7 typescript-go checker, so the TS 7 move is what makes it possible. Behaviour is preserved rather than tightened. jsx-a11y/prefer-tag-over-role is off in both configs because it was never part of the recommended sets ESLint actually ran, and oxlint honours the existing eslint-disable comments, so no source churn was needed. Two real fixes fell out of the stricter linting: - outbound-link-parser.test.ts used `out?.streamSettings` behind an `as` cast, which hid the optional chain from ESLint and would throw on a null parse; the rest of the file already used `out!`. - InputAddon's conditional role/tabIndex/onKeyDown is genuinely accessible but oxlint cannot evaluate it, so it gets a scoped disable. * chore(docs): replace Prettier with oxfmt oxfmt is the oxc project's Prettier-compatible formatter, so this pairs with the oxlint move and drops the last JS-based tool from the docs toolchain. The swap is behaviour-preserving. Running Prettier and oxfmt over the same files, with the existing .prettierrc.json settings migrated via `oxfmt --migrate=prettier`, produces byte-identical output on every file. (Comparing them outside the project directory is misleading: Prettier silently falls back to its defaults when it cannot find its config, which looks like a mismatch but is not one.) The 18 files reformatted here were already failing `pnpm format:check` before this change — Prettier wanted the exact same edits. The check is not part of docs-ci.yml, which is why the drift went unnoticed. .prettierignore becomes ignorePatterns in .oxfmtrc.json, keeping the deliberate MDX exclusion: reflowing MDX prose merges headings into paragraphs and collapses lists inside Steps/Callout components. Both that and the generated fumadocs-openapi reference output were verified untouched. oxfmt is pinned to 0.63.0 rather than latest. pnpm 11's built-in minimumReleaseAge policy rejects same-day releases, and 0.64.0 would have made pnpm silently append 20 waiver lines to pnpm-workspace.yaml. * style(frontend): adopt oxfmt and format src frontend/ has never had a formatter, so this reformats 344 of 497 files in src/. The change is purely whitespace, quoting and line wrapping — no logic is touched. It is kept in its own commit so it does not bury the TypeScript 7 / oxlint migration or the git blame for the code itself. Settings match docs/ and the code as it was already written: single quotes, semicolons, trailing commas, 2-space indent, 100 columns. That was measured rather than assumed — src/ was already uniformly single-quoted and 2-space indented, with p90 line length at 75. Formatting is scoped to src/ (mirroring `oxlint src`) and .oxfmtrc.json ignores src/generated. Both matter: `make gen-check` compares src/generated and public/openapi.json, and `make msw-worker-check` byte-compares public/mockServiceWorker.js against the installed MSW runtime, so reformatting any of them breaks the gate. Reflowing also moves `eslint-disable-next-line` comments off the line they guard, which broke two suppressions that had been silently correct before: - clone-inbound-modal.test.tsx: the object literal became multi-line, leaving `} as any;` four lines below its no-explicit-any disable. - ClientsPage.tsx: the useMemo dependency array moved onto its own line, out from under its exhaustive-deps disable. Both comments were relocated onto the line they actually guard, and verified to still suppress by removing them and watching the errors return. * ci: enforce formatting in CI and make verify Adding oxfmt in the previous two commits gave both projects a formatter but nothing that checks it, which is how docs/ had already drifted to 18 unformatted files: docs-ci.yml runs typecheck, lint, test and build, but never format:check, so Prettier's complaints were only ever visible to whoever ran it by hand. Wire `format:check` into the frontend job in ci.yml and the docs job in docs-ci.yml, and add a `format-check` target to `make verify` so the local gate keeps mirroring CI as the Makefile header promises. Verified the step actually bites rather than passing vacuously: adding a badly formatted line to a source file in each project makes both `make format-check` and `pnpm format:check` fail, and reverting it makes them pass again. No workflow referenced ESLint or Prettier by name — they all invoke the package scripts — so the tooling swap needed no other CI changes. * ci: trigger CI on Makefile changes The path filters listed **.go, go.mod, go.sum, frontend/**, .nvmrc and ci.yml itself, but not the Makefile — so a change to the canonical task runner that ci.yml is meant to mirror could land without any job running. The previous commit, which edits both, only triggers because it happens to touch ci.yml too. * fix(frontend): replace deprecated Ant Design 6 APIs in the geo components `npm run lint:deprecated` reported five uses of props Ant Design 6 has deprecated. All five are gone, and the matching runtime warnings no longer appear in the test output. Tag `bordered={false}` becomes `variant="filled"` and Space `direction` becomes `orientation`; both are the one-to-one replacements named in antd's own deprecation messages, and `direction`/`orientation` share the same Orientation type. Input `addonAfter` is the one that is not a rename. It becomes a `Space.Compact block` wrapping the Input and the browse Button, which is antd's documented migration. `block` keeps the field filling its form row as the addon did. Note this is a deliberate visual change: the button used to be a borderless `type="text"` icon sitting inside the addon's grey box, and is now a regular button whose border joins the input. The tooltip, aria-label, ref, id and onBlur wiring are unchanged, so the react-hook-form binding in RuleFormModal and the existing tests still address it the same way. Only these five were deprecated. The other `bordered` props in the tree sit on QRCode, Table, Descriptions and Alert, where the prop is not deprecated, and these were the only two Space `direction` uses in the codebase. * fix(frontend): restore lint rules lost in the oxlint migration, and test the guard Addresses the review on #6262. The frontend config re-enabled only no-explicit-any and no-unused-vars and left the rest of tseslint's recommended set to oxlint's correctness category. It does not cover all of it. Confirmed by linting one probe file against both configs: docs/ (which enumerates the rules) reports all nine, frontend/ reported four. So ban-ts-comment, no-empty-object-type, no-namespace, no-require-imports and no-unsafe-function-type had silently stopped being enforced — a `// @ts-ignore` or a `namespace` block would have landed unflagged. The ten rules are now mirrored from docs/.oxlintrc.json, and src/ still passes. The #6121/#6127 guard was 57 lines of hand-written AST walking with no test. It now has one: fixtures for the three banned shapes plus an onNumber()-wrapped control, asserting the rule fires three times and that .oxlintrc.json still wires it to the right paths. Verified it fails for the right reason by making walk() enumerate nothing, which is the silent-death mode the review described — the traversal depends on Object.keys() seeing AST children as own enumerable properties. The fixtures deliberately violate the rule, so their oxlint config is named guard.oxlintrc.json rather than .oxlintrc.json: oxlint discovers nested configs by directory, which would otherwise turn the fixtures into three lint errors. The test passes it explicitly with -c. Also from the review: - lint and format now cover tools/ as well as src/, so the one piece of hand-written lint logic in the repo is no longer the least covered file in it. - lint-staged runs oxfmt before oxlint --fix. Formatting became a hard CI gate in this PR while the hook only ran the linter, so a commit could pass the hook and fail CI on formatting alone. - .oxfmtrc.json ignores public/, so the artefacts that make gen-check and make msw-worker-check byte-compare stay safe even if oxfmt is invoked without a path argument. - The MDX and generated-reference rationales that .prettierignore carried are back as comments in docs/.oxfmtrc.json — oxlint and oxfmt both accept JSONC, so relocating them was unnecessary. Not applied: the review also suggested restoring ../internal/web/dist to the ignore lists. Both tools reject `..` patterns outright ("patterns are resolved within the config file's directory"), and being outside frontend/ it is unreachable anyway.
2026-09-17 07:37:15 +00:00 · 2026-08-19 15:36:27 +02:00
parent 380aff4d82
commit 92fb94d856
388 changed files with 19613 additions and 14133 deletions
@@ -3,7 +3,10 @@ type ClientCardCommentProps = {
  className?: string;
 };

-export default function ClientCardComment({ comment, className = 'client-card-comment' }: ClientCardCommentProps) {
+export default function ClientCardComment({
+  comment,
+  className = 'client-card-comment',
+}: ClientCardCommentProps) {
  if (!comment) return null;

  return (
@@ -11,4 +14,4 @@ export default function ClientCardComment({ comment, className = 'client-card-co
      {comment}
    </span>
  );
-}
+}
@@ -23,8 +23,7 @@ export function ClientSpeedTag({ speed, tableCell = false }: ClientSpeedTagProps
      style={tableCell ? SPEED_TAG_STYLE : undefined}
    >
      ↑ {SizeFormatter.speedFormat(speed.up)}
-      {' / '}
-      ↓ {SizeFormatter.speedFormat(speed.down)}
+      {' / '}↓ {SizeFormatter.speedFormat(speed.down)}
    </Tag>
  );
 }
@@ -31,7 +31,10 @@ const meta = {
    down: { description: 'Downloaded bytes counted against the client.' },
    total: { description: 'Traffic quota in bytes; 0 or less renders as unlimited.' },
    enabled: { description: 'Grays the bar out when the client is disabled.' },
-    trafficDiff: { description: 'Headroom in bytes below the quota at which the bar shifts from green to orange.' },
+    trafficDiff: {
+      description:
+        'Headroom in bytes below the quota at which the bar shifts from green to orange.',
+    },
    compact: { description: 'Smaller bar and tighter layout for dense table rows.' },
  },
 } satisfies Meta<typeof ClientTrafficCell>;
@@ -60,7 +60,9 @@ const ClientTrafficCell = memo(function ClientTrafficCell({
    'client-traffic-cell',
    compact ? 'is-compact' : '',
    display.isUnlimited ? 'is-unlimited' : '',
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(' ');

  return (
    <Popover content={popover} trigger={['hover', 'click']} placement="top">
@@ -77,7 +79,11 @@ const ClientTrafficCell = memo(function ClientTrafficCell({
        />
        <span className="client-traffic-cell-limit">
          {display.isUnlimited ? (
-            <span className="client-traffic-cell-infinity" role="img" aria-label={t('subscription.unlimited')}>
+            <span
+              className="client-traffic-cell-infinity"
+              role="img"
+              aria-label={t('subscription.unlimited')}
+            >
              <InfinityIcon />
            </span>
          ) : (
@@ -17,8 +17,13 @@ const meta = {
    },
  },
  argTypes: {
-    label: { description: 'Protocol/type badge shown on the panel header (e.g. `vless`, `trojan`).' },
-    text: { description: 'The config or share-link text to display, copy, download, and encode as a QR code.' },
+    label: {
+      description: 'Protocol/type badge shown on the panel header (e.g. `vless`, `trojan`).',
+    },
+    text: {
+      description:
+        'The config or share-link text to display, copy, download, and encode as a QR code.',
+    },
    fileName: { description: 'File name used when downloading the text.' },
    qrRemark: { description: 'Optional remark embedded in the QR panel; falls back to `label`.' },
    showQr: { description: 'Whether to show the QR-code action button.' },
@@ -31,8 +36,9 @@ export default meta;

 type Story = StoryObj<typeof meta>;

-const sampleLink = 'vless://11112222-3333-4444-5555-666677778888@panel.example.com:443'
-  + '?type=ws&security=tls&path=%2Fpath#example-node';
+const sampleLink =
+  'vless://11112222-3333-4444-5555-666677778888@panel.example.com:443' +
+  '?type=ws&security=tls&path=%2Fpath#example-node';

 export const Collapsed: Story = {
  args: { label: 'vless', text: sampleLink, fileName: 'client-config.txt' },
@@ -58,5 +64,11 @@ export const Expanded: Story = {
 };

 export const WithoutQr: Story = {
-  args: { label: 'trojan', text: sampleLink, fileName: 'client-config.txt', showQr: false, tagColor: 'geekblue' },
+  args: {
+    label: 'trojan',
+    text: sampleLink,
+    fileName: 'client-config.txt',
+    showQr: false,
+    tagColor: 'geekblue',
+  },
 };
@@ -70,12 +70,18 @@ export default function ConfigBlock({
        className="config-block"
        collapsible="header"
        defaultActiveKey={defaultOpen ? ['cfg'] : []}
-        items={[{
-          key: 'cfg',
-          label: <Tag color={tagColor} style={{ margin: 0, fontWeight: 600, letterSpacing: '0.3px' }}>{label}</Tag>,
-          extra: actions,
-          children: <code className="config-block-text">{text}</code>,
-        }]}
+        items={[
+          {
+            key: 'cfg',
+            label: (
+              <Tag color={tagColor} style={{ margin: 0, fontWeight: 600, letterSpacing: '0.3px' }}>
+                {label}
+              </Tag>
+            ),
+            extra: actions,
+            children: <code className="config-block-text">{text}</code>,
+          },
+        ]}
      />
    </>
  );
@@ -39,7 +39,9 @@ function InputDemo() {
  const [value, setValue] = useState('');
  return (
    <>
-      <Button type="primary" onClick={() => setOpen(true)}>Rename client</Button>
+      <Button type="primary" onClick={() => setOpen(true)}>
+        Rename client
+      </Button>
      <div style={{ marginTop: 12 }}>Last confirmed: {value || '—'}</div>
      <PromptModal
        open={open}
@@ -71,7 +71,11 @@ export default function PromptModal({
        <JsonEditor value={value} onChange={setValue} minHeight="240px" maxHeight="60vh" />
      ) : type === 'textarea' ? (
        <Input.TextArea
-          ref={(el) => { textareaRef.current = (el as unknown as { resizableTextArea?: { textArea: HTMLTextAreaElement } })?.resizableTextArea?.textArea ?? null; }}
+          ref={(el) => {
+            textareaRef.current =
+              (el as unknown as { resizableTextArea?: { textArea: HTMLTextAreaElement } })
+                ?.resizableTextArea?.textArea ?? null;
+          }}
          aria-label={title}
          value={value}
          onChange={(e) => setValue(e.target.value)}
@@ -21,8 +21,13 @@ const meta = {
    open: { description: 'Whether the modal is visible.' },
    title: { description: 'Modal title text.' },
    content: { description: 'Text shown when no `tabs` are provided.' },
-    fileName: { description: 'When set, adds a download button that saves the active content under this name.' },
-    json: { description: 'Render the content in a read-only JSON editor with syntax highlighting.' },
+    fileName: {
+      description:
+        'When set, adds a download button that saves the active content under this name.',
+    },
+    json: {
+      description: 'Render the content in a read-only JSON editor with syntax highlighting.',
+    },
    tabs: { description: 'Optional list of `{ key, label, content }` documents shown as tabs.' },
    onClose: { description: 'Called when the modal is dismissed.' },
  },
@@ -22,7 +22,15 @@ interface TextModalProps {
  tabs?: TextModalTab[];
 }

-export default function TextModal({ open, onClose, title, content, fileName = '', json = false, tabs }: TextModalProps) {
+export default function TextModal({
+  open,
+  onClose,
+  title,
+  content,
+  fileName = '',
+  json = false,
+  tabs,
+}: TextModalProps) {
  const { t } = useTranslation();
  const [messageApi, messageContextHolder] = message.useMessage();
  const [activeKey, setActiveKey] = useState('');
@@ -55,37 +63,41 @@ export default function TextModal({ open, onClose, title, content, fileName = ''
        title={title}
        onCancel={onClose}
        destroyOnHidden
-      footer={(
-        <>
-          {fileName && (
-            <Button icon={<DownloadOutlined />} onClick={download}>{fileName}</Button>
-          )}
-          <Button type="primary" icon={<CopyOutlined />} onClick={copy}>{t('copy')}</Button>
-        </>
-      )}
-    >
-      {tabs && tabs.length > 0 && (
-        <Tabs
-          activeKey={activeTab?.key}
-          onChange={setActiveKey}
-          items={tabs.map((tab) => ({ key: tab.key, label: tab.label }))}
-        />
-      )}
-      {json ? (
-        <JsonEditor value={activeContent} readOnly minHeight="240px" maxHeight="60vh" />
-      ) : (
-        <Input.TextArea
-          aria-label={title}
-          value={activeContent}
-          readOnly
-          autoSize={{ minRows: 10, maxRows: 20 }}
-          style={{
-            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-            fontSize: 12,
-            overflowY: 'auto',
-          }}
-        />
-      )}
+        footer={
+          <>
+            {fileName && (
+              <Button icon={<DownloadOutlined />} onClick={download}>
+                {fileName}
+              </Button>
+            )}
+            <Button type="primary" icon={<CopyOutlined />} onClick={copy}>
+              {t('copy')}
+            </Button>
+          </>
+        }
+      >
+        {tabs && tabs.length > 0 && (
+          <Tabs
+            activeKey={activeTab?.key}
+            onChange={setActiveKey}
+            items={tabs.map((tab) => ({ key: tab.key, label: tab.label }))}
+          />
+        )}
+        {json ? (
+          <JsonEditor value={activeContent} readOnly minHeight="240px" maxHeight="60vh" />
+        ) : (
+          <Input.TextArea
+            aria-label={title}
+            value={activeContent}
+            readOnly
+            autoSize={{ minRows: 10, maxRows: 20 }}
+            style={{
+              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+              fontSize: 12,
+              overflowY: 'auto',
+            }}
+          />
+        )}
      </Modal>
    </>
  );
@@ -27,7 +27,7 @@

 .jdp-dark input::placeholder,
 .jdp-ultra input::placeholder {
-  color: rgba(255, 255, 255, 0.30) !important;
+  color: rgba(255, 255, 255, 0.3) !important;
 }

 .jdp-disabled {
@@ -62,7 +62,7 @@
 }

 .jdp-dark .jdp-clear {
-  color: rgba(255, 255, 255, 0.30);
+  color: rgba(255, 255, 255, 0.3);
 }

 .jdp-dark .jdp-clear:hover,
@@ -17,7 +17,9 @@ function ClientExpiryDemo() {
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <DateTimePicker value={value} onChange={setValue} placeholder="Expiry date" />
      <Typography.Text type="secondary">
-        {value ? `user1@node-de expiryTime: ${value.valueOf()}` : 'user1@node-de expiryTime: 0 (never expires)'}
+        {value
+          ? `user1@node-de expiryTime: ${value.valueOf()}`
+          : 'user1@node-de expiryTime: 0 (never expires)'}
      </Typography.Text>
    </div>
  );
@@ -90,7 +90,10 @@ export default function DateTimePicker({

  if (datepicker === 'jalalian') {
    return (
-      <div ref={jalaliRef} className={`jdp-wrap${isDark ? ' jdp-dark' : ''}${isUltra ? ' jdp-ultra' : ''}${disabled ? ' jdp-disabled' : ''}${value ? '' : ' jdp-empty'}`}>
+      <div
+        ref={jalaliRef}
+        className={`jdp-wrap${isDark ? ' jdp-dark' : ''}${isUltra ? ' jdp-ultra' : ''}${disabled ? ' jdp-disabled' : ''}${value ? '' : ' jdp-empty'}`}
+      >
        <PersianDateTimePicker
          key={clearNonce}
          value={value ? value.valueOf() : null}
@@ -17,9 +17,17 @@ const meta = {
    },
  },
  argTypes: {
-    mode: { description: 'Wire shape: `v1` = string per name, `v2` = string[] per name (repeatable headers).' },
-    value: { description: 'Header map in the wire shape matching `mode`; converted to editable rows internally.' },
-    onChange: { description: 'Called with the rebuilt wire-shape map after every row edit, add, or remove.' },
+    mode: {
+      description:
+        'Wire shape: `v1` = string per name, `v2` = string[] per name (repeatable headers).',
+    },
+    value: {
+      description:
+        'Header map in the wire shape matching `mode`; converted to editable rows internally.',
+    },
+    onChange: {
+      description: 'Called with the rebuilt wire-shape map after every row edit, add, or remove.',
+    },
  },
 } satisfies Meta<typeof HeaderMapEditor>;

@@ -63,7 +71,14 @@ function WireShapeDemo() {
  return (
    <div style={{ maxWidth: 560 }}>
      <HeaderMapEditor mode="v2" value={value} onChange={setValue} />
-      <pre style={{ marginTop: 16, padding: 12, borderRadius: 8, background: 'rgba(128, 128, 128, 0.12)' }}>
+      <pre
+        style={{
+          marginTop: 16,
+          padding: 12,
+          borderRadius: 8,
+          background: 'rgba(128, 128, 128, 0.12)',
+        }}
+      >
        {JSON.stringify(value ?? {}, null, 2)}
      </pre>
    </div>
@@ -24,10 +24,7 @@ import { InputAddon } from '@/components/ui';

 export type HeaderMapMode = 'v1' | 'v2';

-export type HeaderMapValue =
-  | Record<string, string>
-  | Record<string, string[]>
-  | undefined;
+export type HeaderMapValue = Record<string, string> | Record<string, string[]> | undefined;

 interface HeaderRow {
  name: string;
@@ -55,7 +52,10 @@ function mapToRows(value: HeaderMapValue): HeaderRow[] {
  return out;
 }

-function rowsToMap(rows: HeaderRow[], mode: HeaderMapMode): Record<string, string> | Record<string, string[]> {
+function rowsToMap(
+  rows: HeaderRow[],
+  mode: HeaderMapMode,
+): Record<string, string> | Record<string, string[]> {
  if (mode === 'v1') {
    const map: Record<string, string> = {};
    for (const r of rows) {
@@ -132,7 +132,11 @@ export default function HeaderMapEditor({ mode, value, onChange }: HeaderMapEdit
            placeholder="Value"
            onChange={(e) => setRow(idx, { value: e.target.value })}
          />
-          <Button aria-label={t('remove')} icon={<MinusOutlined />} onClick={() => removeRow(idx)} />
+          <Button
+            aria-label={t('remove')}
+            icon={<MinusOutlined />}
+            onClick={() => removeRow(idx)}
+          />
        </Space.Compact>
      ))}
      <Button size="small" type="primary" icon={<PlusOutlined />} onClick={addRow}>
@@ -45,8 +45,9 @@ function buildDarkTheme({ bg, panelBg, activeBg, border, selection }: DarkPalett
      },
      '.cm-activeLine': { backgroundColor: activeBg },
      '.cm-activeLineGutter': { backgroundColor: activeBg, color: '#dcdcdc' },
-      '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
-        { backgroundColor: selection },
+      '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+        backgroundColor: selection,
+      },
      '.cm-panels': { backgroundColor: panelBg, color: '#dcdcdc' },
      '.cm-panels.cm-panels-top': { borderBottom: `1px solid ${border}` },
      '.cm-panels.cm-panels-bottom': { borderTop: `1px solid ${border}` },
@@ -17,7 +17,10 @@ const meta = {
    },
  },
  argTypes: {
-    value: { description: 'Current template string; any {{VAR}} token enables the live preview below the input.' },
+    value: {
+      description:
+        'Current template string; any {{VAR}} token enables the live preview below the input.',
+    },
    onChange: { description: 'Called with the updated template on typing or token insertion.' },
    maxLength: { description: 'Maximum template length; picker insertions are clamped to it.' },
    placeholder: { description: 'Placeholder shown while the template is empty.' },
@@ -30,7 +33,14 @@ type Story = StoryObj<typeof meta>;

 function InteractiveDemo() {
  const [value, setValue] = useState('{{STATUS_EMOJI}} {{INBOUND}}-{{EMAIL}} | {{TRAFFIC_LEFT}}');
-  return <RemarkTemplateField value={value} onChange={setValue} maxLength={256} placeholder="{{INBOUND}}-{{EMAIL}}" />;
+  return (
+    <RemarkTemplateField
+      value={value}
+      onChange={setValue}
+      maxLength={256}
+      placeholder="{{INBOUND}}-{{EMAIL}}"
+    />
+  );
 }

 export const Empty: Story = {
@@ -5,7 +5,12 @@ import type { TextAreaRef } from 'antd/es/input/TextArea';
 import { CodeOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';

-import { hasRemarkTokens, previewRemark, SUBSCRIPTION_METADATA_VARIABLES, wrapToken } from '@/lib/remark/remarkVariables';
+import {
+  hasRemarkTokens,
+  previewRemark,
+  SUBSCRIPTION_METADATA_VARIABLES,
+  wrapToken,
+} from '@/lib/remark/remarkVariables';
 import RemarkVarPicker from './RemarkVarPicker';

 interface RemarkTemplateFieldProps {
@@ -24,7 +29,15 @@ interface RemarkTemplateFieldProps {
 * (insert-at-caret) and a live, sample-based preview of the expanded result.
 * Used for subscription text fields that support Remark Template variables.
 */
-export default function RemarkTemplateField({ value = '', onChange, maxLength, placeholder, multiline = false, rows, metadataOnly = false }: RemarkTemplateFieldProps) {
+export default function RemarkTemplateField({
+  value = '',
+  onChange,
+  maxLength,
+  placeholder,
+  multiline = false,
+  rows,
+  metadataOnly = false,
+}: RemarkTemplateFieldProps) {
  const { t } = useTranslation();
  const inputRef = useRef<InputRef>(null);
  const textAreaRef = useRef<TextAreaRef>(null);
@@ -60,7 +73,13 @@ export default function RemarkTemplateField({ value = '', onChange, maxLength, p
      title={t('pages.hosts.remarkVars.title')}
    >
      <Tooltip title={t('pages.hosts.remarkVars.title')}>
-        <Button type="text" size="small" icon={<CodeOutlined />} aria-label={t('pages.hosts.remarkVars.title')} style={{ marginInlineEnd: -7 }} />
+        <Button
+          type="text"
+          size="small"
+          icon={<CodeOutlined />}
+          aria-label={t('pages.hosts.remarkVars.title')}
+          style={{ marginInlineEnd: -7 }}
+        />
      </Tooltip>
    </Popover>
  );
@@ -92,7 +111,9 @@ export default function RemarkTemplateField({ value = '', onChange, maxLength, p
      {hasRemarkTokens(value) && (
        <div style={{ fontSize: 12, marginTop: 4, opacity: 0.7 }}>
          {t('pages.hosts.remarkVars.preview')}:{' '}
-          <span style={{ fontFamily: 'monospace' }}>{previewRemark(value, variables, metadataOnly) || '—'}</span>
+          <span style={{ fontFamily: 'monospace' }}>
+            {previewRemark(value, variables, metadataOnly) || '—'}
+          </span>
        </div>
      )}
    </div>
@@ -20,7 +20,10 @@ const meta = {
    },
  },
  argTypes: {
-    onPick: { description: 'Called with the bare token (e.g. "EMAIL") when a chip is clicked or activated via keyboard.' },
+    onPick: {
+      description:
+        'Called with the bare token (e.g. "EMAIL") when a chip is clicked or activated via keyboard.',
+    },
  },
 } satisfies Meta<typeof RemarkVarPicker>;

@@ -29,7 +32,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;

 function TemplateBuilderDemo() {
-  const [template, setTemplate] = useState('{{INBOUND}}-{{EMAIL}} {{STATUS_EMOJI}} {{TRAFFIC_LEFT}} left');
+  const [template, setTemplate] = useState(
+    '{{INBOUND}}-{{EMAIL}} {{STATUS_EMOJI}} {{TRAFFIC_LEFT}} left',
+  );
  return (
    <div style={{ maxWidth: 520 }}>
      <Input
@@ -15,35 +15,50 @@ interface RemarkVarPickerProps {
 * RemarkVarPicker is the grouped, tooltipped chip list of {{VAR}} tokens used by
 * the global remark-template field.
 */
-export default function RemarkVarPicker({ onPick, variables = REMARK_VARIABLES }: RemarkVarPickerProps) {
+export default function RemarkVarPicker({
+  onPick,
+  variables = REMARK_VARIABLES,
+}: RemarkVarPickerProps) {
  const { t } = useTranslation();
  return (
    <div style={{ maxWidth: 460, maxHeight: 'min(70vh, 640px)', overflowY: 'auto' }}>
      <Typography.Paragraph type="secondary" style={{ fontSize: 12, marginBottom: 8 }}>
        {t('pages.hosts.remarkVars.intro')}
      </Typography.Paragraph>
-      {REMARK_VAR_GROUPS.filter((group) => variables.some((v) => v.group === group)).map((group) => (
-        <div key={group} style={{ marginBottom: 8 }}>
-          <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', opacity: 0.6, marginBottom: 4 }}>
-            {t(`pages.hosts.remarkVars.groups.${group}`)}
+      {REMARK_VAR_GROUPS.filter((group) => variables.some((v) => v.group === group)).map(
+        (group) => (
+          <div key={group} style={{ marginBottom: 8 }}>
+            <div
+              style={{
+                fontSize: 11,
+                fontWeight: 600,
+                textTransform: 'uppercase',
+                opacity: 0.6,
+                marginBottom: 4,
+              }}
+            >
+              {t(`pages.hosts.remarkVars.groups.${group}`)}
+            </div>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
+              {variables
+                .filter((v) => v.group === group)
+                .map((v) => (
+                  <Tooltip key={v.token} title={t(`pages.hosts.remarkVars.desc${v.token}`)}>
+                    <Tag
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => onPick(v.token)}
+                      onKeyDown={activateOnKey(() => onPick(v.token))}
+                      style={{ cursor: 'pointer', margin: 0, fontFamily: 'monospace' }}
+                    >
+                      {wrapToken(v.token)}
+                    </Tag>
+                  </Tooltip>
+                ))}
+            </div>
          </div>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
-            {variables.filter((v) => v.group === group).map((v) => (
-              <Tooltip key={v.token} title={t(`pages.hosts.remarkVars.desc${v.token}`)}>
-                <Tag
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => onPick(v.token)}
-                  onKeyDown={activateOnKey(() => onPick(v.token))}
-                  style={{ cursor: 'pointer', margin: 0, fontFamily: 'monospace' }}
-                >
-                  {wrapToken(v.token)}
-                </Tag>
-              </Tooltip>
-            ))}
-          </div>
-        </div>
-      ))}
+        ),
+      )}
    </div>
  );
 }
@@ -33,11 +33,23 @@ const meta = {
    },
  },
  argTypes: {
-    options: { description: 'Option list whose values define the "all" set; matches the AntD Select option shape.' },
+    options: {
+      description:
+        'Option list whose values define the "all" set; matches the AntD Select option shape.',
+    },
    value: { description: 'Currently selected values (controlled).' },
-    onChange: { description: 'Called with the union of the current selection and every option value, or with an empty array on clear.' },
-    selectAllLabel: { description: 'Override for the "Select all" button text; defaults to the translated inbound copy.' },
-    clearLabel: { description: 'Override for the "Clear all" button text; defaults to the translated inbound copy.' },
+    onChange: {
+      description:
+        'Called with the union of the current selection and every option value, or with an empty array on clear.',
+    },
+    selectAllLabel: {
+      description:
+        'Override for the "Select all" button text; defaults to the translated inbound copy.',
+    },
+    clearLabel: {
+      description:
+        'Override for the "Clear all" button text; defaults to the translated inbound copy.',
+    },
  },
 } satisfies Meta<typeof SelectAllClearButtons>;

@@ -35,11 +35,7 @@ export default function SelectAllClearButtons<T extends string | number = number
      >
        {selectAllLabel ?? t('pages.clients.selectAllInbounds')}
      </Button>
-      <Button
-        size="small"
-        disabled={value.length === 0}
-        onClick={() => onChange([])}
-      >
+      <Button size="small" disabled={value.length === 0} onClick={() => onChange([])}>
        {clearLabel ?? t('pages.clients.clearAllInbounds')}
      </Button>
    </div>
@@ -25,14 +25,24 @@ const meta = {
  },
  argTypes: {
    name: { description: 'Field path — a dotted string or an array of segments joined with dots.' },
-    control: { description: 'Optional react-hook-form control; falls back to the surrounding FormProvider.' },
+    control: {
+      description: 'Optional react-hook-form control; falls back to the surrounding FormProvider.',
+    },
    label: { description: 'Form.Item label.' },
    tooltip: { description: 'Form.Item tooltip shown next to the label.' },
    extra: { description: 'Helper text rendered below the input.' },
-    valueProp: { description: 'Prop the child receives the value on: `value` (default) or `checked` for switches.' },
-    transform: { description: 'Optional input/output mappers, e.g. bytes stored in the form but GB shown in the input.' },
+    valueProp: {
+      description:
+        'Prop the child receives the value on: `value` (default) or `checked` for switches.',
+    },
+    transform: {
+      description:
+        'Optional input/output mappers, e.g. bytes stored in the form but GB shown in the input.',
+    },
    onAfterChange: { description: 'Called with the stored value after every change.' },
-    rules: { description: 'Controller-level validation rules applied on top of the form resolver.' },
+    rules: {
+      description: 'Controller-level validation rules applied on top of the form resolver.',
+    },
    required: { description: 'Marks the label with the required asterisk.' },
    noStyle: { description: 'Render the bare input without Form.Item chrome.' },
    children: { description: 'The single Ant Design control to wire up.' },
@@ -56,7 +66,12 @@ function ClientDemo() {
  return (
    <FormProvider {...methods}>
      <Form layout="vertical" style={{ maxWidth: 360 }}>
-        <FormField name="email" label="Email" tooltip="Unique identifier used to match client traffic" required>
+        <FormField
+          name="email"
+          label="Email"
+          tooltip="Unique identifier used to match client traffic"
+          required
+        >
          <Input placeholder="user1@example.com" />
        </FormField>
        <FormField name="flow" label="Flow" extra="Only applies to VLESS over raw TLS">
@@ -96,7 +111,9 @@ function TrafficDemo() {
        >
          <InputNumber min={0} style={{ width: '100%' }} />
        </FormField>
-        <Typography.Text type="secondary">Form state: {totalBytes.toLocaleString()} bytes</Typography.Text>
+        <Typography.Text type="secondary">
+          Form state: {totalBytes.toLocaleString()} bytes
+        </Typography.Text>
      </Form>
    </FormProvider>
  );
@@ -7,7 +7,9 @@ export function useZodForm<TFieldValues extends FieldValues>(
  schema: z.ZodType<TFieldValues>,
  options?: Omit<UseFormProps<TFieldValues>, 'resolver'>,
 ): UseFormReturn<TFieldValues> {
-  const resolver = zodResolver(schema as z.ZodType<TFieldValues, TFieldValues>) as Resolver<TFieldValues>;
+  const resolver = zodResolver(
+    schema as z.ZodType<TFieldValues, TFieldValues>,
+  ) as Resolver<TFieldValues>;
  return useForm<TFieldValues>({
    mode: 'onSubmit',
    reValidateMode: 'onChange',
@@ -42,7 +42,9 @@ function deactivate(routes: GeoRoutes): void {
 function GeoApi({ routes, children }: { routes: GeoRoutes; children: ReactNode }) {
  const [client] = useState(() => {
    activate(routes);
-    return new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } });
+    return new QueryClient({
+      defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+    });
  });
  useEffect(() => {
    activate(routes);
@@ -61,121 +63,379 @@ const cross = (names: string[], suffixes: string[]): GeoEntry[] =>
  names.flatMap((name) => suffixes.map((suffix) => domain(`${name}.${suffix}`)));

 const CC_TLDS = [
-  'ae', 'al', 'am', 'at', 'az', 'ba', 'be', 'bg', 'bi', 'bj', 'ca', 'cat', 'cd', 'cf', 'cg', 'ch',
-  'ci', 'cl', 'cm', 'co.id', 'co.il', 'co.in', 'co.jp', 'co.ke', 'co.kr', 'co.ma', 'co.nz', 'co.th',
-  'co.uk', 'co.uz', 'co.ve', 'co.za', 'com.ar', 'com.au', 'com.bd', 'com.br', 'com.co', 'com.cu',
-  'com.eg', 'com.gt', 'com.hk', 'com.mx', 'com.my', 'com.ng', 'com.pe', 'com.ph', 'com.pk',
-  'com.sa', 'com.sg', 'com.tr', 'com.tw', 'com.ua', 'com.uy', 'com.vn', 'cz', 'de', 'dj', 'dk',
-  'dz', 'ee', 'es', 'fi', 'fr', 'ga', 'ge', 'gl', 'gm', 'gr', 'hn', 'hr', 'ht', 'hu', 'ie', 'iq',
-  'is', 'it', 'je', 'jo', 'kg', 'kz', 'la', 'li', 'lk', 'lt', 'lu', 'lv', 'ly', 'md', 'me', 'mg',
-  'mk', 'ml', 'mn', 'mu', 'mv', 'mw', 'ne', 'nl', 'no', 'nu', 'pl', 'pt', 'ro', 'rs', 'ru', 'rw',
-  'se', 'sh', 'si', 'sk', 'sm', 'sn', 'so', 'sr', 'st', 'td', 'tg', 'tk', 'tl', 'tm', 'tn', 'to',
-  'tt', 'vg', 'vu', 'ws',
+  'ae',
+  'al',
+  'am',
+  'at',
+  'az',
+  'ba',
+  'be',
+  'bg',
+  'bi',
+  'bj',
+  'ca',
+  'cat',
+  'cd',
+  'cf',
+  'cg',
+  'ch',
+  'ci',
+  'cl',
+  'cm',
+  'co.id',
+  'co.il',
+  'co.in',
+  'co.jp',
+  'co.ke',
+  'co.kr',
+  'co.ma',
+  'co.nz',
+  'co.th',
+  'co.uk',
+  'co.uz',
+  'co.ve',
+  'co.za',
+  'com.ar',
+  'com.au',
+  'com.bd',
+  'com.br',
+  'com.co',
+  'com.cu',
+  'com.eg',
+  'com.gt',
+  'com.hk',
+  'com.mx',
+  'com.my',
+  'com.ng',
+  'com.pe',
+  'com.ph',
+  'com.pk',
+  'com.sa',
+  'com.sg',
+  'com.tr',
+  'com.tw',
+  'com.ua',
+  'com.uy',
+  'com.vn',
+  'cz',
+  'de',
+  'dj',
+  'dk',
+  'dz',
+  'ee',
+  'es',
+  'fi',
+  'fr',
+  'ga',
+  'ge',
+  'gl',
+  'gm',
+  'gr',
+  'hn',
+  'hr',
+  'ht',
+  'hu',
+  'ie',
+  'iq',
+  'is',
+  'it',
+  'je',
+  'jo',
+  'kg',
+  'kz',
+  'la',
+  'li',
+  'lk',
+  'lt',
+  'lu',
+  'lv',
+  'ly',
+  'md',
+  'me',
+  'mg',
+  'mk',
+  'ml',
+  'mn',
+  'mu',
+  'mv',
+  'mw',
+  'ne',
+  'nl',
+  'no',
+  'nu',
+  'pl',
+  'pt',
+  'ro',
+  'rs',
+  'ru',
+  'rw',
+  'se',
+  'sh',
+  'si',
+  'sk',
+  'sm',
+  'sn',
+  'so',
+  'sr',
+  'st',
+  'td',
+  'tg',
+  'tk',
+  'tl',
+  'tm',
+  'tn',
+  'to',
+  'tt',
+  'vg',
+  'vu',
+  'ws',
 ];

 const AD_HOSTS = [
-  'adform', 'adnxs', 'adroll', 'adsrvr', 'amplitude', 'appsflyer', 'bluekai', 'branch',
-  'casalemedia', 'criteo', 'flurry', 'moatads', 'mopub', 'openx', 'outbrain', 'pubmatic',
-  'quantserve', 'rubiconproject', 'scorecardresearch', 'sharethrough', 'smartadserver', 'taboola',
-  'teads', 'yieldmo', 'zemanta',
+  'adform',
+  'adnxs',
+  'adroll',
+  'adsrvr',
+  'amplitude',
+  'appsflyer',
+  'bluekai',
+  'branch',
+  'casalemedia',
+  'criteo',
+  'flurry',
+  'moatads',
+  'mopub',
+  'openx',
+  'outbrain',
+  'pubmatic',
+  'quantserve',
+  'rubiconproject',
+  'scorecardresearch',
+  'sharethrough',
+  'smartadserver',
+  'taboola',
+  'teads',
+  'yieldmo',
+  'zemanta',
 ];

 const CN_BRANDS = [
-  '58', 'alibaba', 'alipay', 'aliyun', 'baidu', 'bilibili', 'cnblogs', 'csdn', 'ctrip', 'douban',
-  'gitee', 'huawei', 'iqiyi', 'jd', 'kuaishou', 'meituan', 'netease', 'pinduoduo', 'qq', 'sina',
-  'sohu', 'taobao', 'tencent', 'tmall', 'toutiao', 'weibo', 'xiaomi', 'youku', 'zhihu',
+  '58',
+  'alibaba',
+  'alipay',
+  'aliyun',
+  'baidu',
+  'bilibili',
+  'cnblogs',
+  'csdn',
+  'ctrip',
+  'douban',
+  'gitee',
+  'huawei',
+  'iqiyi',
+  'jd',
+  'kuaishou',
+  'meituan',
+  'netease',
+  'pinduoduo',
+  'qq',
+  'sina',
+  'sohu',
+  'taobao',
+  'tencent',
+  'tmall',
+  'toutiao',
+  'weibo',
+  'xiaomi',
+  'youku',
+  'zhihu',
 ];

 const SITE_ENTRIES: Record<string, GeoEntry[]> = {
  amazon: [
-    domain('amazon.com'), domain('amazonaws.com'), domain('media-amazon.com'),
-    domain('ssl-images-amazon.com'), domain('primevideo.com'), domain('awsstatic.com'),
-    domain('cloudfront.net'), full('www.amazon.co.jp'),
+    domain('amazon.com'),
+    domain('amazonaws.com'),
+    domain('media-amazon.com'),
+    domain('ssl-images-amazon.com'),
+    domain('primevideo.com'),
+    domain('awsstatic.com'),
+    domain('cloudfront.net'),
+    full('www.amazon.co.jp'),
  ],
  apple: [
-    domain('apple.com'), domain('icloud.com'), domain('cdn-apple.com'), domain('mzstatic.com'),
-    domain('apple-cloudkit.com'), domain('itunes.com'), domain('me.com'), domain('appstore.com'),
+    domain('apple.com'),
+    domain('icloud.com'),
+    domain('cdn-apple.com'),
+    domain('mzstatic.com'),
+    domain('apple-cloudkit.com'),
+    domain('itunes.com'),
+    domain('me.com'),
+    domain('appstore.com'),
  ],
  'category-ads': [
-    domain('adcolony.com'), domain('applovin.com'), domain('chartboost.com'),
-    domain('inmobi.com'), domain('unityads.unity3d.com'), keyword('banner-ad'),
+    domain('adcolony.com'),
+    domain('applovin.com'),
+    domain('chartboost.com'),
+    domain('inmobi.com'),
+    domain('unityads.unity3d.com'),
+    keyword('banner-ad'),
  ],
  'category-ads-all': [
-    domain('doubleclick.net'), domain('googleadservices.com'), domain('googlesyndication.com'),
-    domain('adservice.google.com'), full('ads.yahoo.com'), keyword('adservice'),
-    keyword('advertising'), regexp('^ad[0-9]{1,3}\\.'), ...cross(AD_HOSTS, ['com', 'net', 'io', 'ru']),
+    domain('doubleclick.net'),
+    domain('googleadservices.com'),
+    domain('googlesyndication.com'),
+    domain('adservice.google.com'),
+    full('ads.yahoo.com'),
+    keyword('adservice'),
+    keyword('advertising'),
+    regexp('^ad[0-9]{1,3}\\.'),
+    ...cross(AD_HOSTS, ['com', 'net', 'io', 'ru']),
  ],
  cloudflare: [
-    domain('cloudflare.com'), domain('cloudflare-dns.com'), domain('cloudflareinsights.com'),
-    domain('workers.dev'), domain('pages.dev'), domain('cf-ipfs.com'),
+    domain('cloudflare.com'),
+    domain('cloudflare-dns.com'),
+    domain('cloudflareinsights.com'),
+    domain('workers.dev'),
+    domain('pages.dev'),
+    domain('cf-ipfs.com'),
  ],
  cn: [full('www.gov.cn'), keyword('chinanet'), ...cross(CN_BRANDS, ['com', 'cn', 'com.cn'])],
  discord: [
-    domain('discord.com'), domain('discord.gg'), domain('discordapp.com'),
-    domain('discordapp.net'), domain('discord.media'),
+    domain('discord.com'),
+    domain('discord.gg'),
+    domain('discordapp.com'),
+    domain('discordapp.net'),
+    domain('discord.media'),
  ],
  facebook: [
-    domain('facebook.com'), domain('fbcdn.net'), domain('fb.com'), domain('messenger.com'),
-    domain('fbsbx.com'), domain('facebook.net'), full('m.facebook.com'),
+    domain('facebook.com'),
+    domain('fbcdn.net'),
+    domain('fb.com'),
+    domain('messenger.com'),
+    domain('fbsbx.com'),
+    domain('facebook.net'),
+    full('m.facebook.com'),
  ],
  'geolocation-!cn': [
-    keyword('proxy'), regexp('.*\\.onion$'), domain('wikipedia.org'), domain('bbc.com'),
-    domain('nytimes.com'), domain('reuters.com'), domain('medium.com'), domain('reddit.com'),
+    keyword('proxy'),
+    regexp('.*\\.onion$'),
+    domain('wikipedia.org'),
+    domain('bbc.com'),
+    domain('nytimes.com'),
+    domain('reuters.com'),
+    domain('medium.com'),
+    domain('reddit.com'),
  ],
  'geolocation-cn': [
-    domain('gov.cn'), domain('edu.cn'), domain('org.cn'), domain('net.cn'),
+    domain('gov.cn'),
+    domain('edu.cn'),
+    domain('org.cn'),
+    domain('net.cn'),
    ...cross(CN_BRANDS.slice(0, 18), ['cn']),
  ],
  github: [
-    domain('github.com'), domain('githubusercontent.com'), domain('githubassets.com'),
-    domain('github.io'), domain('ghcr.io'), domain('git.io'),
+    domain('github.com'),
+    domain('githubusercontent.com'),
+    domain('githubassets.com'),
+    domain('github.io'),
+    domain('ghcr.io'),
+    domain('git.io'),
  ],
  google: [
-    domain('google.com'), domain('googleapis.com'), domain('gstatic.com'),
-    domain('googleusercontent.com'), domain('google-analytics.com'), domain('googletagmanager.com'),
-    domain('ggpht.com'), domain('withgoogle.com'), domain('android.com'), domain('chromium.org'),
-    domain('abc.xyz'), full('dl.google.com'), ...CC_TLDS.map((tld) => domain(`google.${tld}`)),
+    domain('google.com'),
+    domain('googleapis.com'),
+    domain('gstatic.com'),
+    domain('googleusercontent.com'),
+    domain('google-analytics.com'),
+    domain('googletagmanager.com'),
+    domain('ggpht.com'),
+    domain('withgoogle.com'),
+    domain('android.com'),
+    domain('chromium.org'),
+    domain('abc.xyz'),
+    full('dl.google.com'),
+    ...CC_TLDS.map((tld) => domain(`google.${tld}`)),
  ],
  instagram: [domain('instagram.com'), domain('cdninstagram.com'), domain('ig.me')],
  microsoft: [
-    domain('microsoft.com'), domain('live.com'), domain('office.com'), domain('office365.com'),
-    domain('windows.net'), domain('windowsupdate.com'), domain('msn.com'), domain('azure.com'),
-    domain('sharepoint.com'), domain('skype.com'), domain('bing.com'),
+    domain('microsoft.com'),
+    domain('live.com'),
+    domain('office.com'),
+    domain('office365.com'),
+    domain('windows.net'),
+    domain('windowsupdate.com'),
+    domain('msn.com'),
+    domain('azure.com'),
+    domain('sharepoint.com'),
+    domain('skype.com'),
+    domain('bing.com'),
  ],
  netflix: [
-    domain('netflix.com'), domain('netflix.net'), domain('nflximg.com'), domain('nflximg.net'),
-    domain('nflxvideo.net'), domain('nflxso.net'), domain('nflxext.com'), full('fast.com'),
+    domain('netflix.com'),
+    domain('netflix.net'),
+    domain('nflximg.com'),
+    domain('nflximg.net'),
+    domain('nflxvideo.net'),
+    domain('nflxso.net'),
+    domain('nflxext.com'),
+    full('fast.com'),
  ],
  openai: [
-    domain('openai.com'), domain('chatgpt.com'), domain('oaistatic.com'),
-    domain('oaiusercontent.com'), domain('sora.com'),
+    domain('openai.com'),
+    domain('chatgpt.com'),
+    domain('oaistatic.com'),
+    domain('oaiusercontent.com'),
+    domain('sora.com'),
  ],
  spotify: [
-    domain('spotify.com'), domain('scdn.co'), domain('spotifycdn.com'), domain('spoti.fi'),
+    domain('spotify.com'),
+    domain('scdn.co'),
+    domain('spotifycdn.com'),
+    domain('spoti.fi'),
    domain('spotifycdn.net'),
  ],
  steam: [
-    domain('steampowered.com'), domain('steamcommunity.com'), domain('steamstatic.com'),
-    domain('steamcontent.com'), domain('valvesoftware.com'),
+    domain('steampowered.com'),
+    domain('steamcommunity.com'),
+    domain('steamstatic.com'),
+    domain('steamcontent.com'),
+    domain('valvesoftware.com'),
  ],
  telegram: [
-    domain('telegram.org'), domain('telegram.me'), domain('t.me'), domain('telesco.pe'),
-    domain('tdesktop.com'), domain('telegra.ph'), domain('cdn-telegram.org'),
-    full('comments.app'), keyword('telegram'),
+    domain('telegram.org'),
+    domain('telegram.me'),
+    domain('t.me'),
+    domain('telesco.pe'),
+    domain('tdesktop.com'),
+    domain('telegra.ph'),
+    domain('cdn-telegram.org'),
+    full('comments.app'),
+    keyword('telegram'),
  ],
  tiktok: [
-    domain('tiktok.com'), domain('tiktokcdn.com'), domain('tiktokv.com'),
-    domain('byteoversea.com'), domain('ibytedtos.com'), domain('musical.ly'),
+    domain('tiktok.com'),
+    domain('tiktokcdn.com'),
+    domain('tiktokv.com'),
+    domain('byteoversea.com'),
+    domain('ibytedtos.com'),
+    domain('musical.ly'),
  ],
  twitch: [domain('twitch.tv'), domain('ttvnw.net'), domain('jtvnw.net'), domain('twitchcdn.net')],
  twitter: [
-    domain('twitter.com'), domain('x.com'), domain('t.co'), domain('twimg.com'),
+    domain('twitter.com'),
+    domain('x.com'),
+    domain('t.co'),
+    domain('twimg.com'),
    domain('periscope.tv'),
  ],
  whatsapp: [domain('whatsapp.com'), domain('whatsapp.net'), domain('wa.me')],
  youtube: [
-    domain('youtube.com'), domain('youtu.be'), domain('ytimg.com'), domain('googlevideo.com'),
-    domain('youtube-nocookie.com'), domain('yt.be'),
+    domain('youtube.com'),
+    domain('youtu.be'),
+    domain('ytimg.com'),
+    domain('googlevideo.com'),
+    domain('youtube-nocookie.com'),
+    domain('yt.be'),
  ],
 };

@@ -192,68 +452,206 @@ const SITE_ATTRIBUTES: Record<string, string[]> = {
 };

 const CN_BLOCKS = [
-  '1.0.1.0/24', '1.0.2.0/23', '1.0.8.0/21', '14.0.12.0/22', '27.0.128.0/21', '36.0.0.0/22',
-  '39.0.0.0/24', '42.0.0.0/22', '58.14.0.0/15', '59.32.0.0/11', '61.128.0.0/10', '101.16.0.0/12',
-  '103.1.8.0/22', '106.0.0.0/10', '110.6.0.0/15', '111.0.0.0/10', '112.0.0.0/10', '113.0.0.0/9',
-  '114.28.0.0/16', '116.0.0.0/9', '117.8.0.0/13', '118.24.0.0/15', '119.0.0.0/9', '120.0.0.0/10',
-  '121.0.0.0/8', '124.0.0.0/8', '125.32.0.0/11', '139.196.0.0/14', '140.75.0.0/16', '175.0.0.0/12',
-  '180.76.0.0/16', '182.16.0.0/12', '183.0.0.0/10', '202.0.0.0/12', '203.0.0.0/12', '210.0.0.0/12',
-  '211.64.0.0/11', '218.0.0.0/9', '219.72.0.0/14', '220.112.0.0/12', '221.0.0.0/9', '222.16.0.0/12',
-  '2001:250::/35', '2400:3200::/32', '2408:8000::/20',
+  '1.0.1.0/24',
+  '1.0.2.0/23',
+  '1.0.8.0/21',
+  '14.0.12.0/22',
+  '27.0.128.0/21',
+  '36.0.0.0/22',
+  '39.0.0.0/24',
+  '42.0.0.0/22',
+  '58.14.0.0/15',
+  '59.32.0.0/11',
+  '61.128.0.0/10',
+  '101.16.0.0/12',
+  '103.1.8.0/22',
+  '106.0.0.0/10',
+  '110.6.0.0/15',
+  '111.0.0.0/10',
+  '112.0.0.0/10',
+  '113.0.0.0/9',
+  '114.28.0.0/16',
+  '116.0.0.0/9',
+  '117.8.0.0/13',
+  '118.24.0.0/15',
+  '119.0.0.0/9',
+  '120.0.0.0/10',
+  '121.0.0.0/8',
+  '124.0.0.0/8',
+  '125.32.0.0/11',
+  '139.196.0.0/14',
+  '140.75.0.0/16',
+  '175.0.0.0/12',
+  '180.76.0.0/16',
+  '182.16.0.0/12',
+  '183.0.0.0/10',
+  '202.0.0.0/12',
+  '203.0.0.0/12',
+  '210.0.0.0/12',
+  '211.64.0.0/11',
+  '218.0.0.0/9',
+  '219.72.0.0/14',
+  '220.112.0.0/12',
+  '221.0.0.0/9',
+  '222.16.0.0/12',
+  '2001:250::/35',
+  '2400:3200::/32',
+  '2408:8000::/20',
 ];

-const CN_EXTRA_BLOCKS = Array.from({ length: 96 }, (_, index) =>
-  `${39 + Math.floor(index / 16)}.${(index % 16) * 16}.0.0/12`,
+const CN_EXTRA_BLOCKS = Array.from(
+  { length: 96 },
+  (_, index) => `${39 + Math.floor(index / 16)}.${(index % 16) * 16}.0.0/12`,
 );

 const IP_ENTRIES: Record<string, GeoEntry[]> = {
  cloudflare: [
-    '103.21.244.0/22', '103.22.200.0/22', '103.31.4.0/22', '104.16.0.0/13', '104.24.0.0/14',
-    '108.162.192.0/18', '131.0.72.0/22', '141.101.64.0/18', '162.158.0.0/15', '172.64.0.0/13',
-    '173.245.48.0/20', '188.114.96.0/20', '190.93.240.0/20', '197.234.240.0/22', '198.41.128.0/17',
-    '2400:cb00::/32', '2606:4700::/32',
+    '103.21.244.0/22',
+    '103.22.200.0/22',
+    '103.31.4.0/22',
+    '104.16.0.0/13',
+    '104.24.0.0/14',
+    '108.162.192.0/18',
+    '131.0.72.0/22',
+    '141.101.64.0/18',
+    '162.158.0.0/15',
+    '172.64.0.0/13',
+    '173.245.48.0/20',
+    '188.114.96.0/20',
+    '190.93.240.0/20',
+    '197.234.240.0/22',
+    '198.41.128.0/17',
+    '2400:cb00::/32',
+    '2606:4700::/32',
  ].map(cidr),
  cn: [...CN_BLOCKS, ...CN_EXTRA_BLOCKS].map(cidr),
  facebook: [
-    '31.13.24.0/21', '31.13.64.0/18', '66.220.144.0/20', '69.63.176.0/20', '69.171.224.0/19',
-    '157.240.0.0/16', '179.60.192.0/22', '185.60.216.0/22', '2a03:2880::/32',
+    '31.13.24.0/21',
+    '31.13.64.0/18',
+    '66.220.144.0/20',
+    '69.63.176.0/20',
+    '69.171.224.0/19',
+    '157.240.0.0/16',
+    '179.60.192.0/22',
+    '185.60.216.0/22',
+    '2a03:2880::/32',
  ].map(cidr),
  google: [
-    '8.8.4.0/24', '8.8.8.0/24', '34.64.0.0/10', '35.184.0.0/13', '64.233.160.0/19', '66.102.0.0/20',
-    '72.14.192.0/18', '74.125.0.0/16', '108.177.8.0/21', '142.250.0.0/15', '172.217.0.0/16',
-    '216.58.192.0/19', '2404:6800::/32', '2607:f8b0::/32',
+    '8.8.4.0/24',
+    '8.8.8.0/24',
+    '34.64.0.0/10',
+    '35.184.0.0/13',
+    '64.233.160.0/19',
+    '66.102.0.0/20',
+    '72.14.192.0/18',
+    '74.125.0.0/16',
+    '108.177.8.0/21',
+    '142.250.0.0/15',
+    '172.217.0.0/16',
+    '216.58.192.0/19',
+    '2404:6800::/32',
+    '2607:f8b0::/32',
  ].map(cidr),
  ir: [
-    '2.144.0.0/14', '5.22.0.0/17', '31.2.128.0/17', '37.32.0.0/19', '46.32.0.0/19', '78.38.0.0/15',
-    '80.191.0.0/16', '85.15.0.0/18', '91.98.0.0/15', '178.22.72.0/21', '185.8.172.0/22',
-    '188.34.0.0/17', '217.218.0.0/15',
+    '2.144.0.0/14',
+    '5.22.0.0/17',
+    '31.2.128.0/17',
+    '37.32.0.0/19',
+    '46.32.0.0/19',
+    '78.38.0.0/15',
+    '80.191.0.0/16',
+    '85.15.0.0/18',
+    '91.98.0.0/15',
+    '178.22.72.0/21',
+    '185.8.172.0/22',
+    '188.34.0.0/17',
+    '217.218.0.0/15',
  ].map(cidr),
  netflix: [
-    '23.246.0.0/18', '37.77.184.0/21', '45.57.0.0/17', '64.120.128.0/17', '66.197.128.0/17',
-    '108.175.32.0/20', '185.2.220.0/22', '192.173.64.0/18', '198.38.96.0/19', '198.45.48.0/20',
+    '23.246.0.0/18',
+    '37.77.184.0/21',
+    '45.57.0.0/17',
+    '64.120.128.0/17',
+    '66.197.128.0/17',
+    '108.175.32.0/20',
+    '185.2.220.0/22',
+    '192.173.64.0/18',
+    '198.38.96.0/19',
+    '198.45.48.0/20',
  ].map(cidr),
  private: [
-    '0.0.0.0/8', '10.0.0.0/8', '100.64.0.0/10', '127.0.0.0/8', '169.254.0.0/16', '172.16.0.0/12',
-    '192.0.0.0/24', '192.0.2.0/24', '192.168.0.0/16', '198.18.0.0/15', '198.51.100.0/24',
-    '203.0.113.0/24', '224.0.0.0/4', '240.0.0.0/4', '255.255.255.255/32', '::1/128', 'fc00::/7',
+    '0.0.0.0/8',
+    '10.0.0.0/8',
+    '100.64.0.0/10',
+    '127.0.0.0/8',
+    '169.254.0.0/16',
+    '172.16.0.0/12',
+    '192.0.0.0/24',
+    '192.0.2.0/24',
+    '192.168.0.0/16',
+    '198.18.0.0/15',
+    '198.51.100.0/24',
+    '203.0.113.0/24',
+    '224.0.0.0/4',
+    '240.0.0.0/4',
+    '255.255.255.255/32',
+    '::1/128',
+    'fc00::/7',
    'fe80::/10',
  ].map(cidr),
  ru: [
-    '2.60.0.0/14', '5.8.0.0/19', '31.6.0.0/17', '37.9.0.0/19', '46.16.0.0/21', '62.76.0.0/18',
-    '77.37.128.0/17', '78.24.216.0/21', '79.104.0.0/15', '80.64.128.0/19', '81.16.96.0/19',
-    '82.140.128.0/18', '85.113.0.0/16', '87.226.0.0/16', '91.77.0.0/16', '93.157.0.0/17',
-    '94.19.0.0/16', '95.24.0.0/13', '178.176.0.0/13', '188.128.0.0/13', '213.87.0.0/16',
-    '217.66.152.0/21', '2a00:1148::/32',
+    '2.60.0.0/14',
+    '5.8.0.0/19',
+    '31.6.0.0/17',
+    '37.9.0.0/19',
+    '46.16.0.0/21',
+    '62.76.0.0/18',
+    '77.37.128.0/17',
+    '78.24.216.0/21',
+    '79.104.0.0/15',
+    '80.64.128.0/19',
+    '81.16.96.0/19',
+    '82.140.128.0/18',
+    '85.113.0.0/16',
+    '87.226.0.0/16',
+    '91.77.0.0/16',
+    '93.157.0.0/17',
+    '94.19.0.0/16',
+    '95.24.0.0/13',
+    '178.176.0.0/13',
+    '188.128.0.0/13',
+    '213.87.0.0/16',
+    '217.66.152.0/21',
+    '2a00:1148::/32',
  ].map(cidr),
  telegram: [
-    '91.108.4.0/22', '91.108.8.0/22', '91.108.12.0/22', '91.108.16.0/22', '91.108.20.0/22',
-    '91.108.56.0/22', '149.154.160.0/20', '2001:67c:4e8::/48', '2001:b28:f23d::/48',
+    '91.108.4.0/22',
+    '91.108.8.0/22',
+    '91.108.12.0/22',
+    '91.108.16.0/22',
+    '91.108.20.0/22',
+    '91.108.56.0/22',
+    '149.154.160.0/20',
+    '2001:67c:4e8::/48',
+    '2001:b28:f23d::/48',
    '2001:b28:f23f::/48',
  ].map(cidr),
  us: [
-    '3.0.0.0/9', '12.0.0.0/8', '23.192.0.0/11', '34.192.0.0/10', '50.16.0.0/14', '52.0.0.0/10',
-    '63.64.0.0/11', '65.0.0.0/10', '68.32.0.0/11', '71.0.0.0/11', '96.0.0.0/9', '128.0.0.0/10',
-    '199.0.0.0/12', '208.64.0.0/12', '2600:1f00::/24',
+    '3.0.0.0/9',
+    '12.0.0.0/8',
+    '23.192.0.0/11',
+    '34.192.0.0/10',
+    '50.16.0.0/14',
+    '52.0.0.0/10',
+    '63.64.0.0/11',
+    '65.0.0.0/10',
+    '68.32.0.0/11',
+    '71.0.0.0/11',
+    '96.0.0.0/9',
+    '128.0.0.0/10',
+    '199.0.0.0/12',
+    '208.64.0.0/12',
+    '2600:1f00::/24',
  ].map(cidr),
 };

@@ -305,10 +703,11 @@ const OVERSIZED_FILE: GeoFile = {
  error: 'geodata file is too large to browse',
 };

-const DATASETS: Record<string, { categories: GeoCategory[]; entries: Record<string, GeoEntry[]> }> = {
-  'geosite.dat': { categories: SITE_CATEGORIES, entries: SITE_ENTRIES },
-  'geoip.dat': { categories: IP_CATEGORIES, entries: IP_ENTRIES },
-};
+const DATASETS: Record<string, { categories: GeoCategory[]; entries: Record<string, GeoEntry[]> }> =
+  {
+    'geosite.dat': { categories: SITE_CATEGORIES, entries: SITE_ENTRIES },
+    'geoip.dat': { categories: IP_CATEGORIES, entries: IP_ENTRIES },
+  };

 function routesFor(files: GeoFile[]): GeoRoutes {
  return {
@@ -316,7 +715,9 @@ function routesFor(files: GeoFile[]): GeoRoutes {
    '/panel/api/xray/geodata/categories': (query) => {
      const dataset = DATASETS[query.get('file') ?? ''];
      const needle = (query.get('q') ?? '').trim().toLowerCase();
-      const items = (dataset?.categories ?? []).filter((category) => category.code.includes(needle));
+      const items = (dataset?.categories ?? []).filter((category) =>
+        category.code.includes(needle),
+      );
      return { total: items.length, items };
    },
    '/panel/api/xray/geodata/entries': (query) => {
@@ -351,7 +752,7 @@ function BrowserDemo(props: GeoBrowserModalProps) {
  useEffect(() => setOpen(props.open), [props.open]);
  useEffect(() => setValue(props.value), [props.value]);
  return (
-    <Space direction="vertical" size={12}>
+    <Space orientation="vertical" size={12}>
      <Space size={8}>
        <Button onClick={() => setOpen(true)}>Open geo browser</Button>
        <Typography.Text code>{value || 'no rule yet'}</Typography.Text>
@@ -398,12 +799,14 @@ const meta = {
  argTypes: {
    open: { description: 'Whether the modal is visible.' },
    kind: {
-      description: 'Which database layout the rule targets: `site` for domain rules, `ip` for CIDR rules. Decides the preselected database and the token prefix.',
+      description:
+        'Which database layout the rule targets: `site` for domain rules, `ip` for CIDR rules. Decides the preselected database and the token prefix.',
      control: 'inline-radio',
      options: ['site', 'ip'],
    },
    value: {
-      description: 'Current rule string, comma separated. Tokens that match a category in the opened database come back preselected.',
+      description:
+        'Current rule string, comma separated. Tokens that match a category in the opened database come back preselected.',
    },
    onApply: { description: 'Called with the merged rule string when Apply is pressed.' },
    onClose: { description: 'Called when the modal is dismissed.' },
@@ -1,6 +1,19 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Alert, Button, Empty, Input, Modal, Pagination, Select, Space, Table, Tag, Tooltip, Typography } from 'antd';
+import {
+  Alert,
+  Button,
+  Empty,
+  Input,
+  Modal,
+  Pagination,
+  Select,
+  Space,
+  Table,
+  Tag,
+  Tooltip,
+  Typography,
+} from 'antd';
 import type { ColumnsType } from 'antd/es/table';

 import { useGeodataCategories, useGeodataEntries, useGeodataFiles } from '@/api/queries/useGeodata';
@@ -25,7 +38,9 @@ export interface GeoBrowserModalProps {
 // A geosite category inside an ip rule (or the reverse) is a config Xray will
 // reject, so a field only ever offers databases of its own kind.
 function databasesFor(files: GeoFile[], kind: GeoKind): GeoFile[] {
-  return files.filter((file) => file.kind === kind || (file.error && namePrefersKind(file.name, kind)));
+  return files.filter(
+    (file) => file.kind === kind || (file.error && namePrefersKind(file.name, kind)),
+  );
 }

 function namePrefersKind(name: string, kind: GeoKind): boolean {
@@ -38,7 +53,13 @@ function preferredFile(files: GeoFile[], kind: GeoKind): string | undefined {
  return usable.find((file) => file.name === preferredName)?.name ?? usable[0]?.name;
 }

-export default function GeoBrowserModal({ open, kind, value, onApply, onClose }: GeoBrowserModalProps) {
+export default function GeoBrowserModal({
+  open,
+  kind,
+  value,
+  onApply,
+  onClose,
+}: GeoBrowserModalProps) {
  const { t } = useTranslation();
  const [file, setFile] = useState<string | undefined>(undefined);
  const [categoryQuery, setCategoryQuery] = useState('');
@@ -120,7 +141,10 @@ export default function GeoBrowserModal({ open, kind, value, onApply, onClose }:
    seededFilesRef.current.add(file);
    const fromValue = selectionFromValue(value, new Set(tokens));
    if (fromValue.length > 0) {
-      setSelected((previous) => [...previous, ...fromValue.filter((token) => !previous.includes(token))]);
+      setSelected((previous) => [
+        ...previous,
+        ...fromValue.filter((token) => !previous.includes(token)),
+      ]);
    }
  }, [open, file, categories, fileKind, value]);

@@ -149,7 +173,9 @@ export default function GeoBrowserModal({ open, kind, value, onApply, onClose }:
      // The table reports keys for the rows it currently shows, so a selection
      // made before the search box was narrowed must survive untouched.
      const shown = new Set(
-        visibleCategories.map((category) => canonicalToken(tokenFor(file, category.code, fileKind))),
+        visibleCategories.map((category) =>
+          canonicalToken(tokenFor(file, category.code, fileKind)),
+        ),
      );
      setSelected((previous) => {
        const kept = previous.filter((token) => {
@@ -157,7 +183,10 @@ export default function GeoBrowserModal({ open, kind, value, onApply, onClose }:
          return !shown.has(canonical) || chosenCanonical.has(canonical);
        });
        const keptCanonical = new Set(kept.map(canonicalToken));
-        return [...kept, ...[...chosen].filter((token) => !keptCanonical.has(canonicalToken(token)))];
+        return [
+          ...kept,
+          ...[...chosen].filter((token) => !keptCanonical.has(canonicalToken(token))),
+        ];
      });
    },
    [visibleCategories, file, fileKind],
@@ -174,7 +203,7 @@ export default function GeoBrowserModal({ open, kind, value, onApply, onClose }:
            {category.attributes?.length > 0 && (
              <span className="geo-attrs">
                {category.attributes.map((attribute) => (
-                  <Tag key={attribute} bordered={false}>
+                  <Tag key={attribute} variant="filled">
                    @{attribute}
                  </Tag>
                ))}
@@ -199,7 +228,7 @@ export default function GeoBrowserModal({ open, kind, value, onApply, onClose }:
        dataIndex: 'kind',
        width: 88,
        render: (entryKind: string) => (
-          <Tag bordered={false} className={`geo-kind geo-kind-${entryKind}`}>
+          <Tag variant="filled" className={`geo-kind geo-kind-${entryKind}`}>
            {entryKind}
          </Tag>
        ),
@@ -214,7 +243,9 @@ export default function GeoBrowserModal({ open, kind, value, onApply, onClose }:

  const fileOptions = files.map((candidate) => ({
    value: candidate.name,
-    label: candidate.error ? `${candidate.name} — ${describeFileError(candidate.error, t)}` : candidate.name,
+    label: candidate.error
+      ? `${candidate.name} — ${describeFileError(candidate.error, t)}`
+      : candidate.name,
    disabled: !!candidate.error,
  }));

@@ -229,9 +260,14 @@ export default function GeoBrowserModal({ open, kind, value, onApply, onClose }:
  const entriesTotal = entriesQuery.data?.total ?? 0;
  const activeCategory = categories.find((category) => category.code === activeCode);
  const countLabel = activeCategory
-    ? t(fileKind === 'ip' ? 'pages.xray.geoBrowser.subnetsCount' : 'pages.xray.geoBrowser.entriesCount', {
-        count: activeCategory.entries.toLocaleString(),
-      })
+    ? t(
+        fileKind === 'ip'
+          ? 'pages.xray.geoBrowser.subnetsCount'
+          : 'pages.xray.geoBrowser.entriesCount',
+        {
+          count: activeCategory.entries.toLocaleString(),
+        },
+      )
    : '';

  return (
@@ -245,7 +281,14 @@ export default function GeoBrowserModal({ open, kind, value, onApply, onClose }:
      cancelText={t('close')}
      className="geo-browser-modal"
    >
-      {filesQuery.isError && <Alert type="error" showIcon title={t('pages.xray.geoBrowser.loadFailed')} className="mb-12" />}
+      {filesQuery.isError && (
+        <Alert
+          type="error"
+          showIcon
+          title={t('pages.xray.geoBrowser.loadFailed')}
+          className="mb-12"
+        />
+      )}

      {!filesQuery.isError && !filesQuery.isLoading && files.length === 0 ? (
        <Empty
@@ -253,7 +296,9 @@ export default function GeoBrowserModal({ open, kind, value, onApply, onClose }:
            <span>
              {t('pages.xray.geoBrowser.noFiles')}
              <br />
-              <Typography.Text type="secondary">{t('pages.xray.geoBrowser.noFilesHint')}</Typography.Text>
+              <Typography.Text type="secondary">
+                {t('pages.xray.geoBrowser.noFilesHint')}
+              </Typography.Text>
            </span>
          }
        />
@@ -279,7 +324,9 @@ export default function GeoBrowserModal({ open, kind, value, onApply, onClose }:
              allowClear
            />
            <Button
-              onClick={() => toggle([...new Set([...selectedCodes, ...visibleCategories.map((c) => c.code)])])}
+              onClick={() =>
+                toggle([...new Set([...selectedCodes, ...visibleCategories.map((c) => c.code)])])
+              }
              disabled={visibleCategories.length === 0}
            >
              {`${t('pages.xray.geoBrowser.selectFound')} (${visibleCategories.length.toLocaleString()})`}
@@ -296,7 +343,11 @@ export default function GeoBrowserModal({ open, kind, value, onApply, onClose }:
                rowKey="code"
                columns={categoryColumns}
                dataSource={visibleCategories}
-                loading={filesQuery.isLoading || categoriesQuery.isLoading || categoriesQuery.isPlaceholderData}
+                loading={
+                  filesQuery.isLoading ||
+                  categoriesQuery.isLoading ||
+                  categoriesQuery.isPlaceholderData
+                }
                pagination={false}
                scroll={{ y: CATEGORY_SCROLL_HEIGHT }}
                locale={{ emptyText: t('pages.xray.geoBrowser.noMatches') }}
@@ -308,7 +359,8 @@ export default function GeoBrowserModal({ open, kind, value, onApply, onClose }:
                }}
                onRow={(category) => ({
                  onClick: (event) => {
-                    if ((event.target as HTMLElement).closest('.ant-table-selection-column')) return;
+                    if ((event.target as HTMLElement).closest('.ant-table-selection-column'))
+                      return;
                    setActiveCode(category.code);
                    clearEntryFilter();
                  },
@@ -369,7 +421,9 @@ export default function GeoBrowserModal({ open, kind, value, onApply, onClose }:
                </>
              ) : (
                <div className="geo-placeholder">
-                  <Typography.Text type="secondary">{t('pages.xray.geoBrowser.pickCategory')}</Typography.Text>
+                  <Typography.Text type="secondary">
+                    {t('pages.xray.geoBrowser.pickCategory')}
+                  </Typography.Text>
                </div>
              )}
            </div>
@@ -377,7 +431,9 @@ export default function GeoBrowserModal({ open, kind, value, onApply, onClose }:

          <div className="geo-footer">
            {selected.length === 0 ? (
-              <Typography.Text type="secondary">{t('pages.xray.geoBrowser.emptySelection')}</Typography.Text>
+              <Typography.Text type="secondary">
+                {t('pages.xray.geoBrowser.emptySelection')}
+              </Typography.Text>
            ) : (
              <>
                <Space size={4} wrap className="geo-chips">
@@ -386,7 +442,9 @@ export default function GeoBrowserModal({ open, kind, value, onApply, onClose }:
                      key={token}
                      closable
                      color="processing"
-                      onClose={() => setSelected((previous) => previous.filter((item) => item !== token))}
+                      onClose={() =>
+                        setSelected((previous) => previous.filter((item) => item !== token))
+                      }
                    >
                      {token}
                    </Tag>
@@ -44,7 +44,9 @@ function deactivate(routes: GeoRoutes): void {
 function GeoApi({ routes, children }: { routes: GeoRoutes; children: ReactNode }) {
  const [client] = useState(() => {
    activate(routes);
-    return new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } });
+    return new QueryClient({
+      defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+    });
  });
  useEffect(() => {
    activate(routes);
@@ -58,25 +60,55 @@ const cidr = (value: string): GeoEntry => ({ kind: 'cidr', value });

 const SITE_ENTRIES: Record<string, GeoEntry[]> = {
  'category-ads-all': [
-    domain('doubleclick.net'), domain('googleadservices.com'), domain('googlesyndication.com'),
-    domain('criteo.com'), domain('taboola.com'), domain('outbrain.com'),
+    domain('doubleclick.net'),
+    domain('googleadservices.com'),
+    domain('googlesyndication.com'),
+    domain('criteo.com'),
+    domain('taboola.com'),
+    domain('outbrain.com'),
+  ],
+  cn: [
+    domain('baidu.com'),
+    domain('qq.com'),
+    domain('taobao.com'),
+    domain('weibo.com'),
+    domain('bilibili.com'),
  ],
-  cn: [domain('baidu.com'), domain('qq.com'), domain('taobao.com'), domain('weibo.com'), domain('bilibili.com')],
  google: [
-    domain('google.com'), domain('googleapis.com'), domain('gstatic.com'),
-    domain('googleusercontent.com'), domain('ggpht.com'), domain('android.com'),
+    domain('google.com'),
+    domain('googleapis.com'),
+    domain('gstatic.com'),
+    domain('googleusercontent.com'),
+    domain('ggpht.com'),
+    domain('android.com'),
+  ],
+  netflix: [
+    domain('netflix.com'),
+    domain('nflximg.net'),
+    domain('nflxvideo.net'),
+    domain('fast.com'),
  ],
-  netflix: [domain('netflix.com'), domain('nflximg.net'), domain('nflxvideo.net'), domain('fast.com')],
  telegram: [domain('telegram.org'), domain('t.me'), domain('telesco.pe'), domain('telegra.ph')],
-  youtube: [domain('youtube.com'), domain('youtu.be'), domain('ytimg.com'), domain('googlevideo.com')],
+  youtube: [
+    domain('youtube.com'),
+    domain('youtu.be'),
+    domain('ytimg.com'),
+    domain('googlevideo.com'),
+  ],
 };

 const IP_ENTRIES: Record<string, GeoEntry[]> = {
  cloudflare: ['104.16.0.0/13', '172.64.0.0/13', '2606:4700::/32'].map(cidr),
  cn: ['1.0.1.0/24', '36.0.0.0/22', '116.0.0.0/9', '2408:8000::/20'].map(cidr),
  private: [
-    '10.0.0.0/8', '127.0.0.0/8', '169.254.0.0/16', '172.16.0.0/12', '192.168.0.0/16',
-    '::1/128', 'fc00::/7', 'fe80::/10',
+    '10.0.0.0/8',
+    '127.0.0.0/8',
+    '169.254.0.0/16',
+    '172.16.0.0/12',
+    '192.168.0.0/16',
+    '::1/128',
+    'fc00::/7',
+    'fe80::/10',
  ].map(cidr),
  telegram: ['91.108.4.0/22', '149.154.160.0/20', '2001:b28:f23d::/48'].map(cidr),
 };
@@ -95,10 +127,14 @@ function categoriesOf(
    .map((code) => ({ code, entries: entries[code].length, attributes: attributes[code] ?? [] }));
 }

-const DATASETS: Record<string, { categories: GeoCategory[]; entries: Record<string, GeoEntry[]> }> = {
-  'geosite.dat': { categories: categoriesOf(SITE_ENTRIES, SITE_ATTRIBUTES), entries: SITE_ENTRIES },
-  'geoip.dat': { categories: categoriesOf(IP_ENTRIES), entries: IP_ENTRIES },
-};
+const DATASETS: Record<string, { categories: GeoCategory[]; entries: Record<string, GeoEntry[]> }> =
+  {
+    'geosite.dat': {
+      categories: categoriesOf(SITE_ENTRIES, SITE_ATTRIBUTES),
+      entries: SITE_ENTRIES,
+    },
+    'geoip.dat': { categories: categoriesOf(IP_ENTRIES), entries: IP_ENTRIES },
+  };

 const UPDATED_AT = Date.UTC(2026, 6, 24, 3, 12);

@@ -125,7 +161,9 @@ function referenceOf(token: string, isIP: boolean): { file: string; code: string
  if (prefix === 'geosite') return { file: 'geosite.dat', code: code(rest.join(':')) };
  if (prefix === 'geoip') return { file: 'geoip.dat', code: code(rest.join(':')) };
  if (prefix === 'ext') return { file: rest[0] ?? '', code: code(rest.slice(1).join(':')) };
-  return isIP && prefix === 'ext-ip' ? { file: rest[0] ?? '', code: code(rest.slice(1).join(':')) } : null;
+  return isIP && prefix === 'ext-ip'
+    ? { file: rest[0] ?? '', code: code(rest.slice(1).join(':')) }
+    : null;
 }

 function validate(tokens: string[], isIP: boolean): GeodataTokenIssue[] {
@@ -180,7 +218,7 @@ function ControlledTokenInput({ value = '', id = 'geo-rule', ...rest }: GeoToken
  const [current, setCurrent] = useState(value);
  useEffect(() => setCurrent(value), [value]);
  return (
-    <Space direction="vertical" size={4} style={{ width: 460 }}>
+    <Space orientation="vertical" size={4} style={{ width: 460 }}>
      <label htmlFor={id}>{rest.kind === 'ip' ? 'Target IP' : 'Target domain'}</label>
      <GeoTokenInput {...rest} id={id} value={current} onChange={setCurrent} />
    </Space>
@@ -209,10 +247,15 @@ const meta = {
  args: { kind: 'domain' },
  argTypes: {
    value: { description: 'Comma separated rule string held by the parent form.' },
-    onChange: { description: 'Called with the full rule string on every edit and on Apply from the browser.' },
-    onBlur: { description: 'Forwarded to the input; used by React Hook Form to mark the field touched.' },
+    onChange: {
+      description: 'Called with the full rule string on every edit and on Apply from the browser.',
+    },
+    onBlur: {
+      description: 'Forwarded to the input; used by React Hook Form to mark the field touched.',
+    },
    kind: {
-      description: 'Which database the tokens are validated against: `domain` for geosite, `ip` for geoip.',
+      description:
+        'Which database the tokens are validated against: `domain` for geosite, `ip` for geoip.',
      control: 'inline-radio',
      options: ['domain', 'ip'],
    },
@@ -242,6 +285,8 @@ export const UnknownCategory: Story = {
  args: { kind: 'domain', value: 'geosite:blabla, geosite:google' },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
-    await expect(await canvas.findByText(/geosite:blabla/, undefined, { timeout: 3000 })).toBeVisible();
+    await expect(
+      await canvas.findByText(/geosite:blabla/, undefined, { timeout: 3000 }),
+    ).toBeVisible();
  },
 };
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import type { Ref } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Input, Tooltip, Typography } from 'antd';
+import { Button, Input, Space, Tooltip, Typography } from 'antd';
 import type { InputRef } from 'antd';
 import { DatabaseOutlined } from '@ant-design/icons';

@@ -33,7 +33,15 @@ export interface GeoTokenInputProps {
  ref?: Ref<InputRef>;
 }

-export default function GeoTokenInput({ value = '', onChange, onBlur, kind, placeholder, id, ref }: GeoTokenInputProps) {
+export default function GeoTokenInput({
+  value = '',
+  onChange,
+  onBlur,
+  kind,
+  placeholder,
+  id,
+  ref,
+}: GeoTokenInputProps) {
  const { t } = useTranslation();
  const [browsing, setBrowsing] = useState(false);
  const [issues, setIssues] = useState<GeodataTokenIssue[]>([]);
@@ -72,25 +80,23 @@ export default function GeoTokenInput({ value = '', onChange, onBlur, kind, plac

  return (
    <>
-      <Input
-        ref={ref}
-        id={id}
-        value={value}
-        placeholder={placeholder}
-        onChange={(event) => onChange?.(event.target.value)}
-        onBlur={onBlur}
-        addonAfter={
-          <Tooltip title={t('pages.xray.geoBrowser.openTooltip')}>
-            <Button
-              type="text"
-              size="small"
-              icon={<DatabaseOutlined />}
-              aria-label={t('pages.xray.geoBrowser.openTooltip')}
-              onClick={() => setBrowsing(true)}
-            />
-          </Tooltip>
-        }
-      />
+      <Space.Compact block>
+        <Input
+          ref={ref}
+          id={id}
+          value={value}
+          placeholder={placeholder}
+          onChange={(event) => onChange?.(event.target.value)}
+          onBlur={onBlur}
+        />
+        <Tooltip title={t('pages.xray.geoBrowser.openTooltip')}>
+          <Button
+            icon={<DatabaseOutlined />}
+            aria-label={t('pages.xray.geoBrowser.openTooltip')}
+            onClick={() => setBrowsing(true)}
+          />
+        </Tooltip>
+      </Space.Compact>
      {groupByReason(issues).map(([reason, tokens]) => (
        <Typography.Text key={reason} type="warning" className="geo-unknown-hint">
          {t(REASON_KEYS[reason] ?? REASON_KEYS.categoryMissing, { tokens: tokens.join(', ') })}
@@ -8,7 +8,10 @@ import { useFactoryDefaults } from '@/api/queries/useFactoryDefaults';
 * default?", not "has the user ever saved this key?" — a stored 2096 and a
 * fallback 2096 behave identically, so they read identically.
 */
-export function matchesFactoryDefault(current: unknown, factoryDefault: string | undefined): boolean {
+export function matchesFactoryDefault(
+  current: unknown,
+  factoryDefault: string | undefined,
+): boolean {
  if (factoryDefault === undefined) return false;
  if (typeof current === 'number') {
    const parsed = Number(factoryDefault);
@@ -10,8 +10,17 @@ interface InputAddonProps {
  ariaLabel?: string;
 }

-export default function InputAddon({ children, className = '', style, onClick, ariaLabel }: InputAddonProps) {
+export default function InputAddon({
+  children,
+  className = '',
+  style,
+  onClick,
+  ariaLabel,
+}: InputAddonProps) {
  return (
+    // oxlint cannot see through the conditional role/tabIndex/onKeyDown below,
+    // which is exactly what makes the clickable variant accessible.
+    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions
    <span
      className={`input-addon ${className}`.trim()}
      style={style}
@@ -1,4 +1,11 @@
-import { cloneElement, Fragment, isValidElement, useId, type ReactElement, type ReactNode } from 'react';
+import {
+  cloneElement,
+  Fragment,
+  isValidElement,
+  useId,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
 import { Col, Row } from 'antd';
 import './SettingListItem.css';

@@ -22,9 +29,12 @@ export default function SettingListItem({
  const padding = paddings === 'small' ? '10px 20px' : '20px';
  const titleId = useId();
  const node = control ?? children;
-  const labelledNode = title && isValidElement(node) && node.type !== Fragment
-    ? cloneElement(node as ReactElement<{ 'aria-labelledby'?: string }>, { 'aria-labelledby': titleId })
-    : node;
+  const labelledNode =
+    title && isValidElement(node) && node.type !== Fragment
+      ? cloneElement(node as ReactElement<{ 'aria-labelledby'?: string }>, {
+          'aria-labelledby': titleId,
+        })
+      : node;
  return (
    <div className="setting-list-item" style={{ padding }}>
      <Row gutter={[8, 16]} style={{ width: '100%' }}>
@@ -23,7 +23,8 @@ const meta = {
        'Panel settings snapshot; smtpEnabledEvents holds the selected event keys and smtpCpu/smtpMemory the alert threshold percentages.',
    },
    updateSetting: {
-      description: 'Receives a partial settings patch when an event is toggled or a threshold input changes.',
+      description:
+        'Receives a partial settings patch when an event is toggled or a threshold input changes.',
    },
  },
 } satisfies Meta<typeof EmailNotifications>;
@@ -56,7 +57,9 @@ export const SystemThresholdAlerts: Story = {
  args: placeholderArgs,
  render: () => (
    <StatefulDemo
-      initial={new AllSetting({ smtpEnabledEvents: 'cpu.high,memory.high', smtpCpu: 85, smtpMemory: 90 })}
+      initial={
+        new AllSetting({ smtpEnabledEvents: 'cpu.high,memory.high', smtpCpu: 85, smtpMemory: 90 })
+      }
    />
  ),
 };
@@ -64,7 +67,9 @@ export const SystemThresholdAlerts: Story = {
 export const InfrastructureOnly: Story = {
  args: placeholderArgs,
  render: () => (
-    <StatefulDemo initial={new AllSetting({ smtpEnabledEvents: 'outbound.down,node.down,node.up,xray.crash' })} />
+    <StatefulDemo
+      initial={new AllSetting({ smtpEnabledEvents: 'outbound.down,node.down,node.up,xray.crash' })}
+    />
  ),
 };

@@ -1,5 +1,11 @@
 import { InputNumber } from 'antd';
-import { CloudServerOutlined, ThunderboltOutlined, DesktopOutlined, DashboardOutlined, SafetyOutlined } from '@ant-design/icons';
+import {
+  CloudServerOutlined,
+  ThunderboltOutlined,
+  DesktopOutlined,
+  DashboardOutlined,
+  SafetyOutlined,
+} from '@ant-design/icons';
 import type { AllSetting } from '@/models/setting';
 import { NotificationLayout } from './NotificationLayout';
 import { NotificationGroup } from './NotificationGroup';
@@ -15,7 +21,15 @@ const GROUPS: NotificationGroupConfig[] = [
        label: 'eventOutboundDown',
        settingKey: 'outboundDownThreshold',
        extra: ({ value, onChange, ariaLabel }) => (
-          <InputNumber size="small" min={1} max={100} value={value} onChange={onChange} aria-label={ariaLabel} style={{ width: 80 }} />
+          <InputNumber
+            size="small"
+            min={1}
+            max={100}
+            value={value}
+            onChange={onChange}
+            aria-label={ariaLabel}
+            style={{ width: 80 }}
+          />
        ),
      },
      { key: 'outbound.up', label: 'eventOutboundUp', settingKey: '' },
@@ -24,9 +38,7 @@ const GROUPS: NotificationGroupConfig[] = [
  {
    icon: <ThunderboltOutlined />,
    title: 'eventGroupXray',
-    events: [
-      { key: 'xray.crash', label: 'eventXrayCrash', settingKey: '' },
-    ],
+    events: [{ key: 'xray.crash', label: 'eventXrayCrash', settingKey: '' }],
  },
  {
    icon: <DesktopOutlined />,
@@ -45,7 +57,15 @@ const GROUPS: NotificationGroupConfig[] = [
        label: 'eventCPUHigh',
        settingKey: 'smtpCpu',
        extra: ({ value, onChange, ariaLabel }) => (
-          <InputNumber size="small" min={0} max={100} value={value} onChange={onChange} aria-label={ariaLabel} style={{ width: 80 }} />
+          <InputNumber
+            size="small"
+            min={0}
+            max={100}
+            value={value}
+            onChange={onChange}
+            aria-label={ariaLabel}
+            style={{ width: 80 }}
+          />
        ),
      },
      {
@@ -53,7 +73,15 @@ const GROUPS: NotificationGroupConfig[] = [
        label: 'eventMemoryHigh',
        settingKey: 'smtpMemory',
        extra: ({ value, onChange, ariaLabel }) => (
-          <InputNumber size="small" min={0} max={100} value={value} onChange={onChange} aria-label={ariaLabel} style={{ width: 80 }} />
+          <InputNumber
+            size="small"
+            min={0}
+            max={100}
+            value={value}
+            onChange={onChange}
+            aria-label={ariaLabel}
+            style={{ width: 80 }}
+          />
        ),
      },
    ],
@@ -61,9 +89,7 @@ const GROUPS: NotificationGroupConfig[] = [
  {
    icon: <SafetyOutlined />,
    title: 'eventGroupSecurity',
-    events: [
-      { key: 'login.attempt', label: 'eventLoginAttempt', settingKey: '' },
-    ],
+    events: [{ key: 'login.attempt', label: 'eventLoginAttempt', settingKey: '' }],
  },
 ];

@@ -74,12 +100,15 @@ interface Props {

 export function EmailNotifications({ allSetting, updateSetting }: Props) {
  const events = allSetting.smtpEnabledEvents || '';
-  const selected = events ? events.split(',').map((s) => s.trim()).filter(Boolean) : [];
+  const selected = events
+    ? events
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean)
+    : [];

  function toggle(key: string) {
-    const next = selected.includes(key)
-      ? selected.filter((e) => e !== key)
-      : [...selected, key];
+    const next = selected.includes(key) ? selected.filter((e) => e !== key) : [...selected, key];
    updateSetting({ smtpEnabledEvents: next.join(',') });
  }

@@ -13,7 +13,11 @@ export function NotificationCard({ icon, title, extra, children }: Props) {
    <Card
      size="small"
      variant="outlined"
-      title={<span>{icon} {title}</span>}
+      title={
+        <span>
+          {icon} {title}
+        </span>
+      }
      extra={extra}
      style={{ borderWidth: 1 }}
    >
@@ -16,11 +16,7 @@ export function NotificationEvent({ label, checked, onToggle, children }: Props)
      <Checkbox checked={checked} onChange={onToggle}>
        {t(label)}
      </Checkbox>
-      {checked && children && (
-        <div style={{ paddingLeft: 24, marginTop: 4 }}>
-          {children}
-        </div>
-      )}
+      {checked && children && <div style={{ paddingLeft: 24, marginTop: 4 }}>{children}</div>}
    </div>
  );
 }
@@ -16,7 +16,15 @@ const systemGroup: NotificationGroupConfig = {
      label: 'eventCPUHigh',
      settingKey: 'tgCpu',
      extra: ({ value, onChange, ariaLabel }) => (
-        <InputNumber size="small" min={0} max={100} value={value} onChange={onChange} aria-label={ariaLabel} style={{ width: 80 }} />
+        <InputNumber
+          size="small"
+          min={0}
+          max={100}
+          value={value}
+          onChange={onChange}
+          aria-label={ariaLabel}
+          style={{ width: 80 }}
+        />
      ),
    },
    {
@@ -24,7 +32,15 @@ const systemGroup: NotificationGroupConfig = {
      label: 'eventMemoryHigh',
      settingKey: 'tgMemory',
      extra: ({ value, onChange, ariaLabel }) => (
-        <InputNumber size="small" min={0} max={100} value={value} onChange={onChange} aria-label={ariaLabel} style={{ width: 80 }} />
+        <InputNumber
+          size="small"
+          min={0}
+          max={100}
+          value={value}
+          onChange={onChange}
+          aria-label={ariaLabel}
+          style={{ width: 80 }}
+        />
      ),
    },
  ],
@@ -53,12 +69,21 @@ const meta = {
    },
  },
  argTypes: {
-    config: { description: 'Group definition: icon, `pages.settings` title key, and the event rows to render.' },
+    config: {
+      description:
+        'Group definition: icon, `pages.settings` title key, and the event rows to render.',
+    },
    selected: { description: 'Enabled event keys; drives each checkbox and the header count.' },
    onToggle: { description: 'Called with the event key when a single checkbox is clicked.' },
-    onToggleAll: { description: 'Called with every event key in the group when the master checkbox is clicked.' },
-    allSetting: { description: 'Panel settings snapshot; threshold values such as `tgCpu` are read from it.' },
-    updateSetting: { description: 'Called with a partial settings patch when a threshold input changes.' },
+    onToggleAll: {
+      description: 'Called with every event key in the group when the master checkbox is clicked.',
+    },
+    allSetting: {
+      description: 'Panel settings snapshot; threshold values such as `tgCpu` are read from it.',
+    },
+    updateSetting: {
+      description: 'Called with a partial settings patch when a threshold input changes.',
+    },
  },
 } satisfies Meta<typeof NotificationGroup>;

@@ -77,7 +102,11 @@ function Demo() {
        setSelected((prev) => (prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]))
      }
      onToggleAll={(keys) =>
-        setSelected((prev) => (keys.every((k) => prev.includes(k)) ? prev.filter((k) => !keys.includes(k)) : [...new Set([...prev, ...keys])]))
+        setSelected((prev) =>
+          keys.every((k) => prev.includes(k))
+            ? prev.filter((k) => !keys.includes(k))
+            : [...new Set([...prev, ...keys])],
+        )
      }
      allSetting={settings}
      updateSetting={(patch) => setSettings((prev) => new AllSetting({ ...prev, ...patch }))}
@@ -15,7 +15,14 @@ interface Props {
  updateSetting: (patch: Partial<AllSetting>) => void;
 }

-export function NotificationGroup({ config, selected, onToggle, onToggleAll, allSetting, updateSetting }: Props) {
+export function NotificationGroup({
+  config,
+  selected,
+  onToggle,
+  onToggleAll,
+  allSetting,
+  updateSetting,
+}: Props) {
  const { t } = useTranslation();

  const count = config.events.filter((e) => selected.includes(e.key)).length;
@@ -49,7 +56,8 @@ export function NotificationGroup({ config, selected, onToggle, onToggleAll, all
            onToggle={() => onToggle(event.key)}
          >
            {event.extra?.({
-              value: Number((allSetting as unknown as Record<string, unknown>)[event.settingKey]) || 0,
+              value:
+                Number((allSetting as unknown as Record<string, unknown>)[event.settingKey]) || 0,
              onChange: (v) => updateSetting({ [event.settingKey]: v }),
              ariaLabel: t(`pages.settings.${event.label}`),
            })}
@@ -22,7 +22,9 @@ const meta = {
    total: { description: 'Total number of events the group offers.' },
    allSelected: { description: 'Checks the master checkbox when every event is selected.' },
    indeterminate: { description: 'Shows the dash state when only some events are selected.' },
-    onToggleAll: { description: 'Called when the master checkbox is clicked to select or clear all events.' },
+    onToggleAll: {
+      description: 'Called when the master checkbox is clicked to select or clear all events.',
+    },
  },
 } satisfies Meta<typeof NotificationHeader>;

@@ -10,19 +10,44 @@ interface Props {
  onToggleAll: () => void;
 }

-function MasterCheckbox({ checked, indeterminate, onChange }: { checked: boolean; indeterminate: boolean; onChange: () => void }) {
+function MasterCheckbox({
+  checked,
+  indeterminate,
+  onChange,
+}: {
+  checked: boolean;
+  indeterminate: boolean;
+  onChange: () => void;
+}) {
  const { t } = useTranslation();
  const ref = useRef<HTMLInputElement>(null);
  useEffect(() => {
    if (ref.current) ref.current.indeterminate = indeterminate;
  }, [indeterminate]);
-  return <input ref={ref} type="checkbox" aria-label={t('pages.clients.selectAll')} checked={checked} onChange={onChange} style={{ cursor: 'pointer' }} />;
+  return (
+    <input
+      ref={ref}
+      type="checkbox"
+      aria-label={t('pages.clients.selectAll')}
+      checked={checked}
+      onChange={onChange}
+      style={{ cursor: 'pointer' }}
+    />
+  );
 }

-export function NotificationHeader({ count, total, allSelected, indeterminate, onToggleAll }: Props) {
+export function NotificationHeader({
+  count,
+  total,
+  allSelected,
+  indeterminate,
+  onToggleAll,
+}: Props) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
-      <Tag>{count}/{total}</Tag>
+      <Tag>
+        {count}/{total}
+      </Tag>
      <MasterCheckbox checked={allSelected} indeterminate={indeterminate} onChange={onToggleAll} />
    </span>
  );
@@ -20,7 +20,15 @@ function OutboundGroup() {
    <NotificationCard
      icon={<CloudServerOutlined />}
      title="Outbound"
-      extra={<NotificationHeader count={1} total={2} allSelected={false} indeterminate onToggleAll={noop} />}
+      extra={
+        <NotificationHeader
+          count={1}
+          total={2}
+          allSelected={false}
+          indeterminate
+          onToggleAll={noop}
+        />
+      }
    >
      <Space orientation="vertical" size={8} style={{ width: '100%' }}>
        <NotificationEvent label="Outbound went down" checked onToggle={noop} />
@@ -35,7 +43,15 @@ function XrayGroup() {
    <NotificationCard
      icon={<ThunderboltOutlined />}
      title="Xray"
-      extra={<NotificationHeader count={1} total={1} allSelected indeterminate={false} onToggleAll={noop} />}
+      extra={
+        <NotificationHeader
+          count={1}
+          total={1}
+          allSelected
+          indeterminate={false}
+          onToggleAll={noop}
+        />
+      }
    >
      <Space orientation="vertical" size={8} style={{ width: '100%' }}>
        <NotificationEvent label="Xray crashed" checked onToggle={noop} />
@@ -49,7 +65,15 @@ function NodeGroup() {
    <NotificationCard
      icon={<DesktopOutlined />}
      title="Nodes"
-      extra={<NotificationHeader count={0} total={2} allSelected={false} indeterminate={false} onToggleAll={noop} />}
+      extra={
+        <NotificationHeader
+          count={0}
+          total={2}
+          allSelected={false}
+          indeterminate={false}
+          onToggleAll={noop}
+        />
+      }
    >
      <Space orientation="vertical" size={8} style={{ width: '100%' }}>
        <NotificationEvent label="Node went offline" checked={false} onToggle={noop} />
@@ -64,14 +88,36 @@ function SystemGroup() {
    <NotificationCard
      icon={<DashboardOutlined />}
      title="System"
-      extra={<NotificationHeader count={2} total={2} allSelected indeterminate={false} onToggleAll={noop} />}
+      extra={
+        <NotificationHeader
+          count={2}
+          total={2}
+          allSelected
+          indeterminate={false}
+          onToggleAll={noop}
+        />
+      }
    >
      <Space orientation="vertical" size={8} style={{ width: '100%' }}>
        <NotificationEvent label="CPU usage above threshold (%)" checked onToggle={noop}>
-          <InputNumber size="small" min={0} max={100} defaultValue={80} aria-label="CPU usage threshold percent" style={{ width: 80 }} />
+          <InputNumber
+            size="small"
+            min={0}
+            max={100}
+            defaultValue={80}
+            aria-label="CPU usage threshold percent"
+            style={{ width: 80 }}
+          />
        </NotificationEvent>
        <NotificationEvent label="Memory usage above threshold (%)" checked onToggle={noop}>
-          <InputNumber size="small" min={0} max={100} defaultValue={90} aria-label="Memory usage threshold percent" style={{ width: 80 }} />
+          <InputNumber
+            size="small"
+            min={0}
+            max={100}
+            defaultValue={90}
+            aria-label="Memory usage threshold percent"
+            style={{ width: 80 }}
+          />
        </NotificationEvent>
      </Space>
    </NotificationCard>
@@ -83,7 +129,15 @@ function SecurityGroup() {
    <NotificationCard
      icon={<SafetyOutlined />}
      title="Security"
-      extra={<NotificationHeader count={1} total={1} allSelected indeterminate={false} onToggleAll={noop} />}
+      extra={
+        <NotificationHeader
+          count={1}
+          total={1}
+          allSelected
+          indeterminate={false}
+          onToggleAll={noop}
+        />
+      }
    >
      <Space orientation="vertical" size={8} style={{ width: '100%' }}>
        <NotificationEvent label="Panel login attempt" checked onToggle={noop} />
@@ -6,7 +6,13 @@ interface Props {

 export function NotificationLayout({ children }: Props) {
  return (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 12 }}>
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
+        gap: 12,
+      }}
+    >
      {children}
    </div>
  );
@@ -18,8 +18,14 @@ const meta = {
    },
  },
  argTypes: {
-    allSetting: { description: 'Panel settings snapshot; reads `tgEnabledEvents` plus the `tgCpu`/`tgMemory` thresholds.' },
-    updateSetting: { description: 'Called with a partial settings patch when an event toggle or threshold changes.' },
+    allSetting: {
+      description:
+        'Panel settings snapshot; reads `tgEnabledEvents` plus the `tgCpu`/`tgMemory` thresholds.',
+    },
+    updateSetting: {
+      description:
+        'Called with a partial settings patch when an event toggle or threshold changes.',
+    },
  },
 } satisfies Meta<typeof TelegramNotifications>;

@@ -1,5 +1,11 @@
 import { InputNumber } from 'antd';
-import { CloudServerOutlined, ThunderboltOutlined, DesktopOutlined, DashboardOutlined, SafetyOutlined } from '@ant-design/icons';
+import {
+  CloudServerOutlined,
+  ThunderboltOutlined,
+  DesktopOutlined,
+  DashboardOutlined,
+  SafetyOutlined,
+} from '@ant-design/icons';
 import type { AllSetting } from '@/models/setting';
 import { NotificationLayout } from './NotificationLayout';
 import { NotificationGroup } from './NotificationGroup';
@@ -15,7 +21,15 @@ const GROUPS: NotificationGroupConfig[] = [
        label: 'eventOutboundDown',
        settingKey: 'outboundDownThreshold',
        extra: ({ value, onChange, ariaLabel }) => (
-          <InputNumber size="small" min={1} max={100} value={value} onChange={onChange} aria-label={ariaLabel} style={{ width: 80 }} />
+          <InputNumber
+            size="small"
+            min={1}
+            max={100}
+            value={value}
+            onChange={onChange}
+            aria-label={ariaLabel}
+            style={{ width: 80 }}
+          />
        ),
      },
      { key: 'outbound.up', label: 'eventOutboundUp', settingKey: '' },
@@ -24,9 +38,7 @@ const GROUPS: NotificationGroupConfig[] = [
  {
    icon: <ThunderboltOutlined />,
    title: 'eventGroupXray',
-    events: [
-      { key: 'xray.crash', label: 'eventXrayCrash', settingKey: '' },
-    ],
+    events: [{ key: 'xray.crash', label: 'eventXrayCrash', settingKey: '' }],
  },
  {
    icon: <DesktopOutlined />,
@@ -45,7 +57,15 @@ const GROUPS: NotificationGroupConfig[] = [
        label: 'eventCPUHigh',
        settingKey: 'tgCpu',
        extra: ({ value, onChange, ariaLabel }) => (
-          <InputNumber size="small" min={0} max={100} value={value} onChange={onChange} aria-label={ariaLabel} style={{ width: 80 }} />
+          <InputNumber
+            size="small"
+            min={0}
+            max={100}
+            value={value}
+            onChange={onChange}
+            aria-label={ariaLabel}
+            style={{ width: 80 }}
+          />
        ),
      },
      {
@@ -53,7 +73,15 @@ const GROUPS: NotificationGroupConfig[] = [
        label: 'eventMemoryHigh',
        settingKey: 'tgMemory',
        extra: ({ value, onChange, ariaLabel }) => (
-          <InputNumber size="small" min={0} max={100} value={value} onChange={onChange} aria-label={ariaLabel} style={{ width: 80 }} />
+          <InputNumber
+            size="small"
+            min={0}
+            max={100}
+            value={value}
+            onChange={onChange}
+            aria-label={ariaLabel}
+            style={{ width: 80 }}
+          />
        ),
      },
    ],
@@ -61,9 +89,7 @@ const GROUPS: NotificationGroupConfig[] = [
  {
    icon: <SafetyOutlined />,
    title: 'eventGroupSecurity',
-    events: [
-      { key: 'login.attempt', label: 'eventLoginAttempt', settingKey: '' },
-    ],
+    events: [{ key: 'login.attempt', label: 'eventLoginAttempt', settingKey: '' }],
  },
 ];

@@ -74,12 +100,15 @@ interface Props {

 export function TelegramNotifications({ allSetting, updateSetting }: Props) {
  const events = allSetting.tgEnabledEvents || '';
-  const selected = events ? events.split(',').map((s) => s.trim()).filter(Boolean) : [];
+  const selected = events
+    ? events
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean)
+    : [];

  function toggle(key: string) {
-    const next = selected.includes(key)
-      ? selected.filter((e) => e !== key)
-      : [...selected, key];
+    const next = selected.includes(key) ? selected.filter((e) => e !== key) : [...selected, key];
    updateSetting({ tgEnabledEvents: next.join(',') });
  }

@@ -4,7 +4,11 @@ export interface NotificationEventConfig {
  key: string;
  label: string;
  settingKey: string;
-  extra?: (props: { value: number; onChange: (v: number | null) => void; ariaLabel: string }) => ReactNode;
+  extra?: (props: {
+    value: number;
+    onChange: (v: number | null) => void;
+    ariaLabel: string;
+  }) => ReactNode;
 }

 export interface NotificationGroupConfig {
@@ -18,7 +18,9 @@ const meta = {
    },
  },
  argTypes: {
-    when: { description: 'Children mount the first time this becomes true and stay mounted afterwards.' },
+    when: {
+      description: 'Children mount the first time this becomes true and stay mounted afterwards.',
+    },
    fallback: { description: 'Suspense fallback shown while a React.lazy child is still loading.' },
    children: { description: 'Content to mount on demand, typically a lazily imported modal.' },
  },
@@ -53,7 +55,8 @@ function OnDemandDemo() {
        </Card>
      </LazyMount>
      <Typography.Text type="secondary">
-        The card mounts the first time the switch turns on and stays mounted after turning it off; the mount time never changes.
+        The card mounts the first time the switch turns on and stays mounted after turning it off;
+        the mount time never changes.
      </Typography.Text>
    </Space>
  );
@@ -67,7 +70,13 @@ const xrayConfigSnippet = JSON.stringify(
        protocol: 'vless',
        port: 443,
        settings: {
-          clients: [{ id: 'b831381d-6324-4d53-ad4f-8cda48b30811', email: 'alice@corp.example', flow: 'xtls-rprx-vision' }],
+          clients: [
+            {
+              id: 'b831381d-6324-4d53-ad4f-8cda48b30811',
+              email: 'alice@corp.example',
+              flow: 'xtls-rprx-vision',
+            },
+          ],
          decryption: 'none',
        },
        streamSettings: { network: 'tcp', security: 'reality' },
@@ -2,7 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react-vite';

 import Sparkline from './Sparkline';

-const wave = Array.from({ length: 48 }, (_, i) => 45 + Math.round(28 * Math.sin(i / 4) + (i % 5) * 3));
+const wave = Array.from(
+  { length: 48 },
+  (_, i) => 45 + Math.round(28 * Math.sin(i / 4) + (i % 5) * 3),
+);
 const inverse = wave.map((v) => Math.max(0, 100 - v));

 const meta = {
@@ -85,7 +85,10 @@ function hexToRgba(color: string, alpha: number): string {
  const trimmed = color.trim();
  const fn = trimmed.match(/^rgba?\(([^)]+)\)$/i);
  if (fn) {
-    const parts = fn[1].split(/[,/]\s*|\s+/).filter(Boolean).map(Number);
+    const parts = fn[1]
+      .split(/[,/]\s*|\s+/)
+      .filter(Boolean)
+      .map(Number);
    if (parts.length >= 3 && parts.slice(0, 3).every((n) => Number.isFinite(n))) {
      const baseAlpha = parts.length > 3 && Number.isFinite(parts[3]) ? parts[3] : 1;
      return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, ${baseAlpha * alpha})`;
@@ -94,7 +97,11 @@ function hexToRgba(color: string, alpha: number): string {
  }
  let h = trimmed;
  if (h.startsWith('#')) h = h.slice(1);
-  if (h.length === 3) h = h.split('').map((c) => c + c).join('');
+  if (h.length === 3)
+    h = h
+      .split('')
+      .map((c) => c + c)
+      .join('');
  if (h.length !== 6) return trimmed;
  const int = Number.parseInt(h, 16);
  if (Number.isNaN(int)) return trimmed;
@@ -110,11 +117,14 @@ function cssVar(el: HTMLElement, name: string, fallback: string): string {
 }

 function parseDash(dash: string, dpr: number): number[] {
-  return dash.trim().split(/\s+/).map((n) => (Number(n) || 0) * dpr);
+  return dash
+    .trim()
+    .split(/\s+/)
+    .map((n) => (Number(n) || 0) * dpr);
 }

 function dprOf(u: uPlot): number {
-  return u.width > 0 ? u.ctx.canvas.width / u.width : (uPlot.pxRatio || 1);
+  return u.width > 0 ? u.ctx.canvas.width / u.width : uPlot.pxRatio || 1;
 }

 export default function Sparkline(props: SparklineProps) {
@@ -427,7 +437,9 @@ export default function Sparkline(props: SparklineProps) {
      }
      const pt = v.points[idx];
      const fmt = p.tooltipFormatter ?? p.yFormatter ?? ((x: number) => String(x));
-      const label = p.tooltipLabelFormatter ? p.tooltipLabelFormatter(String(pt.label)) : String(pt.label);
+      const label = p.tooltipLabelFormatter
+        ? p.tooltipLabelFormatter(String(pt.label))
+        : String(pt.label);
      const multi = hasSeries2 || hasSeries3;

      tooltipEl.textContent = '';
@@ -567,7 +579,11 @@ export default function Sparkline(props: SparklineProps) {
  }, []);

  return (
-    <div className="sparkline-container" role={ariaSummary ? 'img' : undefined} aria-label={ariaSummary || undefined}>
+    <div
+      className="sparkline-container"
+      role={ariaSummary ? 'img' : undefined}
+      aria-label={ariaSummary || undefined}
+    >
      {extremaPoints && (
        <div className="sparkline-extrema" aria-hidden="true">
          <span className="extrema-item" style={{ color: maxColor }}>
@@ -581,7 +597,9 @@ export default function Sparkline(props: SparklineProps) {
      {showLegend && legendItems.length > 0 && (
        <div className="sparkline-legend" aria-hidden="true">
          {legendItems.map((s) => (
-            <span key={s.name} className="extrema-item" style={{ color: s.color }}>● {s.name}</span>
+            <span key={s.name} className="extrema-item" style={{ color: s.color }}>
+              ● {s.name}
+            </span>
          ))}
        </div>
      )}