feat: config for render proxies in same page

src/components/Header.tsx

@@ -17,7 +17,12 @@ import { For, ParentComponent, Show, createMemo, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import { Button } from '~/components'
 import { LANG, ROUTES, themes } from '~/constants'
-import { setCurTheme, setSelectedEndpoint, useProxies } from '~/signals'
+import {
+  renderProxiesInSamePage,
+  setCurTheme,
+  setSelectedEndpoint,
+  useProxies,
+} from '~/signals'
 
 const Nav: ParentComponent<{ href: string; tooltip: string }> = ({
   href,
@@ -101,7 +106,7 @@ export const Header = () => {
       },
     ]
 
-    if (proxyProviders().length > 0) {
+    if (proxyProviders().length > 0 && !renderProxiesInSamePage()) {
       list.splice(2, 0, {
         href: ROUTES.ProxyProvider,
         name: t('proxyProviders'),

src/i18n/en.ts

@@ -56,4 +56,6 @@ export default {
   orderName_asc: 'By name alphabetically (A-Z)',
   orderName_desc: 'By name alphabetically (Z-A)',
   ms: 'ms',
+  updated: 'Updated',
+  renderProxiesInSamePage: 'Render proxies and proxy provider in same page',
 }

src/i18n/zh.ts

@@ -56,4 +56,6 @@ export default {
   orderName_asc: '按名称字母排序 (A-Z)',
   orderName_desc: '按名称字母排序 (Z-A)',
   ms: '毫秒',
+  updated: '更新于',
+  renderProxiesInSamePage: '将代理和代理提供者显示在同一页',
 }

src/pages/Config.tsx

@@ -18,6 +18,7 @@ import {
   proxiesOrderingType,
   proxiesPreviewType,
   renderInTwoColumn,
+  renderProxiesInSamePage,
   setAutoCloseConns,
   setAutoSwitchTheme,
   setFavDayTheme,
@@ -25,6 +26,7 @@ import {
   setProxiesOrderingType,
   setProxiesPreviewType,
   setRenderInTwoColumn,
+  setRenderProxiesInSamePage,
   setUrlForLatencyTest,
   urlForLatencyTest,
   useRequest,
@@ -214,6 +216,19 @@ const ConfigForXd = () => {
           }}
         />
       </div>
+      <div class="flex flex-col">
+        <div class="pb-4 text-lg font-semibold">
+          {t('renderProxiesInSamePage')}
+        </div>
+        <input
+          type="checkbox"
+          class="toggle"
+          checked={renderProxiesInSamePage()}
+          onChange={(e) => {
+            setRenderProxiesInSamePage(e.target.checked)
+          }}
+        />
+      </div>
       <div class="flex flex-col">
         <div class="pb-4 text-lg font-semibold">{t('autoSwitchTheme')}</div>
         <input

src/pages/Proxies.tsx

@@ -12,8 +12,13 @@ import {
   handleAnimatedBtnClickWithCallback,
   sortProxiesByOrderingType,
 } from '~/helpers'
-import { proxiesOrderingType, useProxies } from '~/signals'
+import {
+  proxiesOrderingType,
+  renderProxiesInSamePage,
+  useProxies,
+} from '~/signals'
 import type { Proxy } from '~/types'
+import ProxyProvider from './ProxyProvider'
 
 export default () => {
   const [t] = useI18n()
@@ -41,66 +46,72 @@ export default () => {
   }
 
   return (
-    <div class="flex flex-col gap-2">
+    <>
-      <h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
+      <div class="flex flex-col gap-2">
-        {t('proxies')}
+        <h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
-      </h1>
+          {t('proxies')}
-      <ForTwoColumns
+        </h1>
-        subChild={proxies().map((proxy) => {
+        <ForTwoColumns
-          const sortedProxyNames = sortProxiesByOrderingType(
+          subChild={proxies().map((proxy) => {
-            proxy.all ?? [],
+            const sortedProxyNames = sortProxiesByOrderingType(
-            latencyMap(),
+              proxy.all ?? [],
-            proxiesOrderingType(),
+              latencyMap(),
-          )
+              proxiesOrderingType(),
+            )
 
-          const title = (
+            const title = (
-            <>
+              <>
-              <div class="mr-10 flex items-center justify-between">
+                <div class="mr-10 flex items-center justify-between">
-                <span>{proxy.name}</span>
+                  <span>{proxy.name}</span>
-                <Button
+                  <Button
-                  class="btn-circle btn-sm"
+                    class="btn-circle btn-sm"
-                  onClick={(e) => onSpeedTestClick(e, proxy.name)}
+                    onClick={(e) => onSpeedTestClick(e, proxy.name)}
-                >
+                  >
-                  <IconBrandSpeedtest />
+                    <IconBrandSpeedtest />
-                </Button>
+                  </Button>
-              </div>
+                </div>
-              <div class="text-sm text-slate-500">
+                <div class="text-sm text-slate-500">
-                {proxy.type} :: {proxy.now}
+                  {proxy.type} :: {proxy.now}
-              </div>
+                </div>
-              <Show when={!collapsedMap()[`group-${proxy.name}`]}>
+                <Show when={!collapsedMap()[`group-${proxy.name}`]}>
-                <ProxyNodePreview
+                  <ProxyNodePreview
-                  proxyNameList={sortedProxyNames}
+                    proxyNameList={sortedProxyNames}
-                  now={proxy.now}
+                    now={proxy.now}
-                />
+                  />
-              </Show>
+                </Show>
-            </>
+              </>
-          )
+            )
 
-          const content = (
+            const content = (
-            <ProxyCardGroups
+              <ProxyCardGroups
-              proxyNames={sortedProxyNames}
+                proxyNames={sortedProxyNames}
-              now={proxy.now}
+                now={proxy.now}
-              onClick={(name) => {
+                onClick={(name) => {
-                void onProxyNodeClick(proxy, name)
+                  void onProxyNodeClick(proxy, name)
-              }}
+                }}
-            />
+              />
-          )
+            )
 
-          return (
+            return (
-            <Collapse
+              <Collapse
-              isOpen={collapsedMap()[`group-${proxy.name}`]}
+                isOpen={collapsedMap()[`group-${proxy.name}`]}
-              title={title}
+                title={title}
-              content={content}
+                content={content}
-              onCollapse={(val) =>
+                onCollapse={(val) =>
-                setCollapsedMap({
+                  setCollapsedMap({
-                  ...collapsedMap(),
+                    ...collapsedMap(),
-                  [`group-${proxy.name}`]: val,
+                    [`group-${proxy.name}`]: val,
-                })
+                  })
-              }
+                }
-            />
+              />
-          )
+            )
-        })}
+          })}
-      />
+        />
-    </div>
+      </div>
+      <Show when={renderProxiesInSamePage()}>
+        <div class="divider"></div>
+        <ProxyProvider />
+      </Show>
+    </>
   )
 }

src/pages/ProxyProvider.tsx

@@ -95,7 +95,7 @@ export default () => {
                 subscriptionInfo={proxyProvider.subscriptionInfo}
               />
               <div class="text-sm text-slate-500">
-                {proxyProvider.vehicleType} :: Updated{' '}
+                {proxyProvider.vehicleType} :: {t('updated')}{' '}
                 {formatTimeFromNow(proxyProvider.updatedAt)}
               </div>
               <Show when={!collapsedMap()[`provider-${proxyProvider.name}`]}>

src/pages/Rules.tsx

@@ -90,7 +90,7 @@ export default () => {
                 </div>
                 <div class="text-xs text-slate-500">
                   {rulesProvider.vehicleType} / {rulesProvider.behavior} /
-                  Updated {formatTimeFromNow(rulesProvider.updatedAt)}
+                  {t('updated')} {formatTimeFromNow(rulesProvider.updatedAt)}
                 </div>
               </div>
             )}

src/signals/config.ts

@@ -40,6 +40,11 @@ export const [renderInTwoColumn, setRenderInTwoColumn] = makePersisted(
   createSignal(true),
   { name: 'renderInTwoColumn', storage: localStorage },
 )
+export const [renderProxiesInSamePage, setRenderProxiesInSamePage] =
+  makePersisted(createSignal(false), {
+    name: 'renderProxiesInSamePage',
+    storage: localStorage,
+  })
 
 export const isLatencyTestByHttps = () =>
   urlForLatencyTest().startsWith('https')