Initial commit: OmniAI Web Frontend

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/components/PageTransition.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+interface PageTransitionProps {
+  viewKey: string;
+  children: ReactNode;
+}
+
+const EXIT_DURATION_MS = 180;
+
+export default function PageTransition({ viewKey, children }: PageTransitionProps) {
+  const [displayedChildren, setDisplayedChildren] = useState(children);
+  const [phase, setPhase] = useState<"idle" | "exit">("idle");
+  const prevKeyRef = useRef(viewKey);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  useEffect(() => {
+    if (viewKey === prevKeyRef.current) {
+      setDisplayedChildren(children);
+      return;
+    }
+    prevKeyRef.current = viewKey;
+    setPhase("exit");
+    timerRef.current = setTimeout(() => {
+      setDisplayedChildren(children);
+      setPhase("idle");
+    }, EXIT_DURATION_MS);
+    return () => clearTimeout(timerRef.current);
+  }, [viewKey, children]);
+
+  return (
+    <div className={phase === "exit" ? "page-transition-wrap page-motion--exit" : "page-transition-wrap"}>
+      {displayedChildren}
+    </div>
+  );
+}