diff --git a/packages/applet/src/utils/search.ts b/packages/applet/src/utils/search.ts
index 3ba452a6a..08a330835 100644
--- a/packages/applet/src/utils/search.ts
+++ b/packages/applet/src/utils/search.ts
@@ -1,4 +1,5 @@
import { INFINITY, NAN, NEGATIVE_INFINITY, UNDEFINED, isPlainObject } from '@vue/devtools-kit'
+import type { CustomInspectorNode } from '@vue/devtools-kit'
/**
* Searches a key or value in the object, with a maximum deepness
@@ -132,3 +133,10 @@ function internalSearchArray(array, searchTerm, seen, depth) {
}
return match
}
+
+/**
+ * Recursively search for target tree Id in nodes and there children
+ */
+export function getValidNodeId(treeNode: CustomInspectorNode[], targetId?: string) {
+ return treeNode.some(({ id: treeNodeId, children }) => (children && getValidNodeId(children, targetId)) || treeNodeId === targetId) && (targetId as string)
+}
diff --git a/packages/client/src/composables/select.ts b/packages/client/src/composables/select.ts
index df68e63b7..b9f487b46 100644
--- a/packages/client/src/composables/select.ts
+++ b/packages/client/src/composables/select.ts
@@ -44,3 +44,21 @@ export function useSelectWithContext(groupId: string, id: string, onSelect?: (id
toggleSelected,
}
}
+
+export function useDefaultSelect() {
+ const router = useRouter()
+ const route = useRoute()
+
+ function saveSelectedId(id: string) {
+ router.push({
+ params: {
+ id,
+ },
+ })
+ }
+
+ return {
+ saveSelectedId,
+ savedSelectedId: route.params.id as string,
+ }
+}
diff --git a/packages/client/src/pages/components.vue b/packages/client/src/pages/components.vue
index c042e417a..03cb42e27 100644
--- a/packages/client/src/pages/components.vue
+++ b/packages/client/src/pages/components.vue
@@ -3,6 +3,7 @@ import { Components as ComponentsPanel } from '@vue/devtools-applet'
import '@vue/devtools-applet/style.css'
import { rpc } from '@vue/devtools-core'
import { openInEditor } from '../composables/open-in-editor'
+import { useDefaultSelect } from '../composables/select'
function onInspectComponentStart() {
rpc.value.emit('toggle-panel', false)
@@ -11,12 +12,16 @@ function onInspectComponentStart() {
function onInspectComponentEnd() {
rpc.value.emit('toggle-panel', true)
}
+
+const { saveSelectedId, savedSelectedId } = useDefaultSelect()