From 928935321bfd9fea4b184423df344354392cfb51 Mon Sep 17 00:00:00 2001
From: YetAnotherZephyruso
 <176294927+YetAnotherZephyruso@users.noreply.github.com>
Date: Sun, 28 Jul 2024 15:24:41 +0800
Subject: [PATCH] fix: unexpected filtered proxy group (#875)

* fix: unexpected filtered proxy group

* fix: the numbers of cards per row
---
 src/components/Collapse.tsx | 12 +++++++++++-
 src/helpers/proxies.ts      | 10 ++++++++--
 src/signals/proxies.ts      | 14 ++++++++++++++
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx
index 651e573..4d21056 100644
--- a/src/components/Collapse.tsx
+++ b/src/components/Collapse.tsx
@@ -1,5 +1,6 @@
 import type { JSX, ParentComponent } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
+import { renderProxiesInTwoColumns } from '~/signals'
 
 type Props = {
   title: JSX.Element
@@ -24,6 +25,14 @@ export const Collapse: ParentComponent<Props> = (props) => {
     return props.isOpen ? openedClassName : closedClassName
   }
 
+  const gridStyle = createMemo(() => {
+    if (renderProxiesInTwoColumns()) {
+      return 'lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'
+    }
+
+    return 'sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10'
+  })
+
   return (
     <div
       class={twMerge(
@@ -41,7 +50,8 @@ export const Collapse: ParentComponent<Props> = (props) => {
       <div
         class={twMerge(
           getCollapseContentClassName(),
-          'collapse-content grid grid-cols-2 gap-2 transition-opacity duration-1000 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
+          gridStyle(),
+          'collapse-content grid grid-cols-2 gap-2 transition-opacity duration-1000',
         )}
       >
         <Show when={props.isOpen}>{children(() => props.children)()}</Show>
diff --git a/src/helpers/proxies.ts b/src/helpers/proxies.ts
index 5ed37cd..a25cac3 100644
--- a/src/helpers/proxies.ts
+++ b/src/helpers/proxies.ts
@@ -79,11 +79,17 @@ export const filterProxiesByAvailability = (
   proxyNames: string[],
   enabled?: boolean,
 ) => {
-  const { getLatencyByName } = useProxies()
+  const { getLatencyByName, isProxyGroup } = useProxies()
 
   return enabled
     ? proxyNames.filter(
-        (name) => getLatencyByName(name) !== latencyQualityMap().NOT_CONNECTED,
+        // we need proxy node with connected or the node is a group it self
+        (name) => {
+          return (
+            isProxyGroup(name) ||
+            getLatencyByName(name) !== latencyQualityMap().NOT_CONNECTED
+          )
+        },
       )
     : proxyNames
 }
diff --git a/src/signals/proxies.ts b/src/signals/proxies.ts
index 295f922..ddc16c9 100644
--- a/src/signals/proxies.ts
+++ b/src/signals/proxies.ts
@@ -258,6 +258,19 @@ export const useProxies = () => {
     return latencyMap()[getNowProxyNodeName(name)]
   }
 
+  const isProxyGroup = (name: string) => {
+    const proxyNode = proxyNodeMap()[name]
+
+    if (!proxyNode) {
+      return false
+    }
+
+    return (
+      ['direct', 'reject'].includes(proxyNode.type.toLowerCase()) ||
+      !!proxyNode.now
+    )
+  }
+
   return {
     proxyLatencyTestingMap,
     proxyGroupLatencyTestingMap,
@@ -277,5 +290,6 @@ export const useProxies = () => {
     proxyProviderLatencyTest,
     getNowProxyNodeName,
     getLatencyByName,
+    isProxyGroup,
   }
 }