From 512d852e0a8eda5350e960a1edd2af9b47bb9312 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 8 May 2023 15:52:27 +0200
Subject: [PATCH] feat: add component inspect button to the sidebar

---
 packages/devtools-kit/src/_types/custom-tabs.ts  |  1 +
 .../devtools/client/components/SideNavItem.vue   |  1 +
 packages/devtools/client/composables/state.ts    | 16 ++++++++++++++++
 packages/devtools/client/plugins/global.ts       |  4 +++-
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/devtools-kit/src/_types/custom-tabs.ts b/packages/devtools-kit/src/_types/custom-tabs.ts
index b77ad2fe1..45b24eab2 100644
--- a/packages/devtools-kit/src/_types/custom-tabs.ts
+++ b/packages/devtools-kit/src/_types/custom-tabs.ts
@@ -114,6 +114,7 @@ export interface ModuleBuiltinTab {
   category?: TabCategory
   show?: () => any
   badge?: () => number | string | undefined
+  onClick?: () => void
 }
 
 export type ModuleTabInfo = ModuleCustomTab | ModuleBuiltinTab
diff --git a/packages/devtools/client/components/SideNavItem.vue b/packages/devtools/client/components/SideNavItem.vue
index 216a138a0..94feafff1 100644
--- a/packages/devtools/client/components/SideNavItem.vue
+++ b/packages/devtools/client/components/SideNavItem.vue
@@ -21,6 +21,7 @@ const isActive = computed(() => route.path.startsWith(tabPath.value))
       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"
+      @click="'onClick' in tab && tab.onClick?.()"
     >
       <TabIcon
         text-xl
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index 84abf9a14..400ce64e8 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -87,6 +87,7 @@ export function useAllTabs() {
   const customTabs = useCustomTabs()
   const settings = useDevToolsSettings()
   const router = useRouter()
+  const client = useClient()
 
   const builtin = computed(() => [
     ...router.getRoutes()
@@ -100,6 +101,21 @@ export function useAllTabs() {
           ...i.meta,
         }
       }),
+    {
+      name: 'builtin-inspector',
+      title: 'Inspect Vue components',
+      icon: 'i-carbon-select-window',
+      category: 'app',
+      show() {
+        return !!client.value?.inspector?.instance
+      },
+      onClick() {
+        if (!client.value?.inspector?.instance)
+          return
+        client.value.inspector.enable()
+        router.push('/__inspecting')
+      },
+    },
     ...(customTabs.value || []).filter(i => i.name.startsWith('builtin-')),
   ])
 
diff --git a/packages/devtools/client/plugins/global.ts b/packages/devtools/client/plugins/global.ts
index 5d8044193..6ff5df6eb 100644
--- a/packages/devtools/client/plugins/global.ts
+++ b/packages/devtools/client/plugins/global.ts
@@ -19,8 +19,10 @@ export default defineNuxtPlugin(() => {
           client.value = { ...client.value }
       })
       _client.hooks.hook('host:inspector:close', () => {
+        if (router.currentRoute.value.path === '/modules/custom-builtin-vscode')
+          return
         if (router.currentRoute.value.path === '/__inspecting')
-          router.replace('/modules/components')
+          router.go(-1)
       })
       _client.hooks.hook('host:inspector:update', (data) => {
         inspectorData.value = data