feat: support pausing on the connections page

src/renderer/src/locales/en-US.json

@@ -540,6 +540,8 @@
   "connections.detail.specialProxy": "Special Proxy",
   "connections.detail.specialRules": "Special Rules",
   "connections.detail.close": "Close",
+  "connections.pause": "Pause",
+  "connections.resume": "Resume",
   "resources.geoData.geoip": "GeoIP Database",
   "resources.geoData.geosite": "GeoSite Database",
   "resources.geoData.mmdb": "MMDB Database",

src/renderer/src/locales/fa-IR.json

@@ -515,6 +515,8 @@
   "connections.detail.specialProxy": "پراکسی ویژه",
   "connections.detail.specialRules": "قوانین ویژه",
   "connections.detail.close": "بستن",
+  "connections.pause": "مکث",
+  "connections.resume": "ادامه",
   "resources.geoData.geoip": "پایگاه داده GeoIP",
   "resources.geoData.geosite": "پایگاه داده GeoSite",
   "resources.geoData.mmdb": "پایگاه داده MMDB",

src/renderer/src/locales/ru-RU.json

@@ -515,6 +515,8 @@
   "connections.detail.specialProxy": "Специальный прокси",
   "connections.detail.specialRules": "Специальные правила",
   "connections.detail.close": "Закрыть",
+  "connections.pause": "Пауза",
+  "connections.resume": "Продолжить",
   "resources.geoData.geoip": "База данных GeoIP",
   "resources.geoData.geosite": "База данных GeoSite",
   "resources.geoData.mmdb": "База данных MMDB",

src/renderer/src/locales/zh-CN.json

@@ -540,6 +540,8 @@
   "connections.detail.specialProxy": "特殊代理",
   "connections.detail.specialRules": "特殊规则",
   "connections.detail.close": "关闭",
+  "connections.pause": "暂停",
+  "connections.resume": "恢复",
   "resources.geoData.geoip": "GeoIP 数据库",
   "resources.geoData.geosite": "GeoSite 数据库",
   "resources.geoData.mmdb": "MMDB 数据库",

src/renderer/src/pages/connections.tsx

@@ -13,6 +13,7 @@ import { HiSortAscending, HiSortDescending } from 'react-icons/hi'
 import { includesIgnoreCase } from '@renderer/utils/includes'
 import { differenceWith, unionWith } from 'lodash'
 import { useTranslation } from 'react-i18next'
+import { IoMdPause, IoMdPlay } from 'react-icons/io'
 
 let cachedConnections: IMihomoConnectionDetail[] = []
 
@@ -28,6 +29,7 @@ const Connections: React.FC = () => {
   const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
   const [selected, setSelected] = useState<IMihomoConnectionDetail>()
   const [tab, setTab] = useState('active')
+  const [isPaused, setIsPaused] = useState(false)
 
   const filteredConnections = useMemo(() => {
     const connections = tab === 'active' ? activeConnections : closedConnections
@@ -93,6 +95,7 @@ const Connections: React.FC = () => {
   }
 
   useEffect(() => {
+    if (isPaused) return
     window.electron.ipcRenderer.on('mihomoConnections', (_e, info: IMihomoConnectionsInfo) => {
       setConnectionsInfo(info)
 
@@ -131,7 +134,10 @@ const Connections: React.FC = () => {
     return (): void => {
       window.electron.ipcRenderer.removeAllListeners('mihomoConnections')
     }
-  }, [allConnections, activeConnections, closedConnections])
+  }, [allConnections, activeConnections, closedConnections, isPaused])
+  const togglePause = () => {
+    setIsPaused(!isPaused)
+  }
 
   return (
     <BasePage
@@ -153,6 +159,16 @@ const Connections: React.FC = () => {
             showOutline={false}
             content={`${filteredConnections.length}`}
           >
+            <Button
+              className="app-nodrag ml-1"
+              title={isPaused ? t('connections.resume') : t('connections.pause')}
+              isIconOnly
+              size="sm"
+              variant="light"
+              onPress={togglePause}
+            >
+              {isPaused ? <IoMdPlay className="text-lg" /> : <IoMdPause className="text-lg" />}
+            </Button>
             <Button
               className="app-nodrag ml-1"
               title={t('connections.closeAll')}