Update docs, README, and project config

.github/workflows/pull_request.yml

@@ -16,6 +16,6 @@ jobs:
       - name: Setup Biome
         uses: biomejs/setup-biome@v2
         with:
-          version: latest
+          version: 2.3.14
       - name: Run Biome
         run: biome ci .

.gitignore

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

README.md

@@ -4,10 +4,12 @@ This is the admin dashboard for the [PHLASK](https://github.com/phlask/phlask-ma
 
 ## Key Features
 
+- Authenticate via Supabase (login, password reset, email confirmation)
 - View and manage resources from the Supabase database
 - Review and approve/reject suggested edits to resources
 - View and resolve reports on resources
 - View resource changelogs and roll back changes if needed
+- Light/dark theme support
 
 ## Getting Started
 
@@ -65,23 +67,46 @@ Replace 3000:3000 with the actual port your application listens on if it is diff
 app/
 ├── api/
 │   ├── resources/
-│   │   └── methods.ts      # API methods related to resources
-│   ├── client.ts           # API client setup
-│   └── types.ts            # Shared API request/response types
+│   │   └── methods.ts             # API methods related to resources
+│   ├── resource-revisions/
+│   │   └── methods.ts             # API methods related to resource revisions/changelogs
+│   ├── client.server.ts           # Supabase client setup (server-side)
+│   └── types.ts                   # Shared API request/response types
 ├── assets/
-│   └── PHILASK_v2.svg      # Static assets (logos, images, etc.)
+│   └── PHILASK_v2.svg             # Static assets (logos, images, etc.)
+├── components/
+│   ├── ThemeToggle.tsx            # Light/dark theme toggle control
+│   └── WaveDivider.tsx            # Decorative UI component
 ├── constants/
-│   └── db.ts               # Database-related constants/config
+│   └── db.ts                      # Database-related constants/config
+├── context/
+│   └── user.ts                    # Authenticated user context
+├── middleware/
+│   └── auth.ts                    # Route authentication middleware
 ├── routes/
-│   ├── _layout.tsx         # Shared layout for route pages
-│   ├── dashboard.tsx       # Dashboard page component
+│   ├── authenticated/             # Routes that require a logged-in user
+│   │   ├── reviews/                # Review & approve/reject suggested edits
+│   │   ├── _layout.tsx
+│   │   ├── dashboard.tsx
+│   │   └── logout.tsx
+│   ├── unauthenticated/           # Public auth routes (login, password reset, etc.)
+│   │   ├── _layout.tsx
+│   │   ├── login.tsx
+│   │   ├── forgot-password.tsx
+│   │   ├── reset-password.tsx
+│   │   └── confirm.tsx
+├── schemas/
+│   └── *.ts                       # Zod schemas for auth forms
+├── theme/
+│   ├── theme.ts                   # MUI theme configuration
+│   └── ThemeModeProvider.tsx      # Light/dark theme context provider
 ├── types/
-│   └── ResourceEntry.ts    # Domain-specific TypeScript types
+│   └── ResourceEntry.ts           # Domain-specific TypeScript types
 ├── utils/
-│   └── distance.ts         # Distance calculation utilities
-├── app.css                 # Global application styles
-├── root.tsx                # App root component / Entry point
-└── routes.ts               # Route definitions and router configuration
+│   └── distance.ts                # Distance calculation utilities
+├── app.css                        # Global application styles
+├── root.tsx                       # App root component / Entry point
+└── routes.ts                      # Route definitions and router configuration
 ```
 
 ## How to Contribute / Next Steps

app/api/resource-revisions/methods.ts

@@ -0,0 +1,69 @@
+import type { SupabaseClient } from "@supabase/supabase-js";
+import type {
+  ResourceRevision,
+  RevisionStatus,
+} from "~/types/ResourceRevision";
+
+const TABLE_NAME = "resource_revisions";
+
+export const getResourceRevisionAPI = (client: SupabaseClient) => {
+  const table = client.from(TABLE_NAME);
+
+  return {
+    getList: async (params: { status?: RevisionStatus } = {}) => {
+      let query = table.select("*").order("date_created", { ascending: false });
+
+      if (params.status) {
+        query = query.eq("status", params.status);
+      }
+
+      const { data, error } = await query;
+
+      if (error) {
+        throw error;
+      }
+
+      return (data ?? []) as ResourceRevision[];
+    },
+    getById: async (id: number) => {
+      const { data, error } = await table
+        .select("*")
+        .eq("id", id)
+        .single<ResourceRevision>();
+
+      if (error) {
+        throw error;
+      }
+
+      return data;
+    },
+    updateStatus: async (id: number, status: RevisionStatus) => {
+      const { data, error } = await table
+        .update({ status })
+        .eq("id", id)
+        .select()
+        .single<ResourceRevision>();
+
+      if (error) {
+        throw error;
+      }
+
+      return data;
+    },
+    updateFields: async (id: number, values: Partial<ResourceRevision>) => {
+      const { data, error } = await table
+        .update(values)
+        .eq("id", id)
+        .select()
+        .single<ResourceRevision>();
+
+      if (error) {
+        throw error;
+      }
+
+      return data;
+    },
+  };
+};
+
+export default getResourceRevisionAPI;

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>
+  );
+}