fix: resolve hydration mismatches on initial load

src/components/FileUpload.tsx

@@ -194,6 +194,7 @@ export default function FileUpload({
     <div
       id="upload-zone"
       role="button"
+      suppressHydrationWarning
       tabIndex={0}
       aria-label="Video upload area. Drag and drop a video file or press Enter to browse."
       onDragOver={(e) => {

src/components/ThemeToggle.tsx

@@ -1,9 +1,34 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { useTheme } from "./ThemeProvider";
 
 export function ThemeToggle() {
   const { theme, toggleTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <button
+        type="button"
+        aria-label="Toggle theme"
+        className="
+          relative flex items-center justify-center
+          w-9 h-9 rounded-full
+          bg-[var(--surface)]
+          text-[var(--text)]
+          border border-[var(--border)]
+        "
+      >
+        <div className="w-4 h-4" />
+      </button>
+    );
+  }
+
   const isDark = theme === "dark";
 
   return (

vitest.setup.ts

@@ -14,3 +14,25 @@ Object.defineProperty(window, 'matchMedia', {
     dispatchEvent: () => false,
   }),
 })
+
+const localStorageMock = (function () {
+  let store: Record<string, string> = {}
+  return {
+    getItem(key: string) {
+      return store[key] || null
+    },
+    setItem(key: string, value: string) {
+      store[key] = value.toString()
+    },
+    clear() {
+      store = {}
+    },
+    removeItem(key: string) {
+      delete store[key]
+    },
+  }
+})()
+
+Object.defineProperty(window, 'localStorage', {
+  value: localStorageMock,
+})