style: adjusted style in dark mode

feat: add server status entrance button at the bottom of browser pane

frontend/src/components/icons/Status.vue

@@ -0,0 +1,44 @@
+<script setup>
+const props = defineProps({
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+})
+</script>
+
+<template>
+    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect
+            x="4"
+            y="6"
+            width="40"
+            height="36"
+            rx="2"
+            fill="none"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            d="M32 25V32"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            d="M24 16V32"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            d="M16 20V32"
+            stroke="currentColor"
+            :stroke-width="props.strokeWidth"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/components/sidebar/BrowserPane.vue

@@ -13,6 +13,7 @@ import useConnectionStore from 'stores/connections.js'
 import { types } from '@/consts/support_redis_type.js'
 import Search from '@/components/icons/Search.vue'
 import Unlink from '@/components/icons/Unlink.vue'
+import Status from '@/components/icons/Status.vue'
 
 const themeVars = useThemeVars()
 const dialogStore = useDialogStore()
@@ -28,9 +29,8 @@ const currentSelect = computed(() => {
     return { server, db, key }
 })
 
-const onNewKey = () => {
-    const { server, key, db = 0 } = currentSelect.value
-    dialogStore.openNewKeyDialog(key, server, db)
+const onInfo = () => {
+    browserTreeRef.value?.handleSelectContextMenu('server_info')
 }
 
 const i18n = useI18n()
@@ -74,7 +74,7 @@ const filterTypeOptions = computed(() => {
                     :options="filterTypeOptions"
                     style="width: 120px" />
                 <n-input clearable placeholder="" />
-                <n-button ghost>
+                <n-button ghost :focusable="false">
                     <template #icon>
                         <n-icon :component="Search" />
                     </template>
@@ -83,15 +83,8 @@ const filterTypeOptions = computed(() => {
         </div>
         <!-- bottom function bar -->
         <div class="nav-pane-bottom flex-box-h">
-            <icon-button :icon="AddLink" size="20" stroke-width="4" t-tooltip="new_key" @click="onNewKey" />
+            <icon-button :icon="Status" size="20" stroke-width="4" t-tooltip="status" @click="onInfo" />
             <icon-button :icon="Refresh" size="20" stroke-width="4" t-tooltip="reload" @click="onRefresh" />
-            <!--            <icon-button-->
-            <!--                :icon="Filter"-->
-            <!--                size="20"-->
-            <!--                stroke-width="4"-->
-            <!--                t-tooltip="filter_key"-->
-            <!--                @click="filterForm.showFilter = !filterForm.showFilter"-->
-            <!--            />-->
             <div class="flex-item-expand"></div>
             <icon-button :icon="Unlink" size="20" stroke-width="4" t-tooltip="disconnect" @click="onDisconnect" />
         </div>

frontend/src/components/sidebar/BrowserTree.vue

@@ -225,6 +225,10 @@ const handleSelectContextMenu = (key) => {
     const node = connectionStore.getNode(selectedKey)
     const { db, key: nodeKey, redisKey } = node || {}
     switch (key) {
+        case 'server_info':
+            tabStore.setSelectedKeys(props.server)
+            onUpdateSelectedKeys()
+            break
         case 'server_reload':
             expandedKeys.value = [props.server]
             tabStore.setSelectedKeys(props.server)
@@ -320,10 +324,9 @@ const onUpdateSelectedKeys = (keys, options) => {
                     return
                 }
             }
-
+        }
         // default is load blank key to display server status
         connectionStore.loadKeyValue(props.server, 0)
-        }
     } finally {
         tabStore.setSelectedKeys(props.server, keys)
     }

frontend/src/components/sidebar/ConnectionTree.vue

@@ -17,12 +17,14 @@ import useTabStore from 'stores/tab.js'
 import Edit from '@/components/icons/Edit.vue'
 import { hexGammaCorrection, parseHexColor, toHexColor } from '@/utils/rgb.js'
 import IconButton from '@/components/common/IconButton.vue'
+import usePreferencesStore from 'stores/preferences.js'
 
 const themeVars = useThemeVars()
 const i18n = useI18n()
 const openingConnection = ref(false)
 const connectionStore = useConnectionStore()
 const tabStore = useTabStore()
+const prefStore = usePreferencesStore()
 const dialogStore = useDialogStore()
 
 const expandedKeys = ref([])
@@ -168,6 +170,7 @@ const renderIconMenu = (items) => {
 }
 
 const renderPrefix = ({ option }) => {
+    const iconTransparency = prefStore.isDark ? 0.75 : 1
     switch (option.type) {
         case ConnectionType.Group:
             const opened = indexOf(expandedKeys.value, option.key) !== -1
@@ -175,7 +178,11 @@ const renderPrefix = ({ option }) => {
                 NIcon,
                 { size: 20 },
                 {
-                    default: () => h(ToggleFolder, { modelValue: opened }),
+                    default: () =>
+                        h(ToggleFolder, {
+                            modelValue: opened,
+                            fillColor: `rgba(255,206,120,${iconTransparency})`,
+                        }),
                 },
             )
         case ConnectionType.Server:
@@ -183,9 +190,13 @@ const renderPrefix = ({ option }) => {
             const color = getServerMarkColor(option.name)
             return h(
                 NIcon,
-                { size: 20, color },
+                { size: 20, color: !!!connected ? color : undefined },
                 {
-                    default: () => h(ToggleServer, { modelValue: !!connected }),
+                    default: () =>
+                        h(ToggleServer, {
+                            modelValue: !!connected,
+                            fillColor: `rgba(220,66,60,${iconTransparency})`,
+                        }),
                 },
             )
     }

frontend/src/langs/en.json

@@ -13,6 +13,7 @@
   "new_group": "Add New Group",
   "rename_group": "Rename Group",
   "disconnect_all": "Disconnect all",
+  "status": "Status",
   "filter": "Filter",
   "sort_conn": "Sort Connections",
   "close_confirm": "Confirm close this tab and connection",

frontend/src/langs/zh-cn.json

@@ -13,6 +13,7 @@
   "new_group": "添加新分组",
   "rename_group": "重命名分组",
   "disconnect_all": "断开所有连接",
+  "status": "状态",
   "filter": "筛选",
   "sort_conn": "调整连接顺序",
   "close_confirm": "是否关闭当前连接",

frontend/src/main.js

@@ -24,12 +24,15 @@ async function setupApp() {
     await setupDiscreteApi()
     app.config.errorHandler = (err, instance, info) => {
         // TODO: add "send error message to author" later
+        try {
+            const content = err.toString()
             $notification.error({
                 title: i18n.global.t('error'),
-            content: err.toString(),
+                content,
                 // meta: err.stack,
             })
             console.error(err)
+        } catch (e) {}
     }
     app.config.warnHandler = (message) => {
         console.warn(message)