suddenlyGiovanni · suddenlyGiovanni · Dec 15, 2024 · Dec 15, 2024 · Dec 15, 2024 · Dec 15, 2024
diff --git a/apps/web/src/root.tsx b/apps/web/src/root.tsx
@@ -1,22 +1,35 @@
 import type { ReactElement, ReactNode } from 'react'
-import { Outlet, useLoaderData } from 'react-router'
+import {
+	Links,
+	Meta,
+	Outlet,
+	Scripts,
+	ScrollRestoration,
+	useLoaderData,
+	useRouteLoaderData,
+} from 'react-router'
 
 import { Types, makeOpenGraphWebsite } from '@suddenlygiovanni/open-graph-protocol'
+import { Layout as _Layout } from '@suddenlygiovanni/ui/components/layout/layout.tsx'
+import { clsx } from '@suddenlygiovanni/ui/lib/utils.ts'
 
 import hero2800wAssetUrl from '~/assets/hero/giovanni_ravalico-profile_color_e4cily_c_scale,w_2800.webp'
 import faviconAssertUrl from '~/assets/suddenly_giovanni-icon-white.svg'
 import { config } from '~/config.ts'
-import { Document, Footer, GeneralErrorBoundary, Header, Main } from '~/shell/index.tsx'
+import { useOptionalTheme, useTheme } from '~/routes/resources/theme-switch.tsx'
+import { Footer, GeneralErrorBoundary, Header } from '~/shell/index.tsx'
 import fontStyleSheetUrl from '~/styles/fonts.css?url'
 import tailwindStyleSheetUrl from '~/styles/tailwind.css?url'
 import { getHints } from '~/utils/client-hints.tsx'
+import { ClientHintCheck } from '~/utils/client-hints.tsx'
 import { getEnv } from '~/utils/env.server.ts'
 import { getDomainUrl } from '~/utils/misc.ts'
 import { getTheme } from '~/utils/theme.server.ts'
 
 // biome-ignore lint/nursery/useImportRestrictions: <explanation>
 import type { Route } from './+types/root.ts'
-import { useOptionalTheme, useTheme } from './routes/resources/theme-switch.tsx'
+
+const { Body, Main } = _Layout
 
 export const links: Route.LinksFunction = () => {
 	return [
@@ -67,18 +80,56 @@ export function loader({ request }: Route.LoaderArgs) {
 	}
 }
 
-export function Layout({ children }: { children: ReactNode }): ReactElement {
+export function Layout(props: { children: ReactNode }): ReactElement {
 	// if there was an error running the loader, data could be missing
-	const data = useLoaderData<typeof loader | null>()
+	const data = useRouteLoaderData<typeof loader>('root')
+
 	const theme = useOptionalTheme()
 	return (
-		<Document
-			nonce={undefined}
-			theme={theme}
-			env={data?.ENV}
+		<html
+			className="min-h-screen"
+			data-theme={theme}
+			lang="en"
 		>
-			{children}
-		</Document>
+			<head>
+				<ClientHintCheck />
+				<meta charSet="utf-8" />
+				<meta
+					httpEquiv="Content-Type"
+					content="text/html;charset=utf-8"
+				/>
+				<meta
+					content="width=device-width, initial-scale=1"
+					name="viewport"
+				/>
+				<Meta />
+				<Links />
+			</head>
+			<Body className={clsx('min-h-full bg-background font-sans text-foreground antialiased')}>
+				{props.children}
+
+				{/**
+				 * Manages scroll position for client-side transitions
+				 * If you use a nonce-based content security policy for scripts, you must provide the
+				 *  `nonce` prop. Otherwise, omit the nonce prop as shown here.
+				 */}
+				<ScrollRestoration />
+
+				{/**
+				 * Script tags go here
+				 * If you use a nonce-based content security policy for scripts, you must provide the
+				 *  `nonce` prop.
+				 *  Otherwise, omit the nonce prop as shown here.
+				 */}
+				<script
+					// biome-ignore lint/security/noDangerouslySetInnerHtml: we need to set the ENV variable
+					dangerouslySetInnerHTML={{
+						__html: `window.ENV = ${JSON.stringify(data?.ENV, null, 2)};`,
+					}}
+				/>
+				<Scripts />
+			</Body>
+		</html>
 	)
 }
 
@@ -89,7 +140,7 @@ export default function App(_: Route.ComponentProps): ReactElement {
 	return (
 		<>
 			<Header theme={requestInfo.userPrefs.theme} />
-			<Main>
+			<Main className="mx-auto my-8 h-full w-full max-w-4xl px-8">
 				<Outlet />
 			</Main>
 			<Footer />

diff --git a/apps/web/src/shell/document.tsx b/apps/web/src/shell/document.tsx
diff --git a/apps/web/src/shell/header.tsx b/apps/web/src/shell/header.tsx
@@ -1,4 +1,4 @@
-import { type ReactElement, type SyntheticEvent, memo, useCallback, useMemo } from 'react'
+import type { ReactElement, SyntheticEvent } from 'react'
 
 import { Layout } from '@suddenlygiovanni/ui/components/layout/layout.tsx'
 import { NavigationMenuToggle } from '@suddenlygiovanni/ui/components/navigation-menu-toggle/navigation-menu-toggle.tsx'
@@ -24,45 +24,13 @@ const routes = (
 
 const PRIMARY_NAVIGATION = 'primary-navigation'
 
-export const Header = memo(function Header({
-	theme,
-}: { theme: 'light' | 'dark' | null }): ReactElement {
+export function Header({ theme }: { theme: 'light' | 'dark' | null }): ReactElement {
 	const [isMobileNavigationVisible, toggleMobileNavigationVisibility] = useToggle(false)
 
-	const handleMobileNavigationClick = useCallback(
-		<T extends HTMLElement>(event: SyntheticEvent<T>) => {
-			event.stopPropagation()
-			toggleMobileNavigationVisibility()
-		},
-		[toggleMobileNavigationVisibility],
-	)
-
-	const renderLi = useMemo(
-		() =>
-			routes.map(({ title, url, uri, description, disabled }) => (
-				<li
-					className={clsx(
-						'flex min-h-16 min-w-32 items-center justify-end outline-hidden md:min-h-fit md:min-w-fit',
-					)}
-					key={uri}
-					// onClick={stopPropagation}
-				>
-					<NavLink
-						aria-disabled={disabled ? 'true' : undefined}
-						aria-label={description}
-						onClick={handleMobileNavigationClick}
-						prefetch="intent"
-						role="menuitem"
-						to={url}
-						tabIndex={0}
-					>
-						{title}
-					</NavLink>
-				</li>
-			)),
-
-		[handleMobileNavigationClick],
-	)
+	function handleMobileNavigationClick<T extends HTMLElement>(event: SyntheticEvent<T>): void {
+		event.stopPropagation()
+		toggleMobileNavigationVisibility()
+	}
 
 	return (
 		<Layout.Header
@@ -105,7 +73,26 @@ export const Header = memo(function Header({
 						onClick={handleMobileNavigationClick}
 						onKeyDown={handleMobileNavigationClick}
 					>
-						{renderLi}
+						{routes.map(({ title, url, uri, description, disabled }) => (
+							<li
+								className={clsx(
+									'flex min-h-16 min-w-32 items-center justify-end outline-hidden md:min-h-fit md:min-w-fit',
+								)}
+								key={uri}
+							>
+								<NavLink
+									aria-disabled={disabled ? 'true' : undefined}
+									aria-label={description}
+									onClick={handleMobileNavigationClick}
+									prefetch="intent"
+									role="menuitem"
+									to={url}
+									tabIndex={0}
+								>
+									{title}
+								</NavLink>
+							</li>
+						))}
 						<ThemeSwitch
 							userPreference={theme}
 							className="ml-16 aspect-square"
@@ -115,4 +102,4 @@ export const Header = memo(function Header({
 			</div>
 		</Layout.Header>
 	)
-})
+}
diff --git a/apps/web/src/shell/index.tsx b/apps/web/src/shell/index.tsx
@@ -1,5 +1,3 @@
-export { Main } from './main.tsx'
 export { Header } from './header.tsx'
 export { Footer } from './footer.tsx'
-export { Document } from './document.tsx'
 export { GeneralErrorBoundary } from './general-error-boundary.tsx'
diff --git a/apps/web/src/shell/main.tsx b/apps/web/src/shell/main.tsx
diff --git a/packages/ui/src/components/mode-toggle/mode-toggle.tsx b/packages/ui/src/components/mode-toggle/mode-toggle.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode, memo, useMemo } from 'react'
+import type { FC, MouseEventHandler } from 'react'
 
 import { Icons } from '#components/icons/icons.tsx'
 import { clsx } from '#lib/utils.ts'
@@ -19,13 +19,15 @@ interface ModeToggleProps {
 }
 
 const NAME = 'ModeToggle'
-const ModeToggle = memo(function ModeToggle({
-	setTheme,
-	theme,
-	className,
-}: ModeToggleProps): ReactNode {
-	const isLight = useMemo<boolean>(() => theme === 'light', [theme])
-	const isDark = useMemo<boolean>(() => theme === 'dark', [theme])
+const ModeToggle: FC<ModeToggleProps> = ({ setTheme, theme, className }) => {
+	const isLight = theme === 'light'
+	const isDark = theme === 'dark'
+
+	function makeToggleHandler(mode: Theme): MouseEventHandler<HTMLDivElement> {
+		return function toggleHandler(_) {
+			setTheme(mode)
+		}
+	}
 
 	return (
 		<DropdownMenu>
@@ -37,9 +39,9 @@ const ModeToggle = memo(function ModeToggle({
 					data-testid={NAME}
 				>
 					{isLight || theme === null ? (
-						<Icons.moon className={clsx('h-[1.2rem]', 'w-[1.2rem]')} />
+						<Icons.moon className={clsx('h-[1.2rem] w-[1.2rem]')} />
 					) : (
-						<Icons.sun className={clsx('h-[1.2rem]', 'w-[1.2rem]')} />
+						<Icons.sun className={clsx('h-[1.2rem] w-[1.2rem]')} />
 					)}
 
 					<span className="sr-only">Toggle theme</span>
@@ -48,20 +50,20 @@ const ModeToggle = memo(function ModeToggle({
 			<DropdownMenuContent align="end">
 				<DropdownMenuItem
 					disabled={isLight}
-					onClick={(): void => setTheme('light')}
+					onClick={makeToggleHandler('light')}
 				>
 					Light
 				</DropdownMenuItem>
 				<DropdownMenuItem
 					disabled={isDark}
-					onClick={(): void => setTheme('dark')}
+					onClick={makeToggleHandler('dark')}
 				>
 					Dark
 				</DropdownMenuItem>
 			</DropdownMenuContent>
 		</DropdownMenu>
 	)
-})
+}
 ModeToggle.displayName = NAME
 
 export { ModeToggle }