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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user