refactor: update website configuration structure to use 'ui' instead of 'metadata' for theme and mode settings

src/app/[locale]/providers.tsx

@@ -29,7 +29,7 @@ interface ProvidersProps {
  */
 export function Providers({ children, locale }: ProvidersProps) {
   const theme = useTheme();
-  const defaultMode = websiteConfig.metadata.mode?.defaultMode ?? 'system';
+  const defaultMode = websiteConfig.ui.mode?.defaultMode ?? 'system';
 
   // available languages that will be displayed in the docs UI
   // make sure `locale` is consistent with your i18n config

src/components/dashboard/sidebar-user.tsx

@@ -71,7 +71,7 @@ export function SidebarUser({ user, className }: SidebarUserProps) {
     });
   };
 
-  const showModeSwitch = websiteConfig.metadata.mode?.enableSwitch ?? false;
+  const showModeSwitch = websiteConfig.ui.mode?.enableSwitch ?? false;
   const showLocaleSwitch = LOCALES.length > 1;
 
   const handleSignOut = async () => {

src/components/layout/active-theme-provider.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react';
 
 const COOKIE_NAME = 'active_theme';
-const DEFAULT_THEME = websiteConfig.metadata.theme?.defaultTheme ?? 'default';
+const DEFAULT_THEME = websiteConfig.ui.theme?.defaultTheme ?? 'default';
 
 function setThemeCookie(theme: string) {
   if (typeof window === 'undefined') return;

src/components/layout/mode-switcher-horizontal.tsx

@@ -12,7 +12,7 @@ import { useEffect, useState } from 'react';
  * Mode switcher component, used in the footer
  */
 export function ModeSwitcherHorizontal() {
-  if (!websiteConfig.metadata.mode?.enableSwitch) {
+  if (!websiteConfig.ui.mode?.enableSwitch) {
     return null;
   }
 

src/components/layout/mode-switcher.tsx

@@ -16,7 +16,7 @@ import { useTheme } from 'next-themes';
  * Mode switcher component, used in the navbar
  */
 export function ModeSwitcher() {
-  if (!websiteConfig.metadata.mode?.enableSwitch) {
+  if (!websiteConfig.ui.mode?.enableSwitch) {
     return null;
   }
 

src/components/layout/theme-selector.tsx

@@ -21,7 +21,7 @@ import { useThemeConfig } from './active-theme-provider';
  * https://github.com/TheOrcDev/orcish-dashboard/blob/main/components/theme-selector.tsx
  */
 export function ThemeSelector() {
-  if (!websiteConfig.metadata.theme?.enableSwitch) {
+  if (!websiteConfig.ui.theme?.enableSwitch) {
     return null;
   }
 

src/config/website.tsx

@@ -8,7 +8,7 @@ import type { WebsiteConfig } from '@/types';
  * https://mksaas.com/docs/config/website
  */
 export const websiteConfig: WebsiteConfig = {
-  metadata: {
+  ui: {
     theme: {
       defaultTheme: 'default',
       enableSwitch: true,
@@ -17,6 +17,8 @@ export const websiteConfig: WebsiteConfig = {
       defaultMode: 'dark',
       enableSwitch: true,
     },
+  },
+  metadata: {
     images: {
       ogImage: '/og.png',
       logoLight: '/logo.png',

src/types/index.d.ts

@@ -6,6 +6,7 @@ import type { CreditPackage } from '@/credits/types';
  * website config, without translations
  */
 export type WebsiteConfig = {
+  ui: UiConfig;
   metadata: MetadataConfig;
   features: FeaturesConfig;
   routes: RoutesConfig;
@@ -22,12 +23,18 @@ export type WebsiteConfig = {
   credits: CreditsConfig;
 };
 
+/**
+ * UI configuration
+ */
+export interface UiConfig {
+  mode?: ModeConfig;
+  theme?: ThemeConfig;
+}
+
 /**
  * Website metadata
  */
 export interface MetadataConfig {
-  mode?: ModeConfig;
-  theme?: ThemeConfig;
   images?: ImagesConfig;
   social?: SocialConfig;
 }