movieloop-frontend/CHANGELOG.md

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

History prior to 1.1.0 has not yet been backfilled from git.

[Unreleased]

[2.4.0] - 2026-09-12

Added

• The app icon: Safari, the iOS home screen, Android install and push notifications now show the Movie Loop mark on the stage colour instead of the old film-reel artwork, with a maskable variant so Android no longer letterboxes it. npm run icons re-renders every PNG from the SVG sources with Inkscape.

[2.3.0] - 2026-09-12

A look-and-feel pass. The app now has one visual identity - Movie Loop - with the closed loop as its only bold element.

Added

• A display typeface (Bricolage Grotesque) for the wordmark, page titles, the puzzle statement and the score, alongside Geist for everything else, and a declared type scale with a 12px floor.
• A logo mark - an open ring with the missing link in the gap - beside the wordmark, on the sign-in and 404 pages, in the completion dialog, and as an SVG favicon.
• The loop closes on screen: connectors light up top to bottom, a gold line draws from the last row back to Movie A, the closing row glows, and the result arrives after - in solo, versus, async and game-night play alike. The sequence scales with the chain's length. Under reduced motion the finished loop simply appears and the result opens at once.
• The Home page shows a real finished loop (Speed to Apocalypse Now and back) in place of the how-to-play card; the ? in the header keeps the full rules.
• Posters and photos fall back to placeholder art if TMDB no longer serves them, instead of showing a broken image.
• PageHeader, MovieMarker and LogoMark components; difficulty badges now carry ordinal pips.

Changed

• Gold is the primary colour in both themes; it no longer flips to indigo in light mode. The dark background is a true indigo-slate rather than near-black.
• Movie A and Movie B are identified by the poster's ring and an A/B chip, in the blue and magenta of three-strip Technicolor, instead of colouring whole rows. Green is reserved for online/ready states and no longer means "correct".
• The timer, difficulty badges, trophies, win/lose states and score lines use the palette tokens instead of stock red/green/yellow.
• The game screen states the puzzle in a sentence ("Toy Story to Cast Away and back.") with the timer, link count and next objective on one line; the two movie cards that repeated the top of the chain are gone. Posters in the chain are larger.
• Home, Daily, Leaderboard, Profile, Achievements, Endless, Custom, Login, Game review, Versus, Game night, Friends and Admin share one left-aligned page header, hairline lists instead of card grids, and sentence-case copy. Profile shows the streak large and the rest of the record as a ledger, with account settings last.
• Copy: "Quick Play" is "Play now", "Ranks" is "Leaderboard", "Passed Movie B" is a changing objective ("Next: reach …", "Next: back to …", "Loop closed"), "Connected!" is "Linked", "Congratulations!" is "Loop closed.", and empty states say what to do next.
• The daily page shows the "not generated yet" state as an ordinary notice rather than red error text.

Fixed

• An opponent who has not moved yet showed "-1 links"; an empty chain now counts as zero.

Removed

• The confetti overlay; the loop-closing sequence replaces it.
• Stock Tailwind palette colours from game components, uppercase table headers and labels, and the text-7xl/text-8xl sizes.

[2.2.3] - 2026-09-12

The first production deploy of the push opt-in.

Fixed

• Enabling push notifications no longer fails with "Validation failed". The browser's PushSubscription.toJSON() includes expirationTime, and it was being sent verbatim to a server schema that is deliberately strict about unknown fields. The client now sends exactly what the server accepts - endpoint and keys - and refuses an incomplete subscription rather than sending it. (The server also accepts the field now; either side alone fixes it.) Nothing had ever called this path before 2.2.0, and the test doubles were shaped like the schema rather than like a browser.

Changed

• The CSP hash for the inline theme script is computed at build time from the index.html that is actually shipped, copied into the image and read at start, instead of being hardcoded in the container's start-up script behind a comment asking for it to be regenerated by hand. The bytes are what the browser hashes, so an edit to the script - or a checkout with different line endings - would have silently blocked the page's own theme script. The container now refuses to start without the file rather than serve a policy that blocks its own page. Verified against the built image: the header's hash equals the hash of the served script. (Investigating a CSP console message in production is what surfaced this; the served page turned out to be correct, and that message came from a browser extension's injected script, which the policy is right to refuse.)
• Every text file is checked out with LF on every platform (.gitattributes).

[2.2.2] - 2026-09-12

Found by playing the app end to end against a clean-install development stack before the first push - a Quick Play, a Custom Game loop closed and scored, a hint, an undo, and every anonymous route.

Fixed

• No more stale results after picking an actor or movie. Selecting an actor clears the input and flips the search to movie mode, but the 300ms debounce still held the actor's name, so a movie search for "Daniel Craig" ran and opened a listbox of results under an empty box. An empty input now means nothing to search, whatever the debounce holds.
• The hint button says what a hint costs. It read "-150 pts"; the server charges 200 (150 is the duplicate penalty).
• A day with no daily challenges yet reads as what it is. The API answers 404 before the midnight job has run - a fresh install, or a failed job - and the page called that "Failed to load today's challenges", which reads as an outage. It now says they have not been generated yet and when they will be.
• Requests the page abandoned on purpose (navigating away mid-fetch aborts them) are no longer logged as [API Error] canceled - two per page change, burying the real ones.

[2.2.1] - 2026-09-12

The frontend test foundation (WP-19: the frontend half of L1), and the defects it turned up.

Fixed

• Joining an open Game Night room that refuses you shows why. The error was set but only rendered inside the password prompt, which a passwordless join never opens - WP-10 fixed the password path and left this one silent.
• The remove-friend button has an accessible name ("Remove as a friend"). It rendered only an icon, the one icon-only control the accessibility pass missed; a screen reader announced "button" next to a destructive action.
• Signing out from Profile lands on the home page, as the button intends. The page's own auth guard re-ran the moment the user cleared and sent them to the sign-in screen instead.
• The sign-in page redirects someone who is already signed in to their profile, and says so when the session expired: the API client has sent expired sessions to /login?expired=1 since WP-10, and nothing read it, so being signed out by an expired token looked identical to signing out.
• Starting a game reports failure instead of losing it. Quick Play and Endless awaited the TMDB pick with no catch - a failed request, or a page with fewer than two usable films, was an unhandled rejection with nothing on screen - and the button only disabled itself during startGame, so a second click during the pick started a second game. Every start page (Quick Play, Endless, Custom, Daily) also navigated to /game whether or not the game had started; a failure bounced off that page's idle redirect with the store's message never displayed. startGame now reports 'started' or 'failed', and each page shows the reason and stays put.

Changed

• npm run test:cov is what CI runs: the 90% thresholds codified in WP-14 are enforced, having been cleared - 14% to 99% lines, 12% to 97% branches, 105 to 1,112 tests across 93 files. Every source file is above the bar on its own; there are no per-file exceptions.
• The pair picker shuffles by random key instead of an in-place Fisher-Yates, removing three index guards that could not be reached.

[2.2.0] - 2026-09-11

Repository hygiene (WP-17: L2, L4, M9, M35, the frontend half of the audit's section 3 prune list). Minor: push notifications become usable, and nothing a player could reach was removed. The admin console's maintenance jobs need backend 3.0.0.

Added

• Push notifications can be turned on. Profile → Notifications has the toggle. The whole browser half of the push stack - the service worker's push and notificationclick handlers, the subscribe/unsubscribe calls, the server's VAPID key - had shipped for months with nothing calling it, so no browser ever held a subscription (M35). The prompt is asked from a click, as browsers require, and a refusal or a server without VAPID keys is explained in place rather than failing silently. If a subscription cannot be registered with the server, the browser-side one is rolled back so the two never disagree.
• The admin console's "Backfill Game Owners" card, for the job that re-attaches legacy games to their players. It reports how many were ambiguous - more than one player matched, so the server made no guess - alongside the count it re-attached.
• Tests for the push library, the subscription hook, the notifications section and the pair picker (45 tests; 105 in total).

Changed

• Admin maintenance jobs continue where they left off. Each one processes a page and, when more remains, the button becomes Continue and passes the server's cursor back. The three near-identical job cards are one component. The recalculate card also stopped printing "undefined leaderboard entries": its type declared a field the server had not sent for several releases.
• Endless mode and quick play pick pairs through one franchise-aware picker. Endless had its own copy with no franchise check, so it could serve The Fellowship of the Ring against The Two Towers; both copies also shuffled with sort(() => Math.random() - 0.5), which is neither uniform nor a valid comparator.
• The four game screens share one hook for the store wiring and label derivation they had each copied, and one search panel; the review page's read-only chain display is the live ChainDisplay in a static mode rather than a second component that had drifted from it. Verified byte-identical DOM across 21 rendered states before and after.
• formatTime and error-message extraction each exist once (lib/format, lib/error) instead of five and three times.
• noUncheckedIndexedAccess is on. Indexing now types as possibly undefined and the code handles it, with no non-null assertions added. Along the way, taking an initial with [0] became .charAt(0), which also stops an empty display name from throwing.
• The package is named movie-loop-frontend; it had kept the scaffold's frontend-temp.
• CI refuses to release a version whose v<version> git tag already exists on origin, before it builds anything, for the same reason the backend does.
• The stock Vite README is replaced with one that describes this app.

Fixed

• Whiplash in the preset pairs is TMDB id 244786; the table had 274870, a different film. Every preset title is now checked against what TMDB serves for its id.
• Checking whether push is subscribed no longer awaits navigator.serviceWorker.ready, which never settles when no worker is registered - the check hung on any page load before registration.
• getErrorMessage returns its fallback for a server error carrying an empty message array, rather than undefined.

Removed

• The dead src/api/index.ts barrel and the fourteen API functions it alone referenced, three orphaned types, the Vite scaffold SVGs, the unused scroll-area primitive and four unused dialog/sheet exports, and the _onGameStart escape hatch that two stores read but nothing ever set. Nothing a user could reach.

[2.1.0] - 2026-09-11

Accessibility (WP-16: audit section 2.8).

Added

• eslint-plugin-jsx-a11y (recommended rules) in the lint step, so an orphaned label, a clickable <div> or a missing ARIA attribute fails CI instead of shipping. It found 19 violations on arrival; all are fixed, none suppressed.
• A "Skip to content" link on every page, visually hidden until focused, that moves focus to the main region.
• Live regions where state used to change silently: link validation announces "Validating", a rejection (as an alert) and "Connected"; the versus and game-night lobby countdowns are assertive timers, so a screen-reader user is no longer dropped into a running match with no warning; the game-night player list announces players finishing or forfeiting.
• Tests for the notification popover's keyboard contract (9 tests).

Changed

• The notification bell is a real popover. It was a <div> with <div onClick> rows: nothing in it was focusable, nothing announced, no way to close it from the keyboard. The trigger now reports its state and the unread count in its name (Notifications, 3 unread), the panel is a labelled dialog the trigger controls, every notification is a button, the per-row controls have real names rather than tooltips, Escape closes and returns focus to the trigger, and the unread dot has text behind it.
• The Challenge Friend overlay is the UI kit's Dialog. It was a fixed <div> with no role, no focus trap and no Escape - Tab went straight through it into the page behind. Base UI supplies the dialog role, aria-modal, focus trapping, Escape and focus restoration.
• The search combobox follows the ARIA 1.2 pattern: role="combobox" with aria-expanded/aria-controls on the input itself, rather than the 1.1 wrapper-div-with-aria-owns form that current screen readers announce inconsistently. Verified live: the state flips and aria-controls resolves to the listbox.
• Every form control has a label. Sign-in/sign-up, the three change-password fields (which had only placeholders, and placeholders vanish once you type), the admin challenge form, custom game, game night's room form (including a join-password field that had nothing at all), the versus lobby form, the friend search and the chat message box. Labels above groups of buttons ("Difficulty", "Time Limit", "Movie A") are group labels via role="group"/aria-labelledby rather than a faked htmlFor.
• Every icon-only button has a name that says what it does: chat send, back, pagination, display-name save/cancel, notification actions, and three versus buttons whose content collapsed to a bare spinner while loading.
• The game header's "Passed Movie B" read the same text in both states - only the icon and colour changed - so a screen reader heard the wrong thing until B was reached. It now announces "Movie B reached" or "not yet reached", and the online indicator on the friends list has text behind the green dot.
• autoFocus is gone from the friend search. It skipped screen-reader users past the page heading; the field is one Tab away.
• Reduced motion is respected globally. A single stylesheet rule collapses every animation and transition when the OS preference is set; the confetti overlay does not render at all under it, since a still frame of confetti has no meaning.

[2.0.1] - 2026-09-11

Bundle and asset budget (WP-15: M26).

Added

• A test suite, where there was none: vitest with @testing-library/react and jsdom, run by npm test, with coverage via npm run test:cov. The first tests are the regression net for the audit's C1 - every multiplayer mode used to leave the completion modal on "Calculating score..." forever because no backend session was ever created - and for the chain-validation state machine in both its server-validated and anonymous client-side forms. 51 tests. Coverage thresholds of 90% (lines, branches, functions, statements) are codified in vite.config.ts; the suite does not meet them yet, so test:cov fails honestly while CI runs the plain npm test. Tests intercept the axios client rather than the API modules, because a second concurrent dynamic import() of a mocked aliased module resolved to the real file under vitest - measured, and it reached the development backend once.
• A test job in CI.

Changed

• Every page except Home loads on demand. App.tsx imported all 24 pages statically, so a first-time visitor downloaded the admin panel, three multiplayer modes and the preset-pair table before the landing page could render: one 682 KB chunk. Routes are now React.lazy behind a Suspense boundary, giving 56 chunks with pages at 2-11 KB each. Verified in a browser against the production build: the landing page fetches only the app chunk and vendor chunks; navigating to a route fetches that route's chunks and renders; a deep link into an authenticated route lazy-loads it, redirects to sign-in, and lazy-loads that too.
• Vendor code is split into separately cached chunks (vendor-react, vendor-router, vendor-ui, vendor-net) via manualChunks. The first load is not much smaller - the main chunk was 95% dependencies, and the dependency set is the load - but the chunk that changes on every deploy is now 50 KB (14 KB gzipped) rather than 682 KB, so a returning visitor after a deploy re-downloads the app, not React. Vite's 500 KB chunk warning no longer fires.

Fixed

• The favicon was an 888 KB image - PNG data under a .jpg name, 768x768 with a fully opaque alpha channel - fetched on every page load. It is now a 2.6 KB 32px PNG, with a 180px apple-touch-icon for iOS home screens.
• manifest.json declared that same file as both its 192x192 and 512x512 icon, typed image/jpeg. It now points at real 192px and 512px PNGs with the correct type, so installs get a correctly sized icon instead of a mislabelled one the browser has to rescale.
• The service worker's push notifications referenced /favicon.ico, which never existed; a push with no icon in its payload rendered blank. They use the 192px icon.

Known issues

• The useGameStore() selector item from M26 was already resolved in WP-10; the chain-validation hook subscribes per field.
• Not done, recorded for later: socket.io-client (~90 KB of vendor-net) ships to anonymous visitors because the page chrome's notification bell reaches the notification store, which imports it statically. Loading the socket client on demand would mean an async connect() in four stores - a change in its own right, not a bundle setting.

[2.0.0] - 2026-09-10

Container and response-header hardening (WP-13: M31, M34).

⚠ Breaking

• The production container now listens on 8080, not 80. nginx runs as an unprivileged user, and a non-root process cannot bind a privileged port without CAP_NET_BIND_SERVICE, which compose drops. Anything routing to this container must be repointed: in the homelab Traefik config that means traefik.http.services.movieloop.loadbalancer.server.port changes from 80 to 8080. The published mapping in docker-compose.prod.yml is updated here, but the Traefik label lives outside this repo and must be changed by hand.

Fixed

• Security headers are no longer dropped from most responses. nginx's add_header is not additive across levels: a block declaring any add_header of its own discards every header inherited from its parent. location /assets/ and location = /config.js each declared one, so X-Frame-Options, X-Content-Type-Options and Referrer-Policy were silently absent from every JavaScript and CSS response - which is most of what a browser loads. The headers now come from a snippet included in each location. Verified against the built image: 6 of 6 headers present on /, on a hashed /assets/*.js bundle, and on /config.js.
• config.js no longer interpolates API_URL unescaped. This used envsubst, which does no escaping, so a value containing a double quote closed the JavaScript string literal and everything after it became executable script on every page load. The value is now escaped when rendered. Operator-supplied, so not a likely attack - but the page hands its auth token to whatever origin that value resolves to, and a malformed value is now inert rather than executable.

Added

• A Content-Security-Policy, plus Strict-Transport-Security and Permissions-Policy. With the JWT in localStorage, CSP is the main compensating control against injected script and there was none. connect-src is derived at container start from API_URL, because the API is not same-origin in production - the app is served from one subdomain and the API from another, so naming it explicitly is required or every request and websocket would be blocked. The inline theme script in index.html runs before first paint to avoid a flash of the wrong theme and so cannot move to a file; it is allowed by SHA-256 hash rather than by unsafe-inline, which would have bought almost nothing. If that script is edited its hash must be regenerated in docker/40-render-config.sh or the page will not apply its theme.

Changed

• The production image is based on nginxinc/nginx-unprivileged:alpine and runs as uid 101 rather than root. It serves static files and never needed root. Verified in the built image: uid=101(nginx).
• envsubst is no longer installed, since the entrypoint renders config.js itself in order to escape the value.

[1.3.0] - 2026-09-10

Session handling and effect correctness.

Fixed

• An expired or revoked session no longer leaves the app half signed in. The response interceptor only wrote to the console, so the nav still showed your name while every request quietly failed. A 401 now clears the token and returns you to sign-in. Signing in with the wrong password is unaffected - that is an answer, not an expired session.
• Signing out ends the whole session. It disconnected the notifications socket and nothing else, leaving the chat, versus and game night sockets open with a token that had just been removed, and the friends and game stores populated - so signing in as someone else on the same tab showed the previous person's friend list and pending-request badge.
• Leaving a match no longer carries its result into the next one. Disconnecting cleared only the socket, so the match id, result and score survived and the next match opened showing the previous match's completion modal.
• Reconnecting no longer duplicates everything. All four sockets tested whether the existing connection was connected rather than whether it existed, so one that was mid-reconnect got replaced without being closed; the abandoned socket kept its own handlers and delivered every event a second time.
• Game night spectators are detected again. The check decoded the session token with atob, which rejects the base64url encoding tokens actually use, so it threw inside a socket handler and the spectator flag was never set.
• Reloading your profile no longer discards a game in progress. Effects depended on the whole user object, which is rebuilt on every profile load, so they re-ran when nothing had changed - and in an async match the re-run reset the board mid-game.
• Undo is applied in order and no longer drifts from the server. Rapid undos fired overlapping requests at a server that removes one link per call, and a failure was only logged while the local chain had already been shortened.
• Leaving a page cancels its in-flight requests instead of letting them land afterwards.
• The friends page no longer removes other components' socket listeners when it unmounts.
• Copying a result no longer leaves a timer running after the page closes.
• Share links point at the deployment that produced them, rather than always at production.

Security

• The runtime API setting is escaped when written into the page. It was substituted raw, so a value containing a quote ended the string and the rest became executable JavaScript on every page load - and the page hands its auth token to whatever that value resolves to. A malformed value is now also rejected on read, falling back to the default.

Removed

• The difficulty selector in Endless mode. It was never applied to anything: difficulty is derived from cast analysis on the server, and Endless builds its pairs in the browser, so the control silently did nothing. The genre and decade filters are unaffected.

[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

• Shell scripts and Dockerfiles are pinned to LF so a Windows checkout no longer copies CRLF line endings into the container image. docker/40-render-config.sh was affected; nginx sources it rather than executing it, so nothing was visibly broken, but the file was wrong in the image.

[1.2.1] - 2026-09-09

Fixed

• All high-severity dependency advisories cleared (npm audit: 23 -> 0), entirely within existing semver ranges.
• Five further set-state-in-effect violations caught by the updated react-hooks plugin, including search state that was cleared on every keystroke below the search threshold, and an async submit guard that re-ran its own effect.

Changed

• In-range dependency updates, notably react 19.2 -> 19.3 and @base-ui/react 1.2 -> 1.8.
• shadcn, tailwindcss, @tailwindcss/vite and tw-animate-css moved to devDependencies. They are build-time only - shadcn is a scaffolding CLI with no runtime imports - but as runtime dependencies they pulled msw, @babel/core and ts-morph into the production dependency tree that vulnerability scanning reads.

[1.2.0] - 2026-09-09

Changed

• Game completion, hints and all versus submissions follow the server's authoritative scoring contract: completion posts no payload, hints go through the server (which also records them), and match submissions send a session id rather than a score.

Fixed

• Stale hints are cleared when the chain changes; the previous movie's cast used to stay on screen after picking an actor another way.

[1.1.0] - 2026-09-09

Fixed

• Versus, Game Night and Async Versus can complete a match again. None of the three ever created a backend game session, so no score was produced, nothing was submitted, the opponent was never notified, and the completion modal had no way out.
• Chain links may be reused. Repeating an actor or movie was rejected outright instead of being allowed and penalised, which could strand a player mid-chain. Reuse now warns that it costs points, and the penalty appears in the score breakdown.
• A failed async score submission is no longer retried on every render.
• Confetti no longer re-randomises mid-flight.
• Page data fetches are cancelled on unmount, so a late response cannot write into a view the player has left.
• Profile stats and history load independently, fixing a guard that could stop the stats request from ever re-running.

Changed

• The dev container starts the Vite server correctly and now picks up source edits, so hot reload works.
• The lint CI job fails on warnings, and the two React hook rules that had been demoted to warnings are back at error.