From 8502a6e4896e7a1c5e2049fcd2521a5434fcf70e Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Thu, 21 Sep 2023 23:58:06 +0800
Subject: [PATCH] feat(proxy): regression on render proxies in two columns

---
 src/components/ProxyNodePreview.tsx   | 25 +++++++++++++++++--------
 src/components/RenderInTwoColumns.tsx | 26 ++++++++++++++++++++++++++
 src/components/index.ts               |  1 +
 src/pages/Proxies.tsx                 |  9 +++++----
 tailwind.config.ts                    |  2 +-
 5 files changed, 50 insertions(+), 13 deletions(-)
 create mode 100644 src/components/RenderInTwoColumns.tsx

diff --git a/src/components/ProxyNodePreview.tsx b/src/components/ProxyNodePreview.tsx
index a515934..6cfd210 100644
--- a/src/components/ProxyNodePreview.tsx
+++ b/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()}>
-        <ProxyPreviewBar proxyNameList={props.proxyNameList} now={props.now} />
-      </Show>
-      <Show when={isShowDots()}>
-        <ProxyPreviewDots proxyNameList={props.proxyNameList} now={props.now} />
-      </Show>
+      <Switch>
+        <Match when={isShowBar()}>
+          <ProxyPreviewBar
+            proxyNameList={props.proxyNameList}
+            now={props.now}
+          />
+        </Match>
+
+        <Match when={isShowDots()}>
+          <ProxyPreviewDots
+            proxyNameList={props.proxyNameList}
+            now={props.now}
+          />
+        </Match>
+      </Switch>
     </Show>
   )
 }
diff --git a/src/components/RenderInTwoColumns.tsx b/src/components/RenderInTwoColumns.tsx
new file mode 100644
index 0000000..8d5c673
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 9004b5a..b6289df 100644
--- a/src/components/index.ts
+++ b/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'
diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index 9ebbca6..10c11b9 100644
--- a/src/pages/Proxies.tsx
+++ b/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>
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0c4e014..2966c09 100644
--- a/tailwind.config.ts
+++ b/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: {