feat(proxies): add render in two columns option back

src/components/Collapse.tsx

@@ -1,5 +1,6 @@
 import type { JSX, ParentComponent } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
+import { renderProxiesInTwoColumns } from '~/signals'
 
 type Props = {
   title: JSX.Element
@@ -24,6 +25,14 @@ export const Collapse: ParentComponent<Props> = (props) => {
     return props.isOpen ? openedClassName : closedClassName
   }
 
+  const gridStyle = createMemo(() => {
+    if (renderProxiesInTwoColumns()) {
+      return 'lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'
+    }
+
+    return 'sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10'
+  })
+
   return (
     <div
       class={twMerge(
@@ -41,7 +50,8 @@ export const Collapse: ParentComponent<Props> = (props) => {
       <div
         class={twMerge(
           getCollapseContentClassName(),
-          'collapse-content grid grid-cols-1 gap-2 transition-opacity duration-1000 xl:grid-cols-2 2xl:grid-cols-3',
+          gridStyle(),
+          'collapse-content grid grid-cols-2 gap-2 transition-opacity duration-1000',
         )}
       >
         <Show when={props.isOpen}>{children(() => props.children)()}</Show>

src/components/ProxiesSettingsModal.tsx

@@ -11,6 +11,7 @@ import {
   latencyTestTimeoutDuration,
   proxiesOrderingType,
   proxiesPreviewType,
+  renderProxiesInTwoColumns,
   setAutoCloseConns,
   setHideUnAvailableProxies,
   setIconHeight,
@@ -18,6 +19,7 @@ import {
   setLatencyTestTimeoutDuration,
   setProxiesOrderingType,
   setProxiesPreviewType,
+  setRenderProxiesInTwoColumns,
   setUrlForLatencyTest,
   setUrlIPv6SupportTest,
   urlForIPv6SupportTest,
@@ -117,6 +119,18 @@ export const ProxiesSettingsModal: Component<{
           </div>
         </div>
 
+        <div>
+          <ConfigTitle withDivider>{t('renderInTwoColumns')}</ConfigTitle>
+          <div class="flex w-full justify-center">
+            <input
+              class="toggle"
+              type="checkbox"
+              checked={renderProxiesInTwoColumns()}
+              onChange={(e) => setRenderProxiesInTwoColumns(e.target.checked)}
+            />
+          </div>
+        </div>
+
         <div>
           <ConfigTitle withDivider>{t('proxiesPreviewType')}</ConfigTitle>
 

src/i18n/en.ts

@@ -55,6 +55,7 @@ export default {
   autoSwitchTheme: 'Automatically switch theme',
   favDayTheme: 'Favorite light theme',
   favNightTheme: 'Favorite dark theme',
+  renderInTwoColumns: 'Render In Two Columns',
   updateGEODatabases: 'Update GEO Databases',
   restartCore: 'Restart Core',
   upgradeCore: 'Upgrade Core',

src/i18n/zh.ts

@@ -57,6 +57,7 @@ export default {
   autoSwitchTheme: '自动切换主题',
   favDayTheme: '浅色主题偏好',
   favNightTheme: '深色主题偏好',
+  renderInTwoColumns: '双列渲染',
   updateGEODatabases: '更新 GEO 数据库',
   restartCore: '重启核心',
   upgradeCore: '更新核心',

src/pages/Proxies.tsx

@@ -27,6 +27,7 @@ import {
   iconHeight,
   iconMarginRight,
   proxiesOrderingType,
+  renderProxiesInTwoColumns,
   useConnections,
   useProxies,
 } from '~/signals'
@@ -173,7 +174,14 @@ export default () => {
 
         <div class="flex-1 overflow-y-auto">
           <Show when={activeTab() === ActiveTab.proxies}>
-            <div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2">
+            <div
+              class={twMerge(
+                'grid grid-cols-1 place-items-start gap-2',
+                renderProxiesInTwoColumns()
+                  ? 'sm:grid-cols-2'
+                  : 'sm:grid-cols-1',
+              )}
+            >
               <For each={renderProxies()}>
                 {(proxyGroup) => {
                   const sortedProxyNames = createMemo(() =>
@@ -228,9 +236,11 @@ export default () => {
                       <div class="flex flex-wrap items-center justify-between gap-2">
                         <div class="badge badge-primary badge-sm">
                           <span class="font-bold">{proxyGroup.type}</span>
-
                           <Show when={proxyGroup.now?.length > 0}>
-                            <pre>{` :: ${proxyGroup.now}`}</pre>
+                            <span class="whitespace-nowrap">
+                              &nbsp;::&nbsp;
+                              {proxyGroup.now}
+                            </span>
                           </Show>
                         </div>
 
@@ -278,7 +288,14 @@ export default () => {
           </Show>
 
           <Show when={activeTab() === ActiveTab.proxyProviders}>
-            <div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2">
+            <div
+              class={twMerge(
+                'grid grid-cols-1 place-items-start gap-2',
+                renderProxiesInTwoColumns()
+                  ? 'sm:grid-cols-2'
+                  : 'sm:grid-cols-1',
+              )}
+            >
               <For each={proxyProviders()}>
                 {(proxyProvider) => {
                   const sortedProxyNames = createMemo(() =>

src/signals/config.ts

@@ -30,6 +30,14 @@ export const [proxiesOrderingType, setProxiesOrderingType] = makePersisted(
   { name: 'proxiesOrderingType', storage: localStorage },
 )
 
+export const renderProxiesInTwoColumnsDefault = true
+
+export const [renderProxiesInTwoColumns, setRenderProxiesInTwoColumns] =
+  makePersisted(createSignal(renderProxiesInTwoColumnsDefault), {
+    name: 'renderProxiesInTwoColumns',
+    storage: localStorage,
+  })
+
 export const hideUnAvailableProxiesDefault = false
 
 export const [hideUnAvailableProxies, setHideUnAvailableProxies] =