feat: config for render in two col

src/components/Collpase.tsx

@@ -1,5 +1,6 @@
-import { JSX, ParentComponent, Show } from 'solid-js'
+import { JSX, ParentComponent, Show, createMemo } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
+import { renderInTwoColumn } from '~/signals/config'
 
 type Props = {
   title: JSX.Element
@@ -23,6 +24,14 @@ const Collapse: ParentComponent<Props> = (props) => {
     return props.isOpen ? openedClassName : closedClassName
   }
 
+  const mediaQueryClassName = createMemo(() => {
+    if (renderInTwoColumn()) {
+      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'
+    }
+  })
+
   return (
     <div
       class={twMerge(
@@ -39,7 +48,8 @@ const Collapse: ParentComponent<Props> = (props) => {
       <div
         class={twMerge(
           getCollapseContentClassName(),
-          'collapse-content grid auto-rows-min grid-cols-2 gap-2 transition-opacity duration-1000 lg:grid-cols-3 xl:grid-cols-4',
+          mediaQueryClassName(),
+          'collapse-content grid auto-rows-min grid-cols-2 gap-2 transition-opacity duration-1000',
         )}
       >
         <Show when={props.isOpen}>{content}</Show>

src/components/ForTwoColumns.tsx

@@ -0,0 +1,33 @@
+import { JSX, Show, createMemo, createSignal } from 'solid-js'
+import { renderInTwoColumn } from '~/signals/config'
+
+const [windowWidth, setWindowWidth] = createSignal(0)
+
+setWindowWidth(document?.body?.clientWidth)
+
+window.addEventListener('resize', () => {
+  setWindowWidth(document.body.clientWidth)
+})
+
+const ForTwoColumns = (props: { subChild: JSX.Element[] }) => {
+  const isShowTwoColumns = createMemo(
+    () => windowWidth() >= 640 && renderInTwoColumn(),
+  ) // 640 is sm size in daisyui
+  const leftCloumns = createMemo(() =>
+    props.subChild.filter((i, index) => index % 2 === 0 || !isShowTwoColumns()),
+  )
+  const rightCloumns = createMemo(() =>
+    props.subChild.filter((i, index) => index % 2 === 1),
+  )
+
+  return (
+    <div class="flex">
+      <div class="flex flex-1 flex-col">{leftCloumns()}</div>
+      <Show when={isShowTwoColumns()}>
+        <div class="ml-2 flex flex-1 flex-col">{rightCloumns()}</div>
+      </Show>
+    </div>
+  )
+}
+
+export default ForTwoColumns

src/i18n/en.ts

@@ -43,4 +43,5 @@ export default {
   autoSwitchTheme: 'Automatically switch theme',
   favDayTheme: 'Favorite light theme',
   favNightTheme: 'Favorite dark theme',
+  renderInTwoColumns: 'Render Proxies in two columns',
 }

src/i18n/zh.ts

@@ -43,4 +43,5 @@ export default {
   autoSwitchTheme: '自动切换主题',
   favDayTheme: '浅色主题偏好',
   favNightTheme: '深色主题偏好',
+  renderInTwoColumns: '节点双列渲染',
 }

src/pages/Config.tsx

@@ -13,11 +13,13 @@ import {
   favDayTheme,
   favNightTheme,
   proxiesPreviewType,
+  renderInTwoColumn,
   setAutoCloseConns,
   setAutoSwitchTheme,
   setFavDayTheme,
   setFavNightTheme,
   setProxiesPreviewType,
+  setRenderInTwoColumn,
   setUrlForDelayTest,
   urlForDelayTest,
 } from '~/signals/config'
@@ -151,6 +153,17 @@ const ConfigForXd = () => {
 
   return (
     <div class="grid gap-4">
+      <div class="flex flex-col">
+        <div class="pb-4">{t('renderInTwoColumns')}</div>
+        <input
+          type="checkbox"
+          class="toggle"
+          checked={renderInTwoColumn()}
+          onChange={(e) => {
+            setRenderInTwoColumn(e.target.checked)
+          }}
+        />
+      </div>
       <div class="flex flex-col">
         <div class="pb-4">{t('autoSwitchTheme')}</div>
         <input

src/pages/Proxies.tsx

@@ -2,7 +2,7 @@ import { useI18n } from '@solid-primitives/i18n'
 import { IconBrandSpeedtest } from '@tabler/icons-solidjs'
 import { Show, createSignal } from 'solid-js'
 import Collapse from '~/components/Collpase'
-import ForTwoLine from '~/components/ForTwoLine'
+import ForTwoColumns from '~/components/ForTwoColumns'
 import ProxyCardGroups from '~/components/ProxyCardGroups'
 import ProxyNodePreview from '~/components/ProxyNodePreview'
 import { useProxies } from '~/signals/proxies'
@@ -35,7 +35,7 @@ export default () => {
       <h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
         {t('proxies')}
       </h1>
-      <ForTwoLine
+      <ForTwoColumns
         subChild={proxies().map((proxy) => {
           const title = (
             <>

src/pages/ProxyProvider.tsx

@@ -2,7 +2,7 @@ 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 ForTwoColumns from '~/components/ForTwoColumns'
 import ProxyCardGroups from '~/components/ProxyCardGroups'
 import ProxyNodePreview from '~/components/ProxyNodePreview'
 import SubscriptionInfo from '~/components/SubscriptionInfo'
@@ -60,7 +60,7 @@ export default () => {
           <IconReload />
         </button>
       </h1>
-      <ForTwoLine
+      <ForTwoColumns
         subChild={proxyProviders().map((proxyProvider) => {
           const title = (
             <>

src/signals/config.ts

@@ -27,6 +27,10 @@ export const [favNightTheme, setFavNightTheme] = makePersisted(
   createSignal('night'),
   { name: 'favNightTheme', storage: localStorage },
 )
+export const [renderInTwoColumn, setRenderInTwoColumn] = makePersisted(
+  createSignal(true),
+  { name: 'renderInTwoColumn', storage: localStorage },
+)
 
 const setTheme = (isDark: boolean) => {
   if (autoSwitchTheme()) {