fix: layout loading settings

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

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,
   };
 });