From 66320c892d8486351a74ab181b0b360b50659b1d Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Tue, 18 Apr 2023 11:27:27 +0800
Subject: [PATCH] feat: add connection title field

---
 src/components/ConnectionSidebar.tsx     | 35 ++++++++++++------------
 src/components/CreateConnectionModal.tsx |  4 +++
 src/components/kit/Tooltip.tsx           |  1 +
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/components/ConnectionSidebar.tsx b/src/components/ConnectionSidebar.tsx
index 7daaa6e..5a4146c 100644
--- a/src/components/ConnectionSidebar.tsx
+++ b/src/components/ConnectionSidebar.tsx
@@ -175,24 +175,25 @@ const ConnectionSidebar = () => {
                 <img src="/chat-logo-bot.webp" className="w-7 h-auto mx-auto" alt="" />
               </button>
               {connectionList.map((connection) => (
-                <button
-                  key={connection.id}
-                  className={`relative w-full h-14 rounded-l-lg p-2 mt-2 group ${
-                    currentConnectionCtx?.connection.id === connection.id && "bg-gray-100 dark:bg-zinc-700 shadow"
-                  }`}
-                  onClick={() => handleConnectionSelect(connection)}
-                >
-                  <span
-                    className="absolute right-0.5 -mt-1.5 opacity-60 hidden group-hover:block hover:opacity-80"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleEditConnection(connection);
-                    }}
+                <Tooltip key={connection.id} title={connection.title} side="right">
+                  <button
+                    className={`relative w-full h-14 rounded-l-lg p-2 mt-2 group ${
+                      currentConnectionCtx?.connection.id === connection.id && "bg-gray-100 dark:bg-zinc-700 shadow"
+                    }`}
+                    onClick={() => handleConnectionSelect(connection)}
                   >
-                    <Icon.FiEdit3 className="w-3.5 h-auto dark:text-gray-300" />
-                  </span>
-                  <EngineIcon engine={connection.engineType} className="w-auto h-full mx-auto dark:text-gray-300" />
-                </button>
+                    <span
+                      className="absolute right-0.5 -mt-1.5 opacity-60 hidden group-hover:block hover:opacity-80"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleEditConnection(connection);
+                      }}
+                    >
+                      <Icon.FiEdit3 className="w-3.5 h-auto dark:text-gray-300" />
+                    </span>
+                    <EngineIcon engine={connection.engineType} className="w-auto h-full mx-auto dark:text-gray-300" />
+                  </button>
+                </Tooltip>
               ))}
               <Tooltip title={t("connection.new")} side="right">
                 <button
diff --git a/src/components/CreateConnectionModal.tsx b/src/components/CreateConnectionModal.tsx
index e44d61f..e21bcbb 100644
--- a/src/components/CreateConnectionModal.tsx
+++ b/src/components/CreateConnectionModal.tsx
@@ -217,6 +217,10 @@ const CreateConnectionModal = (props: Props) => {
               onValueChange={(value) => setPartialConnection({ engineType: value as Engine })}
             />
           </div>
+          <div className="w-full flex flex-col">
+            <label className="block text-sm font-medium text-gray-700 mb-1">Title</label>
+            <TextField placeholder="Title" value={connection.title} onChange={(value) => setPartialConnection({ title: value })} />
+          </div>
           <div className="w-full flex flex-col">
             <label className="block text-sm font-medium text-gray-700 mb-1">Host</label>
             <TextField placeholder="Connect host" value={connection.host} onChange={(value) => setPartialConnection({ host: value })} />
diff --git a/src/components/kit/Tooltip.tsx b/src/components/kit/Tooltip.tsx
index a384415..b431e04 100644
--- a/src/components/kit/Tooltip.tsx
+++ b/src/components/kit/Tooltip.tsx
@@ -20,6 +20,7 @@ const Tooltip = (props: Props) => {
             className="bg-zinc-800 text-gray-200 dark:bg-black text-sm p-1 px-2 rounded-md z-[99999]"
             side={side}
             sideOffset={6}
+            hidden={title === ""}
           >
             {title}
             <TooltipUI.Arrow />