From 7ea39025908df51cef40ffd90dfb8326ed2da7a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Sat, 25 Feb 2023 15:24:18 +0100
Subject: [PATCH 01/17] feat: support storage

---
 .gitignore                                    |   1 +
 packages/devtools/client/nuxt.config.ts       |   6 +
 .../devtools/client/pages/modules/storage.vue | 105 ++++++++++++++++++
 packages/devtools/client/server/api/test.ts   |   7 ++
 packages/devtools/src/rpc.ts                  |  28 +++++
 packages/devtools/src/types.ts                |   5 +
 6 files changed, 152 insertions(+)
 create mode 100644 packages/devtools/client/pages/modules/storage.vue
 create mode 100644 packages/devtools/client/server/api/test.ts

diff --git a/.gitignore b/.gitignore
index 76555f3471..427f298836 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,6 +23,7 @@ dist
 .build-*
 .env
 .netlify
+.data
 
 # Env
 .env
diff --git a/packages/devtools/client/nuxt.config.ts b/packages/devtools/client/nuxt.config.ts
index 5ee5c4771e..9dd766d16b 100644
--- a/packages/devtools/client/nuxt.config.ts
+++ b/packages/devtools/client/nuxt.config.ts
@@ -16,6 +16,12 @@ export default defineNuxtConfig({
     output: {
       publicDir: resolve(__dirname, '../dist/client'),
     },
+    devStorage: {
+      test: {
+        driver: 'fs',
+        base: resolve(__dirname, './.data/test'),
+      },
+    },
   },
   appConfig: {
     fixture2: 'from nuxt.config.ts',
diff --git a/packages/devtools/client/pages/modules/storage.vue b/packages/devtools/client/pages/modules/storage.vue
new file mode 100644
index 0000000000..ca13bf14e9
--- /dev/null
+++ b/packages/devtools/client/pages/modules/storage.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import JsonEditorVue from 'json-editor-vue'
+import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
+
+definePageMeta({
+  icon: 'carbon-data-base',
+  title: 'Storage',
+})
+
+const router = useRouter()
+const searchString = ref('')
+const newKey = ref('')
+const current = ref()
+const fileKey = computed(() => useRoute().query?.key as string | undefined)
+
+const { data: keys, refresh } = await useAsyncData('storage', () => rpc.getStorageKeys())
+
+watchEffect(async () => {
+  if (!fileKey.value) {
+    current.value = null
+    return
+  }
+  const content = await rpc.getStorageItem(fileKey.value)
+  current.value = { key: fileKey.value, content, updatedContent: content }
+})
+
+const filteredKeys = computed(() => {
+  if (!keys.value)
+    return []
+  return keys.value.filter(key => key.startsWith(searchString.value))
+})
+async function saveNewItem() {
+  if (!newKey.value)
+    return
+  // If does not exists
+  if (!keys.value?.includes(newKey.value))
+    await rpc.setStorageItem(newKey.value, '')
+
+  await refresh()
+  router.push({ query: { key: newKey.value } })
+  newKey.value = ''
+}
+async function saveCurrentItem() {
+  if (!current.value)
+    return
+  await rpc.setStorageItem(current.value.key, current.value.updatedContent)
+  current.value.content = current.value.updatedContent
+}
+async function removeCurrentItem() {
+  if (!current.value)
+    return
+  await rpc.removeStorageItem(current.value.key)
+  current.value = null
+  await refresh()
+}
+</script>
+
+<template>
+  <div grid="~ cols-[auto_1fr]" h-full of-hidden class="virtual-files">
+    <div border="r base" of-auto w="300px">
+      <div class="flex items-center px-3 h-15">
+        <NTextInput
+          v-model="searchString"
+          icon="carbon-search"
+          placeholder="Search..."
+          n="primary"
+          class="w-full"
+        />
+      </div>
+      <NuxtLink
+        v-for="key of filteredKeys" :key="key"
+        border="b base" px2 py1 text-sm font-mono block truncate
+        :to="{ query: { key } }"
+        :class="key === current?.key ? 'bg-truegray:20 text-base' : 'text-truegray'"
+      >
+        {{ key }}
+      </NuxtLink>
+      <NTextInput
+        v-model="newKey"
+        placeholder="new:key"
+        n="sm"
+        class="w-full outline-none border-0 border-b rounded-none"
+        @keyup.enter="saveNewItem"
+      />
+    </div>
+    <div v-if="current?.key" h-full of-hidden flex="~ col">
+      <div border="b base" class="text-sm op75 flex items-center h-15 px-4 justify-between">
+        <div class="flex gap-4 items-center">
+          <code>{{ current.key }}</code>
+          <NButton n="green xs" :disabled="current.content === current.updatedContent" @click="saveCurrentItem">
+            Save
+          </NButton>
+        </div>
+        <div>
+          <NButton n="red xs" @click="removeCurrentItem">
+            Delete
+          </NButton>
+        </div>
+      </div>
+      <textarea v-if="typeof current.content === 'string'" v-model="current.updatedContent" class="of-auto h-full text-sm outline-none p-4" />
+      <JsonEditorVue v-else v-model="current.updatedContent" class="of-auto h-full text-sm outline-none" />
+    </div>
+    <span v-else flex items-center justify-center op50>Select one file to start</span>
+  </div>
+</template>
diff --git a/packages/devtools/client/server/api/test.ts b/packages/devtools/client/server/api/test.ts
new file mode 100644
index 0000000000..2ca84f3287
--- /dev/null
+++ b/packages/devtools/client/server/api/test.ts
@@ -0,0 +1,7 @@
+const storage = useStorage()
+
+export default eventHandler(async (event) => {
+  await storage.setItem('test:json', { hello: true })
+
+  return await storage.getKeys()
+})
diff --git a/packages/devtools/src/rpc.ts b/packages/devtools/src/rpc.ts
index d31c380979..e8ce1cc88e 100644
--- a/packages/devtools/src/rpc.ts
+++ b/packages/devtools/src/rpc.ts
@@ -5,6 +5,7 @@ import type { WebSocket } from 'ws'
 import { createBirpcGroup } from 'birpc'
 import type { ChannelOptions } from 'birpc'
 import c from 'picocolors'
+import type { Storage, StorageValue } from 'unstorage'
 
 import { parse, stringify } from 'flatted'
 import type { Component, Nuxt, NuxtApp, NuxtPage } from 'nuxt/schema'
@@ -28,6 +29,7 @@ export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
   const iframeTabs: ModuleCustomTab[] = []
   const customTabs: ModuleCustomTab[] = []
   const serverHooks: Record<string, HookInfo> = setupHooksDebug(nuxt.hooks)
+  let storage: Storage | undefined
   let unimport: Unimport | undefined
   let app: NuxtApp | undefined
 
@@ -42,7 +44,33 @@ export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
     birpc.broadcast.refresh.asEvent(event)
   }
 
+  nuxt.hook('nitro:init', (nitro) => {
+    storage = nitro.storage
+  })
+
   Object.assign(serverFunctions, {
+    async getStorageKeys() {
+      if (!storage)
+        return []
+      const keys = await storage.getKeys()
+
+      return keys.filter(key => !['root', 'build', 'src'].includes(key.split(':')[0]))
+    },
+    async getStorageItem(key: string) {
+      if (!storage)
+        return null
+      return await storage.getItem(key)
+    },
+    async setStorageItem(key: string, value: StorageValue) {
+      if (!storage)
+        return
+      return await storage.setItem(key, value)
+    },
+    async removeStorageItem(key: string) {
+      if (!storage)
+        return
+      return await storage.removeItem(key)
+    },
     getServerConfig() {
       return nuxt.options
     },
diff --git a/packages/devtools/src/types.ts b/packages/devtools/src/types.ts
index 1046100ad5..ea03792011 100644
--- a/packages/devtools/src/types.ts
+++ b/packages/devtools/src/types.ts
@@ -6,6 +6,7 @@ import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
 import type { Hookable } from 'hookable'
 import type { BirpcReturn } from 'birpc'
 import type { VNode } from 'vue'
+import type { StorageValue } from 'unstorage'
 import type { WizardActions, WizardArgs } from './wizard'
 import type {} from '@nuxt/schema'
 
@@ -31,6 +32,10 @@ export interface ModuleGlobalOptions {
 }
 
 export interface ServerFunctions {
+  getStorageKeys(): Promise<string[]>
+  getStorageItem(key: string): Promise<StorageValue>
+  setStorageItem(key: string, value: StorageValue): Promise<void>
+  removeStorageItem(key: string): Promise<void>
   getServerConfig(): NuxtOptions
   getComponents(): Component[]
   getComponentsRelationships(): Promise<ComponentRelationship[]>

From d417282f0d8a7409c946587bc997c9dfa6357fc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Sat, 25 Feb 2023 19:06:42 +0100
Subject: [PATCH 02/17] chore: design improvements

---
 .../client/components/StateEditor.vue         |  2 +-
 .../devtools/client/pages/modules/storage.vue | 39 +++++++++++++++----
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/packages/devtools/client/components/StateEditor.vue b/packages/devtools/client/components/StateEditor.vue
index af82938702..a41fccf4ac 100644
--- a/packages/devtools/client/components/StateEditor.vue
+++ b/packages/devtools/client/components/StateEditor.vue
@@ -95,7 +95,7 @@ async function refresh() {
   </div>
 </template>
 
-<style>
+<style scoped>
 .json-editor-vue {
   --jse-theme-color: #383e42 !important;
   --jse-theme-color-highlight: #687177 !important;
diff --git a/packages/devtools/client/pages/modules/storage.vue b/packages/devtools/client/pages/modules/storage.vue
index ca13bf14e9..680adedc88 100644
--- a/packages/devtools/client/pages/modules/storage.vue
+++ b/packages/devtools/client/pages/modules/storage.vue
@@ -20,15 +20,24 @@ watchEffect(async () => {
     current.value = null
     return
   }
-  const content = await rpc.getStorageItem(fileKey.value)
-  current.value = { key: fileKey.value, content, updatedContent: content }
+  fetchItem(fileKey.value)
 })
 
 const filteredKeys = computed(() => {
   if (!keys.value)
     return []
-  return keys.value.filter(key => key.startsWith(searchString.value))
+  return keys.value.filter(key => key.includes(searchString.value))
 })
+
+async function fetchItem(key: string) {
+  const content = await rpc.getStorageItem(key)
+  current.value = {
+    key: fileKey.value,
+    content,
+    updatedContent: content,
+  }
+}
+
 async function saveNewItem() {
   if (!newKey.value)
     return
@@ -44,7 +53,7 @@ async function saveCurrentItem() {
   if (!current.value)
     return
   await rpc.setStorageItem(current.value.key, current.value.updatedContent)
-  current.value.content = current.value.updatedContent
+  await fetchItem(current.value.key)
 }
 async function removeCurrentItem() {
   if (!current.value)
@@ -77,6 +86,7 @@ async function removeCurrentItem() {
       </NuxtLink>
       <NTextInput
         v-model="newKey"
+        icon="carbon-add"
         placeholder="new:key"
         n="sm"
         class="w-full outline-none border-0 border-b rounded-none"
@@ -87,7 +97,7 @@ async function removeCurrentItem() {
       <div border="b base" class="text-sm op75 flex items-center h-15 px-4 justify-between">
         <div class="flex gap-4 items-center">
           <code>{{ current.key }}</code>
-          <NButton n="green xs" :disabled="current.content === current.updatedContent" @click="saveCurrentItem">
+          <NButton n="green xs" :disabled="current.content === current.updatedContent" :class="{ 'border-green': current.content !== current.updatedContent }" @click="saveCurrentItem">
             Save
           </NButton>
         </div>
@@ -97,9 +107,24 @@ async function removeCurrentItem() {
           </NButton>
         </div>
       </div>
-      <textarea v-if="typeof current.content === 'string'" v-model="current.updatedContent" class="of-auto h-full text-sm outline-none p-4" />
-      <JsonEditorVue v-else v-model="current.updatedContent" class="of-auto h-full text-sm outline-none" />
+      <textarea v-if="typeof current.content === 'string'" v-model="current.updatedContent" class="of-auto h-full text-sm outline-none p-4" @keyup.ctrl.enter="saveCurrentItem" />
+      <JsonEditorVue v-else v-model="current.updatedContent" :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']" class="json-editor-vue of-auto h-full text-sm outline-none" v-bind="$attrs" mode="text" :navigation-bar="false" :indentation="2" :tab-size="2" />
     </div>
     <span v-else flex items-center justify-center op50>Select one file to start</span>
   </div>
 </template>
+
+<style scoped>
+.json-editor-vue.light {
+  --jse-theme-color: #ebebeb !important;
+  --jse-theme-color-highlight: #bbb !important;
+  --jse-background-color: #8881 !important;
+  --jse-menu-color: #333 !important;
+}
+.json-editor-vue.jse-theme-dark {
+  --jse-theme-color: #1d1d1d !important;
+  --jse-theme-color-highlight: #333 !important;
+  --jse-background-color: #8881 !important;
+  --jse-menu-color: #aaa !important;
+}
+</style>

From 2ead6bcc558410c806865d10af757e3fce0e1280 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Sat, 25 Feb 2023 19:09:43 +0100
Subject: [PATCH 03/17] chore: improve defaults

---
 packages/devtools/client/pages/modules/storage.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/devtools/client/pages/modules/storage.vue b/packages/devtools/client/pages/modules/storage.vue
index 680adedc88..4c3f55552e 100644
--- a/packages/devtools/client/pages/modules/storage.vue
+++ b/packages/devtools/client/pages/modules/storage.vue
@@ -110,7 +110,13 @@ async function removeCurrentItem() {
       <textarea v-if="typeof current.content === 'string'" v-model="current.updatedContent" class="of-auto h-full text-sm outline-none p-4" @keyup.ctrl.enter="saveCurrentItem" />
       <JsonEditorVue v-else v-model="current.updatedContent" :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']" class="json-editor-vue of-auto h-full text-sm outline-none" v-bind="$attrs" mode="text" :navigation-bar="false" :indentation="2" :tab-size="2" />
     </div>
-    <span v-else flex items-center justify-center op50>Select one file to start</span>
+    <div v-else flex items-center justify-center op50 text-center>
+      <p>
+        Select one key to start.<br>Learn more about <NLink href="https://nitro.unjs.io/guide/introduction/storage" n="orange" target="_blank">
+          Nitro storage
+        </NLink>
+      </p>
+    </div>
   </div>
 </template>
 

From 547dc8d3b1c551091571f0c4b562a3bec32a6997 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Sat, 25 Feb 2023 19:14:30 +0100
Subject: [PATCH 04/17] fix: remove unused api and lint

---
 packages/devtools-ui-kit/playground/pages/index.vue | 2 +-
 packages/devtools/client/pages/modules/storage.vue  | 2 +-
 packages/devtools/client/server/api/test.ts         | 7 -------
 3 files changed, 2 insertions(+), 9 deletions(-)
 delete mode 100644 packages/devtools/client/server/api/test.ts

diff --git a/packages/devtools-ui-kit/playground/pages/index.vue b/packages/devtools-ui-kit/playground/pages/index.vue
index f5d3f39f6f..fe71695a46 100644
--- a/packages/devtools-ui-kit/playground/pages/index.vue
+++ b/packages/devtools-ui-kit/playground/pages/index.vue
@@ -8,7 +8,7 @@ const radio = ref('a')
 
 <template>
   <div class="relative p-10 n-bg-base">
-    <div class="w-full flex container mx-auto flex-col gap-4">
+    <div class="w-full flex gap-4 container mx-auto flex-col">
       <NTip n="hover:yellow-600 dark:hover:yellow-500">
         This library is heavily working in progress. Breaking changes may not follow semver. Pin the version if used.
       </NTip>
diff --git a/packages/devtools/client/pages/modules/storage.vue b/packages/devtools/client/pages/modules/storage.vue
index 4c3f55552e..14fdc39f95 100644
--- a/packages/devtools/client/pages/modules/storage.vue
+++ b/packages/devtools/client/pages/modules/storage.vue
@@ -95,7 +95,7 @@ async function removeCurrentItem() {
     </div>
     <div v-if="current?.key" h-full of-hidden flex="~ col">
       <div border="b base" class="text-sm op75 flex items-center h-15 px-4 justify-between">
-        <div class="flex gap-4 items-center">
+        <div class="flex items-center gap-4">
           <code>{{ current.key }}</code>
           <NButton n="green xs" :disabled="current.content === current.updatedContent" :class="{ 'border-green': current.content !== current.updatedContent }" @click="saveCurrentItem">
             Save
diff --git a/packages/devtools/client/server/api/test.ts b/packages/devtools/client/server/api/test.ts
deleted file mode 100644
index 2ca84f3287..0000000000
--- a/packages/devtools/client/server/api/test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-const storage = useStorage()
-
-export default eventHandler(async (event) => {
-  await storage.setItem('test:json', { hello: true })
-
-  return await storage.getKeys()
-})

From 4f83fdc8dd44ffda34220cd5e4bb0bc2a341cfc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Sun, 26 Feb 2023 13:59:58 +0100
Subject: [PATCH 05/17] fix: add unstorage to external

---
 packages/devtools/build.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/devtools/build.config.ts b/packages/devtools/build.config.ts
index 6c0154cb38..34909847c6 100644
--- a/packages/devtools/build.config.ts
+++ b/packages/devtools/build.config.ts
@@ -21,6 +21,7 @@ export default defineBuildConfig({
     // Type only
     'vue',
     'vue-router',
+    'unstorage',
   ],
   rollup: {
     inlineDependencies: true,

From c230a1c466a046dd01fb9d4367d7747e6f92f62d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Tue, 28 Feb 2023 10:52:59 +0100
Subject: [PATCH 06/17] feat: add storage mounts switch and experimental
 settings

---
 packages/devtools/build.config.ts             |   1 +
 .../client/components/SettingsPanel.vue       |   4 +
 packages/devtools/client/composables/state.ts |   2 +
 .../devtools/client/composables/storage.ts    |   1 +
 .../devtools/client/pages/modules/storage.vue | 138 +++++++++++++-----
 packages/devtools/src/rpc.ts                  |  25 +++-
 packages/devtools/src/types.ts                |   5 +-
 7 files changed, 134 insertions(+), 42 deletions(-)

diff --git a/packages/devtools/build.config.ts b/packages/devtools/build.config.ts
index 34909847c6..2216feb23e 100644
--- a/packages/devtools/build.config.ts
+++ b/packages/devtools/build.config.ts
@@ -22,6 +22,7 @@ export default defineBuildConfig({
     'vue',
     'vue-router',
     'unstorage',
+    'nitropack',
   ],
   rollup: {
     inlineDependencies: true,
diff --git a/packages/devtools/client/components/SettingsPanel.vue b/packages/devtools/client/components/SettingsPanel.vue
index 38234a0939..ba78e4a20a 100644
--- a/packages/devtools/client/components/SettingsPanel.vue
+++ b/packages/devtools/client/components/SettingsPanel.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const {
   interactionCloseOnOutsideClick,
+  showExperimentalFeatures,
 } = useDevToolsSettings()
 </script>
 
@@ -9,5 +10,8 @@ const {
     <NCheckbox v-model="interactionCloseOnOutsideClick" n-primary>
       <span>Close DevTools when clicking outside</span>
     </NCheckbox>
+    <NCheckbox v-model="showExperimentalFeatures" n-primary>
+      <span>Show experimental features</span>
+    </NCheckbox>
   </div>
 </template>
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index e2d6c9cf4f..807e92ef79 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -71,10 +71,12 @@ export function useCustomTabs() {
 export function useTabs() {
   const router = useRouter()
   const customTabs = useCustomTabs()
+  const settings = useDevToolsSettings()
 
   const builtin = computed(() => {
     return router.getRoutes()
       .filter(route => route.path.startsWith('/modules/') && route.meta.title && !route.meta.wip)
+      .filter(route => !route.meta.experimental || (route.meta.experimental && settings.showExperimentalFeatures.value))
       .sort((a, b) => (a.meta.order || 100) - (b.meta.order || 100))
       .map((i): ModuleBuiltinTab => {
         return {
diff --git a/packages/devtools/client/composables/storage.ts b/packages/devtools/client/composables/storage.ts
index 7a81695296..f608d86d8e 100644
--- a/packages/devtools/client/composables/storage.ts
+++ b/packages/devtools/client/composables/storage.ts
@@ -9,6 +9,7 @@ const devToolsSettings = useLocalStorage<DevToolsUISettings>('nuxt-devtools-sett
   componentsGraphShowPages: false,
   componentsGraphShowLayouts: false,
   interactionCloseOnOutsideClick: false,
+  showExperimentalFeatures: false,
 }, { mergeDefaults: true })
 
 const devToolsSettingsRefs = toRefs(devToolsSettings)
diff --git a/packages/devtools/client/pages/modules/storage.vue b/packages/devtools/client/pages/modules/storage.vue
index 14fdc39f95..ed014ea9da 100644
--- a/packages/devtools/client/pages/modules/storage.vue
+++ b/packages/devtools/client/pages/modules/storage.vue
@@ -5,99 +5,141 @@ import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
 definePageMeta({
   icon: 'carbon-data-base',
   title: 'Storage',
+  experimental: true,
 })
 
 const router = useRouter()
 const searchString = ref('')
 const newKey = ref('')
-const current = ref()
+const currentStorage = computed({
+  get(): string | undefined {
+    return useRoute().query?.storage as string | undefined
+  },
+  set(storage: string | undefined): void {
+    router.replace({ query: { storage } })
+  },
+})
+const currentItem = ref()
 const fileKey = computed(() => useRoute().query?.key as string | undefined)
 
-const { data: keys, refresh } = await useAsyncData('storage', () => rpc.getStorageKeys())
+const { data: storageMounts } = await useAsyncData('storageMounts', () => rpc.getStorageMounts())
+const { data: storageKeys, refresh: refreshStorageKeys } = await useAsyncData('storageKeys', async () => {
+  if (currentStorage.value)
+    return await rpc.getStorageKeys(currentStorage.value)
+
+  return []
+})
+
+watch(currentStorage, refreshStorageKeys)
 
 watchEffect(async () => {
   if (!fileKey.value) {
-    current.value = null
+    currentItem.value = null
     return
   }
   fetchItem(fileKey.value)
 })
 
+function keyName(key: string) {
+  return key.replace(`${currentStorage.value}:`, '')
+}
+
 const filteredKeys = computed(() => {
-  if (!keys.value)
+  if (!storageKeys.value)
     return []
-  return keys.value.filter(key => key.includes(searchString.value))
+  return storageKeys.value.filter(key => key.includes(searchString.value))
 })
 
 async function fetchItem(key: string) {
   const content = await rpc.getStorageItem(key)
-  current.value = {
-    key: fileKey.value,
+  currentItem.value = {
+    key,
+    updatedKey: keyName(key),
+    editingKey: false,
     content,
     updatedContent: content,
   }
 }
 
 async function saveNewItem() {
-  if (!newKey.value)
+  if (!newKey.value || !currentStorage.value)
     return
   // If does not exists
-  if (!keys.value?.includes(newKey.value))
-    await rpc.setStorageItem(newKey.value, '')
+  if (!storageKeys.value?.includes(newKey.value))
+    await rpc.setStorageItem(`${currentStorage.value}:${newKey.value}`, '')
 
-  await refresh()
-  router.push({ query: { key: newKey.value } })
+  await refreshStorageKeys()
+  router.replace({ query: { storage: currentStorage.value, key: newKey.value } })
   newKey.value = ''
 }
 async function saveCurrentItem() {
-  if (!current.value)
+  if (!currentItem.value)
     return
-  await rpc.setStorageItem(current.value.key, current.value.updatedContent)
-  await fetchItem(current.value.key)
+  await rpc.setStorageItem(currentItem.value.key, currentItem.value.updatedContent)
+  await fetchItem(currentItem.value.key)
 }
 async function removeCurrentItem() {
-  if (!current.value)
+  if (!currentItem.value || !currentStorage.value)
+    return
+  await rpc.removeStorageItem(currentItem.value.key)
+  currentItem.value = null
+  await refreshStorageKeys()
+}
+async function renameCurrentItem() {
+  if (!currentItem.value || !currentStorage.value)
     return
-  await rpc.removeStorageItem(current.value.key)
-  current.value = null
-  await refresh()
+  const renamedKey = `${currentStorage.value}:${currentItem.value.updatedKey}`
+  await rpc.setStorageItem(renamedKey, currentItem.value.updatedContent)
+  await rpc.removeStorageItem(currentItem.value.key)
+  await refreshStorageKeys()
+  router.replace({ query: { storage: currentStorage.value, key: renamedKey } })
 }
 </script>
 
 <template>
-  <div grid="~ cols-[auto_1fr]" h-full of-hidden class="virtual-files">
+  <div v-if="currentStorage" grid="~ cols-[auto_1fr]" h-full of-hidden class="virtual-files">
     <div border="r base" of-auto w="300px">
-      <div class="flex items-center px-3 h-15">
-        <NTextInput
-          v-model="searchString"
-          icon="carbon-search"
-          placeholder="Search..."
-          n="primary"
-          class="w-full"
-        />
+      <div class="flex justify-betwen items-center gap-2 px-3 h-[50px]">
+        <div class="w-full text-sm">
+          <span text-gray>storage:</span>
+          <select v-model="currentStorage" class="ml-2 p-1 bg-transparent">
+            <option v-for="(_storage, name) of storageMounts" :key="name" :value="name">
+              {{ name }}
+            </option>
+          </select>
+        </div>
+        <NIcon icon="carbon-close" class="op50 hover:op100 cursor-pointer" @click="currentStorage = ''" />
       </div>
+      <NTextInput
+        v-model="searchString"
+        icon="carbon-search"
+        placeholder="Search..."
+        n="primary sm"
+        class="w-full rounded-0 border-x-none outline-none"
+      />
       <NuxtLink
         v-for="key of filteredKeys" :key="key"
         border="b base" px2 py1 text-sm font-mono block truncate
-        :to="{ query: { key } }"
-        :class="key === current?.key ? 'bg-truegray:20 text-base' : 'text-truegray'"
+        :to="{ query: { key, storage: currentStorage } }"
+        :class="key === currentItem?.key ? 'bg-truegray:20 text-base' : 'text-truegray'"
       >
-        {{ key }}
+        {{ keyName(key) }}
       </NuxtLink>
       <NTextInput
         v-model="newKey"
         icon="carbon-add"
-        placeholder="new:key"
+        placeholder="key"
         n="sm"
         class="w-full outline-none border-0 border-b rounded-none"
         @keyup.enter="saveNewItem"
       />
     </div>
-    <div v-if="current?.key" h-full of-hidden flex="~ col">
-      <div border="b base" class="text-sm op75 flex items-center h-15 px-4 justify-between">
+    <div v-if="currentItem?.key" h-full of-hidden flex="~ col">
+      <div border="b base" class="text-sm op75 flex items-center h-[50px] px-4 justify-between">
         <div class="flex items-center gap-4">
-          <code>{{ current.key }}</code>
-          <NButton n="green xs" :disabled="current.content === current.updatedContent" :class="{ 'border-green': current.content !== current.updatedContent }" @click="saveCurrentItem">
+          <NTextInput v-if="currentItem.editingKey" v-model="currentItem.updatedKey" @keyup.enter="renameCurrentItem" />
+          <code v-else>{{ keyName(currentItem.key) }} <NIcon icon="carbon-edit" class="op50 hover:op100 cursor-pointer" @click="currentItem.editingKey = true" /></code>
+          <NButton v-if="!currentItem.editingKey" n="green xs" :disabled="currentItem.content === currentItem.updatedContent" :class="{ 'border-green': currentItem.content !== currentItem.updatedContent }" @click="saveCurrentItem">
             Save
           </NButton>
         </div>
@@ -107,8 +149,8 @@ async function removeCurrentItem() {
           </NButton>
         </div>
       </div>
-      <textarea v-if="typeof current.content === 'string'" v-model="current.updatedContent" class="of-auto h-full text-sm outline-none p-4" @keyup.ctrl.enter="saveCurrentItem" />
-      <JsonEditorVue v-else v-model="current.updatedContent" :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']" class="json-editor-vue of-auto h-full text-sm outline-none" v-bind="$attrs" mode="text" :navigation-bar="false" :indentation="2" :tab-size="2" />
+      <textarea v-if="typeof currentItem.content === 'string'" v-model="currentItem.updatedContent" class="of-auto h-full text-sm outline-none p-4" @keyup.ctrl.enter="saveCurrentItem" />
+      <JsonEditorVue v-else v-model="currentItem.updatedContent" :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']" class="json-editor-vue of-auto h-full text-sm outline-none" v-bind="$attrs" mode="text" :navigation-bar="false" :indentation="2" :tab-size="2" />
     </div>
     <div v-else flex items-center justify-center op50 text-center>
       <p>
@@ -118,6 +160,26 @@ async function removeCurrentItem() {
       </p>
     </div>
   </div>
+  <div v-else grid="~" class="h-full of-hidden">
+    <div class="flex flex-col gap-4 justify-center op50 text-center">
+      <p v-if="Object.keys(storageMounts).length">
+        Select one storage to start.
+      </p>
+      <p v-else>
+        No custom storage defined in <code>nitro.storage</code>.<br>
+        Learn more about <NLink href="https://nitro.unjs.io/guide/introduction/storage" n="orange" target="_blank">
+          Nitro storage
+        </nlink>
+      </p>
+      <div class="mx-auto">
+        <NCard v-for="(storage, name) of storageMounts" :key="name" class="border text-left p-2 mb-4 hover:border-green cursor-pointer" @click="currentStorage = name">
+          <span class="font-bold">{{ name }}</span><br>
+          <span class="text-sm">{{ storage.driver }} driver</span><br>
+          <span v-if="storage.base" class="text-xs font-mono">{{ storage.base }}</span>
+        </NCard>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/packages/devtools/src/rpc.ts b/packages/devtools/src/rpc.ts
index e8ce1cc88e..fa42a64984 100644
--- a/packages/devtools/src/rpc.ts
+++ b/packages/devtools/src/rpc.ts
@@ -6,6 +6,7 @@ import { createBirpcGroup } from 'birpc'
 import type { ChannelOptions } from 'birpc'
 import c from 'picocolors'
 import type { Storage, StorageValue } from 'unstorage'
+import type { StorageMounts } from 'nitropack'
 
 import { parse, stringify } from 'flatted'
 import type { Component, Nuxt, NuxtApp, NuxtPage } from 'nuxt/schema'
@@ -21,6 +22,8 @@ import { wizard } from './wizard'
 import { LOG_PREFIX } from './logger'
 import { checkForUpdates, usePackageVersions } from './npm'
 
+const IGNORE_STORAGE_MOUNTS = ['root', 'build', 'src', 'cache']
+
 export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
   const components: Component[] = []
   const imports: Import[] = []
@@ -30,6 +33,7 @@ export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
   const customTabs: ModuleCustomTab[] = []
   const serverHooks: Record<string, HookInfo> = setupHooksDebug(nuxt.hooks)
   let storage: Storage | undefined
+  const storageMounts: StorageMounts = {}
   let unimport: Unimport | undefined
   let app: NuxtApp | undefined
 
@@ -46,15 +50,30 @@ export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
 
   nuxt.hook('nitro:init', (nitro) => {
     storage = nitro.storage
+
+    // Taken from https://github.com/unjs/nitro/blob/d83f2b65165d7ba996e7ef129ea99ff5b551dccc/src/storage.ts#L7-L10
+    // Waiting for https://github.com/unjs/unstorage/issues/53
+    const mounts = {
+      ...nitro.options.storage,
+      ...nitro.options.devStorage,
+    }
+    for (const name of Object.keys(mounts)) {
+      if (IGNORE_STORAGE_MOUNTS.includes(name))
+        continue
+      storageMounts[name] = mounts[name]
+    }
   })
 
   Object.assign(serverFunctions, {
-    async getStorageKeys() {
+    async getStorageMounts() {
+      return storageMounts
+    },
+    async getStorageKeys(base?: string) {
       if (!storage)
         return []
-      const keys = await storage.getKeys()
+      const keys = await storage.getKeys(base)
 
-      return keys.filter(key => !['root', 'build', 'src'].includes(key.split(':')[0]))
+      return keys.filter(key => !IGNORE_STORAGE_MOUNTS.includes(key.split(':')[0]))
     },
     async getStorageItem(key: string) {
       if (!storage)
diff --git a/packages/devtools/src/types.ts b/packages/devtools/src/types.ts
index ea03792011..cfba7b9dc9 100644
--- a/packages/devtools/src/types.ts
+++ b/packages/devtools/src/types.ts
@@ -7,6 +7,7 @@ import type { Hookable } from 'hookable'
 import type { BirpcReturn } from 'birpc'
 import type { VNode } from 'vue'
 import type { StorageValue } from 'unstorage'
+import type { StorageMounts } from 'nitropack'
 import type { WizardActions, WizardArgs } from './wizard'
 import type {} from '@nuxt/schema'
 
@@ -32,7 +33,8 @@ export interface ModuleGlobalOptions {
 }
 
 export interface ServerFunctions {
-  getStorageKeys(): Promise<string[]>
+  getStorageMounts(): Promise<StorageMounts>
+  getStorageKeys(base?: string): Promise<string[]>
   getStorageItem(key: string): Promise<StorageValue>
   setStorageItem(key: string, value: StorageValue): Promise<void>
   removeStorageItem(key: string): Promise<void>
@@ -314,6 +316,7 @@ export interface DevToolsUISettings {
   componentsGraphShowPages: boolean
   componentsGraphShowLayouts: boolean
   interactionCloseOnOutsideClick: boolean
+  showExperimentalFeatures: boolean
 }
 
 export interface ComponentRelationship {

From 3fd3771bacef93806a02033aa1e4dd73f8734f4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Tue, 28 Feb 2023 11:05:31 +0100
Subject: [PATCH 07/17] fix: ignore prefix

---
 packages/devtools/src/rpc.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/devtools/src/rpc.ts b/packages/devtools/src/rpc.ts
index fa42a64984..54d501f794 100644
--- a/packages/devtools/src/rpc.ts
+++ b/packages/devtools/src/rpc.ts
@@ -58,7 +58,7 @@ export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
       ...nitro.options.devStorage,
     }
     for (const name of Object.keys(mounts)) {
-      if (IGNORE_STORAGE_MOUNTS.includes(name))
+      if (IGNORE_STORAGE_MOUNTS.includes(name.split(':')[0]))
         continue
       storageMounts[name] = mounts[name]
     }

From 2e68355c1dfd2fef7b88b4fc13b05f213eec6aba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Tue, 28 Feb 2023 17:47:42 +0100
Subject: [PATCH 08/17] chore: update storage page

---
 packages/devtools/client/pages/modules/storage.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/devtools/client/pages/modules/storage.vue b/packages/devtools/client/pages/modules/storage.vue
index ed014ea9da..0dc8102333 100644
--- a/packages/devtools/client/pages/modules/storage.vue
+++ b/packages/devtools/client/pages/modules/storage.vue
@@ -65,11 +65,12 @@ async function saveNewItem() {
   if (!newKey.value || !currentStorage.value)
     return
   // If does not exists
-  if (!storageKeys.value?.includes(newKey.value))
-    await rpc.setStorageItem(`${currentStorage.value}:${newKey.value}`, '')
+  const key = `${currentStorage.value}:${newKey.value}`
+  if (!storageKeys.value?.includes(key))
+    await rpc.setStorageItem(key, '')
 
   await refreshStorageKeys()
-  router.replace({ query: { storage: currentStorage.value, key: newKey.value } })
+  router.replace({ query: { storage: currentStorage.value, key } })
   newKey.value = ''
 }
 async function saveCurrentItem() {
@@ -149,7 +150,7 @@ async function renameCurrentItem() {
           </NButton>
         </div>
       </div>
-      <textarea v-if="typeof currentItem.content === 'string'" v-model="currentItem.updatedContent" class="of-auto h-full text-sm outline-none p-4" @keyup.ctrl.enter="saveCurrentItem" />
+      <textarea v-if="typeof currentItem.content === 'string'" v-model="currentItem.updatedContent" placeholder="Item value..." class="of-auto h-full text-sm outline-none p-4" @keyup.ctrl.enter="saveCurrentItem" />
       <JsonEditorVue v-else v-model="currentItem.updatedContent" :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']" class="json-editor-vue of-auto h-full text-sm outline-none" v-bind="$attrs" mode="text" :navigation-bar="false" :indentation="2" :tab-size="2" />
     </div>
     <div v-else flex items-center justify-center op50 text-center>
@@ -163,7 +164,7 @@ async function renameCurrentItem() {
   <div v-else grid="~" class="h-full of-hidden">
     <div class="flex flex-col gap-4 justify-center op50 text-center">
       <p v-if="Object.keys(storageMounts).length">
-        Select one storage to start.
+        Select one storage to start:
       </p>
       <p v-else>
         No custom storage defined in <code>nitro.storage</code>.<br>
@@ -172,7 +173,7 @@ async function renameCurrentItem() {
         </nlink>
       </p>
       <div class="mx-auto">
-        <NCard v-for="(storage, name) of storageMounts" :key="name" class="border text-left p-2 mb-4 hover:border-green cursor-pointer" @click="currentStorage = name">
+        <NCard v-for="(storage, name) of storageMounts" :key="name" class="border text-left p-4 mb-4 hover:border-green cursor-pointer" @click="currentStorage = name">
           <span class="font-bold">{{ name }}</span><br>
           <span class="text-sm">{{ storage.driver }} driver</span><br>
           <span v-if="storage.base" class="text-xs font-mono">{{ storage.base }}</span>

From 10bb0b90bd0340ddffea54827295d7c9b5e56f38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Tue, 28 Feb 2023 17:54:54 +0100
Subject: [PATCH 09/17] chore: add storage watcher (wip)

---
 packages/devtools/src/rpc.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/devtools/src/rpc.ts b/packages/devtools/src/rpc.ts
index 54d501f794..e839369e3a 100644
--- a/packages/devtools/src/rpc.ts
+++ b/packages/devtools/src/rpc.ts
@@ -23,6 +23,7 @@ import { LOG_PREFIX } from './logger'
 import { checkForUpdates, usePackageVersions } from './npm'
 
 const IGNORE_STORAGE_MOUNTS = ['root', 'build', 'src', 'cache']
+const shouldIgnoreStorageKey = (key: string) => IGNORE_STORAGE_MOUNTS.includes(key.split(':')[0])
 
 export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
   const components: Component[] = []
@@ -51,6 +52,14 @@ export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
   nuxt.hook('nitro:init', (nitro) => {
     storage = nitro.storage
 
+    nuxt.hook('ready', () => {
+      storage!.watch((_event, key) => {
+        if (shouldIgnoreStorageKey(key)) return
+        // TODO: send websocket event as storage key updated
+        // birpc.broadcast.sendEvent('storageUpdate', key)
+      })
+    })
+
     // Taken from https://github.com/unjs/nitro/blob/d83f2b65165d7ba996e7ef129ea99ff5b551dccc/src/storage.ts#L7-L10
     // Waiting for https://github.com/unjs/unstorage/issues/53
     const mounts = {
@@ -58,7 +67,7 @@ export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
       ...nitro.options.devStorage,
     }
     for (const name of Object.keys(mounts)) {
-      if (IGNORE_STORAGE_MOUNTS.includes(name.split(':')[0]))
+      if (shouldIgnoreStorageKey(name))
         continue
       storageMounts[name] = mounts[name]
     }
@@ -73,7 +82,7 @@ export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
         return []
       const keys = await storage.getKeys(base)
 
-      return keys.filter(key => !IGNORE_STORAGE_MOUNTS.includes(key.split(':')[0]))
+      return keys.filter(key => !shouldIgnoreStorageKey(key))
     },
     async getStorageItem(key: string) {
       if (!storage)

From f7a1435fa0d0802f26883c410ea342ecd1915d71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Tue, 28 Feb 2023 18:34:22 +0100
Subject: [PATCH 10/17] support live updates

---
 .../devtools/client/pages/modules/storage.vue | 21 ++++++++++++-------
 packages/devtools/client/setup/client-rpc.ts  |  3 +++
 packages/devtools/src/rpc.ts                  |  5 ++---
 packages/devtools/src/types.ts                |  1 +
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/devtools/client/pages/modules/storage.vue b/packages/devtools/client/pages/modules/storage.vue
index 0dc8102333..7c32a30979 100644
--- a/packages/devtools/client/pages/modules/storage.vue
+++ b/packages/devtools/client/pages/modules/storage.vue
@@ -8,6 +8,7 @@ definePageMeta({
   experimental: true,
 })
 
+const nuxtApp = useNuxtApp()
 const router = useRouter()
 const searchString = ref('')
 const newKey = ref('')
@@ -30,6 +31,16 @@ const { data: storageKeys, refresh: refreshStorageKeys } = await useAsyncData('s
   return []
 })
 
+const closeWatcher = nuxtApp.hook('storage:key:update' as any, async (key: string, event) => {
+  if (!currentStorage.value || key.split(':')[0] !== currentStorage.value) return
+  await refreshStorageKeys()
+  if (fileKey.value === key) {
+    if (event === 'remove') return router.replace({ query: { storage: currentStorage.value } })
+    await fetchItem(fileKey.value)
+  }
+})
+onUnmounted(closeWatcher)
+
 watch(currentStorage, refreshStorageKeys)
 
 watchEffect(async () => {
@@ -69,7 +80,6 @@ async function saveNewItem() {
   if (!storageKeys.value?.includes(key))
     await rpc.setStorageItem(key, '')
 
-  await refreshStorageKeys()
   router.replace({ query: { storage: currentStorage.value, key } })
   newKey.value = ''
 }
@@ -84,7 +94,6 @@ async function removeCurrentItem() {
     return
   await rpc.removeStorageItem(currentItem.value.key)
   currentItem.value = null
-  await refreshStorageKeys()
 }
 async function renameCurrentItem() {
   if (!currentItem.value || !currentStorage.value)
@@ -92,8 +101,6 @@ async function renameCurrentItem() {
   const renamedKey = `${currentStorage.value}:${currentItem.value.updatedKey}`
   await rpc.setStorageItem(renamedKey, currentItem.value.updatedContent)
   await rpc.removeStorageItem(currentItem.value.key)
-  await refreshStorageKeys()
-  router.replace({ query: { storage: currentStorage.value, key: renamedKey } })
 }
 </script>
 
@@ -150,8 +157,8 @@ async function renameCurrentItem() {
           </NButton>
         </div>
       </div>
-      <textarea v-if="typeof currentItem.content === 'string'" v-model="currentItem.updatedContent" placeholder="Item value..." class="of-auto h-full text-sm outline-none p-4" @keyup.ctrl.enter="saveCurrentItem" />
-      <JsonEditorVue v-else v-model="currentItem.updatedContent" :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']" class="json-editor-vue of-auto h-full text-sm outline-none" v-bind="$attrs" mode="text" :navigation-bar="false" :indentation="2" :tab-size="2" />
+      <JsonEditorVue v-if="typeof currentItem.content === 'object'" v-model="currentItem.updatedContent" :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']" class="json-editor-vue of-auto h-full text-sm outline-none" v-bind="$attrs" mode="text" :navigation-bar="false" :indentation="2" :tab-size="2" />
+      <textarea v-else v-model="currentItem.updatedContent" placeholder="Item value..." class="of-auto h-full text-sm outline-none p-4" @keyup.ctrl.enter="saveCurrentItem" />
     </div>
     <div v-else flex items-center justify-center op50 text-center>
       <p>
@@ -163,7 +170,7 @@ async function renameCurrentItem() {
   </div>
   <div v-else grid="~" class="h-full of-hidden">
     <div class="flex flex-col gap-4 justify-center op50 text-center">
-      <p v-if="Object.keys(storageMounts).length">
+      <p v-if="Object.keys(storageMounts as any).length">
         Select one storage to start:
       </p>
       <p v-else>
diff --git a/packages/devtools/client/setup/client-rpc.ts b/packages/devtools/client/setup/client-rpc.ts
index 2ad6d4a2a5..9476387701 100644
--- a/packages/devtools/client/setup/client-rpc.ts
+++ b/packages/devtools/client/setup/client-rpc.ts
@@ -8,5 +8,8 @@ export function setupClientRPC() {
       // refresh useAsyncData
       nuxt.hooks.callHookParallel('app:data:refresh', [type])
     },
+    async callHook(hook: string, ...args: any[]) {
+      nuxt.hooks.callHookParallel(hook as any, ...args)
+    }
   } satisfies ClientFunctions)
 }
diff --git a/packages/devtools/src/rpc.ts b/packages/devtools/src/rpc.ts
index e839369e3a..18f12b76fb 100644
--- a/packages/devtools/src/rpc.ts
+++ b/packages/devtools/src/rpc.ts
@@ -53,10 +53,9 @@ export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
     storage = nitro.storage
 
     nuxt.hook('ready', () => {
-      storage!.watch((_event, key) => {
+      storage!.watch((event, key) => {
         if (shouldIgnoreStorageKey(key)) return
-        // TODO: send websocket event as storage key updated
-        // birpc.broadcast.sendEvent('storageUpdate', key)
+        birpc.broadcast.callHook.asEvent('storage:key:update', key, event)
       })
     })
 
diff --git a/packages/devtools/src/types.ts b/packages/devtools/src/types.ts
index ae41c3425b..df011dee57 100644
--- a/packages/devtools/src/types.ts
+++ b/packages/devtools/src/types.ts
@@ -82,6 +82,7 @@ export type ClientUpdateEvent = keyof ServerFunctions
 
 export interface ClientFunctions {
   refresh(event: ClientUpdateEvent): void
+  callHook(hook: string, ...args: any[]): Promise<void>
 }
 
 export interface RouteInfo extends Pick<RouteRecordNormalized, 'name' | 'path' | 'meta' | 'props' | 'children'> {

From 8ec50bd13f27cb0ed5c62a738f35d3f1ea8f4fe2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Tue, 28 Feb 2023 18:35:09 +0100
Subject: [PATCH 11/17] fix lint

---
 packages/devtools-ui-kit/playground/pages/index.vue  |  2 +-
 .../devtools-ui-kit/src/components/NDropdown.vue     |  2 +-
 packages/devtools/client/pages/modules/storage.vue   | 12 +++++++-----
 packages/devtools/client/setup/client-rpc.ts         |  2 +-
 packages/devtools/src/rpc.ts                         |  3 ++-
 5 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/devtools-ui-kit/playground/pages/index.vue b/packages/devtools-ui-kit/playground/pages/index.vue
index fe71695a46..da526316f3 100644
--- a/packages/devtools-ui-kit/playground/pages/index.vue
+++ b/packages/devtools-ui-kit/playground/pages/index.vue
@@ -8,7 +8,7 @@ const radio = ref('a')
 
 <template>
   <div class="relative p-10 n-bg-base">
-    <div class="w-full flex gap-4 container mx-auto flex-col">
+    <div class="w-full flex gap-4 mx-auto flex-col container">
       <NTip n="hover:yellow-600 dark:hover:yellow-500">
         This library is heavily working in progress. Breaking changes may not follow semver. Pin the version if used.
       </NTip>
diff --git a/packages/devtools-ui-kit/src/components/NDropdown.vue b/packages/devtools-ui-kit/src/components/NDropdown.vue
index bdde19c793..d3e89959f0 100644
--- a/packages/devtools-ui-kit/src/components/NDropdown.vue
+++ b/packages/devtools-ui-kit/src/components/NDropdown.vue
@@ -22,7 +22,7 @@ onClickOutside(el, () => {
     </slot>
 
     <div
-      class="absolute n-transition n-bg-base rounded z-10 border n-border-base shadow"
+      class="absolute n-transition n-bg-base rounded border z-10 n-border-base shadow"
       :class="[enabled ? 'op-100' : 'op0 pointer-events-none -translate-y-1']"
     >
       <slot />
diff --git a/packages/devtools/client/pages/modules/storage.vue b/packages/devtools/client/pages/modules/storage.vue
index 7c32a30979..1fa05172b4 100644
--- a/packages/devtools/client/pages/modules/storage.vue
+++ b/packages/devtools/client/pages/modules/storage.vue
@@ -32,10 +32,12 @@ const { data: storageKeys, refresh: refreshStorageKeys } = await useAsyncData('s
 })
 
 const closeWatcher = nuxtApp.hook('storage:key:update' as any, async (key: string, event) => {
-  if (!currentStorage.value || key.split(':')[0] !== currentStorage.value) return
+  if (!currentStorage.value || key.split(':')[0] !== currentStorage.value)
+    return
   await refreshStorageKeys()
   if (fileKey.value === key) {
-    if (event === 'remove') return router.replace({ query: { storage: currentStorage.value } })
+    if (event === 'remove')
+      return router.replace({ query: { storage: currentStorage.value } })
     await fetchItem(fileKey.value)
   }
 })
@@ -107,7 +109,7 @@ async function renameCurrentItem() {
 <template>
   <div v-if="currentStorage" grid="~ cols-[auto_1fr]" h-full of-hidden class="virtual-files">
     <div border="r base" of-auto w="300px">
-      <div class="flex justify-betwen items-center gap-2 px-3 h-[50px]">
+      <div class="flex items-center justify-betwen gap-2 px-3 h-[50px]">
         <div class="w-full text-sm">
           <span text-gray>storage:</span>
           <select v-model="currentStorage" class="ml-2 p-1 bg-transparent">
@@ -169,7 +171,7 @@ async function renameCurrentItem() {
     </div>
   </div>
   <div v-else grid="~" class="h-full of-hidden">
-    <div class="flex flex-col gap-4 justify-center op50 text-center">
+    <div class="flex gap-4 justify-center op50 text-center flex-col">
       <p v-if="Object.keys(storageMounts as any).length">
         Select one storage to start:
       </p>
@@ -180,7 +182,7 @@ async function renameCurrentItem() {
         </nlink>
       </p>
       <div class="mx-auto">
-        <NCard v-for="(storage, name) of storageMounts" :key="name" class="border text-left p-4 mb-4 hover:border-green cursor-pointer" @click="currentStorage = name">
+        <NCard v-for="(storage, name) of storageMounts" :key="name" class="text-left p-4 cursor-pointer border mb-4 hover:border-green" @click="currentStorage = name">
           <span class="font-bold">{{ name }}</span><br>
           <span class="text-sm">{{ storage.driver }} driver</span><br>
           <span v-if="storage.base" class="text-xs font-mono">{{ storage.base }}</span>
diff --git a/packages/devtools/client/setup/client-rpc.ts b/packages/devtools/client/setup/client-rpc.ts
index 9476387701..31cb582520 100644
--- a/packages/devtools/client/setup/client-rpc.ts
+++ b/packages/devtools/client/setup/client-rpc.ts
@@ -10,6 +10,6 @@ export function setupClientRPC() {
     },
     async callHook(hook: string, ...args: any[]) {
       nuxt.hooks.callHookParallel(hook as any, ...args)
-    }
+    },
   } satisfies ClientFunctions)
 }
diff --git a/packages/devtools/src/rpc.ts b/packages/devtools/src/rpc.ts
index 18f12b76fb..9d33d3d273 100644
--- a/packages/devtools/src/rpc.ts
+++ b/packages/devtools/src/rpc.ts
@@ -54,7 +54,8 @@ export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
 
     nuxt.hook('ready', () => {
       storage!.watch((event, key) => {
-        if (shouldIgnoreStorageKey(key)) return
+        if (shouldIgnoreStorageKey(key))
+          return
         birpc.broadcast.callHook.asEvent('storage:key:update', key, event)
       })
     })

From 9348803266768e5e0aacd64660e59d67e571198b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Tue, 28 Feb 2023 19:11:58 +0100
Subject: [PATCH 12/17] small improvements

---
 packages/devtools/client/pages/modules/storage.vue | 1 +
 packages/devtools/src/rpc.ts                       | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/devtools/client/pages/modules/storage.vue b/packages/devtools/client/pages/modules/storage.vue
index 1fa05172b4..f0841f5048 100644
--- a/packages/devtools/client/pages/modules/storage.vue
+++ b/packages/devtools/client/pages/modules/storage.vue
@@ -103,6 +103,7 @@ async function renameCurrentItem() {
   const renamedKey = `${currentStorage.value}:${currentItem.value.updatedKey}`
   await rpc.setStorageItem(renamedKey, currentItem.value.updatedContent)
   await rpc.removeStorageItem(currentItem.value.key)
+  router.replace({ query: { storage: currentStorage.value, key: renamedKey } })
 }
 </script>
 
diff --git a/packages/devtools/src/rpc.ts b/packages/devtools/src/rpc.ts
index 9d33d3d273..202ad49d93 100644
--- a/packages/devtools/src/rpc.ts
+++ b/packages/devtools/src/rpc.ts
@@ -80,9 +80,14 @@ export function setupRPC(nuxt: Nuxt, _options: ModuleOptions) {
     async getStorageKeys(base?: string) {
       if (!storage)
         return []
-      const keys = await storage.getKeys(base)
+      try {
+        const keys = await storage.getKeys(base)
 
-      return keys.filter(key => !shouldIgnoreStorageKey(key))
+        return keys.filter(key => !shouldIgnoreStorageKey(key))
+      } catch (err) {
+        console.error(`Cloud not fetch storage keys for ${base}:`, err)
+        return []
+      }
     },
     async getStorageItem(key: string) {
       if (!storage)

From f348be425d21135063fa7e1e5cbc3ecc2f01a841 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtlabs.com>
Date: Tue, 28 Feb 2023 17:22:35 +0100
Subject: [PATCH 13/17] docs: update contribution guide

---
 docs/content/3.development/0.contributing.md | 21 +++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/docs/content/3.development/0.contributing.md b/docs/content/3.development/0.contributing.md
index d1c5384eab..4d84e89766 100644
--- a/docs/content/3.development/0.contributing.md
+++ b/docs/content/3.development/0.contributing.md
@@ -6,24 +6,31 @@ Hi! We're really excited that you're interested in contributing to Nuxt DevTools
 
 The Nuxt DevTools repo is a monorepo using pnpm workspaces. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/).
 
-After cloning the repo, run `pnpm i` in the root folder to install all dependencies.
+After cloning the repo, run in the root folder.
 
-> Nuxt DevTools uses pnpm v7. If you are working on multiple projects with different versions of pnpm, it's recommended to enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`.
+```sh
+pnpm i
+npm run build
+``` 
+
+::alert
+Nuxt DevTools uses pnpm v7. If you are working on multiple projects with different versions of pnpm, it's recommended to enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`.
+::
 
 ## Packages
 
 This repo contains the following packages:
 
 - `@nuxt/devtools`: The Nuxt DevTools module
-- `@nuxt/devtools-ui-kit`: The UI Kit used by Nuxt DevTools, and also for module authors to build UI for Devtools interation
+- `@nuxt/devtools-ui-kit`: The UI Kit used by Nuxt DevTools and also for module authors to build UI for Devtools interation
 
-### Development DevTools
+### DevTools
 
 Most of the scripts are forward to the root `package.json`. You can run `pnpm dev` in the root folder to start the development server (Nuxt DevTools on top of it's own client UI).
 
 Or you can `cd packages/devtools` and run `pnpm dev` to start the developement server.
 
-### Development UI Kit
+### UI Kit
 
 Normally when you are developing the Nuxt DevTools, the components in the UI Kit already get the HMR capabilities. But if you want to develop the UI Kit itself, you can run `cd packages/devtools-ui-kit` and run `pnpm dev` to start the playground for the UI Kit.
 
@@ -35,7 +42,7 @@ Change `@nuxt/devtools` to the absolute path of this module in any of your Nuxt
 allows you to try Nuxt Devtools locally directly from the source code. HMR is supported
 for the front-end client.
 
-For example, if you clone this repo to `/users/me/nuxt-devtools`, update your nuxt config:
+For example, if you clone this repo to `/users/me/nuxt-devtools`, update your `nuxt.config.ts`:
 
 ```diff
 // nuxt.config.ts
@@ -47,4 +54,4 @@ export default defineNuxtConfig({
 })
 ```
 
-One the module code, the source TypeScript file are directly used, so you don't need to run the build everytime. However, do to Node.js module caching, you need to restart your app to see the changes on the module side.
+On the module code, the source TypeScript file are directly used, so you don't need to build everytime. However, due to Node.js module caching, you need to restart your app to see the changes on the module side.

From d53889414d6fc3f1b15c3581ea5f00e382e78ddd Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 28 Feb 2023 18:21:58 +0100
Subject: [PATCH 14/17] feat: disconnect indicator

---
 packages/devtools/client/app.vue              |  1 +
 .../client/components/DisconnectIndicator.vue | 19 +++++++++++++++++++
 packages/devtools/client/composables/rpc.ts   |  1 +
 packages/devtools/client/unocss.config.ts     |  3 ++-
 4 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 packages/devtools/client/components/DisconnectIndicator.vue

diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
index 76df54d981..9f30907338 100644
--- a/packages/devtools/client/app.vue
+++ b/packages/devtools/client/app.vue
@@ -44,4 +44,5 @@ onMounted(() => {
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
+  <DisconnectIndicator />
 </template>
diff --git a/packages/devtools/client/components/DisconnectIndicator.vue b/packages/devtools/client/components/DisconnectIndicator.vue
new file mode 100644
index 0000000000..ae26772162
--- /dev/null
+++ b/packages/devtools/client/components/DisconnectIndicator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div
+    v-if="wsError || wsConnecting"
+    border="t base"
+    fixed bottom-0 left-0 right-0 p5 glass-effect z-10
+  >
+    <div v-if="wsError" flex="~ gap-2" items-center text-rose>
+      <NIcon icon="i-carbon-wifi-off" />
+      WebSocket disconnected
+    </div>
+    <div v-else-if="wsConnecting" flex="~ gap-2" items-center text-yellow animate-pulse>
+      <NIcon icon="i-carbon-circle-dash" animate-spin />
+      Connecting to the server...
+    </div>
+  </div>
+</template>
diff --git a/packages/devtools/client/composables/rpc.ts b/packages/devtools/client/composables/rpc.ts
index a72adb3581..a3b64be570 100644
--- a/packages/devtools/client/composables/rpc.ts
+++ b/packages/devtools/client/composables/rpc.ts
@@ -31,6 +31,7 @@ async function connectWS() {
   const ws = new WebSocket(wsUrl.toString())
   ws.addEventListener('message', e => onMessage(String(e.data)))
   ws.addEventListener('error', (e) => {
+    console.error(e)
     wsError.value = e
   })
   ws.addEventListener('close', () => {
diff --git a/packages/devtools/client/unocss.config.ts b/packages/devtools/client/unocss.config.ts
index 05ddcbf04b..4d5c6e6d3c 100644
--- a/packages/devtools/client/unocss.config.ts
+++ b/packages/devtools/client/unocss.config.ts
@@ -8,7 +8,8 @@ export default defineConfig({
       'bg-base': 'n-bg-base',
       'bg-active': 'n-bg-active',
       'border-base': 'n-border-base',
-      'navbar-glass': 'sticky z-10 top-0 backdrop-blur bg-white/70 dark:bg-[#151515]/70',
+      'glass-effect': 'backdrop-blur-6 bg-white/70 dark:bg-[#151515]/70',
+      'navbar-glass': 'sticky z-10 top-0 glass-effect',
 
       'n-icon-btn': 'aspect-1/1 w-1.6em h-1.6em flex items-center justify-center rounded op50 hover:op100 hover:bg-active',
 

From 8e91013c47ba4600ec56a5d1b51c34bdbf81366e Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 28 Feb 2023 19:19:18 +0100
Subject: [PATCH 15/17] chore: lint

---
 packages/devtools/client/components/DisconnectIndicator.vue | 2 +-
 packages/devtools/client/components/IframeView.vue          | 1 -
 packages/devtools/client/composables/state.ts               | 4 ----
 3 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/devtools/client/components/DisconnectIndicator.vue b/packages/devtools/client/components/DisconnectIndicator.vue
index ae26772162..23a266104d 100644
--- a/packages/devtools/client/components/DisconnectIndicator.vue
+++ b/packages/devtools/client/components/DisconnectIndicator.vue
@@ -5,7 +5,7 @@
   <div
     v-if="wsError || wsConnecting"
     border="t base"
-    fixed bottom-0 left-0 right-0 p5 glass-effect z-10
+    bottom-0 left-0 right-0 fixed p5 glass-effect z-10
   >
     <div v-if="wsError" flex="~ gap-2" items-center text-rose>
       <NIcon icon="i-carbon-wifi-off" />
diff --git a/packages/devtools/client/components/IframeView.vue b/packages/devtools/client/components/IframeView.vue
index a830b7d904..c94f17cac9 100644
--- a/packages/devtools/client/components/IframeView.vue
+++ b/packages/devtools/client/components/IframeView.vue
@@ -10,7 +10,6 @@ const props = defineProps<{
   tab: ModuleCustomTab
 }>()
 
-const client = useClient()
 const colorMode = useColorMode()
 const anchor = ref<HTMLDivElement>()
 const key = computed(() => props.tab.name)
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index 3b5e90510b..787f3b61de 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -133,7 +133,3 @@ export function useAllRoutes() {
       })
   })
 }
-
-function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}

From 9af52e4654cb1543ed7ab82a32055b2b0693de0f Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 28 Feb 2023 19:53:50 +0100
Subject: [PATCH 16/17] chore: styling

---
 packages/devtools/client/app.vue              |  2 +
 .../devtools/client/components/DrawerItem.vue |  6 +-
 .../client/components/StateEditor.vue         | 22 -------
 packages/devtools/client/nuxt.config.ts       |  3 -
 .../devtools/client/pages/modules/storage.vue | 58 +++++++++++--------
 packages/devtools/client/styles/global.css    | 20 +++++++
 packages/devtools/client/unocss.config.ts     |  2 +
 7 files changed, 59 insertions(+), 54 deletions(-)

diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
index 9f30907338..0fb18ffc00 100644
--- a/packages/devtools/client/app.vue
+++ b/packages/devtools/client/app.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import 'floating-vue/dist/style.css'
+import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
+import 'splitpanes/dist/splitpanes.css'
 import './styles/global.css'
 import { setupClientRPC } from './setup/client-rpc'
 
diff --git a/packages/devtools/client/components/DrawerItem.vue b/packages/devtools/client/components/DrawerItem.vue
index ab4d435648..f27055d633 100644
--- a/packages/devtools/client/components/DrawerItem.vue
+++ b/packages/devtools/client/components/DrawerItem.vue
@@ -18,12 +18,10 @@ const isEnabled = computed(() => {
   <NuxtLink
     v-if="isEnabled"
     :to="'path' in tab ? tab.path : `/modules/custom-${tab.name}`"
-    flex="~" p2
-    items-center justify-center
-    text-true-gray
+    flex="~" p2 items-center justify-center text-secondary
     border="base"
     lg="border-b px3 py1.5 justify-start"
-    hover:bg-active
+    hover="bg-active"
     select-none
     exact-active-class="!text-primary"
   >
diff --git a/packages/devtools/client/components/StateEditor.vue b/packages/devtools/client/components/StateEditor.vue
index a41fccf4ac..f2dde00d34 100644
--- a/packages/devtools/client/components/StateEditor.vue
+++ b/packages/devtools/client/components/StateEditor.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import JsonEditorVue from 'json-editor-vue'
-import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
 
 const props = defineProps<{
   name?: string
@@ -94,24 +93,3 @@ async function refresh() {
     </template>
   </div>
 </template>
-
-<style scoped>
-.json-editor-vue {
-  --jse-theme-color: #383e42 !important;
-  --jse-theme-color-highlight: #687177 !important;
-  --jse-background-color: #8881 !important;
-}
-
-.json-editor-vue .no-main-menu {
-  border: none !important;
-}
-
-.json-editor-vue .jse-main {
-  min-height: 1em !important;
-}
-
-.json-editor-vue .jse-contents {
-  border-width: 0 !important;
-  border-radius: 5px !important;
-}
-</style>
diff --git a/packages/devtools/client/nuxt.config.ts b/packages/devtools/client/nuxt.config.ts
index 82e0e92a1a..9dd766d16b 100644
--- a/packages/devtools/client/nuxt.config.ts
+++ b/packages/devtools/client/nuxt.config.ts
@@ -23,9 +23,6 @@ export default defineNuxtConfig({
       },
     },
   },
-  css: [
-    'splitpanes/dist/splitpanes.css',
-  ],
   appConfig: {
     fixture2: 'from nuxt.config.ts',
   },
diff --git a/packages/devtools/client/pages/modules/storage.vue b/packages/devtools/client/pages/modules/storage.vue
index f0841f5048..c0f9f2e55e 100644
--- a/packages/devtools/client/pages/modules/storage.vue
+++ b/packages/devtools/client/pages/modules/storage.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import JsonEditorVue from 'json-editor-vue'
-import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
 
 definePageMeta({
   icon: 'carbon-data-base',
@@ -27,11 +26,10 @@ const { data: storageMounts } = await useAsyncData('storageMounts', () => rpc.ge
 const { data: storageKeys, refresh: refreshStorageKeys } = await useAsyncData('storageKeys', async () => {
   if (currentStorage.value)
     return await rpc.getStorageKeys(currentStorage.value)
-
   return []
 })
 
-const closeWatcher = nuxtApp.hook('storage:key:update' as any, async (key: string, event) => {
+const closeWatcher = nuxtApp.hook('storage:key:update' as any, async (key: string, event: any) => {
   if (!currentStorage.value || key.split(':')[0] !== currentStorage.value)
     return
   await refreshStorageKeys()
@@ -41,6 +39,7 @@ const closeWatcher = nuxtApp.hook('storage:key:update' as any, async (key: strin
     await fetchItem(fileKey.value)
   }
 })
+
 onUnmounted(closeWatcher)
 
 watch(currentStorage, refreshStorageKeys)
@@ -53,6 +52,14 @@ watchEffect(async () => {
   fetchItem(fileKey.value)
 })
 
+// Save on Ctrl/Cmd + S
+useEventListener('keydown', (e) => {
+  if (e.key === 's' && (e.ctrlKey || e.metaKey)) {
+    saveCurrentItem()
+    e.preventDefault()
+  }
+})
+
 function keyName(key: string) {
   return key.replace(`${currentStorage.value}:`, '')
 }
@@ -85,18 +92,21 @@ async function saveNewItem() {
   router.replace({ query: { storage: currentStorage.value, key } })
   newKey.value = ''
 }
+
 async function saveCurrentItem() {
   if (!currentItem.value)
     return
   await rpc.setStorageItem(currentItem.value.key, currentItem.value.updatedContent)
   await fetchItem(currentItem.value.key)
 }
+
 async function removeCurrentItem() {
   if (!currentItem.value || !currentStorage.value)
     return
   await rpc.removeStorageItem(currentItem.value.key)
   currentItem.value = null
 }
+
 async function renameCurrentItem() {
   if (!currentItem.value || !currentStorage.value)
     return
@@ -110,7 +120,7 @@ async function renameCurrentItem() {
 <template>
   <div v-if="currentStorage" grid="~ cols-[auto_1fr]" h-full of-hidden class="virtual-files">
     <div border="r base" of-auto w="300px">
-      <div class="flex items-center justify-betwen gap-2 px-3 h-[50px]">
+      <div class="flex items-center justify-between gap-2 px-3 h-[48px]">
         <div class="w-full text-sm">
           <span text-gray>storage:</span>
           <select v-model="currentStorage" class="ml-2 p-1 bg-transparent">
@@ -126,13 +136,15 @@ async function renameCurrentItem() {
         icon="carbon-search"
         placeholder="Search..."
         n="primary sm"
-        class="w-full rounded-0 border-x-none outline-none"
+        border="y x-none base!"
+        class="w-full rounded-0 py2 ring-0!"
       />
       <NuxtLink
         v-for="key of filteredKeys" :key="key"
         border="b base" px2 py1 text-sm font-mono block truncate
         :to="{ query: { key, storage: currentStorage } }"
-        :class="key === currentItem?.key ? 'bg-truegray:20 text-base' : 'text-truegray'"
+        hover:bg-active
+        :class="key === currentItem?.key ? 'bg-active text-primary font-bold' : 'text-secondary'"
       >
         {{ keyName(key) }}
       </NuxtLink>
@@ -146,7 +158,7 @@ async function renameCurrentItem() {
       />
     </div>
     <div v-if="currentItem?.key" h-full of-hidden flex="~ col">
-      <div border="b base" class="text-sm op75 flex items-center h-[50px] px-4 justify-between">
+      <div border="b base" class="text-sm flex items-center px-4 justify-between flex-none h-[49px]">
         <div class="flex items-center gap-4">
           <NTextInput v-if="currentItem.editingKey" v-model="currentItem.updatedKey" @keyup.enter="renameCurrentItem" />
           <code v-else>{{ keyName(currentItem.key) }} <NIcon icon="carbon-edit" class="op50 hover:op100 cursor-pointer" @click="currentItem.editingKey = true" /></code>
@@ -160,8 +172,19 @@ async function renameCurrentItem() {
           </NButton>
         </div>
       </div>
-      <JsonEditorVue v-if="typeof currentItem.content === 'object'" v-model="currentItem.updatedContent" :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']" class="json-editor-vue of-auto h-full text-sm outline-none" v-bind="$attrs" mode="text" :navigation-bar="false" :indentation="2" :tab-size="2" />
-      <textarea v-else v-model="currentItem.updatedContent" placeholder="Item value..." class="of-auto h-full text-sm outline-none p-4" @keyup.ctrl.enter="saveCurrentItem" />
+      <JsonEditorVue
+        v-if="typeof currentItem.content === 'object'"
+        v-model="currentItem.updatedContent"
+        :class="[$colorMode.value === 'dark' ? 'jse-theme-dark' : 'light']"
+        class="json-editor-vue of-auto h-full text-sm outline-none"
+        v-bind="$attrs" mode="text" :navigation-bar="false" :indentation="2" :tab-size="2"
+      />
+      <textarea
+        v-else v-model="currentItem.updatedContent"
+        placeholder="Item value..."
+        class="of-auto h-full text-sm outline-none p-4 font-mono"
+        @keyup.ctrl.enter="saveCurrentItem"
+      />
     </div>
     <div v-else flex items-center justify-center op50 text-center>
       <p>
@@ -180,7 +203,7 @@ async function renameCurrentItem() {
         No custom storage defined in <code>nitro.storage</code>.<br>
         Learn more about <NLink href="https://nitro.unjs.io/guide/introduction/storage" n="orange" target="_blank">
           Nitro storage
-        </nlink>
+        </NLink>
       </p>
       <div class="mx-auto">
         <NCard v-for="(storage, name) of storageMounts" :key="name" class="text-left p-4 cursor-pointer border mb-4 hover:border-green" @click="currentStorage = name">
@@ -192,18 +215,3 @@ async function renameCurrentItem() {
     </div>
   </div>
 </template>
-
-<style scoped>
-.json-editor-vue.light {
-  --jse-theme-color: #ebebeb !important;
-  --jse-theme-color-highlight: #bbb !important;
-  --jse-background-color: #8881 !important;
-  --jse-menu-color: #333 !important;
-}
-.json-editor-vue.jse-theme-dark {
-  --jse-theme-color: #1d1d1d !important;
-  --jse-theme-color-highlight: #333 !important;
-  --jse-background-color: #8881 !important;
-  --jse-menu-color: #aaa !important;
-}
-</style>
diff --git a/packages/devtools/client/styles/global.css b/packages/devtools/client/styles/global.css
index 525c373d3c..ee176d1d01 100644
--- a/packages/devtools/client/styles/global.css
+++ b/packages/devtools/client/styles/global.css
@@ -62,3 +62,23 @@ html.dark {
 }
 .splitpanes--vertical > .splitpanes__splitter:before {left: -4px;right: -4px;height: 100%;}
 .splitpanes--horizontal > .splitpanes__splitter:before {top: -4px;bottom: -4px;width: 100%;}
+
+/* JSON Editor */
+textarea {
+  background: #8881
+}
+.json-editor-vue {
+  --jse-theme-color: #8886 !important;
+  --jse-theme-color-highlight: #8889 !important;
+  --jse-background-color: #8881 !important;
+}
+.json-editor-vue .no-main-menu {
+  border: none !important;
+}
+.json-editor-vue .jse-main {
+  min-height: 1em !important;
+}
+.json-editor-vue .jse-contents {
+  border-width: 0 !important;
+  border-radius: 5px !important;
+}
diff --git a/packages/devtools/client/unocss.config.ts b/packages/devtools/client/unocss.config.ts
index 4d5c6e6d3c..fc7ee7e961 100644
--- a/packages/devtools/client/unocss.config.ts
+++ b/packages/devtools/client/unocss.config.ts
@@ -11,6 +11,8 @@ export default defineConfig({
       'glass-effect': 'backdrop-blur-6 bg-white/70 dark:bg-[#151515]/70',
       'navbar-glass': 'sticky z-10 top-0 glass-effect',
 
+      'text-secondary': 'color-black/50 dark:color-white/50',
+
       'n-icon-btn': 'aspect-1/1 w-1.6em h-1.6em flex items-center justify-center rounded op50 hover:op100 hover:bg-active',
 
       // Reusable

From 9c406ce43aaf234d964619f765a1b6125d3917aa Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 28 Feb 2023 20:01:09 +0100
Subject: [PATCH 17/17] chore: styling

---
 .../devtools/client/pages/modules/storage.vue  | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/devtools/client/pages/modules/storage.vue b/packages/devtools/client/pages/modules/storage.vue
index c0f9f2e55e..f277d19626 100644
--- a/packages/devtools/client/pages/modules/storage.vue
+++ b/packages/devtools/client/pages/modules/storage.vue
@@ -120,24 +120,25 @@ async function renameCurrentItem() {
 <template>
   <div v-if="currentStorage" grid="~ cols-[auto_1fr]" h-full of-hidden class="virtual-files">
     <div border="r base" of-auto w="300px">
-      <div class="flex items-center justify-between gap-2 px-3 h-[48px]">
+      <div class="flex items-center justify-between px-3 h-[48px] gap1">
+        <button n-icon-btn ml--1 @click="currentStorage = ''">
+          <div i-carbon-chevron-left />
+        </button>
         <div class="w-full text-sm">
-          <span text-gray>storage:</span>
-          <select v-model="currentStorage" class="ml-2 p-1 bg-transparent">
+          <NSelect v-model="currentStorage" n="primary" icon="carbon-data-base">
             <option v-for="(_storage, name) of storageMounts" :key="name" :value="name">
               {{ name }}
             </option>
-          </select>
+          </NSelect>
         </div>
-        <NIcon icon="carbon-close" class="op50 hover:op100 cursor-pointer" @click="currentStorage = ''" />
       </div>
       <NTextInput
         v-model="searchString"
         icon="carbon-search"
         placeholder="Search..."
         n="primary sm"
-        border="y x-none base!"
-        class="w-full rounded-0 py2 ring-0!"
+        border="y x-none base! rounded-0"
+        class="w-full py2 ring-0!"
       />
       <NuxtLink
         v-for="key of filteredKeys" :key="key"
@@ -153,7 +154,8 @@ async function renameCurrentItem() {
         icon="carbon-add"
         placeholder="key"
         n="sm"
-        class="w-full outline-none border-0 border-b rounded-none"
+        border="t-none x-none base! rounded-0"
+        class="w-full py2 ring-0!"
         @keyup.enter="saveNewItem"
       />
     </div>