Add theming system and shared UI components

.gitignore

@@ -5,5 +5,4 @@
 # React Router
 /.react-router/
 /build/
-
-
+/docker/build/

app/app.css

@@ -1,16 +1,105 @@
-@import 'tailwindcss';
+/* Dark mode is toggled by adding/removing `.dark` on <html> (see ThemeModeProvider),
+   rather than following the OS preference, so it can stay in sync with the MUI theme. */
 
-@theme {
-  --font-sans:
-    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+:root {
+  /* Water/brand blue, anchored on the PHLASK logo color (#10B6FF = brand-500).
+     Mirrored in app/theme/theme.ts (kept in sync manually). */
+  --color-brand-50: #eafaff;
+  --color-brand-100: #d6f4ff;
+  --color-brand-300: #6fd6ff;
+
+  /* Deep ocean navy, used for dark-mode surfaces */
+  --color-navy-950: #071522;
+  --color-navy-900: #0a1929;
+  --color-navy-600: #1f4560;
 }
 
 html,
 body {
-  @apply bg-white dark:bg-gray-950;
+  background-color: var(--color-brand-50);
+  color: var(--color-navy-900);
+  color-scheme: light;
+}
+
+html.dark,
+html.dark body {
+  background-color: var(--color-navy-950);
+  color: var(--color-brand-50);
+}
+
+html.dark {
+  color-scheme: dark;
+}
+
+@keyframes wave-drift {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes bubble-rise {
+  from {
+    transform: translateY(0) scale(1);
+    opacity: 0.5;
+  }
+  to {
+    transform: translateY(-140px) scale(1.15);
+    opacity: 0;
+  }
+}
+
+/* Ambient per-type motion for resource-type chip icons (see chipColors.tsx) */
+@keyframes chip-icon-bob {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes chip-icon-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.18);
+  }
+}
+
+@keyframes chip-icon-sway {
+  0%,
+  100% {
+    transform: rotate(-10deg);
+  }
+  50% {
+    transform: rotate(10deg);
+  }
+}
 
-  @media (prefers-color-scheme: dark) {
-    color-scheme: dark;
+@keyframes chip-icon-wiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-12deg);
+  }
+  75% {
+    transform: rotate(12deg);
   }
 }
+
+/* Water-themed scrollbar */
+* {
+  scrollbar-color: var(--color-brand-300) transparent;
+}
+
+html.dark * {
+  scrollbar-color: var(--color-navy-600) transparent;
+}

app/components/ThemeToggle.tsx

@@ -0,0 +1,45 @@
+import { DarkMode, LightMode } from "@mui/icons-material";
+import { IconButton, Tooltip } from "@mui/material";
+import { useThemeMode } from "~/theme/ThemeModeProvider";
+import { brand, navy } from "~/theme/theme";
+
+// Styling and icon visibility are driven purely by the `.dark` class (via
+// theme.applyStyles) rather than the `mode` value from React state, so this
+// can never mismatch between SSR and hydration.
+export function ThemeToggle() {
+  const { toggleMode } = useThemeMode();
+
+  return (
+    <Tooltip title="Toggle dark mode">
+      <IconButton
+        onClick={toggleMode}
+        aria-label="Toggle dark mode"
+        sx={(theme) => ({
+          bgcolor: brand[100],
+          color: brand[700],
+          transition: "transform 0.35s ease, background-color 0.2s ease",
+          "&:hover": { bgcolor: brand[200], transform: "rotate(-14deg)" },
+          ...theme.applyStyles("dark", {
+            bgcolor: navy[800],
+            color: brand[300],
+            "&:hover": { bgcolor: navy[700] },
+          }),
+        })}
+      >
+        <LightMode
+          fontSize="small"
+          sx={(theme) => ({
+            ...theme.applyStyles("dark", { display: "none" }),
+          })}
+        />
+        <DarkMode
+          fontSize="small"
+          sx={(theme) => ({
+            display: "none",
+            ...theme.applyStyles("dark", { display: "inline-block" }),
+          })}
+        />
+      </IconButton>
+    </Tooltip>
+  );
+}

app/components/WaveDivider.tsx

@@ -0,0 +1,59 @@
+import { Box, type SxProps, type Theme } from "@mui/material";
+
+// Two periods of the same wave back-to-back so a -50% translateX loops seamlessly.
+const WAVE_PATH =
+  "M0,40 C150,90 350,0 600,40 C850,80 1050,0 1200,40 C1350,80 1550,0 1800,40 C1950,80 2150,0 2400,40 L2400,120 L0,120 Z";
+
+type WaveDividerProps = {
+  color: string;
+  height?: number;
+  opacity?: number;
+  duration?: number;
+  reverse?: boolean;
+  sx?: SxProps<Theme>;
+};
+
+export function WaveDivider({
+  color,
+  height = 60,
+  opacity = 1,
+  duration = 18,
+  reverse = false,
+  sx,
+}: WaveDividerProps) {
+  return (
+    <Box
+      aria-hidden
+      sx={[
+        {
+          pointerEvents: "none",
+          position: "absolute",
+          insetInline: 0,
+          overflow: "hidden",
+          lineHeight: 0,
+          height,
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Box
+        component="svg"
+        aria-hidden="true"
+        viewBox="0 0 2400 120"
+        preserveAspectRatio="none"
+        sx={{
+          position: "absolute",
+          insetBlock: 0,
+          left: 0,
+          height: "100%",
+          width: "200%",
+          animation: `wave-drift ${duration}s linear infinite`,
+          animationDirection: reverse ? "reverse" : "normal",
+          opacity,
+        }}
+      >
+        <path d={WAVE_PATH} fill={color} />
+      </Box>
+    </Box>
+  );
+}

app/root.tsx

@@ -1,14 +1,25 @@
+import { Box } from "@mui/material";
 import {
   isRouteErrorResponse,
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
+  useLoaderData,
+  useRouteLoaderData,
 } from "react-router";
-
 import type { Route } from "./+types/root";
 import "./app.css";
+import { ThemeModeProvider } from "./theme/ThemeModeProvider";
+import { getThemeMode } from "./theme/theme-cookie.server";
+
+// The theme cookie (see theme-cookie.server.ts) lets the server render the
+// right `dark` class on <html> up front, so there's no flash of the wrong
+// theme and no need for a blocking inline script before hydration.
+export function loader({ request }: Route.LoaderArgs) {
+  return { themeMode: getThemeMode(request) };
+}
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -24,8 +35,12 @@ export const links: Route.LinksFunction = () => [
 ];
 
 export function Layout({ children }: { children: React.ReactNode }) {
+  // useRouteLoaderData (not useLoaderData) because Layout also renders the
+  // ErrorBoundary path, where the root loader may not have run.
+  const themeMode = useRouteLoaderData<typeof loader>("root")?.themeMode;
+
   return (
-    <html lang="en">
+    <html lang="en" className={themeMode === "dark" ? "dark" : undefined}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -42,7 +57,13 @@ export function Layout({ children }: { children: React.ReactNode }) {
 }
 
 export default function App() {
-  return <Outlet />;
+  const { themeMode } = useLoaderData<typeof loader>();
+
+  return (
+    <ThemeModeProvider initialMode={themeMode}>
+      <Outlet />
+    </ThemeModeProvider>
+  );
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
@@ -62,14 +83,17 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
   }
 
   return (
-    <main className="pt-16 p-4 container mx-auto">
+    <Box
+      component="main"
+      sx={{ pt: 8, p: 2, maxWidth: "lg", mx: "auto", width: "100%" }}
+    >
       <h1>{message}</h1>
       <p>{details}</p>
       {stack && (
-        <pre className="w-full p-4 overflow-x-auto">
+        <Box component="pre" sx={{ width: "100%", p: 2, overflowX: "auto" }}>
           <code>{stack}</code>
-        </pre>
+        </Box>
       )}
-    </main>
+    </Box>
   );
 }

app/theme/ThemeModeProvider.tsx

@@ -0,0 +1,62 @@
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { THEME_COOKIE_NAME, type ThemeMode, theme } from "./theme";
+
+type ThemeModeContextValue = {
+  mode: ThemeMode;
+  toggleMode: () => void;
+};
+
+const ThemeModeContext = createContext<ThemeModeContextValue | null>(null);
+
+export function ThemeModeProvider({
+  children,
+  initialMode,
+}: {
+  children: ReactNode;
+  initialMode: ThemeMode;
+}) {
+  const [mode, setMode] = useState<ThemeMode>(initialMode);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", mode === "dark");
+    // One year, readable by the root loader on the next request so SSR
+    // renders the right theme with no flash. Not httpOnly: it's a UI
+    // preference, not a secret, and needs to be writable from here.
+    // biome-ignore lint/suspicious/noDocumentCookie: Cookie Store API isn't supported in Safari/Firefox yet
+    document.cookie = `${THEME_COOKIE_NAME}=${mode}; path=/; max-age=31536000; samesite=lax`;
+  }, [mode]);
+
+  const value = useMemo<ThemeModeContextValue>(
+    () => ({
+      mode,
+      toggleMode: () => setMode((m) => (m === "dark" ? "light" : "dark")),
+    }),
+    [mode],
+  );
+
+  return (
+    <ThemeModeContext.Provider value={value}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline enableColorScheme />
+        {children}
+      </ThemeProvider>
+    </ThemeModeContext.Provider>
+  );
+}
+
+export function useThemeMode(): ThemeModeContextValue {
+  const ctx = useContext(ThemeModeContext);
+  if (!ctx) {
+    throw new Error("useThemeMode must be used within a ThemeModeProvider");
+  }
+  return ctx;
+}

app/theme/theme-cookie.server.ts

@@ -0,0 +1,12 @@
+import { THEME_COOKIE_NAME, type ThemeMode } from "./theme";
+
+// Plain, unsigned cookie: it only ever holds "light" | "dark", so there's
+// nothing here worth signing/encoding, and keeping it plain lets the client
+// write it with a bare `document.cookie =` assignment (see ThemeModeProvider).
+export function getThemeMode(request: Request): ThemeMode {
+  const cookieHeader = request.headers.get("Cookie") ?? "";
+  const match = cookieHeader.match(
+    new RegExp(`(?:^|;\\s*)${THEME_COOKIE_NAME}=(dark|light)`),
+  );
+  return match?.[1] === "dark" ? "dark" : "light";
+}