feat(proxies): add multi-column render back

src/components/Collapse.tsx

@@ -41,7 +41,7 @@ export const Collapse: ParentComponent<Props> = (props) => {
       <div
         class={twMerge(
           getCollapseContentClassName(),
-          'collapse-content grid grid-cols-1 gap-2 transition-opacity duration-1000 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
+          'collapse-content grid grid-cols-1 gap-2 transition-opacity duration-1000 xl:grid-cols-3 2xl:grid-cols-4',
         )}
       >
         <Show when={props.isOpen}>{children(() => props.children)()}</Show>

src/components/ProxyNodeCard.tsx

@@ -43,49 +43,47 @@ export const ProxyNodeCard = (props: {
       onClick={onClick}
     >
       <div class="card-body">
-        <span class="card-title line-clamp-1 text-start text-sm">
+        <div class="card-title flex items-center justify-between gap-2">
-          {proxyName}
+          <span class="line-clamp-1 text-start text-sm">{proxyName}</span>
-        </span>
 
-        <div class="flex items-center justify-between gap-2">
+          <div class="badge badge-primary badge-sm font-bold uppercase">
-          <div class="flex items-center gap-2">
+            {formatProxyType(proxyNode()?.type)}
-            <div class="badge badge-primary badge-sm font-bold uppercase">
-              {formatProxyType(proxyNode()?.type)}
-            </div>
-
-            <Show when={specialType()}>
-              <div class="badge badge-secondary badge-sm">{specialType()}</div>
-            </Show>
-
-            <Show when={supportIPv6()}>
-              <div class="badge badge-accent badge-sm">IPv6</div>
-            </Show>
           </div>
+        </div>
 
-          <div class="flex items-center gap-2">
+        <div class="flex flex-wrap items-center gap-2">
-            <Latency
+          <Show when={specialType()}>
-              name={props.proxyName}
+            <div class="badge badge-secondary badge-sm">{specialType()}</div>
-              class={twMerge(isSelected && 'badge')}
+          </Show>
-            />
 
-            <Button
+          <Show when={supportIPv6()}>
-              class="btn-square btn-sm"
+            <div class="badge badge-accent badge-sm">IPv6</div>
-              icon={
+          </Show>
-                <IconBrandSpeedtest
+        </div>
-                  class={twMerge(
-                    'size-6',
-                    proxyLatencyTestingMap()[proxyName] &&
-                      'animate-pulse text-success',
-                  )}
-                />
-              }
-              onClick={(e) => {
-                e.stopPropagation()
 
-                void proxyLatencyTest(proxyName, proxyNode().provider)
+        <div class="card-actions items-center justify-end">
-              }}
+          <Latency
-            />
+            name={props.proxyName}
-          </div>
+            class={twMerge(isSelected && 'badge')}
+          />
+
+          <Button
+            class="btn-square btn-sm"
+            icon={
+              <IconBrandSpeedtest
+                class={twMerge(
+                  'size-6',
+                  proxyLatencyTestingMap()[proxyName] &&
+                    'animate-pulse text-success',
+                )}
+              />
+            }
+            onClick={(e) => {
+              e.stopPropagation()
+
+              void proxyLatencyTest(proxyName, proxyNode().provider)
+            }}
+          />
         </div>
       </div>
     </div>

src/pages/Proxies.tsx

@@ -173,7 +173,7 @@ export default () => {
 
         <div class="flex-1 overflow-y-auto">
           <Show when={activeTab() === ActiveTab.proxies}>
-            <div class="flex flex-col gap-2">
+            <div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2">
               <For each={renderProxies()}>
                 {(proxyGroup) => {
                   const sortedProxyNames = createMemo(() =>
@@ -278,7 +278,7 @@ export default () => {
           </Show>
 
           <Show when={activeTab() === ActiveTab.proxyProviders}>
-            <div class="flex flex-col gap-2">
+            <div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2">
               <For each={proxyProviders()}>
                 {(proxyProvider) => {
                   const sortedProxyNames = createMemo(() =>

tailwind.config.ts

@@ -6,9 +6,11 @@ export default {
   plugins: [daisyui],
   daisyui: { themes: true },
   theme: {
-    fontFamily: {
+    extend: {
-      twemoji: ['system-ui', 'Twemoji Mozilla', 'Fira Sans', 'monospace'],
+      fontFamily: {
-      'no-twemoji': ['system-ui', 'Fira Sans', 'monospace'],
+        twemoji: ['system-ui', 'Twemoji Mozilla', 'Fira Sans', 'monospace'],
+        'no-twemoji': ['system-ui', 'Fira Sans', 'monospace'],
+      },
     },
   },
 } as Config