feat(proxy): hideUnAvailableProxies, closes #200

src/components/ProxiesSettingsModal.tsx

@@ -4,10 +4,12 @@ import { ConfigTitle } from '~/components'
 import { MODAL, PROXIES_ORDERING_TYPE, PROXIES_PREVIEW_TYPE } from '~/constants'
 import {
   autoCloseConns,
+  hideUnAvailableProxies,
   latencyTestTimeoutDuration,
   proxiesOrderingType,
   proxiesPreviewType,
   setAutoCloseConns,
+  setHideUnAvailableProxies,
   setLatencyTestTimeoutDuration,
   setProxiesOrderingType,
   setProxiesPreviewType,
@@ -82,6 +84,19 @@ export const ProxiesSettingsModal = () => {
           </select>
         </div>
 
+        <div>
+          <ConfigTitle withDivider>{t('hideUnAvailableProxies')}</ConfigTitle>
+
+          <div class="flex w-full justify-center">
+            <input
+              class="toggle"
+              type="checkbox"
+              checked={hideUnAvailableProxies()}
+              onChange={(e) => setHideUnAvailableProxies(e.target.checked)}
+            />
+          </div>
+        </div>
+
         <div>
           <ConfigTitle withDivider>{t('proxiesPreviewType')}</ConfigTitle>
 

src/helpers/proxies.ts

@@ -78,3 +78,14 @@ export const sortProxiesByOrderingType = (
     }
   })
 }
+
+export const filterProxiesByAvailability = (
+  proxyNames: string[],
+  proxyLatencyMap: Record<string, number>,
+  enabled?: boolean,
+) =>
+  enabled
+    ? proxyNames.filter(
+        (name) => proxyLatencyMap[name] !== latencyQualityMap().NOT_CONNECTED,
+      )
+    : proxyNames

src/i18n/en.ts

@@ -86,4 +86,5 @@ export default {
   active: 'Active',
   closed: 'Closed',
   sort: 'Sort',
+  hideUnAvailableProxies: 'Hide UnAvailable Proxies',
 }

src/i18n/zh.ts

@@ -86,4 +86,5 @@ export default {
   active: '活动',
   closed: '已关闭',
   sort: '排序',
+  hideUnAvailableProxies: '隐藏不可用节点',
 }

src/pages/Proxies.tsx

@@ -17,11 +17,16 @@ import {
 } from '~/components'
 import { MODAL } from '~/constants'
 import {
+  filterProxiesByAvailability,
   formatTimeFromNow,
   sortProxiesByOrderingType,
   useStringBooleanMap,
 } from '~/helpers'
-import { proxiesOrderingType, useProxies } from '~/signals'
+import {
+  hideUnAvailableProxies,
+  proxiesOrderingType,
+  useProxies,
+} from '~/signals'
 import type { Proxy } from '~/types'
 
 enum ActiveTab {
@@ -99,7 +104,7 @@ export default () => {
     <div class="flex h-full flex-col gap-2">
       <Show when={proxyProviders().length > 0}>
         <div class="flex items-center gap-2">
-          <div class="tabs tabs-boxed gap-2">
+          <div class="tabs-boxed tabs gap-2">
             <For each={tabs()}>
               {(tab) => (
                 <button
@@ -151,10 +156,14 @@ export default () => {
         <Show when={activeTab() === ActiveTab.proxyProviders}>
           <ForTwoColumns
             subChild={proxyProviders().map((proxyProvider) => {
-              const sortedProxyNames = sortProxiesByOrderingType(
-                proxyProvider.proxies.map((i) => i.name) ?? [],
+              const sortedProxyNames = filterProxiesByAvailability(
+                sortProxiesByOrderingType(
+                  proxyProvider.proxies.map((i) => i.name) ?? [],
+                  latencyMap(),
+                  proxiesOrderingType(),
+                ),
                 latencyMap(),
-                proxiesOrderingType(),
+                hideUnAvailableProxies(),
               )
 
               const title = (
@@ -232,10 +241,14 @@ export default () => {
         <Show when={activeTab() === ActiveTab.proxies}>
           <ForTwoColumns
             subChild={proxies().map((proxy) => {
-              const sortedProxyNames = sortProxiesByOrderingType(
-                proxy.all ?? [],
+              const sortedProxyNames = filterProxiesByAvailability(
+                sortProxiesByOrderingType(
+                  proxy.all ?? [],
+                  latencyMap(),
+                  proxiesOrderingType(),
+                ),
                 latencyMap(),
-                proxiesOrderingType(),
+                hideUnAvailableProxies(),
               )
 
               const title = (

src/signals/config.ts

@@ -20,6 +20,13 @@ export const [proxiesOrderingType, setProxiesOrderingType] = makePersisted(
   createSignal(PROXIES_ORDERING_TYPE.NATURAL),
   { name: 'proxiesOrderingType', storage: localStorage },
 )
+
+export const [hideUnAvailableProxies, setHideUnAvailableProxies] =
+  makePersisted(createSignal(false), {
+    name: 'hideUnAvailableProxies',
+    storage: localStorage,
+  })
+
 export const [urlForLatencyTest, setUrlForLatencyTest] = makePersisted(
   createSignal('https://www.gstatic.com/generate_204'),
   { name: 'urlForLatencyTest', storage: localStorage },