fix(client): custom tab view active state

packages/client/src/components/common/SideNavItem.vue

@@ -17,7 +17,7 @@ const props = withDefaults(
 )
 const route = useRoute()
 
-const tabPath = computed(() => 'path' in props.tab ? props.tab.path! : `/custom-tab-view?name=${(props.tab as ModuleBuiltinTab).name}`)
+const tabPath = computed(() => 'path' in props.tab ? (`${props.tab.path.startsWith('/') ? `` : `/`}${props.tab.path!}`) : `/custom-tab-view/${(props.tab as ModuleBuiltinTab).name}`)
 const badge = computed(() => 'badge' in props.tab && props.tab.badge?.())
 const isActive = computed(() => route.path.startsWith(tabPath.value))
 

packages/client/src/main.ts

@@ -45,7 +45,7 @@ const routes = [
  { path: '/assets', component: Assets },
  { path: '/graph', component: Graph },
  { path: '/settings', component: Settings },
- { path: '/custom-tab-view', component: CustomTabView },
+ { path: '/custom-tab-view/:name', component: CustomTabView },
 ]
 
 // @TODO: find a better way to handle it

packages/client/src/pages/custom-tab-view.vue

@@ -5,7 +5,7 @@ import type { CustomTab } from '@vue-devtools-next/kit'
 const route = useRoute()
 const router = useRouter()
 const { flattenedTabs } = useAllTabs()
-const tabName = computed(() => route.query.name as string | undefined)
+const tabName = computed(() => route.params.name as string | undefined)
 const tab = computed(() => flattenedTabs.value.find(tab => tabName.value === tab.name) || null!) as ComputedRef<CustomTab>
 
 onMounted(() => {
@@ -31,13 +31,13 @@ onMounted(() => {
  </div>
  </PanelGrids>
  </template>
- <template v-else-if="tab.view.type === 'iframe'">
+ <template v-else-if="tab?.view?.type === 'iframe'">
  <IframeView :src="tab.view.src" />
  </template>
  <template v-else>
  <PanelGrids>
  <NCard flex="~ col" h-full items-center justify-center>
- Unknown tab type {{ tab.view }}
+ Unknown tab type {{ tab?.view }}
  </NCard>
  </PanelGrids>
  </template>