From 96a11bdb9c9cbf89d45eb800e0572420be4bd929 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Fri, 25 Aug 2023 00:44:00 +0800
Subject: [PATCH] perf: add mark color to the border of icon in connection pane

---
 .../src/components/sidebar/BrowserTree.vue    |  3 ++
 .../src/components/sidebar/ConnectionPane.vue | 11 -----
 .../src/components/sidebar/ConnectionTree.vue | 40 +++++++++++++------
 main.go                                       |  2 +-
 4 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index 064ad13..5d18d55 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -62,6 +62,9 @@ const data = computed(() => {
 
 const backgroundColor = computed(() => {
     const { markColor: hex = '' } = connectionStore.serverProfile[props.server] || {}
+    if (isEmpty(hex)) {
+        return ''
+    }
     const { r, g, b } = parseHexColor(hex)
     return `rgba(${r}, ${g}, ${b}, 0.2)`
 })
diff --git a/frontend/src/components/sidebar/ConnectionPane.vue b/frontend/src/components/sidebar/ConnectionPane.vue
index 26edc94..a5cf1f2 100644
--- a/frontend/src/components/sidebar/ConnectionPane.vue
+++ b/frontend/src/components/sidebar/ConnectionPane.vue
@@ -14,10 +14,6 @@ const themeVars = useThemeVars()
 const dialogStore = useDialogStore()
 const connectionStore = useConnectionStore()
 const filterPattern = ref('')
-
-const onDisconnectAll = () => {
-    connectionStore.closeAllConnection()
-}
 </script>
 
 <template>
@@ -38,13 +34,6 @@ const onDisconnectAll = () => {
                 stroke-width="4"
                 t-tooltip="new_group"
                 @click="dialogStore.openNewGroupDialog()" />
-            <icon-button
-                :disabled="!connectionStore.anyConnectionOpened"
-                :icon="Unlink"
-                size="20"
-                stroke-width="4"
-                t-tooltip="disconnect_all"
-                @click="onDisconnectAll" />
             <n-input v-model:value="filterPattern" :placeholder="$t('filter')" clearable>
                 <template #prefix>
                     <n-icon :component="Filter" size="20" />
diff --git a/frontend/src/components/sidebar/ConnectionTree.vue b/frontend/src/components/sidebar/ConnectionTree.vue
index 011040d..9cf359d 100644
--- a/frontend/src/components/sidebar/ConnectionTree.vue
+++ b/frontend/src/components/sidebar/ConnectionTree.vue
@@ -117,18 +117,29 @@ const menuOptions = {
     },
 }
 
+/**
+ * get mark color of server saved in preferences
+ * @param name
+ * @return {null|string}
+ */
+const getServerMarkColor = (name) => {
+    const { markColor = '' } = connectionStore.serverProfile[name] || {}
+    if (!isEmpty(markColor)) {
+        const rgb = parseHexColor(markColor)
+        const rgb2 = hexGammaCorrection(rgb, 0.75)
+        return toHexColor(rgb2)
+    }
+    return null
+}
+
 const renderLabel = ({ option }) => {
     if (option.type === ConnectionType.Server) {
-        const { markColor = '' } = connectionStore.serverProfile[option.name] || {}
-        if (!isEmpty(markColor)) {
-            const rgb = parseHexColor(markColor)
-            const rgb2 = hexGammaCorrection(rgb, 0.75)
+        const color = getServerMarkColor(option.name)
+        if (color != null) {
             return h(
                 NText,
                 {
-                    style: {
-                        color: toHexColor(rgb2),
-                    },
+                    style: { color },
                 },
                 () => option.label,
             )
@@ -166,9 +177,10 @@ const renderPrefix = ({ option }) => {
             )
         case ConnectionType.Server:
             const connected = connectionStore.isConnected(option.name)
+            const color = getServerMarkColor(option.name)
             return h(
                 NIcon,
-                { size: 20 },
+                { size: 20, color },
                 {
                     default: () => h(ToggleServer, { modelValue: !!connected }),
                 },
@@ -362,9 +374,11 @@ const handleSelectContextMenu = (key) => {
             removeConnection(name)
             break
         case 'server_close':
-            if (!isEmpty(group)) {
-                connectionStore.closeConnection(name)
-            }
+            connectionStore.closeConnection(name).then((closed) => {
+                if (closed) {
+                    $message.success(i18n.t('handle_succ'))
+                }
+            })
             break
         case 'group_rename':
             if (!isEmpty(group)) {
@@ -372,7 +386,9 @@ const handleSelectContextMenu = (key) => {
             }
             break
         case 'group_delete':
-            removeGroup(group)
+            if (!isEmpty(group)) {
+                removeGroup(group)
+            }
             break
         default:
             console.warn('TODO: handle context menu:' + key)
diff --git a/main.go b/main.go
index 62ea620..b8cf150 100644
--- a/main.go
+++ b/main.go
@@ -67,7 +67,7 @@ func main() {
 			},
 			About: &mac.AboutInfo{
 				Title:   "Tiny RDM",
-				Message: "A modern lightweight cross-platform Redis desktop client\nCopyright © 2023",
+				Message: "A modern lightweight cross-platform Redis desktop client.\n\nCopyright © 2023",
 				Icon:    icon,
 			},
 			//WebviewIsTransparent: true,