fix(versus): handle a withheld movie pair on the async leaderboard

Fallout from the backend's 2.0.0, found by checking the frontend against a
running backend rather than by compiling it.

The async leaderboard declared `movieATitle` and `movieBTitle` as required
and rendered them directly. The backend now withholds the pair from anyone
who has not played that match - the pair is the puzzle - so for a
non-participant both are absent and the heading rendered as a bare "↔"
between two blanks.

TypeScript could not catch this: these API types are hand-written rather than
generated from the backend, so a field the server stops sending still
compiles. The types now say the titles are optional, which is the truth, and
the page explains that the movies are hidden until you play.

Every path the UI offers to this page belongs to a participant, so this was
only reachable by opening the URL directly - but the type was wrong either
way, and a wrong type is what hides the next one.

CHANGELOG.md

@@ -9,6 +9,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.3] - 2026-09-10
+
+### Fixed
+
+- The async challenge leaderboard no longer shows an empty heading to anyone
+  who has not played that match. The backend now withholds the movie pair from
+  non-participants - the pair is the puzzle - so the two titles arrive absent
+  rather than empty, and the page rendered a bare separator between nothing.
+  It now says the movies are hidden until you play, and the type reflects that
+  they are optional.
+
 ## [1.2.2] - 2026-09-09
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frontend-temp",
   "private": true,
-  "version": "1.2.2",
+  "version": "1.2.3",
   "type": "module",
   "license": "MIT",
   "author": "Kevin Riehl",

src/api/versus.ts

@@ -138,9 +138,12 @@ export interface AsyncLeaderboardResponse {
     lobbyName: string | null;
     expiresAt: string | null;
     status: string;
-    movieATitle: string;
+    // Absent unless the viewer has played this match: the pair is the puzzle,
+    // so the server withholds it from anyone who could still be given it as a
+    // challenge. Render a placeholder rather than an empty heading.
+    movieATitle?: string;
     movieAReleaseDate?: string | null;
-    movieBTitle: string;
+    movieBTitle?: string;
     movieBReleaseDate?: string | null;
   };
   creator: { id: string; username: string };

src/pages/AsyncMatchLeaderboard.tsx

@@ -98,14 +98,20 @@ export default function AsyncMatchLeaderboard() {
                 {match.lobbyName || `${data.creator.username}'s challenge`}
               </p>
               <p className="mt-1 text-sm text-muted-foreground">
-                {match.movieATitle}
-                {match.movieAReleaseDate
-                  ? ` (${releaseYear(match.movieAReleaseDate)})`
-                  : ''}{' '}
-                &harr; {match.movieBTitle}
-                {match.movieBReleaseDate
-                  ? ` (${releaseYear(match.movieBReleaseDate)})`
-                  : ''}
+                {match.movieATitle && match.movieBTitle ? (
+                  <>
+                    {match.movieATitle}
+                    {match.movieAReleaseDate
+                      ? ` (${releaseYear(match.movieAReleaseDate)})`
+                      : ''}{' '}
+                    &harr; {match.movieBTitle}
+                    {match.movieBReleaseDate
+                      ? ` (${releaseYear(match.movieBReleaseDate)})`
+                      : ''}
+                  </>
+                ) : (
+                  'Movies hidden until you play this challenge'
+                )}
               </p>
             </div>
             <DifficultyBadge difficulty={match.difficulty} />