docs: save devmode feature locally

Author: johnleider

apps/docs/src/components/app/AppBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   // Components
-  import { Atom, useFeatures, usePermissions, useTheme } from '@vuetify/v0'
+  import { Atom, useFeatures, usePermissions, useTheme, useStorage } from '@vuetify/v0'
 
   // Composables
   import { useAppStore } from '@/stores/app'
@@ -15,6 +15,7 @@
   const { as = 'header' } = defineProps<AtomProps>()
 
   const app = useAppStore()
+  const storage = useStorage()
 
   let auth: ReturnType<typeof useAuthStore> | null = null
   if (!import.meta.env.SSR) {
@@ -35,9 +36,11 @@
   }
 
   watch(() => theme.selectedId.value, id => {
-    if (!id) return
+    storage.set('theme', id)
+  })
 
-    localStorage.setItem('v0:theme', JSON.stringify(id))
+  watch(() => devmode.isSelected.value, isSelected => {
+    storage.set('devmode', isSelected)
   })
 
   const themeIcon = computed(() => theme.isDark.value ? 'theme-light' : 'theme-dark')

apps/docs/src/plugins/zero.ts

@@ -17,7 +17,7 @@ export default function zero (app: App) {
     createFeaturesPlugin({
       features: {
         devmode: {
-          $value: false,
+          $value: IN_BROWSER ? localStorage.getItem('v0:devmode') === 'true' : false,
           $description: 'Enables development mode with additional logging and warnings',
         },
       },