feat: support tab badge

nuxt · Apr 23, 2023 · 80a5ba2 · 80a5ba2
1 parent 64c48cd
commit 80a5ba2
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 13 deletions.
diff --git 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
@@ -6,29 +6,33 @@ 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"
     >
       <TabIcon
         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
@@ -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
@@ -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
@@ -7,7 +7,7 @@ definePageMeta({
     return !!useTerminals().value?.length
   },
   badge() {
-    return useTerminals().value?.length
+    return useTerminals().value?.filter(i => !i.isTerminated).length
   },
 })