refactor(app): consolidate theme and sidebar settings into appSettings

- Replace useCustomize with useAppSettings for unified configuration management
- Add AppSettings type definition and move sidebar config under appSettings
- Update components to use new appSettings structure
- Add .nvmrc and .npmrc for consistent environment setup

Author: dianprata

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

.nvmrc

@@ -0,0 +1 @@
+22.20.0

README.md

@@ -10,11 +10,30 @@
 ## Quick Start
 
 ```bash [Terminal]
-npx degit dianprata/nuxt-shadcn-dashboard my-dashboard-app
+npx nuxi@latest init -t github:dianprata/nuxt-shadcn-dashboard my-dashboard-app
 cd my-dashboard-app
 pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
 ```
 
+## App Settings
+You can change the app settings in `app.config.ts` file.
+If you want to change app settings, you have to clear cookie 'app_settings' first.
+```json [app.config.ts]
+export default defineAppConfig({
+  appSettings: {
+    sidebar: {
+      collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
+      side: 'left', // 'left' | 'right'
+      variant: 'inset', // 'sidebar' | 'floating' | 'inset'
+    },
+    theme: {
+      color: 'default', // 'default' | 'blue' | 'green' | 'orange' | 'purple' | 'red' | 'teal' | 'yellow' | 'rose'
+      type: 'scaled', // 'default' | 'mono' | 'scaled'
+    }
+  },
+})
+```
+
 ## Contributing
 
 1. Clone this repository.

app/app.config.ts

@@ -3,9 +3,11 @@ export default defineAppConfig({
     size: '', // default <Icon> size applied
     class: '', // default <Icon> class applied
   },
-  sidebar: {
-    collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
-    side: 'left', // 'left' | 'right'
-    variant: 'sidebar', // 'sidebar' | 'floating' | 'inset'
+  appSettings: {
+    sidebar: {
+      collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
+      side: 'left', // 'left' | 'right'
+      variant: 'inset', // 'sidebar' | 'floating' | 'inset'
+    }
   },
 })

app/app.vue

@@ -5,7 +5,7 @@ import 'vue-sonner/style.css'
 
 const colorMode = useColorMode()
 const color = computed(() => colorMode.value === 'dark' ? '#09090b' : '#ffffff')
-const { color: activeColor, type } = useCustomize()
+const { theme } = useAppSettings()
 
 useHead({
   meta: [
@@ -20,7 +20,7 @@ useHead({
     lang: 'en',
   },
   bodyAttrs: {
-    class: computed(() => `color-${activeColor.value} theme-${type.value}`),
+    class: computed(() => `color-${theme.value?.color || 'default'} theme-${theme.value?.type || 'default'}`),
   },
 })
 

app/components/AppSettings.vue

@@ -4,13 +4,13 @@ const isDesktop = useMediaQuery('(min-width: 768px)')
 
 const isOpen = ref(false)
 
-const { sidebar } = useAppSettings()
+const { sidebar, updateAppSettings } = useAppSettings()
 
 const direction = useTextDirection()
 
 function handleChangeDirection(dir: 'ltr' | 'rtl') {
   direction.value = dir
-  sidebar.value.side = dir === 'rtl' ? 'right' : 'left'
+  updateAppSettings({ sidebar: { side: dir === 'rtl' ? 'right' : 'left' } })
 }
 </script>
 
@@ -24,22 +24,22 @@ function handleChangeDirection(dir: 'ltr' | 'rtl') {
           <div class="grid grid-cols-3 gap-2">
             <Button
               variant="outline"
-              :class="{ '!border-primary border-2 !bg-primary/10': sidebar.variant === 'sidebar' }"
-              @click="sidebar.variant = 'sidebar'"
+              :class="{ '!border-primary border-2 !bg-primary/10': sidebar?.variant === 'sidebar' }"
+              @click="updateAppSettings({ sidebar: { variant: 'sidebar' } })"
             >
               Sidebar
             </Button>
             <Button
               variant="outline"
-              :class="{ '!border-primary border-2 !bg-primary/10': sidebar.variant === 'floating' }"
-              @click="sidebar.variant = 'floating'"
+              :class="{ '!border-primary border-2 !bg-primary/10': sidebar?.variant === 'floating' }"
+              @click="updateAppSettings({ sidebar: { variant: 'floating' } })"
             >
               Floating
             </Button>
             <Button
               variant="outline"
-              :class="{ '!border-primary border-2 !bg-primary/10': sidebar.variant === 'inset' }"
-              @click="sidebar.variant = 'inset'"
+              :class="{ '!border-primary border-2 !bg-primary/10': sidebar?.variant === 'inset' }"
+              @click="updateAppSettings({ sidebar: { variant: 'inset' } })"
             >
               Inset
             </Button>

app/components/ThemeCustomize.vue

@@ -2,31 +2,31 @@
 import type { ThemeColor, ThemeType } from '@/constants/themes'
 import { THEME_COLORS, THEME_TYPE } from '@/constants/themes'
 
-const { color, setColor, type, setThemeType } = useCustomize()
+const { theme, updateAppSettings } = useAppSettings()
 
 const allColors: ThemeColor[] = THEME_COLORS.map(color => color.name)
 const allTypes: ThemeType[] = THEME_TYPE
 
-watch(color, () => {
+watch(() => theme.value?.color, () => {
   setClassColor()
 })
 
 function setClassColor() {
   document.body.classList.remove(
     ...allColors.map(color => `color-${color}`),
   )
-  document.body.classList.add(`color-${color.value}`)
+  document.body.classList.add(`color-${theme.value?.color || 'default'}`)
 }
 
-watch(type, () => {
+watch(() => theme.value?.type, () => {
   setClassType()
 })
 
 function setClassType() {
   document.body.classList.remove(
     ...allTypes.map(type => `theme-${type}`),
   )
-  document.body.classList.add(`theme-${type.value}`)
+  document.body.classList.add(`theme-${theme.value?.type || 'default'}`)
 }
 
 function backgroundColor(color: ThemeColor) {
@@ -46,11 +46,11 @@ const colorMode = useColorMode()
           <Button
             class="justify-start gap-2"
             variant="outline"
-            :class="{ '!border-primary border-2 !bg-primary/10': color === col }"
-            @click="setColor(col)"
+            :class="{ '!border-primary border-2 !bg-primary/10': theme?.color === col }"
+            @click="updateAppSettings({ theme: { color: col } })"
           >
             <span class="h-5 w-5 flex items-center justify-center rounded-full border border-white" :style="{ backgroundColor: backgroundColor(col) }">
-              <Icon v-if="col === color" name="i-radix-icons-check" size="16" class="text-white" />
+              <Icon v-if="col === theme?.color" name="i-radix-icons-check" size="16" class="text-white" />
             </span>
             <span class="text-xs capitalize">{{ col }}</span>
           </Button>
@@ -64,8 +64,8 @@ const colorMode = useColorMode()
           <Button
             class="justify-center gap-2"
             variant="outline"
-            :class="{ '!border-primary border-2 !bg-primary/10': themeType === type }"
-            @click="setThemeType(themeType)"
+            :class="{ '!border-primary border-2 !bg-primary/10': theme?.type === themeType }"
+            @click="updateAppSettings({ theme: { type: themeType } })"
           >
             <span class="text-xs capitalize">{{ themeType }}</span>
           </Button>

app/components/layout/AppSidebar.vue

@@ -45,7 +45,7 @@ const { sidebar } = useAppSettings()
 </script>
 
 <template>
-  <Sidebar :collapsible="sidebar.collapsible" :side="sidebar.side" :variant="sidebar.variant">
+  <Sidebar :collapsible="sidebar?.collapsible" :side="sidebar?.side" :variant="sidebar?.variant">
     <SidebarHeader>
       <LayoutSidebarNavHeader :teams="teams" />
       <Search />

app/composables/useAppSettings.ts

@@ -1,17 +1,42 @@
-import type { AppConfigInput } from 'nuxt/schema'
+import type { AppSettings } from '~/types/appSettings'
+
+import { createDefu } from 'defu';
+
+const customDefu = createDefu((obj, key, value) => {
+  if (Array.isArray(value) && value.every((x: any) => typeof x === 'string')) {
+    obj[key] = value;
+    return true;
+  }
+});
+
+const defaultAppSettings: AppSettings = {
+  sidebar: {
+    collapsible: 'offcanvas',
+    side: 'left',
+    variant: 'sidebar',
+  },
+  theme: {
+    color: 'default',
+    type: 'default',
+  }
+}
 
 export function useAppSettings() {
-  const { sidebar: _sidebar } = useAppConfig()
-
-  const sidebar = useCookie('app-settings', {
-    default: () => ({
-      collapsible: _sidebar.collapsible,
-      side: _sidebar.side,
-      variant: _sidebar.variant,
-    }) as AppConfigInput['sidebar'],
+  const { appSettings } = useAppConfig()
+
+  const processedConfig = customDefu(appSettings, defaultAppSettings);
+
+  const cookieAppSettings = useCookie<AppSettings>('app_settings', {
+    default: () => processedConfig,
   })
 
+  const updateAppSettings = (settings: AppSettings) => {
+    cookieAppSettings.value = customDefu(settings, cookieAppSettings.value)
+  }
+
   return {
-    sidebar,
+    updateAppSettings,
+    sidebar: computed(() => cookieAppSettings.value.sidebar),
+    theme: computed(() => cookieAppSettings.value.theme),
   }
 }