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,6 +46,7 @@ export default () => {
   }
 
   return (
+    <>
       <div class="flex flex-col gap-2">
         <h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
           {t('proxies')}
@@ -102,5 +108,10 @@ export default () => {
           })}
         />
       </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')