feat(rules): config for render rules in two columns

src/components/Collapse.tsx

@@ -1,6 +1,6 @@
 import { JSX, ParentComponent, Show, createMemo } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
-import { renderInTwoColumn } from '~/signals'
+import { renderInTwoColumns } from '~/signals'
 
 type Props = {
   title: JSX.Element
@@ -27,7 +27,7 @@ export const Collapse: ParentComponent<Props> = (props) => {
   }
 
   const mediaQueryClassName = createMemo(() => {
-    if (renderInTwoColumn()) {
+    if (renderInTwoColumns()) {
       return 'lg:grid-cols-3 xl:grid-cols-4'
     } else {
       return 'sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7'

src/components/ForTwoColumns.tsx

@@ -1,11 +1,11 @@
 import { createWindowSize } from '@solid-primitives/resize-observer'
 import { JSX, Show, createMemo } from 'solid-js'
-import { renderInTwoColumn } from '~/signals'
+import { renderInTwoColumns } from '~/signals'
 
 export const ForTwoColumns = (props: { subChild: JSX.Element[] }) => {
   const windowSize = createWindowSize()
   const isShowTwoColumns = createMemo(
-    () => windowSize.width >= 640 && renderInTwoColumn(),
+    () => windowSize.width >= 640 && renderInTwoColumns(),
   ) // 640 is sm size in daisyui
   const leftCloumns = createMemo(() =>
     props.subChild.filter((_, index) => index % 2 === 0 || !isShowTwoColumns()),

src/helpers/proxies.ts

@@ -1,5 +1,6 @@
 import dayjs from 'dayjs'
 import { PROXIES_ORDERING_TYPE } from '~/constants'
+import { latencyQualityMap } from '~/signals'
 
 export const formatTimeFromNow = (time: number | string) => {
   return dayjs(time).fromNow()
@@ -45,16 +46,16 @@ export const sortProxiesByOrderingType = (
 
     switch (orderingType) {
       case PROXIES_ORDERING_TYPE.LATENCY_ASC:
-        if (prevLatency === -1) return 1
+        if (prevLatency === latencyQualityMap().NOT_CONNECTED) return 1
 
-        if (nextLatency === -1) return -1
+        if (nextLatency === latencyQualityMap().NOT_CONNECTED) return -1
 
         return prevLatency - nextLatency
 
       case PROXIES_ORDERING_TYPE.LATENCY_DESC:
-        if (prevLatency === -1) return 1
+        if (prevLatency === latencyQualityMap().NOT_CONNECTED) return 1
 
-        if (nextLatency === -1) return -1
+        if (nextLatency === latencyQualityMap().NOT_CONNECTED) return -1
 
         return nextLatency - prevLatency
 

src/i18n/en.ts

@@ -47,7 +47,7 @@ export default {
   autoSwitchTheme: 'Automatically switch theme',
   favDayTheme: 'Favorite light theme',
   favNightTheme: 'Favorite dark theme',
-  renderInTwoColumns: 'Render Proxies in two columns',
+  renderInTwoColumns: 'Render proxies in two columns',
   updateGEODatabases: 'Update GEO Databases',
   restartCore: 'Restart Core',
   upgradeCore: 'Upgrade Core',
@@ -60,6 +60,8 @@ export default {
   ms: 'ms',
   updated: 'Updated',
   renderProxiesInSamePage: 'Render proxies and proxy provider in same page',
+  renderRulesAndProviderInTwoColumns:
+    'Render rules and rule provider in two columns',
   tableSize: 'Table size',
   xs: 'Extra small size',
   sm: 'Small size',

src/i18n/zh.ts

@@ -60,6 +60,7 @@ export default {
   ms: '毫秒',
   updated: '更新于',
   renderProxiesInSamePage: '将代理和代理提供者显示在同一页',
+  renderRulesAndProviderInTwoColumns: '规则和规则提供者双列渲染',
   tableSize: '表格大小',
   xs: '超小尺寸',
   sm: '小尺寸',

src/pages/Config.tsx

@@ -29,8 +29,9 @@ import {
   latencyTestTimeoutDuration,
   proxiesOrderingType,
   proxiesPreviewType,
-  renderInTwoColumn,
+  renderInTwoColumns,
   renderProxiesInSamePage,
+  renderRulesAndProviderInTwoColumns,
   setAutoCloseConns,
   setAutoSwitchTheme,
   setFavDayTheme,
@@ -38,8 +39,9 @@ import {
   setLatencyTestTimeoutDuration,
   setProxiesOrderingType,
   setProxiesPreviewType,
-  setRenderInTwoColumn,
+  setRenderInTwoColumns,
   setRenderProxiesInSamePage,
+  setRenderRulesAndProviderInTwoColumns,
   setSelectedEndpoint,
   setTableSize,
   setTwemoji,
@@ -270,98 +272,102 @@ const ConfigForXd = () => {
     navigate(ROUTES.Setup)
   }
 
-  return (
-    <div class="grid gap-4">
+  const autoSwitchThemeSubChild = () => (
+    <Show when={autoSwitchTheme()}>
       <div class="flex flex-col">
-        <ConfigTitle>{t('renderInTwoColumns')}</ConfigTitle>
+        <ConfigTitle>{t('favDayTheme')}</ConfigTitle>
 
-        <input
-          type="checkbox"
-          class="toggle"
-          checked={renderInTwoColumn()}
+        <select
+          class="select select-bordered w-full max-w-xs"
           onChange={(e) => {
-            setRenderInTwoColumn(e.target.checked)
-          }}
-        />
-      </div>
-      <div class="flex flex-col">
-        <ConfigTitle>{t('renderProxiesInSamePage')}</ConfigTitle>
-
-        <input
-          type="checkbox"
-          class="toggle"
-          checked={renderProxiesInSamePage()}
-          onChange={(e) => {
-            setRenderProxiesInSamePage(e.target.checked)
-          }}
-        />
-      </div>
-
-      <div class="flex flex-col">
-        <ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle>
-
-        <input
-          type="checkbox"
-          class="toggle"
-          checked={autoSwitchTheme()}
-          onChange={(e) => {
-            setAutoSwitchTheme(e.target.checked)
+            setFavDayTheme(e.target.value)
             applyThemeByMode()
           }}
-        />
+        >
+          <For each={themes}>
+            {(theme) => (
+              <option selected={favDayTheme() === theme} value={theme}>
+                {theme}
+              </option>
+            )}
+          </For>
+        </select>
       </div>
+      <div class="flex flex-col">
+        <ConfigTitle>{t('favNightTheme')}</ConfigTitle>
 
-      <Show when={autoSwitchTheme()}>
-        <div class="flex flex-col">
-          <ConfigTitle>{t('favDayTheme')}</ConfigTitle>
-
-          <select
-            class="select select-bordered w-full max-w-xs"
-            onChange={(e) => {
-              setFavDayTheme(e.target.value)
-              applyThemeByMode()
-            }}
-          >
-            <For each={themes}>
-              {(theme) => (
-                <option selected={favDayTheme() === theme} value={theme}>
-                  {theme}
-                </option>
-              )}
-            </For>
-          </select>
-        </div>
-        <div class="flex flex-col">
-          <ConfigTitle>{t('favNightTheme')}</ConfigTitle>
-
-          <select
-            class="select select-bordered w-full max-w-xs"
-            onChange={(e) => {
-              setFavNightTheme(e.target.value)
-              applyThemeByMode()
-            }}
-          >
-            <For each={themes}>
-              {(theme) => (
-                <option selected={favNightTheme() === theme} value={theme}>
-                  {theme}
-                </option>
-              )}
-            </For>
-          </select>
-        </div>
-      </Show>
-
-      <div>
-        <ConfigTitle>{t('useTwemoji')}</ConfigTitle>
-
-        <input
-          class="toggle"
-          type="checkbox"
-          checked={useTwemoji()}
-          onChange={(e) => setTwemoji(e.target.checked)}
-        />
+        <select
+          class="select select-bordered w-full max-w-xs"
+          onChange={(e) => {
+            setFavNightTheme(e.target.value)
+            applyThemeByMode()
+          }}
+        >
+          <For each={themes}>
+            {(theme) => (
+              <option selected={favNightTheme() === theme} value={theme}>
+                {theme}
+              </option>
+            )}
+          </For>
+        </select>
       </div>
+    </Show>
+  )
+
+  const checkboxList = [
+    {
+      label: 'renderInTwoColumns',
+      value: renderInTwoColumns,
+      onChange: setRenderInTwoColumns,
+    },
+    {
+      label: 'renderRulesAndProviderInTwoColumns',
+      value: renderRulesAndProviderInTwoColumns,
+      onChange: setRenderRulesAndProviderInTwoColumns,
+    },
+    {
+      label: 'renderProxiesInSamePage',
+      value: renderProxiesInSamePage,
+      onChange: setRenderProxiesInSamePage,
+    },
+    {
+      label: 'autoSwitchTheme',
+      value: autoSwitchTheme,
+      onChange: (value: boolean) => {
+        setAutoSwitchTheme(value)
+        applyThemeByMode()
+      },
+      subChild: autoSwitchThemeSubChild,
+    },
+    {
+      label: 'useTwemoji',
+      value: useTwemoji,
+      onChange: setTwemoji,
+    },
+  ]
+
+  return (
+    <div class="grid gap-4">
+      <For each={checkboxList}>
+        {(checkbox) => (
+          <>
+            <div class="flex flex-col">
+              <ConfigTitle>{t(checkbox.label)}</ConfigTitle>
+
+              <input
+                type="checkbox"
+                class="toggle"
+                checked={checkbox.value()}
+                onChange={(e) => {
+                  checkbox.onChange(e.target.checked)
+                }}
+              />
+            </div>
+            {checkbox.subChild?.()}
+          </>
+        )}
+      </For>
 
       <div>
         <ConfigTitle>{t('proxiesPreviewType')}</ConfigTitle>

src/pages/Rules.tsx

@@ -5,7 +5,7 @@ import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import { Button } from '~/components'
 import { formatTimeFromNow, useStringBooleanMap } from '~/helpers'
-import { useRules } from '~/signals'
+import { renderRulesAndProviderInTwoColumns, useRules } from '~/signals'
 
 export default () => {
   const [t] = useI18n()
@@ -40,7 +40,12 @@ export default () => {
   }
 
   return (
-    <div class="flex w-full gap-4">
+    <div
+      class={twMerge(
+        'flex w-full flex-col gap-4',
+        renderRulesAndProviderInTwoColumns() && 'flex-row',
+      )}
+    >
       <div class="flex-1">
         <h1 class="pb-4 text-lg font-semibold">{t('rules')}</h1>
 

src/signals/config.ts

@@ -41,7 +41,7 @@ export const [favNightTheme, setFavNightTheme] = makePersisted(
   createSignal('night'),
   { name: 'favNightTheme', storage: localStorage },
 )
-export const [renderInTwoColumn, setRenderInTwoColumn] = makePersisted(
+export const [renderInTwoColumns, setRenderInTwoColumns] = makePersisted(
   createSignal(true),
   { name: 'renderInTwoColumn', storage: localStorage },
 )
@@ -50,6 +50,13 @@ export const [renderProxiesInSamePage, setRenderProxiesInSamePage] =
     name: 'renderProxiesInSamePage',
     storage: localStorage,
   })
+export const [
+  renderRulesAndProviderInTwoColumns,
+  setRenderRulesAndProviderInTwoColumns,
+] = makePersisted(createSignal(true), {
+  name: 'renderRulesAndProviderInTwoColumns',
+  storage: localStorage,
+})
 export const [tableSize, setTableSize] = makePersisted(
   createSignal<TAILWINDCSS_SIZE>(TAILWINDCSS_SIZE.XS),
   { name: 'tableSize', storage: localStorage },