From 80a5ba2d193a1c263138cae6da3ce4510985bfce Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 23 Apr 2023 16:11:36 +0200
Subject: [PATCH] feat: support tab badge

---
 .../devtools-kit/src/_types/custom-tabs.ts    |  1 +
 .../client/components/SideNavItem.vue         | 26 +++++++++++--------
 packages/devtools/client/composables/state.ts |  3 +++
 .../devtools/client/pages/modules/plugins.vue |  1 -
 .../client/pages/modules/terminals.vue        |  2 +-
 5 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/devtools-kit/src/_types/custom-tabs.ts b/packages/devtools-kit/src/_types/custom-tabs.ts
index bed6cfc3d..49b030410 100644
--- a/packages/devtools-kit/src/_types/custom-tabs.ts
+++ b/packages/devtools-kit/src/_types/custom-tabs.ts
@@ -113,6 +113,7 @@ export interface ModuleBuiltinTab {
   path?: string
   category?: TabCategory
   shouldShow?: () => any
+  badge?: () => number | string | undefined
 }
 
 export type ModuleTabInfo = ModuleCustomTab | ModuleBuiltinTab
diff --git a/packages/devtools/client/components/SideNavItem.vue b/packages/devtools/client/components/SideNavItem.vue
index c15cfeb14..0b157c2f9 100644
--- a/packages/devtools/client/components/SideNavItem.vue
+++ b/packages/devtools/client/components/SideNavItem.vue
@@ -6,22 +6,20 @@ const props = defineProps<{
 }>()
 
 const settings = useDevToolsSettings()
-const isEnabled = computed(() => {
-  const _tab = props.tab as ModuleBuiltinTab
-  if (_tab.shouldShow && !_tab.shouldShow())
-    return false
-  if (settings.hiddenTabs.value.includes(_tab.name))
-    return false
-  return true
-})
+const route = useRoute()
+
+const badge = computed(() => 'badge' in props.tab && props.tab.badge?.())
+
+const tabPath = computed(() => 'path' in props.tab ? props.tab.path! : `/modules/custom-${props.tab.name}`)
+const isActive = computed(() => route.path.startsWith(tabPath.value))
 </script>
 
 <template>
-  <VTooltip v-if="isEnabled" placement="right">
+  <VTooltip placement="right">
     <NuxtLink
-      :to="'path' in tab ? tab.path : `/modules/custom-${tab.name}`"
+      :to="tabPath"
       flex="~"
-      hover="bg-active"
+      hover="bg-active" relative
       h-10 w-10 select-none items-center justify-center rounded-xl p1 text-secondary
       exact-active-class="!text-primary bg-active"
     >
@@ -29,6 +27,12 @@ const isEnabled = computed(() => {
         text-xl
         :icon="tab.icon" :title="tab.title"
       />
+      <div
+        v-if="badge" absolute bottom-0 right-0 h-4 w-4 rounded-full text-9px text-white flex="~ items-center justify-center"
+        :class="isActive ? 'bg-primary' : 'bg-gray'"
+      >
+        <span translate-y-0.5px>{{ badge }}</span>
+      </div>
     </NuxtLink>
     <template #popper>
       <div>
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index dccc22937..662d217e8 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -139,11 +139,14 @@ export function useCategorizedTabs(enabledOnly = true) {
 
 export function useEnabledTabs() {
   const tabs = useAllTabs()
+  const settings = useDevToolsSettings()
 
   return computed(() => tabs.value.filter((tab) => {
     const _tab = tab as ModuleBuiltinTab
     if (_tab.shouldShow && !_tab.shouldShow())
       return false
+    if (settings.hiddenTabs.value.includes(_tab.name))
+      return false
     return true
   }))
 }
diff --git a/packages/devtools/client/pages/modules/plugins.vue b/packages/devtools/client/pages/modules/plugins.vue
index 3a085b5e6..91caa1962 100644
--- a/packages/devtools/client/pages/modules/plugins.vue
+++ b/packages/devtools/client/pages/modules/plugins.vue
@@ -4,7 +4,6 @@ import type { PluginInfoWithMetic } from '@nuxt/devtools-kit/types'
 definePageMeta({
   icon: 'carbon-plug',
   title: 'Plugins',
-  order: 5,
   category: 'analyze',
 })
 
diff --git a/packages/devtools/client/pages/modules/terminals.vue b/packages/devtools/client/pages/modules/terminals.vue
index 9e16f7478..e7ec67420 100644
--- a/packages/devtools/client/pages/modules/terminals.vue
+++ b/packages/devtools/client/pages/modules/terminals.vue
@@ -7,7 +7,7 @@ definePageMeta({
     return !!useTerminals().value?.length
   },
   badge() {
-    return useTerminals().value?.length
+    return useTerminals().value?.filter(i => !i.isTerminated).length
   },
 })