From 6db7ceddac226e81e4009d4e333f73bac985bd67 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Wed, 30 Aug 2023 23:36:25 +0800
Subject: [PATCH] feat: truncate proxy node name

---
 .vscode/settings.json            |  8 ++++++++
 src/components/Collpase.tsx      | 13 +++++++++----
 src/components/ProxyNodeCard.tsx |  8 +++++---
 src/pages/Proxies.tsx            |  5 +++--
 4 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..5c31806
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "ngClass",
+    ".*ClassName*"
+  ]
+}
diff --git a/src/components/Collpase.tsx b/src/components/Collpase.tsx
index e23d4d8..7f96742 100644
--- a/src/components/Collpase.tsx
+++ b/src/components/Collpase.tsx
@@ -12,17 +12,22 @@ const Collapse: ParentComponent<Props> = (props) => {
   const { title, content, onCollapse } = props
 
   const getCollapseClassName = () => {
-    return props.isOpen ? 'collapse-open' : 'collapse-close'
+    const openedClassName = 'collapse-open'
+    const closedClassName = 'collapse-close'
+    return props.isOpen ? openedClassName : closedClassName
   }
+
   const getCollapseContentClassName = () => {
-    return props.isOpen ? 'opacity-100' : 'opacity-0 scale-y-0'
+    const openedClassName = 'opacity-100'
+    const closedClassName = 'opacity-0 scale-y-0'
+    return props.isOpen ? openedClassName : closedClassName
   }
 
   return (
     <div
       class={twMerge(
         getCollapseClassName(),
-        'collapse collapse-arrow border-secondary bg-base-200 p-1',
+        'collapse collapse-arrow overflow-visible border-secondary bg-base-200 p-1',
       )}
     >
       <div
@@ -34,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-3 lg:grid-cols-5',
+          'collapse-content grid grid-cols-1 gap-2 transition-opacity duration-1000 sm:grid-cols-3 lg:grid-cols-5',
         )}
       >
         {content}
diff --git a/src/components/ProxyNodeCard.tsx b/src/components/ProxyNodeCard.tsx
index 3fbea99..f0d4115 100644
--- a/src/components/ProxyNodeCard.tsx
+++ b/src/components/ProxyNodeCard.tsx
@@ -17,6 +17,7 @@ export default (props: {
 
     return <span>{delay}ms</span>
   }
+  console.log(proxyName)
 
   return (
     <div
@@ -24,12 +25,13 @@ export default (props: {
         isSelected
           ? 'border-primary bg-success-content text-success'
           : 'border-secondary',
-        onClick ? 'cursor-pointer' : '',
-        'card card-bordered card-compact m-1 flex-row justify-between border-secondary p-4',
+        onClick && 'cursor-pointer',
+        'card card-bordered tooltip tooltip-bottom card-compact flex flex-row justify-between gap-2 p-4',
       )}
       onClick={() => onClick?.()}
+      data-tip={proxyName}
     >
-      <span class="mr-2 overflow-hidden whitespace-nowrap">{proxyName}</span>
+      <span class="truncate">{proxyName}</span>
       <span>{Delay(proxyName)}</span>
     </div>
   )
diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index 8178e62..7a07d51 100644
--- a/src/pages/Proxies.tsx
+++ b/src/pages/Proxies.tsx
@@ -41,8 +41,9 @@ export default () => {
             {(proxy) => {
               const title = (
                 <>
-                  <div class="flex items-center">
-                    <span class="mr-3">{proxy.name}</span>
+                  <div class="flex items-center gap-2">
+                    <span>{proxy.name}</span>
+
                     <IconBrandSpeedtest
                       class="cursor-pointer"
                       onClick={(e) => onSpeedTestClick(e, proxy.name)}