feat(assets): options storage (#379)

packages/devtools-kit/src/_types/options.ts

@@ -159,4 +159,7 @@ export interface NuxtDevToolsOptions {
     view: 'tree' | 'list'
     inputDefaults: Record<string, ServerRouteInput[]>
   }
+  assets: {
+    view: 'grid' | 'list'
+  }
 }

packages/devtools/client/composables/storage-options.ts

@@ -1,18 +1,27 @@
 import { toRefs, watchDebounced } from '@vueuse/core'
 
+// Assets
+const assetsOptions = ref(await rpc.getOptions('assets'))
+const assets = toRefs(assetsOptions)
+
+watchDebounced(assetsOptions, async (options) => {
+  rpc.updateOptions('assets', options)
+}, { deep: true, flush: 'post', debounce: 500, maxWait: 1000 })
+
 // Server Routes
 const serverRouteOptions = ref(await rpc.getOptions('serverRoutes'))
 const serverRoutes = toRefs(serverRouteOptions)
 
+watchDebounced(serverRouteOptions, async (options) => {
+  rpc.updateOptions('serverRoutes', options)
+}, { deep: true, flush: 'post', debounce: 500, maxWait: 1000 })
+
+// Options List
 const list = {
   serverRoutes,
+  assets,
 }
 
 export function useDevToolsOptions<T extends keyof typeof list>(tab: T) {
   return list[tab]
 }
-
-// Server Routes
-watchDebounced(serverRouteOptions, async (options) => {
-  rpc.updateOptions('serverRoutes', options)
-}, { deep: true, flush: 'post', debounce: 500, maxWait: 1000 })

packages/devtools/client/pages/modules/assets.vue

@@ -64,7 +64,7 @@ const byTree = computed(() => {
 
 const selected = ref<AssetInfo>()
 
-const view = ref<'list' | 'grid'>('grid')
+const { view } = useDevToolsOptions('assets')
 
 function toggleView() {
   view.value = view.value === 'list' ? 'grid' : 'list'

packages/devtools/src/constant.ts

@@ -46,4 +46,7 @@ export const defaultTabOptions: NuxtDevToolsOptions = {
       headers: [],
     },
   },
+  assets: {
+    view: 'grid',
+  },
 }