feat: separate provider page

src/App.tsx

@@ -2,19 +2,21 @@ import { Navigate, Route, Routes, useNavigate } from '@solidjs/router'
 import { Show, lazy, onMount } from 'solid-js'
 import { Header } from '~/components/Header'
 import { curTheme, selectedEndpoint } from '~/signals'
+import { ROUTE } from './config/enum'
 
 const Setup = lazy(() => import('~/pages/Setup'))
 const Overview = lazy(() => import('~/pages/Overview'))
 const Connections = lazy(() => import('~/pages/Connections'))
 const Logs = lazy(() => import('~/pages/Logs'))
 const Proxies = lazy(() => import('~/pages/Proxies'))
+const ProxyProvider = lazy(() => import('~/pages/ProxyProvider'))
 const Rules = lazy(() => import('~/pages/Rules'))
 const Config = lazy(() => import('~/pages/Config'))
 
 export const App = () => {
   const navigate = useNavigate()
 
-  onMount(() => {
+  onMount(async () => {
     if (!selectedEndpoint()) {
       navigate('/setup')
     }
@@ -30,13 +32,14 @@ export const App = () => {
       <div class="flex-1 overflow-y-auto overflow-x-hidden p-2 sm:p-4">
         <Routes>
           <Show when={selectedEndpoint()}>
-            <Route path="/overview" component={Overview} />
+            <Route path={ROUTE.Overview} component={Overview} />
-            <Route path="/proxies" component={Proxies} />
+            <Route path={ROUTE.Proxies} component={Proxies} />
-            <Route path="/rules" component={Rules} />
+            <Route path={ROUTE.Proxyprovider} component={ProxyProvider} />
-            <Route path="/conns" component={Connections} />
+            <Route path={ROUTE.Rules} component={Rules} />
-            <Route path="/logs" component={Logs} />
+            <Route path={ROUTE.Conns} component={Connections} />
-            <Route path="/config" component={Config} />
+            <Route path={ROUTE.Log} component={Logs} />
-            <Route path="*" element={<Navigate href="/overview" />} />
+            <Route path={ROUTE.Config} component={Config} />
+            <Route path="*" element={<Navigate href={ROUTE.Overview} />} />
           </Show>
 
           <Route path="/setup" component={Setup} />

src/components/Header.tsx

@@ -4,6 +4,7 @@ import {
   IconArrowsExchange,
   IconFileStack,
   IconGlobe,
+  IconGlobeFilled,
   IconHome,
   IconLanguage,
   IconMenu,
@@ -12,11 +13,19 @@ import {
   IconRuler,
   IconSettings,
 } from '@tabler/icons-solidjs'
-import { For, ParentComponent, Show, createSignal } from 'solid-js'
+import {
+  For,
+  ParentComponent,
+  Show,
+  createMemo,
+  createSignal,
+  onMount,
+} from 'solid-js'
 import { twMerge } from 'tailwind-merge'
-import { LANG } from '~/config/enum'
+import { LANG, ROUTE } from '~/config/enum'
 import { themes } from '~/constants'
 import { setCurTheme, setSelectedEndpoint } from '~/signals'
+import { useProxies } from '~/signals/proxies'
 
 const Nav: ParentComponent<{ href: string; tooltip: string }> = ({
   href,
@@ -65,39 +74,56 @@ const ThemeSwitcher = () => (
 
 export const Header = () => {
   const [t, { locale }] = useI18n()
+  const { updateProxy, proxyProviders } = useProxies()
 
-  const navs = () => [
+  onMount(() => {
-    {
+    updateProxy()
-      href: '/overview',
+  })
-      name: t('overview'),
+
-      icon: <IconHome />,
+  const navs = createMemo(() => {
-    },
+    const list = [
-    {
+      {
-      href: '/proxies',
+        href: ROUTE.Overview,
-      name: t('proxies'),
+        name: t('overview'),
-      icon: <IconGlobe />,
+        icon: <IconHome />,
-    },
+      },
-    {
+      {
-      href: '/rules',
+        href: ROUTE.Proxies,
-      name: t('rules'),
+        name: t('proxies'),
-      icon: <IconRuler />,
+        icon: <IconGlobe />,
-    },
+      },
-    {
+      {
-      href: '/conns',
+        href: ROUTE.Rules,
-      name: t('connections'),
+        name: t('rules'),
-      icon: <IconNetwork />,
+        icon: <IconRuler />,
-    },
+      },
-    {
+      {
-      href: '/logs',
+        href: ROUTE.Conns,
-      name: t('logs'),
+        name: t('connections'),
-      icon: <IconFileStack />,
+        icon: <IconNetwork />,
-    },
+      },
-    {
+      {
-      href: '/config',
+        href: ROUTE.Log,
-      name: t('config'),
+        name: t('logs'),
-      icon: <IconSettings />,
+        icon: <IconFileStack />,
-    },
+      },
-  ]
+      {
+        href: ROUTE.Config,
+        name: t('config'),
+        icon: <IconSettings />,
+      },
+    ]
+
+    if (proxyProviders().length > 0) {
+      list.splice(2, 0, {
+        href: ROUTE.Proxyprovider,
+        name: t('proxyProviders'),
+        icon: <IconGlobeFilled />,
+      })
+    }
+
+    return list
+  })
 
   const location = useLocation()
   const navigate = useNavigate()

src/config/enum.ts

@@ -1,3 +1,13 @@
+export enum ROUTE {
+  Overview = '/overview',
+  Proxies = '/proxies',
+  Proxyprovider = '/proxyprovider',
+  Rules = '/rules',
+  Conns = '/conns',
+  Log = '/logs',
+  Config = '/config',
+}
+
 export enum AccessorKey {
   Close = 'close',
   ID = 'ID',

src/pages/Proxies.tsx

@@ -1,35 +1,22 @@
 import { useI18n } from '@solid-primitives/i18n'
-import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
+import { IconBrandSpeedtest } from '@tabler/icons-solidjs'
-import { Show, createSignal, onMount } from 'solid-js'
+import { Show, createSignal } from 'solid-js'
 import Collapse from '~/components/Collpase'
 import ForTwoLine from '~/components/ForTwoLine'
 import ProxyCardGroups from '~/components/ProxyCardGroups'
 import ProxyNodePreview from '~/components/ProxyNodePreview'
-import SubscriptionInfo from '~/components/SubscriptionInfo'
 import { useProxies } from '~/signals/proxies'
 import type { Proxy } from '~/types'
-import { formatTimeFromNow } from '~/utils/proxies'
 
 export default () => {
   const [t] = useI18n()
-  const {
+  const { proxies, setProxyGroupByProxyName, delayTestByProxyGroupName } =
-    proxies,
+    useProxies()
-    proxyProviders,
-    updateProxy,
-    setProxyGroupByProxyName,
-    delayTestByProxyGroupName,
-    updateProviderByProviderName,
-    healthCheckByProviderName,
-  } = useProxies()
 
   const [collapsedMap, setCollapsedMap] = createSignal<Record<string, boolean>>(
     {},
   )
 
-  onMount(async () => {
-    await updateProxy()
-  })
-
   const onProxyNodeClick = async (proxy: Proxy, proxyName: string) => {
     setProxyGroupByProxyName(proxy, proxyName)
   }
@@ -43,158 +30,59 @@ export default () => {
     el.classList.remove('animate-pulse')
   }
 
-  const onHealthCheckClick = async (e: MouseEvent, name: string) => {
-    const el = e.target as HTMLElement
-
-    el.classList.add('animate-pulse')
-    e.stopPropagation()
-    await healthCheckByProviderName(name)
-    el.classList.remove('animate-pulse')
-  }
-
-  const onUpdateProviderClick = async (e: MouseEvent, name: string) => {
-    const el = e.target as HTMLElement
-
-    el.classList.add('animate-spin')
-    e.stopPropagation()
-    await updateProviderByProviderName(name)
-    el.classList.remove('animate-spin')
-  }
-
   return (
     <div class="flex flex-col gap-2">
-      <div class="collapse collapse-arrow">
+      <h1 class="pb-2 text-lg font-semibold">{t('proxies')}</h1>
-        <input type="checkbox" checked />
+      <ForTwoLine
-        <h1 class="collapse-title p-2 text-lg font-semibold">{t('proxies')}</h1>
+        subChild={proxies().map((proxy) => {
-        <div class="collapse-content p-0">
+          const title = (
-          <ForTwoLine
+            <>
-            subChild={proxies().map((proxy) => {
+              <div class="mr-10 flex items-center justify-between">
-              const title = (
+                <span>{proxy.name}</span>
-                <>
+                <button
-                  <div class="mr-10 flex items-center justify-between">
+                  class="btn btn-circle btn-sm"
-                    <span>{proxy.name}</span>
+                  onClick={(e) => onSpeedTestClick(e, proxy.name)}
-                    <button
+                >
-                      class="btn btn-circle btn-sm"
+                  <IconBrandSpeedtest />
-                      onClick={(e) => onSpeedTestClick(e, proxy.name)}
+                </button>
-                    >
+              </div>
-                      <IconBrandSpeedtest />
+              <div class="text-sm text-slate-500">
-                    </button>
+                {proxy.type} :: {proxy.now}
-                  </div>
+              </div>
-                  <div class="text-sm text-slate-500">
+              <Show when={!collapsedMap()[`group-${proxy.name}`]}>
-                    {proxy.type} :: {proxy.now}
+                <ProxyNodePreview
-                  </div>
+                  proxyNameList={proxy.all ?? []}
-                  <Show when={!collapsedMap()[`group-${proxy.name}`]}>
-                    <ProxyNodePreview
-                      proxyNameList={proxy.all ?? []}
-                      now={proxy.now}
-                    />
-                  </Show>
-                </>
-              )
-
-              const content = (
-                <ProxyCardGroups
-                  proxies={proxy.all!}
                   now={proxy.now}
-                  onClick={(name) => {
-                    onProxyNodeClick(proxy, name)
-                  }}
                 />
-              )
+              </Show>
+            </>
+          )
 
-              return (
+          const content = (
-                <Collapse
+            <ProxyCardGroups
-                  isOpen={collapsedMap()[`group-${proxy.name}`]}
+              proxies={proxy.all!}
-                  title={title}
+              now={proxy.now}
-                  content={content}
+              onClick={(name) => {
-                  onCollapse={(val) =>
+                onProxyNodeClick(proxy, name)
-                    setCollapsedMap({
+              }}
-                      ...collapsedMap(),
-                      [`group-${proxy.name}`]: val,
-                    })
-                  }
-                />
-              )
-            })}
-          />
-        </div>
-      </div>
-
-      <Show when={proxyProviders().length > 0}>
-        <div class="collapse-arrow collapse">
-          <input type="checkbox" checked />
-          <h1 class="collapse-title p-2 text-lg font-semibold">
-            {t('proxyProviders')}
-          </h1>
-          <div class="collapse-content p-0">
-            <ForTwoLine
-              subChild={proxyProviders().map((proxyProvider) => {
-                const title = (
-                  <>
-                    <div class="mr-10 flex items-center justify-between">
-                      <span>{proxyProvider.name}</span>
-                      <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>
-                    <SubscriptionInfo
-                      subscriptionInfo={proxyProvider.subscriptionInfo}
-                    />
-                    <div class="text-sm text-slate-500">
-                      {proxyProvider.vehicleType} :: Updated{' '}
-                      {formatTimeFromNow(proxyProvider.updatedAt)}
-                    </div>
-                    <Show
-                      when={!collapsedMap()[`provider-${proxyProvider.name}`]}
-                    >
-                      <ProxyNodePreview
-                        proxyNameList={
-                          proxyProvider.proxies.map((i) => i.name) ?? []
-                        }
-                      />
-                    </Show>
-                  </>
-                )
-
-                const content = (
-                  <ProxyCardGroups
-                    proxies={proxyProvider.proxies.map((i) => i.name)}
-                  />
-                )
-
-                return (
-                  <Collapse
-                    isOpen={collapsedMap()[`provider-${proxyProvider.name}`]}
-                    title={title}
-                    content={content}
-                    onCollapse={(val) =>
-                      setCollapsedMap({
-                        ...collapsedMap(),
-                        [`provider-${proxyProvider.name}`]: val,
-                      })
-                    }
-                  />
-                )
-              })}
             />
-          </div>
+          )
-        </div>
+
-      </Show>
+          return (
+            <Collapse
+              isOpen={collapsedMap()[`group-${proxy.name}`]}
+              title={title}
+              content={content}
+              onCollapse={(val) =>
+                setCollapsedMap({
+                  ...collapsedMap(),
+                  [`group-${proxy.name}`]: val,
+                })
+              }
+            />
+          )
+        })}
+      />
     </div>
   )
 }

src/pages/ProxyProvider.tsx

@@ -0,0 +1,126 @@
+import { useI18n } from '@solid-primitives/i18n'
+import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
+import { Show, createSignal } from 'solid-js'
+import Collapse from '~/components/Collpase'
+import ForTwoLine from '~/components/ForTwoLine'
+import ProxyCardGroups from '~/components/ProxyCardGroups'
+import ProxyNodePreview from '~/components/ProxyNodePreview'
+import SubscriptionInfo from '~/components/SubscriptionInfo'
+import { useProxies } from '~/signals/proxies'
+import { formatTimeFromNow } from '~/utils/proxies'
+
+export default () => {
+  const [t] = useI18n()
+  const {
+    proxyProviders,
+    updateProviderByProviderName,
+    healthCheckByProviderName,
+  } = useProxies()
+
+  const [collapsedMap, setCollapsedMap] = createSignal<Record<string, boolean>>(
+    {},
+  )
+
+  const onHealthCheckClick = async (e: MouseEvent, name: string) => {
+    const el = e.target as HTMLElement
+
+    el.classList.add('animate-pulse')
+    e.stopPropagation()
+    await healthCheckByProviderName(name)
+    el.classList.remove('animate-pulse')
+  }
+
+  const onUpdateProviderClick = async (e: MouseEvent, name: string) => {
+    const el = e.target as HTMLElement
+
+    el.classList.add('animate-spin')
+    e.stopPropagation()
+    await updateProviderByProviderName(name)
+    el.classList.remove('animate-spin')
+  }
+
+  const onUpdateAllProviderClick = async (e: MouseEvent) => {
+    const el = e.target as HTMLElement
+    const list = proxyProviders().map((provider) => {
+      return updateProviderByProviderName(provider.name)
+    })
+
+    el.classList.add('animate-spin')
+    e.stopPropagation()
+    await Promise.all(list)
+    el.classList.remove('animate-spin')
+  }
+
+  return (
+    <div class="flex flex-col gap-2">
+      <h1 class="pm-4 flex items-center text-lg font-semibold">
+        {t('proxyProviders')}
+        <button
+          class="btn btn-circle btn-ghost btn-sm ml-2"
+          onClick={(e) => onUpdateAllProviderClick(e)}
+        >
+          <IconReload />
+        </button>
+      </h1>
+      <ForTwoLine
+        subChild={proxyProviders().map((proxyProvider) => {
+          const title = (
+            <>
+              <div class="mr-10 flex items-center justify-between">
+                <span>{proxyProvider.name}</span>
+                <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>
+              <SubscriptionInfo
+                subscriptionInfo={proxyProvider.subscriptionInfo}
+              />
+              <div class="text-sm text-slate-500">
+                {proxyProvider.vehicleType} :: Updated{' '}
+                {formatTimeFromNow(proxyProvider.updatedAt)}
+              </div>
+              <Show when={!collapsedMap()[`provider-${proxyProvider.name}`]}>
+                <ProxyNodePreview
+                  proxyNameList={proxyProvider.proxies.map((i) => i.name) ?? []}
+                />
+              </Show>
+            </>
+          )
+
+          const content = (
+            <ProxyCardGroups
+              proxies={proxyProvider.proxies.map((i) => i.name)}
+            />
+          )
+
+          return (
+            <Collapse
+              isOpen={collapsedMap()[`provider-${proxyProvider.name}`]}
+              title={title}
+              content={content}
+              onCollapse={(val) =>
+                setCollapsedMap({
+                  ...collapsedMap(),
+                  [`provider-${proxyProvider.name}`]: val,
+                })
+              }
+            />
+          )
+        })}
+      />
+    </div>
+  )
+}