unsafe lookup fix

client/src/Pages/StatusPage/Status/index.tsx

@@ -13,6 +13,7 @@ import { useLocation, useParams } from "react-router-dom";
 import { useGet } from "@/Hooks/UseApi";
 import type { Monitor } from "@/Types/Monitor";
 import type { StatusPage, StatusPageResponse, StatusPageTheme } from "@/Types/StatusPage";
+import { resolveStatusPageTheme } from "@/Types/StatusPage";
 import { HeaderStatusPageControls } from "./Components/HeaderStatusPageControls";
 import { StatusPageThemeProvider } from "./themes/StatusPageThemeProvider";
 import { RefinedStatusPage } from "./themes/refined/RefinedStatusPage";
@@ -26,8 +27,9 @@ type ThemedRendererProps = {
 	monitors: (Monitor & { checks?: Monitor["recentChecks"] })[];
 };
 
-const THEMED_RENDERERS: Partial<
-	Record<StatusPageTheme, React.ComponentType<ThemedRendererProps>>
+const THEMED_RENDERERS: Record<
+	StatusPageTheme,
+	React.ComponentType<ThemedRendererProps>
 > = {
 	refined: RefinedStatusPage,
 	modern: ModernStatusPage,
@@ -97,15 +99,13 @@ const StatusPageView = () => {
 		? `data:${statusPage.logo.contentType};base64,${statusPage.logo.data}`
 		: null;
 
-	const ThemedRenderer = statusPage.theme
-		? THEMED_RENDERERS[statusPage.theme]
-		: undefined;
-	const themedRenderer = ThemedRenderer ? (
+	const ThemedRenderer = THEMED_RENDERERS[resolveStatusPageTheme(statusPage.theme)];
+	const themedRenderer = (
 		<ThemedRenderer
 			statusPage={statusPage}
 			monitors={monitors}
 		/>
-	) : null;
+	);
 
 	if (themedRenderer) {
 		// Public route: render directly on the viewport, themed background covers everything.

client/src/Pages/StatusPage/Status/themes/StatusPageThemeProvider.tsx

@@ -8,7 +8,8 @@ import {
 } from "react";
 import {
 	DEFAULT_STATUS_PAGE_THEME,
-	DEFAULT_STATUS_PAGE_THEME_MODE,
+	resolveStatusPageTheme,
+	resolveStatusPageThemeMode,
 	type StatusPageTheme,
 	type StatusPageThemeMode,
 } from "@/Types/StatusPage";
@@ -58,8 +59,8 @@ export const StatusPageThemeProvider = ({
 	transparent = false,
 	children,
 }: Props) => {
-	const resolvedTheme = theme ?? DEFAULT_STATUS_PAGE_THEME;
-	const resolvedThemeMode = themeMode ?? DEFAULT_STATUS_PAGE_THEME_MODE;
+	const resolvedTheme = resolveStatusPageTheme(theme);
+	const resolvedThemeMode = resolveStatusPageThemeMode(themeMode);
 
 	const [systemMode, setSystemMode] = useState<ResolvedMode>(resolveSystemMode);
 
@@ -89,7 +90,7 @@ export const StatusPageThemeProvider = ({
 			htmlColorScheme: html.style.colorScheme,
 		};
 		const resolvedMode = resolvedThemeMode === "auto" ? systemMode : resolvedThemeMode;
-		const bg = themeTokens[theme ?? DEFAULT_STATUS_PAGE_THEME][resolvedMode].bg;
+		const bg = themeTokens[resolvedTheme][resolvedMode].bg;
 		html.style.background = bg;
 		body.style.background = bg;
 		body.style.margin = "0";
@@ -100,7 +101,7 @@ export const StatusPageThemeProvider = ({
 			body.style.margin = prev.bodyMargin;
 			html.style.colorScheme = prev.htmlColorScheme;
 		};
-	}, [paintBody, theme, resolvedThemeMode, systemMode]);
+	}, [paintBody, resolvedTheme, resolvedThemeMode, systemMode]);
 
 	const resolvedMode: ResolvedMode =
 		resolvedThemeMode === "auto" ? systemMode : resolvedThemeMode;

client/src/Types/StatusPage.ts

@@ -29,6 +29,16 @@ export const STATUS_PAGE_THEME_MODES = ["auto", "light", "dark"] as const;
 export type StatusPageThemeMode = (typeof STATUS_PAGE_THEME_MODES)[number];
 export const DEFAULT_STATUS_PAGE_THEME_MODE: StatusPageThemeMode = "auto";
 
+export const resolveStatusPageTheme = (
+	value: string | null | undefined
+): StatusPageTheme =>
+	STATUS_PAGE_THEMES.find((t) => t === value) ?? DEFAULT_STATUS_PAGE_THEME;
+
+export const resolveStatusPageThemeMode = (
+	value: string | null | undefined
+): StatusPageThemeMode =>
+	STATUS_PAGE_THEME_MODES.find((m) => m === value) ?? DEFAULT_STATUS_PAGE_THEME_MODE;
+
 export interface StatusPage {
 	id: string;
 	userId: string;