coder · Parkreiner · Apr 28, 2025 · Apr 28, 2025 · Apr 29, 2025 · Apr 29, 2025
diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
@@ -16,13 +16,13 @@
  * Storybook decorator function used to inject baseline data dependencies into
  * our React components during testing.
  */
+import React from "react";
 import "../src/index.css";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import CssBaseline from "@mui/material/CssBaseline";
 import {
 	ThemeProvider as MuiThemeProvider,
 	StyledEngineProvider,
-	// biome-ignore lint/nursery/noRestrictedImports: we extend the MUI theme
 } from "@mui/material/styles";
 import { DecoratorHelpers } from "@storybook/addon-themes";
 import isChromatic from "chromatic/isChromatic";
@@ -31,12 +31,19 @@ import { HelmetProvider } from "react-helmet-async";
 import { QueryClient, QueryClientProvider, parseQueryArgs } from "react-query";
 import { withRouter } from "storybook-addon-remix-react-router";
 import "theme/globalFonts";
+import { TimeSyncProvider } from "../src/hooks/useTimeSync";
 import themes from "../src/theme";
 
 DecoratorHelpers.initializeThemeState(Object.keys(themes), "dark");
 
 /** @type {readonly Decorator[]} */
-export const decorators = [withRouter, withQuery, withHelmet, withTheme];
+export const decorators = [
+	withRouter,
+	withQuery,
+	withHelmet,
+	withTheme,
+	withTimeSyncProvider,
+];
 
 /** @type {Preview["parameters"]} */
 export const parameters = {
@@ -101,6 +108,22 @@ function withHelmet(Story) {
 	);
 }
 
+const storyDate = new Date("March 15, 2022");
+
+/** @type {Decorator} */
+function withTimeSyncProvider(Story) {
+	return (
+		<TimeSyncProvider
+			options={{
+				initialDatetime: storyDate,
+				resyncOnNewSubscription: false,
+			}}
+		>
+			<Story />
+		</TimeSyncProvider>
+	);
+}
+
 /** @type {Decorator} */
 function withQuery(Story, { parameters }) {
 	const queryClient = new QueryClient({

diff --git a/site/src/App.tsx b/site/src/App.tsx
@@ -1,5 +1,6 @@
 import "./theme/globalFonts";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { TimeSyncProvider } from "hooks/useTimeSync";
 import {
 	type FC,
 	type ReactNode,
@@ -37,6 +38,8 @@ declare global {
 	}
 }
 
+const initialDatetime = new Date();
+
 export const AppProviders: FC<AppProvidersProps> = ({
 	children,
 	queryClient = defaultQueryClient,
@@ -64,15 +67,17 @@ export const AppProviders: FC<AppProvidersProps> = ({
 
 	return (
 		<HelmetProvider>
-			<QueryClientProvider client={queryClient}>
-				<AuthProvider>
-					<ThemeProvider>
-						{children}
-						<GlobalSnackbar />
-					</ThemeProvider>
-				</AuthProvider>
-				{showDevtools && <ReactQueryDevtools initialIsOpen={showDevtools} />}
-			</QueryClientProvider>
+			<TimeSyncProvider options={{ initialDatetime }}>
+				<QueryClientProvider client={queryClient}>
+					<AuthProvider>
+						<ThemeProvider>
+							{children}
+							<GlobalSnackbar />
+						</ThemeProvider>
+					</AuthProvider>
+					{showDevtools && <ReactQueryDevtools initialIsOpen={showDevtools} />}
+				</QueryClientProvider>
+			</TimeSyncProvider>
 		</HelmetProvider>
 	);
 };

diff --git a/site/src/components/SignInLayout/SignInLayout.tsx b/site/src/components/SignInLayout/SignInLayout.tsx
@@ -1,13 +1,19 @@
 import type { Interpolation, Theme } from "@emotion/react";
+import { useTimeSync } from "hooks/useTimeSync";
 import type { FC, PropsWithChildren } from "react";
 
 export const SignInLayout: FC<PropsWithChildren> = ({ children }) => {
+	const year = useTimeSync({
+		idealRefreshIntervalMs: Number.POSITIVE_INFINITY,
+		select: (date) => date.getFullYear(),
+	});
+
 	return (
 		<div css={styles.container}>
 			<div css={styles.content}>
 				<div css={styles.signIn}>{children}</div>
 				<div css={styles.copyright}>
-					{"\u00a9"} {new Date().getFullYear()} Coder Technologies, Inc.
+					{"\u00a9"} {year} Coder Technologies, Inc.
 				</div>
 			</div>
 		</div>

diff --git a/site/src/hooks/useTime.ts b/site/src/hooks/useTime.ts