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
This commit is contained in:
2026-01-18 22:33:41 +01:00
parent ef60dafd73
commit ddb67ba9e5
306 changed files with 59580 additions and 6063 deletions

View File

@@ -2,13 +2,7 @@ import type { Metadata, Viewport } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Toaster } from "@/components/ui/toast";
import { LabelProvider } from "@/context/LabelContext";
import { NoteRefreshProvider } from "@/context/NoteRefreshContext";
import { SessionProviderWrapper } from "@/components/session-provider-wrapper";
import { LanguageProvider } from "@/lib/i18n/LanguageProvider";
import { detectUserLanguage } from "@/lib/i18n/detect-user-language";
import { NotebooksProvider } from "@/context/notebooks-context";
import { NotebookDragProvider } from "@/context/notebook-drag-context";
const inter = Inter({
subsets: ["latin"],
@@ -35,29 +29,50 @@ export const viewport: Viewport = {
export const dynamic = "force-dynamic";
import { getAISettings } from "@/app/actions/ai-settings";
import { getUserSettings } from "@/app/actions/user-settings";
import { ThemeInitializer } from "@/components/theme-initializer";
// ... existing imports
import { DebugTheme } from "@/components/debug-theme";
// ...
import { getThemeScript } from "@/lib/theme-script";
// ...
import { auth } from "@/auth";
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
// Detect initial language for user
const initialLanguage = await detectUserLanguage()
const session = await auth();
const userId = session?.user?.id;
// Fetch user settings server-side with optimized single session check
const [aiSettings, userSettings] = await Promise.all([
getAISettings(userId),
getUserSettings(userId)
])
console.log('[RootLayout] Auth user:', userId)
console.log('[RootLayout] Server fetched user settings:', userSettings)
return (
<html lang={initialLanguage} suppressHydrationWarning>
<html suppressHydrationWarning>
<body className={inter.className}>
<script
dangerouslySetInnerHTML={{
__html: getThemeScript(userSettings.theme),
}}
/>
<SessionProviderWrapper>
<NoteRefreshProvider>
<LabelProvider>
<NotebooksProvider>
<NotebookDragProvider>
<LanguageProvider initialLanguage={initialLanguage}>
{children}
</LanguageProvider>
</NotebookDragProvider>
</NotebooksProvider>
</LabelProvider>
</NoteRefreshProvider>
<ThemeInitializer theme={userSettings.theme} fontSize={aiSettings.fontSize} />
{children}
<Toaster />
</SessionProviderWrapper>
</body>