From c2a82d67fc6d9165fa6d8e3acca7989e89d9589a Mon Sep 17 00:00:00 2001
From: petahade <petahadeleke@gmail.com>
Date: Wed, 24 Jun 2026 16:36:28 +0000
Subject: [PATCH 1/4] feat(frontend): add PageTransition component for smooth
 route animations

---
 frontend/src/components/layout/AppLayout.tsx  |  5 +++-
 .../src/components/layout/PageTransition.tsx  | 30 +++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/layout/PageTransition.tsx

diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
index 37d04bb..6002b57 100644
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -4,6 +4,7 @@ import { Logo } from "@/components/common/Logo";
 import { ToastContainer } from "@/components/notifications/Toast";
 import { SkipLink } from "@/components/ui/SkipLink";
 import { BottomNav } from "@/components/ui/BottomNav";
+import { PageTransition } from "@/components/layout/PageTransition";
 import Link from "next/link";
 
 interface AppLayoutProps {
@@ -21,7 +22,9 @@ export function AppLayout({ children }: AppLayoutProps) {
           <MobileHeaderActions />
         </div>
       </header>
-      <main id="main-content" className="container py-6 md:py-10 flex-1 pb-20 md:pb-10" role="main">{children}</main>
+      <main id="main-content" className="container py-6 md:py-10 flex-1 pb-20 md:pb-10" role="main">
+        <PageTransition>{children}</PageTransition>
+      </main>
       <ToastContainer />
       <BottomNav />
       <footer className="border-t py-8 md:py-10" role="contentinfo">
diff --git a/frontend/src/components/layout/PageTransition.tsx b/frontend/src/components/layout/PageTransition.tsx
new file mode 100644
index 0000000..757f752
--- /dev/null
+++ b/frontend/src/components/layout/PageTransition.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion'
+import { usePathname } from 'next/navigation'
+
+interface PageTransitionProps {
+  children: React.ReactNode
+}
+
+export function PageTransition({ children }: PageTransitionProps) {
+  const pathname = usePathname()
+  const shouldReduceMotion = useReducedMotion()
+
+  if (shouldReduceMotion) {
+    return <>{children}</>
+  }
+
+  return (
+    <AnimatePresence mode="wait" initial={false}>
+      <motion.div
+        key={pathname}
+        initial={{ opacity: 0, y: 6 }}
+        animate={{ opacity: 1, y: 0, transition: { duration: 0.12, ease: 'easeOut' } }}
+        exit={{ opacity: 0, transition: { duration: 0.08, ease: 'easeIn' } }}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  )
+}

From 3282141a20c7e1aae453a4e7fd76e6f152ee1903 Mon Sep 17 00:00:00 2001
From: petahade <petahadeleke@gmail.com>
Date: Wed, 24 Jun 2026 16:40:33 +0000
Subject: [PATCH 2/4] feat(auth): surface backend field errors inline on
 registration form

---
 frontend/src/components/auth/RegisterForm.tsx | 43 ++++++++++++++-----
 frontend/src/hooks/useAuth.tsx                |  5 +++
 frontend/src/lib/api.ts                       |  7 ++-
 frontend/src/lib/authErrors.ts                | 25 +++++++++++
 4 files changed, 69 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/lib/authErrors.ts

diff --git a/frontend/src/components/auth/RegisterForm.tsx b/frontend/src/components/auth/RegisterForm.tsx
index d732600..edf7a9b 100644
--- a/frontend/src/components/auth/RegisterForm.tsx
+++ b/frontend/src/components/auth/RegisterForm.tsx
@@ -2,10 +2,12 @@
 
 import { useState, useEffect } from 'react';
 import { CheckCircle2, XCircle, Loader2, AlertCircle } from 'lucide-react';
+import Link from 'next/link';
 import { useAuth } from '@/hooks/useAuth';
 import { useRouter } from 'next/navigation';
 import { useUsernameAvailability } from '@/hooks/useUsernameAvailability';
 import { registerSchema } from '@/lib/validations/auth';
+import { AuthApiError, REGISTER_ERROR_MAP } from '@/lib/authErrors';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { SocialLogin } from './SocialLogin';
@@ -79,15 +81,23 @@ export function RegisterForm({ className }: RegisterFormProps) {
     e.preventDefault();
     if (!validate()) return;
 
-    await register({
-      username: formData.username,
-      email: formData.email,
-      password: formData.password,
-      confirmPassword: formData.confirmPassword,
-    });
-
-    if (!error) {
+    try {
+      await register({
+        username: formData.username,
+        email: formData.email,
+        password: formData.password,
+        confirmPassword: formData.confirmPassword,
+      });
       router.push('/auth/verify-email');
+    } catch (err) {
+      if (err instanceof AuthApiError) {
+        const mapped = REGISTER_ERROR_MAP[err.code];
+        if (mapped) {
+          setErrors((prev) => ({ ...prev, [mapped.field]: mapped.message }));
+          return;
+        }
+      }
+      // Unknown errors land in context `error` via useAuth — generic banner shows them
     }
   };
 
@@ -181,8 +191,21 @@ export function RegisterForm({ className }: RegisterFormProps) {
           />
           {errors.email && (
             <p id="register-email-error" className="flex items-center gap-1 text-xs text-destructive">
-              <AlertCircle className="h-3 w-3" aria-hidden="true" />
-              {errors.email}
+              <AlertCircle className="h-3 w-3 flex-shrink-0" aria-hidden="true" />
+              <span>
+                {errors.email}
+                {errors.email === REGISTER_ERROR_MAP.EMAIL_ALREADY_EXISTS.message && (
+                  <>
+                    {' '}
+                    <Link
+                      href="/auth/login"
+                      className="underline underline-offset-2 hover:text-destructive/80 font-medium"
+                    >
+                      Log in instead
+                    </Link>
+                  </>
+                )}
+              </span>
             </p>
           )}
         </div>
diff --git a/frontend/src/hooks/useAuth.tsx b/frontend/src/hooks/useAuth.tsx
index 20c0f42..75c4722 100644
--- a/frontend/src/hooks/useAuth.tsx
+++ b/frontend/src/hooks/useAuth.tsx
@@ -3,6 +3,7 @@
 import { useState, createContext, useContext, useCallback } from "react";
 import { AuthUser, LoginRequest, RegisterRequest } from "@/types";
 import { api } from "@/lib/api";
+import { AuthApiError, REGISTER_ERROR_MAP } from "@/lib/authErrors";
 
 interface AuthContextType {
   user: AuthUser | null;
@@ -148,6 +149,10 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
       localStorage.setItem(PENDING_VERIFICATION_EMAIL_KEY, userData.email);
       // Don't persist session yet - user needs to verify email
     } catch (err) {
+      if (err instanceof AuthApiError && REGISTER_ERROR_MAP[err.code]) {
+        // Field-specific error — let the form surface it inline; don't set context error
+        throw err;
+      }
       const message =
         err instanceof Error ? err.message : "Registration failed";
       setError(message);
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index ee14934..d9afaf6 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -1,4 +1,5 @@
 import { ApiResponse, ApiError } from "../types";
+import { AuthApiError } from "./authErrors";
 
 class ApiClient {
   private baseURL: string;
@@ -57,7 +58,11 @@ class ApiClient {
         (json as { error?: { message?: string } })?.error?.message ??
         (json as { message?: string })?.message ??
         `HTTP ${response.status}`;
-      throw new Error(message);
+      const code =
+        (json as { error?: { code?: string } })?.error?.code ??
+        (json as { code?: string })?.code ??
+        'UNKNOWN';
+      throw new AuthApiError(message, code);
     }
     return json as T;
   }
diff --git a/frontend/src/lib/authErrors.ts b/frontend/src/lib/authErrors.ts
new file mode 100644
index 0000000..6591659
--- /dev/null
+++ b/frontend/src/lib/authErrors.ts
@@ -0,0 +1,25 @@
+export class AuthApiError extends Error {
+  constructor(
+    message: string,
+    public readonly code: string,
+  ) {
+    super(message)
+    this.name = 'AuthApiError'
+  }
+}
+
+interface FieldError {
+  field: string
+  message: string
+}
+
+export const REGISTER_ERROR_MAP: Record<string, FieldError> = {
+  EMAIL_ALREADY_EXISTS: {
+    field: 'email',
+    message: 'An account with this email already exists.',
+  },
+  USERNAME_TAKEN: {
+    field: 'username',
+    message: 'That username is unavailable. Please choose a different one.',
+  },
+}

From e6fe3f9d5b9b837140e67e0e2f30e239c5036363 Mon Sep 17 00:00:00 2001
From: petahade <petahadeleke@gmail.com>
Date: Wed, 24 Jun 2026 19:22:36 +0000
Subject: [PATCH 3/4] feat(leaderboard): wire SeasonSelector to data-fetching
 with URL sync
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Extend `useLeaderboard` with an optional `season` param; appends
  `?season=<id>` to every API request and includes it in the React Query
  key so season changes trigger fresh fetches rather than reusing cached
  data for the wrong season.

- `/leaderboard` page: add a Season filter (alongside category/search/sort),
  initialize it from the `?season=` query param on page load, and update
  the URL via `router.push(..., { scroll: false })` on each change — no
  full reload, back/forward navigation preserved.

- `/leaderboards` page: wire existing `SeasonSelector` to the same URL-sync
  handler instead of isolated local state; season is now passed through to
  `useLeaderboard` so the API call reflects the selection.

- Both pages use `isFetching` (not just `isLoading`) to show skeleton rows
  and a `Loader2` spinner in the table heading while a season-specific
  request is in flight, preventing stale rankings from lingering on screen.

- Wrap both page components in a `<Suspense>` boundary required by Next.js
  14 for `useSearchParams` in client components.
---
 frontend/src/app/leaderboard/page.tsx  | 97 ++++++++++++++++++++++----
 frontend/src/app/leaderboards/page.tsx | 52 ++++++++++++--
 frontend/src/hooks/useLeaderboard.ts   | 16 ++++-
 3 files changed, 142 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app/leaderboard/page.tsx b/frontend/src/app/leaderboard/page.tsx
index 23f4b22..c24cdd3 100644
--- a/frontend/src/app/leaderboard/page.tsx
+++ b/frontend/src/app/leaderboard/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useMemo } from "react";
+import React, { useState, useEffect, useCallback, useMemo, Suspense } from "react";
+import { useSearchParams, useRouter, usePathname } from "next/navigation";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
 import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
@@ -12,8 +13,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/Select";
-import { Image as ImageIcon, ArrowUp, ArrowDown, ChevronLeft, ChevronRight, Trophy } from "lucide-react";
-import type { LeaderboardPlayer } from "@/types/leaderboard";
+import { ArrowUp, ArrowDown, ChevronLeft, ChevronRight, Trophy, Loader2 } from "lucide-react";
 import type { LeaderboardCategory } from "@/types/leaderboard";
 import { useLeaderboard } from "@/hooks/useLeaderboard";
 
@@ -30,6 +30,16 @@ const CATEGORIES: { value: LeaderboardCategory; label: string }[] = [
   { value: "casual", label: "Casual" },
 ];
 
+const SEASONS: { id: string; label: string }[] = [
+  { id: "current", label: "Current Season" },
+  { id: "season-5", label: "Season 5" },
+  { id: "season-4", label: "Season 4" },
+  { id: "season-3", label: "Season 3" },
+  { id: "season-2", label: "Season 2" },
+  { id: "season-1", label: "Season 1" },
+  { id: "all-time", label: "All Time" },
+];
+
 const SORT_COLUMNS = ["eloRating", "wins", "winRate", "matchesPlayed"] as const;
 type SortColumn = (typeof SORT_COLUMNS)[number];
 
@@ -186,10 +196,15 @@ function SkeletonRows({ count }: { count: number }) {
 }
 
 // ---------------------------------------------------------------------------
-// Main page
+// Main page content (inner — uses useSearchParams)
 // ---------------------------------------------------------------------------
-export default function LeaderboardPage() {
+function LeaderboardContent() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
   const [category, setCategory] = useState<LeaderboardCategory>("global");
+  const [season, setSeason] = useState(() => searchParams.get("season") ?? "current");
   const [search, setSearch] = useState("");
   const [debouncedSearch, setDebouncedSearch] = useState("");
   const [sortBy, setSortBy] = useState<SortColumn>("eloRating");
@@ -197,6 +212,22 @@ export default function LeaderboardPage() {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState<PageSize>(25);
 
+  const handleSeasonChange = useCallback(
+    (newSeason: string) => {
+      setSeason(newSeason);
+      setPage(1);
+      const params = new URLSearchParams(searchParams.toString());
+      if (newSeason === "current") {
+        params.delete("season");
+      } else {
+        params.set("season", newSeason);
+      }
+      const qs = params.toString();
+      router.push(`${pathname}${qs ? `?${qs}` : ""}`, { scroll: false });
+    },
+    [router, pathname, searchParams],
+  );
+
   // Debounce search
   useEffect(() => {
     const t = setTimeout(() => setDebouncedSearch(search), 350);
@@ -211,10 +242,11 @@ export default function LeaderboardPage() {
   const offset = (page - 1) * pageSize;
 
   // Fetch from the real API via useLeaderboard
-  const { data, isLoading, isError, refetch } = useLeaderboard(
+  const { data, isLoading, isFetching, isError, refetch } = useLeaderboard(
     category,
     pageSize,
-    offset
+    offset,
+    season,
   );
 
   // Derived values
@@ -275,7 +307,7 @@ export default function LeaderboardPage() {
           <CardTitle className="text-base">Filters</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
             {/* Search */}
             <div className="space-y-1.5">
               <label htmlFor="search-player" className="text-sm font-medium">
@@ -311,6 +343,25 @@ export default function LeaderboardPage() {
               </Select>
             </div>
 
+            {/* Season */}
+            <div className="space-y-1.5">
+              <label htmlFor="season-filter" className="text-sm font-medium">
+                Season
+              </label>
+              <Select value={season} onValueChange={handleSeasonChange}>
+                <SelectTrigger id="season-filter">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {SEASONS.map((s) => (
+                    <SelectItem key={s.id} value={s.id}>
+                      {s.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
             {/* Sort */}
             <div className="space-y-1.5">
               <label htmlFor="sort-by" className="text-sm font-medium">
@@ -339,10 +390,13 @@ export default function LeaderboardPage() {
       {/* Rankings table */}
       <Card>
         <CardHeader className="pb-3">
-          <CardTitle className="text-base">
+          <CardTitle className="text-base flex items-center gap-2">
             Rankings
+            {isFetching && !isLoading && (
+              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" aria-label="Loading season data…" />
+            )}
             {!isLoading && totalCount > 0 && (
-              <span className="ml-2 text-sm font-normal text-muted-foreground">
+              <span className="text-sm font-normal text-muted-foreground">
                 {totalCount.toLocaleString()} players
               </span>
             )}
@@ -423,7 +477,7 @@ export default function LeaderboardPage() {
                     </tr>
                   </thead>
                   <tbody>
-                    {isLoading ? (
+                    {isFetching ? (
                       <SkeletonRows count={pageSize} />
                     ) : visibleEntries.length === 0 ? (
                       <tr>
@@ -515,7 +569,7 @@ export default function LeaderboardPage() {
               </div>
 
               {/* Pagination */}
-              {!isLoading && totalCount > 0 && (
+              {!isFetching && totalCount > 0 && (
                 <Pagination
                   page={page}
                   totalPages={totalPages}
@@ -528,7 +582,7 @@ export default function LeaderboardPage() {
                     setPageSize(s);
                     setPage(1);
                   }}
-                  isLoading={isLoading}
+                  isLoading={isFetching}
                 />
               )}
             </>
@@ -538,3 +592,20 @@ export default function LeaderboardPage() {
     </div>
   );
 }
+
+// ---------------------------------------------------------------------------
+// Page export — wraps content in Suspense for useSearchParams
+// ---------------------------------------------------------------------------
+export default function LeaderboardPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex items-center justify-center min-h-[200px]">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      }
+    >
+      <LeaderboardContent />
+    </Suspense>
+  );
+}
diff --git a/frontend/src/app/leaderboards/page.tsx b/frontend/src/app/leaderboards/page.tsx
index 133aa82..4a257c0 100644
--- a/frontend/src/app/leaderboards/page.tsx
+++ b/frontend/src/app/leaderboards/page.tsx
@@ -1,6 +1,8 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useCallback, Suspense } from "react";
+import { useSearchParams, useRouter, usePathname } from "next/navigation";
+import { Loader2 } from "lucide-react";
 import { LeaderboardTable } from "@/components/leaderboard/LeaderboardTable";
 import { CategorySelector } from "@/components/leaderboard/CategorySelector";
 import { SeasonSelector } from "@/components/leaderboard/SeasonSelector";
@@ -9,13 +11,32 @@ import { LeaderboardFilters } from "@/components/leaderboard/LeaderboardFilters"
 import { useLeaderboard, useLeaderboardStats } from "@/hooks/useLeaderboard";
 import type { LeaderboardCategory } from "@/types/leaderboard";
 
-export default function LeaderboardsPage() {
+function LeaderboardsContent() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
   const [category, setCategory] = useState<LeaderboardCategory>("global");
-  const [season, setSeason] = useState("current");
+  const [season, setSeason] = useState(() => searchParams.get("season") ?? "current");
   const [sortBy, setSortBy] = useState<"points" | "wins" | "winRate">("points");
   const [searchQuery, setSearchQuery] = useState("");
 
-  const { data: leaderboardData, isLoading } = useLeaderboard(category, 100, 0);
+  const handleSeasonChange = useCallback(
+    (newSeason: string) => {
+      setSeason(newSeason);
+      const params = new URLSearchParams(searchParams.toString());
+      if (newSeason === "current") {
+        params.delete("season");
+      } else {
+        params.set("season", newSeason);
+      }
+      const qs = params.toString();
+      router.push(`${pathname}${qs ? `?${qs}` : ""}`, { scroll: false });
+    },
+    [router, pathname, searchParams],
+  );
+
+  const { data: leaderboardData, isLoading, isFetching } = useLeaderboard(category, 100, 0, season);
   const { data: statsData } = useLeaderboardStats(category);
 
   const entries = leaderboardData?.entries || [];
@@ -65,7 +86,7 @@ export default function LeaderboardsPage() {
         {/* Filters */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
           <CategorySelector category={category} onChange={setCategory} />
-          <SeasonSelector season={season} onChange={setSeason} />
+          <SeasonSelector season={season} onChange={handleSeasonChange} />
           <div className="md:col-span-1">
             <LeaderboardFilters onSearch={setSearchQuery} />
           </div>
@@ -77,7 +98,7 @@ export default function LeaderboardsPage() {
         {/* Leaderboard Table */}
         <div className="bg-surface/50 rounded-lg p-6 backdrop-blur border border-border">
           <div className="flex justify-between items-center mb-6">
-            <h2 className="text-2xl font-bold text-white">
+            <h2 className="text-2xl font-bold text-white flex items-center gap-2">
               {category === "global"
                 ? "Global Rankings"
                 : category === "tournaments"
@@ -85,6 +106,9 @@ export default function LeaderboardsPage() {
                   : category === "casual"
                     ? "Casual Rankings"
                     : "Ranked Rankings"}
+              {isFetching && !isLoading && (
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" aria-label="Loading season data…" />
+              )}
             </h2>
             <div className="text-sm text-muted-foreground">
               {filteredEntries.length} players
@@ -93,7 +117,7 @@ export default function LeaderboardsPage() {
 
           <LeaderboardTable
             entries={filteredEntries}
-            isLoading={isLoading}
+            isLoading={isFetching}
             sortBy={sortBy}
             onSortChange={(col) => setSortBy(col as any)}
           />
@@ -102,3 +126,17 @@ export default function LeaderboardsPage() {
     </div>
   );
 }
+
+export default function LeaderboardsPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex items-center justify-center min-h-[200px]">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      }
+    >
+      <LeaderboardsContent />
+    </Suspense>
+  );
+}
diff --git a/frontend/src/hooks/useLeaderboard.ts b/frontend/src/hooks/useLeaderboard.ts
index 16ffa01..575aef9 100644
--- a/frontend/src/hooks/useLeaderboard.ts
+++ b/frontend/src/hooks/useLeaderboard.ts
@@ -9,12 +9,22 @@ import {
 
 const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000/api/v1'
 
-export const useLeaderboard = (category: string, limit = 100, offset = 0) => {
+export const useLeaderboard = (
+    category: string,
+    limit = 100,
+    offset = 0,
+    season?: string,
+) => {
     return useQuery({
-        queryKey: ['leaderboard', category, limit, offset],
+        queryKey: ['leaderboard', category, limit, offset, season],
         queryFn: async () => {
+            const params = new URLSearchParams({
+                limit: String(limit),
+                offset: String(offset),
+            })
+            if (season) params.set('season', season)
             const res = await fetch(
-                `${API_BASE}/leaderboards/${category}?limit=${limit}&offset=${offset}`
+                `${API_BASE}/leaderboards/${category}?${params}`
             )
             if (!res.ok) throw new Error('Failed to fetch leaderboard')
             return res.json() as Promise<LeaderboardResponse>

From 74c45bba07643f00d6995c712d5ca9391f75e16b Mon Sep 17 00:00:00 2001
From: petahade <petahadeleke@gmail.com>
Date: Wed, 24 Jun 2026 19:27:43 +0000
Subject: [PATCH 4/4] fix(match): open replay URL in new tab with security
 attributes and URL validation

The "Watch Replay" button previously used Next.js <Link>, which routes
internally and provides no `target` or `rel`, so clicking it navigated
the current tab via the client-side router rather than opening the
external replay service.

Changes:
- Replace <Link> with a native <a> element carrying `target="_blank"` and
  `rel="noopener noreferrer"` to open replays in a new tab and prevent
  reverse tabnabbing.
- Add `isValidHttpUrl` helper that runs the value through the URL
  constructor and asserts an http/https protocol, guarding against empty
  strings, whitespace-only values, and malformed or non-HTTP URLs.
- Derive `replayUrl` by trimming the raw field value and `hasReplay` by
  running validation, so the button is never rendered for invalid inputs.
- Add `aria-label="Watch match replay (opens in new tab)"` for keyboard
  and screen reader users, and mark the decorative Play icon as
  `aria-hidden="true"` to avoid duplicate announcements.
---
 .../src/components/match/MatchDetailView.tsx  | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/match/MatchDetailView.tsx b/frontend/src/components/match/MatchDetailView.tsx
index 049d6a8..cd27b6d 100644
--- a/frontend/src/components/match/MatchDetailView.tsx
+++ b/frontend/src/components/match/MatchDetailView.tsx
@@ -22,6 +22,15 @@ import {
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 
+function isValidHttpUrl(value: string): boolean {
+  try {
+    const { protocol } = new URL(value);
+    return protocol === "http:" || protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
 interface MatchDetailViewProps {
   match: MatchDetail;
   currentUserId?: string;
@@ -37,6 +46,9 @@ export function MatchDetailView({
   const player1Won = match.winnerId === match.player1Id;
   const player2Won = match.winnerId === match.player2Id;
 
+  const replayUrl = match.replayUrl?.trim() ?? "";
+  const hasReplay = replayUrl.length > 0 && isValidHttpUrl(replayUrl);
+
   return (
     <div className="space-y-6">
       <Card>
@@ -52,12 +64,17 @@ export function MatchDetailView({
               </p>
             </div>
             <div className="flex gap-2">
-              {match.replayUrl && (
+              {hasReplay && (
                 <Button variant="outline" size="sm" asChild>
-                  <Link href={match.replayUrl}>
-                    <Play className="h-4 w-4 mr-2" />
+                  <a
+                    href={replayUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Watch match replay (opens in new tab)"
+                  >
+                    <Play className="h-4 w-4 mr-2" aria-hidden="true" />
                     Watch Replay
-                  </Link>
+                  </a>
                 </Button>
               )}
               {match.canDispute && (