Add tournament and multiplayer community chat moderation

components/BackNavigationTransition.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+
+/** Animate the new content after browser history navigation, without delaying it. */
+export function BackNavigationTransition() {
+  const pathname = usePathname();
+  const search = useSearchParams();
+  const route = `${pathname}?${search.toString()}`;
+  const historyNavigation = useRef(false);
+  const previousPath = useRef(route);
+
+  useEffect(() => {
+    const onPopState = () => {
+      historyNavigation.current =
+        `${window.location.pathname}?${new URLSearchParams(window.location.search).toString()}` !==
+        previousPath.current;
+    };
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, []);
+
+  useEffect(() => {
+    if (previousPath.current === route) return;
+    previousPath.current = route;
+    const fromHistory = historyNavigation.current;
+    historyNavigation.current = false;
+    if (
+      !fromHistory ||
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches
+    )
+      return;
+    const main = document.getElementById("main-content");
+    if (!main || typeof main.animate !== "function") return;
+    const animation = main.animate(
+      [
+        { opacity: 0.7, transform: "translateY(8px)" },
+        { opacity: 1, transform: "translateY(0)" },
+      ],
+      { duration: 200, easing: "cubic-bezier(0.23, 1, 0.32, 1)" },
+    );
+    return () => animation.cancel();
+  }, [route]);
+  return null;
+}