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))