fix: unify theme system - fix theme switching persistence

- Unified localStorage key to 'theme-preference' across all components
- Fixed header.tsx using wrong localStorage key ('theme' instead of 'theme-preference')
- Added localStorage hybrid persistence for instant theme changes
- Removed router.refresh() which was causing stale data revert
- Replaced Blue theme with Sepia
- Consolidated auth() calls to prevent race conditions
- Updated UserSettingsData types to include all themes

keep-notes/app/(main)/layout.tsx

@@ -1,6 +1,8 @@
 import { HeaderWrapper } from "@/components/header-wrapper";
 import { Sidebar } from "@/components/sidebar";
+import { ProvidersWrapper } from "@/components/providers-wrapper";
 import { auth } from "@/auth";
+import { detectUserLanguage } from "@/lib/i18n/detect-user-language";
 
 export default async function MainLayout({
   children,
@@ -8,16 +10,25 @@ export default async function MainLayout({
   children: React.ReactNode;
 }>) {
   const session = await auth();
+  const initialLanguage = await detectUserLanguage();
 
   return (
-    <div className="flex h-screen flex-col">
-      <HeaderWrapper user={session?.user} />
-      <div className="flex flex-1 overflow-hidden">
-        <Sidebar className="shrink-0 border-r overflow-y-auto" user={session?.user} />
-        <main className="flex-1 overflow-y-auto">
-          {children}
-        </main>
+    <ProvidersWrapper initialLanguage={initialLanguage}>
+      <div className="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-white overflow-hidden h-screen flex flex-col">
+        {/* Top Navigation - Style Keep */}
+        <HeaderWrapper user={session?.user} />
+
+        {/* Main Layout */}
+        <div className="flex flex-1 overflow-hidden">
+          {/* Sidebar Navigation - Style Keep */}
+          <Sidebar className="w-64 flex-none flex-col bg-white dark:bg-[#1e2128] border-r border-slate-200 dark:border-slate-800 overflow-y-auto hidden md:flex" user={session?.user} />
+
+          {/* Main Content Area */}
+          <main className="flex-1 overflow-y-auto bg-background-light dark:bg-background-dark p-4 scroll-smooth">
+            {children}
+          </main>
+        </div>
       </div>
-    </div>
+    </ProvidersWrapper>
   );
 }