feat(proxy): regression on render proxies in two columns

src/components/ProxyNodePreview.tsx

@@ -1,4 +1,4 @@
-import { Show, createMemo } from 'solid-js'
+import { createMemo, Match, Show, Switch } from 'solid-js'
 import { ProxyPreviewBar, ProxyPreviewDots } from '~/components'
 import { PROXIES_PREVIEW_TYPE } from '~/constants'
 import { proxiesPreviewType } from '~/signals'
@@ -9,7 +9,7 @@ export const ProxyNodePreview = (props: {
 }) => {
   const off = () => proxiesPreviewType() === PROXIES_PREVIEW_TYPE.OFF
 
-  const isSmallGroup = createMemo(() => props.proxyNameList.length <= 30)
+  const isSmallGroup = createMemo(() => props.proxyNameList.length <= 10)
 
   const isShowBar = createMemo(() => {
     const type = proxiesPreviewType()
@@ -31,12 +31,21 @@ export const ProxyNodePreview = (props: {
 
   return (
     <Show when={!off()}>
-      <Show when={isShowBar()}>
+      <Switch>
-        <ProxyPreviewBar proxyNameList={props.proxyNameList} now={props.now} />
+        <Match when={isShowBar()}>
-      </Show>
+          <ProxyPreviewBar
-      <Show when={isShowDots()}>
+            proxyNameList={props.proxyNameList}
-        <ProxyPreviewDots proxyNameList={props.proxyNameList} now={props.now} />
+            now={props.now}
-      </Show>
+          />
+        </Match>
+
+        <Match when={isShowDots()}>
+          <ProxyPreviewDots
+            proxyNameList={props.proxyNameList}
+            now={props.now}
+          />
+        </Match>
+      </Switch>
     </Show>
   )
 }

src/components/RenderInTwoColumns.tsx

@@ -0,0 +1,26 @@
+import { createWindowSize } from '@solid-primitives/resize-observer'
+import { ParentComponent, Show, children, createMemo } from 'solid-js'
+
+export const RenderInTwoColumns: ParentComponent = (props) => {
+  const resolvedChildren = children(() => props.children)
+  const windowSize = createWindowSize()
+  // 640 is sm size in default tailwindcss breakpoint
+  const showTwoColumns = createMemo(() => windowSize.width >= 640)
+
+  const leftColumns = createMemo(() =>
+    resolvedChildren.toArray().filter((_, index) => index % 2 === 0),
+  )
+
+  const rightColumns = createMemo(() =>
+    resolvedChildren.toArray().filter((_, index) => index % 2 === 1),
+  )
+
+  return (
+    <div class="flex flex-col gap-2 sm:flex-row">
+      <Show when={showTwoColumns()} fallback={props.children}>
+        <div class="flex flex-1 flex-col gap-2">{leftColumns()}</div>
+        <div class="flex flex-1 flex-col gap-2">{rightColumns()}</div>
+      </Show>
+    </div>
+  )
+}

src/components/index.ts

@@ -13,4 +13,5 @@ export * from './ProxyNodeCard'
 export * from './ProxyNodePreview'
 export * from './ProxyPreviewBar'
 export * from './ProxyPreviewDots'
+export * from './RenderInTwoColumns'
 export * from './SubscriptionInfo'

src/pages/Proxies.tsx

@@ -12,6 +12,7 @@ import {
   ProxiesSettingsModal,
   ProxyCardGroups,
   ProxyNodePreview,
+  RenderInTwoColumns,
   SubscriptionInfo,
 } from '~/components'
 import { MODAL } from '~/constants'
@@ -146,7 +147,7 @@ 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">
+          <RenderInTwoColumns>
             <For each={proxies()}>
               {(proxyGroup) => {
                 const sortedProxyNames = createMemo(() =>
@@ -216,11 +217,11 @@ export default () => {
                 )
               }}
             </For>
-          </div>
+          </RenderInTwoColumns>
         </Show>
 
         <Show when={activeTab() === ActiveTab.proxyProviders}>
-          <div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2">
+          <RenderInTwoColumns>
             <For each={proxyProviders()}>
               {(proxyProvider) => {
                 const sortedProxyNames = createMemo(() =>
@@ -302,7 +303,7 @@ export default () => {
                 )
               }}
             </For>
-          </div>
+          </RenderInTwoColumns>
         </Show>
       </div>
 

tailwind.config.ts

@@ -5,7 +5,7 @@ import { Config } from 'tailwindcss'
 import safeArea from 'tailwindcss-safe-area'
 
 export default {
-  content: ['./src/**/*.{css,ts,tsx}'],
+  content: ['src/**/*.{css,ts,tsx}'],
   plugins: [daisyui, safeArea],
   daisyui: { themes: true },
   theme: {