From d5bc4ff58b87e40e6d1e91c7f5382c1d6e80089a Mon Sep 17 00:00:00 2001
From: Tunglies <77394545+Tunglies@users.noreply.github.com>
Date: Wed, 28 Oct 2026 09:16:15 +0800
Subject: [PATCH] fix(setting): mount only reachable proxy control viewers

ProxyControlSwitches unconditionally mounted both SysproxyViewer and
TunViewer while its switch rows are mutually exclusive, so every
instance carried a dialog that could never open, each firing
getEmbeddedServerPort or a clash query subscription on mount. Mount
each viewer under the same condition as the switch row that opens it.

SettingSystem also mounted its own SysproxyViewer and TunViewer whose
refs were never opened there; the reachable entries are the
ProxyControlSwitches rows, so the dead pair is removed. Viewer mounts
across the app drop from eight (setting-system: two own + two per
instance, proxy-tun-card: two) to three (one per rendered switch
variant).
---
 src/components/setting/setting-system.tsx        | 12 ++----------
 src/components/shared/proxy-control-switches.tsx |  4 ++--
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/components/setting/setting-system.tsx b/src/components/setting/setting-system.tsx
index ed90b9622..d013321d2 100644
--- a/src/components/setting/setting-system.tsx
+++ b/src/components/setting/setting-system.tsx
@@ -1,14 +1,12 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { DialogRef, Switch, TooltipIcon } from '@/components/base'
+import { Switch, TooltipIcon } from '@/components/base'
 import ProxyControlSwitches from '@/components/shared/proxy-control-switches'
 import { useVerge } from '@/hooks/use-verge'
 
 import { GuardState } from './mods/guard-state'
 import { SettingList, SettingItem } from './mods/setting-comp'
-import { SysproxyViewer } from './mods/sysproxy-viewer'
-import { TunViewer } from './mods/tun-viewer'
 
 interface Props {
   onError?: (err: Error) => void
@@ -21,9 +19,6 @@ const SettingSystem = ({ onError }: Props) => {
 
   const { enable_auto_launch, enable_silent_start } = verge ?? {}
 
-  const sysproxyRef = useRef<DialogRef>(null)
-  const tunRef = useRef<DialogRef>(null)
-
   const onSwitchFormat = (
     _e: React.ChangeEvent<HTMLInputElement>,
     value: boolean,
@@ -34,9 +29,6 @@ const SettingSystem = ({ onError }: Props) => {
 
   return (
     <SettingList title={t('settings.sections.system.title')}>
-      <SysproxyViewer ref={sysproxyRef} />
-      <TunViewer ref={tunRef} />
-
       <ProxyControlSwitches
         label={t('settings.sections.system.toggles.tunMode')}
         onError={onError}
diff --git a/src/components/shared/proxy-control-switches.tsx b/src/components/shared/proxy-control-switches.tsx
index 176d1f999..493942f85 100644
--- a/src/components/shared/proxy-control-switches.tsx
+++ b/src/components/shared/proxy-control-switches.tsx
@@ -229,8 +229,8 @@ const ProxyControlSwitches = ({
         />
       )}
 
-      <SysproxyViewer ref={sysproxyRef} />
-      <TunViewer ref={tunRef} />
+      {isSystemProxyMode && <SysproxyViewer ref={sysproxyRef} />}
+      {isTunMode && <TunViewer ref={tunRef} />}
     </Box>
   )
 }