fix: layout loading settings

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

core/src/private.ts

@@ -9,6 +9,7 @@ import { useTenantStore } from '@KTXC/stores/tenantStore'
 import { useUserStore } from '@KTXC/stores/userStore'
 import { useL10nStore } from '@KTXC/stores/l10nStore'
 import { useThemeStore } from '@KTXC/stores/themeStore'
+import { useLayoutStore } from '@KTXC/stores/layoutStore'
 import { i18n } from '@KTXC/l10n/runtime'
 import { fetchWrapper } from '@KTXC/utils/helpers/fetch-wrapper'
 import { FetchError } from '@KTXC/utils/helpers/fetch-wrapper-core'
@@ -43,12 +44,14 @@ globalWindow.Pinia = PiniaLib as unknown
 	const userStore = useUserStore();
 	const l10nStore = useL10nStore();
 	const themeStore = useThemeStore();
+	const layoutStore = useLayoutStore();
 
 	try {
 		const payload = await fetchWrapper.get('/init');
 		moduleStore.init(payload?.modules ?? {});
 		tenantStore.init(payload?.tenant ?? null);
 		userStore.init(payload?.user ?? {});
+		layoutStore.hydrateFromSettings();
 		themeStore.boot();
 
 		// Resolve locale and load catalogs before modules boot

core/src/stores/layoutStore.ts

@@ -13,29 +13,59 @@ export const useLayoutStore = defineStore('layout', () => {
   // Sidebar state - initialize from settings or defaults
   const userStore = useUserStore();
   const tenantStore = useTenantStore();
-  const sidebarDrawer = ref(userStore.getSetting('sidebar_drawer') ?? true);
-  const miniSidebar = ref(userStore.getSetting('mini_sidebar') ?? false);
+
+  function booleanSetting(key: string, fallback: boolean): boolean {
+    const value = userStore.getSetting(key);
+    return typeof value === 'boolean' ? value : fallback;
+  }
+
+  function themeSetting(value: unknown): ThemeMode | null {
+    return value === 'light' || value === 'dark' || value === 'system' ? value : null;
+  }
+
+  function initialTheme(): ThemeMode {
+    return (
+      themeSetting(userStore.getSetting('theme')) ??
+      themeSetting(tenantStore.getSetting('theme_default_mode')) ??
+      'light'
+    );
+  }
+
+  const sidebarDrawer = ref<boolean>(booleanSetting('sidebar_drawer', true));
+  const miniSidebar = ref<boolean>(booleanSetting('mini_sidebar', false));
   const menuMode = ref<MenuMode>('apps');
 
   // Theme mode - user choice, falling back to the tenant default
-  const theme = ref<ThemeMode>(
-    (userStore.getSetting('theme') as ThemeMode | null) ??
-    (tenantStore.getSetting('theme_default_mode') as ThemeMode | null) ??
-    'light'
-  );
+  const theme = ref<ThemeMode>(initialTheme());
+
+  let hydratingFromSettings = false;
 
   // Watch and sync sidebar state to settings
   watch(sidebarDrawer, (value) => {
+    if (hydratingFromSettings) return;
     userStore.setSetting('sidebar_drawer', value);
-  });
+  }, { flush: 'sync' });
 
   watch(miniSidebar, (value) => {
+    if (hydratingFromSettings) return;
     userStore.setSetting('mini_sidebar', value);
-  });
+  }, { flush: 'sync' });
 
   watch(theme, (value) => {
+    if (hydratingFromSettings) return;
     userStore.setSetting('theme', value);
-  });
+  }, { flush: 'sync' });
+
+  function hydrateFromSettings() {
+    hydratingFromSettings = true;
+    try {
+      sidebarDrawer.value = booleanSetting('sidebar_drawer', true);
+      miniSidebar.value = booleanSetting('mini_sidebar', false);
+      theme.value = initialTheme();
+    } finally {
+      hydratingFromSettings = false;
+    }
+  }
 
   // Actions
   function toggleSidebarDrawer() {
@@ -75,6 +105,7 @@ export const useLayoutStore = defineStore('layout', () => {
     setMiniSidebar,
     setMenuMode,
     toggleMenuMode,
-    setTheme
+    setTheme,
+    hydrateFromSettings,
   };
 });