From 5ce8df368527ab614d428f12e3f099c11f072199 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Sun, 23 Apr 2023 16:51:47 +0200
Subject: [PATCH] feat: help page for each tab (#194)

---
 .../devtools-kit/src/_types/integrations.ts   |  1 +
 .../client/components/ComposableTree.vue      |  7 +-
 .../devtools/client/components/HelpFab.vue    | 69 +++++++++++++++++++
 .../components/content/HelpImportsDirs.vue    | 11 +++
 .../components/content/HelpImportsModules.vue | 15 ++++
 .../client/components/content/HelpTip.vue     | 22 ++++++
 .../components/content/HelpTipPerformance.vue |  9 +++
 .../devtools/client/composables/storage.ts    |  1 +
 .../devtools/client/content/components.md     |  5 ++
 packages/devtools/client/content/hooks.md     |  5 ++
 packages/devtools/client/content/imports.md   | 17 +++++
 packages/devtools/client/content/modules.md   |  5 ++
 packages/devtools/client/content/pages.md     |  5 ++
 packages/devtools/client/content/payload.md   |  3 +
 packages/devtools/client/content/plugins.md   |  9 +++
 .../client/content/runtime-configs.md         |  3 +
 .../devtools/client/content/virtual-files.md  |  3 +
 packages/devtools/client/nuxt.config.ts       |  1 +
 .../client/pages/modules/components.vue       |  2 +
 .../devtools/client/pages/modules/hooks.vue   |  2 +
 .../devtools/client/pages/modules/imports.vue |  4 +-
 .../devtools/client/pages/modules/modules.vue |  2 +
 .../devtools/client/pages/modules/pages.vue   |  2 +
 .../devtools/client/pages/modules/payload.vue |  2 +
 .../devtools/client/pages/modules/plugins.vue |  5 +-
 .../client/pages/modules/runtime-configs.vue  |  2 +
 .../client/pages/modules/virtual-files.vue    |  2 +
 packages/devtools/client/pages/settings.vue   |  4 ++
 packages/devtools/client/styles/global.css    | 12 ++++
 packages/devtools/client/unocss.config.ts     |  8 ++-
 packages/devtools/package.json                |  1 +
 packages/devtools/src/server-rpc/general.ts   |  5 ++
 packages/devtools/src/types/ui-state.ts       |  1 +
 pnpm-lock.yaml                                | 53 +++++---------
 34 files changed, 258 insertions(+), 40 deletions(-)
 create mode 100644 packages/devtools/client/components/HelpFab.vue
 create mode 100644 packages/devtools/client/components/content/HelpImportsDirs.vue
 create mode 100644 packages/devtools/client/components/content/HelpImportsModules.vue
 create mode 100644 packages/devtools/client/components/content/HelpTip.vue
 create mode 100644 packages/devtools/client/components/content/HelpTipPerformance.vue
 create mode 100644 packages/devtools/client/content/components.md
 create mode 100644 packages/devtools/client/content/hooks.md
 create mode 100644 packages/devtools/client/content/imports.md
 create mode 100644 packages/devtools/client/content/modules.md
 create mode 100644 packages/devtools/client/content/pages.md
 create mode 100644 packages/devtools/client/content/payload.md
 create mode 100644 packages/devtools/client/content/plugins.md
 create mode 100644 packages/devtools/client/content/runtime-configs.md
 create mode 100644 packages/devtools/client/content/virtual-files.md

diff --git a/packages/devtools-kit/src/_types/integrations.ts b/packages/devtools-kit/src/_types/integrations.ts
index 829636ac7..0164553bd 100644
--- a/packages/devtools-kit/src/_types/integrations.ts
+++ b/packages/devtools-kit/src/_types/integrations.ts
@@ -37,6 +37,7 @@ export interface NpmCommandOptions {
 export interface AutoImportsWithMetadata {
   imports: Import[]
   metadata?: UnimportMeta
+  dirs: string[]
 }
 
 export interface RouteInfo extends Pick<RouteRecordNormalized, 'name' | 'path' | 'meta' | 'props' | 'children'> {
diff --git a/packages/devtools/client/components/ComposableTree.vue b/packages/devtools/client/components/ComposableTree.vue
index 38f77da3d..d11c270f2 100644
--- a/packages/devtools/client/components/ComposableTree.vue
+++ b/packages/devtools/client/components/ComposableTree.vue
@@ -13,7 +13,12 @@ defineProps<{
     <div v-for="[key, value] of map.entries()" :key="key">
       <FilepathItem :filepath="key" op50 hover:underline />
       <div flex="~ wrap gap2" p2 pl4>
-        <ComposableItem v-for="i of value" :key="i.as" :item="i" :metadata="metadata" :filepath="key.match(/^[\w@]/) ? undefined : key" />
+        <ComposableItem
+          v-for="i of value" :key="i.as"
+          :item="i"
+          :metadata="metadata"
+          :filepath="key.match(/^[\w@]/) ? undefined : key"
+        />
       </div>
     </div>
   </div>
diff --git a/packages/devtools/client/components/HelpFab.vue b/packages/devtools/client/components/HelpFab.vue
new file mode 100644
index 000000000..05215e7bd
--- /dev/null
+++ b/packages/devtools/client/components/HelpFab.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+const props = defineProps<{
+  path: string
+}>()
+
+const { data } = useAsyncData(props.path, () => queryContent(props.path).findOne())
+const open = ref(false)
+const {
+  showHelpButtons,
+} = useDevToolsSettings()
+</script>
+
+<template>
+  <template v-if="showHelpButtons">
+    <button
+      pos="absolute bottom-5 right-5"
+      border="~ base rounded-full "
+      flex="~ items-center justify-center"
+      z-110 h-11 w-11 backdrop-blur-8
+      bg="bg-base op50!" light:shadow
+      hover="bg-active"
+      title="Help"
+      @click="open = !open"
+    >
+      <div i-ri:question-mark />
+    </button>
+    <Transition name="fade-in">
+      <div
+        v-if="open"
+        class="fixed bottom-0 left-0 right-0 top-0 z-100"
+        bg-black:20 backdrop-blur-2 @click="open = false"
+      />
+    </Transition>
+    <Transition name="slide-in">
+      <div
+        v-if="open" border="l base"
+        class="prose" pos="fixed bottom-0 right-0 top-0" z-200 w-150 px8 py4 bg-base
+      >
+        <ContentRenderer v-if="data" :value="data" />
+        <NIconButton
+          icon="carbon-close"
+          pos="absolute top-3 right-3"
+          rounded-full text-xl
+          @click="open = false"
+        />
+      </div>
+    </Transition>
+  </template>
+</template>
+
+<style>
+.slide-in-enter-active,
+.slide-in-leave-active {
+  transition: transform 0.3s;
+}
+.slide-in-enter-from,
+.slide-in-leave-to {
+  transform: translateX(100%);
+}
+
+.fade-in-enter-active,
+.fade-in-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-in-enter-from,
+.fade-in-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/packages/devtools/client/components/content/HelpImportsDirs.vue b/packages/devtools/client/components/content/HelpImportsDirs.vue
new file mode 100644
index 000000000..9b3af544c
--- /dev/null
+++ b/packages/devtools/client/components/content/HelpImportsDirs.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const imports = useAutoImports()
+</script>
+
+<template>
+  <div v-if="imports?.dirs" flex="~ col gap-2 items-start">
+    <template v-for="dir of imports.dirs" :key="dir">
+      <FilepathItem :filepath="dir" text-primary />
+    </template>
+  </div>
+</template>
diff --git a/packages/devtools/client/components/content/HelpImportsModules.vue b/packages/devtools/client/components/content/HelpImportsModules.vue
new file mode 100644
index 000000000..2aee086a0
--- /dev/null
+++ b/packages/devtools/client/components/content/HelpImportsModules.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const config = useAutoImports()
+
+const modules = computed(() => {
+  return [...new Set(config.value?.imports.map(i => getModuleNameFromPath(i.from)).filter(x => Boolean(x) && !isBuiltInModule(x)))]
+})
+</script>
+
+<template>
+  <div flex="~ gap-2 wrap" mb6>
+    <code v-for="name of modules" :key="name" rounded bg-primary:5 p="x2 y0.5" text-primary>
+      {{ name }}
+    </code>
+  </div>
+</template>
diff --git a/packages/devtools/client/components/content/HelpTip.vue b/packages/devtools/client/components/content/HelpTip.vue
new file mode 100644
index 000000000..5e5a6f799
--- /dev/null
+++ b/packages/devtools/client/components/content/HelpTip.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  icon?: string
+}>()
+</script>
+
+<template>
+  <div class="n-tip n-tip-base" flex="~ col items-start" mx--4 px4 py4>
+    <div flex="~ items-center gap-1" font-bold>
+      <NIcon v-if="icon" :icon="icon" class="n-tip-icon" />
+      <div>
+        {{ title }}
+      </div>
+    </div>
+    <div>
+      <slot>
+        <ContentSlot :use="$slots.default" unwrap="p" />
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools/client/components/content/HelpTipPerformance.vue b/packages/devtools/client/components/content/HelpTipPerformance.vue
new file mode 100644
index 000000000..cd2d7664c
--- /dev/null
+++ b/packages/devtools/client/components/content/HelpTipPerformance.vue
@@ -0,0 +1,9 @@
+<template>
+  <HelpTip
+    title="Performance Tip"
+    icon="carbon-meter"
+    n="lime6 dark:lime5"
+  >
+    <ContentSlot :use="$slots.default" unwrap="p" />
+  </HelpTip>
+</template>
diff --git a/packages/devtools/client/composables/storage.ts b/packages/devtools/client/composables/storage.ts
index 21a705cbf..640dfc719 100644
--- a/packages/devtools/client/composables/storage.ts
+++ b/packages/devtools/client/composables/storage.ts
@@ -11,6 +11,7 @@ const devToolsSettings = useLocalStorage<DevToolsUISettings>('nuxt-devtools-sett
   componentsGraphShowWorkspace: true,
   interactionCloseOnOutsideClick: false,
   showExperimentalFeatures: false,
+  showHelpButtons: true,
   scale: 1,
   hiddenTabs: [],
   hiddenTabCategories: [],
diff --git a/packages/devtools/client/content/components.md b/packages/devtools/client/content/components.md
new file mode 100644
index 000000000..7c6d58025
--- /dev/null
+++ b/packages/devtools/client/content/components.md
@@ -0,0 +1,5 @@
+# Components
+
+Vue components under the `components/` directory are automatically registered and can be used in your templates without importing them.
+
+[Learn more on the documentation](https://nuxt.com/docs/guide/directory-structure/components)
diff --git a/packages/devtools/client/content/hooks.md b/packages/devtools/client/content/hooks.md
new file mode 100644
index 000000000..df9109978
--- /dev/null
+++ b/packages/devtools/client/content/hooks.md
@@ -0,0 +1,5 @@
+# Hooks
+
+Hooks are an advanced API mainly for module authors or advanced use cases. The hooking system to expand almost every aspect of Nuxt. It's powered by [unjs/hookable](https://github.com/unjs/hookable).
+
+[Learn more about hooks](https://nuxt.com/docs/guide/going-further/hooks).
diff --git a/packages/devtools/client/content/imports.md b/packages/devtools/client/content/imports.md
new file mode 100644
index 000000000..b7c45d0db
--- /dev/null
+++ b/packages/devtools/client/content/imports.md
@@ -0,0 +1,17 @@
+# Auto imports
+
+Nuxt auto-imports helper functions, composables and Vue APIs to use across your application without explicitly importing them. Based on the directory structure, every Nuxt application can also use auto-imports for its own components, composables and plugins. Components, composables or plugins can use these functions.
+
+<hr>
+
+According to your config, exports of files under the following folders will be registed as auto-imports entry:
+
+:help-imports-dirs
+
+Meanwhile, modules could also provide auto-imports for their own components. You have auto-imports from the following modules as well:
+
+:help-imports-modules
+
+<hr>
+
+[Learn more on the documentation](https://nuxt.com/docs/guide/concepts/auto-imports)
diff --git a/packages/devtools/client/content/modules.md b/packages/devtools/client/content/modules.md
new file mode 100644
index 000000000..6ae03db3d
--- /dev/null
+++ b/packages/devtools/client/content/modules.md
@@ -0,0 +1,5 @@
+# Modules
+
+Nuxt provides a module system to extend the framework core and simplify integrations. You don't need to develop everything from scratch or maintain boilerplate if there is already a Nuxt module for it. Adding Nuxt modules is possible using `nuxt.config`.
+
+[Learn more on the documentation](https://nuxt.com/docs/guide/concepts/modules)
diff --git a/packages/devtools/client/content/pages.md b/packages/devtools/client/content/pages.md
new file mode 100644
index 000000000..2e6dd0769
--- /dev/null
+++ b/packages/devtools/client/content/pages.md
@@ -0,0 +1,5 @@
+# Pages
+
+One core feature of Nuxt is the file system router. Every Vue file inside the `pages/` directory creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Nuxt leverages code-splitting to ship the minimum amount of JavaScript for the requested route.
+
+[Learn more on the documentation](https://nuxt.com/docs/getting-started/routing)
diff --git a/packages/devtools/client/content/payload.md b/packages/devtools/client/content/payload.md
new file mode 100644
index 000000000..6bf07d3f6
--- /dev/null
+++ b/packages/devtools/client/content/payload.md
@@ -0,0 +1,3 @@
+# State & Async Data
+
+// TODO
diff --git a/packages/devtools/client/content/plugins.md b/packages/devtools/client/content/plugins.md
new file mode 100644
index 000000000..a7a6f20ee
--- /dev/null
+++ b/packages/devtools/client/content/plugins.md
@@ -0,0 +1,9 @@
+# Plugins
+
+Nuxt plugins allows you to extend the functionality of Nuxt runtime and the Vue instance. You can add plugins to the `plugins/` directory and they will be automatically imported and registered.
+
+::help-tip-performance
+Plugins runs before your application at runtime, the time each plugin cost will directly affect your application's initial loading time.
+::
+
+[Learn more on the documentation](https://nuxt.com/docs/guide/directory-structure/plugins)
diff --git a/packages/devtools/client/content/runtime-configs.md b/packages/devtools/client/content/runtime-configs.md
new file mode 100644
index 000000000..97e45bd2a
--- /dev/null
+++ b/packages/devtools/client/content/runtime-configs.md
@@ -0,0 +1,3 @@
+# Runtime Configs
+
+// TODO:
diff --git a/packages/devtools/client/content/virtual-files.md b/packages/devtools/client/content/virtual-files.md
new file mode 100644
index 000000000..a87d9b1b2
--- /dev/null
+++ b/packages/devtools/client/content/virtual-files.md
@@ -0,0 +1,3 @@
+# Virtual Files
+
+Virtual files are generated on the fly to support the conventions of the framework, and to provide a better developer experience.
diff --git a/packages/devtools/client/nuxt.config.ts b/packages/devtools/client/nuxt.config.ts
index e0158bdbb..c0d039593 100644
--- a/packages/devtools/client/nuxt.config.ts
+++ b/packages/devtools/client/nuxt.config.ts
@@ -10,6 +10,7 @@ function r(p: string) {
 export default defineNuxtConfig({
   modules: [
     'nuxt-vitest',
+    '@nuxt/content',
     '~/modules/custom-tabs',
     DevToolsUiKit,
     DevTools,
diff --git a/packages/devtools/client/pages/modules/components.vue b/packages/devtools/client/pages/modules/components.vue
index 6fa80896d..c6cf41bf2 100644
--- a/packages/devtools/client/pages/modules/components.vue
+++ b/packages/devtools/client/pages/modules/components.vue
@@ -53,4 +53,6 @@ function toggleView() {
       </div>
     </component>
   </div>
+
+  <HelpFab path="/components" />
 </template>
diff --git a/packages/devtools/client/pages/modules/hooks.vue b/packages/devtools/client/pages/modules/hooks.vue
index acd66fc65..555aa8c9e 100644
--- a/packages/devtools/client/pages/modules/hooks.vue
+++ b/packages/devtools/client/pages/modules/hooks.vue
@@ -30,4 +30,6 @@ const clientHooks = computed(() => client.value?.getClientHooksMetrics())
       <HooksTable :hooks="serverHooks" />
     </NSectionBlock>
   </div>
+
+  <HelpFab path="/hooks" />
 </template>
diff --git a/packages/devtools/client/pages/modules/imports.vue b/packages/devtools/client/pages/modules/imports.vue
index fe8af1945..dc8ce4340 100644
--- a/packages/devtools/client/pages/modules/imports.vue
+++ b/packages/devtools/client/pages/modules/imports.vue
@@ -71,7 +71,7 @@ const filtered = computed(() => {
 </script>
 
 <template>
-  <div v-if="config" h-full of-auto>
+  <div v-if="config" relative h-full of-auto>
     <Navbar v-model:search="search" pb2>
       <div v-if="importsMetadata">
         <NSwitch v-model="onlyUsed" n="primary sm">
@@ -107,4 +107,6 @@ const filtered = computed(() => {
       <ComposableTree :map="filtered.lib" :root="config.rootDir" :metadata="importsMetadata" />
     </NSectionBlock>
   </div>
+
+  <HelpFab path="/imports" />
 </template>
diff --git a/packages/devtools/client/pages/modules/modules.vue b/packages/devtools/client/pages/modules/modules.vue
index 5f1d42e65..2167226d5 100644
--- a/packages/devtools/client/pages/modules/modules.vue
+++ b/packages/devtools/client/pages/modules/modules.vue
@@ -70,4 +70,6 @@ watchEffect(() => {
       </template>
     </NSectionBlock>
   </div>
+
+  <HelpFab path="/modules" />
 </template>
diff --git a/packages/devtools/client/pages/modules/pages.vue b/packages/devtools/client/pages/modules/pages.vue
index b2f8bab57..3c032f06e 100644
--- a/packages/devtools/client/pages/modules/pages.vue
+++ b/packages/devtools/client/pages/modules/pages.vue
@@ -138,4 +138,6 @@ function navigateToRoute(path: string) {
       },
     ]"
   />
+
+  <HelpFab path="/pages" />
 </template>
diff --git a/packages/devtools/client/pages/modules/payload.vue b/packages/devtools/client/pages/modules/payload.vue
index d087bdc0c..516b10afc 100644
--- a/packages/devtools/client/pages/modules/payload.vue
+++ b/packages/devtools/client/pages/modules/payload.vue
@@ -65,4 +65,6 @@ async function refreshData(keys?: string[]) {
       />
     </NSectionBlock>
   </div>
+
+  <HelpFab path="/payload" />
 </template>
diff --git a/packages/devtools/client/pages/modules/plugins.vue b/packages/devtools/client/pages/modules/plugins.vue
index 91caa1962..53d1acbd1 100644
--- a/packages/devtools/client/pages/modules/plugins.vue
+++ b/packages/devtools/client/pages/modules/plugins.vue
@@ -31,9 +31,6 @@ const plugins = computed((): PluginInfoWithMetic[] => {
     text="Plugins"
     :description="`Total plugins: ${config.plugins.length}`"
   >
-    <NTip n="green6" icon="carbon-meter">
-      Plugins runs before your application at runtime, the time plugins cost will directly affect your application's initial loading time.
-    </NTip>
     <div pt4>
       <PluginItem
         v-for="plugin, idx of plugins"
@@ -44,4 +41,6 @@ const plugins = computed((): PluginInfoWithMetic[] => {
       />
     </div>
   </NSectionBlock>
+
+  <HelpFab path="/plugins" />
 </template>
diff --git a/packages/devtools/client/pages/modules/runtime-configs.vue b/packages/devtools/client/pages/modules/runtime-configs.vue
index 8b719a40f..fa5fc7feb 100644
--- a/packages/devtools/client/pages/modules/runtime-configs.vue
+++ b/packages/devtools/client/pages/modules/runtime-configs.vue
@@ -49,4 +49,6 @@ const privateConfig = computed(() => {
       <StateEditor :state="privateConfig" readonly />
     </NSectionBlock>
   </div>
+
+  <HelpFab path="/runtime-configs" />
 </template>
diff --git a/packages/devtools/client/pages/modules/virtual-files.vue b/packages/devtools/client/pages/modules/virtual-files.vue
index 288453465..6bf9f0564 100644
--- a/packages/devtools/client/pages/modules/virtual-files.vue
+++ b/packages/devtools/client/pages/modules/virtual-files.vue
@@ -108,6 +108,8 @@ const filteredFiles = computed(() => {
       </NPanelGrids>
     </template>
   </PanelLeftRight>
+
+  <HelpFab path="/virtual-files" />
 </template>
 
 <style>
diff --git a/packages/devtools/client/pages/settings.vue b/packages/devtools/client/pages/settings.vue
index f5b23dcb0..ae8241663 100644
--- a/packages/devtools/client/pages/settings.vue
+++ b/packages/devtools/client/pages/settings.vue
@@ -2,6 +2,7 @@
 const {
   interactionCloseOnOutsideClick,
   showExperimentalFeatures,
+  showHelpButtons,
   scale,
   hiddenTabs,
   hiddenTabCategories,
@@ -60,6 +61,9 @@ function toggleTabCategory(name: string, v: boolean) {
       <NCheckbox v-model="showExperimentalFeatures" n-primary>
         <span>Show experimental features</span>
       </NCheckbox>
+      <NCheckbox v-model="showHelpButtons" n-primary>
+        <span>Show help buttons</span>
+      </NCheckbox>
     </div>
     <div py3 flex="~ col gap-1">
       <h3 mb1 text-lg>
diff --git a/packages/devtools/client/styles/global.css b/packages/devtools/client/styles/global.css
index 82ec8175f..1d20007af 100644
--- a/packages/devtools/client/styles/global.css
+++ b/packages/devtools/client/styles/global.css
@@ -45,6 +45,18 @@ html.dark {
 .n-markdown a {
   --at-apply: text-primary hover:underline;
 }
+.prose a {
+  --uno: hover:text-primary;
+}
+.prose code::before {
+  content: ""
+}
+.prose code::after {
+  content: ""
+}
+.prose hr {
+  --uno: border-solid border-1 border-b border-base h-1px w-full block my-2 op50;
+}
 
 /* Splitpanes */
 .splitpanes__splitter {
diff --git a/packages/devtools/client/unocss.config.ts b/packages/devtools/client/unocss.config.ts
index 9490aa22e..011dfd7e0 100644
--- a/packages/devtools/client/unocss.config.ts
+++ b/packages/devtools/client/unocss.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig, presetAttributify, presetIcons, presetUno, presetWebFonts, transformerDirectives } from 'unocss'
+import { defineConfig, presetAttributify, presetIcons, presetTypography, presetUno, presetWebFonts, transformerDirectives } from 'unocss'
 import { unocssPreset as devtoolsUIKitUnoPreset } from '../../devtools-ui-kit/src/unocss'
 
 export default defineConfig({
@@ -40,9 +40,15 @@ export default defineConfig({
         mono: 'Fira Code',
       },
     }),
+    presetTypography(),
     devtoolsUIKitUnoPreset(),
   ],
   transformers: [
     transformerDirectives(),
   ],
+  extraContent: {
+    filesystem: [
+      'content/*.md',
+    ],
+  },
 })
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
index b65478429..76f9d8677 100644
--- a/packages/devtools/package.json
+++ b/packages/devtools/package.json
@@ -77,6 +77,7 @@
     "@iconify-json/mdi": "^1.1.50",
     "@iconify-json/ri": "^1.1.8",
     "@iconify-json/tabler": "^1.1.74",
+    "@nuxt/content": "^2.6.0",
     "@nuxt/devtools": "workspace:*",
     "@nuxtjs/color-mode": "^3.2.0",
     "@unocss/nuxt": "^0.51.6",
diff --git a/packages/devtools/src/server-rpc/general.ts b/packages/devtools/src/server-rpc/general.ts
index 63ee2b07e..49dd1dca6 100644
--- a/packages/devtools/src/server-rpc/general.ts
+++ b/packages/devtools/src/server-rpc/general.ts
@@ -12,6 +12,7 @@ export function setupGeneralRPC({ nuxt, refresh }: NuxtDevtoolsServerContext) {
   const components: Component[] = []
   const imports: Import[] = []
   const importPresets: Import[] = []
+  let importDirs: string[] = []
   const serverPages: NuxtPage[] = []
 
   const serverHooks: Record<string, HookInfo> = setupHooksDebug(nuxt.hooks)
@@ -55,6 +56,9 @@ export function setupGeneralRPC({ nuxt, refresh }: NuxtDevtoolsServerContext) {
   nuxt.hook('imports:context', (_unimport: Unimport) => {
     unimport = _unimport
   })
+  nuxt.hook('imports:dirs', (dirs) => {
+    importDirs = dirs
+  })
   nuxt.hook('app:resolve', (v) => {
     app = v
   })
@@ -79,6 +83,7 @@ export function setupGeneralRPC({ nuxt, refresh }: NuxtDevtoolsServerContext) {
           ...importPresets,
         ],
         metadata: unimport?.getMetadata(),
+        dirs: importDirs,
       }
     },
     getServerLayouts() {
diff --git a/packages/devtools/src/types/ui-state.ts b/packages/devtools/src/types/ui-state.ts
index 45b99c6b2..576aad6ff 100644
--- a/packages/devtools/src/types/ui-state.ts
+++ b/packages/devtools/src/types/ui-state.ts
@@ -16,6 +16,7 @@ export interface DevToolsUISettings {
   componentsGraphShowWorkspace: boolean
   interactionCloseOnOutsideClick: boolean
   showExperimentalFeatures: boolean
+  showHelpButtons: boolean
   scale: number
   hiddenTabs: string[]
   hiddenTabCategories: string[]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f93000121..a3c5eea4c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -206,6 +206,9 @@ importers:
       '@iconify-json/tabler':
         specifier: ^1.1.74
         version: 1.1.74
+      '@nuxt/content':
+        specifier: ^2.6.0
+        version: 2.6.0(rollup@3.20.6)
       '@nuxt/devtools':
         specifier: workspace:*
         version: 'link:'
@@ -1560,7 +1563,7 @@ packages:
       '@nuxt-themes/elements': 0.9.3(postcss@8.4.23)(rollup@3.20.6)(vue@3.2.47)
       '@nuxt-themes/tokens': 1.9.1(postcss@8.4.23)(rollup@3.20.6)(vue@3.2.47)
       '@nuxt-themes/typography': 0.11.0(postcss@8.4.23)(rollup@3.20.6)(vue@3.2.47)
-      '@nuxt/content': 2.5.2(rollup@3.20.6)
+      '@nuxt/content': 2.6.0(rollup@3.20.6)
       '@nuxthq/studio': 0.9.5(rollup@3.20.6)
       '@vueuse/nuxt': 9.13.0(nuxt@3.4.2)(rollup@3.20.6)(vue@3.2.47)
     transitivePeerDependencies:
@@ -1627,11 +1630,11 @@ packages:
       - vue
     dev: true
 
-  /@nuxt/content@2.5.2(rollup@3.20.6):
-    resolution: {integrity: sha512-bSO4g2aNk7AT5abAIJtHLTN+FZFYMvwP6MH9oP6XAo/SsIowvFq7g38in3jK/OMDR+dZq3Nt1z8GrMDGipzsfQ==}
+  /@nuxt/content@2.6.0(rollup@3.20.6):
+    resolution: {integrity: sha512-iwZ5NY6m2MNBAFaRp5OSjRdd+vk/XFbBqN0wtmpFtcoYHyzpUxy2fU38KWnXXmgP7Vi4mFOJ8SExZnL0cdlEtQ==}
     dependencies:
-      '@nuxt/kit': 3.2.3(rollup@3.20.6)
-      consola: 2.15.3
+      '@nuxt/kit': 3.4.1(rollup@3.20.6)
+      consola: 3.1.0
       defu: 6.1.2
       destr: 1.2.2
       detab: 3.0.2
@@ -1656,7 +1659,7 @@ packages:
       remark-squeeze-paragraphs: 5.0.1
       scule: 1.0.0
       shiki-es: 0.2.0
-      slugify: 1.6.5
+      slugify: 1.6.6
       socket.io-client: 4.6.1
       ufo: 1.1.1
       unified: 10.1.2
@@ -1682,13 +1685,13 @@ packages:
   /@nuxt/devalue@2.0.0:
     resolution: {integrity: sha512-YBI/6o2EBz02tdEJRBK8xkt3zvOFOWlLBf7WKYGBsSYSRtjjgrqPe2skp6VLLmKx5WbHHDNcW+6oACaurxGzeA==}
 
-  /@nuxt/kit@3.2.3(rollup@3.20.6):
-    resolution: {integrity: sha512-wcsVlQLwGkh1cRhAFWHc3uYHdIxFTRNdRUzNyfqoX9DL0Fuga3K75q/PBY0xg1viA9R6F5BMPhc7KDLSWbXtWg==}
+  /@nuxt/kit@3.4.1(rollup@3.20.6):
+    resolution: {integrity: sha512-VeH26umZW6Rf4F1QX9nTIuTBp6HeL/MgmKY3+FgQiLD07afgFTLUJZohVE5xU7hb66zCnYvwKxa3JpjXFJZrhQ==}
     engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
     dependencies:
-      '@nuxt/schema': 3.2.3(rollup@3.20.6)
+      '@nuxt/schema': 3.4.1(rollup@3.20.6)
       c12: 1.4.1
-      consola: 2.15.3
+      consola: 3.1.0
       defu: 6.1.2
       globby: 13.1.4
       hash-sum: 2.0.0
@@ -1702,7 +1705,7 @@ packages:
       scule: 1.0.0
       semver: 7.5.0
       unctx: 2.3.0
-      unimport: 2.2.4(rollup@3.20.6)
+      unimport: 3.0.6(rollup@3.20.6)
       untyped: 1.3.2
     transitivePeerDependencies:
       - rollup
@@ -1749,8 +1752,8 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt/schema@3.2.3(rollup@3.20.6):
-    resolution: {integrity: sha512-AXzRnBivCwn5RpNFWjUkvOPGPSHl5BM+6GfOpSNglPXi0tiQJ+rawSl7no7BkxGDmQ44Bx9AXwvHTrgjpcuo4g==}
+  /@nuxt/schema@3.4.1(rollup@3.20.6):
+    resolution: {integrity: sha512-xhPh9JfVKXRQVfdUT6BKieDTCljBjbIGgGCQnxplVi4FUTWRKUXR7MFwsobr5D9AJpeE0mg5/kRRh5gUX37vAQ==}
     engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
     dependencies:
       c12: 1.4.1
@@ -1764,7 +1767,7 @@ packages:
       scule: 1.0.0
       std-env: 3.3.2
       ufo: 1.1.1
-      unimport: 2.2.4(rollup@3.20.6)
+      unimport: 3.0.6(rollup@3.20.6)
       untyped: 1.3.2
     transitivePeerDependencies:
       - rollup
@@ -9932,8 +9935,8 @@ packages:
       is-fullwidth-code-point: 4.0.0
     dev: true
 
-  /slugify@1.6.5:
-    resolution: {integrity: sha512-8mo9bslnBO3tr5PEVFzMPIWwWnipGS0xVbYf65zxDqfNwmzYn1LpiKNrR6DlClusuvo+hDHd1zKpmfAe83NQSQ==}
+  /slugify@1.6.6:
+    resolution: {integrity: sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==}
     engines: {node: '>=8.0.0'}
     dev: true
 
@@ -10663,24 +10666,6 @@ packages:
       vfile: 5.3.7
     dev: true
 
-  /unimport@2.2.4(rollup@3.20.6):
-    resolution: {integrity: sha512-qMgmeEGqqrrmEtm0dqxMG37J6xBtrriqxq9hILvDb+e6l2F0yTnJomLoCCp0eghLR7bYGeBsUU5Y0oyiUYhViw==}
-    dependencies:
-      '@rollup/pluginutils': 5.0.2(rollup@3.20.6)
-      escape-string-regexp: 5.0.0
-      fast-glob: 3.2.12
-      local-pkg: 0.4.3
-      magic-string: 0.27.0
-      mlly: 1.2.0
-      pathe: 1.1.0
-      pkg-types: 1.0.2
-      scule: 1.0.0
-      strip-literal: 1.0.1
-      unplugin: 1.3.1
-    transitivePeerDependencies:
-      - rollup
-    dev: true
-
   /unimport@3.0.6(rollup@3.20.6):
     resolution: {integrity: sha512-GYxGJ1Bri1oqx8VFDjdgooGzeK7jBk3bvhXmamTIpu3nONOcUMGwZbX7X0L5RA7OWMXpR4vzpSQP7pXUzJg1/Q==}
     dependencies: