fix(terminals): badge number (#279)

Co-authored-by: Anthony Fu <[email protected]>

Author: arashsheyda

packages/devtools-kit/src/_types/custom-tabs.ts

@@ -121,7 +121,7 @@ export interface ModuleBuiltinTab {
   path?: string
   category?: TabCategory
   show?: () => MaybeRefOrGetter<any>
-  badge?: () => number | string | undefined
+  badge?: () => MaybeRefOrGetter<number | string | undefined>
   onClick?: () => void
 }
 

packages/devtools/client/components/SideNavItem.vue

@@ -31,7 +31,7 @@ const isActive = computed(() => route.path.startsWith(tabPath.value))
         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>
+        <span translate-y-0.5px>{{ toValue(badge) }}</span>
       </div>
     </NuxtLink>
     <template #popper>

packages/devtools/client/meta.d.ts

@@ -1,4 +1,5 @@
-import { TabCategory } from "../src/types"
+import { MaybeRefOrGetter } from 'vue'
+import { TabCategory } from '../src/types'
 
 declare module '#app' {
   interface PageMeta {
@@ -7,7 +8,7 @@ declare module '#app' {
     order?: number
     category?: TabCategory
     show?: () => any
-    badge?: () => string | number | undefined
+    badge?: () => MaybeRefOrGetter<string | number | undefined>
   }
 }
 

packages/devtools/client/pages/modules/terminals.vue

@@ -16,6 +16,6 @@ definePageMeta({
 
 <template>
   <AuthRequiredPanel>
-    <TerminalsPage />
+    <TerminalPage />
   </AuthRequiredPanel>
 </template>