feat: speed test dot for proxy

src/components/Collpase.tsx

@@ -1,5 +1,6 @@
 import { JSX, ParentComponent } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
+// import { Ch} from '@tabler/icons-solidjs'
 
 type Props = {
   title: JSX.Element
@@ -31,7 +32,7 @@ const Collapse: ParentComponent<Props> = (props) => {
       )}
     >
       <div
-        class="collapse-title text-xl font-medium"
+        class="collapse-title pr-1 text-xl font-medium after:!top-8"
         onClick={() => onCollapse(!props.isOpen)}
       >
         {title}

src/components/ProxyNodeCard.tsx

@@ -1,6 +1,7 @@
 import { createMemo } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import { useProxies } from '~/signals/proxies'
+import { getClassNameByDelay } from '~/utils/proxies'
 
 export default (props: {
   proxyName: string
@@ -16,13 +17,8 @@ export default (props: {
       return ''
     }
 
-    let textClassName = 'text-green-500'
-
-    if (delay > 500) {
-      textClassName = 'text-red-500'
-    } else if (delay > 200) {
-      textClassName = 'text-yellow-500'
-    }
+    const color = getClassNameByDelay(delay)
+    const textClassName = `text-${color}`
 
     return <span class={textClassName}>{delay}ms</span>
   }

src/components/ProxyNodeDots.tsx

@@ -0,0 +1,33 @@
+import { For } from 'solid-js'
+import { twMerge } from 'tailwind-merge'
+import { useProxies } from '~/signals/proxies'
+import { getClassNameByDelay } from '~/utils/proxies'
+
+const Delay = (p: { delay: number | undefined; selected: boolean }) => {
+  const color = getClassNameByDelay(p.delay)
+  const bgClassName = `bg-${color}`
+  const isSelected = p.selected && `border-2 border-primary`
+
+  return (
+    <div
+      class={twMerge('m-1 h-4 w-4 rounded-full', bgClassName, isSelected)}
+    ></div>
+  )
+}
+
+export default (props: { proxyNameList: string[]; now?: string }) => {
+  const { proxyNodeMap } = useProxies()
+
+  return (
+    <div class="flex w-full flex-wrap">
+      <For each={props.proxyNameList.map((name) => proxyNodeMap()[name]!)}>
+        {(proxy) => {
+          const delay = proxy?.delay
+          const isSelected = props.now === proxy.name
+
+          return <Delay delay={delay} selected={isSelected} />
+        }}
+      </For>
+    </div>
+  )
+}

src/pages/Proxies.tsx

@@ -2,10 +2,11 @@ import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
 import { For, Show, createSignal, onMount } from 'solid-js'
 import Collapse from '~/components/Collpase'
 import ProxyNodeCard from '~/components/ProxyNodeCard'
+import ProxyNodeDots from '~/components/ProxyNodeDots'
 import SubscriptionInfo from '~/components/SubscriptionInfo'
 import { useProxies } from '~/signals/proxies'
 import type { Proxy } from '~/types'
-import { formatTimeFromNow } from '~/utils/date'
+import { formatTimeFromNow } from '~/utils/proxies'
 
 export default () => {
   const {
@@ -66,22 +67,26 @@ export default () => {
           <For each={proxies()}>
             {(proxy) => {
               const title = (
-                <div class="flex items-center justify-between">
-                  <div class="flex flex-col">
+                <>
+                  <div class="mr-10 flex items-center justify-between">
                     <span>{proxy.name}</span>
-
-                    <div class="text-sm text-slate-500">
-                      {proxy.type} :: {proxy.now}
-                    </div>
+                    <button
+                      class="btn btn-circle btn-sm"
+                      onClick={(e) => onSpeedTestClick(e, proxy.name)}
+                    >
+                      <IconBrandSpeedtest />
+                    </button>
                   </div>
-
-                  <button
-                    class="btn btn-circle btn-sm"
-                    onClick={(e) => onSpeedTestClick(e, proxy.name)}
-                  >
-                    <IconBrandSpeedtest />
-                  </button>
-                </div>
+                  <div class="text-sm text-slate-500">
+                    {proxy.type} :: {proxy.now}
+                  </div>
+                  <Show when={!collapsedMap()[`group-${proxy.name}`]}>
+                    <ProxyNodeDots
+                      proxyNameList={proxy.all ?? []}
+                      now={proxy.now}
+                    />
+                  </Show>
+                </>
               )
 
               const content = (
@@ -123,35 +128,45 @@ export default () => {
           <For each={proxyProviders()}>
             {(proxyProvider) => {
               const title = (
-                <div class="flex items-center justify-between">
-                  <div class="flex flex-col gap-1">
+                <>
+                  <div class="mr-10 flex items-center justify-between">
                     <span>{proxyProvider.name}</span>
-                    <SubscriptionInfo
-                      subscriptionInfo={proxyProvider.subscriptionInfo}
-                    />
-                    <div class="text-sm text-slate-500">
-                      {proxyProvider.vehicleType} :: Updated{' '}
-                      {formatTimeFromNow(proxyProvider.updatedAt)}
+                    <div>
+                      <button
+                        class="btn btn-circle btn-sm mr-2"
+                        onClick={(e) =>
+                          onUpdateProviderClick(e, proxyProvider.name)
+                        }
+                      >
+                        <IconReload />
+                      </button>
+                      <button
+                        class="btn btn-circle btn-sm"
+                        onClick={(e) =>
+                          onHealthCheckClick(e, proxyProvider.name)
+                        }
+                      >
+                        <IconBrandSpeedtest />
+                      </button>
                     </div>
                   </div>
-
-                  <div class="flex flex-nowrap">
-                    <button
-                      class="btn btn-circle btn-sm mr-2"
-                      onClick={(e) =>
-                        onUpdateProviderClick(e, proxyProvider.name)
-                      }
-                    >
-                      <IconReload />
-                    </button>
-                    <button
-                      class="btn btn-circle btn-sm"
-                      onClick={(e) => onHealthCheckClick(e, proxyProvider.name)}
-                    >
-                      <IconBrandSpeedtest />
-                    </button>
+                  <SubscriptionInfo
+                    subscriptionInfo={proxyProvider.subscriptionInfo}
+                  />
+                  <div class="text-sm text-slate-500">
+                    {proxyProvider.vehicleType} :: Updated{' '}
+                    {formatTimeFromNow(proxyProvider.updatedAt)}
                   </div>
-                </div>
+                  <Show
+                    when={!collapsedMap()[`provider-${proxyProvider.name}`]}
+                  >
+                    <ProxyNodeDots
+                      proxyNameList={
+                        proxyProvider.proxies.map((i) => i.name) ?? []
+                      }
+                    />
+                  </Show>
+                </>
               )
               const content = (
                 <For each={proxyProvider.proxies}>

src/utils/proxies.ts

@@ -0,0 +1,22 @@
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+
+dayjs.extend(relativeTime)
+
+export function formatTimeFromNow(time: number | string) {
+  return dayjs(time).fromNow()
+}
+
+export function getClassNameByDelay(delay: number | undefined) {
+  let name = 'green-500'
+
+  if (typeof delay !== 'number' || delay === 0) {
+    name = 'base-100'
+  } else if (delay > 500) {
+    name = 'red-500'
+  } else if (delay > 200) {
+    name = 'yellow-500'
+  }
+
+  return name
+}