fix: unexpected filtered proxy group (#875)

* fix: unexpected filtered proxy group

* fix: the numbers of cards per row

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>

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
 }

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,
   }
 }