feat: add quick filter toggle for connection visibility in ctrl with tooltip updates

Author: Zephyruso

src/components/sidebar/ConnectionCtrl.tsx

@@ -16,6 +16,8 @@ import { useConnectionCard } from '@/store/settings'
 import {
   ArrowDownCircleIcon,
   ArrowUpCircleIcon,
+  LinkIcon,
+  LinkSlashIcon,
   PauseIcon,
   PlayIcon,
   QuestionMarkCircleIcon,
@@ -53,7 +55,7 @@ export default defineComponent({
     const { t } = useI18n()
     const router = useRouter()
     const settingsModel = ref(false)
-    const { showTip } = useTooltip()
+    const { showTip, updateTip } = useTooltip()
     const { isLargeCtrlsBar } = useCtrlsBar(useConnectionCard.value ? 860 : 720)
 
     return () => {
@@ -163,6 +165,24 @@ export default defineComponent({
 
       const buttons = (
         <>
+          <button
+            class="btn btn-circle btn-sm"
+            onClick={() => {
+              quickFilterEnabled.value = !quickFilterEnabled.value
+              updateTip(quickFilterEnabled.value ? t('showConnection') : t('hideConnection'))
+            }}
+            onMouseenter={(e) =>
+              showTip(e, quickFilterEnabled.value ? t('showConnection') : t('hideConnection'), {
+                appendTo: 'parent',
+              })
+            }
+          >
+            {quickFilterEnabled.value ? (
+              <LinkIcon class="h-4 w-4" />
+            ) : (
+              <LinkSlashIcon class="h-4 w-4" />
+            )}
+          </button>
           <button
             class="btn btn-circle btn-sm"
             onClick={() => {

src/helper/tooltip.ts

@@ -54,9 +54,14 @@ export const useTooltip = () => {
     tippyInstance?.hide()
   }
 
+  const updateTip = (content: string | HTMLElement) => {
+    tippyInstance?.setContent(content)
+  }
+
   return {
     showTip,
     hideTip,
+    updateTip,
   }
 }
 

src/i18n/en.ts

@@ -167,6 +167,7 @@ const en = {
   searchMultiple: 'Space-separated keywords',
   importing: 'Importing...',
   hideConnection: 'Hide connection',
+  showConnection: 'Show connection',
   hideConnectionRegex: 'Hide connection regex',
   hideConnectionTip:
     'You can use case-insensitive regular expressions to match and hide unwanted connections.',

src/i18n/ru.ts

@@ -169,6 +169,7 @@ const ru: LANG_MESSAGE = {
   searchMultiple: 'Ключевые слова через пробелы',
   importing: 'Импортируется',
   hideConnection: 'Скрыть соединение',
+  showConnection: 'Показать соединение',
   hideConnectionRegex: 'Скрыть соединение Regex',
   hideConnectionTip:
     'Используйте регистронезависимое регулярное выражение, чтобы найти и скрыть нежелательные соединения.',

src/i18n/zh-tw.ts

@@ -168,6 +168,7 @@ const zhTW: LANG_MESSAGE = {
   searchMultiple: '多個關鍵詞用空格分隔',
   importing: '正在匯入',
   hideConnection: '隱藏連接',
+  showConnection: '顯示連接',
   hideConnectionRegex: '隱藏連接正則',
   hideConnectionTip: '可通過不區分大小寫的正則表達式來匹配並隱藏不需要看到的連接',
   loadBalance: '負載均衡',

src/i18n/zh.ts

@@ -168,6 +168,7 @@ const zh: LANG_MESSAGE = {
   searchMultiple: '多个关键词用空格分隔',
   importing: '正在导入',
   hideConnection: '隐藏连接',
+  showConnection: '显示连接',
   hideConnectionRegex: '隐藏连接正则',
   hideConnectionTip: '可通过不区分大小写的正则表达式来匹配并隐藏不需要看到的连接',
   loadBalance: '负载均衡',