feat: dual column for proxies render (#1152)

src/components/ProxiesRenderWrapper.tsx

@@ -0,0 +1,32 @@
+import { createWindowSize } from '@solid-primitives/resize-observer'
+import { ResolvedJSXElement, type ParentComponent } from 'solid-js'
+import { renderProxiesInTwoColumns } from '~/signals'
+
+export const ProxiesRenderWarpper: ParentComponent = (props) => {
+  const windowSize = createWindowSize()
+  const isBiggerScreen = createMemo(() => windowSize.width > 480)
+
+  return () => {
+    const content = children(() => props.children) as () => ResolvedJSXElement[]
+    const filterContent = (target: number) => {
+      return content()
+        ?.filter((_: ResolvedJSXElement, index: number) => index % 2 === target)
+        .map((proxy) => {
+          return <div class="mb-2">{proxy}</div>
+        })
+    }
+
+    if (renderProxiesInTwoColumns() && isBiggerScreen()) {
+      return (
+        <div class="flex gap-2">
+          <div class="flex-1">{filterContent(0)}</div>
+          <div class="flex-1">{filterContent(1)}</div>
+        </div>
+      )
+    }
+
+    return (
+      <div class={'grid grid-cols-1 place-items-start gap-2'}>{content()}</div>
+    )
+  }
+}

src/pages/Proxies.tsx

@@ -15,6 +15,7 @@ import {
   ProxyNodePreview,
   SubscriptionInfo,
 } from '~/components'
+import { ProxiesRenderWarpper } from '~/components/ProxiesRenderWrapper'
 import {
   filterProxiesByAvailability,
   formatProxyType,
@@ -28,7 +29,6 @@ import {
   iconHeight,
   iconMarginRight,
   proxiesOrderingType,
-  renderProxiesInTwoColumns,
   useConnections,
   useProxies,
 } from '~/signals'
@@ -175,14 +175,7 @@ export default () => {
 
         <div class="flex-1 overflow-y-auto">
           <Show when={activeTab() === ActiveTab.proxies}>
-            <div
-              class={twMerge(
-                'grid grid-cols-1 place-items-start gap-2',
-                renderProxiesInTwoColumns()
-                  ? 'sm:grid-cols-2'
-                  : 'sm:grid-cols-1',
-              )}
-            >
+            <ProxiesRenderWarpper>
               <For each={renderProxies()}>
                 {(proxyGroup) => {
                   const sortedProxyNames = createMemo(() =>
@@ -236,7 +229,9 @@ export default () => {
 
                       <div class="flex flex-wrap items-center justify-between gap-2">
                         <div class="badge badge-primary badge-sm">
-                          <span class="font-bold">{formatProxyType(proxyGroup.type)}</span>
+                          <span class="font-bold">
+                            {formatProxyType(proxyGroup.type)}
+                          </span>
                           <Show when={proxyGroup.now?.length > 0}>
                             <span class="whitespace-nowrap">
                               &nbsp;::&nbsp;
@@ -285,18 +280,11 @@ export default () => {
                   )
                 }}
               </For>
-            </div>
+            </ProxiesRenderWarpper>
           </Show>
 
           <Show when={activeTab() === ActiveTab.proxyProviders}>
-            <div
-              class={twMerge(
-                'grid grid-cols-1 place-items-start gap-2',
-                renderProxiesInTwoColumns()
-                  ? 'sm:grid-cols-2'
-                  : 'sm:grid-cols-1',
-              )}
-            >
+            <ProxiesRenderWarpper>
               <For each={proxyProviders()}>
                 {(proxyProvider) => {
                   const sortedProxyNames = createMemo(() =>
@@ -390,7 +378,7 @@ export default () => {
                   )
                 }}
               </For>
-            </div>
+            </ProxiesRenderWarpper>
           </Show>
         </div>