feat: update proxy layout

src/components/Collpase.tsx

@@ -27,7 +27,7 @@ const Collapse: ParentComponent<Props> = (props) => {
     <div
       class={twMerge(
         getCollapseClassName(),
-        'collapse collapse-arrow overflow-visible border-secondary bg-base-200 p-1',
+        'collapse collapse-arrow overflow-visible border-secondary bg-base-200',
       )}
     >
       <div
@@ -39,7 +39,7 @@ const Collapse: ParentComponent<Props> = (props) => {
       <div
         class={twMerge(
           getCollapseContentClassName(),
-          'collapse-content grid grid-cols-1 gap-2 overflow-hidden transition-opacity duration-1000 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
+          'collapse-content grid auto-rows-min grid-cols-2 gap-2 transition-opacity duration-1000 lg:grid-cols-3 xl:grid-cols-4',
         )}
       >
         {content}

src/components/ProxyNodeCard.tsx

@@ -10,14 +10,16 @@ export default (props: {
   const { proxyName, isSelected, onClick } = props
   const { delayMap, proxyNodeMap } = useProxies()
   const proxyNode = createMemo(() => proxyNodeMap()[proxyName])
+
   const Delay = (proxyname: string) => {
     const delay = delayMap()[proxyname]
-    let textClassName = 'text-green-500'
 
     if (typeof delay !== 'number' || delay === 0) {
       return ''
     }
 
+    let textClassName = 'text-green-500'
+
     if (delay > 500) {
       textClassName = 'text-red-500'
     } else if (delay > 200) {
@@ -27,25 +29,35 @@ export default (props: {
     return <span class={textClassName}>{delay}ms</span>
   }
 
+  const formatProxyType = (type: string) => {
+    const t = type.toLowerCase()
+
+    if (t === 'shadowsocks') {
+      return 'SS'
+    }
+
+    return t
+  }
+
   return (
     <div
       class={twMerge(
+        'card card-bordered tooltip tooltip-bottom card-compact flex gap-1 p-4',
         isSelected
           ? 'border-primary bg-success-content text-success'
           : 'border-secondary',
         onClick && 'cursor-pointer',
-        'card card-bordered tooltip tooltip-bottom card-compact gap-2 p-4',
       )}
       onClick={() => onClick?.()}
       data-tip={proxyName}
     >
-      <div class="flex truncate">{proxyName}</div>
+      <div class="truncate text-left">{proxyName}</div>
-      <div class="flex flex-row">
+      <div class="flex items-center justify-between gap-1">
-        <div class="flex flex-1 truncate text-sm text-slate-500">
+        <div class="truncate text-xs text-slate-500">
-          {proxyNode().type}
+          {formatProxyType(proxyNode().type)}
           {proxyNode().udp ? ' :: udp' : ''}
         </div>
-        <div>{Delay(proxyName)}</div>
+        <div class="text-xs">{Delay(proxyName)}</div>
       </div>
     </div>
   )

src/pages/Proxies.tsx

@@ -36,7 +36,7 @@ export default () => {
       <div>
         <h1 class="pb-4 text-lg font-semibold">Proxies</h1>
 
-        <div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
           <For each={proxies()}>
             {(proxy) => {
               const title = (
@@ -54,6 +54,7 @@ export default () => {
                   </div>
                 </>
               )
+
               const content = (
                 <For each={proxy.all}>
                   {(proxyName) => (
@@ -77,7 +78,7 @@ export default () => {
                       [`group-${proxy.name}`]: val,
                     })
                   }
-                ></Collapse>
+                />
               )
             }}
           </For>
@@ -87,7 +88,7 @@ export default () => {
       <div>
         <h1 class="pb-4 text-lg font-semibold">Proxy Providers</h1>
 
-        <div class="grid grid-cols-1 gap-2 sm:grid-cols-1">
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
           <For each={proxyProviders()}>
             {(proxyProvider) => {
               const title = <>{proxyProvider.name}</>