feat(nav): simplify navigation and terms (#57)

One glossary (docs/GLOSSARY.md) for all de and en texts.
Five nav items; phones get a bottom bar with labels.
Community page with following, followers, player search and stats.
The bell is the one place for notes, news and open questions.
Settings in tabs; auto-save is silent and rolls back on error.
Questions page explains itself; removed games are a library filter.
Own profile: menu link, public chip, copy link, private hint.
Points page starts with a short summary; stats use status colors.

Dockerfile

@@ -12,8 +12,7 @@ RUN npm run build
 # Serve the static files using a lightweight web server
 FROM nginx:alpine
 COPY --from=builder /app/dist /usr/share/nginx/html
-# nginx.conf is a template. An env var that is not set stays in it as ${...}, and nginx then fails to start.
-ENV AUTH_HOST="" API_HOST=""
+COPY --chmod=0755 docker-entrypoint.d/10-require-hosts.sh /docker-entrypoint.d/
 COPY nginx.conf /etc/nginx/templates/default.conf.template
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,59 +1,107 @@
 # To Be Played – Frontend
 
-Web app of **To Be Played**, a Steam backlog tracker: import your Steam library, decide what to play, and track what
-you finished. The UI is in German and English, with light and dark mode.
+Web app of **To Be Played**, a backlog tracker: import your Steam and PlayStation libraries or add games by hand,
+decide what to play, and track what you finished. The UI is in German and English, with light and dark mode.
 
 ![Library](docs/screenshots/library-desktop-dark.png)
 
-| Game detail | Public profile | Mobile |
-|---|---|---|
-| ![Game detail](docs/screenshots/detail-desktop-dark.png) | ![Public profile](docs/screenshots/profile-desktop-dark.png) | ![Mobile library](docs/screenshots/library-mobile-dark.png) |
+| Dashboard | Game detail | Public profile | Mobile |
+|---|---|---|---|
+| ![Dashboard](docs/screenshots/dashboard-desktop-dark.png) | ![Game detail](docs/screenshots/detail-desktop-dark.png) | ![Public profile](docs/screenshots/profile-desktop-dark.png) | ![Mobile library](docs/screenshots/library-mobile-dark.png) |
 
-To Be Played is split into three repositories:
+To Be Played is split into four repositories:
 
 | Repository | Role |
 |---|---|
 | ToBePlayed-Auth | Users, login, settings, signs JWTs |
 | ToBePlayed-Core | Steam library, backlog, wishlist, stats; verifies JWTs |
 | **ToBePlayed-Frontend** (this one) | React single-page app |
+| ToBePlayed-Deployment | Docker Compose stack, env template, ROADMAP.md (history), plans |
 
 ## Features
 
+- **Navigation**: five items (Dashboard, Library, Play next, Stats, Community) in the header from `md` (icon and label);
+  on a phone a bottom bar with the same five items (`BottomNav`, `src/components/navItems.js`) and a header with logo,
+  points chip, bell and avatar. Search ("Find games"), the wishlist and the queue are reached from the Library. The avatar
+  menu has "My public profile", settings, points, What's new and the role pages; an admin's pending count is amber.
+  Tab pages (`/settings`, `/community`) use `?tab=` (`TabNav`, `tabOf`); an unknown tab shows the first one.
+- **Texts** follow one [glossary](docs/GLOSSARY.md): one name per idea in German and English (checked by `src/i18n.test.js`).
 - **Dashboard** with an edit mode ("Customize"): the user orders, hides and resizes the tiles (small = half width
-  and less content, large = double width and more), and can add the stat groups of "Your stats" as tiles. Stored
-  in Auth, so it follows the user to the phone; "Reset" goes back to the default. Tiles: most played games, games in progress, "Pile of Shame" with backlog hours, its trend of the last 90
+  and less content, large = double width and more), and can add the stat groups of "Your stats" and a "Following" tile. Stored
+  in Auth, so it follows the user to the phone; "Reset" goes back to the default. Tiles: most played games and games in progress (one call, `GET /api/library/dashboard-games`), "Pile of Shame" with backlog hours, its trend of the last 90
   days ("this month: +N added, -N off the pile") and a random suggestion,
   Steam avatar and a banner from the most played game of the last two weeks, and an achievement card: unlocked
-  total, perfect games, average completion and the 5 games closest to 100 %.
-- **What to play next** (`/play-next`): three backlog picks for a time budget (up to 5 / 15 / 40 h or any) and a mood
-  (story, co-op, chill, action, scary from IGDB; speedrun from speedrun.com), high priority first, reroll without
-  repeats, and "Start playing" in one click.
+  total, perfect games, average completion and the 5 games closest to 100 %. The card counts PlayStation trophies too
+  (platinum = perfect) and also shows for a user with only a PlayStation link.
+- **Coming games**: a game that is not released yet (and nobody played) shows a "Coming <date>" badge in the library, on
+  the details page, in the stat game lists and on the public profile. The pile counts only the games Core sends in
+  `pileGames`, so coming games are not on it; Core never picks them.
+- **What to play next** (`/play-next`): seven rows of up to 3 backlog games each: queue (your own order),
+  next in series (the next part of a series you played), because you played (a similar game for each of your 3 most
+  played), same studio (a developer you played), from people you follow (a backlog game someone you follow finished or played 5 h or more), longest on your list, and mood picks. A time
+  budget (up to 5 / 15 / 40 h or any) filters all rows; a mood (story, co-op, chill, action, scary from IGDB; speedrun
+  from speedrun.com) only the mood row. Each row has its own reroll without repeats, and "Start playing" in one click.
+  On a phone each row scrolls sideways.
+- **Queue** (`/backlog`, second library tab): all backlog games in your own order. Move a game by drag (pointer
+  events, no library, so it works with touch), by the up and down buttons, or "move to top / bottom" in the menu. Each
+  move saves the whole list. The "Queue" dashboard tile shows the first games; the "Play next" row "Queue" shows the first games.
 - **Your stats** (`/stats`): totals and statuses; the pile in hours, in weeks at your pace of the last 90 days and in
   years of full-time work, and its oldest unplayed game; most played and most loyal games; top genres and moods;
   trips to the moon, the longest gaming day, games started but under one hour; finished games per year; games per platform.
+  The user picks a chart form per group (bars, pie, donut, line or list, `src/utils/statCharts.js`). Auth saves it
+  (`PUT /api/users/settings/stat-chart`).
 - **Click a number** (stats page, dashboard, public profile, landing page, Pile Points): a number, bar, row or year
   opens the games behind it in a dialog (a bottom sheet on phones), 40 per page with "Load more". In your own
   views the status counts and the pile link to the library with the filter instead. Not clickable: sums (playtime),
   averages, rates and the moon trips. The list always uses the same rules as the number.
-- **Pile Points** (`/points`): points for playing games off your pile (start, finish by time to beat, 100 %, month and
+- **Pile Points** (`/points`): a three-line summary on top (start +5, finish +30 to +80, 100 % +40; points buy looks), then the shop, then the detailed rules in a closed section and the history. Points for playing games off your pile (start, finish by time to beat, 100 %, month and
   streak bonuses; Core checks proof of play), spent in a small shop on an avatar border, a badge, a premium accent, a
   banner frame, an effect for 100 % games and an animated page or banner background (CSS and SVG in `effects.css`, two canvas engines in `EffectCanvas`; layers follow the mouse and the phone tilt, on iPhone after the switch in the settings),
   shown on the dashboard and the public profile. Twelve more items are unlock-only: they show locked with a progress bar
   until a goal is reached (games finished, 100 % games, weeks in a row, months with a smaller pile, months with more
   play time). Skins (`skins.css`, Pastel, Retro CRT, Cyberpunk bought, Steam unlocked) are full themes made of CSS
   variables; a skin wins over accent and corners, while badges, borders, frames and effects stay on top. The balance is in the header. Every effect stands still (canvas: one static frame, no loop) with the
-  system setting "reduce motion" or the "Reduce animations" switch in the settings.
+  system setting "reduce motion" or the "Reduce animations" switch in the settings. After every status save (game page,
+  Play Next "Start", Questions, add game) `usePointsCheck` asks Core `GET /api/rewards/games/{appid}`, reloads the wallet
+  when the balance moved and shows a toast ("+N points", "Already paid on ...", "No points yet: reason"). The game page
+  shows the paid rows and the reason per missing kind (`GamePointsLine`); `pointsNotice` in `utils/rewards.js` picks the
+  toast, the reason codes come from Core and `POINTS.REASONS` only maps them to texts. A finish without proof pays 10
+  early points (toast "+10 points; the rest comes with proof", game line "The rest of the finish points: play once on
+  Steam after finishing"), and the rest once Steam play proves it. A "Finished?" card on the Questions page shows
+  "Up to N points" from `GET /api/rewards/expected`; when that call fails the card shows no line.
+
+```mermaid
+flowchart LR
+    Save["Status save"] --> Check["usePointsCheck"]
+    Check -->|"GET /api/rewards/games/{appid}"| Core["Core: settle + paid rows + reasons"]
+    Check --> Toast["Toast"]
+    Check -->|balance moved| Wallet["reloadWallet: header"]
+    Core --> Line["GamePointsLine on the game page"]
+    Questions["Questions page"] -->|"GET /api/rewards/expected"| CoreExpected["Core /api/rewards/expected"]
+```
 - **Landing page**: next to the community numbers and the top games, three blocks: games per platform, top genres and
   finished games per year of all users.
-- **Library**: status filters, "short games" filter (up to 10 h), search, sorting by playtime, recently seen, newest
-  in library, rating or priority, paging. Each row shows the unlocked achievements.
-- **Editions**: an auditor links the editions of one game (Steam and PS5 copy, remaster, port) for every user. A user
-  who owns two or more of a linked set sees "Also in your library" on the details page, an "x2" badge in the library
-  and the filter "Hide duplicates"; the numbers count the set once. "Same game as..." on the details page asks the
-  auditors for a link.
+- **Library**: status filters, source filter (Steam, PlayStation, manual; a linked set matches on each of its sources), "short games" filter (up to 10 h), search, sorting by playtime, newest
+  in library, rating, priority, name, last played or time to beat (games never played or without a time to beat come last), page
+  numbers with Previous / Next. Each row shows the unlocked achievements, and its status badge is a menu: choosing a status saves at once
+  (with an Undo in the toast and the points check). While sorted by rating or priority the row shows them. A game you own on several
+  platforms is one row (Core's counted edition) with a small badge per platform next to the title (`PlatformIcons`:
+  ST, PS or the platform name, from `platforms[]`; lucide has no brand icons).
+- **Editions**: the editions of one game (Steam and PS5 copy, remaster, port) are linked automatically from IGDB's
+  "same game" key; an auditor can also link or unlink them for every user. A user who owns two or more of a linked
+  set sees "Also in your library" on the details page and an "x2" badge in the library; the library lists the set
+  once (no "Hide duplicates" filter any more), and the numbers count it once. The editions of a set share one status, rating and notes (the page
+  reloads after a save to show it). "Not the same game" splits the game off its set for this user only, and it stays
+  split. "Same game as..." on the details page asks the auditors for a link.
+- **Detail per platform**: the details page of a game with several platforms (or a PlayStation title on a Steam game)
+  shows `PlatformsCard` above the editions: one row per platform with playtime, last played and the achievement or
+  trophy progress of that platform, a total row, and a link to the edition whose page lists the achievements. The hero
+  playtime and the library card show the set total (`totalPlaytimeMinutes`); sorting, stats, dashboard cards and the public profile use the set total (Core V45); per row stay the playtime history, rewards and the played / never started counts.
 - **Add a game by name** for games outside Steam (PlayStation, Switch, Xbox, physical): search IGDB, pick a hit,
   a platform and optional hours. Works without a Steam ID. Games already in ToBePlayed come first. Check several
   hits to add them at once through the import review.
+  The **Find games** page (`/search`, a button in the library toolbar; a library search without a hit links to it) finds games by name: results with cover, year, platforms and an
+  "In library" badge; an own game opens its game page, any other hit opens a detail view with "Add".
 - **Import** (`/import`): a list (one title per line) or a CSV (title, platform, hours or minutes, status). Core
   matches the lines with IGDB and saves them in the background; the page shows the steps (queued with the imports
   before yours, searching on IGDB, your review, adding to the library, time to beat and moods, done) with the
@@ -78,7 +126,12 @@ To Be Played is split into three repositories:
 - **Platform everywhere**: each game shows its platform ("Steam" for Steam games). The favorite platform from the
   settings is preselected when a game is on it; otherwise a game on one platform gets that one, and a game on
   several waits for the user's pick.
-- **Game detail**: status, priority, 1–5 star rating, notes, achievements, time to beat (story / extras / 100 %),
+- **PlayStation trophies** (slice 3): the game detail shows one card per set, Steam first, then PS5 and PS4
+  (`GameAchievements`, grouped by `achievementSets`). A trophy has its type (bronze to platinum), rarity and a DLC tag;
+  a hidden trophy shows "Hidden trophy" until it is earned; a set whose list is not stored yet says it loads with the
+  next sync. The sync banner and inbox text say "achievements or trophies". Library tiles show the best set of a game.
+  The sync details list games whose last achievement this sync unlocked, with a button to set them to 100 %.
+- **Game detail**: the page shows the stored game at once (`?refresh=false`); when Core says `achievementsStale` a second call refreshes the achievements from Steam and replaces the data. Status, priority, 1–5 star rating, notes, achievements, time to beat (story / extras / 100 %),
   a link to the game's speedrun.com page when it has verified runs, a hint when Steam shows recent playtime for a
   game still in the backlog, and one to set the status to 100 % when
   every achievement is unlocked.
@@ -93,11 +146,13 @@ To Be Played is split into three repositories:
 - **Wishlist** with store price and discount.
 - **Steam account** linked in the settings with "Sign in through Steam": the user signs in on Steam and Auth gets
   the proved Steam ID, never a typed-in one. A Steam ID typed in before shows as "not verified" with a button to
-  verify it; unlinking is possible.
-- **Public profile** at `/u/<display name>`, opt-in in the settings, with perfect games and average completion.
+  verify it; unlinking is possible. After a successful link the settings page opens the dashboard (success toast),
+  where the first sync starts; the other outcomes (in use, cancelled, failed) stay on the settings page.
+- **Public profile** at `/u/<display name>`, opt-in in the settings (tab "Profile & community"), with perfect games and average completion. The owner sees a "Public" chip and "Copy link" on it; a private own profile says so and links to the settings.
   The owner arranges it with the same edit mode on the profile page itself (the tiles, incl. the stat groups of
   "Your stats"), and sets its look in the settings: accent, corners, banner and background from own game art
   ("Profile art" on a game's page). Visitors see the owner's look on that page only; light or dark mode stays theirs.
+- **Settings** (`/settings`) have tabs: Account & security, Appearance (with dark mode), Connections (Steam, PlayStation), Profile & community, About (build version). A switch or select saves at once, shows the new value right away, makes no success toast and goes back with an error toast when the save fails; a form with a Save button (name, password) keeps its success toast, and the name field asks before the user leaves with unsaved text.
 - **Appearance**: accent color, corner style, wide layout, reduce animations, page background and banner from your own game art.
   Saved in Auth, so it follows you to every device.
 - **Language**: kept in the browser and saved in Auth; after the login Auth's language wins when one is saved. Dark
@@ -106,9 +161,16 @@ To Be Played is split into three repositories:
 - **Registration** (`/register`): no invite code; the form asks for email and display name only (no password); the page says that the user gets a mail with a link, then an admin
   checks the request, and stays on "registration sent" after the send. Auth answers `409 PENDING_LIMIT_REACHED` while
   20 wait. The mail link opens `/confirm-email#<token>` (the token stays in the fragment and goes to Auth in a POST
-  body); the page asks for the password (and its repeat) and confirms on a button click, not on load, so mail scanners do not burn the link. An expired or used
-  link and the page after the send offer "send the link
-  again" (same answer for any address).
+  body); the page asks for the password (and its repeat, both with a show/hide toggle and the rules as helper text) and confirms on a button click, not on load, so mail scanners do not burn the link. Only a `410` (or a `400` that names the `token` field) shows "link
+  invalid"; any other `400` is a form error and keeps the typed password. An expired or used link and the page after
+  the send offer "send the link again" (same answer for any address). After the send the page shows the address used
+  and "Wrong address? Start over", which brings the form back. After the confirmation the page says that a mail comes
+  once an admin has approved the account (no waiting time, no login link).
+- **Login** (`/login`): the form checks both fields before it sends (zod, like the other forms) and has a show/hide
+  toggle on the password. Auth answers every failed login with `401` (a wrong password, an unknown address and an
+  unconfirmed one look the same), so after a `401` the page offers "Not confirmed yet? Send the link again" with the
+  typed address.
+- **Language default**: the cached language, else the browser language (`de*` gives German, any other English), else German.
 - **Forgot password** (`/reset-password`): the login page links to it. Without a fragment it asks for the email and
   shows the same text for any address. The mail link opens `/reset-password#<token>` (fragment, sent in a POST body on
   the button click only): the page asks for the new password twice. A used or expired link shows the email form again.
@@ -119,7 +181,8 @@ To Be Played is split into three repositories:
   a repaired cover comes back as `imageUrl`.
 - German and English, dark mode, mobile layout, session-expired message instead of a silent logout.
 - **Admin** (PLATFORM_ADMIN only, `/admin/users`): search the users, block, unblock and delete them (the email is
-  typed to confirm a delete). "View as" in the menu switches the own session to User or Auditor and back; a badge
+  typed to confirm a delete), and set the role of another user in the "Roles" dialog, which also lists the role
+  changes. "View as" in the menu switches the own session to User or Auditor and back; a badge
   shows the lower role. Auth checks every right on the server. Registrations that wait show "Waits" with Accept
   and Deny (a "Waiting only" filter lists just them); the menu shows how many wait, loaded again on every page change
   and menu opening. A request whose address is not confirmed shows "Not confirmed" and only a Delete button. The login tells a waiting user that the admin has not decided yet.
@@ -132,15 +195,40 @@ To Be Played is split into three repositories:
   automatic hint for 7 days, "Do not show again" for good, the 30 s auto close only for this browser session.
   Admins turn each on or off on `/admin/hints`. Hint and news text may use `**bold**` and `[text](url)` (an app
   path or https; anything else stays plain text); `HintText` renders React elements, never HTML.
-- **What's new**: a dialog on the dashboard shows the news entries the user has not seen yet, newest first. "Got it"
-  marks them seen in Auth; closing the dialog any other way shows them again on the next dashboard visit. `/whats-new`
-  (menu) lists all entries and marks them seen. Admins publish, preview, edit and delete entries on `/admin/news`.
+- **Follow users** (#27): a logged-in visitor follows the owner of a public profile with "Follow" on `/u/<name>`; the
+  Community page (`/community`) has the tabs "Following" ("Unfollow"), "Followers" ("Remove", a private follower shows as
+  "Private user"), "Find users" (search public profiles by name, `GET /api/follows/players?q=` in Core, 30 searches per
+  minute, only public profiles) and "Community stats" (the numbers of all users, also on the landing page). Core writes one inbox note per followed user and batch (new games, achievements, status changes, wishlist
+  adds; what the profile hides is left out). `/inbox` (the bell in the header) is the one place for what is new: an "N open questions" row that links to `/questions`,
+  the news the user has not seen (marked seen on open, "All news" links to `/whats-new`) and the newest 50 notes (marked
+  read on open). The bell badge is the sum of unread notes, unseen news and open questions (`useNotifications`, loaded on
+  every page change; 0 on `/inbox` itself, and open questions count again after the visit until answered); a digest note opens inline (click) and lists its games, achievements, status changes and wishlist
+  items, while you still follow the person and the part is public (5 achievements per game, then "show all"); a user
+  who goes private ends the follow with a note. Two more notes come from the user's own
+  PlayStation link (`PSN_EXPIRING` about 2 days before it ends, `PSN_EXPIRED` when it has ended), with a link to the
+  settings. Notes older than 90 days are deleted.
+  The feed links on (#52): the person's name goes to their profile while it is public (`profileName`), a game goes to
+  your own game page (`/library/<appid>`), and "on their profile" opens `/u/<name>?game=<appid>`, which shows that
+  game above the tiles (`ProfileGameCard`: status, playtime, achievements, only what the profile shares; one message
+  when it hides or does not have the game). A game you do not own opens a catalog view (`CatalogGameCard`, `GET
+  /api/library/games/<appid>/preview`) with an "Add to my library" button that opens the add search with the name filled
+  in. The "Following" tab (`/community?tab=following`, the old `/following` redirects there, #51) lists the people you follow, newest feed message first, with an initial
+  letter instead of an avatar, and "Unfollow"; the "Following" dashboard tile (opt-in via "Customize") shows the first
+  3, 5 or 10 of them and loads its own data.
+- **What's new**: unseen news entries show on `/inbox` (no dialog on the dashboard) and are marked seen in Auth when the
+  inbox opens. `/whats-new` (avatar menu) is the archive: it lists all entries and marks them seen. Admins publish, preview, edit and delete entries on `/admin/news`.
 - **Broadcast mail**: admins write a mail in both languages on `/admin/broadcasts`, send it to all active users or to
   picked ones, send a test to themselves, confirm with the real recipient count, and see the history with the counts.
 - **Welcome page**: `/welcome` opens once after the first login (Auth `settings.welcomeSeenAt` is null; only the
   dashboard redirects, deep links stay). Feature cards with links, two next steps (Steam, import) with checks from
-  `/me` and the library summary. "Let's go" and "Skip" stamp it in Auth and open the dashboard. The settings page
-  links to it again.
+  `/me` and the library summary. "Next steps" come first; the main button is the first open step ("Link Steam", then
+  "Import games"), the one other button is "Go to dashboard". Every way out (buttons, step links, feature links)
+  stamps it in Auth first, so the gate does not send the user back. The settings page links to it again.
+- **Empty library** (dashboard): a card above the tiles. Without a Steam ID or PlayStation link: "Link Steam /
+  PlayStation" and "Import games". With Steam, a finished sync and no games: Steam's "Game details" must be public,
+  with a link to the Steam privacy settings (also in the empty library list); no such text for a PlayStation-only user.
+  The "no Steam" and "empty library" hints stay until the user closes them. Texts are platform neutral ("Welcome"
+  before the first sync, "Games", "Syncing your library").
 - **Correct game data** (AUDITOR or higher): "Correct data" on the game detail page changes name, header image,
   speedrun link, moods, endless flag, genres and time to beat (hours and minutes) for every user; each field goes back to the source on its own.
   "Merge duplicate" joins two entries of the same game (e.g. the Steam game and the same game added by hand) for
@@ -166,9 +254,11 @@ To Be Played is split into three repositories:
 - react-hook-form + zod for forms, i18next for translations (`public/i18n`)
 - Vitest + React Testing Library + jsdom
 - Production image: nginx (Alpine), SPA fallback, long-term caching for hashed assets, Content Security Policy
-  and security headers
+  and security headers. nginx reads `AUTH_HOST` and `API_HOST` from the container env at start (`nginx.conf` is an
+  nginx template) and puts them into the CSP `connect-src`.
 - ESLint with the React hooks rules (`npm run lint`)
-- CI: Forgejo Actions (`npm ci`, `npm run lint`, `npm test`, `npm run build`, Docker image)
+- CI: Gitea Actions (`.gitea/workflows/docker-publish.yml`: `npm ci`, `npm run lint`, `npm test`, `npm run build`, then the
+  Docker image tagged `latest`, `<branch>`, `<branch>-<sha>`)
 
 ## Architecture
 
@@ -185,14 +275,17 @@ flowchart LR
     Core --> Igdb["IGDB API"]
     Core -->|"OAuth token"| Twitch["Twitch"]
     Core --> Speedrun["speedrun.com API"]
-    Browser -.->|"game art"| Images["Steam and IGDB image hosts"]
+    Core -->|"NPSSO sign-in, played titles, trophies"| Psn["PlayStation API (unofficial)"]
+    Browser -.->|"game art, trophy icons"| Images["Steam, IGDB and PlayStation (psnobj) image hosts"]
     Browser -.->|"Sign in through Steam"| SteamLogin["steamcommunity.com (OpenID)"]
     Browser -.->|"bookmarklet, the user's login"| Stores["PlayStation, Xbox, Nintendo, Epic, GOG"]
     Auth -->|"check_authentication"| SteamLogin
 ```
 
+- `useDragSort` (`src/hooks/useDragSort.js`) sorts a list with pointer events. Only the drag handle has `touch-action: none`, so the page still scrolls from a row.
 - nginx serves the built app. It has no backend of its own: the browser calls Auth and Core directly
-  (`VITE_API_URL`, `VITE_CORE_API_URL`). The Content Security Policy allows only these two hosts and the image hosts.
+  (`VITE_API_URL`, `VITE_CORE_API_URL`). The Content Security Policy allows only these two hosts and the image hosts (Steam, IGDB and, for trophy icons,
+  `psnobj.prod.dl.playstation.net`).
 - Auth and Core each have their own database. Core verifies Auth's tokens with Auth's public keys (JWKS).
 - Calls for the logged-in user go through `src/utils/api.js`. `clientFetch` sends the HttpOnly cookies and the
   `X-TBP-Client` header. `apiFetch` answers a `401` with one `POST /api/auth/refresh` and sends the request again.
@@ -206,6 +299,8 @@ flowchart LR
 - The pages that need a login sit under the `RequireSession` layout route in `App.jsx`. Without a session it opens
   the login page: after a `401` with the "session expired" message and back to the same page, after a logout
   without a way back. A public page stays open when the session ends there.
+- Public routes: `/`, `/login`, `/register`, `/confirm-email`, `/reset-password`, `/u/:name` and `/impressum`
+  (`ImprintPage`, linked from the footer). Every other route sits under `RequireSession`.
 - `CurrentUserProvider` holds `GET /api/users/me` for the whole app (`useCurrentUserContext`, `useCurrentUser`).
   Dashboard and settings load it again when they open.
 - Tests render through `src/test/renderWithProviders.jsx` (a data router like `main.jsx`) and answer requests
@@ -224,8 +319,61 @@ flowchart LR
     Dialog -->|"profile + ticket"| Profile["Core /api/public/profiles/library/stats/games"]
     Dialog -->|community| Community["Core /api/stats/public/games"]
     Dialog -->|points| Points["Core /api/rewards/.../games"]
+    Dialog -->|"community row, login"| Owners["Core /api/stats/owners"]
+    Landing["Landing user tiles, login"] --> Users["Auth /api/stats/users"]
 ```
-- `useLibrarySync` polls Core's `/api/library/sync-status` while a Steam sync runs, then loads the data again.
+- `/questions` (`QuestionsPage`, reached from the bell and the inbox row "N open questions"; the title shows the live
+  count) starts with a short intro (where questions come from, what an answer gives, what "No" does) and lists one card per game with an open question (Start it? / Finished? / Dropped? / Rate it?). Core decides
+  which question is open; `src/utils/questions.js` only loads the list and sends the answer. A yes to Finished? gets
+  the Rate it? card back at once. `409` / `404` reload the list. `RatingStars` is shared with `GameHeroCard`.
+  Every card shows its points (+5 for a start, up to N or "by time to beat" for a finish, none for dropped and rate).
+  Removed games are the library filter "Removed" (`/library?removed=true`, `RemovedGamesList`, `GET /api/library/removed-games`) with a
+  Restore button per game (`POST /api/library/games/{appid}/restore`). The toast after "Remove from library" on a
+  manual game has an Undo that restores it the same way.
+
+```mermaid
+flowchart LR
+    Games["Core GET /api/library/games: one row per set + platforms[]"] --> Row["GameLibrary row"]
+    Row --> Icons["PlatformIcons: badge per platform"]
+    Row -.->|"no platforms (hidden game)"| Badge["single platform badge"]
+```
+
+```mermaid
+flowchart LR
+    DetailData["Core GET /api/library/games/{appid}?refresh=false, then without it when achievementsStale: platforms[] + totalPlaytimeMinutes"] --> Platforms["PlatformsCard: row per platform, total"]
+    DetailData --> Hero["GameHeroCard: total playtime"]
+    Platforms -->|"row of another edition"| Other["/library/{appid} of that edition"]
+```
+
+```mermaid
+flowchart LR
+    Detail["GameDetail: EditionsCard"] -->|"Not the same game"| Split["Core DELETE /api/library/games/{appid}/set"]
+    Detail -->|"Same game as... (request)"| Request["Core POST /api/library/games/{appid}/link-requests"]
+    Detail -->|"Unlink (auditor)"| Unlink["Core DELETE /api/library/games/{appid}/link"]
+    Split --> Reload["reload the detail"]
+    Backlog["GameHeroCard / BacklogCard save"] -->|"game has editions"| Reload
+```
+- The game page edits at once: status (menu with Undo) and rating in `GameHeroCard`, priority in `BacklogCard`; only the
+  notes there have a Save button. Background, banner, profile art, hide (with Undo) and the auditor tools sit in the "..." menu of the hero card.
+- `EditionsCard` shows "Not the same game" on every game that has other editions in the own library. The call goes
+  through `src/utils/links.js` (`splitGame`) after a confirm dialog (unlink asks too); `404 NOT_LINKED` shows the generic error toast.
+
+```mermaid
+flowchart LR
+    Header["Bell badge (useNotifications)"] --> Count["Core /api/library/questions/count"]
+    Header --> Inbox["Core /api/inbox, Auth /api/news"]
+    InboxPage["InboxPage"] --> Count
+    Page["QuestionsPage"] --> List["Core /api/library/questions"]
+    Page -->|"Yes / No / stars"| Answer["Core POST /api/library/questions/{appid}"]
+    Library["Library filter Removed"] -->|"Restore"| Removed["Core /api/library/removed-games, POST /games/{appid}/restore"]
+```
+- Owner and user lists (`src/components/people/`, `src/utils/people.js`) need a login and show listed users by name
+  (a link to `/u/<name>`), everyone else as "+N private", the viewer as "You". The setting "show me in owner lists" is
+  saved on its own (`PUT /api/users/settings/owner-lists`), never through `saveSettings`.
+- `useLibrarySync` polls Core's `/api/library/sync-status` while a sync runs, then loads the data again. While a first
+  sync is expected but Core has no status row (`queued`: "First sync queued ..." with "usually under a minute"), it
+  polls every 3 s for 15 s, then every 15 s, for 10 minutes in all; a run still going after that shows a calm "check
+  back later" text.
 - The bookmarklet hands its list over in the URL fragment (base64url JSON), which the browser sends to no server.
   The import page reads it once and removes it from the URL. `RequireSession` keeps the fragment on the way
   through the login page.
@@ -242,13 +390,16 @@ flowchart LR
 
 ```text
 src/
+├── App.jsx, main.jsx, i18n.js           # Routes, entry point, i18next setup
+├── style.css, skins.css, effects.css    # Base styles, the skins, the background effects
 ├── pages/        # One component per route (Dashboard, GameLibrary, GameDetail, ...): loads data, places cards
-├── components/   # Cards and shared components; ui/ holds the base components, import/ and stats/ the parts
-│                 # of one page that share page-only code
+├── components/   # Cards and shared components; ui/ holds the base components, import/, stats/ and people/ the
+│                 # parts of one page that share page-only code
 ├── hooks/        # Data hooks (game, dashboard, library sync, Steam profile, appearance, session)
-├── context/      # PreferencesContext: theme, language, appearance
+├── context/      # CurrentUserContext, PreferencesContext
+├── lib/          # utils.js (class name helper)
 ├── utils/        # Validation schemas and helpers
-└── test/         # Test setup (i18n mock)
+└── test/         # renderWithProviders.jsx, fetchRoutes.js, i18n mock, WalletLoader, fixtures/import
 ```
 
 Tests sit next to the code they test (`Component.test.jsx`).
@@ -267,7 +418,7 @@ other, then start them in this order (Core also starts without Auth and finds it
 3. **Frontend**: in `ToBePlayed-Frontend`, `npm install`, then `npm run dev`, and open `http://localhost:5173`
    (`localhost`, not `127.0.0.1`, so the browser sends the login cookies to every local port). The development
    values must be `VITE_API_URL=http://localhost:8080` and `VITE_CORE_API_URL=http://localhost:8090`.
-4. **Log in** with `dev@localhost` / `password123`. On the dashboard, start a Steam sync: the library fills with 8
+4. **Log in** with `dev@localhost` / `password123`. On the dashboard, start a Steam sync: the library fills with 30
    games, achievements, time to beat, moods, a wishlist and one speedrun game from recorded answers.
 
 The dev user is `PLATFORM_ADMIN`, so user, auditor and admin pages can all be tried ("View as" in the menu
@@ -290,6 +441,17 @@ npm run dev
 Values for development and production live in `.env.development` and `.env.production`. They end up in the
 browser bundle, so they must never hold a secret.
 
+Production image (container env, read by nginx at start):
+
+| Variable | Purpose |
+|---|---|
+| `AUTH_HOST` | Auth host name for the CSP `connect-src` |
+| `API_HOST` | Core host name, same |
+
+The image refuses to start when either is unset or empty (`docker-entrypoint.d/10-require-hosts.sh`);
+`docker-compose.yml` of the Deployment repo passes both. `FRONTEND_HOST` is not
+passed to the frontend image; compose uses it for the Traefik rule and as `APP_FRONTEND_URL` of Auth and Core (Deployment `docker-compose.yml`:68,152).
+
 ## Tests and build
 
 ```bash

docker-entrypoint.d/10-require-hosts.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+# Empty hosts would give a CSP connect-src that blocks every API call. Runs before 20-envsubst-on-templates.sh.
+: "${AUTH_HOST:?set AUTH_HOST (public host name of Auth) in the container env}"
+: "${API_HOST:?set API_HOST (public host name of Core) in the container env}"

docs/GLOSSARY.md

@@ -0,0 +1,42 @@
+# Glossary
+
+One word per idea in all German (de) and English (en) texts (`public/i18n/*.json`). `src/i18n.test.js` fails when an
+old term comes back. A new text uses these words; a new idea gets a row here first.
+
+| Concept | de | en |
+|---|---|---|
+| finish a game (status FINISHED) | durchspielen, durchgespielt (never "beenden", "abgeschlossen", "Beender") | finish, finished |
+| 100 % status (COMPLETED) | 100 % | 100% (no space) |
+| proof of play (rewards) | Nachweis, nachgewiesen (never "Beweis", "frisches Spielen") | proof, proven; "recent play" (never "fresh play") |
+| earn points | Punkte bringen / es gibt Punkte (never "zahlen") | earn points (never "pay") |
+| points booked to the wallet | gutgeschrieben | credited |
+| currency / page name | Pile Points | Pile Points |
+| pile (games with status BACKLOG) | **Pile of Shame** (proper name, also in German, masculine; never "Stapel") | Pile of Shame; "pile" only inside "Pile of Shame" |
+| status BACKLOG | Backlog | Backlog |
+| `/backlog` tab and dashboard tile | Warteschlange | Queue |
+| `/play-next` | Als Nächstes | Play next |
+| game page card (priority, notes) | Mein Fortschritt | My progress |
+| find games page (`/search`) | Spiele finden | Find games |
+| library search box | In deiner Bibliothek suchen | Search your library |
+| sync | der Sync; button "Sync starten"; "Sync läuft …"; "Letzter Sync {{when}}" (never "synchronisieren", "Synchronisierung") | sync; "Sync now"; "Syncing …"; "Last sync {{when}}" |
+| retry | button "Noch einmal versuchen"; sentence "Versuche es noch einmal." / "… später noch einmal." (never "erneut") | button "Try again"; sentence "Try again." / "Try again later." (never "Please try again") |
+| link queue (auditors) | Verknüpfungen (never "Warteschlange") | Link queue |
+| notifications (bell) | Postfach, Nachricht | Inbox, message |
+| people you follow (list, tile, tab) | Ich folge (never "Folgen" as a noun); the button stays "Folgen" | Following |
+| community page | Community | Community |
+| playtime (played hours) | Spielzeit | playtime (one word) |
+| time to beat (IGDB) | Spieldauer (never "Spielzeit") | time to beat |
+| status history (V14 log) | Status-Verlauf | status history |
+| edition of one game | Edition, Editionen (never "Ausgabe") | edition |
+| link / unlink an account (Steam, PSN) | verknüpfen / trennen | link / unlink |
+| link games as one (auditor) | verknüpfen / Verknüpfung lösen | link / unlink |
+| hide a game | ausblenden | hide |
+| hide a tile | verstecken | hide |
+| user | Nutzer (never "Spieler", "Person" for app users) | user |
+| auditor role | Auditor | auditor |
+| inbox entry | Nachricht | message (never "note": notes are game notes) |
+| email | E-Mail (labels), Mail (in sentences ok) | email (never "a mail", "mails") |
+| log in / out | anmelden / abmelden | log in / log out (verbs on buttons) |
+| manual game | manuelles Spiel | manual game |
+| address form | informal "du", imperative ("Versuche es …"); no impersonal "Bitte … versuchen" | – |
+| quotes | „…“ | "…" |

docs/screenshots/README.md

@@ -0,0 +1,68 @@
+# README screenshots
+
+The screenshots in the main README show a neutral demo library (30 games, persona "Dev"), never real user data.
+They come from the local stack with the WireMock mocks of `ToBePlayed-Core/local/wiremock`.
+
+## Start
+
+1. Start the stack as in the main README, section "Local development without keys".
+2. Open the app in a desktop browser, log in with `dev@localhost` / `password123`, pass the welcome page.
+3. Settings: dark mode on, language English, public profile on.
+4. Dashboard: "Sync now". Wait about one minute: the achievements load one Steam call per second.
+5. Set three things by hand (the sync cannot):
+   - No Man's Sky: status Dropped.
+   - Slay the Spire: "Set to 100%".
+   - Celeste: rating 4 stars, note "Chapter 7 next."
+6. Reload the dashboard and close the "games imported" banner.
+
+## Capture
+
+Set the viewport (browser DevTools device toolbar, or Playwright) to the size in the table. Take a viewport PNG, no
+scaling, not full page.
+
+| File | Viewport | Page and state |
+|---|---|---|
+| `library-desktop-dark.png` | 1280x1022 | `/library`, filter All, sort "Most played", 20 per page |
+| `detail-desktop-dark.png` | 1280x1414 | `/library/504230` (Celeste) |
+| `dashboard-desktop-dark.png` | 1280x1100 | `/dashboard`, banner closed, mouse away from the cards |
+| `library-mobile-dark.png` | 390x1036 | `/library`, same state as desktop |
+| `profile-desktop-dark.png` | 1280x1288 | log out, then `/u/Dev` |
+
+## From the Claude box
+
+The box is itself a container, so the stack differs from the main README. Traps first: the WireMock `-v` path is
+resolved on the Docker host (the mock then loads 0 mappings), and the box reaches sibling containers only through
+the shared network, not through `localhost`.
+
+```
+docker run -d --name tbp_auth_db_local -e POSTGRES_DB=tbp_auth -e POSTGRES_USER=tbp_user -e POSTGRES_PASSWORD=local_secret_password postgres:17-alpine
+docker run -d --name tbp_core_db_local -e POSTGRES_DB=tbp_core -e POSTGRES_USER=tbp_user -e POSTGRES_PASSWORD=local_secret_password postgres:17-alpine
+docker run -d --name tbp_core_mocks_local wiremock/wiremock:3.9.1
+for c in tbp_auth_db_local tbp_core_db_local tbp_core_mocks_local; do docker network connect ai_default $c; done
+docker cp /workspace/private/tbp/ToBePlayed-Core/local/wiremock/. tbp_core_mocks_local:/home/wiremock/
+curl -X POST tbp_core_mocks_local:8080/__admin/mappings/reset
+```
+
+Repeat the `docker cp` and the reset after every mock change. Run the built jars (`target/`) and Vite:
+
+- Auth: `java -jar target/auth-service-0.0.1-SNAPSHOT.jar --spring.profiles.active=local --spring.docker.compose.enabled=false`
+  plus `--spring.datasource.url=jdbc:postgresql://tbp_auth_db_local:5432/tbp_auth`, `--spring.datasource.username=tbp_user`
+  and `--spring.datasource.password=local_secret_password`.
+- Core: the same with `tbp_core_db_local` and `tbp_core`, plus `--app.steam.base-url=$M/steam`,
+  `--app.igdb.base-url=$M/igdb`, `--app.igdb.token-base-url=$M/twitch`, `--app.psn.auth-base-url=$M/psn/auth`,
+  `--app.psn.api-base-url=$M/psn` and `--app.speedrun.base-url=$M/speedrun`. `M` is `http://<mock container IP>:8080`
+  (`docker inspect tbp_core_mocks_local`): Java rejects the underscore in the container name.
+- Frontend: `VITE_API_URL=http://localhost:8080 VITE_CORE_API_URL=http://localhost:8090 npx vite --port 5173`.
+
+When done, stop the three processes and `docker rm -f` the three containers.
+
+## Rules
+
+- Only the demo persona may appear: name "Dev", Steam ID `76561198000000001`, the default avatar.
+- Keep the file names. Keep each file below about 500 KB.
+- Look at every image before you commit it.
+
+## Data
+
+The 30 games, their achievements and the profile are in `ToBePlayed-Core/local/wiremock`.
+`LocalMocksParseTest` checks that the files fit the Core types and that every achievement stub belongs to an owned game.

nginx.conf

@@ -3,7 +3,7 @@ server {
     root /usr/share/nginx/html;
 
     # An nginx template: AUTH_HOST and API_HOST come from the container env at start (see Dockerfile).
-    add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://*.steamstatic.com https://steamcdn-a.akamaihd.net https://media.steampowered.com https://images.igdb.com; font-src 'self' data:; connect-src 'self' https://${AUTH_HOST} https://${API_HOST}; manifest-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'" always;
+    add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://*.steamstatic.com https://steamcdn-a.akamaihd.net https://media.steampowered.com https://images.igdb.com https://psnobj.prod.dl.playstation.net; font-src 'self' data:; connect-src 'self' https://${AUTH_HOST} https://${API_HOST}; manifest-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'" always;
     add_header X-Content-Type-Options "nosniff" always;
     add_header Referrer-Policy "strict-origin-when-cross-origin" always;
     add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;

src/App.jsx

@@ -1,10 +1,11 @@
-import {Link, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
+import {Link, Navigate, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
 import {useEffect} from 'react';
 
 import LandingPage from './pages/LandingPage';
 import LoginPage from './pages/LoginPage';
 import ImprintPage from './pages/ImprintPage';
+import NotFoundPage from './pages/NotFoundPage.jsx';
 import Dashboard from "./pages/Dashboard.jsx";
 import RegistrationPage from './pages/RegistrationPage.jsx';
 import ConfirmEmailPage from './pages/ConfirmEmailPage.jsx';
@@ -13,6 +14,9 @@ import SettingsPage from './pages/SettingsPage.jsx';
 import AdminHintsPage from './pages/AdminHintsPage.jsx';
 import AdminBroadcastPage from './pages/AdminBroadcastPage.jsx';
 import AdminNewsPage from './pages/AdminNewsPage.jsx';
+import InboxPage from './pages/InboxPage.jsx';
+import CommunityPage from './pages/CommunityPage.jsx';
+import QuestionsPage from './pages/QuestionsPage.jsx';
 import WhatsNewPage from './pages/WhatsNewPage.jsx';
 import WelcomePage from './pages/WelcomePage.jsx';
 import WelcomeGate from './components/WelcomeGate.jsx';
@@ -23,13 +27,17 @@ import LinkQueuePage from './pages/LinkQueuePage.jsx';
 import GameLibrary from './pages/GameLibrary.jsx';
 import GameDetail from './pages/GameDetail.jsx';
 import WishlistPage from './pages/WishlistPage.jsx';
+import BacklogPage from './pages/BacklogPage.jsx';
 import PlayNextPage from './pages/PlayNextPage.jsx';
 import StatsPage from './pages/StatsPage.jsx';
 import ImportPage from './pages/ImportPage.jsx';
+import GameSearchPage from './pages/GameSearchPage.jsx';
 import PointsPage from './pages/PointsPage.jsx';
 import PublicProfilePage from './pages/PublicProfilePage.jsx';
 import AppHeader from './components/AppHeader.jsx';
+import BottomNav from './components/BottomNav.jsx';
 import RequireSession from './components/RequireSession.jsx';
+import {cn} from '@/lib/utils';
 import {Toaster} from '@/components/ui/sonner';
 import {TooltipProvider} from '@/components/ui/tooltip';
 import PageBackground from './components/PageBackground.jsx';
@@ -41,7 +49,7 @@ import {UnsavedChangesGuard} from './hooks/useUnsavedChanges.js';
 import {logout} from './utils/api.js';
 
 function App() {
-    const {t} = useTranslation();
+    const {t, i18n} = useTranslation();
     const {active: isAuthenticated} = useSession();
     const {appearance, equipped, syncPreferences} = usePreferences();
 
@@ -49,6 +57,8 @@ function App() {
     const navigate = useNavigate();
     const location = useLocation();
 
+    useEffect(() => { document.documentElement.lang = i18n.language; }, [i18n.language]);
+
     // On login and on page load; the cached look shows until Auth answers.
     useEffect(() => {
         if (isAuthenticated) syncPreferences();
@@ -71,7 +81,7 @@ function App() {
                 )}
                 <AppHeader isAuthenticated={isAuthenticated} onLogout={handleLogout}/>
 
-                <main className="grow flex flex-col">
+                <main className={cn('grow flex flex-col', isAuthenticated && 'max-md:pb-16')}>
                     <Routes>
                         <Route path="/" element={<LandingPage/>}/>
                         <Route path="/login" element={<LoginPage/>}/>
@@ -82,13 +92,19 @@ function App() {
                             <Route path="/dashboard" element={<WelcomeGate><Dashboard/></WelcomeGate>}/>
                             <Route path="/library" element={<GameLibrary/>}/>
                             <Route path="/library/:appid" element={<GameDetail/>}/>
+                            <Route path="/search" element={<GameSearchPage/>}/>
                             <Route path="/wishlist" element={<WishlistPage/>}/>
+                            <Route path="/backlog" element={<BacklogPage/>}/>
                             <Route path="/play-next" element={<PlayNextPage/>}/>
                             <Route path="/stats" element={<StatsPage/>}/>
+                            <Route path="/community" element={<CommunityPage/>}/>
+                            <Route path="/following" element={<Navigate to="/community?tab=following" replace/>}/>
                             <Route path="/import" element={<ImportPage/>}/>
                             <Route path="/points" element={<PointsPage/>}/>
                             <Route path="/settings" element={<SettingsPage/>}/>
                             <Route path="/whats-new" element={<WhatsNewPage/>}/>
+                            <Route path="/inbox" element={<InboxPage/>}/>
+                            <Route path="/questions" element={<QuestionsPage/>}/>
                             <Route path="/welcome" element={<WelcomePage/>}/>
                             <Route path="/audit/games" element={<GameCatalogPage/>}/>
                             <Route path="/audit/links" element={<LinkQueuePage/>}/>
@@ -100,6 +116,7 @@ function App() {
                         </Route>
                         <Route path="/u/:name" element={<PublicProfilePage/>}/>
                         <Route path="/impressum" element={<ImprintPage/>}/>
+                        <Route path="*" element={<NotFoundPage/>}/>
                     </Routes>
                 </main>
 
@@ -108,9 +125,10 @@ function App() {
                         {t('IMPRINT.TITLE')}
                     </Link>
                 </footer>
+                {isAuthenticated && <BottomNav/>}
             </div>
             <UnsavedChangesGuard/>
-            <Toaster richColors position="bottom-right"/>
+            <Toaster richColors position="bottom-right" mobileOffset={{bottom: 72}} className="max-md:![--offset-bottom:72px]"/>
         </TooltipProvider>
     );
 }

src/App.test.jsx

@@ -24,6 +24,29 @@ afterEach(() => {
 });
 
 describe('App', () => {
+    it('redirectsTheOldFollowingUrlToTheCommunityTab', async () => {
+        fetchRoutes({
+            'GET /api/users/me': json(200, {settings: {}}),
+            'GET /api/rewards/wallet': json(200, {balance: 0, catalog: [], owned: [], equipped: {}, history: []}),
+            'GET /api/inbox': json(200, {results: [], unread: 0}),
+            'GET /api/news': json(200, {results: []}),
+            'GET /api/library/questions/count': json(200, {count: 0}),
+            'GET /api/follows': json(200, {following: [], followers: []}),
+            'GET /api/library/steam-profile': json(200, null),
+        });
+        const {router} = renderWithProviders(<App/>, {entries: ['/following']});
+
+        await waitFor(() => expect(router.state.location.pathname + router.state.location.search).toBe('/community?tab=following'));
+    });
+
+    it('sets the document language to the UI language', () => {
+        fetchRoutes({'GET /api/users/me': json(200, {settings: {}})});
+        localStorage.clear();
+        renderWithProviders(<App/>, {entries: ['/impressum']});
+
+        expect(document.documentElement.lang).toBe('de');
+    });
+
     it('ends the session on a 401 that the refresh cannot fix', async () => {
         let expired = false;
         const library = () => (expired ? json(401, {}) : json(200, page));
@@ -34,6 +57,9 @@ describe('App', () => {
             'GET /api/library/games-count': json(200, {hasSteamId: true}),
             'GET /api/library/steam-profile': json(200, null),
             'POST /api/auth/refresh': json(401, {}),
+            'GET /api/inbox': json(200, {results: [], unread: 0}),
+            'GET /api/news': json(200, {results: []}),
+            'GET /api/library/questions/count': json(200, {count: 0}),
         });
         const {router} = renderWithProviders(<App/>, {entries: ['/library']});
         await waitFor(() => expect(screen.getByText('Half-Life 2')).toBeTruthy());

src/components/AccountInfoCard.jsx

@@ -21,7 +21,7 @@ export default function AccountInfoCard() {
     const {user: profile} = useCurrentUserContext();
     const accountRows = [
         [t('SETTINGS.EMAIL'), profile?.email],
-        [t('SETTINGS.ROLE'), profile?.role],
+        [t('SETTINGS.ROLE'), profile?.role && t(`ROLES.${profile.role}`)],
         [t('SETTINGS.CREATED_DATE'), formatDate(profile?.createdDate, i18n.language)],
         [t('SETTINGS.LAST_LOGIN'), formatDate(profile?.lastLogin, i18n.language)],
     ];

src/components/AccountInfoCard.test.jsx

@@ -0,0 +1,25 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, screen} from '@testing-library/react';
+import AccountInfoCard from './AccountInfoCard.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+import {renderWithProviders} from '../test/renderWithProviders.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+beforeEach(() => localStorage.setItem('tbp_session', '1'));
+
+afterEach(() => {
+    cleanup();
+    localStorage.clear();
+});
+
+describe('AccountInfoCard', () => {
+    it('shows the role by its translated name, not the enum value', async () => {
+        fetchRoutes({'GET /api/users/me': json(200, {email: 'a@b.de', role: 'PLATFORM_ADMIN', settings: {}})});
+        renderWithProviders(<AccountInfoCard/>, {path: '/settings', entries: ['/settings']});
+
+        expect(await screen.findByText('ROLES.PLATFORM_ADMIN')).toBeTruthy();
+        expect(screen.queryByText('PLATFORM_ADMIN')).toBeNull();
+    });
+});

src/components/AchievementsCard.jsx

@@ -6,6 +6,7 @@ import {Card} from '@/components/ui/card';
 import GameCover from './GameCover.jsx';
 import FitText from './FitText.jsx';
 import {StatCount} from './stats/StatDrill.jsx';
+import StatMeter from './stats/StatMeter.jsx';
 
 /**
  * @param summary the answer of GET /api/library/achievements/summary
@@ -20,12 +21,13 @@ export default function AchievementsCard({summary}) {
     // A private profile keeps games pending; the privacy hint explains that better than the pending count.
     const steamHidesAll = hidden > 0 && started === 0;
 
+    const average = summary.averageCompletion != null ? `${summary.averageCompletion.toLocaleString(i18n.language)} %` : '–';
     const stats = [
         [(summary.unlocked ?? 0).toLocaleString(i18n.language), t('DASHBOARD.ACHIEVEMENTS.UNLOCKED')],
         [perfect.toLocaleString(i18n.language), t('DASHBOARD.ACHIEVEMENTS.PERFECT'),
             {params: {key: 'PERFECT'}, count: perfect}],
-        [summary.averageCompletion != null ? `${summary.averageCompletion.toLocaleString(i18n.language)} %` : '–',
-            t('DASHBOARD.ACHIEVEMENTS.AVERAGE')],
+        [average, t('DASHBOARD.ACHIEVEMENTS.AVERAGE'), undefined,
+            summary.averageCompletion != null ? {percent: summary.averageCompletion, valueText: average} : null],
     ];
 
     return (
@@ -36,11 +38,12 @@ export default function AchievementsCard({summary}) {
             </h2>
 
             <div className="grid grid-cols-3 gap-3">
-                {stats.map(([value, label, drill]) => (
+                {stats.map(([value, label, drill, meter]) => (
                     <div key={label} className="rounded-lg bg-muted/50 p-3 text-center">
                         <div className="text-xl md:text-2xl font-bold tabular-nums">
                             <StatCount {...drill} title={label} label={`${label}: ${value}`}>{value}</StatCount>
                         </div>
+                        {meter && <StatMeter {...meter} label={label}/>}
                         <div className="text-xs text-muted-foreground">{label}</div>
                     </div>
                 ))}

src/components/AchievementsCard.test.jsx

@@ -31,6 +31,22 @@ describe('AchievementsCard', () => {
         expect(screen.queryByText(/DASHBOARD.ACHIEVEMENTS.PENDING/)).toBeNull();
     });
 
+    it('showsTheAverageCompletionAsAMeter', () => {
+        renderCard(summary());
+
+        const meter = screen.getByRole('meter', {name: 'DASHBOARD.ACHIEVEMENTS.AVERAGE'});
+
+        expect(meter.getAttribute('aria-valuenow')).toBe('71');
+        expect(meter.getAttribute('aria-valuetext')).toBe('71,3 %');
+    });
+
+    it('showsNoMeterWithoutAnAverage', () => {
+        renderCard(summary({averageCompletion: null}));
+
+        expect(screen.queryByRole('meter')).toBeNull();
+        expect(screen.getByText('–')).toBeTruthy();
+    });
+
     it('says how many games are still syncing', () => {
         renderCard(summary({pendingGames: 7}));
 

src/components/ActivityCard.jsx

@@ -5,8 +5,11 @@ import {Activity} from 'lucide-react';
 import {Card} from '@/components/ui/card';
 import GameCover from './GameCover.jsx';
 import FitText from './FitText.jsx';
+import ChartPicker from './stats/ChartPicker.jsx';
+import GamePlayChart from './stats/GamePlayChart.jsx';
 import {formatPlaytime} from '../utils/games.js';
 import {formatDay} from '../utils/format.js';
+import {chartProps, linePoints, playChart} from '../utils/statCharts.js';
 
 const CHART_HEIGHT = 80;
 const BAR_WIDTH = 10;
@@ -14,42 +17,66 @@ const BAR_GAP = 2;
 
 /**
  * @param activity the answer of GET /api/library/activity
+ * @param charts the chart form per group of the user
+ * @param onChart `(group, form)`: shows the pickers
  */
-export default function ActivityCard({activity}) {
+export default function ActivityCard({activity, charts = null, onChart = null}) {
     const {t, i18n} = useTranslation();
     const {days, totalMinutes, recentGames} = activity;
     const max = Math.max(1, ...days.map((d) => d.minutes));
     const width = days.length * (BAR_WIDTH + BAR_GAP);
+    const dayChart = chartProps(charts, onChart, 'ACTIVITY');
+    const gameChart = chartProps(charts, onChart, 'ACTIVITY_GAMES');
+    const line = dayChart.chart === 'LINE' && days.length > 1;
+    const points = line ? linePoints(days.map((d) => d.minutes), width, CHART_HEIGHT) : [];
+    const recent = recentGames.map((g) => ({appid: g.appid, name: g.name, minutes: g.playtime2Weeks}));
+    const form = playChart(gameChart.chart, recent);
+    const dayTitle = (d) => `${formatDay(d.day, i18n.language)}: ${formatPlaytime(d.minutes)}`;
 
     return (
         <Card className="gap-5 p-5">
-            <div className="flex items-baseline justify-between gap-4">
+            <div className="flex flex-wrap items-baseline justify-between gap-x-4">
                 <h2 className="flex items-center gap-2 font-semibold">
                     <Activity className="size-4 text-primary"/>
                     {t('DASHBOARD.ACTIVITY')}
                 </h2>
-                <span className="text-sm text-muted-foreground tabular-nums">
-                    {t('DASHBOARD.ACTIVITY_TOTAL', {days: days.length, time: formatPlaytime(totalMinutes)})}
-                </span>
+                <div className="flex flex-wrap items-center gap-x-3">
+                    <span className="text-sm text-muted-foreground tabular-nums">
+                        {t('DASHBOARD.ACTIVITY_TOTAL', {days: days.length, time: formatPlaytime(totalMinutes)})}
+                    </span>
+                    {dayChart.onChart && <ChartPicker group="ACTIVITY" value={dayChart.chart} onChange={dayChart.onChart}/>}
+                </div>
             </div>
 
             {totalMinutes === 0 ? (
                 <p className="text-sm text-muted-foreground">{t('DASHBOARD.ACTIVITY_EMPTY')}</p>
             ) : (
                 <div>
-                    <svg viewBox={`0 0 ${width} ${CHART_HEIGHT}`} preserveAspectRatio="none" className="h-20 w-full"
-                         role="img" aria-label={t('DASHBOARD.ACTIVITY')}>
-                        {days.map((d, i) => {
-                            const height = (d.minutes / max) * CHART_HEIGHT;
-                            return (
-                                <rect key={d.day} data-testid="activity-bar" x={i * (BAR_WIDTH + BAR_GAP)}
-                                      y={CHART_HEIGHT - height} width={BAR_WIDTH} height={height} rx={2}
-                                      className="fill-primary">
-                                    <title>{`${formatDay(d.day, i18n.language)}: ${formatPlaytime(d.minutes)}`}</title>
-                                </rect>
-                            );
-                        })}
-                    </svg>
+                    <div className="relative">
+                        <svg viewBox={`0 0 ${width} ${CHART_HEIGHT}`} preserveAspectRatio="none" className="h-20 w-full"
+                             role="img" aria-label={t('DASHBOARD.ACTIVITY')}>
+                            {line ? (
+                                <polyline points={points.map((p) => `${p.x},${p.y}`).join(' ')} fill="none"
+                                          className="stroke-primary" strokeWidth={2} strokeLinejoin="round"
+                                          vectorEffect="non-scaling-stroke"/>
+                            ) : days.map((d, i) => {
+                                const height = (d.minutes / max) * CHART_HEIGHT;
+                                return (
+                                    <rect key={d.day} data-testid="activity-bar" x={i * (BAR_WIDTH + BAR_GAP)}
+                                          y={CHART_HEIGHT - height} width={BAR_WIDTH} height={height} rx={2}
+                                          className="fill-primary">
+                                        <title>{dayTitle(d)}</title>
+                                    </rect>
+                                );
+                            })}
+                        </svg>
+                        {/* Dots are HTML over the stretched svg, so they stay round and can show a tooltip. */}
+                        {line && days.map((d, i) => (
+                            <span key={d.day} title={dayTitle(d)} data-testid="activity-dot"
+                                  className="absolute size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary"
+                                  style={{left: `${(points[i].x / width) * 100}%`, top: `${(points[i].y / CHART_HEIGHT) * 100}%`}}/>
+                        ))}
+                    </div>
                     <div className="mt-1 flex justify-between text-xs text-muted-foreground">
                         <span>{formatDay(days[0].day, i18n.language)}</span>
                         <span>{formatDay(days[days.length - 1].day, i18n.language)}</span>
@@ -59,7 +86,14 @@ export default function ActivityCard({activity}) {
 
             {recentGames.length > 0 && (
                 <div className="space-y-2">
-                    <span className="text-sm font-medium">{t('DASHBOARD.RECENTLY_PLAYED')}</span>
+                    <div className="flex flex-wrap items-center justify-between gap-x-3">
+                        <span className="text-sm font-medium">{t('DASHBOARD.RECENTLY_PLAYED')}</span>
+                        {gameChart.onChart && (
+                            <ChartPicker group="ACTIVITY_GAMES" value={gameChart.chart} onChange={gameChart.onChart}
+                                         label={`${t('STATS.CHART.LABEL')}: ${t('DASHBOARD.RECENTLY_PLAYED')}`}/>
+                        )}
+                    </div>
+                    {form !== 'LIST' ? <GamePlayChart games={recent} chart={form} linked/> : (
                     <ul className="space-y-2">
                         {recentGames.map((g) => (
                             <li key={g.appid}>
@@ -73,6 +107,7 @@ export default function ActivityCard({activity}) {
                             </li>
                         ))}
                     </ul>
+                    )}
                 </div>
             )}
         </Card>

src/components/ActivityCard.test.jsx

@@ -1,13 +1,15 @@
 // @vitest-environment jsdom
 import {afterEach, describe, expect, it, vi} from 'vitest';
-import {cleanup, render, screen} from '@testing-library/react';
+import {cleanup, fireEvent, render, screen, within} from '@testing-library/react';
 import {MemoryRouter} from 'react-router-dom';
 import ActivityCard from './ActivityCard.jsx';
 
 vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
 
 const days = (minutes) => minutes.map((m, i) => ({day: `2026-09-${String(10 + i).padStart(2, '0')}`, minutes: m}));
-const renderCard = (activity) => render(<MemoryRouter><ActivityCard activity={activity}/></MemoryRouter>);
+const renderCard = (activity, props) => render(<MemoryRouter><ActivityCard activity={activity} {...props}/></MemoryRouter>);
+const recent = (n) => Array.from({length: n}, (_, i) => ({appid: 100 + i, name: `Game ${i}`, playtimeMinutes: 900,
+    playtime2Weeks: 600 - i * 10, status: 'PLAYING'}));
 
 describe('ActivityCard', () => {
     afterEach(cleanup);
@@ -35,4 +37,81 @@ describe('ActivityCard', () => {
 
         expect(screen.getByText('DASHBOARD.ACTIVITY_EMPTY')).toBeTruthy();
     });
+
+    it('drawsALineForTheStoredLineForm', () => {
+        const {container} = renderCard({days: days([0, 60, 120]), totalMinutes: 180, recentGames: []},
+            {charts: {ACTIVITY: 'LINE'}});
+
+        expect(screen.queryAllByTestId('activity-bar')).toHaveLength(0);
+        const line = container.querySelector('polyline');
+        expect(line.getAttribute('vector-effect')).toBe('non-scaling-stroke');
+        const dots = screen.getAllByTestId('activity-dot');
+        expect(dots).toHaveLength(3);
+        expect(dots[1].getAttribute('title')).toMatch(/: 1\.0h$/);
+        expect(container.querySelectorAll('svg[role="img"] polyline')).toHaveLength(1);
+    });
+
+    it('drawsBarsForALineWithOneDay', () => {
+        renderCard({days: days([60]), totalMinutes: 60, recentGames: []}, {charts: {ACTIVITY: 'LINE'}});
+
+        expect(screen.getAllByTestId('activity-bar')).toHaveLength(1);
+    });
+
+    it('showsNoPickerWithoutOnChart', () => {
+        renderCard({days: days([0, 60]), totalMinutes: 60, recentGames: recent(1)});
+
+        expect(screen.queryByRole('group')).toBeNull();
+    });
+
+    it('showsTwoPickersWithDifferentNamesWithOnChart', () => {
+        const onChart = vi.fn();
+        renderCard({days: days([0, 60]), totalMinutes: 60, recentGames: recent(2)}, {onChart});
+
+        const day = screen.getByRole('group', {name: 'STATS.CHART.LABEL'});
+        expect(screen.getByRole('group', {name: 'STATS.CHART.LABEL: DASHBOARD.RECENTLY_PLAYED'})).toBeTruthy();
+        fireEvent.click(within(day).getByRole('button', {name: 'STATS.CHART.LINE'}));
+
+        expect(onChart).toHaveBeenCalledWith('ACTIVITY', 'LINE');
+    });
+
+    it('recentGamesPieLinksTheGamesAndOtherIsPlain', () => {
+        const {container} = renderCard({days: days([0, 60]), totalMinutes: 60, recentGames: recent(7)},
+            {charts: {ACTIVITY_GAMES: 'PIE'}});
+
+        expect(container.querySelectorAll('path.stroke-card')).toHaveLength(6);
+        const links = screen.getAllByRole('link');
+        expect(links).toHaveLength(5);
+        expect(links[0].getAttribute('href')).toBe('/library/100');
+        expect(screen.getByText('STATS.CHART.OTHER').closest('a,button')).toBeNull();
+        expect(screen.getByText('9.8h')).toBeTruthy();
+        expect(screen.getByText('STATS.TOP_GAMES.SHARE')).toBeTruthy();
+    });
+
+    it('recentGamesPieWithOneGameDrawsTheList', () => {
+        const {container} = renderCard({days: days([0, 60]), totalMinutes: 60, recentGames: recent(1)},
+            {charts: {ACTIVITY_GAMES: 'DONUT'}});
+
+        expect(container.querySelectorAll('path.stroke-card')).toHaveLength(0);
+        expect(screen.getByRole('link', {name: /Game 0/}).getAttribute('href')).toBe('/library/100');
+    });
+
+    it('recentGamesBarsHaveNoCovers', () => {
+        const {container} = renderCard({days: days([0, 60]), totalMinutes: 60, recentGames: recent(2)},
+            {charts: {ACTIVITY_GAMES: 'BARS'}});
+
+        expect(container.querySelectorAll('img')).toHaveLength(0);
+        expect(screen.getByRole('link', {name: /Game 1/}).getAttribute('href')).toBe('/library/101');
+    });
+
+    it('twoGamesWithTheSameNameGetTheirOwnSlice', () => {
+        const error = vi.spyOn(console, 'error').mockImplementation(() => {});
+        const games = [{appid: 1, name: 'Prey', playtimeMinutes: 900, playtime2Weeks: 300, status: 'PLAYING'},
+            {appid: 2, name: 'Prey', playtimeMinutes: 900, playtime2Weeks: 200, status: 'PLAYING'}];
+        renderCard({days: days([0, 60]), totalMinutes: 60, recentGames: games}, {charts: {ACTIVITY_GAMES: 'PIE'}});
+
+        const sameKey = error.mock.calls.some((args) => args.join(' ').includes('same key'));
+        error.mockRestore();
+        expect(sameKey).toBe(false);
+        expect(screen.getAllByRole('link', {name: /Prey/}).map((a) => a.getAttribute('href'))).toEqual(['/library/1', '/library/2']);
+    });
 });

src/components/AddGamePanel.jsx

@@ -12,20 +12,24 @@ import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/c
 import GameCover from './GameCover.jsx';
 import FitText from './FitText.jsx';
 import GameSearch from './GameSearch.jsx';
+import usePointsCheck from '../hooks/usePointsCheck.js';
 import useStartImport from '../hooks/useStartImport.js';
 import {GAME_STATUSES, MAX_PLATFORM_LENGTH} from '../utils/limits.js';
-import {addGame, hoursToMinutes} from '../utils/manualGames.js';
+import {addGame, hitTitle, hoursToMinutes} from '../utils/manualGames.js';
 import {preselectPlatform} from '../utils/platforms.js';
 import {useCurrentUserContext} from '../context/CurrentUserContext.jsx';
 
 /**
  * Search IGDB and add a game the user owns outside Steam, e.g. on PlayStation or Switch; or check several and review
  * them on the import page.
+ *
+ * @param onAdded called with the new appid before the navigation, for a page that shows the same address
+ * @param initialQuery the search text to start with, e.g. the name of a game seen elsewhere
  */
-export default function AddGamePanel({onClose}) {
+export default function AddGamePanel({onClose, onAdded, initialQuery = ''}) {
     const {t} = useTranslation();
     const navigate = useNavigate();
-    const [query, setQuery] = useState('');
+    const [query, setQuery] = useState(initialQuery);
     const [picked, setPicked] = useState(null);
     // igdbId -> hit, over several searches.
     const [selected, setSelected] = useState(() => new Map());
@@ -61,7 +65,8 @@ export default function AddGamePanel({onClose}) {
             </div>
 
             {picked ? (
-                <AddForm hit={picked} favorite={favorite} onBack={() => setPicked(null)} navigate={navigate}/>
+                <AddForm hit={picked} favorite={favorite} onBack={() => setPicked(null)} navigate={navigate}
+                         onAdded={onAdded}/>
             ) : (
                 <>
                     <p className="text-sm text-muted-foreground">{t('MANUAL_GAME.ADD_HINT')}</p>
@@ -81,7 +86,7 @@ export default function AddGamePanel({onClose}) {
     );
 }
 
-function AddForm({hit, favorite, onBack, navigate}) {
+export function AddForm({hit, favorite, onBack, navigate, onAdded}) {
     const {t} = useTranslation();
     const [platform, setPlatform] = useState(() => preselectPlatform(null, hit.platforms, favorite));
     // The favorite can arrive after the pick; it fills only a platform the user has not picked yet.
@@ -91,6 +96,7 @@ function AddForm({hit, favorite, onBack, navigate}) {
     const [status, setStatus] = useState('BACKLOG');
     const [hours, setHours] = useState('');
     const [busy, setBusy] = useState(false);
+    const check = usePointsCheck();
 
     const submit = async (e) => {
         e.preventDefault();
@@ -110,6 +116,8 @@ function AddForm({hit, favorite, onBack, navigate}) {
             }
             const {appid} = await response.json();
             toast.success(t('MANUAL_GAME.ADDED', {name: hit.name}));
+            check(appid, {status, tell: true});
+            onAdded?.(appid);
             navigate(`/library/${appid}`);
         } catch (err) {
             console.error('add game error:', err);
@@ -124,7 +132,7 @@ function AddForm({hit, favorite, onBack, navigate}) {
             <div className="flex items-center gap-3">
                 <GameCover appid={hit.appid} imageUrl={hit.imageUrl} className="w-24 shrink-0"/>
                 <div className="@container min-w-0 flex-1 font-medium">
-                    <FitText text={`${hit.name}${hit.year ? ` (${hit.year})` : ''}`}/>
+                    <FitText text={hitTitle(hit)}/>
                 </div>
             </div>
             <div className="grid gap-4 sm:grid-cols-3">

src/components/AddGamePanel.test.jsx

@@ -7,7 +7,7 @@ import {fetchRoutes, json} from '../test/fetchRoutes.js';
 import {renderWithProviders} from '../test/renderWithProviders.jsx';
 
 vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
-vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+vi.mock('sonner', () => ({toast: Object.assign(vi.fn(), {success: vi.fn(), error: vi.fn()})}));
 
 const zelda = {
     appid: -1025, igdbId: 1025, name: 'Zelda', year: 2017, imageUrl: 'https://images.igdb.com/z.jpg',
@@ -23,6 +23,9 @@ function renderPanel(post = json(201, {appid: -1025}), favoritePlatform = 'Ninte
         'GET /api/library/game-search': found,
         'POST /api/library/games': post,
         'POST /api/library/imports': post,
+        'GET /api/rewards/games/-1025': json(200, {balance: 15, missing: {}, paid: [
+            {kind: 'FINISHED_MANUAL', appid: -1025, points: 15, paidAt: '2026-10-09T10:00:00Z', bookedNow: true}]}),
+        'GET /api/rewards/wallet': json(200, {balance: 15, catalog: [], owned: [], equipped: {}, history: []}),
     });
     renderWithProviders(<AddGamePanel onClose={() => {}}/>, {path: '/library', entries: ['/library'],
         routes: {'/library/:appid': <p>detail page</p>, '/import': <p>import page</p>}});
@@ -79,6 +82,24 @@ describe('AddGamePanel', () => {
         });
     });
 
+    it('checks the points after adding a game as finished and shows the toast', async () => {
+        // jsdom has no scrollIntoView, and the Radix select calls it when it opens.
+        Element.prototype.scrollIntoView = vi.fn();
+        renderPanel();
+        search('zelda');
+        fireEvent.click(await screen.findByRole('button', {name: /Zelda/}));
+        fireEvent.keyDown(screen.getByRole('combobox', {name: 'BACKLOG.STATUS_LABEL'}), {key: 'ArrowDown'});
+        fireEvent.click(await screen.findByRole('option', {name: 'BACKLOG.STATUS.FINISHED'}));
+
+        fireEvent.click(screen.getByRole('button', {name: 'MANUAL_GAME.ADD'}));
+
+        await screen.findByText('detail page');
+        await waitFor(() => expect(toast.success).toHaveBeenCalledWith('POINTS.GAME.TOAST_BOOKED:15'));
+        const points = fetch.mock.calls.filter(([url]) => url.includes('/api/rewards/games/-1025'));
+        expect(points).toHaveLength(1);
+        expect(JSON.parse(fetch.mock.calls.find(([, call]) => call?.method === 'POST')[1].body).status).toBe('FINISHED');
+    });
+
     it('preselects no platform without a favorite among several, so Add waits for a pick', async () => {
         renderPanel(undefined, null);
         search('zelda');

src/components/AppHeader.jsx

@@ -1,7 +1,7 @@
 import {useEffect, useState} from 'react';
-import {Link, NavLink, useLocation, useNavigate} from 'react-router-dom';
+import {Link, useLocation, useNavigate} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
-import {ChartColumn, Coins, Dices, Eye, Languages, LayoutDashboard, Library, Link2, LogOut, Mail, Megaphone, Moon, Newspaper, ScrollText, Search, Settings, Shield, Sun} from 'lucide-react';
+import {Bell, Coins, Eye, Languages, Link2, LogOut, Mail, Megaphone, Moon, Newspaper, ScrollText, Search, Settings, Shield, Sun, UserRound} from 'lucide-react';
 import {toast} from 'sonner';
 
 import {Badge} from '@/components/ui/badge';
@@ -19,24 +19,26 @@ import {
 import {usePreferences} from '@/context/PreferencesContext.jsx';
 import {cn} from '@/lib/utils';
 import Logo from './Logo.jsx';
+import {isNavActive, NAV_ITEMS} from './navItems.js';
 import PageContainer from './PageContainer.jsx';
 import SteamAvatar from './SteamAvatar.jsx';
 import useCurrentUser from '../hooks/useCurrentUser.js';
+import useNotifications from '../hooks/useNotifications.js';
 import useSteamProfile from '../hooks/useSteamProfile.js';
 import {fetchPendingCount, ROLES, viewAs} from '../utils/admin.js';
 import {canCorrect} from '../utils/corrections.js';
+import {profileHref} from '../utils/people.js';
 import {expireSession, markSession} from '../utils/auth.js';
 
-const NAV_ITEMS = [
-    {to: '/dashboard', labelKey: 'NAV.DASHBOARD', Icon: LayoutDashboard},
-    // The wishlist is a tab of the library.
-    {to: '/library', labelKey: 'NAV.LIBRARY', Icon: Library, alsoActiveOn: ['/wishlist']},
-    {to: '/play-next', labelKey: 'NAV.PLAY_NEXT', Icon: Dices},
-    {to: '/stats', labelKey: 'NAV.STATS', Icon: ChartColumn},
-];
+const CountBadge = ({count}) => (
+    <span aria-hidden="true"
+          className="absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
+        {count > 9 ? '9+' : count}
+    </span>
+);
 
 const navLinkClass = (isActive) => cn(
-    'flex items-center gap-2 rounded-lg px-2 py-2 text-sm font-medium transition-colors sm:px-3',
+    'flex min-w-0 items-center gap-1.5 rounded-lg px-2.5 py-2 text-sm font-medium transition-colors lg:gap-2 lg:px-3',
     isActive
         ? 'bg-accent text-accent-foreground'
         : 'text-muted-foreground hover:bg-muted hover:text-foreground',
@@ -70,6 +72,10 @@ export default function AppHeader({isAuthenticated, onLogout}) {
     }, [seesAdminPage, pathname, menuOpenings]);
     const shownCount = seesAdminPage ? pendingCount : 0;
 
+    // The inbox page lists all of it, so it shows no count.
+    const {total} = useNotifications(isAuthenticated, pathname);
+    const shownTotal = pathname === '/inbox' ? 0 : total;
+
     const switchRole = async (role) => {
         try {
             const response = await viewAs(role === currentUser.role ? null : role);
@@ -104,7 +110,7 @@ export default function AppHeader({isAuthenticated, onLogout}) {
 
     return (
         <header className="sticky top-0 z-50 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-            <PageContainer className="flex h-16 items-center gap-1 px-4 sm:gap-2 md:px-8">
+            <PageContainer className="flex h-16 items-center gap-1 px-3 sm:gap-2 sm:px-4 md:px-8">
                 <Link to={isAuthenticated ? '/dashboard' : '/'} aria-label="ToBePlayed" className="flex items-center gap-2 font-bold tracking-tight sm:mr-2 whitespace-nowrap">
                     <Logo className="h-8 w-auto shrink-0"/>
                     {/* On a narrow phone the menu and buttons need the room; the logo alone stays. */}
@@ -112,25 +118,39 @@ export default function AppHeader({isAuthenticated, onLogout}) {
                 </Link>
 
                 {isAuthenticated && (
-                    <nav className="flex items-center sm:gap-1">
-                        {NAV_ITEMS.map(({to, labelKey, Icon, alsoActiveOn = []}) => (
-                            <NavLink key={to} to={to} title={t(labelKey)}
-                                     className={({isActive}) => navLinkClass(isActive || alsoActiveOn.includes(pathname))}>
-                                <Icon className="size-4"/>
-                                <span className="hidden lg:inline">{t(labelKey)}</span>
-                            </NavLink>
-                        ))}
+                    <nav aria-label={t('NAV.MENU')} className="hidden min-w-0 items-center gap-0.5 md:flex lg:gap-1">
+                        {NAV_ITEMS.map((item) => {
+                            const active = isNavActive(item, pathname);
+                            return (
+                                <Link key={item.to} to={item.to} title={t(item.labelKey)} aria-current={active ? 'page' : undefined}
+                                      className={navLinkClass(active)}>
+                                    <item.Icon className="size-4 shrink-0"/>
+                                    <span className="sr-only lg:not-sr-only lg:truncate">{t(item.labelKey)}</span>
+                                </Link>
+                            );
+                        })}
                     </nav>
                 )}
 
                 <div className="ml-auto flex min-w-0 items-center gap-1">
-                    {/* Below md the badge hangs on the header's bottom edge: in the row it would push the page sideways. */}
+                    {/* The badge hangs on the header's bottom edge at every width: in the row it would push the page sideways. */}
                     {isAuthenticated && viewingAs && (
-                        <Badge variant="secondary" className="max-md:absolute max-md:top-full max-md:left-1/2 max-md:-translate-x-1/2 max-md:-translate-y-1/2 max-md:pointer-events-none max-md:border-border md:mr-1">{t('NAV.VIEW_AS.BADGE', {role: t(`ROLES.${viewingAs}`)})}</Badge>
+                        <Badge variant="secondary" className="absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none border-border">{t('NAV.VIEW_AS.BADGE', {role: t(`ROLES.${viewingAs}`)})}</Badge>
                     )}
                     {isAuthenticated && wallet && (
-                        <Button asChild variant="ghost" size="sm" title={`${t('POINTS.TITLE')}: ${wallet.balance}`} className="min-w-0 shrink">
-                            <Link to="/points"><Coins className="text-primary"/><span className="min-w-0 truncate tabular-nums">{wallet.balance}</span></Link>
+                        <Button asChild variant="ghost" size="sm" title={`${t('POINTS.TITLE')}: ${wallet.balance}`} className="shrink-0">
+                            <Link to="/points" aria-label={`${t('POINTS.TITLE')}: ${wallet.balance}`}>
+                                <Coins className="text-primary"/>
+                                <span className="min-w-0 truncate tabular-nums">{wallet.balance}</span>
+                            </Link>
+                        </Button>
+                    )}
+                    {isAuthenticated && (
+                        <Button asChild variant="ghost" size="icon" title={t('NAV.INBOX')} className="relative shrink-0">
+                            <Link to="/inbox" aria-label={shownTotal > 0 ? t('NAV.INBOX_UNREAD', {count: shownTotal}) : t('NAV.INBOX')}>
+                                <Bell/>
+                                {shownTotal > 0 && <CountBadge count={shownTotal}/>}
+                            </Link>
                         </Button>
                     )}
                     {isAuthenticated ? (
@@ -141,13 +161,18 @@ export default function AppHeader({isAuthenticated, onLogout}) {
                                     <SteamAvatar url={steamProfile?.avatarUrl}/>
                                     {shownCount > 0 && (
                                         <span aria-label={t('NAV.PENDING_REQUESTS', {count: shownCount})}
-                                              className="absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
+                                              className="absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full bg-amber-500 text-[10px] font-bold text-black ring-2 ring-background">
                                             {shownCount > 9 ? '9+' : shownCount}
                                         </span>
                                     )}
                                 </Button>
                             </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end" className="w-52">
+                            <DropdownMenuContent align="end" className="w-56">
+                                {currentUser?.displayName && (
+                                    <DropdownMenuItem asChild>
+                                        <Link to={profileHref(currentUser.displayName)}><UserRound/>{t('NAV.MY_PROFILE')}</Link>
+                                    </DropdownMenuItem>
+                                )}
                                 <DropdownMenuItem asChild>
                                     <Link to="/settings"><Settings/>{t('NAV.SETTINGS')}</Link>
                                 </DropdownMenuItem>
@@ -175,7 +200,7 @@ export default function AppHeader({isAuthenticated, onLogout}) {
                                         <DropdownMenuItem asChild>
                                             <Link to="/admin/users">
                                                 <Shield/>{t('NAV.ADMIN')}
-                                                {shownCount > 0 && <Badge className="ml-auto">{shownCount}</Badge>}
+                                                {shownCount > 0 && <Badge variant="outline" className="ml-auto border-amber-500 text-amber-600 dark:text-amber-400">{shownCount}</Badge>}
                                             </Link>
                                         </DropdownMenuItem>
                                         <DropdownMenuItem asChild>

src/components/AppHeader.points.test.jsx

@@ -18,12 +18,36 @@ function Load() {
     return <button onClick={reloadWallet}>load</button>;
 }
 
+async function loadChip() {
+    localStorage.setItem('tbp_session', '1');
+    fetchRoutes({
+        'GET /api/users/me': json(200, {role: 'USER', activeRole: 'USER'}),
+        'GET /api/library/steam-profile': json(200, {}),
+        'GET /api/inbox': json(200, {results: [], unread: 0}),
+        'GET /api/news': json(200, {results: []}),
+        'GET /api/library/questions/count': json(200, {count: 0}),
+        'GET /api/rewards/wallet': json(200, {balance: 135, catalog: [], owned: [], equipped: {}, history: []}),
+    });
+    renderWithProviders(<><Load/><AppHeader isAuthenticated onLogout={() => {}}/></>);
+    fireEvent.click(screen.getByText('load'));
+    return screen.findByTitle('POINTS.TITLE: 135');
+}
+
 describe('AppHeader points chip', () => {
+    it('showsTheChipAtEveryWidth', async () => {
+        const chip = await loadChip();
+
+        expect(chip.className).not.toContain('max-sm:hidden');
+    });
+
     it('shows the balance as a link to the points page once the wallet is loaded', async () => {
         localStorage.setItem('tbp_session', '1');
         fetchRoutes({
             'GET /api/users/me': json(200, {role: 'USER', activeRole: 'USER'}),
             'GET /api/library/steam-profile': json(200, {}),
+            'GET /api/inbox': json(200, {results: [], unread: 0}),
+        'GET /api/news': json(200, {results: []}),
+        'GET /api/library/questions/count': json(200, {count: 0}),
             'GET /api/rewards/wallet': json(200, {balance: 135, catalog: [], owned: [], equipped: {}, history: []}),
         });
         renderWithProviders(<><Load/><AppHeader isAuthenticated onLogout={() => {}}/></>);

src/components/AppHeader.test.jsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import {afterEach, describe, expect, it, vi} from 'vitest';
-import {cleanup, fireEvent, screen} from '@testing-library/react';
+import {cleanup, fireEvent, screen, within} from '@testing-library/react';
 import {toast} from 'sonner';
 import {useTranslation} from 'react-i18next';
 import AppHeader from './AppHeader.jsx';
@@ -16,10 +16,14 @@ afterEach(() => {
     useTranslation().i18n.language = 'de';
 });
 
-const loggedInAs = (me, routes = {}) => {
+const loggedInAs = (me, routes = {}, options = {}) => {
     localStorage.setItem('tbp_session', '1');
-    fetchRoutes({'GET /api/users/me': json(200, me), 'GET /api/library/steam-profile': json(200, {}), ...routes});
-    renderWithProviders(<AppHeader isAuthenticated onLogout={() => {}}/>);
+    fetchRoutes({'GET /api/users/me': json(200, me), 'GET /api/library/steam-profile': json(200, {}),
+        'GET /api/inbox': json(200, {results: [], unread: 0}),
+        'GET /api/news': json(200, {results: []}),
+        'GET /api/library/questions/count': json(200, {count: 0}),
+        ...routes});
+    renderWithProviders(<AppHeader isAuthenticated onLogout={() => {}}/>, options);
 };
 
 const openMenu = () => fireEvent.keyDown(screen.getByRole('button', {name: 'NAV.MENU'}), {key: 'Enter'});
@@ -43,6 +47,94 @@ describe('AppHeader', () => {
         screen.getByText('ToBePlayed').style.display = 'none';
 
         expect(screen.getByRole('link', {name: 'ToBePlayed'})).toBeTruthy();
+        expect(screen.queryByRole('navigation', {name: 'NAV.MENU'})).toBeNull();
+    });
+
+    it('showsTheFiveMainItemsWithTheirLabelsAtEveryWidth', () => {
+        loggedInAs({role: 'USER', activeRole: 'USER'});
+
+        const nav = screen.getByRole('navigation', {name: 'NAV.MENU'});
+
+        expect(within(nav).getAllByRole('link').map((link) => link.getAttribute('href')))
+            .toEqual(['/dashboard', '/library', '/play-next', '/stats', '/community']);
+        for (const key of ['DASHBOARD', 'LIBRARY', 'PLAY_NEXT', 'STATS', 'COMMUNITY']) {
+            expect(within(nav).getByText(`NAV.${key}`).className).not.toContain('hidden');
+        }
+        expect(nav.className).toContain('md:flex');
+    });
+
+    it('hasNoQuestionsFollowingOrSearchItemInTheNav', () => {
+        loggedInAs({role: 'USER', activeRole: 'USER'});
+
+        const nav = screen.getByRole('navigation', {name: 'NAV.MENU'});
+
+        for (const key of ['QUESTIONS', 'FOLLOWING', 'SEARCH']) expect(within(nav).queryByText(`NAV.${key}`)).toBeNull();
+    });
+
+    it('marksTheLibraryActiveOnItsTabsAndSearch', () => {
+        loggedInAs({role: 'USER', activeRole: 'USER'}, {}, {entries: ['/search']});
+
+        const nav = screen.getByRole('navigation', {name: 'NAV.MENU'});
+
+        expect(within(nav).getByRole('link', {name: 'NAV.LIBRARY'}).getAttribute('aria-current')).toBe('page');
+        expect(within(nav).getByRole('link', {name: 'NAV.DASHBOARD'}).getAttribute('aria-current')).toBeNull();
+    });
+
+    it('offersMyPublicProfileFirstInTheMenuWhenTheUserHasAName', async () => {
+        loggedInAs({role: 'USER', activeRole: 'USER', displayName: 'Lo bo'});
+        await vi.waitFor(() => expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/api/users/me'), expect.anything()));
+        await screen.findByRole('button', {name: 'NAV.MENU'});
+
+        await vi.waitFor(() => {
+            openMenu();
+            expect(screen.getAllByRole('menuitem')[0].getAttribute('href')).toBe('/u/Lo%20bo');
+        });
+        expect(screen.getAllByRole('menuitem')[0].textContent).toBe('NAV.MY_PROFILE');
+        expect(screen.queryByRole('menuitem', {name: 'NAV.INBOX'})).toBeNull();
+    });
+
+    it('offersNoProfileItemWithoutAName', async () => {
+        loggedInAs({role: 'USER', activeRole: 'USER'});
+        await vi.waitFor(() => expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/api/users/me'), expect.anything()));
+        openMenu();
+
+        await screen.findByText('NAV.SETTINGS');
+        expect(screen.queryByText('NAV.MY_PROFILE')).toBeNull();
+    });
+
+    it('shows how many inbox notes are unread', async () => {
+        loggedInAs({role: 'USER', activeRole: 'USER'}, {'GET /api/inbox': json(200, {results: [], unread: 3})});
+
+        const link = await screen.findByRole('link', {name: 'NAV.INBOX_UNREAD:3'});
+
+        expect(link.getAttribute('href')).toBe('/inbox');
+        expect(link.textContent).toBe('3');
+    });
+
+    it('theBellCountsUnreadNotesUnseenNewsAndOpenQuestions', async () => {
+        loggedInAs({role: 'USER', activeRole: 'USER'}, {
+            'GET /api/inbox': json(200, {results: [], unread: 2}),
+            'GET /api/news': json(200, {results: [{id: 1, seen: false}, {id: 2, seen: true}]}),
+            'GET /api/library/questions/count': json(200, {count: 4}),
+        });
+
+        expect((await screen.findByRole('link', {name: 'NAV.INBOX_UNREAD:7'})).textContent).toBe('7');
+    });
+
+    it('theInboxPageShowsNoBellCount', async () => {
+        loggedInAs({role: 'USER', activeRole: 'USER'}, {'GET /api/library/questions/count': json(200, {count: 4})},
+            {entries: ['/inbox']});
+        await vi.waitFor(() => expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/api/library/questions/count'), expect.anything()));
+
+        expect(screen.getByRole('link', {name: 'NAV.INBOX'}).textContent).toBe('');
+    });
+
+    it('shows no count without unread notes', async () => {
+        loggedInAs({role: 'USER', activeRole: 'USER'});
+
+        const link = await screen.findByRole('link', {name: 'NAV.INBOX'});
+
+        expect(link.textContent).toBe('');
     });
 
     it('offers the admin page and "view as" to an admin', async () => {
@@ -65,7 +157,8 @@ describe('AppHeader', () => {
         loggedInAs({role: 'PLATFORM_ADMIN', activeRole: 'PLATFORM_ADMIN'},
             {'GET /api/admin/users/pending-count': json(200, {count: 3})});
 
-        expect(await screen.findByLabelText('NAV.PENDING_REQUESTS:3')).toBeTruthy();
+        const badge = await screen.findByLabelText('NAV.PENDING_REQUESTS:3');
+        expect(badge.className).toContain('bg-amber-500');
         openMenu();
         expect((await screen.findByRole('menuitem', {name: /^NAV\.ADMIN ?3$/})).textContent).toContain('3');
     });

src/components/AppearanceCard.jsx

@@ -9,17 +9,26 @@ import {Switch} from '@/components/ui/switch';
 import {AccentPicker, CornersPicker} from './StylePickers.jsx';
 import {equippedSkin} from '../utils/rewards.js';
 import {usePreferences} from '../context/PreferencesContext.jsx';
+import usePersistSettings from '../hooks/usePersistSettings.js';
 import useSaveAppearance from '../hooks/useSaveAppearance.js';
 import {coverUrl} from '../utils/games.js';
 import {disableTilt, requestTilt, tiltAllowed, tiltNeedsPermission} from '../utils/parallax.js';
+import {saveSettings} from '../utils/settings.js';
 
 export default function AppearanceCard() {
     const {t} = useTranslation();
-    const {appearance, equipped} = usePreferences();
+    const {appearance, equipped, isDarkMode, setDarkMode} = usePreferences();
+    const persistSettings = usePersistSettings();
     const saveAppearance = useSaveAppearance();
     const [tilt, setTilt] = useState(tiltAllowed);
     const [tiltRefused, setTiltRefused] = useState(false);
 
+    const changeDarkMode = async (next) => {
+        setDarkMode(next);
+        const {ok} = await persistSettings(() => saveSettings({useDarkTheme: next}), {silent: true});
+        if (!ok) setDarkMode(!next);
+    };
+
     // requestTilt() starts inside the tap, as iOS demands.
     const changeTilt = (on) => {
         if (!on) {
@@ -39,6 +48,10 @@ export default function AppearanceCard() {
                 <CardTitle className="flex items-center gap-2"><Palette className="size-4 text-primary"/>{t('SETTINGS.APPEARANCE')}</CardTitle>
             </CardHeader>
             <CardContent className="space-y-6">
+                <div className="flex items-center justify-between gap-4">
+                    <Label htmlFor="useDarkTheme">{t('SETTINGS.DARK_THEME')}</Label>
+                    <Switch id="useDarkTheme" checked={isDarkMode} onCheckedChange={changeDarkMode}/>
+                </div>
                 <AccentPicker id="accent" value={appearance.accent} onChange={(accent) => saveAppearance({accent})}/>
                 <CornersPicker id="corners" value={appearance.corners} onChange={(corners) => saveAppearance({corners})}/>
                 {equippedSkin(equipped) && <p className="text-xs text-muted-foreground">{t('SETTINGS.SKIN_OVERRIDES')}</p>}

src/components/BacklogCard.jsx

@@ -1,65 +1,31 @@
-import {useEffect, useState} from 'react';
+import {useState} from 'react';
 import {useTranslation} from 'react-i18next';
-import {toast} from 'sonner';
-import {ListTodo, Loader2, Star} from 'lucide-react';
+import {ListTodo, Loader2} from 'lucide-react';
 
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import {Label} from '@/components/ui/label';
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
 import {Textarea} from '@/components/ui/textarea';
-import {cn} from '@/lib/utils';
-import {STATUS_META} from './GameStatusBadge.jsx';
-import {changedFields, NO_PRIORITY, saveBacklogEntry} from '../utils/backlog.js';
-import {GAME_PRIORITIES, GAME_STATUSES, MAX_NOTES_LENGTH} from '../utils/limits.js';
+import {changedFields, NO_PRIORITY} from '../utils/backlog.js';
+import {GAME_PRIORITIES, MAX_NOTES_LENGTH} from '../utils/limits.js';
+import useSaveBacklogField from '../hooks/useSaveBacklogField.js';
 import useUnsavedChanges from '../hooks/useUnsavedChanges.js';
 
-const toForm = (entry) => ({
-    status: entry.status ?? 'BACKLOG',
-    rating: entry.rating ?? 0,
-    notes: entry.notes ?? '',
-    priority: entry.priority ?? NO_PRIORITY,
-});
-
+/**
+ * Priority (saved on change) and notes (saved with the Save button). Status and rating live in the hero card.
+ *
+ * @param onSaved gets the saved backlog entry
+ */
 export default function BacklogCard({game, onSaved}) {
     const {t} = useTranslation();
-    const [saved, setSaved] = useState(() => toForm(game));
-    const [form, setForm] = useState(saved);
+    const [notes, setNotes] = useState(game.notes ?? '');
+    const {save, pending, busy} = useSaveBacklogField(game.appid, {onSaved});
 
-    // The PlayingHint can change the status from outside; keep the other unsaved edits.
-    useEffect(() => {
-        setSaved((current) => (current.status === game.status ? current : {...current, status: game.status}));
-        setForm((current) => (current.status === game.status ? current : {...current, status: game.status}));
-    }, [game.status]);
-    const [busy, setBusy] = useState(false);
-
-    const changes = changedFields(saved, form);
-    const dirty = Object.keys(changes).length > 0;
+    const savingNotes = pending?.field === 'notes';
+    const dirty = 'notes' in changedFields({notes: game.notes}, {notes});
     useUnsavedChanges(dirty);
-    const set = (field) => (value) => setForm((f) => ({...f, [field]: value}));
-
-    const save = async () => {
-        setBusy(true);
-        try {
-            const response = await saveBacklogEntry(game.appid, changes);
-            if (response.status === 401) return;
-            if (!response.ok) {
-                toast.error(t('BACKLOG.SAVE_FAILED'));
-                return;
-            }
-            const entry = await response.json();
-            const next = toForm(entry);
-            setSaved(next);
-            onSaved?.(entry);
-            setForm(next);
-            toast.success(t('BACKLOG.SAVED'));
-        } catch (err) {
-            console.error('backlog save error:', err);
-            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
-        } finally {
-            setBusy(false);
-        }
-    };
+    const priority = pending?.field === 'priority' ? pending.value : (game.priority ?? NO_PRIORITY);
 
     return (
         <Card className="p-6 gap-5">
@@ -68,82 +34,42 @@ export default function BacklogCard({game, onSaved}) {
                 {t('BACKLOG.TITLE')}
             </h2>
 
-            {/* Locked while saving: the answer replaces the form, so an edit made meanwhile would be lost. */}
-            <fieldset disabled={busy} className="contents">
-                <div className="grid gap-5 sm:grid-cols-3">
-                    <div className="space-y-2">
-                        <Label htmlFor="backlog-status">{t('BACKLOG.STATUS_LABEL')}</Label>
-                        <Select value={form.status} onValueChange={set('status')}>
-                            <SelectTrigger id="backlog-status" className="w-full"><SelectValue/></SelectTrigger>
-                            <SelectContent>
-                                {GAME_STATUSES.map((s) => {
-                                    const {icon: Icon, text} = STATUS_META[s];
-                                    return (
-                                        <SelectItem key={s} value={s}>
-                                            <Icon className={text}/>
-                                            {t(`BACKLOG.STATUS.${s}`)}
-                                        </SelectItem>
-                                    );
-                                })}
-                            </SelectContent>
-                        </Select>
-                    </div>
+            <div className="space-y-2 sm:max-w-xs">
+                <Label htmlFor="backlog-priority">{t('BACKLOG.PRIORITY_LABEL')}</Label>
+                <Select value={priority} onValueChange={(value) => save('priority', value)} disabled={busy}>
+                    <SelectTrigger id="backlog-priority" className="w-full"><SelectValue/></SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value={NO_PRIORITY}>{t('BACKLOG.PRIORITY.NONE')}</SelectItem>
+                        {GAME_PRIORITIES.map((p) => (
+                            <SelectItem key={p} value={p}>{t(`BACKLOG.PRIORITY.${p}`)}</SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </div>
 
-                    <div className="space-y-2">
-                        <Label htmlFor="backlog-priority">{t('BACKLOG.PRIORITY_LABEL')}</Label>
-                        <Select value={form.priority} onValueChange={set('priority')}>
-                            <SelectTrigger id="backlog-priority" className="w-full"><SelectValue/></SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value={NO_PRIORITY}>{t('BACKLOG.PRIORITY.NONE')}</SelectItem>
-                                {GAME_PRIORITIES.map((p) => (
-                                    <SelectItem key={p} value={p}>{t(`BACKLOG.PRIORITY.${p}`)}</SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
-                    </div>
-
-                    <div className="space-y-2">
-                        <Label id="backlog-rating">{t('BACKLOG.RATING_LABEL')}</Label>
-                        <div role="group" aria-labelledby="backlog-rating" className="flex h-9 items-center gap-1">
-                            {[1, 2, 3, 4, 5].map((n) => (
-                                <button
-                                    key={n}
-                                    type="button"
-                                    aria-label={t('BACKLOG.RATING_STARS', {count: n})}
-                                    aria-pressed={form.rating === n}
-                                    onClick={() => set('rating')(form.rating === n ? 0 : n)}
-                                    className="rounded-sm p-0.5 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
-                                >
-                                    <Star className={cn('size-6 transition-colors',
-                                        n <= form.rating ? 'fill-amber-400 text-amber-400' : 'text-muted-foreground/40 hover:text-amber-400')}/>
-                                </button>
-                            ))}
-                        </div>
-                    </div>
+            <div className="space-y-2">
+                <div className="flex items-baseline justify-between">
+                    <Label htmlFor="backlog-notes">{t('BACKLOG.NOTES_LABEL')}</Label>
+                    <span className="text-xs text-muted-foreground tabular-nums">{notes.length} / {MAX_NOTES_LENGTH}</span>
                 </div>
-
-                <div className="space-y-2">
-                    <div className="flex items-baseline justify-between">
-                        <Label htmlFor="backlog-notes">{t('BACKLOG.NOTES_LABEL')}</Label>
-                        <span className="text-xs text-muted-foreground tabular-nums">{form.notes.length} / {MAX_NOTES_LENGTH}</span>
-                    </div>
-                    <Textarea
-                        id="backlog-notes"
-                        rows={3}
-                        maxLength={MAX_NOTES_LENGTH}
-                        placeholder={t('BACKLOG.NOTES_PLACEHOLDER')}
-                        value={form.notes}
-                        onChange={(e) => set('notes')(e.target.value)}
-                    />
-                </div>
-            </fieldset>
+                {/* Locked while saving: an edit made meanwhile would be lost. */}
+                <Textarea
+                    id="backlog-notes"
+                    rows={3}
+                    maxLength={MAX_NOTES_LENGTH}
+                    placeholder={t('BACKLOG.NOTES_PLACEHOLDER')}
+                    value={notes}
+                    disabled={savingNotes}
+                    onChange={(e) => setNotes(e.target.value)}
+                />
+            </div>
 
             <div className="flex justify-end gap-2">
-                <Button variant="ghost" onClick={() => setForm(saved)} disabled={!dirty || busy}>
+                <Button variant="ghost" onClick={() => setNotes(game.notes ?? '')} disabled={!dirty || busy}>
                     {t('BACKLOG.RESET')}
                 </Button>
-                <Button onClick={save} disabled={!dirty || busy}>
-                    {busy && <Loader2 className="animate-spin"/>}
+                <Button onClick={() => save('notes', notes)} disabled={!dirty || busy}>
+                    {savingNotes && <Loader2 className="animate-spin"/>}
                     {t('BACKLOG.SAVE')}
                 </Button>
             </div>

src/components/BacklogCard.test.jsx

@@ -2,6 +2,7 @@
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
 import {act, cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
 import {MemoryRouter} from 'react-router-dom';
+import {toast} from 'sonner';
 import {fetchRoutes, json} from '../test/fetchRoutes.js';
 import BacklogCard from './BacklogCard.jsx';
 
@@ -10,45 +11,88 @@ vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
 
 const game = {appid: 220, status: 'PLAYING', rating: 4, notes: 'old', priority: null};
 const saveButton = () => screen.getByRole('button', {name: 'BACKLOG.SAVE'});
+const PATCH = 'PATCH /api/library/games/220/backlog';
+const openPriority = () => fireEvent.keyDown(screen.getByRole('combobox'), {key: 'Enter'});
+const patchBodies = () => fetch.mock.calls.filter(([, init]) => init?.method === 'PATCH').map(([, init]) => JSON.parse(init.body));
 
 describe('BacklogCard', () => {
     beforeEach(() => {
+        // jsdom lacks both; the Radix select needs them when it opens.
+        Element.prototype.hasPointerCapture ??= () => false;
+        Element.prototype.scrollIntoView ??= () => {};
         localStorage.setItem('tbp_session', '1');
         // Core answers the whole entry; the fields not sent come from the server.
-        fetchRoutes({'PATCH /api/library/games/220/backlog': (url, init) => json(200, {...game, ...JSON.parse(init.body)})});
+        fetchRoutes({[PATCH]: (url, init) => json(200, {...game, ...JSON.parse(init.body)})});
     });
 
     afterEach(() => {
         cleanup();
+        vi.clearAllMocks();
         localStorage.clear();
     });
 
-    it('enables saving only after a change', () => {
+    it('showsNeitherStatusNorRating', () => {
+        render(<MemoryRouter><BacklogCard game={game}/></MemoryRouter>);
+
+        expect(screen.queryByText('BACKLOG.STATUS_LABEL')).toBeNull();
+        expect(screen.queryByText('BACKLOG.RATING_LABEL')).toBeNull();
+        expect(screen.queryByRole('button', {name: /BACKLOG.RATING_STARS/})).toBeNull();
+    });
+
+    it('savesAPriorityAtOnceAndOnlyThatField', async () => {
+        const onSaved = vi.fn();
+        render(<MemoryRouter><BacklogCard game={game} onSaved={onSaved}/></MemoryRouter>);
+
+        openPriority();
+        fireEvent.click(await screen.findByRole('option', {name: 'BACKLOG.PRIORITY.HIGH'}));
+
+        await waitFor(() => expect(onSaved).toHaveBeenCalledWith({...game, priority: 'HIGH'}));
+        expect(patchBodies()).toEqual([{priority: 'HIGH'}]);
+    });
+
+    it('clearsThePriorityWithNull', async () => {
+        const onSaved = vi.fn();
+        render(<MemoryRouter><BacklogCard game={{...game, priority: 'LOW'}} onSaved={onSaved}/></MemoryRouter>);
+
+        openPriority();
+        fireEvent.click(await screen.findByRole('option', {name: 'BACKLOG.PRIORITY.NONE'}));
+
+        await waitFor(() => expect(onSaved).toHaveBeenCalled());
+        expect(patchBodies()).toEqual([{priority: null}]);
+    });
+
+    it('showsTheSavedPriorityAgainWhenSavingFails', async () => {
+        fetchRoutes({[PATCH]: json(500, {})});
+        render(<MemoryRouter><BacklogCard game={{...game, priority: 'LOW'}}/></MemoryRouter>);
+
+        openPriority();
+        fireEvent.click(await screen.findByRole('option', {name: 'BACKLOG.PRIORITY.HIGH'}));
+
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith('BACKLOG.SAVE_FAILED'));
+        expect(screen.getByRole('combobox').textContent).toContain('BACKLOG.PRIORITY.LOW');
+    });
+
+    it('enablesSavingOnlyAfterANotesChange', () => {
         render(<MemoryRouter><BacklogCard game={game}/></MemoryRouter>);
         expect(saveButton().disabled).toBe(true);
 
-        fireEvent.click(screen.getByRole('button', {name: 'BACKLOG.RATING_STARS:5'}));
+        fireEvent.change(screen.getByRole('textbox'), {target: {value: 'new notes'}});
 
         expect(saveButton().disabled).toBe(false);
     });
 
-    it('clears the rating on a click on the current star and sends blank notes as null', async () => {
+    it('sendsBlankNotesAsNull', async () => {
         const onSaved = vi.fn();
         render(<MemoryRouter><BacklogCard game={game} onSaved={onSaved}/></MemoryRouter>);
 
-        fireEvent.click(screen.getByRole('button', {name: 'BACKLOG.RATING_STARS:4'}));
         fireEvent.change(screen.getByRole('textbox'), {target: {value: '   '}});
         fireEvent.click(saveButton());
 
         await waitFor(() => expect(onSaved).toHaveBeenCalled());
-        const [url, init] = fetch.mock.calls[0];
-        expect(url).toMatch(/\/api\/library\/games\/220\/backlog$/);
-        expect(init.method).toBe('PATCH');
-        expect(JSON.parse(init.body)).toEqual({rating: null, notes: null});
-        expect(saveButton().disabled).toBe(true);
+        expect(patchBodies()).toEqual([{notes: null}]);
     });
 
-    it('sends only the changed notes, so an older tab does not overwrite the other fields', async () => {
+    it('sendsOnlyTheChangedNotes', async () => {
         const onSaved = vi.fn();
         render(<MemoryRouter><BacklogCard game={game} onSaved={onSaved}/></MemoryRouter>);
 
@@ -56,31 +100,39 @@ describe('BacklogCard', () => {
         fireEvent.click(saveButton());
 
         await waitFor(() => expect(onSaved).toHaveBeenCalled());
-        expect(JSON.parse(fetch.mock.calls[0][1].body)).toEqual({notes: 'new notes'});
+        expect(patchBodies()).toEqual([{notes: 'new notes'}]);
     });
 
-    it('locks the fields while the save runs, so nothing typed then is lost', async () => {
+    it('locksTheNotesWhileTheSaveRuns', async () => {
         let answer;
-        fetchRoutes({'PATCH /api/library/games/220/backlog': (url, init) => new Promise((resolve) => {
+        fetchRoutes({[PATCH]: (url, init) => new Promise((resolve) => {
             answer = () => resolve(json(200, {...game, ...JSON.parse(init.body)}));
         })});
         render(<MemoryRouter><BacklogCard game={game}/></MemoryRouter>);
 
-        fireEvent.click(screen.getByRole('button', {name: 'BACKLOG.RATING_STARS:5'}));
+        fireEvent.change(screen.getByRole('textbox'), {target: {value: 'new notes'}});
         fireEvent.click(saveButton());
 
-        // :disabled, not .disabled: the fieldset locks them, not their own attribute.
         expect(screen.getByRole('textbox').matches(':disabled')).toBe(true);
-        expect(screen.getByRole('button', {name: 'BACKLOG.RATING_STARS:1'}).matches(':disabled')).toBe(true);
         await act(async () => answer());
         expect(screen.getByRole('textbox').matches(':disabled')).toBe(false);
     });
 
-    it('does not count blank notes instead of none as a change', () => {
+    it('doesNotCountBlankNotesInsteadOfNoneAsAChange', () => {
         render(<MemoryRouter><BacklogCard game={{...game, notes: null}}/></MemoryRouter>);
 
         fireEvent.change(screen.getByRole('textbox'), {target: {value: '   '}});
 
         expect(saveButton().disabled).toBe(true);
     });
+
+    it('resetBringsBackTheSavedNotes', () => {
+        render(<MemoryRouter><BacklogCard game={game}/></MemoryRouter>);
+
+        fireEvent.change(screen.getByRole('textbox'), {target: {value: 'draft'}});
+        fireEvent.click(screen.getByRole('button', {name: 'BACKLOG.RESET'}));
+
+        expect(screen.getByRole('textbox').value).toBe('old');
+        expect(saveButton().disabled).toBe(true);
+    });
 });

src/components/BottomNav.jsx

@@ -0,0 +1,29 @@
+import {Link, useLocation} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+
+import {cn} from '@/lib/utils';
+import {isNavActive, NAV_ITEMS} from './navItems.js';
+
+/**
+ * The main navigation on a phone: a bar at the bottom edge, every item with its label.
+ */
+export default function BottomNav() {
+    const {t} = useTranslation();
+    const {pathname} = useLocation();
+    return (
+        <nav aria-label={t('NAV.MENU')}
+             className="fixed inset-x-0 bottom-0 z-50 flex border-t bg-background/95 pb-[env(safe-area-inset-bottom)] backdrop-blur md:hidden">
+            {NAV_ITEMS.map((item) => {
+                const active = isNavActive(item, pathname);
+                return (
+                    <Link key={item.to} to={item.to} aria-current={active ? 'page' : undefined}
+                          className={cn('flex flex-1 flex-col items-center gap-0.5 py-2 text-[11px] font-medium',
+                              active ? 'text-primary' : 'text-muted-foreground')}>
+                        <item.Icon className="size-5"/>
+                        <span className="max-w-full truncate px-1">{t(item.labelKey)}</span>
+                    </Link>
+                );
+            })}
+        </nav>
+    );
+}

src/components/BottomNav.test.jsx

@@ -0,0 +1,37 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, screen} from '@testing-library/react';
+import BottomNav from './BottomNav.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+import {renderWithProviders} from '../test/renderWithProviders.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+afterEach(cleanup);
+
+const renderNav = (path) => {
+    fetchRoutes({'GET /api/users/me': json(200, {settings: {}})});
+    renderWithProviders(<BottomNav/>, {entries: [path]});
+};
+
+describe('BottomNav', () => {
+    it('hasOneLabeledLinkPerMainItemAndIsHiddenFromMd', () => {
+        renderNav('/dashboard');
+
+        const links = screen.getAllByRole('link');
+
+        expect(links.map((link) => link.getAttribute('href')))
+            .toEqual(['/dashboard', '/library', '/play-next', '/stats', '/community']);
+        expect(links.map((link) => link.textContent))
+            .toEqual(['NAV.DASHBOARD', 'NAV.LIBRARY', 'NAV.PLAY_NEXT', 'NAV.STATS', 'NAV.COMMUNITY']);
+        expect(screen.getByRole('navigation').className).toContain('md:hidden');
+    });
+
+    it('theActiveLinkHasAriaCurrent', () => {
+        renderNav('/wishlist');
+
+        const current = screen.getAllByRole('link').filter((link) => link.getAttribute('aria-current') === 'page');
+
+        expect(current.map((link) => link.getAttribute('href'))).toEqual(['/library']);
+    });
+});

src/components/CatalogGameCard.jsx

@@ -0,0 +1,63 @@
+import {useEffect, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Plus} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import {Skeleton} from '@/components/ui/skeleton';
+import AddGamePanel from './AddGamePanel.jsx';
+import FitText from './FitText.jsx';
+import GameCover from './GameCover.jsx';
+import TimeToBeat from './TimeToBeat.jsx';
+import {fetchPreview} from '../utils/catalog.js';
+
+/**
+ * A game the user does not have: its catalog data and a way to add it. The add flow is the search of the library,
+ * started with the game's name; adding ends on the user's own game page.
+ *
+ * @param onAdded called after the game was added, so the page can load the user's own game
+ * @param fallback shown when the catalog does not know the game or the request fails
+ */
+export default function CatalogGameCard({appid, fallback, onAdded}) {
+    const {t} = useTranslation();
+    const [preview, setPreview] = useState(null);
+    const [failed, setFailed] = useState(false);
+    const [adding, setAdding] = useState(false);
+
+    useEffect(() => {
+        let cancelled = false;
+        setPreview(null);
+        setFailed(false);
+        setAdding(false);
+        (async () => {
+            const {ok, data} = await fetchPreview(appid);
+            if (cancelled) return;
+            if (ok && data) setPreview(data);
+            else setFailed(true);
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [appid]);
+
+    if (failed) return fallback;
+    if (!preview) return <Skeleton className="h-52 rounded-xl"/>;
+
+    return (
+        <div className="space-y-6">
+            <Card className="gap-4 p-5 md:flex-row md:items-start">
+                <GameCover appid={preview.appid} imageUrl={preview.imageUrl} className="w-full md:w-72 md:shrink-0"/>
+                <div className="min-w-0 flex-1 space-y-3">
+                    <h1 className="@container text-2xl font-bold"><FitText text={preview.name}/></h1>
+                    {preview.genres?.length > 0 && (
+                        <p className="text-sm text-muted-foreground">{preview.genres.join(', ')}</p>
+                    )}
+                    <TimeToBeat time={preview.timeToBeat}/>
+                    <p className="text-sm text-muted-foreground">{t('CATALOG.NOT_IN_LIBRARY')}</p>
+                    {!adding && <Button onClick={() => setAdding(true)}><Plus/>{t('CATALOG.ADD')}</Button>}
+                </div>
+            </Card>
+            {adding && <AddGamePanel initialQuery={preview.name} onAdded={onAdded} onClose={() => setAdding(false)}/>}
+        </div>
+    );
+}

src/components/ChangePasswordCard.jsx

@@ -8,6 +8,7 @@ import {Button} from '@/components/ui/button';
 import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
 import {Input} from '@/components/ui/input';
 import FormField from './FormField.jsx';
+import PasswordInput from './PasswordInput.jsx';
 import {changePassword} from '../utils/account.js';
 import {changePasswordSchema} from '../utils/validation.js';
 
@@ -54,13 +55,14 @@ export default function ChangePasswordCard() {
                         <Input id="currentPassword" type="password" autoComplete="current-password"
                                aria-invalid={!!errors.currentPassword} {...register('currentPassword')}/>
                     </FormField>
-                    <FormField id="newPassword" label={t('SETTINGS.CHANGE_PASSWORD.NEW')} error={errors.password} t={t}>
-                        <Input id="newPassword" type="password" autoComplete="new-password"
-                               aria-invalid={!!errors.password} {...register('password')}/>
+                    <FormField id="newPassword" label={t('SETTINGS.CHANGE_PASSWORD.NEW')} error={errors.password}
+                               description={t('VALIDATION.PASSWORD_RULES')} t={t}>
+                        <PasswordInput id="newPassword" autoComplete="new-password" aria-invalid={!!errors.password}
+                                       aria-describedby="newPassword-description" {...register('password')}/>
                     </FormField>
                     <FormField id="newPasswordRepeat" label={t('SETTINGS.CHANGE_PASSWORD.REPEAT')} error={errors.passwordConfirmation} t={t}>
-                        <Input id="newPasswordRepeat" type="password" autoComplete="new-password"
-                               aria-invalid={!!errors.passwordConfirmation} {...register('passwordConfirmation')}/>
+                        <PasswordInput id="newPasswordRepeat" autoComplete="new-password"
+                                       aria-invalid={!!errors.passwordConfirmation} {...register('passwordConfirmation')}/>
                     </FormField>
                     <Button type="submit" disabled={isSubmitting}>
                         {isSubmitting && <Loader2 className="animate-spin"/>}

src/components/ChangePasswordCard.test.jsx

@@ -28,6 +28,14 @@ describe('ChangePasswordCard', () => {
         vi.clearAllMocks();
     });
 
+    it('showsToggleAndRulesOnTheNewPasswordFields', () => {
+        render(<ChangePasswordCard/>);
+
+        expect(screen.getAllByRole('button', {name: 'LOGIN.SHOW_PASSWORD'}).length).toBeGreaterThanOrEqual(2);
+        expect(screen.getByLabelText('SETTINGS.CHANGE_PASSWORD.NEW').getAttribute('aria-describedby'))
+            .toBe(screen.getByText('VALIDATION.PASSWORD_RULES').id);
+    });
+
     it('sends the current and the new password and clears the form on success', async () => {
         const mock = answers(json(204));
         render(<ChangePasswordCard/>);

src/components/ComingBadge.jsx

@@ -0,0 +1,25 @@
+import {useTranslation} from 'react-i18next';
+import {CalendarClock} from 'lucide-react';
+
+import {Badge} from '@/components/ui/badge';
+import {formatDay} from '../utils/format.js';
+
+/**
+ * The "coming <date>" badge of a game that is not released yet; nothing for a released game. The date comes from the
+ * backend as `comingOn`, null for "coming soon".
+ *
+ * @param compact shows only the icon below the sm breakpoint
+ */
+export default function ComingBadge({game, compact = false}) {
+    const {t, i18n} = useTranslation();
+    if (!game.coming) return null;
+    const label = game.comingOn
+        ? t('LIBRARY.COMING', {date: formatDay(game.comingOn, i18n.language, {dateStyle: 'medium'})})
+        : t('LIBRARY.COMING_SOON');
+    return (
+        <Badge variant="outline" title={label}>
+            <CalendarClock/>
+            <span className={compact ? 'hidden sm:inline' : undefined}>{label}</span>
+        </Badge>
+    );
+}

src/components/ComingBadge.test.jsx

@@ -0,0 +1,49 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen} from '@testing-library/react';
+import ComingBadge from './ComingBadge.jsx';
+
+const i18n = vi.hoisted(() => ({language: 'en'}));
+
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key, options) => (options?.date ? `${key} ${options.date}` : key),
+        i18n,
+    }),
+}));
+
+describe('ComingBadge', () => {
+    afterEach(cleanup);
+
+    it('shows the release date in English', () => {
+        i18n.language = 'en';
+        render(<ComingBadge game={{coming: true, comingOn: '2026-12-04'}}/>);
+
+        expect(screen.getByText('LIBRARY.COMING Dec 4, 2026')).toBeTruthy();
+    });
+
+    it('shows the release date in German', () => {
+        i18n.language = 'de';
+        render(<ComingBadge game={{coming: true, comingOn: '2026-12-04'}}/>);
+
+        expect(screen.getByText('LIBRARY.COMING 04.12.2026')).toBeTruthy();
+    });
+
+    it('says "coming soon" when the date is unknown', () => {
+        render(<ComingBadge game={{coming: true, comingOn: null}}/>);
+
+        expect(screen.getByText('LIBRARY.COMING_SOON')).toBeTruthy();
+    });
+
+    it('shows nothing for a released game', () => {
+        const {container} = render(<ComingBadge game={{coming: false, comingOn: null}}/>);
+
+        expect(container.firstChild).toBeNull();
+    });
+
+    it('shows nothing when an older Core sends no field', () => {
+        const {container} = render(<ComingBadge game={{appid: 220}}/>);
+
+        expect(container.firstChild).toBeNull();
+    });
+});

src/components/CommunityStats.jsx

@@ -0,0 +1,157 @@
+import {useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Archive, Blocks, Clock, Gamepad2, Library, Link2, Sparkles, Trophy, Users} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import {Skeleton} from '@/components/ui/skeleton';
+import GameCover from './GameCover.jsx';
+import FitText from './FitText.jsx';
+import StatCard from './StatCard.jsx';
+import PeopleDialog from './people/PeopleDialog.jsx';
+import {YearBars} from './stats/FinishedStats.jsx';
+import {TagBars} from './stats/TasteStats.jsx';
+import {StatDrillProvider, useStatDrill, useTagDrill} from './stats/StatDrill.jsx';
+import useSession from '../hooks/useSession.js';
+import usePublicStats from '../hooks/usePublicStats.js';
+import {fetchUsers} from '../utils/people.js';
+import {genreKey} from '../utils/stats.js';
+
+function RankedGames({title, games, formatValue, drillKey}) {
+    const {t} = useTranslation();
+    const drill = useStatDrill();
+    return (
+        <Card className="gap-0 py-0">
+            <h3 className="flex items-center gap-2 border-b px-5 py-4 font-semibold">
+                <Trophy className="size-4 text-amber-500"/>
+                {title}
+            </h3>
+            <ol className="divide-y">
+                {games.map((g, idx) => (
+                    <li key={g.appid} className="flex items-center gap-3 px-5 py-3">
+                        <span className="w-4 text-right text-sm font-semibold text-muted-foreground tabular-nums">{idx + 1}</span>
+                        <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-16 shrink-0"/>
+                        <GameName game={g}/>
+                        <span className="text-sm text-muted-foreground tabular-nums">{formatValue(g.value ?? 0)}</span>
+                    </li>
+                ))}
+            </ol>
+            {drill && (
+                <Button variant="ghost" className="m-2 self-start max-sm:min-h-11"
+                        onClick={() => drill.open(title, {key: drillKey})}>
+                    {t('STATS.DRILL.SHOW_ALL')}
+                </Button>
+            )}
+        </Card>
+    );
+}
+
+function GameName({game}) {
+    return (
+        <span className="@container min-w-0 flex-1 font-medium">
+            <FitText text={game.name ?? `App ${game.appid}`}/>
+        </span>
+    );
+}
+
+function CommunityBars({core}) {
+    const {t} = useTranslation();
+    const drill = useStatDrill();
+    const select = useTagDrill();
+    const genreLabel = (name) => t(`STATS.GENRE.${genreKey(name)}`, {defaultValue: name});
+    return (
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+            {core?.gamesPerPlatform?.length > 0 && (
+                <BarsCard title={t('LANDING.PLATFORMS')}>
+                    <TagBars tags={core.gamesPerPlatform} onSelect={select('PLATFORM')}/>
+                </BarsCard>
+            )}
+            {core?.topGenres?.length > 0 && (
+                <BarsCard title={t('LANDING.TOP_GENRES')}>
+                    <TagBars tags={core.topGenres} label={genreLabel} onSelect={select('GENRE')}/>
+                </BarsCard>
+            )}
+            {core?.finishedPerYear?.length > 0 && (
+                <BarsCard title={t('LANDING.FINISHED_PER_YEAR')}>
+                    <YearBars perYear={core.finishedPerYear}
+                              onSelect={drill && ((year) => drill.open(`${t('LANDING.FINISHED_PER_YEAR')}: ${year}`, {key: 'FINISHED_YEAR', arg: year}))}/>
+                </BarsCard>
+            )}
+        </div>
+    );
+}
+
+function BarsCard({title, children}) {
+    return (
+        <Card className="gap-0 py-0">
+            <h3 className="flex items-center gap-2 border-b px-5 py-4 font-semibold">{title}</h3>
+            <div className="px-5 py-4">{children}</div>
+        </Card>
+    );
+}
+
+/**
+ * The numbers of all users: totals, top games and bars. Logged-in users open the people behind a total.
+ */
+export default function CommunityStats() {
+    const {t, i18n} = useTranslation();
+    const {data, isLoading} = usePublicStats();
+    const {active} = useSession();
+    const [people, setPeople] = useState(null);
+
+    const auth = data.auth;
+    const core = data.core;
+
+    const stats = [
+        [t('LANDING.TOTAL_USERS'), auth?.totalUsers, Users, undefined, undefined, 'TOTAL_USERS'],
+        [t('LANDING.STEAM_LINKED'), auth?.usersWithSteamLinked, Link2, undefined, undefined, 'STEAM_LINKED'],
+        [t('LANDING.TOTAL_GAMES'), core?.totalLibraryEntries, Gamepad2, undefined, 'ENTRIES'],
+        [t('LANDING.GAMES_PLAYED'), core?.totalGamesPlayed, Sparkles, undefined, 'PLAYED'],
+        [t('LANDING.DISTINCT_GAMES'), core?.totalDistinctGames, Blocks, undefined, 'OWNED'],
+        [t('LANDING.TOTAL_PLAYTIME_DAYS'), core?.totalPlaytimeDays, Clock, ` ${t('LANDING.DAYS_SUFFIX')}`],
+        [t('LANDING.BIGGEST_LIBRARY'), core?.biggestLibrary, Library],
+        [t('LANDING.BIGGEST_BACKLOG'), core?.biggestBacklog, Archive],
+    ];
+
+    return (
+        <StatDrillProvider source="community">
+            <div className="space-y-8">
+                <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+                    {isLoading
+                        ? stats.map(([label]) => <Skeleton key={label} className="h-36 rounded-xl"/>)
+                        : stats.map(([label, value, icon, suffix, key, usersKey]) => (
+                            <StatCard key={label} label={label} value={value ?? 0} icon={icon} suffix={suffix}
+                                      drill={key && {params: {key}}}
+                                      onClick={active && usersKey && value > 0
+                                          ? () => setPeople({title: label, key: usersKey}) : undefined}/>
+                        ))}
+                </div>
+
+                <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+                    {core?.topPlayedGames?.length > 0 && (
+                        <RankedGames
+                            title={t('LANDING.TOP_PLAYED')}
+                            games={core.topPlayedGames}
+                            formatValue={(minutes) => `${Math.round(minutes / 60).toLocaleString(i18n.language)}h`}
+                            drillKey="MOST_PLAYED"
+                        />
+                    )}
+                    {core?.topOwnedGames?.length > 0 && (
+                        <RankedGames
+                            title={t('LANDING.TOP_OWNED')}
+                            games={core.topOwnedGames}
+                            formatValue={(count) => count.toLocaleString(i18n.language)}
+                            drillKey="OWNED"
+                        />
+                    )}
+                </div>
+
+                <CommunityBars core={core}/>
+            </div>
+            {people && (
+                <PeopleDialog title={people.title} onClose={() => setPeople(null)}
+                              load={(page) => fetchUsers({key: people.key, page})}/>
+            )}
+        </StatDrillProvider>
+    );
+}

src/components/CompletedHint.jsx

@@ -1,11 +1,9 @@
-import {useState} from 'react';
 import {useTranslation} from 'react-i18next';
-import {toast} from 'sonner';
 import {Loader2, Trophy} from 'lucide-react';
 
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
-import {saveGameStatus} from '../utils/backlog.js';
+import useSetStatus from '../hooks/useSetStatus.js';
 import {allAchievementsUnlocked} from '../utils/confetti.js';
 
 /**
@@ -15,36 +13,17 @@ import {allAchievementsUnlocked} from '../utils/confetti.js';
  */
 export default function CompletedHint({game, onChanged}) {
     const {t} = useTranslation();
-    const [busy, setBusy] = useState(false);
+    const {setStatus, busy} = useSetStatus(game.appid, {onChanged});
 
     if (!allAchievementsUnlocked(game) || game.status === 'COMPLETED') return null;
 
-    const setCompleted = async () => {
-        setBusy(true);
-        try {
-            const response = await saveGameStatus(game.appid, 'COMPLETED');
-            if (response.status === 401) return;
-            if (!response.ok) {
-                toast.error(t('BACKLOG.SAVE_FAILED'));
-                return;
-            }
-            onChanged(await response.json());
-            toast.success(t('BACKLOG.SAVED'));
-        } catch (err) {
-            console.error('set completed error:', err);
-            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
-        } finally {
-            setBusy(false);
-        }
-    };
-
     return (
         <Card className="gap-3 border-amber-500/40 bg-amber-500/5 p-4 sm:flex-row sm:items-center sm:gap-4">
             <div className="flex flex-1 items-start gap-3 sm:items-center">
                 <Trophy className="size-5 shrink-0 text-amber-500"/>
                 <p className="text-sm">{t('GAME_DETAIL.ALL_UNLOCKED')}</p>
             </div>
-            <Button size="sm" className="self-end sm:self-auto" onClick={setCompleted} disabled={busy}>
+            <Button size="sm" className="self-end sm:self-auto" onClick={() => setStatus('COMPLETED')} disabled={busy}>
                 {busy && <Loader2 className="animate-spin"/>}
                 {t('GAME_DETAIL.SET_COMPLETED')}
             </Button>

src/components/CompletedHint.test.jsx

@@ -7,6 +7,7 @@ import CompletedHint from './CompletedHint.jsx';
 
 vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
 vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+vi.mock('../hooks/usePointsCheck.js', () => ({default: () => vi.fn()}));
 
 const game = {appid: 220, status: 'FINISHED', hasAchievements: true, statsVisible: true, achievementsTotal: 10, achievementsUnlocked: 10};
 const renderHint = (props) => render(<MemoryRouter><CompletedHint game={game} onChanged={() => {}} {...props}/></MemoryRouter>);

src/components/CurrentlyPlayingCard.jsx

@@ -40,7 +40,7 @@ export default function CurrentlyPlayingCard({games, syncing, wide}) {
                                     <FitText text={g.name ?? `App ${g.appid}`}/>
                                 </div>
                                 <div className="text-xs text-muted-foreground tabular-nums">
-                                    {formatPlaytime(g.playtimeMinutes)}
+                                    {formatPlaytime(g.totalPlaytimeMinutes ?? g.playtimeMinutes)}
                                 </div>
                             </Link>
                         </li>

src/components/CurrentlyPlayingCard.test.jsx

@@ -0,0 +1,18 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import CurrentlyPlayingCard from './CurrentlyPlayingCard.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+describe('CurrentlyPlayingCard', () => {
+    afterEach(cleanup);
+
+    it('shows the set total of a game, not the minutes of its own row', () => {
+        render(<MemoryRouter><CurrentlyPlayingCard games={[{appid: 620, name: 'Portal 2', playtimeMinutes: 100,
+            totalPlaytimeMinutes: 600, status: 'PLAYING'}]}/></MemoryRouter>);
+
+        expect(screen.getByText('10h')).toBeTruthy();
+    });
+});

src/components/DashboardHint.jsx

@@ -8,6 +8,8 @@ import {canCorrect} from '../utils/corrections.js';
 import {fetchLinkQueue} from '../utils/links.js';
 
 export const AUTO_CLOSE_MS = 30_000;
+// Getting-started hints stay until the user closes them.
+const STICKY_HINTS = ['NO_STEAM', 'EMPTY_LIBRARY'];
 const CLOSED_KEY = 'tbp_closed_hints';
 
 // Hints closed in this tab, so going back to the dashboard does not show them again.
@@ -29,14 +31,15 @@ const rememberClosed = (hintId) => {
 
 /**
  * The hints on the dashboard, one at a time: the admin hints newest first, then the automatic ones. A DISMISS hint
- * closed by the 30 s timer without "Do not show again" comes back in the next browser session. The X on an automatic
- * hint hides it for 7 days, "Do not show again" for good.
+ * closed by the 30 s timer without "Do not show again" comes back in the next browser session; STICKY_HINTS have no
+ * timer. The X on an automatic hint hides it for 7 days, "Do not show again" for good.
  *
  * @param user the current user
+ * @param canSync a Steam ID or a PlayStation link: then the NO_STEAM hint has nothing to say; undefined while loading
  * @param summary Core's library summary; undefined while loading, null when it failed
  * @param trend the TREND group of the stats; undefined while loading, null when it failed
  */
-export default function DashboardHint({user, summary, trend}) {
+export default function DashboardHint({user, canSync, summary, trend}) {
     const {t} = useTranslation();
     const [data, setData] = useState({hints: [], automatic: []});
     const [closed, setClosed] = useState(closedIds);
@@ -67,12 +70,12 @@ export default function DashboardHint({user, summary, trend}) {
         const needsSummary = hints.some((h) => h.emptyLibraryOnly) || automatic.includes('EMPTY_LIBRARY');
         // Show nothing until every fact the cards need has settled, so a later fact does not swap the card.
         if ((needsSummary && summary === undefined) || (automatic.includes('PILE_GREW') && trend === undefined)
-            || (automatic.includes('NO_STEAM') && !user) || links === undefined) {
+            || (automatic.includes('NO_STEAM') && (!user || canSync === undefined)) || links === undefined) {
             return undefined;
         }
         const libraryEmpty = summary?.total === 0;
         const growth = pileGrowth(trend);
-        const condition = {NO_STEAM: !user?.steamId, EMPTY_LIBRARY: libraryEmpty, LINK_QUEUE: links > 0, PILE_GREW: growth > 0};
+        const condition = {NO_STEAM: !canSync, EMPTY_LIBRARY: libraryEmpty, LINK_QUEUE: links > 0, PILE_GREW: growth > 0};
         const count = {LINK_QUEUE: links, PILE_GREW: growth};
         return [
             ...hints.filter((h) => !h.emptyLibraryOnly || libraryEmpty),
@@ -80,7 +83,7 @@ export default function DashboardHint({user, summary, trend}) {
                 id: `auto:${key}`, auto: key, kind: 'DISMISS', text: t(`HINT.AUTO_${key}`, {count: count[key]}),
             })),
         ].find((h) => !closed.includes(h.id));
-    }, [data, closed, summary, trend, user, linkCount, wantsLinkQueue, t]);
+    }, [data, closed, summary, trend, user, canSync, linkCount, wantsLinkQueue, t]);
 
     // A failed save only shows an error: the hint comes back in the next browser session.
     const close = useCallback(async (forever, byUser) => {
@@ -104,7 +107,7 @@ export default function DashboardHint({user, summary, trend}) {
     }, [hint, t]);
 
     useEffect(() => {
-        if (hint?.kind !== 'DISMISS') return undefined;
+        if (hint?.kind !== 'DISMISS' || STICKY_HINTS.includes(hint.auto)) return undefined;
         const timer = setTimeout(() => close(hideForever, false), AUTO_CLOSE_MS);
         return () => clearTimeout(timer);
     }, [hint, hideForever, close]);
@@ -116,6 +119,6 @@ export default function DashboardHint({user, summary, trend}) {
         <HintCard key={hint.id} hint={hint} hideForever={hideForever} onHideForeverChange={setHideForever}
                   onClose={(event) => event.detail < 2 && close(hideForever, true)}
                   onAccept={(event) => event.detail < 2 && close(true, true)}
-                  className="fixed inset-x-4 bottom-4 z-50 mx-auto max-w-md"/>
+                  className="fixed inset-x-4 bottom-4 z-50 mx-auto max-w-md max-md:bottom-20"/>
     );
 }

src/components/DashboardHint.test.jsx

@@ -20,7 +20,8 @@ const GREW = {days: [{day: '2026-10-01', backlogGames: 10}, {day: '2026-10-02',
 
 const hintRoutes = (list, done = json(204), more = {}) => fetchRoutes({
     'GET /api/hints': list, 'PUT /api/hints/1/done': done, 'PUT /api/hints/2/done': done,
-    'PUT /api/hints/auto/NO_STEAM/snooze': done, 'PUT /api/hints/auto/NO_STEAM/done': done, ...more,
+    'PUT /api/hints/auto/NO_STEAM/snooze': done, 'PUT /api/hints/auto/NO_STEAM/done': done,
+    'PUT /api/hints/auto/PILE_GREW/done': done, 'PUT /api/hints/auto/EMPTY_LIBRARY/snooze': done, ...more,
 });
 const doneCalls = () => fetch.mock.calls.filter(([, init]) => init?.method === 'PUT').map(([url]) => url);
 
@@ -148,7 +149,7 @@ describe('DashboardHint, automatic hints', () => {
     });
 
     it('shows the admin hints before the automatic ones', async () => {
-        await showAuto(['NO_STEAM'], {user: {...USER, steamId: null}}, [DISMISS]);
+        await showAuto(['NO_STEAM'], {user: {...USER, steamId: null}, canSync: false}, [DISMISS]);
 
         expect(screen.getByText('Heute Nacht Update')).toBeTruthy();
         fireEvent.click(screen.getByLabelText('HINT.CLOSE'));
@@ -156,14 +157,26 @@ describe('DashboardHint, automatic hints', () => {
         expect(screen.getByText('HINT.AUTO_NO_STEAM')).toBeTruthy();
     });
 
-    it('shows NO_STEAM only without a Steam ID', async () => {
-        await showAuto(['NO_STEAM']);
+    it('shows NO_STEAM only when nothing can sync', async () => {
+        await showAuto(['NO_STEAM'], {canSync: true});
+
+        expect(screen.queryByRole('status')).toBeNull();
+    });
+
+    it('shows no NO_STEAM hint to a user with a PlayStation link and no Steam ID', async () => {
+        await showAuto(['NO_STEAM'], {user: {...USER, steamId: null}, canSync: true});
+
+        expect(screen.queryByRole('status')).toBeNull();
+    });
+
+    it('waits with NO_STEAM until it is known whether the user can sync', async () => {
+        await showAuto(['NO_STEAM'], {user: {...USER, steamId: null}, canSync: undefined});
 
         expect(screen.queryByRole('status')).toBeNull();
     });
 
     it('hides an automatic hint for 7 days with X', async () => {
-        await showAuto(['NO_STEAM'], {user: {...USER, steamId: null}});
+        await showAuto(['NO_STEAM'], {user: {...USER, steamId: null}, canSync: false});
 
         await act(async () => fireEvent.click(screen.getByLabelText('HINT.CLOSE')));
 
@@ -172,7 +185,7 @@ describe('DashboardHint, automatic hints', () => {
     });
 
     it('hides an automatic hint for good with the tick', async () => {
-        await showAuto(['NO_STEAM'], {user: {...USER, steamId: null}});
+        await showAuto(['NO_STEAM'], {user: {...USER, steamId: null}, canSync: false});
 
         fireEvent.click(screen.getByLabelText('HINT.DO_NOT_SHOW_AGAIN'));
         await act(async () => fireEvent.click(screen.getByLabelText('HINT.CLOSE')));
@@ -181,7 +194,7 @@ describe('DashboardHint, automatic hints', () => {
     });
 
     it('does not store the auto close of an automatic hint and shows it again next session', async () => {
-        await showAuto(['NO_STEAM'], {user: {...USER, steamId: null}});
+        await showAuto(['PILE_GREW'], {trend: GREW});
 
         await act(async () => vi.advanceTimersByTime(AUTO_CLOSE_MS));
 
@@ -189,17 +202,30 @@ describe('DashboardHint, automatic hints', () => {
         expect(doneCalls()).toEqual([]);
         cleanup();
         sessionStorage.clear();
-        await showAuto(['NO_STEAM'], {user: {...USER, steamId: null}});
-        expect(screen.getByText('HINT.AUTO_NO_STEAM')).toBeTruthy();
+        await showAuto(['PILE_GREW'], {trend: GREW});
+        expect(screen.getByText('HINT.AUTO_PILE_GREW:2')).toBeTruthy();
     });
 
     it('hides the auto closed hint for good when the tick is set', async () => {
-        await showAuto(['NO_STEAM'], {user: {...USER, steamId: null}});
+        await showAuto(['PILE_GREW'], {trend: GREW});
 
         fireEvent.click(screen.getByLabelText('HINT.DO_NOT_SHOW_AGAIN'));
         await act(async () => vi.advanceTimersByTime(AUTO_CLOSE_MS));
 
-        expect(doneCalls()).toEqual([expect.stringContaining('/api/hints/auto/NO_STEAM/done')]);
+        expect(doneCalls()).toEqual([expect.stringContaining('/api/hints/auto/PILE_GREW/done')]);
+    });
+
+    it.each([
+        ['NO_STEAM', {user: {...USER, steamId: null}, canSync: false}],
+        ['EMPTY_LIBRARY', {summary: {total: 0}}],
+    ])('keeps the %s hint after the auto close time, it closes only by the user', async (key, props) => {
+        await showAuto([key], props);
+
+        await act(async () => vi.advanceTimersByTime(AUTO_CLOSE_MS * 2));
+
+        expect(screen.getByText(`HINT.AUTO_${key}`)).toBeTruthy();
+        await act(async () => fireEvent.click(screen.getByLabelText('HINT.CLOSE')));
+        expect(screen.queryByRole('status')).toBeNull();
     });
 
     it('does not show an automatic hint that Auth did not send', async () => {
@@ -265,7 +291,7 @@ describe('DashboardHint, automatic hints', () => {
 
     it('shows only the admin hints when Auth sends no automatic list', async () => {
         hintRoutes(json(200, {results: [DISMISS]}));
-        mount({user: {...USER, steamId: null}});
+        mount({user: {...USER, steamId: null}, canSync: false});
         await act(async () => undefined);
 
         expect(screen.getByText('Heute Nacht Update')).toBeTruthy();

src/components/DashboardWelcomeCard.jsx

@@ -14,10 +14,12 @@ import SyncStatusBadge from './SyncStatusBadge.jsx';
 import {useCurrentUserContext} from '../context/CurrentUserContext.jsx';
 import {bannerEffect, lookClass} from '../utils/rewards.js';
 
-export default function DashboardWelcomeCard({bannerAppid, avatarUrl, sync, forceSync, editing, onCustomize, equipped}) {
+// canSync: a Steam ID or a PlayStation link; the sync controls follow it, the Steam ID badge only the Steam ID.
+export default function DashboardWelcomeCard({bannerAppid, avatarUrl, sync, forceSync, canSync, editing, onCustomize, equipped, returning}) {
     const {t} = useTranslation();
     const {user: userData} = useCurrentUserContext();
     const hasSteamId = !!userData?.steamId;
+    const showSync = canSync ?? hasSteamId;
     const syncBusy = forceSync.busy || sync.isRunning;
 
     return (
@@ -34,7 +36,7 @@ export default function DashboardWelcomeCard({bannerAppid, avatarUrl, sync, forc
                     </span>
                 )}
                 <div className="min-w-0 flex-1">
-                    <p className="text-sm font-medium text-muted-foreground">{t('DASHBOARD.WELCOME_BACK')}</p>
+                    <p className="text-sm font-medium text-muted-foreground">{t(returning ? 'DASHBOARD.WELCOME_BACK' : 'DASHBOARD.WELCOME')}</p>
                     <h1 className="@container mt-1 text-3xl md:text-4xl font-bold tracking-tight">
                         <FitText text={[t('DASHBOARD.HELLO'), userData?.displayName ?? userData?.email?.split('@')[0], '👋'].filter(Boolean).join(' ')}/>
                     </h1>
@@ -46,19 +48,20 @@ export default function DashboardWelcomeCard({bannerAppid, avatarUrl, sync, forc
                         </Badge>
                     ) : (
                         <Button asChild variant="link" className="mt-2 h-auto p-0">
-                            <Link to="/settings"><Link2 className="size-4"/>{t('DASHBOARD.NO_STEAM_ID')}</Link>
+                            <Link to="/settings?tab=connections"><Link2 className="size-4"/>{t('DASHBOARD.NO_STEAM_ID')}</Link>
                         </Button>
                     )}
                 </div>
             </div>
 
             <div className="relative flex flex-col items-start md:items-end gap-3 shrink-0">
-                {hasSteamId && (
+                {showSync && (
                     <>
                         <SyncStatusBadge
                             status={sync.status}
                             lastSyncedAt={sync.lastSyncedAt}
                             isRunning={sync.isRunning}
+                            queued={sync.queued}
                             stale={sync.stale}
                         />
                         <Button onClick={forceSync.trigger} disabled={syncBusy}>

src/components/DeleteAccountCard.jsx

@@ -48,6 +48,8 @@ export default function DeleteAccountCard({email}) {
             }
             if (response.status === 403) {
                 toast.error(t('SETTINGS.DELETE_ACCOUNT.WRONG_PASSWORD'));
+            } else if (response.status === 409) {
+                toast.error(t('SETTINGS.DELETE_ACCOUNT.LAST_ADMIN'));
             } else if (response.status === 429) {
                 const minutes = Math.ceil(Number(response.headers.get('Retry-After') ?? 900) / 60);
                 toast.error(t('SETTINGS.DELETE_ACCOUNT.TOO_MANY', {minutes}));

src/components/DeleteAccountCard.test.jsx

@@ -78,6 +78,18 @@ describe('DeleteAccountCard', () => {
         expect(localStorage.getItem('tbp_session')).toBe('1');
     });
 
+    it('tells the last admin to make another admin first and stays on the page', async () => {
+        deleteAnswers(json(409, {code: 'LAST_ADMIN'}));
+        renderCard();
+        openAndFill(EMAIL, 'secret');
+
+        fireEvent.click(confirmButton());
+
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith('SETTINGS.DELETE_ACCOUNT.LAST_ADMIN'));
+        expect(confirmButton()).toBeTruthy();
+        expect(localStorage.getItem('tbp_session')).toBe('1');
+    });
+
     it('shows the lock message after too many wrong passwords', async () => {
         deleteAnswers({...json(429, {}), headers: new Headers({'Retry-After': '900'})});
         renderCard();

src/components/EditionsCard.jsx

@@ -1,37 +1,39 @@
 import {useState} from 'react';
 import {Link} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
-import {Layers, Link2Off} from 'lucide-react';
+import {Layers, Link2Off, Unlink} from 'lucide-react';
 import {toast} from 'sonner';
 
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import GameStatusBadge from './GameStatusBadge.jsx';
+import UnlinkDialog from './UnlinkDialog.jsx';
 import FitText from './FitText.jsx';
-import {unlinkGame} from '../utils/links.js';
+import {splitGame, unlinkGame} from '../utils/links.js';
 import {platformLabel} from '../utils/platforms.js';
 
 /**
- * The other editions of this game in the own library, and the buttons to ask for a link (everyone) or to unlink
- * (auditor). Shown on every game: a request must be possible from any game.
+ * The other editions of this game in the own library, and the buttons to ask for a link (everyone), to split the game
+ * off its set (everyone, for the own library) or to unlink (auditor). Shown on every game: a request must be possible
+ * from any game.
  */
 export default function EditionsCard({game, auditor, onRequest, onChanged}) {
     const {t} = useTranslation();
     const [busy, setBusy] = useState(false);
 
-    const unlink = async () => {
+    const run = async (call, doneKey) => {
         setBusy(true);
         try {
-            const response = await unlinkGame(game.appid);
+            const response = await call(game.appid);
             if (response.status === 401) return;
             if (response.ok) {
-                toast.success(t('LINKS.UNLINKED'));
+                toast.success(t(doneKey));
                 onChanged();
             } else {
                 toast.error(t('LINKS.ERROR'));
             }
         } catch (err) {
-            console.error('Unlink error:', err);
+            console.error('Edition change error:', err);
             toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
         } finally {
             setBusy(false);
@@ -56,16 +58,22 @@ export default function EditionsCard({game, auditor, onRequest, onChanged}) {
                             </li>
                         ))}
                     </ul>
+                    <p className="text-muted-foreground">{t('LINKS.SHARED_STATUS')}</p>
                 </div>
             )}
             <div className="flex flex-wrap gap-2">
                 <Button type="button" variant="outline" size="sm" onClick={onRequest}>
                     <Layers/>{t(auditor ? 'LINKS.LINK_WITH' : 'LINKS.SAME_AS')}
                 </Button>
+                {game.editions?.length > 0 && (
+                    <UnlinkDialog size="sm" icon={Unlink} label={t('LINKS.SPLIT')} title={t('LINKS.SPLIT_CONFIRM_TITLE')}
+                                  description={t('LINKS.SPLIT_CONFIRM_TEXT')} confirmLabel={t('LINKS.SPLIT')} disabled={busy}
+                                  onConfirm={() => run(splitGame, 'LINKS.SPLIT_DONE')}/>
+                )}
                 {auditor && game.linked && (
-                    <Button type="button" variant="outline" size="sm" disabled={busy} onClick={unlink}>
-                        <Link2Off/>{t('LINKS.UNLINK')}
-                    </Button>
+                    <UnlinkDialog size="sm" icon={Link2Off} label={t('LINKS.UNLINK')} title={t('LINKS.UNLINK_CONFIRM_TITLE')}
+                                  description={t('LINKS.UNLINK_CONFIRM_TEXT')} confirmLabel={t('LINKS.UNLINK')} disabled={busy}
+                                  onConfirm={() => run(unlinkGame, 'LINKS.UNLINKED')}/>
                 )}
             </div>
         </Card>

src/components/EditionsCard.test.jsx

@@ -0,0 +1,86 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, fireEvent, render, screen, waitFor, within} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import {toast} from 'sonner';
+import EditionsCard from './EditionsCard.jsx';
+import {splitGame, unlinkGame} from '../utils/links.js';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+vi.mock('../utils/links.js', () => ({splitGame: vi.fn(), unlinkGame: vi.fn()}));
+
+const edition = {appid: 221, name: 'Game (PS5)', platform: 'PS5', source: 'PSN', status: 'PLAYING'};
+const renderCard = (game, onChanged = vi.fn()) => {
+    render(<MemoryRouter><EditionsCard game={game} auditor={false} onRequest={vi.fn()} onChanged={onChanged}/></MemoryRouter>);
+    return onChanged;
+};
+
+const confirmSplit = () => {
+    fireEvent.click(screen.getByRole('button', {name: 'LINKS.SPLIT'}));
+    fireEvent.click(within(screen.getByRole('dialog')).getByRole('button', {name: 'LINKS.SPLIT'}));
+};
+
+describe('EditionsCard', () => {
+    beforeEach(() => vi.clearAllMocks());
+    afterEach(cleanup);
+
+    it('showsTheSplitButtonAndTheSharedHintOnlyWithEditions', () => {
+        renderCard({appid: 220, editions: []});
+
+        expect(screen.queryByText('LINKS.SPLIT')).toBeNull();
+        expect(screen.queryByText('LINKS.SHARED_STATUS')).toBeNull();
+
+        cleanup();
+        renderCard({appid: 220, editions: [edition]});
+
+        expect(screen.getByText('LINKS.SPLIT')).toBeTruthy();
+        expect(screen.getByText('LINKS.SHARED_STATUS')).toBeTruthy();
+    });
+
+    it('asksBeforeSplittingAndSendsNothingOnCancel', () => {
+        renderCard({appid: 220, editions: [edition]});
+
+        fireEvent.click(screen.getByRole('button', {name: 'LINKS.SPLIT'}));
+
+        expect(screen.getByText('LINKS.SPLIT_CONFIRM_TITLE')).toBeTruthy();
+        fireEvent.click(screen.getByRole('button', {name: 'DIALOG.CANCEL'}));
+        expect(splitGame).not.toHaveBeenCalled();
+    });
+
+    it('splitsTheGameAndReloads', async () => {
+        splitGame.mockResolvedValue({ok: true, status: 204});
+        const onChanged = renderCard({appid: 220, editions: [edition]});
+
+        confirmSplit();
+
+        await waitFor(() => expect(onChanged).toHaveBeenCalled());
+        expect(splitGame).toHaveBeenCalledWith(220);
+        expect(toast.success).toHaveBeenCalledWith('LINKS.SPLIT_DONE');
+    });
+
+    it('showsAnErrorAndDoesNotReloadWhenTheCallFails', async () => {
+        splitGame.mockResolvedValue({ok: false, status: 404});
+        const onChanged = renderCard({appid: 220, editions: [edition]});
+
+        confirmSplit();
+
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith('LINKS.ERROR'));
+        expect(onChanged).not.toHaveBeenCalled();
+    });
+
+    it('asksBeforeUnlinkingAndUnlinksOnConfirm', async () => {
+        unlinkGame.mockResolvedValue({ok: true, status: 204});
+        const onChanged = vi.fn();
+        render(<MemoryRouter><EditionsCard game={{appid: 220, linked: true, editions: []}} auditor onRequest={vi.fn()}
+                                           onChanged={onChanged}/></MemoryRouter>);
+
+        fireEvent.click(screen.getByRole('button', {name: 'LINKS.UNLINK'}));
+        expect(unlinkGame).not.toHaveBeenCalled();
+        fireEvent.click(within(screen.getByRole('dialog')).getByRole('button', {name: 'LINKS.UNLINK'}));
+
+        await waitFor(() => expect(onChanged).toHaveBeenCalled());
+        expect(unlinkGame).toHaveBeenCalledWith(220);
+        expect(toast.success).toHaveBeenCalledWith('LINKS.UNLINKED');
+    });
+});

src/components/EmptyLibraryCard.jsx

@@ -0,0 +1,35 @@
+import {Link} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+import {Library} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import HintText from './HintText.jsx';
+
+/**
+ * The dashboard's answer to an empty library.
+ *
+ * @param reason 'NO_SOURCE' (nothing linked yet) or 'STEAM_PRIVATE' (Steam is linked and synced, but found no games)
+ */
+export default function EmptyLibraryCard({reason}) {
+    const {t} = useTranslation();
+    return (
+        <Card className="items-center gap-3 p-6 text-center">
+            <Library className="size-10 text-muted-foreground"/>
+            <h2 className="font-semibold">{t('DASHBOARD.EMPTY.TITLE')}</h2>
+            <p className="max-w-md text-sm text-muted-foreground">
+                {reason === 'STEAM_PRIVATE'
+                    ? <HintText text={t('LIBRARY.EMPTY_PRIVATE')}/>
+                    : t('DASHBOARD.EMPTY.NO_SOURCE')}
+            </p>
+            <div className="flex flex-wrap justify-center gap-2">
+                {reason === 'NO_SOURCE' && (
+                    <Button asChild><Link to="/settings?tab=connections">{t('DASHBOARD.EMPTY.LINK')}</Link></Button>
+                )}
+                <Button asChild variant={reason === 'NO_SOURCE' ? 'outline' : 'default'}>
+                    <Link to="/import">{t('DASHBOARD.EMPTY.IMPORT')}</Link>
+                </Button>
+            </div>
+        </Card>
+    );
+}

src/components/EmptyLibraryCard.test.jsx

@@ -0,0 +1,34 @@
+// @vitest-environment jsdom
+import {readFileSync} from 'node:fs';
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import EmptyLibraryCard from './EmptyLibraryCard.jsx';
+
+// The real English text, so the test sees the privacy link.
+const texts = JSON.parse(readFileSync('public/i18n/en.json', 'utf-8'));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({t: (key) => key.split('.').reduce((node, part) => node?.[part], texts) ?? key}),
+}));
+
+const renderCard = (reason) => render(<MemoryRouter><EmptyLibraryCard reason={reason}/></MemoryRouter>);
+
+describe('EmptyLibraryCard', () => {
+    afterEach(cleanup);
+
+    it('NO_SOURCE offers to link a platform and to import', () => {
+        renderCard('NO_SOURCE');
+
+        expect(screen.getByRole('link', {name: 'Link Steam / PlayStation'}).getAttribute('href')).toBe('/settings?tab=connections');
+        expect(screen.getByRole('link', {name: 'Import games'}).getAttribute('href')).toBe('/import');
+    });
+
+    it('STEAM_PRIVATE links the Steam privacy page and still offers the import', () => {
+        renderCard('STEAM_PRIVATE');
+
+        const link = screen.getByRole('link', {name: 'Steam privacy settings'});
+        expect(link.getAttribute('href')).toBe('https://steamcommunity.com/my/edit/settings');
+        expect(screen.getByRole('link', {name: 'Import games'})).toBeTruthy();
+        expect(screen.queryByRole('link', {name: 'Link Steam / PlayStation'})).toBeNull();
+    });
+});

src/components/FinishedHint.jsx

@@ -5,7 +5,8 @@ import {Flag, Loader2} from 'lucide-react';
 
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
-import {dismissFinishedHint, saveGameStatus} from '../utils/backlog.js';
+import useSetStatus from '../hooks/useSetStatus.js';
+import {dismissFinishedHint} from '../utils/backlog.js';
 import {formatPlaytime} from '../utils/games.js';
 
 /**
@@ -16,37 +17,32 @@ import {formatPlaytime} from '../utils/games.js';
  */
 export default function FinishedHint({game, onChanged, onDismissed}) {
     const {t} = useTranslation();
-    const [busy, setBusy] = useState(false);
+    const {setStatus, busy: saving} = useSetStatus(game.appid, {onChanged});
+    const [dismissing, setDismissing] = useState(false);
+    const busy = saving || dismissing;
 
     const hint = game.finishedHint;
     // A status saved elsewhere on the page answers the question too.
     if (!hint || (game.status !== 'BACKLOG' && game.status !== 'PLAYING')) return null;
 
-    const run = async (request, onOk) => {
-        setBusy(true);
+    const notYet = async () => {
+        setDismissing(true);
         try {
-            const response = await request();
+            const response = await dismissFinishedHint(game.appid, hint.type);
             if (response.status === 401) return;
             if (!response.ok) {
                 toast.error(t('BACKLOG.SAVE_FAILED'));
                 return;
             }
-            await onOk(response);
+            onDismissed();
         } catch (err) {
             console.error('finished hint error:', err);
             toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
         } finally {
-            setBusy(false);
+            setDismissing(false);
         }
     };
 
-    const setFinished = () => run(() => saveGameStatus(game.appid, 'FINISHED'), async (response) => {
-        onChanged(await response.json());
-        toast.success(t('BACKLOG.SAVED'));
-    });
-
-    const notYet = () => run(() => dismissFinishedHint(game.appid, hint.type), () => onDismissed());
-
     const text = hint.type === 'ENDING'
         ? t('GAME_DETAIL.FINISHED_ENDING', {achievement: hint.achievement})
         : t('GAME_DETAIL.FINISHED_PLAYTIME', {
@@ -62,7 +58,7 @@ export default function FinishedHint({game, onChanged, onDismissed}) {
             </div>
             <div className="flex flex-wrap justify-end gap-2">
                 <Button size="sm" variant="outline" onClick={notYet} disabled={busy}>{t('GAME_DETAIL.NOT_YET')}</Button>
-                <Button size="sm" onClick={setFinished} disabled={busy}>
+                <Button size="sm" onClick={() => setStatus('FINISHED')} disabled={busy}>
                     {busy && <Loader2 className="animate-spin"/>}
                     {t('GAME_DETAIL.SET_FINISHED')}
                 </Button>

src/components/FinishedHint.test.jsx

@@ -8,6 +8,7 @@ import {fetchRoutes, json} from '../test/fetchRoutes.js';
 
 vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
 vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+vi.mock('../hooks/usePointsCheck.js', () => ({default: () => vi.fn()}));
 
 const ending = {appid: 322110, status: 'PLAYING', playtimeMinutes: 600, timeToBeat: {normallyMinutes: 500},
     finishedHint: {type: 'ENDING', achievement: 'Survivor'}};

src/components/FollowingCard.jsx

@@ -0,0 +1,36 @@
+import {Link} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+import {ArrowRight, UserCheck} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import FollowingList from './people/FollowingList.jsx';
+import useFollowing from '../hooks/useFollowing.js';
+
+/**
+ * Dashboard tile: the first people of the following list. Loads its own data, so a dashboard without the tile pays nothing.
+ *
+ * @param limit how many people the tile size shows
+ */
+export default function FollowingCard({limit}) {
+    const {t} = useTranslation();
+    const {following, failed, unfollow} = useFollowing();
+
+    return (
+        <Card className="gap-0 py-0">
+            <div className="flex flex-wrap items-center justify-between gap-x-3 border-b px-5 py-4">
+                <h2 className="flex items-center gap-2 font-semibold">
+                    <UserCheck className="size-4 text-primary"/>
+                    {t('FOLLOW.TITLE')}
+                </h2>
+                <Button asChild variant="ghost" size="sm">
+                    <Link to="/community?tab=following">{t('FOLLOW.SHOW_ALL')}<ArrowRight/></Link>
+                </Button>
+            </div>
+            <div className="px-5 py-2">
+                {failed && <p className="py-3 text-sm text-destructive">{t('FOLLOW.LOAD_ERROR')}</p>}
+                {following && <FollowingList entries={following} limit={limit} onUnfollow={unfollow} compact/>}
+            </div>
+        </Card>
+    );
+}

src/components/FollowingCard.test.jsx

@@ -0,0 +1,32 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, screen} from '@testing-library/react';
+import FollowingCard from './FollowingCard.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+import {renderWithProviders} from '../test/renderWithProviders.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+
+afterEach(cleanup);
+
+describe('FollowingCard', () => {
+    it('showsAtMostTheLimitOfPeopleAndLinksToTheFollowingPage', async () => {
+        const following = ['A', 'B', 'C', 'D'].map((displayName, i) => ({id: i, displayName, lastActivityAt: null}));
+        fetchRoutes({'GET /api/follows': json(200, {followers: [], following})});
+        renderWithProviders(<FollowingCard limit={3}/>);
+
+        await screen.findByRole('link', {name: 'A'});
+
+        expect(screen.queryByRole('link', {name: 'D'})).toBeNull();
+        expect(screen.getAllByRole('button', {name: 'FOLLOW.UNFOLLOW'})).toHaveLength(3);
+        expect(screen.getByRole('link', {name: /FOLLOW.SHOW_ALL/}).getAttribute('href')).toBe('/community?tab=following');
+    });
+
+    it('showsTheEmptyStateWhenNobodyIsFollowed', async () => {
+        fetchRoutes({'GET /api/follows': json(200, {followers: [], following: []})});
+        renderWithProviders(<FollowingCard limit={3}/>);
+
+        expect(await screen.findByText('FOLLOW.NO_FOLLOWING')).toBeTruthy();
+    });
+});

src/components/FormField.jsx

@@ -2,13 +2,15 @@ import {Label} from '@/components/ui/label';
 
 /**
  * Label, input and the translated validation error of one form field.
- * `error` is a react-hook-form field error whose message is an i18n key.
+ * `error` is a react-hook-form field error whose message is an i18n key. `description` is helper text under the input;
+ * the input points to it with aria-describedby="<id>-description".
  */
-export default function FormField({id, label, error, t, children}) {
+export default function FormField({id, label, error, description, t, children}) {
     return (
         <div className="space-y-2">
             <Label htmlFor={id}>{label}</Label>
             {children}
+            {description && <p id={`${id}-description`} className="text-xs text-muted-foreground">{description}</p>}
             {error && <p className="text-sm text-destructive">{t(error.message)}</p>}
         </div>
     );

src/components/GameAchievements.jsx

@@ -1,12 +1,21 @@
 import {useMemo, useState} from 'react';
 import {useTranslation} from 'react-i18next';
-import {Trophy} from 'lucide-react';
+import {ShieldOff, Trophy} from 'lucide-react';
 
 import {Card} from '@/components/ui/card';
 import {cn} from '@/lib/utils';
 import {ACHIEVEMENT_ICONS, reportBrokenImage} from '../utils/brokenImages.js';
 import {formatDate} from '../utils/format.js';
 
+const STEAM_SET = 'steam';
+
+const TROPHY_COLORS = {
+    BRONZE: 'text-amber-700',
+    SILVER: 'text-slate-400',
+    GOLD: 'text-yellow-500',
+    PLATINUM: 'text-cyan-400',
+};
+
 const formatUnlockedAt = (instant, locale) => {
     if (!instant) return '';
     try {
@@ -16,93 +25,160 @@ const formatUnlockedAt = (instant, locale) => {
     }
 };
 
-function AchievementIcon({appid, src, unlocked}) {
+// Only Steam icons can be repaired: the broken-image report goes to the Steam icon store.
+function AchievementIcon({appid, src, unlocked, steam}) {
     const [failed, setFailed] = useState(false);
     if (!src || failed) return <div className="size-12 rounded-md bg-muted"/>;
     return (
         <img src={src} alt="" className={cn('size-12 rounded-md', !unlocked && 'grayscale')}
              onError={() => {
-                 reportBrokenImage(appid, ACHIEVEMENT_ICONS);
+                 if (steam) reportBrokenImage(appid, ACHIEVEMENT_ICONS);
                  setFailed(true);
              }}/>
     );
 }
 
-export default function GameAchievements({game}) {
-    const {t, i18n} = useTranslation();
+// The base game (no group) first, then the DLC groups in their order; inside a group the earned ones first.
+function sortAchievements(achievements) {
+    return [...achievements].sort((a, b) => {
+        if ((a.group ?? '') !== (b.group ?? '')) return (a.group ?? '').localeCompare(b.group ?? '');
+        if (a.unlocked !== b.unlocked) return a.unlocked ? -1 : 1;
+        if (a.unlocked && b.unlocked) {
+            return (b.unlockedAt ?? '').localeCompare(a.unlockedAt ?? '');
+        }
+        return (a.displayName ?? a.apiName).localeCompare(b.displayName ?? b.apiName);
+    });
+}
 
-    const sortedAchievements = useMemo(() => {
-        if (!game.achievements) return [];
-        return [...game.achievements].sort((a, b) => {
-            if (a.unlocked !== b.unlocked) return a.unlocked ? -1 : 1;
-            if (a.unlocked && b.unlocked) {
-                return (b.unlockedAt ?? '').localeCompare(a.unlockedAt ?? '');
-            }
-            return (a.displayName ?? a.apiName).localeCompare(b.displayName ?? b.apiName);
-        });
-    }, [game.achievements]);
+function SetHeader({set}) {
+    const {t} = useTranslation();
+    const steam = set.id === STEAM_SET;
+    return (
+        <div className="flex items-baseline justify-between gap-3">
+            <h2 className="flex min-w-0 items-center gap-2 text-lg font-semibold">
+                <Trophy className="size-4 shrink-0 text-amber-500"/>
+                <span className="truncate">
+                    {steam ? t('GAME_DETAIL.ACHIEVEMENTS') : t('GAME_DETAIL.TROPHIES', {platform: set.platform})}
+                </span>
+            </h2>
+            <span className="text-sm text-muted-foreground tabular-nums">{set.unlocked} / {set.total}</span>
+        </div>
+    );
+}
 
+function SetSummary({set}) {
+    const {t} = useTranslation();
+    const percent = set.perfect ? 100 : set.total === 0 ? 0 : Math.round((set.unlocked * 1000) / set.total) / 10;
     const stats = [
-        [t('GAME_DETAIL.UNLOCKED'), game.achievementsUnlocked],
-        [t('GAME_DETAIL.REMAINING'), game.achievementsRemaining],
-        [t('GAME_DETAIL.COMPLETION'), `${game.completionPercent}%`],
+        [t('GAME_DETAIL.UNLOCKED'), set.unlocked],
+        [t('GAME_DETAIL.REMAINING'), Math.max(0, set.total - set.unlocked)],
+        [t('GAME_DETAIL.COMPLETION'), `${percent}%`],
     ];
+    return (
+        <>
+            <div className="h-2.5 w-full overflow-hidden rounded-full bg-muted">
+                <div className="h-full rounded-full bg-primary transition-all"
+                     style={{width: `${Math.min(100, percent)}%`}}/>
+            </div>
+            <div className="grid grid-cols-3 gap-3 text-center">
+                {stats.map(([label, value]) => (
+                    <div key={label} className="rounded-lg bg-muted/50 p-3">
+                        <div className="text-2xl font-bold tabular-nums">{value}</div>
+                        <div className="text-xs text-muted-foreground">{label}</div>
+                    </div>
+                ))}
+            </div>
+        </>
+    );
+}
 
+function AchievementItem({game, achievement}) {
+    const {t, i18n} = useTranslation();
+    const steam = achievement.kind !== 'PSN';
+    const icon = achievement.unlocked ? achievement.iconUrl : achievement.iconGrayUrl;
+    const name = achievement.displayName
+        ?? (achievement.hidden && !steam ? t('GAME_DETAIL.HIDDEN_TROPHY') : achievement.apiName);
+    const trophyLabel = achievement.trophyType && t(`GAME_DETAIL.TROPHY_TYPE.${achievement.trophyType}`);
+    return (
+        <li className={cn('flex items-start gap-3 rounded-xl border bg-card p-3',
+            achievement.unlocked ? 'border-primary/40' : 'opacity-60')}>
+            <AchievementIcon key={icon} appid={game.appid} src={icon} unlocked={achievement.unlocked} steam={steam}/>
+            <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-1.5">
+                    {achievement.trophyType && (
+                        <Trophy className={cn('size-3.5 shrink-0', TROPHY_COLORS[achievement.trophyType])}
+                                aria-label={trophyLabel}>
+                            <title>{trophyLabel}</title>
+                        </Trophy>
+                    )}
+                    <div className="truncate font-medium">{name}</div>
+                    {achievement.group && (
+                        <span className="shrink-0 rounded bg-muted px-1.5 text-[10px] font-semibold">
+                            {t('GAME_DETAIL.DLC')}
+                        </span>
+                    )}
+                </div>
+                {achievement.description && (
+                    <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">{achievement.description}</div>
+                )}
+                {achievement.rarity != null && (
+                    <div className="mt-1 text-xs text-muted-foreground tabular-nums">
+                        {t('GAME_DETAIL.RARITY', {percent: Math.round(achievement.rarity * 10) / 10})}
+                    </div>
+                )}
+                {achievement.unlocked && achievement.unlockedAt && (
+                    <div className="mt-1 text-xs text-primary tabular-nums">
+                        {formatUnlockedAt(achievement.unlockedAt, i18n.language)}
+                    </div>
+                )}
+            </div>
+        </li>
+    );
+}
+
+function AchievementSet({game, set, achievements}) {
+    const {t} = useTranslation();
+    const sorted = useMemo(() => sortAchievements(achievements), [achievements]);
+    const steam = set.id === STEAM_SET;
+
+    if (steam && !set.visible) {
+        return (
+            <Card className="items-center py-10 text-center text-sm text-muted-foreground">
+                <ShieldOff className="size-8"/>
+                {t('GAME_DETAIL.STATS_HIDDEN')}
+            </Card>
+        );
+    }
     return (
         <>
             <Card className="p-6 gap-5">
-                <div className="flex items-baseline justify-between">
-                    <h2 className="flex items-center gap-2 text-lg font-semibold">
-                        <Trophy className="size-4 text-amber-500"/>
-                        {t('GAME_DETAIL.ACHIEVEMENTS')}
-                    </h2>
-                    <span className="text-sm text-muted-foreground tabular-nums">
-                        {game.achievementsUnlocked} / {game.achievementsTotal}
-                    </span>
-                </div>
-                <div className="h-2.5 w-full overflow-hidden rounded-full bg-muted">
-                    <div
-                        className="h-full rounded-full bg-primary transition-all"
-                        style={{width: `${Math.min(100, game.completionPercent)}%`}}
-                    />
-                </div>
-                <div className="grid grid-cols-3 gap-3 text-center">
-                    {stats.map(([label, value]) => (
-                        <div key={label} className="rounded-lg bg-muted/50 p-3">
-                            <div className="text-2xl font-bold tabular-nums">{value}</div>
-                            <div className="text-xs text-muted-foreground">{label}</div>
-                        </div>
-                    ))}
-                </div>
+                <SetHeader set={set}/>
+                {!steam && set.name && <p className="-mt-3 truncate text-sm text-muted-foreground">{set.name}</p>}
+                <SetSummary set={set}/>
+                {!set.listed && <p className="text-sm text-muted-foreground">{t('GAME_DETAIL.TROPHIES_PENDING')}</p>}
             </Card>
-
             <ul className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                {sortedAchievements.map((a) => {
-                    const icon = a.unlocked ? a.iconUrl : a.iconGrayUrl;
-                    return (
-                        <li
-                            key={a.apiName}
-                            className={cn(
-                                'flex items-start gap-3 rounded-xl border bg-card p-3',
-                                a.unlocked ? 'border-primary/40' : 'opacity-60',
-                            )}
-                        >
-                            <AchievementIcon key={icon} appid={game.appid} src={icon} unlocked={a.unlocked}/>
-                            <div className="min-w-0 flex-1">
-                                <div className="truncate font-medium">{a.displayName ?? a.apiName}</div>
-                                {a.description && (
-                                    <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">{a.description}</div>
-                                )}
-                                {a.unlocked && a.unlockedAt && (
-                                    <div className="mt-1 text-xs text-primary tabular-nums">
-                                        {formatUnlockedAt(a.unlockedAt, i18n.language)}
-                                    </div>
-                                )}
-                            </div>
-                        </li>
-                    );
-                })}
+                {sorted.map((achievement) => (
+                    <AchievementItem key={`${achievement.setId ?? STEAM_SET}:${achievement.apiName}`} game={game}
+                                     achievement={achievement}/>
+                ))}
             </ul>
         </>
     );
 }
+
+export default function GameAchievements({game}) {
+    const bySet = useMemo(() => {
+        const groups = new Map();
+        for (const a of game.achievements ?? []) {
+            const id = a.setId ?? STEAM_SET;
+            if (!groups.has(id)) groups.set(id, []);
+            groups.get(id).push(a);
+        }
+        return groups;
+    }, [game.achievements]);
+
+    return (game.achievementSets ?? []).map((set) => (
+        <AchievementSet key={set.id} game={game} set={set} achievements={bySet.get(set.id) ?? []}/>
+    ));
+}

src/components/GameAchievements.test.jsx

@@ -0,0 +1,113 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, fireEvent, render, screen} from '@testing-library/react';
+import GameAchievements from './GameAchievements.jsx';
+import {reportBrokenImage} from '../utils/brokenImages.js';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('../utils/brokenImages.js', () => ({ACHIEVEMENT_ICONS: 'ACHIEVEMENT_ICONS', reportBrokenImage: vi.fn()}));
+
+const set = (id, extra = {}) => ({id, kind: id === 'steam' ? 'STEAM' : 'PSN', platform: null, name: null, total: 2,
+    unlocked: 1, perfect: false, visible: true, listed: true, ...extra});
+const steam = (apiName, extra = {}) => ({apiName, displayName: `Steam ${apiName}`, unlocked: false, kind: 'STEAM',
+    setId: null, iconUrl: 'https://cdn.steamstatic.com/a.jpg', iconGrayUrl: 'https://cdn.steamstatic.com/b.jpg', ...extra});
+const trophy = (setId, apiName, extra = {}) => ({apiName, displayName: `Trophy ${setId} ${apiName}`, unlocked: false,
+    kind: 'PSN', setId, trophyType: 'BRONZE', iconUrl: 'https://psnobj.prod.dl.playstation.net/t.png',
+    iconGrayUrl: 'https://psnobj.prod.dl.playstation.net/t.png', ...extra});
+
+const renderGame = (game) => render(<GameAchievements game={{appid: 220, ...game}}/>);
+
+afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+});
+
+describe('GameAchievements', () => {
+    it('shows one card per set in the order of achievementSets', () => {
+        renderGame({
+            achievementSets: [set('steam'), set('NPWR1_00', {platform: 'PS5'}), set('NPWR2_00', {platform: 'PS4'})],
+            achievements: [trophy('NPWR2_00', '1'), steam('A'), trophy('NPWR1_00', '1')],
+        });
+
+        const headings = screen.getAllByRole('heading', {level: 2}).map((heading) => heading.textContent);
+        expect(headings).toEqual(['GAME_DETAIL.ACHIEVEMENTS', 'GAME_DETAIL.TROPHIES', 'GAME_DETAIL.TROPHIES']);
+        const names = screen.getAllByRole('listitem').map((item) => item.textContent);
+        expect(names[0]).toContain('Steam A');
+        expect(names[1]).toContain('Trophy NPWR1_00 1');
+        expect(names[2]).toContain('Trophy NPWR2_00 1');
+    });
+
+    it('lists the base game first and the DLC groups after it, whatever the earned state', () => {
+        renderGame({
+            achievementSets: [set('NPWR1_00', {platform: 'PS5', total: 3, unlocked: 1})],
+            achievements: [trophy('NPWR1_00', '1', {group: '002', unlocked: true, unlockedAt: '2026-01-02T00:00:00Z'}),
+                trophy('NPWR1_00', '2', {group: '001'}), trophy('NPWR1_00', '3', {group: null})],
+        });
+
+        expect(screen.getAllByRole('listitem').map((item) => item.textContent)).toEqual([
+            expect.stringContaining('Trophy NPWR1_00 3'), expect.stringContaining('Trophy NPWR1_00 2'),
+            expect.stringContaining('Trophy NPWR1_00 1')]);
+    });
+
+    it('titles the trophy type and marks DLC trophies and the rarity', () => {
+        renderGame({
+            achievementSets: [set('NPWR1_00', {platform: 'PS5', total: 1, unlocked: 0})],
+            achievements: [trophy('NPWR1_00', '1', {trophyType: 'GOLD', group: '001', rarity: 12.34})],
+        });
+
+        expect(screen.getByTitle('GAME_DETAIL.TROPHY_TYPE.GOLD')).toBeTruthy();
+        expect(screen.getByText('GAME_DETAIL.DLC')).toBeTruthy();
+        expect(screen.getByText('GAME_DETAIL.RARITY')).toBeTruthy();
+    });
+
+    it('shows a hidden trophy that is not earned without a name', () => {
+        renderGame({
+            achievementSets: [set('NPWR1_00', {platform: 'PS5', total: 1, unlocked: 0})],
+            achievements: [trophy('NPWR1_00', '1', {displayName: null, description: null, hidden: true})],
+        });
+
+        expect(screen.getByText('GAME_DETAIL.HIDDEN_TROPHY')).toBeTruthy();
+    });
+
+    it('shows the hidden-stats text for a Steam set Steam hides, and still lists the PlayStation set', () => {
+        renderGame({
+            achievementSets: [set('steam', {visible: false, unlocked: 0}), set('NPWR1_00', {platform: 'PS5'})],
+            achievements: [steam('A'), trophy('NPWR1_00', '1')],
+        });
+
+        expect(screen.getByText('GAME_DETAIL.STATS_HIDDEN')).toBeTruthy();
+        expect(screen.queryByText('Steam A')).toBeNull();
+        expect(screen.getByText('Trophy NPWR1_00 1')).toBeTruthy();
+    });
+
+    it('shows the pending text for a trophy set whose list is not stored yet', () => {
+        renderGame({achievementSets: [set('NPWR1_00', {platform: 'PS4', listed: false})], achievements: []});
+
+        expect(screen.getByText('GAME_DETAIL.TROPHIES_PENDING')).toBeTruthy();
+    });
+
+    it('counts a perfect set as 100 percent, also with trophies missing', () => {
+        renderGame({
+            achievementSets: [set('NPWR1_00', {platform: 'PS5', total: 50, unlocked: 30, perfect: true})],
+            achievements: [],
+        });
+
+        expect(screen.getByText('100%')).toBeTruthy();
+        expect(screen.getByText('30 / 50')).toBeTruthy();
+    });
+
+    it('reports a broken Steam icon but not a broken PlayStation icon', () => {
+        const {container} = renderGame({
+            achievementSets: [set('steam', {total: 1, unlocked: 0}), set('NPWR1_00', {platform: 'PS5', total: 1, unlocked: 0})],
+            achievements: [steam('A'), trophy('NPWR1_00', '1')],
+        });
+
+        const steamItem = screen.getByText('Steam A').closest('li');
+        const psnItem = screen.getByText('Trophy NPWR1_00 1').closest('li');
+        fireEvent.error(psnItem.querySelector('img'));
+        expect(reportBrokenImage).not.toHaveBeenCalled();
+        fireEvent.error(steamItem.querySelector('img'));
+        expect(reportBrokenImage).toHaveBeenCalledTimes(1);
+        expect(container.querySelectorAll('img')).toHaveLength(0);
+    });
+});

src/components/GameHeroCard.jsx

@@ -1,19 +1,31 @@
 import {useState} from 'react';
 import {useTranslation} from 'react-i18next';
-import {Clock, ExternalLink, Eye, EyeOff, Gamepad2, Image as ImageIcon, ImageOff, Merge, PanelTop, PencilLine, RotateCcw, Timer} from 'lucide-react';
+import {Clock, Ellipsis, ExternalLink, Eye, EyeOff, Gamepad2, Image as ImageIcon, ImageOff, Merge, PanelTop, PencilLine, RotateCcw, Timer} from 'lucide-react';
 import {toast} from 'sonner';
 
 import {Badge} from '@/components/ui/badge';
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import {cn} from '@/lib/utils';
 import GameCover from './GameCover.jsx';
 import FitText from './FitText.jsx';
-import GameStatusBadge from './GameStatusBadge.jsx';
-import ProfileArtMenu from './ProfileArtMenu.jsx';
+import ComingBadge from './ComingBadge.jsx';
+import ProfileArtItems from './ProfileArtItems.jsx';
+import RatingStars from './RatingStars.jsx';
+import StatusMenu from './StatusMenu.jsx';
 import TimeToBeat from './TimeToBeat.jsx';
 import useSaveAppearance from '../hooks/useSaveAppearance.js';
+import useSaveBacklogField from '../hooks/useSaveBacklogField.js';
+import useSetStatus from '../hooks/useSetStatus.js';
 import {usePreferences} from '../context/PreferencesContext.jsx';
+import {UNDO_MS} from '../utils/backlog.js';
 import {formatPlaytime} from '../utils/games.js';
 import {setGameHidden} from '../utils/hiddenGames.js';
 import {isSteamKey} from '../utils/manualGames.js';
@@ -24,11 +36,19 @@ const SPEEDRUN_PREFIX = 'https://www.speedrun.com/';
 // The spans of each completed effect decoration; effects.css places them.
 const DETAIL_ELEMENTS = {'fx-detail-gold-shine': 8, 'fx-detail-neon-pulse': 1, 'fx-detail-holo': 1, 'fx-detail-ember': 6, 'fx-detail-platinum': 6};
 
-export default function GameHeroCard({game, auditor, profileStyle, onCorrect, onMerge, onHiddenChanged, onProfileStyleSaved}) {
+/**
+ * Status and rating are edited here and save at once. A status change needs no points check: GameDetail's
+ * GamePointsLine sees the new status and does it.
+ *
+ * @param onSaved gets the saved backlog entry after a status or rating change
+ */
+export default function GameHeroCard({game, auditor, profileStyle, onCorrect, onMerge, onHiddenChanged, onProfileStyleSaved, onSaved}) {
     const {t} = useTranslation();
     const {appearance, equipped} = usePreferences();
     const saveAppearance = useSaveAppearance();
     const [hiding, setHiding] = useState(false);
+    const {setStatus, busy: statusBusy} = useSetStatus(game.appid, {onChanged: onSaved});
+    const {save, pending, busy: ratingBusy} = useSaveBacklogField(game.appid, {onSaved});
 
     const onSteam = isSteamKey(game.appid);
     // Core checks the link too; a link from the API must never run script.
@@ -38,8 +58,7 @@ export default function GameHeroCard({game, auditor, profileStyle, onCorrect, on
     const isBanner = appearance.showBanner && appearance.bannerAppid === game.appid;
     const detailFx = detailEffect(equipped, game.status);
 
-    const toggleHidden = async () => {
-        const hidden = !game.hidden;
+    const applyHidden = async (hidden, {undoable = false} = {}) => {
         setHiding(true);
         try {
             const response = await setGameHidden(game.appid, hidden);
@@ -49,7 +68,12 @@ export default function GameHeroCard({game, auditor, profileStyle, onCorrect, on
                 return;
             }
             onHiddenChanged(hidden);
-            toast.success(t(hidden ? 'GAME_DETAIL.HIDDEN_TOAST' : 'GAME_DETAIL.SHOWN_TOAST'));
+            const message = t(hidden ? 'GAME_DETAIL.HIDDEN_TOAST' : 'GAME_DETAIL.SHOWN_TOAST');
+            if (undoable) {
+                toast.success(message, {duration: UNDO_MS, action: {label: t('MANUAL_GAME.UNDO'), onClick: () => applyHidden(!hidden)}});
+            } else {
+                toast.success(message);
+            }
         } catch (err) {
             console.error('Hide game error:', err);
             toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
@@ -75,13 +99,20 @@ export default function GameHeroCard({game, auditor, profileStyle, onCorrect, on
                     <div className="mt-3 flex flex-wrap gap-2">
                         <Badge variant="secondary" className="tabular-nums">
                             <Clock className="size-3"/>
-                            {t('GAME_DETAIL.PLAYTIME', {time: formatPlaytime(game.playtimeMinutes)})}
+                            {t('GAME_DETAIL.PLAYTIME', {time: formatPlaytime(game.totalPlaytimeMinutes ?? game.playtimeMinutes)})}
                         </Badge>
-                        <GameStatusBadge status={game.status}/>
+                        <ComingBadge game={game}/>
+                        <StatusMenu status={game.status} busy={statusBusy}
+                                    onSelect={(status) => setStatus(status, {previous: game.status})}/>
                         {platformLabel(game) && (
                             <Badge variant="outline"><Gamepad2 className="size-3"/>{platformLabel(game)}</Badge>
                         )}
                     </div>
+                    <div className="mt-3 flex items-center gap-2">
+                        <span id="hero-rating" className="sr-only">{t('BACKLOG.RATING_LABEL')}</span>
+                        <RatingStars value={pending?.field === 'rating' ? pending.value : (game.rating ?? 0)}
+                                     onChange={(value) => save('rating', value)} labelledBy="hero-rating" disabled={ratingBusy}/>
+                    </div>
                     <div className="mt-3">
                         <TimeToBeat time={game.timeToBeat}/>
                     </div>
@@ -92,52 +123,56 @@ export default function GameHeroCard({game, auditor, profileStyle, onCorrect, on
                             </a>
                         </Button>
                     )}
-                    {auditor && (
-                        <Button variant="outline" size="sm" className="mt-3 ml-2" onClick={onCorrect}>
-                            <PencilLine/>{t('CORRECTION.OPEN')}
-                        </Button>
-                    )}
-                    {auditor && (
-                        <Button variant="outline" size="sm" className="mt-3 ml-2" onClick={onMerge}>
-                            <Merge/>{t('MERGE.OPEN')}
-                        </Button>
-                    )}
                 </div>
-                {/* Store page, background and banner need Steam art, so a game off Steam has none of them. */}
+                {/* Background, banner and profile art need Steam art, so a game off Steam has none of them. */}
                 <div className="flex flex-wrap gap-2">
-                    {onSteam && (<>
+                    {onSteam && (
                         <Button asChild variant="outline" size="sm">
                             <a href={`https://store.steampowered.com/app/${game.appid}`} target="_blank" rel="noopener noreferrer">
                                 {t('GAME_DETAIL.OPEN_IN_STEAM')}<ExternalLink/>
                             </a>
                         </Button>
-                        {isBackground ? (
-                            <Button variant="outline" size="sm" onClick={() => saveAppearance({backgroundAppid: null})}>
-                                <ImageOff/>{t('GAME_DETAIL.REMOVE_BACKGROUND')}
-                            </Button>
-                        ) : (
-                            <Button variant="outline" size="sm" onClick={() => saveAppearance({backgroundAppid: game.appid})}>
-                                <ImageIcon/>{t('GAME_DETAIL.SET_BACKGROUND')}
-                            </Button>
-                        )}
-                        {isBanner ? (
-                            <Button variant="outline" size="sm" onClick={() => saveAppearance({bannerAppid: null})}>
-                                <RotateCcw/>{t('SETTINGS.BANNER_AUTO')}
-                            </Button>
-                        ) : (
-                            <Button variant="outline" size="sm"
-                                    onClick={() => saveAppearance({bannerAppid: game.appid, showBanner: true})}>
-                                <PanelTop/>{t('GAME_DETAIL.SET_BANNER')}
-                            </Button>
-                        )}
-                        {profileStyle && (
-                            <ProfileArtMenu appid={game.appid} style={profileStyle} onSaved={onProfileStyleSaved}/>
-                        )}
-                    </>)}
-                    <Button variant="outline" size="sm" onClick={toggleHidden} disabled={hiding}>
-                        {game.hidden ? <Eye/> : <EyeOff/>}
-                        {t(game.hidden ? 'GAME_DETAIL.UNHIDE' : 'GAME_DETAIL.HIDE')}
-                    </Button>
+                    )}
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" size="icon-sm" aria-label={t('GAME_DETAIL.MORE')}><Ellipsis/></Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start">
+                            {onSteam && (<>
+                                {isBackground ? (
+                                    <DropdownMenuItem onSelect={() => saveAppearance({backgroundAppid: null})}>
+                                        <ImageOff/>{t('GAME_DETAIL.REMOVE_BACKGROUND')}
+                                    </DropdownMenuItem>
+                                ) : (
+                                    <DropdownMenuItem onSelect={() => saveAppearance({backgroundAppid: game.appid})}>
+                                        <ImageIcon/>{t('GAME_DETAIL.SET_BACKGROUND')}
+                                    </DropdownMenuItem>
+                                )}
+                                {isBanner ? (
+                                    <DropdownMenuItem onSelect={() => saveAppearance({bannerAppid: null})}>
+                                        <RotateCcw/>{t('SETTINGS.BANNER_AUTO')}
+                                    </DropdownMenuItem>
+                                ) : (
+                                    <DropdownMenuItem onSelect={() => saveAppearance({bannerAppid: game.appid, showBanner: true})}>
+                                        <PanelTop/>{t('GAME_DETAIL.SET_BANNER')}
+                                    </DropdownMenuItem>
+                                )}
+                                {profileStyle && (
+                                    <ProfileArtItems appid={game.appid} style={profileStyle} onSaved={onProfileStyleSaved}/>
+                                )}
+                                <DropdownMenuSeparator/>
+                            </>)}
+                            <DropdownMenuItem disabled={hiding} onSelect={() => applyHidden(!game.hidden, {undoable: true})}>
+                                {game.hidden ? <Eye/> : <EyeOff/>}
+                                {t(game.hidden ? 'GAME_DETAIL.UNHIDE' : 'GAME_DETAIL.HIDE')}
+                            </DropdownMenuItem>
+                            {auditor && (<>
+                                <DropdownMenuSeparator/>
+                                <DropdownMenuItem onSelect={onCorrect}><PencilLine/>{t('CORRECTION.OPEN')}</DropdownMenuItem>
+                                <DropdownMenuItem onSelect={onMerge}><Merge/>{t('MERGE.OPEN')}</DropdownMenuItem>
+                            </>)}
+                        </DropdownMenuContent>
+                    </DropdownMenu>
                 </div>
             </div>
         </Card>

src/components/GameHeroCard.test.jsx

@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {act, cleanup, fireEvent, screen, waitFor} from '@testing-library/react';
+import {toast} from 'sonner';
+import GameHeroCard from './GameHeroCard.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+import {renderWithProviders} from '../test/renderWithProviders.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+
+const game = {appid: 220, name: 'Half-Life 2', status: 'BACKLOG', rating: null, hidden: false, playtimeMinutes: 10};
+
+const routes = (extra = {}) => fetchRoutes({
+    'GET /api/users/me': json(200, {settings: {}}),
+    'PUT /api/library/games/220/status': (url, init) => json(200, {...game, ...JSON.parse(init.body)}),
+    'PATCH /api/library/games/220/backlog': (url, init) => json(200, {...game, ...JSON.parse(init.body)}),
+    'PUT /api/library/games/220/hidden': (url, init) => json(200, JSON.parse(init.body)),
+    ...extra,
+});
+
+const renderCard = (props = {}) => renderWithProviders(
+    <GameHeroCard game={game} auditor={false} onCorrect={vi.fn()} onMerge={vi.fn()} onHiddenChanged={vi.fn()}
+                  onProfileStyleSaved={vi.fn()} onSaved={vi.fn()} {...props}/>);
+
+const openMore = async () => fireEvent.keyDown(await screen.findByRole('button', {name: 'GAME_DETAIL.MORE'}), {key: 'Enter'});
+const calls = (method) => fetch.mock.calls.filter(([, init]) => init?.method === method);
+
+beforeEach(() => {
+    localStorage.setItem('tbp_session', '1');
+});
+
+afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    localStorage.clear();
+});
+
+describe('GameHeroCard', () => {
+    it('keepsTheMoreMenuForArtHideAndAuditorTools', async () => {
+        routes();
+        renderCard({auditor: true, profileStyle: {}});
+        expect(screen.getByRole('link', {name: /GAME_DETAIL.OPEN_IN_STEAM/})).toBeTruthy();
+
+        await openMore();
+
+        const names = (await screen.findAllByRole('menuitem')).map((item) => item.textContent);
+        expect(names).toEqual(['GAME_DETAIL.SET_BACKGROUND', 'GAME_DETAIL.SET_BANNER', 'GAME_DETAIL.HIDE', 'CORRECTION.OPEN', 'MERGE.OPEN']);
+        expect(screen.getAllByRole('menuitemcheckbox')).toHaveLength(2);
+        expect(screen.queryByRole('button', {name: 'CORRECTION.OPEN'})).toBeNull();
+    });
+
+    it('offersNoAuditorToolsToAUser', async () => {
+        routes();
+        renderCard();
+
+        await openMore();
+
+        const names = (await screen.findAllByRole('menuitem')).map((item) => item.textContent);
+        expect(names).not.toContain('CORRECTION.OPEN');
+        expect(names).not.toContain('MERGE.OPEN');
+    });
+
+    it('hidesWithAnUndoThatShowsTheGameAgain', async () => {
+        routes();
+        const onHiddenChanged = vi.fn();
+        renderCard({onHiddenChanged});
+        await openMore();
+
+        fireEvent.click(await screen.findByRole('menuitem', {name: 'GAME_DETAIL.HIDE'}));
+
+        await waitFor(() => expect(onHiddenChanged).toHaveBeenCalledWith(true));
+        const [message, options] = toast.success.mock.calls.at(-1);
+        expect(message).toBe('GAME_DETAIL.HIDDEN_TOAST');
+        expect(options.action.label).toBe('MANUAL_GAME.UNDO');
+
+        await act(async () => options.action.onClick());
+
+        expect(onHiddenChanged).toHaveBeenLastCalledWith(false);
+        expect(calls('PUT').map(([, init]) => JSON.parse(init.body))).toEqual([{hidden: true}, {hidden: false}]);
+        // The undo is a plain toast.
+        expect(toast.success.mock.calls.at(-1)).toEqual(['GAME_DETAIL.SHOWN_TOAST']);
+    });
+
+    it('savesTheStatusFromTheMenuWithoutAskingThePointsItself', async () => {
+        routes();
+        const onSaved = vi.fn();
+        renderCard({onSaved});
+
+        fireEvent.keyDown(screen.getByRole('button', {name: /BACKLOG.STATUS_LABEL/}), {key: 'Enter'});
+        fireEvent.click(await screen.findByRole('menuitemradio', {name: 'BACKLOG.STATUS.PLAYING'}));
+
+        await waitFor(() => expect(onSaved).toHaveBeenCalledWith(expect.objectContaining({status: 'PLAYING'})));
+        expect(JSON.parse(calls('PUT')[0][1].body)).toEqual({status: 'PLAYING'});
+        // GameDetail's GamePointsLine does the points check when the status changes; none here (no route would fail).
+        expect(toast.success.mock.calls.at(-1)[1].action.label).toBe('MANUAL_GAME.UNDO');
+    });
+
+    it('savesTheRatingAtOnce', async () => {
+        routes();
+        const onSaved = vi.fn();
+        renderCard({onSaved});
+
+        fireEvent.click(screen.getByRole('button', {name: 'BACKLOG.RATING_STARS:4'}));
+
+        await waitFor(() => expect(onSaved).toHaveBeenCalled());
+        expect(calls('PATCH').map(([, init]) => JSON.parse(init.body))).toEqual([{rating: 4}]);
+    });
+});

src/components/GamePointsLine.date.test.jsx

@@ -0,0 +1,40 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen} from '@testing-library/react';
+import GamePointsLine from './GamePointsLine.jsx';
+import {PreferencesProvider} from '../context/PreferencesContext.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+
+// t() shows its options, so the test sees what Core's earlySince becomes.
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key, options) => (options ? `${key}|${Object.values(options).join('|')}` : key),
+        i18n: {language: 'en-GB'},
+    }),
+}));
+vi.mock('sonner', () => ({toast: Object.assign(vi.fn(), {success: vi.fn(), error: vi.fn()})}));
+
+beforeEach(() => {
+    localStorage.setItem('tbp_session', '1');
+});
+
+afterEach(() => {
+    cleanup();
+    localStorage.clear();
+    vi.clearAllMocks();
+});
+
+describe('GamePointsLine date', () => {
+    it('puts the early-since day of Core into the reason text', async () => {
+        fetchRoutes({
+            'GET /api/rewards/games/220': json(200, {
+                balance: 15, paid: [], earlySince: '2026-09-10', missing: {COMPLETED: 'COMPLETION_TOO_OLD'},
+            }),
+            'GET /api/rewards/wallet': json(200, {balance: 15, catalog: [], owned: [], equipped: {}, history: []}),
+        });
+
+        render(<PreferencesProvider><GamePointsLine game={{appid: 220, status: 'COMPLETED'}}/></PreferencesProvider>);
+
+        expect(await screen.findByText(/POINTS\.REASONS\.COMPLETION_TOO_OLD\|10 Sept(ember)? 2026/)).toBeTruthy();
+    });
+});

src/components/GamePointsLine.jsx

@@ -0,0 +1,49 @@
+import {useEffect, useRef, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import usePointsCheck from '../hooks/usePointsCheck.js';
+import {formatDate, formatDay} from '../utils/format.js';
+import {STATUS_NOT_REACHED} from '../utils/rewards.js';
+
+const WAITING = {NO_PROOF: 'POINTS.GAME.WAITING', NO_PLAY_AFTER_START: 'POINTS.GAME.WAITING_START'};
+// The rest of an early finish waits for Steam play, with or without playtime on record.
+const WAITING_TOPUP = ['NO_PROOF', 'NO_PLAYTIME'];
+
+const waitingKey = (kind, reason) => (kind === 'FINISHED_TOPUP' ? WAITING_TOPUP.includes(reason) && 'POINTS.GAME.WAITING_TOPUP' : WAITING[reason]);
+
+/**
+ * What the game earned: one line per paid row and one per kind that is missing, with the reason from Core. Loading it
+ * settles the points; a status change after the first load also shows the points toast. `refreshes` loads it again
+ * after the Steam refresh of the game page, which may have stored an unlock that settles points.
+ */
+export default function GamePointsLine({game, refreshes = 0}) {
+    const {t, i18n} = useTranslation();
+    const check = usePointsCheck();
+    const [points, setPoints] = useState(null);
+    const lastStatus = useRef(null);
+
+    useEffect(() => {
+        const changed = lastStatus.current !== null && lastStatus.current !== game.status;
+        lastStatus.current = game.status;
+        let stale = false;
+        check(game.appid, {status: game.status, tell: changed}).then((data) => {
+            if (!stale && data) setPoints(data);
+        });
+        return () => {
+            stale = true;
+        };
+    }, [check, game.appid, game.status, refreshes]);
+
+    if (!points) return null;
+    const earlySinceText = points.earlySince && formatDay(points.earlySince, i18n.language, {dateStyle: 'medium'});
+    const kindText = (kind) => t(`POINTS.KINDS.${kind}`);
+    const lines = [
+        ...points.paid.map((row) => t('POINTS.GAME.PAID', {
+            kind: kindText(row.kind), points: row.points,
+            date: formatDate(row.paidAt, i18n.language, {dateStyle: 'medium'}),
+        }) + (row.appid === game.appid ? '' : ` ${t('POINTS.GAME.OTHER_EDITION')}`)),
+        ...Object.entries(points.missing).filter(([, reason]) => !STATUS_NOT_REACHED.includes(reason)).map(([kind, reason]) => (
+            waitingKey(kind, reason) ? t(waitingKey(kind, reason))
+                : t('POINTS.GAME.NONE', {kind: kindText(kind), reason: t(`POINTS.REASONS.${reason}`, {date: earlySinceText})}))),
+    ];
+    return lines.map((line, i) => <p key={i} className="text-sm text-muted-foreground">{line}</p>);
+}

src/components/GamePointsLine.test.jsx

@@ -0,0 +1,118 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen, waitFor} from '@testing-library/react';
+import {toast} from 'sonner';
+import GamePointsLine from './GamePointsLine.jsx';
+import {PreferencesProvider} from '../context/PreferencesContext.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('sonner', () => ({toast: Object.assign(vi.fn(), {success: vi.fn(), error: vi.fn()})}));
+
+const row = (kind, extra = {}) => ({kind, appid: 220, points: 30, paidAt: '2026-10-01T10:00:00Z', bookedNow: false, ...extra});
+const wallet = (balance) => json(200, {balance, catalog: [], owned: [], equipped: {}, history: []});
+
+const renderLine = (status, points) => {
+    const answers = Array.isArray(points) ? [...points] : [points];
+    fetchRoutes({
+        'GET /api/rewards/games/220': () => json(200, answers.length > 1 ? answers.shift() : answers[0]),
+        'GET /api/rewards/wallet': wallet(30),
+    });
+    const tree = (s) => <PreferencesProvider><GamePointsLine game={{appid: 220, status: s}}/></PreferencesProvider>;
+    const view = render(tree(status));
+    return {view, tree};
+};
+
+const pointsCalls = () => globalThis.fetch.mock.calls.filter(([url]) => url.includes('/api/rewards/games/'));
+
+beforeEach(() => {
+    localStorage.setItem('tbp_session', '1');
+});
+
+afterEach(() => {
+    cleanup();
+    localStorage.clear();
+    vi.clearAllMocks();
+});
+
+describe('GamePointsLine', () => {
+    it('shows one line per paid row with its date and notes another edition', async () => {
+        renderLine('FINISHED', {balance: 35, missing: {}, paid: [row('STARTED', {points: 5}), row('FINISHED', {appid: 221})]});
+
+        expect(await screen.findAllByText(/^POINTS.GAME.PAID/)).toHaveLength(2);
+        expect(screen.getAllByText(/POINTS.GAME.OTHER_EDITION/)).toHaveLength(1);
+    });
+
+    it('shows the waiting line for missing proof and a reason line for another missing kind', async () => {
+        renderLine('COMPLETED', {balance: 30, paid: [], missing: {FINISHED: 'NO_PROOF', COMPLETED: 'NEEDS_PROVEN_FINISH'}});
+
+        expect(await screen.findByText('POINTS.GAME.WAITING')).toBeTruthy();
+        expect(screen.getAllByText(/^POINTS.GAME.NONE/)).toHaveLength(1);
+    });
+
+    it('shows the early row and the waiting line for the rest of the finish', async () => {
+        renderLine('FINISHED', {balance: 10, paid: [row('FINISHED_EARLY', {points: 10})], missing: {FINISHED_TOPUP: 'NO_PROOF'}});
+
+        expect(await screen.findByText('POINTS.GAME.WAITING_TOPUP')).toBeTruthy();
+        expect(screen.getAllByText(/^POINTS.GAME.PAID/)).toHaveLength(1);
+        expect(screen.queryByText(/^POINTS.GAME.NONE/)).toBeNull();
+    });
+
+    it('shows the waiting line for the rest when there is no play time on record', async () => {
+        renderLine('FINISHED', {balance: 10, paid: [row('FINISHED_EARLY', {points: 10})], missing: {FINISHED_TOPUP: 'NO_PLAYTIME'}});
+
+        expect(await screen.findByText('POINTS.GAME.WAITING_TOPUP')).toBeTruthy();
+    });
+
+    it('shows a reason line for a hidden game that waits for the rest', async () => {
+        renderLine('FINISHED', {balance: 10, paid: [row('FINISHED_EARLY', {points: 10})], missing: {FINISHED_TOPUP: 'HIDDEN'}});
+
+        expect(await screen.findByText(/^POINTS.GAME.NONE/)).toBeTruthy();
+    });
+
+    it('shows the top-up row with its date', async () => {
+        renderLine('FINISHED', {balance: 30, paid: [row('FINISHED_EARLY', {points: 10}), row('FINISHED_TOPUP', {points: 20})], missing: {}});
+
+        expect(await screen.findAllByText(/^POINTS.GAME.PAID/)).toHaveLength(2);
+    });
+
+    it('shows no line for a status the game never reached', async () => {
+        renderLine('BACKLOG', {balance: 30, paid: [], missing: {STARTED: 'NOT_STARTED', FINISHED: 'NOT_FINISHED', COMPLETED: 'NOT_COMPLETED'}});
+
+        await waitFor(() => expect(pointsCalls()).toHaveLength(1));
+        expect(document.body.textContent).toBe('');
+    });
+
+    it('asks again with a toast after a status change, not on the first load', async () => {
+        const {view, tree} = renderLine('PLAYING', [
+            {balance: 0, paid: [], missing: {STARTED: 'NO_PLAY_AFTER_START'}},
+            {balance: 30, paid: [row('FINISHED', {bookedNow: true})], missing: {}},
+        ]);
+        await screen.findByText('POINTS.GAME.WAITING_START');
+        expect(toast).not.toHaveBeenCalled();
+        expect(toast.success).not.toHaveBeenCalled();
+
+        view.rerender(tree('FINISHED'));
+
+        await waitFor(() => expect(toast.success).toHaveBeenCalledWith('POINTS.GAME.TOAST_BOOKED:30'));
+        expect(pointsCalls()).toHaveLength(2);
+        expect(await screen.findByText(/^POINTS.GAME.PAID/)).toBeTruthy();
+    });
+
+    it('reloads the wallet when the balance changed, so the header updates', async () => {
+        renderLine('FINISHED', {balance: 30, paid: [row('FINISHED')], missing: {}});
+
+        await screen.findByText(/^POINTS.GAME.PAID/);
+
+        await waitFor(() => expect(globalThis.fetch.mock.calls.some(([url]) => url.includes('/api/rewards/wallet'))).toBe(true));
+    });
+
+    it('shows nothing and no toast when the request fails', async () => {
+        fetchRoutes({'GET /api/rewards/games/220': json(404, {code: 'GAME_NOT_FOUND'})});
+        render(<PreferencesProvider><GamePointsLine game={{appid: 220, status: 'FINISHED'}}/></PreferencesProvider>);
+
+        await waitFor(() => expect(pointsCalls()).toHaveLength(1));
+        expect(document.body.textContent).toBe('');
+        expect(toast).not.toHaveBeenCalled();
+    });
+});

src/components/GameSearch.jsx

@@ -6,7 +6,7 @@ import {Badge} from '@/components/ui/badge';
 import {Input} from '@/components/ui/input';
 import GameCover from './GameCover.jsx';
 import FitText from './FitText.jsx';
-import {searchGames} from '../utils/manualGames.js';
+import {hitTitle, searchGames} from '../utils/manualGames.js';
 import {MAX_GAME_SEARCH_LENGTH, MIN_GAME_SEARCH_LENGTH} from '../utils/limits.js';
 
 const SEARCH_DEBOUNCE_MS = 400;
@@ -17,9 +17,11 @@ const SEARCH_DEBOUNCE_MS = 400;
  *
  * @param hide hits not offered at all
  * @param blockInLibrary hits already in the own library are shown, but cannot be picked
+ * @param markInLibrary hits in the own library get the "In library" badge; defaults to blockInLibrary
  * @param selected with onToggle: igdb ids checked for a pick of several games; each hit gets a checkbox
  */
 export default function GameSearch({query, onQueryChange, onPick, hide = () => false, blockInLibrary = false,
+                                       markInLibrary = blockInLibrary,
                                        selected, onToggle}) {
     const {t} = useTranslation();
     const {searchState, results} = useGameSearch(query);
@@ -62,13 +64,13 @@ export default function GameSearch({query, onQueryChange, onPick, hide = () => f
                                     <GameCover appid={hit.appid} imageUrl={hit.imageUrl} className="w-20 shrink-0"/>
                                     <span className="@container min-w-0 flex-1">
                                         <span className="block font-medium">
-                                            <FitText text={`${hit.name}${hit.year ? ` (${hit.year})` : ''}`}/>
+                                            <FitText text={hitTitle(hit)}/>
                                         </span>
                                         <span className="block truncate text-xs text-muted-foreground">
                                             {hit.platforms.join(' · ')}
                                         </span>
                                     </span>
-                                    {blocked && <Badge variant="secondary">{t('MANUAL_GAME.IN_LIBRARY')}</Badge>}
+                                    {markInLibrary && hit.inLibrary && <Badge variant="secondary">{t('MANUAL_GAME.IN_LIBRARY')}</Badge>}
                                 </button>
                             </li>
                         );

src/components/GameStatusBadge.jsx

@@ -5,11 +5,11 @@ import {Badge} from '@/components/ui/badge';
 import {cn} from '@/lib/utils';
 
 export const STATUS_META = {
-    BACKLOG: {icon: Inbox, text: 'text-muted-foreground', badge: 'bg-secondary text-secondary-foreground', bar: 'bg-zinc-400 dark:bg-zinc-500'},
-    PLAYING: {icon: Gamepad2, text: 'text-primary', badge: 'bg-primary/15 text-primary', bar: 'bg-primary'},
-    FINISHED: {icon: CircleCheck, text: 'text-emerald-600 dark:text-emerald-400', badge: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400', bar: 'bg-emerald-500'},
-    COMPLETED: {icon: Trophy, text: 'text-amber-600 dark:text-amber-400', badge: 'bg-amber-500/15 text-amber-600 dark:text-amber-400', bar: 'bg-amber-500'},
-    DROPPED: {icon: Ban, text: 'text-rose-600 dark:text-rose-400', badge: 'bg-rose-500/15 text-rose-600 dark:text-rose-400', bar: 'bg-rose-500'},
+    BACKLOG: {icon: Inbox, color: 'var(--color-zinc-400)', text: 'text-muted-foreground', badge: 'bg-secondary text-secondary-foreground', bar: 'bg-zinc-400 dark:bg-zinc-500'},
+    PLAYING: {icon: Gamepad2, color: 'var(--primary)', text: 'text-primary', badge: 'bg-primary/15 text-primary', bar: 'bg-primary'},
+    FINISHED: {icon: CircleCheck, color: 'var(--color-emerald-500)', text: 'text-emerald-600 dark:text-emerald-400', badge: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400', bar: 'bg-emerald-500'},
+    COMPLETED: {icon: Trophy, color: 'var(--color-amber-500)', text: 'text-amber-600 dark:text-amber-400', badge: 'bg-amber-500/15 text-amber-600 dark:text-amber-400', bar: 'bg-amber-500'},
+    DROPPED: {icon: Ban, color: 'var(--color-rose-500)', text: 'text-rose-600 dark:text-rose-400', badge: 'bg-rose-500/15 text-rose-600 dark:text-rose-400', bar: 'bg-rose-500'},
 };
 
 /**

src/components/LibraryTabs.jsx

@@ -1,32 +1,17 @@
-import {NavLink} from 'react-router-dom';
+import {useLocation} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
-import {Gift, Library} from 'lucide-react';
+import {Gift, Library, ListOrdered} from 'lucide-react';
 
-import {cn} from '@/lib/utils';
+import TabNav from './TabNav.jsx';
 
 const TABS = [
     {to: '/library', labelKey: 'LIBRARY.TITLE', icon: Library},
+    {to: '/backlog', labelKey: 'BACKLOG_ORDER.TITLE', icon: ListOrdered},
     {to: '/wishlist', labelKey: 'WISHLIST.TITLE', icon: Gift},
 ];
 
 export default function LibraryTabs() {
     const {t} = useTranslation();
-    return (
-        <nav aria-label={t('LIBRARY.TITLE')} className="inline-flex max-w-full rounded-lg bg-muted p-1 text-sm">
-            {TABS.map(({to, labelKey, icon: Icon}) => (
-                <NavLink
-                    key={to}
-                    to={to}
-                    end
-                    className={({isActive}) => cn(
-                        'flex min-w-0 items-center gap-1.5 rounded-md px-3 py-1.5 font-medium transition-colors',
-                        isActive ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground',
-                    )}
-                >
-                    <Icon className="size-4 shrink-0"/>
-                    <span className="truncate">{t(labelKey)}</span>
-                </NavLink>
-            ))}
-        </nav>
-    );
+    const {pathname} = useLocation();
+    return <TabNav label={t('LIBRARY.TITLE')} tabs={TABS.map((tab) => ({...tab, active: pathname === tab.to}))}/>;
 }

src/components/ManualGameCard.jsx

@@ -8,7 +8,8 @@ import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import {Input} from '@/components/ui/input';
 import {Label} from '@/components/ui/label';
-import {hoursToMinutes, removeGame, toHours, updateManualGame} from '../utils/manualGames.js';
+import {hoursToMinutes, removeGame, restoreGame, toHours, updateManualGame} from '../utils/manualGames.js';
+import {UNDO_MS} from '../utils/backlog.js';
 import {MAX_PLATFORM_LENGTH} from '../utils/limits.js';
 import useUnsavedChanges, {discardChanges} from '../hooks/useUnsavedChanges.js';
 
@@ -25,7 +26,9 @@ export default function ManualGameCard({game, onSaved}) {
     const [busy, setBusy] = useState(false);
     const [confirmRemove, setConfirmRemove] = useState(false);
 
-    const playtimeMinutes = hoursToMinutes(hours);
+    // PlayStation owns the playtime of its rows: Core ignores a value sent for one.
+    const psn = game.source === 'PSN';
+    const playtimeMinutes = psn ? game.playtimeMinutes : hoursToMinutes(hours);
     const dirty = platform.trim() !== (game.platform ?? '') || playtimeMinutes !== game.playtimeMinutes;
     useUnsavedChanges(dirty);
 
@@ -52,8 +55,16 @@ export default function ManualGameCard({game, onSaved}) {
         toast.success(t('BACKLOG.SAVED'));
     });
 
+    const undoRemove = () => run(() => restoreGame(game.appid), () => {
+        toast.success(t('REMOVED_GAMES.RESTORED'));
+        navigate(`/library/${game.appid}`);
+    });
+
     const remove = () => run(() => removeGame(game.appid), () => {
-        toast.success(t('MANUAL_GAME.REMOVED'));
+        toast.success(t('MANUAL_GAME.REMOVED'), {
+            duration: UNDO_MS,
+            action: {label: t('MANUAL_GAME.UNDO'), onClick: undoRemove},
+        });
         // The game is gone, so are its unsaved edits on this page.
         discardChanges();
         navigate('/library', {replace: true});
@@ -65,7 +76,7 @@ export default function ManualGameCard({game, onSaved}) {
                 <Hand className="size-4 text-primary"/>
                 {t('MANUAL_GAME.TITLE')}
             </h2>
-            <p className="text-sm text-muted-foreground">{t('MANUAL_GAME.HINT')}</p>
+            {!psn && <p className="text-sm text-muted-foreground">{t('MANUAL_GAME.HINT')}</p>}
 
             <div className="grid gap-5 sm:grid-cols-2">
                 <div className="space-y-2">
@@ -73,11 +84,13 @@ export default function ManualGameCard({game, onSaved}) {
                     <Input id="manual-platform" value={platform} maxLength={MAX_PLATFORM_LENGTH}
                            onChange={(e) => setPlatform(e.target.value)}/>
                 </div>
-                <div className="space-y-2">
-                    <Label htmlFor="manual-hours">{t('MANUAL_GAME.HOURS')}</Label>
-                    <Input id="manual-hours" type="number" min="0" step="0.5" inputMode="decimal" value={hours}
-                           onChange={(e) => setHours(e.target.value)}/>
-                </div>
+                {!psn && (
+                    <div className="space-y-2">
+                        <Label htmlFor="manual-hours">{t('MANUAL_GAME.HOURS')}</Label>
+                        <Input id="manual-hours" type="number" min="0" step="0.5" inputMode="decimal" value={hours}
+                               onChange={(e) => setHours(e.target.value)}/>
+                    </div>
+                )}
             </div>
 
             <div className="flex flex-wrap items-center justify-between gap-3">

src/components/ManualGameCard.test.jsx

@@ -64,6 +64,43 @@ describe('ManualGameCard', () => {
         await waitFor(() => expect(router.state.location.pathname).toBe('/library'));
     });
 
+    it('offers an undo after the remove that restores the game and opens it', async () => {
+        answer({
+            'DELETE /api/library/games/-1025': json(204, null),
+            'POST /api/library/games/-1025/restore': json(204, null),
+        });
+        const {router} = renderCard();
+        fireEvent.click(screen.getByRole('button', {name: 'MANUAL_GAME.REMOVE'}));
+        fireEvent.click(screen.getByRole('button', {name: 'MANUAL_GAME.REMOVE_YES'}));
+        await waitFor(() => expect(router.state.location.pathname).toBe('/library'));
+
+        const [message, options] = toast.success.mock.calls.find(([text]) => text === 'MANUAL_GAME.REMOVED');
+        expect(message).toBe('MANUAL_GAME.REMOVED');
+        expect(options.action.label).toBe('MANUAL_GAME.UNDO');
+        await options.action.onClick();
+
+        const [url] = fetch.mock.calls.find(([, init]) => init?.method === 'POST');
+        expect(url).toContain('/api/library/games/-1025/restore');
+        await waitFor(() => expect(router.state.location.pathname).toBe('/library/-1025'));
+        expect(toast.success).toHaveBeenCalledWith('REMOVED_GAMES.RESTORED');
+    });
+
+    it('shows an error when the undo fails', async () => {
+        answer({
+            'DELETE /api/library/games/-1025': json(204, null),
+            'POST /api/library/games/-1025/restore': json(500, {}),
+        });
+        const {router} = renderCard();
+        fireEvent.click(screen.getByRole('button', {name: 'MANUAL_GAME.REMOVE'}));
+        fireEvent.click(screen.getByRole('button', {name: 'MANUAL_GAME.REMOVE_YES'}));
+        await waitFor(() => expect(router.state.location.pathname).toBe('/library'));
+
+        await toast.success.mock.calls.find(([text]) => text === 'MANUAL_GAME.REMOVED')[1].action.onClick();
+
+        expect(toast.error).toHaveBeenCalledWith('BACKLOG.SAVE_FAILED');
+        expect(router.state.location.pathname).toBe('/library');
+    });
+
     it('shows an error when the save fails', async () => {
         answer({'PUT /api/library/games/-1025/manual': json(500, {})});
         const onSaved = vi.fn();

src/components/MostPlayedCard.jsx

@@ -4,14 +4,25 @@ import {ArrowRight, Trophy} from 'lucide-react';
 
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
+import ChartPicker from './stats/ChartPicker.jsx';
+import GamePlayChart from './stats/GamePlayChart.jsx';
 import GameCover from './GameCover.jsx';
 import FitText from './FitText.jsx';
 import {formatPlaytime} from '../utils/games.js';
 import {coverEffect} from '../utils/rewards.js';
+import {playChart} from '../utils/statCharts.js';
 
-export default function MostPlayedCard({games, syncing, equipped}) {
+const total = (g) => g.totalPlaytimeMinutes ?? g.playtimeMinutes;
+
+/**
+ * @param chart LIST, BARS, PIE or DONUT
+ * @param onChart `(form)`: shows the picker
+ */
+export default function MostPlayedCard({games, syncing, equipped, chart = 'LIST', onChart}) {
     const {t} = useTranslation();
-    const maxMinutes = games[0]?.playtimeMinutes || 1;
+    const mapped = games.map((g) => ({appid: g.appid, name: g.name, minutes: total(g)}));
+    const form = playChart(chart, mapped);
+    const maxMinutes = mapped[0]?.minutes || 1;
     return (
         <Card className="gap-0 py-0">
             <div className="flex flex-wrap items-center justify-between gap-x-3 px-5 py-4 border-b">
@@ -19,15 +30,20 @@ export default function MostPlayedCard({games, syncing, equipped}) {
                     <Trophy className="size-4 text-amber-500"/>
                     {t('DASHBOARD.MOST_PLAYED')}
                 </h2>
-                <Button asChild variant="ghost" size="sm">
-                    <Link to="/library">{t('DASHBOARD.SHOW_ALL')}<ArrowRight/></Link>
-                </Button>
+                <div className="flex flex-wrap items-center gap-x-3">
+                    {onChart && <ChartPicker group="TOP_GAMES" value={chart} onChange={onChart}/>}
+                    <Button asChild variant="ghost" size="sm">
+                        <Link to="/library">{t('DASHBOARD.SHOW_ALL')}<ArrowRight/></Link>
+                    </Button>
+                </div>
             </div>
 
             {games.length === 0 ? (
                 <p className="px-5 py-10 text-center text-sm text-muted-foreground">
                     {syncing ? t('LIBRARY.SYNCING_FIRST_TIME') : t('LIBRARY.EMPTY')}
                 </p>
+            ) : form !== 'LIST' ? (
+                <div className="px-5 py-4"><GamePlayChart games={mapped} chart={form} linked/></div>
             ) : (
                 <ol className="divide-y">
                     {games.map((g, index) => (
@@ -48,12 +64,12 @@ export default function MostPlayedCard({games, syncing, equipped}) {
                                     <div className="mt-2 h-1.5 rounded-full bg-muted">
                                         <div
                                             className="h-full rounded-full bg-primary"
-                                            style={{width: `${Math.max(2, (g.playtimeMinutes / maxMinutes) * 100)}%`}}
+                                            style={{width: `${Math.max(2, (total(g) / maxMinutes) * 100)}%`}}
                                         />
                                     </div>
                                 </div>
                                 <span className="w-12 sm:w-14 text-right text-sm font-medium text-muted-foreground tabular-nums">
-                                    {formatPlaytime(g.playtimeMinutes)}
+                                    {formatPlaytime(total(g))}
                                 </span>
                             </Link>
                         </li>

src/components/MostPlayedCard.test.jsx

@@ -0,0 +1,18 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import MostPlayedCard from './MostPlayedCard.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+describe('MostPlayedCard', () => {
+    afterEach(cleanup);
+
+    it('shows the set total of a game, not the minutes of its own row', () => {
+        render(<MemoryRouter><MostPlayedCard games={[{appid: 620, name: 'Portal 2', playtimeMinutes: 100,
+            totalPlaytimeMinutes: 600, status: 'PLAYING'}]}/></MemoryRouter>);
+
+        expect(screen.getByText('10h')).toBeTruthy();
+    });
+});

src/components/NewPasswordFields.jsx

@@ -1,19 +1,20 @@
-import {Input} from '@/components/ui/input';
 import FormField from './FormField.jsx';
+import PasswordInput from './PasswordInput.jsx';
 
 /**
- * The new password and its repeat, for a form on confirmEmailSchema.
+ * The new password and its repeat, for a form on confirmEmailSchema. The rules are visible from the start.
  */
 export default function NewPasswordFields({register, errors, t}) {
     return <>
-        <FormField id="password" label={t('REGISTRATION.PASSWORD')} error={errors.password} t={t}>
-            <Input id="password" type="password" autoComplete="new-password" aria-invalid={!!errors.password}
-                   {...register('password')}/>
+        <FormField id="password" label={t('REGISTRATION.PASSWORD')} error={errors.password}
+                   description={t('VALIDATION.PASSWORD_RULES')} t={t}>
+            <PasswordInput id="password" autoComplete="new-password" aria-invalid={!!errors.password}
+                           aria-describedby="password-description" {...register('password')}/>
         </FormField>
         <FormField id="passwordConfirmation" label={t('REGISTRATION.PASSWORD_CONFIRMATION')}
                    error={errors.passwordConfirmation} t={t}>
-            <Input id="passwordConfirmation" type="password" autoComplete="new-password"
-                   aria-invalid={!!errors.passwordConfirmation} {...register('passwordConfirmation')}/>
+            <PasswordInput id="passwordConfirmation" autoComplete="new-password"
+                           aria-invalid={!!errors.passwordConfirmation} {...register('passwordConfirmation')}/>
         </FormField>
     </>;
 }

src/components/NewPasswordFields.test.jsx

@@ -0,0 +1,26 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen} from '@testing-library/react';
+import NewPasswordFields from './NewPasswordFields.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+const register = (name) => ({name});
+
+describe('NewPasswordFields', () => {
+    afterEach(cleanup);
+
+    it('shows the password rules from the start and links them to the password input', () => {
+        render(<NewPasswordFields register={register} errors={{}} t={(key) => key}/>);
+
+        const rules = screen.getByText('VALIDATION.PASSWORD_RULES');
+        const input = screen.getByLabelText('REGISTRATION.PASSWORD');
+        expect(input.getAttribute('aria-describedby')).toBe(rules.id);
+    });
+
+    it('has a show-password toggle on both fields', () => {
+        render(<NewPasswordFields register={register} errors={{}} t={(key) => key}/>);
+
+        expect(screen.getAllByRole('button', {name: 'LOGIN.SHOW_PASSWORD'})).toHaveLength(2);
+    });
+});

src/components/Pagination.jsx

@@ -0,0 +1,39 @@
+import {useTranslation} from 'react-i18next';
+import {ChevronLeft, ChevronRight} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {pageNumbers} from '../utils/pagination.js';
+
+/**
+ * Previous / page numbers / Next. Below the sm breakpoint only the current number shows.
+ *
+ * @param page current page, 0-based
+ * @param onChange gets the 0-based target page
+ * @param summary node shown after the buttons
+ */
+export default function Pagination({page, totalPages, onChange, summary}) {
+    const {t} = useTranslation();
+    return (
+        <nav aria-label={t('LIBRARY.PAGINATION')} className="flex flex-wrap items-center justify-between gap-2 text-sm text-muted-foreground">
+            <div className="flex items-center gap-1">
+                <Button variant="outline" size="sm" onClick={() => onChange(page - 1)} disabled={page <= 0}>
+                    <ChevronLeft/>{t('LIBRARY.PREV')}
+                </Button>
+                {pageNumbers(page, totalPages).map((n, i) => (n === null
+                    ? <span key={`gap-${i}`} aria-hidden="true" className="hidden px-1 sm:inline">…</span>
+                    : (
+                        <Button key={n} size="sm" variant={n === page ? 'default' : 'outline'}
+                                aria-current={n === page ? 'page' : undefined}
+                                className={n === page ? 'tabular-nums' : 'hidden tabular-nums sm:inline-flex'}
+                                onClick={() => onChange(n)}>
+                            {n + 1}
+                        </Button>
+                    )))}
+                <Button variant="outline" size="sm" onClick={() => onChange(page + 1)} disabled={page >= totalPages - 1}>
+                    {t('LIBRARY.NEXT')}<ChevronRight/>
+                </Button>
+            </div>
+            <span className="text-center">{summary}</span>
+        </nav>
+    );
+}

src/components/PasswordInput.jsx

@@ -0,0 +1,26 @@
+import {useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Eye, EyeOff} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {cn} from '@/lib/utils';
+
+/**
+ * A password input with a button that shows or hides the text. Every other prop, also a react-hook-form `register()`
+ * result with its ref, goes to the input.
+ */
+export default function PasswordInput({className, ...props}) {
+    const {t} = useTranslation();
+    const [shown, setShown] = useState(false);
+    return (
+        <div className="relative">
+            <Input type={shown ? 'text' : 'password'} className={cn('pr-10', className)} {...props}/>
+            <Button type="button" variant="ghost" size="icon" aria-pressed={shown}
+                    aria-label={t(shown ? 'LOGIN.HIDE_PASSWORD' : 'LOGIN.SHOW_PASSWORD')}
+                    className="absolute right-1 top-1/2 size-7 -translate-y-1/2" onClick={() => setShown(!shown)}>
+                {shown ? <EyeOff/> : <Eye/>}
+            </Button>
+        </div>
+    );
+}

src/components/PasswordInput.test.jsx

@@ -0,0 +1,39 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, fireEvent, render, screen} from '@testing-library/react';
+import PasswordInput from './PasswordInput.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+describe('PasswordInput', () => {
+    afterEach(cleanup);
+
+    it('hides the text at first and toggles it with aria-pressed', () => {
+        render(<PasswordInput aria-label="pw"/>);
+        const input = screen.getByLabelText('pw');
+        expect(input.type).toBe('password');
+        expect(screen.getByRole('button', {name: 'LOGIN.SHOW_PASSWORD'}).getAttribute('aria-pressed')).toBe('false');
+
+        fireEvent.click(screen.getByRole('button', {name: 'LOGIN.SHOW_PASSWORD'}));
+
+        expect(input.type).toBe('text');
+        expect(screen.getByRole('button', {name: 'LOGIN.HIDE_PASSWORD'}).getAttribute('aria-pressed')).toBe('true');
+    });
+
+    it('does not submit the form with the toggle', () => {
+        const onSubmit = vi.fn((event) => event.preventDefault());
+        render(<form onSubmit={onSubmit}><PasswordInput aria-label="pw"/></form>);
+
+        fireEvent.click(screen.getByRole('button', {name: 'LOGIN.SHOW_PASSWORD'}));
+
+        expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it('passes the other props to the input', () => {
+        render(<PasswordInput aria-label="pw" autoComplete="new-password" defaultValue="abc"/>);
+
+        const input = screen.getByLabelText('pw');
+        expect(input.getAttribute('autocomplete')).toBe('new-password');
+        expect(input.value).toBe('abc');
+    });
+});

src/components/PileOfShameCard.jsx

@@ -4,12 +4,12 @@ import {Dices, Inbox, Shuffle} from 'lucide-react';
 
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
+import {cn} from '@/lib/utils';
 import GameCover from './GameCover.jsx';
 import PileTrend from './stats/PileTrend.jsx';
 import {StatCount} from './stats/StatDrill.jsx';
-import {STATUS_META} from './GameStatusBadge.jsx';
-import {backlogShare} from '../utils/backlog.js';
-import {GAME_STATUSES} from '../utils/limits.js';
+import {backlogShare, pileGames} from '../utils/backlog.js';
+import {sliceColors, statusSlices} from '../utils/statCharts.js';
 import {formatPlaytime} from '../utils/games.js';
 import {libraryLink} from '../utils/statGames.js';
 
@@ -18,8 +18,10 @@ import {libraryLink} from '../utils/statGames.js';
  */
 export default function PileOfShameCard({summary, trend, syncing, onShuffle, shuffling}) {
     const {t, i18n} = useTranslation();
-    const backlog = summary.byStatus?.BACKLOG ?? 0;
+    const backlog = pileGames(summary);
     const suggestion = summary.suggestion;
+    const slices = statusSlices(summary.byStatus);
+    const colors = sliceColors(slices);
 
     if (syncing && summary.total === 0) {
         return (
@@ -64,22 +66,20 @@ export default function PileOfShameCard({summary, trend, syncing, onShuffle, shu
             {summary.total > 0 && (
                 <div className="space-y-2">
                     <div className="flex h-2.5 overflow-hidden rounded-full bg-muted">
-                        {GAME_STATUSES.map((s) => (
-                            <div
-                                key={s}
-                                className={STATUS_META[s].bar}
-                                style={{width: `${(summary.byStatus[s] / summary.total) * 100}%`}}
-                            />
+                        {slices.map((s, i) => s.value > 0 && (
+                            <div key={s.name} className="border-card [&:not(:last-child)]:border-r-2"
+                                 style={{width: `${(s.value / summary.total) * 100}%`, background: colors[i]}}/>
                         ))}
                     </div>
                     <ul className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
-                        {GAME_STATUSES.map((s) => (
+                        {slices.map(({name: s, value}, i) => (
                             <li key={s} className="flex items-center gap-1.5">
-                                <span className={`size-2 rounded-full ${STATUS_META[s].bar}`}/>
+                                <span className={cn('size-2 rounded-full', !colors[i] && 'bg-muted')}
+                                      style={colors[i] ? {background: colors[i]} : undefined}/>
                                 {t(`BACKLOG.STATUS.${s}`)}
-                                <StatCount to={libraryLink(s)} count={summary.byStatus[s]}
-                                           label={`${t(`BACKLOG.STATUS.${s}`)}: ${summary.byStatus[s]}`}>
-                                    <span className="tabular-nums text-foreground">{summary.byStatus[s]}</span>
+                                <StatCount to={libraryLink(s)} count={value}
+                                           label={`${t(`BACKLOG.STATUS.${s}`)}: ${value}`}>
+                                    <span className="tabular-nums text-foreground">{value}</span>
                                 </StatCount>
                             </li>
                         ))}

src/components/PileOfShameCard.test.jsx

@@ -28,6 +28,19 @@ describe('PileOfShameCard', () => {
         expect(screen.queryByText('DASHBOARD.BACKLOG_EMPTY')).toBeNull();
     });
 
+    it('counts the pile without the games that are not released yet', () => {
+        renderCard({summary: summary(5, {pileGames: 3})});
+
+        expect(screen.getByText('3', {selector: '.text-4xl'})).toBeTruthy();
+        expect(screen.queryByText('5', {selector: '.text-4xl'})).toBeNull();
+    });
+
+    it('falls back to the BACKLOG status count when an older Core sends no pileGames', () => {
+        renderCard({summary: summary(5)});
+
+        expect(screen.getByText('5', {selector: '.text-4xl'})).toBeTruthy();
+    });
+
     it('hides the shuffle button when there is nothing else to pick', () => {
         renderCard({summary: summary(1)});
 
@@ -75,6 +88,16 @@ describe('PileOfShameCard', () => {
         expect(screen.getByRole('link', {name: 'BACKLOG.STATUS.PLAYING: 3'})).toBeTruthy();
     });
 
+    it('colorsTheStatusBarLikeTheDonutAndSkipsStatusesWithoutGames', () => {
+        const {container} = renderCard({summary: summary(2)});
+
+        const segments = [...container.querySelector('.h-2\\.5').children];
+
+        expect(segments).toHaveLength(2);
+        expect(segments[0].getAttribute('style')).toContain('var(--chart-1)');
+        expect(segments[1].getAttribute('style')).toContain('var(--chart-2)');
+    });
+
     it('shows the backlog hours when IGDB knows some', () => {
         renderCard({summary: summary(2, {backlogMinutes: 7440})});
 
@@ -93,7 +116,7 @@ describe('PileOfShameCard', () => {
         render(<MemoryRouter><StatDrillProvider source="own"><PileOfShameCard summary={summary(2)} onShuffle={() => {}}/></StatDrillProvider></MemoryRouter>);
 
         expect(screen.getAllByRole('link', {name: 'BACKLOG.STATUS.BACKLOG: 2'})[0].getAttribute('href'))
-            .toBe('/library?hideDuplicates=true&status=BACKLOG');
+            .toBe('/library?status=BACKLOG');
         fireEvent.click(screen.getByRole('button', {name: 'DASHBOARD.NEVER_PLAYED:1'}));
 
         expect(await screen.findByText('Untouched')).toBeTruthy();

src/components/PlatformIcons.jsx

@@ -0,0 +1,30 @@
+import {useTranslation} from 'react-i18next';
+
+import {platformLabel} from '../utils/platforms.js';
+
+// lucide has no brand icons: a short text badge per platform.
+const shortName = ({source, platform}) => {
+    if (source === 'STEAM') return 'ST';
+    return platform ?? (source === 'PSN' ? 'PS' : 'M');
+};
+
+/**
+ * @param platforms the {source, platform} of every edition of a library entry, see Core's `platforms`
+ */
+export default function PlatformIcons({platforms}) {
+    const {t} = useTranslation();
+    if (!platforms?.length) return null;
+    return (
+        <ul className="flex flex-wrap gap-1">
+            {platforms.map((p) => {
+                const label = platformLabel(p) ?? t(`LIBRARY.SOURCE.${p.source}`);
+                return (
+                    <li key={`${p.source}:${p.platform ?? ''}`} title={label} aria-label={label}
+                        className="rounded border px-1 text-[10px] leading-4 font-semibold text-muted-foreground">
+                        {shortName(p)}
+                    </li>
+                );
+            })}
+        </ul>
+    );
+}

src/components/PlatformIcons.test.jsx

@@ -0,0 +1,44 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen} from '@testing-library/react';
+import PlatformIcons from './PlatformIcons.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+afterEach(cleanup);
+
+describe('PlatformIcons', () => {
+    it('showsOneBadgeWithALabelPerPlatform', () => {
+        render(<PlatformIcons platforms={[{source: 'STEAM', platform: null}, {source: 'PSN', platform: 'PS5'}]}/>);
+
+        expect(screen.getAllByRole('listitem')).toHaveLength(2);
+        expect(screen.getByLabelText('Steam').textContent).toBe('ST');
+        expect(screen.getByLabelText('PS5').textContent).toBe('PS5');
+    });
+
+    it('namesAPlayStationTitleWithoutPlatformAfterItsSource', () => {
+        render(<PlatformIcons platforms={[{source: 'PSN', platform: null}]}/>);
+
+        expect(screen.getByLabelText('LIBRARY.SOURCE.PSN').textContent).toBe('PS');
+    });
+
+    it('showsAManualPlatformByName', () => {
+        render(<PlatformIcons platforms={[{source: 'MANUAL', platform: 'Switch'}]}/>);
+
+        expect(screen.getByLabelText('Switch').textContent).toBe('Switch');
+    });
+
+    it('aManualGameWithoutPlatformIsNotShownAsPlayStation', () => {
+        render(<PlatformIcons platforms={[{source: 'MANUAL', platform: null}]}/>);
+
+        expect(screen.getByLabelText('LIBRARY.SOURCE.MANUAL').textContent).not.toBe('PS');
+    });
+
+    it('rendersNothingWithoutPlatforms', () => {
+        const {container} = render(<PlatformIcons platforms={[]}/>);
+        expect(container.firstChild).toBeNull();
+        cleanup();
+        const missing = render(<PlatformIcons/>);
+        expect(missing.container.firstChild).toBeNull();
+    });
+});

src/components/PlatformsCard.jsx

@@ -0,0 +1,61 @@
+import {Link} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+import {Trophy} from 'lucide-react';
+
+import {Card} from '@/components/ui/card';
+import {cn} from '@/lib/utils';
+import PlatformIcons from './PlatformIcons.jsx';
+import {formatPlaytime} from '../utils/games.js';
+import {formatDate} from '../utils/format.js';
+import {platformLabel} from '../utils/platforms.js';
+
+/**
+ * One row per platform of the game: playtime, last played and the progress of that platform. A row of another edition
+ * links to that edition, whose page lists its achievements.
+ */
+export default function PlatformsCard({game}) {
+    const {t, i18n} = useTranslation();
+    const lines = game.platforms;
+    if (!lines?.length) return null;
+
+    return (
+        <Card className="gap-3 p-4">
+            <h2 className="text-sm font-medium">{t('PLATFORMS.TITLE')}</h2>
+            <ul className="divide-y text-sm">
+                {lines.map((line, index) => {
+                    const label = platformLabel(line) ?? t(`LIBRARY.SOURCE.${line.source}`);
+                    return (
+                        <li key={`${line.appid}:${line.source}:${index}`}
+                            className="flex flex-wrap items-center gap-x-4 gap-y-1 py-2 first:pt-0 last:pb-0">
+                            <span className="flex min-w-24 items-center gap-2 font-medium">
+                                <PlatformIcons platforms={[line]}/>
+                                {line.appid === game.appid
+                                    ? <span>{label}</span>
+                                    : <Link to={`/library/${line.appid}`} className="hover:text-primary hover:underline">{label}</Link>}
+                            </span>
+                            <span className="tabular-nums">{formatPlaytime(line.playtimeMinutes)}</span>
+                            <span className="text-muted-foreground">
+                                {t('PLATFORMS.LAST_PLAYED')}{' '}
+                                {line.lastPlayedAt
+                                    ? formatDate(line.lastPlayedAt, i18n.language, {dateStyle: 'medium'})
+                                    : t('PLATFORMS.NEVER')}
+                            </span>
+                            {line.achievementsTotal != null && (
+                                <span className="inline-flex items-center gap-1 tabular-nums">
+                                    <Trophy className={cn('size-3', line.perfect && 'text-amber-500')}/>
+                                    {line.achievementsUnlocked ?? '?'} / {line.achievementsTotal}
+                                </span>
+                            )}
+                        </li>
+                    );
+                })}
+            </ul>
+            {lines.length > 1 && (
+                <p className="flex items-center justify-between border-t pt-2 text-sm font-medium">
+                    <span>{t('PLATFORMS.TOTAL')}</span>
+                    <span className="tabular-nums">{formatPlaytime(game.totalPlaytimeMinutes)}</span>
+                </p>
+            )}
+        </Card>
+    );
+}

src/components/PlatformsCard.test.jsx

@@ -0,0 +1,79 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen, within} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import PlatformsCard from './PlatformsCard.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+const steam = {source: 'STEAM', platform: null, appid: 220, playtimeMinutes: 3000, lastPlayedAt: '2026-10-01T10:00:00Z',
+    achievementsUnlocked: 2, achievementsTotal: 3, perfect: false};
+const ps5 = {source: 'PSN', platform: 'PS5', appid: 221, playtimeMinutes: 600, lastPlayedAt: null,
+    achievementsUnlocked: 10, achievementsTotal: 10, perfect: true};
+
+const renderCard = (game) => render(<MemoryRouter><PlatformsCard game={game}/></MemoryRouter>);
+// The icon of a row is a list too.
+const lineRows = () => [...document.querySelectorAll('ul.divide-y > li')];
+
+describe('PlatformsCard', () => {
+    afterEach(cleanup);
+
+    it('showsOneRowPerPlatformWithPlaytimeAndProgress', () => {
+        renderCard({appid: 220, platforms: [steam, ps5], totalPlaytimeMinutes: 3600});
+
+        const rows = lineRows();
+        expect(rows).toHaveLength(2);
+        expect(within(rows[0]).getByText('Steam')).toBeTruthy();
+        expect(within(rows[0]).getByText('50h')).toBeTruthy();
+        expect(within(rows[0]).getByText('2 / 3')).toBeTruthy();
+        expect(within(rows[1]).getByText('PS5', {selector: 'a, span'})).toBeTruthy();
+        expect(within(rows[1]).getByText('10h')).toBeTruthy();
+    });
+
+    it('marksAPerfectLineOnly', () => {
+        renderCard({appid: 220, platforms: [steam, ps5], totalPlaytimeMinutes: 3600});
+
+        const rows = lineRows();
+        expect(rows[0].querySelector('.text-amber-500')).toBeNull();
+        expect(rows[1].querySelector('.text-amber-500')).not.toBeNull();
+    });
+
+    it('showsTheTotalRowOnlyWithTwoLines', () => {
+        renderCard({appid: 220, platforms: [steam], totalPlaytimeMinutes: 3000});
+
+        expect(screen.queryByText('PLATFORMS.TOTAL')).toBeNull();
+
+        cleanup();
+        renderCard({appid: 220, platforms: [steam, ps5], totalPlaytimeMinutes: 3600});
+
+        expect(screen.getByText('PLATFORMS.TOTAL')).toBeTruthy();
+        expect(screen.getByText('60h')).toBeTruthy();
+    });
+
+    it('showsNeverForAMissingLastPlayed', () => {
+        renderCard({appid: 220, platforms: [steam, ps5], totalPlaytimeMinutes: 3600});
+
+        expect(screen.getAllByText(/PLATFORMS\.NEVER/)).toHaveLength(1);
+    });
+
+    it('linksOnlyTheLinesOfAnotherEdition', () => {
+        renderCard({appid: 220, platforms: [steam, ps5], totalPlaytimeMinutes: 3600});
+
+        const links = screen.getAllByRole('link');
+        expect(links).toHaveLength(1);
+        expect(links[0].getAttribute('href')).toBe('/library/221');
+    });
+
+    it('showsNoAchievementsForALineWithoutAny', () => {
+        renderCard({appid: 220, platforms: [{...steam, achievementsUnlocked: null, achievementsTotal: null}],
+            totalPlaytimeMinutes: 3000});
+
+        expect(screen.queryByText(/ \/ /)).toBeNull();
+    });
+
+    it('isHiddenWithoutPlatforms', () => {
+        const {container} = renderCard({appid: 220, platforms: [], totalPlaytimeMinutes: 0});
+
+        expect(container.textContent).toBe('');
+    });
+});

src/components/PlayingHint.jsx

@@ -1,11 +1,9 @@
-import {useState} from 'react';
 import {useTranslation} from 'react-i18next';
-import {toast} from 'sonner';
 import {Gamepad2, Loader2} from 'lucide-react';
 
 import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
-import {saveGameStatus} from '../utils/backlog.js';
+import useSetStatus from '../hooks/useSetStatus.js';
 import {formatPlaytime} from '../utils/games.js';
 
 /**
@@ -15,29 +13,10 @@ import {formatPlaytime} from '../utils/games.js';
  */
 export default function PlayingHint({game, onChanged}) {
     const {t} = useTranslation();
-    const [busy, setBusy] = useState(false);
+    const {setStatus, busy} = useSetStatus(game.appid, {onChanged});
 
     if (game.status !== 'BACKLOG' || !(game.playtime2Weeks > 0)) return null;
 
-    const setPlaying = async () => {
-        setBusy(true);
-        try {
-            const response = await saveGameStatus(game.appid, 'PLAYING');
-            if (response.status === 401) return;
-            if (!response.ok) {
-                toast.error(t('BACKLOG.SAVE_FAILED'));
-                return;
-            }
-            onChanged(await response.json());
-            toast.success(t('BACKLOG.SAVED'));
-        } catch (err) {
-            console.error('set playing error:', err);
-            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
-        } finally {
-            setBusy(false);
-        }
-    };
-
     return (
         <Card className="gap-3 border-primary/40 bg-primary/5 p-4 sm:flex-row sm:items-center sm:gap-4">
             <div className="flex flex-1 items-start gap-3 sm:items-center">
@@ -46,7 +25,7 @@ export default function PlayingHint({game, onChanged}) {
                     {t('GAME_DETAIL.PLAYED_RECENTLY', {time: formatPlaytime(game.playtime2Weeks)})}
                 </p>
             </div>
-            <Button size="sm" className="self-end sm:self-auto" onClick={setPlaying} disabled={busy}>
+            <Button size="sm" className="self-end sm:self-auto" onClick={() => setStatus('PLAYING', {previous: 'BACKLOG'})} disabled={busy}>
                 {busy && <Loader2 className="animate-spin"/>}
                 {t('GAME_DETAIL.SET_PLAYING')}
             </Button>

src/components/PlayingHint.test.jsx

@@ -7,6 +7,7 @@ import PlayingHint from './PlayingHint.jsx';
 
 vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
 vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+vi.mock('../hooks/usePointsCheck.js', () => ({default: () => vi.fn()}));
 
 const game = {appid: 220, status: 'BACKLOG', rating: 3, notes: 'keep', priority: 'HIGH', playtime2Weeks: 90};
 const renderHint = (props) => render(<MemoryRouter><PlayingHint game={game} onChanged={() => {}} {...props}/></MemoryRouter>);

src/components/PreferencesCard.jsx

@@ -1,17 +1,15 @@
 import {useTranslation} from 'react-i18next';
 import {SlidersHorizontal} from 'lucide-react';
-import {toast} from 'sonner';
 
 import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
 import {Label} from '@/components/ui/label';
 import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
-import {Switch} from '@/components/ui/switch';
 import {useCurrentUserContext} from '../context/CurrentUserContext.jsx';
 import {usePreferences} from '../context/PreferencesContext.jsx';
 import usePersistSettings from '../hooks/usePersistSettings.js';
 import useSaveResponse from '../hooks/useSaveResponse.js';
 import {FAVORITE_PLATFORMS, saveFavoritePlatform} from '../utils/platforms.js';
-import {LANGUAGES, saveSettings} from '../utils/settings.js';
+import {LANGUAGES} from '../utils/settings.js';
 
 // Radix Select has no empty value.
 const NO_FAVORITE = 'NONE';
@@ -19,26 +17,22 @@ const NO_FAVORITE = 'NONE';
 export default function PreferencesCard() {
     const {t, i18n} = useTranslation();
     const {user: profile, updateUser: updateProfile} = useCurrentUserContext();
-    const {isDarkMode, setDarkMode, setLanguage} = usePreferences();
+    const {setLanguage} = usePreferences();
     const persistSettings = usePersistSettings();
     const runSave = useSaveResponse();
 
-    const handleDarkThemeToggle = async () => {
-        const next = !isDarkMode;
-        setDarkMode(next); // apply on the fly
-        await persistSettings(() => saveSettings({useDarkTheme: next}));
-    };
-
     const handleLanguageChange = async (next) => {
-        await persistSettings(() => setLanguage(next));
+        const previous = i18n.language;
+        const {ok} = await persistSettings(() => setLanguage(next), {silent: true});
+        if (!ok) i18n.changeLanguage(previous);
     };
 
     const handleFavoritePlatformChange = async (value) => {
         const platform = value === NO_FAVORITE ? null : value;
-        if (await runSave(() => saveFavoritePlatform(platform))) {
-            updateProfile((p) => ({...p, settings: {...p.settings, favoritePlatform: platform}}));
-            toast.success(t('SETTINGS.SAVED'));
-        }
+        const previous = profile?.settings?.favoritePlatform ?? null;
+        const setPlatform = (next) => updateProfile((p) => ({...p, settings: {...p.settings, favoritePlatform: next}}));
+        setPlatform(platform);
+        if (!await runSave(() => saveFavoritePlatform(platform))) setPlatform(previous);
     };
 
     return (
@@ -47,10 +41,6 @@ export default function PreferencesCard() {
                 <CardTitle className="flex items-center gap-2"><SlidersHorizontal className="size-4 text-primary"/>{t('SETTINGS.PREFERENCES')}</CardTitle>
             </CardHeader>
             <CardContent className="space-y-6">
-                <div className="flex items-center justify-between gap-4">
-                    <Label htmlFor="useDarkTheme">{t('SETTINGS.DARK_THEME')}</Label>
-                    <Switch id="useDarkTheme" checked={isDarkMode} onCheckedChange={handleDarkThemeToggle}/>
-                </div>
                 <div className="flex items-center justify-between gap-4">
                     <Label htmlFor="language">{t('SETTINGS.LANGUAGE')}</Label>
                     <Select value={i18n.language} onValueChange={handleLanguageChange}>

src/components/ProfileArtItems.jsx

@@ -0,0 +1,38 @@
+import {useState} from 'react';
+import {useTranslation} from 'react-i18next';
+
+import {DropdownMenuCheckboxItem, DropdownMenuLabel} from '@/components/ui/dropdown-menu';
+import useSaveProfileStyle from '../hooks/useSaveProfileStyle.js';
+
+/**
+ * Menu items to use the art of this Steam game as banner or background of the public profile; a checked item removes
+ * it again. Render inside a DropdownMenuContent.
+ *
+ * @param onSaved gets the whole saved style
+ */
+export default function ProfileArtItems({appid, style, onSaved}) {
+    const {t} = useTranslation();
+    const save = useSaveProfileStyle();
+    const [saving, setSaving] = useState(false);
+
+    const toggle = async (field) => {
+        setSaving(true);
+        const saved = await save((stored) => ({[field]: stored[field] === appid ? null : appid}), style);
+        if (saved) onSaved(saved);
+        setSaving(false);
+    };
+
+    return (
+        <>
+            <DropdownMenuLabel>{t('GAME_DETAIL.PROFILE_ART')}</DropdownMenuLabel>
+            <DropdownMenuCheckboxItem checked={style.bannerAppid === appid} disabled={saving}
+                                      onCheckedChange={() => toggle('bannerAppid')}>
+                {t('GAME_DETAIL.PROFILE_BANNER')}
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem checked={style.backgroundAppid === appid} disabled={saving}
+                                      onCheckedChange={() => toggle('backgroundAppid')}>
+                {t('GAME_DETAIL.PROFILE_BACKGROUND')}
+            </DropdownMenuCheckboxItem>
+        </>
+    );
+}

src/components/ProfileArtMenu.jsx

@@ -1,47 +0,0 @@
-import {useState} from 'react';
-import {useTranslation} from 'react-i18next';
-import {UserRound} from 'lucide-react';
-
-import {Button} from '@/components/ui/button';
-import {
-    DropdownMenu,
-    DropdownMenuCheckboxItem,
-    DropdownMenuContent,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import useSaveProfileStyle from '../hooks/useSaveProfileStyle.js';
-
-/**
- * Uses the art of this Steam game as banner or background of the public profile; a checked item removes it again.
- *
- * @param onSaved gets the whole saved style
- */
-export default function ProfileArtMenu({appid, style, onSaved}) {
-    const {t} = useTranslation();
-    const save = useSaveProfileStyle();
-    const [saving, setSaving] = useState(false);
-
-    const toggle = async (field) => {
-        setSaving(true);
-        const saved = await save((stored) => ({[field]: stored[field] === appid ? null : appid}), style);
-        if (saved) onSaved(saved);
-        setSaving(false);
-    };
-
-    return (
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="sm" disabled={saving}><UserRound/>{t('GAME_DETAIL.PROFILE_ART')}</Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
-                <DropdownMenuCheckboxItem checked={style.bannerAppid === appid} onCheckedChange={() => toggle('bannerAppid')}>
-                    {t('GAME_DETAIL.PROFILE_BANNER')}
-                </DropdownMenuCheckboxItem>
-                <DropdownMenuCheckboxItem checked={style.backgroundAppid === appid}
-                                          onCheckedChange={() => toggle('backgroundAppid')}>
-                    {t('GAME_DETAIL.PROFILE_BACKGROUND')}
-                </DropdownMenuCheckboxItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
-    );
-}

src/components/ProfileCard.jsx

@@ -3,7 +3,6 @@ import {useTranslation} from 'react-i18next';
 import {useForm} from 'react-hook-form';
 import {zodResolver} from '@hookform/resolvers/zod';
 import {Copy, Gamepad2, Loader2, Save} from 'lucide-react';
-import {toast} from 'sonner';
 
 import {Button} from '@/components/ui/button';
 import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
@@ -14,9 +13,11 @@ import FormField from './FormField.jsx';
 import ProfileStyleSettings from './ProfileStyleSettings.jsx';
 import {useCurrentUserContext} from '../context/CurrentUserContext.jsx';
 import usePersistSettings from '../hooks/usePersistSettings.js';
+import useCopyLink from '../hooks/useCopyLink.js';
+import useUnsavedChanges from '../hooks/useUnsavedChanges.js';
 import useSaveProfileStyle from '../hooks/useSaveProfileStyle.js';
 import {normalizeProfileStyle} from '../utils/profileStyle.js';
-import {saveSettings} from '../utils/settings.js';
+import {saveOwnerLists, saveSettings} from '../utils/settings.js';
 import {settingsSchema} from '../utils/validation.js';
 import {MAX_DISPLAY_NAME_LENGTH} from '../utils/limits.js';
 
@@ -25,24 +26,37 @@ export default function ProfileCard({displayName}) {
     const {t} = useTranslation();
     const {user: profile, updateUser: updateProfile} = useCurrentUserContext();
     const persistSettings = usePersistSettings();
+    const copyProfileLink = useCopyLink();
     const saveStyle = useSaveProfileStyle();
     const [savingProfileStyle, setSavingProfileStyle] = useState(false);
 
     const {
         register,
         handleSubmit,
-        formState: {errors, isSubmitting},
+        reset,
+        formState: {errors, isSubmitting, isDirty},
     } = useForm({
         resolver: zodResolver(settingsSchema),
         defaultValues: {displayName},
     });
 
-    const handlePublicProfileToggle = async () => {
+    useUnsavedChanges(isDirty);
+
+    const toggleSetting = async (key, next, save) => {
+        const show = (value) => updateProfile((p) => ({...p, settings: {...p.settings, [key]: value}}));
+        show(next);
+        const {ok} = await persistSettings(save, {silent: true});
+        if (!ok) show(!next);
+    };
+
+    const handlePublicProfileToggle = () => {
         const next = !profile?.settings?.publicProfile;
-        const result = await persistSettings(() => saveSettings({publicProfile: next}));
-        if (result.ok) {
-            updateProfile((p) => ({...p, settings: {...p.settings, publicProfile: next}}));
-        }
+        return toggleSetting('publicProfile', next, () => saveSettings({publicProfile: next}));
+    };
+
+    const handleOwnerListsToggle = () => {
+        const next = !profile?.settings?.showInOwnerLists;
+        return toggleSetting('showInOwnerLists', next, () => saveOwnerLists(next));
     };
 
     // Shown at once; the pickers wait for the answer, so the saves reach Auth one after the other.
@@ -55,21 +69,14 @@ export default function ProfileCard({displayName}) {
         setSavingProfileStyle(false);
     };
 
-    const copyProfileLink = async (link) => {
-        try {
-            await navigator.clipboard.writeText(link);
-            toast.success(t('SETTINGS.PUBLIC_PROFILE_COPIED'));
-        } catch {
-            toast.error(link);
-        }
-    };
-
     const onSubmitProfile = async (values) => {
         // Without a name the profile has no link, so removing the name also makes it private.
         const publicProfile = !!profile?.settings?.publicProfile && !!values.displayName;
         const result = await persistSettings(() => saveSettings({displayName: values.displayName, publicProfile}));
         if (result.ok) {
             updateProfile((p) => ({...p, displayName: values.displayName, settings: {...p.settings, publicProfile}}));
+            // The saved name is the new default, so the unsaved-changes guard lets go.
+            reset({displayName: values.displayName});
         }
     };
 
@@ -113,6 +120,14 @@ export default function ProfileCard({displayName}) {
                         <Switch id="publicProfile" checked={publicProfile} disabled={!profileLink}
                                 onCheckedChange={handlePublicProfileToggle}/>
                     </div>
+                    <div className="flex items-center justify-between gap-4">
+                        <div className="space-y-1">
+                            <Label htmlFor="ownerLists">{t('SETTINGS.OWNER_LISTS')}</Label>
+                            <p className="text-xs text-muted-foreground">{t('SETTINGS.OWNER_LISTS_HINT')}</p>
+                        </div>
+                        <Switch id="ownerLists" checked={publicProfile && !!profile?.settings?.showInOwnerLists}
+                                disabled={!publicProfile || !profileLink} onCheckedChange={handleOwnerListsToggle}/>
+                    </div>
                     {publicProfile && profileLink && (
                         <div className="flex items-center gap-2 rounded-md bg-muted px-3 py-2 text-sm">
                             <a href={profileLink} target="_blank" rel="noopener noreferrer"
@@ -130,7 +145,7 @@ export default function ProfileCard({displayName}) {
 
                 <div className="mt-6 border-t pt-6">
                     <ProfileStyleSettings style={normalizeProfileStyle(profile?.settings?.profileStyle)}
-                                          disabled={!publicProfile || savingProfileStyle}
+                                          privateProfile={!publicProfile} disabled={!publicProfile || savingProfileStyle}
                                           onChange={handleProfileStyleChange}/>
                 </div>
             </CardContent>

src/components/ProfileGameCard.jsx

@@ -0,0 +1,63 @@
+import {useEffect, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Trophy} from 'lucide-react';
+
+import {Card} from '@/components/ui/card';
+import FitText from './FitText.jsx';
+import GameCover from './GameCover.jsx';
+import GameStatusBadge from './GameStatusBadge.jsx';
+import {formatPlaytime} from '../utils/games.js';
+import {fetchProfileGame} from '../utils/people.js';
+
+/**
+ * One game of a public profile, above its tiles. Shows what the profile shares of it; a game the user hides or does
+ * not have gets one message.
+ */
+export default function ProfileGameCard({ticket, appid}) {
+    const {t, i18n} = useTranslation();
+    const [game, setGame] = useState(null);
+    const [missing, setMissing] = useState(false);
+
+    useEffect(() => {
+        let cancelled = false;
+        setGame(null);
+        setMissing(false);
+        (async () => {
+            const {ok, data} = await fetchProfileGame(ticket, appid);
+            if (cancelled) return;
+            if (ok) setGame(data);
+            else setMissing(true);
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [ticket, appid]);
+
+    if (missing) {
+        return <Card className="p-5 text-sm text-muted-foreground">{t('PROFILE.GAME_NOT_SHOWN')}</Card>;
+    }
+    if (!game) return null;
+
+    return (
+        <Card className="gap-4 p-5 sm:flex-row sm:items-center">
+            <GameCover appid={game.appid} imageUrl={game.imageUrl} className="w-full sm:w-56 sm:shrink-0"/>
+            <div className="min-w-0 flex-1 space-y-2">
+                <div className="@container text-lg font-semibold"><FitText text={game.name ?? `App ${game.appid}`}/></div>
+                <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
+                    {game.status && <GameStatusBadge status={game.status}/>}
+                    {game.playtimeMinutes != null && <span className="tabular-nums">{formatPlaytime(game.playtimeMinutes)}</span>}
+                    {game.achievementsTotal != null && (
+                        <span className="flex items-center gap-1 tabular-nums">
+                            <Trophy className="size-4 text-primary"/>
+                            {t('PROFILE.GAME_ACHIEVEMENTS', {
+                                unlocked: game.achievementsUnlocked,
+                                total: game.achievementsTotal,
+                                percent: game.completionPercent.toLocaleString(i18n.language),
+                            })}
+                        </span>
+                    )}
+                </div>
+            </div>
+        </Card>
+    );
+}

src/components/ProfileStyleSettings.jsx

@@ -33,15 +33,17 @@ function ArtRow({id, label, appid, onRemove, disabled}) {
  * page itself.
  *
  * @param disabled the profile is private, or a save runs
+ * @param privateProfile explains why the controls are disabled
  * @param onChange gets the changed fields only
  */
-export default function ProfileStyleSettings({style, disabled, onChange}) {
+export default function ProfileStyleSettings({style, disabled, privateProfile, onChange}) {
     const {t} = useTranslation();
     return (
         <div className="space-y-6">
             <div className="space-y-1">
                 <span className="text-sm font-medium">{t('SETTINGS.PROFILE_STYLE')}</span>
                 <p className="text-xs text-muted-foreground">{t('SETTINGS.PROFILE_STYLE_HINT')}</p>
+                {privateProfile && <p className="text-xs text-muted-foreground">{t('SETTINGS.PROFILE_STYLE_PRIVATE')}</p>}
             </div>
             <AccentPicker id="profile-accent" value={style.accent} disabled={disabled}
                           onChange={(accent) => onChange({accent})}/>

src/components/ProfileStyleSettings.test.jsx

@@ -0,0 +1,24 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen} from '@testing-library/react';
+import ProfileStyleSettings from './ProfileStyleSettings.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+afterEach(cleanup);
+
+const style = {accent: 'violet', corners: 'default', bannerAppid: null, backgroundAppid: null};
+
+describe('ProfileStyleSettings', () => {
+    it('aPrivateProfile_SaysWhyTheControlsAreDisabled', () => {
+        render(<ProfileStyleSettings style={style} disabled privateProfile onChange={vi.fn()}/>);
+
+        expect(screen.getByText('SETTINGS.PROFILE_STYLE_PRIVATE')).toBeTruthy();
+    });
+
+    it('aPublicProfile_ShowsNoExplanation', () => {
+        render(<ProfileStyleSettings style={style} disabled={false} privateProfile={false} onChange={vi.fn()}/>);
+
+        expect(screen.queryByText('SETTINGS.PROFILE_STYLE_PRIVATE')).toBeNull();
+    });
+});

src/components/PsnAccountCard.jsx

@@ -0,0 +1,138 @@
+import {useState} from 'react';
+import {Link} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+import {Gamepad, Link2, Loader2} from 'lucide-react';
+import {toast} from 'sonner';
+
+import {Button} from '@/components/ui/button';
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {Input} from '@/components/ui/input';
+import UnlinkDialog from './UnlinkDialog.jsx';
+import usePsnAccount from '../hooks/usePsnAccount.js';
+import {formatDate} from '../utils/format.js';
+import {isExpired, linkPsn, NPSSO_PAGE_URL, unlinkPsn} from '../utils/psn.js';
+
+/**
+ * The linked PlayStation account. The user pastes an NPSSO once; Core keeps only an encrypted token for about 10 days,
+ * so the card shows when the link ends. Linking starts a sync; titles the sync could not match wait in an import review.
+ */
+export default function PsnAccountCard() {
+    const {t, i18n} = useTranslation();
+    const {account, setAccount, failed} = usePsnAccount();
+    const [npsso, setNpsso] = useState('');
+    const [busy, setBusy] = useState(false);
+
+    const link = async (event) => {
+        event.preventDefault();
+        setBusy(true);
+        try {
+            const response = await linkPsn(npsso.trim());
+            if (response.status === 401) return;
+            if (response.ok) {
+                setAccount(await response.json());
+                toast.success(t('SETTINGS.PSN.LINKED'));
+            } else if (response.status === 400) {
+                toast.error(t('SETTINGS.PSN.INVALID'));
+            } else if (response.status === 429) {
+                toast.error(t('SETTINGS.PSN.BUSY'));
+            } else if (response.status === 502) {
+                toast.error(t('SETTINGS.PSN.UNAVAILABLE'));
+            } else if (response.status === 503) {
+                setAccount((old) => ({...old, enabled: false}));
+            } else {
+                toast.error(t('SETTINGS.PSN.ERROR'));
+            }
+        } catch (err) {
+            console.error('PSN link error:', err);
+            toast.error(t('SETTINGS.PSN.ERROR'));
+        } finally {
+            // The NPSSO is a session secret: it does not stay in the page after any answer.
+            setNpsso('');
+            setBusy(false);
+        }
+    };
+
+    const unlink = async () => {
+        setBusy(true);
+        try {
+            const response = await unlinkPsn();
+            if (response.status === 401) return;
+            if (!response.ok) {
+                toast.error(t('SETTINGS.PSN.ERROR'));
+                return;
+            }
+            setAccount((old) => ({...old, linked: false, linkedAt: null, expiresAt: null}));
+            toast.success(t('SETTINGS.PSN.UNLINKED'));
+        } catch (err) {
+            console.error('PSN unlink error:', err);
+            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const expired = isExpired(account);
+    const form = <NpssoForm npsso={npsso} onChange={setNpsso} onSubmit={link} busy={busy}/>;
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="flex items-center gap-2"><Gamepad className="size-4 text-primary"/>{t('SETTINGS.PSN.TITLE')}</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                {failed ? (
+                    <p className="text-sm text-destructive">{t('SETTINGS.PSN.ERROR')}</p>
+                ) : !account ? (
+                    <Loader2 className="animate-spin text-muted-foreground"/>
+                ) : !account.enabled ? (
+                    <p className="text-sm text-muted-foreground">{t('SETTINGS.PSN.OFF')}</p>
+                ) : !account.linked ? form : (
+                    <>
+                        <div className="space-y-1 text-sm">
+                            <p>{t('SETTINGS.PSN.LINKED_SINCE', {date: formatDate(account.linkedAt, i18n.language, {dateStyle: 'medium'})})}</p>
+                            <p className={expired ? 'font-medium text-destructive' : undefined}>
+                                {t('SETTINGS.PSN.EXPIRES_ON', {date: formatDate(account.expiresAt, i18n.language, {dateStyle: 'medium'})})}
+                                {expired && <> · {t('SETTINGS.PSN.EXPIRED')}</>}
+                            </p>
+                        </div>
+                        <p className="text-sm text-muted-foreground">{t('SETTINGS.PSN.SYNC_HINT')}</p>
+                        {expired && form}
+                        <div className="flex flex-wrap gap-2">
+                            {account.reviewImportId && (
+                                <Button asChild variant="outline">
+                                    <Link to={`/import?id=${account.reviewImportId}`}>{t('SETTINGS.PSN.REVIEW')}</Link>
+                                </Button>
+                            )}
+                            <UnlinkDialog label={t('SETTINGS.PSN.UNLINK')} title={t('SETTINGS.PSN.UNLINK_TITLE')}
+                                          description={t('SETTINGS.PSN.UNLINK_EXPLAIN')}
+                                          confirmLabel={t('SETTINGS.PSN.UNLINK_CONFIRM')} onConfirm={unlink} disabled={busy}/>
+                        </div>
+                    </>
+                )}
+            </CardContent>
+        </Card>
+    );
+}
+
+function NpssoForm({npsso, onChange, onSubmit, busy}) {
+    const {t} = useTranslation();
+
+    return (
+        <form onSubmit={onSubmit} className="space-y-3">
+            <ol className="list-decimal space-y-1 pl-5 text-sm">
+                <li>{t('SETTINGS.PSN.STEPS_1')}</li>
+                <li>
+                    {t('SETTINGS.PSN.STEPS_2')}{' '}
+                    <a href={NPSSO_PAGE_URL} target="_blank" rel="noopener noreferrer" className="break-all underline">{NPSSO_PAGE_URL}</a>
+                </li>
+                <li>{t('SETTINGS.PSN.STEPS_3')}</li>
+            </ol>
+            <p className="text-sm text-muted-foreground">{t('SETTINGS.PSN.WHAT_IT_GIVES')}</p>
+            <Input type="password" autoComplete="off" spellCheck={false} maxLength={128} value={npsso}
+                   aria-label={t('SETTINGS.PSN.NPSSO_LABEL')} onChange={(e) => onChange(e.target.value)}/>
+            <Button type="submit" disabled={busy || !npsso.trim()}>
+                {busy ? <Loader2 className="animate-spin"/> : <Link2/>}{t('SETTINGS.PSN.LINK')}
+            </Button>
+        </form>
+    );
+}

src/components/PsnAccountCard.test.jsx

@@ -0,0 +1,148 @@
+// @vitest-environment jsdom
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, fireEvent, screen, waitFor} from '@testing-library/react';
+import {toast} from 'sonner';
+import PsnAccountCard from './PsnAccountCard.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+import {renderWithProviders} from '../test/renderWithProviders.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn(), info: vi.fn()}}));
+
+const NPSSO = 'npsso-secret-value';
+const noBody = {ok: true, status: 204, json: async () => { throw new SyntaxError('no body'); }};
+const linkedAccount = (expiresAt, reviewImportId = null) =>
+    ({enabled: true, linked: true, linkedAt: '2026-10-01T10:00:00Z', expiresAt, reviewImportId});
+const inDays = (days) => new Date(Date.now() + days * 86_400_000).toISOString();
+
+const calls = (method) => fetch.mock.calls.filter(([, init]) => init?.method === method);
+
+function renderCard(routes) {
+    fetchRoutes({
+        'GET /api/users/me': json(200, {settings: {}}),
+        'GET /api/library/psn-account': json(200, {enabled: true, linked: false}),
+        ...routes,
+    });
+    return renderWithProviders(<PsnAccountCard/>, {path: '/settings', entries: ['/settings']});
+}
+
+const paste = async (value = NPSSO) => {
+    const input = await screen.findByLabelText('SETTINGS.PSN.NPSSO_LABEL');
+    fireEvent.change(input, {target: {value}});
+    fireEvent.click(screen.getByRole('button', {name: /SETTINGS.PSN.LINK/}));
+    return input;
+};
+
+beforeEach(() => localStorage.setItem('tbp_session', '1'));
+
+afterEach(() => {
+    cleanup();
+    localStorage.clear();
+    vi.clearAllMocks();
+});
+
+describe('PsnAccountCard', () => {
+    it('says the feature is off when Core has no key', async () => {
+        renderCard({'GET /api/library/psn-account': json(200, {enabled: false, linked: false})});
+
+        expect(await screen.findByText('SETTINGS.PSN.OFF')).toBeTruthy();
+        expect(screen.queryByLabelText('SETTINGS.PSN.NPSSO_LABEL')).toBeNull();
+    });
+
+    it('explains the NPSSO and takes it in a password field', async () => {
+        renderCard({});
+
+        const input = await screen.findByLabelText('SETTINGS.PSN.NPSSO_LABEL');
+
+        expect(input.getAttribute('type')).toBe('password');
+        expect(input.getAttribute('autocomplete')).toBe('off');
+        expect(screen.getByText('SETTINGS.PSN.WHAT_IT_GIVES')).toBeTruthy();
+        expect(screen.getByRole('link', {name: /ssocookie/}).getAttribute('rel')).toContain('noopener');
+    });
+
+    it('links, shows both dates and never shows the NPSSO again', async () => {
+        renderCard({'POST /api/library/psn-account': json(200, linkedAccount(inDays(10)))});
+
+        const input = await paste();
+
+        expect(await screen.findByText('SETTINGS.PSN.LINKED_SINCE')).toBeTruthy();
+        expect(screen.getByText('SETTINGS.PSN.EXPIRES_ON')).toBeTruthy();
+        expect(screen.getByText('SETTINGS.PSN.SYNC_HINT')).toBeTruthy();
+        expect(screen.queryByRole('link', {name: /SETTINGS.PSN.IMPORT/})).toBeNull();
+        expect(JSON.parse(calls('POST')[0][1].body)).toEqual({npsso: NPSSO});
+        expect(document.body.innerHTML).not.toContain(NPSSO);
+        expect(input.isConnected && input.value).toBeFalsy();
+        expect(toast.success).toHaveBeenCalledWith('SETTINGS.PSN.LINKED');
+    });
+
+    it('shows a toast for a refused NPSSO and clears the input', async () => {
+        renderCard({'POST /api/library/psn-account': json(400, {code: 'NPSSO_INVALID'})});
+
+        const input = await paste();
+
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith('SETTINGS.PSN.INVALID'));
+        expect(input.value).toBe('');
+        expect(document.body.innerHTML).not.toContain(NPSSO);
+    });
+
+    it.each([[429, 'SETTINGS.PSN.BUSY'], [502, 'SETTINGS.PSN.UNAVAILABLE'], [500, 'SETTINGS.PSN.ERROR']])('shows a toast for status %i', async (status, key) => {
+        renderCard({'POST /api/library/psn-account': json(status, {})});
+
+        await paste();
+
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith(key));
+    });
+
+    it('marks an ended link in red and asks for a new NPSSO', async () => {
+        renderCard({'GET /api/library/psn-account': json(200, linkedAccount(inDays(-1)))});
+
+        expect(await screen.findByText(/SETTINGS.PSN.EXPIRED/)).toBeTruthy();
+        expect(screen.getByText(/SETTINGS.PSN.EXPIRES_ON/).className).toContain('text-destructive');
+        expect(screen.getByLabelText('SETTINGS.PSN.NPSSO_LABEL')).toBeTruthy();
+        expect(screen.queryByRole('link', {name: /SETTINGS.PSN.REVIEW/})).toBeNull();
+    });
+
+    it('links to the review only when titles wait in one', async () => {
+        renderCard({'GET /api/library/psn-account': json(200, linkedAccount(inDays(5), 42))});
+
+        expect(await screen.findByRole('link', {name: 'SETTINGS.PSN.REVIEW'})).toBeTruthy();
+        expect(screen.getByRole('link', {name: 'SETTINGS.PSN.REVIEW'}).getAttribute('href')).toBe('/import?id=42');
+    });
+
+    it('has no review link and no import button without a waiting review', async () => {
+        renderCard({'GET /api/library/psn-account': json(200, linkedAccount(inDays(5)))});
+
+        await screen.findByText('SETTINGS.PSN.SYNC_HINT');
+
+        expect(screen.queryByRole('link')).toBeNull();
+        expect(screen.queryByText('SETTINGS.PSN.IMPORT')).toBeNull();
+    });
+
+    it('asks before it unlinks and sends nothing on cancel', async () => {
+        renderCard({'GET /api/library/psn-account': json(200, linkedAccount(inDays(5)))});
+
+        fireEvent.click(await screen.findByRole('button', {name: 'SETTINGS.PSN.UNLINK'}));
+
+        expect(await screen.findByText('SETTINGS.PSN.UNLINK_EXPLAIN')).toBeTruthy();
+        expect(calls('DELETE')).toHaveLength(0);
+
+        fireEvent.click(screen.getByRole('button', {name: 'DIALOG.CANCEL'}));
+
+        await waitFor(() => expect(screen.queryByText('SETTINGS.PSN.UNLINK_EXPLAIN')).toBeNull());
+        expect(calls('DELETE')).toHaveLength(0);
+    });
+
+    it('unlinks after the confirmation and shows the link form again', async () => {
+        renderCard({
+            'GET /api/library/psn-account': json(200, linkedAccount(inDays(5))),
+            'DELETE /api/library/psn-account': noBody,
+        });
+
+        fireEvent.click(await screen.findByRole('button', {name: 'SETTINGS.PSN.UNLINK'}));
+        fireEvent.click(await screen.findByRole('button', {name: 'SETTINGS.PSN.UNLINK_CONFIRM'}));
+
+        expect(await screen.findByLabelText('SETTINGS.PSN.NPSSO_LABEL')).toBeTruthy();
+        expect(toast.success).toHaveBeenCalledWith('SETTINGS.PSN.UNLINKED');
+        expect(calls('DELETE')).toHaveLength(1);
+    });
+});

src/components/QuestionCard.jsx

@@ -0,0 +1,77 @@
+import {Link} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import {cn} from '@/lib/utils';
+import FitText from './FitText.jsx';
+import GameCover from './GameCover.jsx';
+import RatingStars from './RatingStars.jsx';
+import {formatDate} from '../utils/format.js';
+import {formatPlaytime} from '../utils/games.js';
+
+// Only START and FINISHED earn points.
+const pointsText = (question, expectedPoints, t) => {
+    if (question === 'START') return t('QUESTIONS.START.POINTS');
+    if (question !== 'FINISHED') return null;
+    return expectedPoints > 0 ? t('QUESTIONS.FINISHED.POINTS', {count: expectedPoints}) : t('QUESTIONS.POINTS_PENDING');
+};
+
+/**
+ * One open question of one game. The page decides what an answer does.
+ *
+ * @param item a result of `GET /api/library/questions`
+ * @param busy true while an answer is on its way
+ * @param expectedPoints the points a finish would pay (`GET /api/rewards/expected`), absent or 0 shows "points by time to beat"
+ * @param onAnswer `({yes, rating?})`; a yes to the rating question comes with the stars
+ */
+export default function QuestionCard({item, busy, expectedPoints, onAnswer}) {
+    const {t, i18n} = useTranslation();
+    const {appid, name, imageUrl, question, playtimeMinutes, normallyMinutes, lastActivity} = item;
+    const reasonKey = question === 'FINISHED' && normallyMinutes > 0 ? 'FINISHED.REASON_TTB' : `${question}.REASON`;
+    const reason = t(`QUESTIONS.${reasonKey}`, {
+        playtime: formatPlaytime(playtimeMinutes),
+        ttb: formatPlaytime(normallyMinutes),
+        date: lastActivity ? formatDate(lastActivity, i18n.language) : '',
+    });
+    const askId = `question-${appid}`;
+    const points = pointsText(question, expectedPoints, t);
+
+    return (
+        <Card className="flex-row items-start gap-3 p-4">
+            <Link to={`/library/${appid}`} className="w-16 shrink-0 sm:w-24">
+                <GameCover appid={appid} imageUrl={imageUrl}/>
+            </Link>
+            <div className="min-w-0 flex-1 space-y-2">
+                <Link to={`/library/${appid}`} className="@container block min-w-0 font-medium hover:text-primary">
+                    <FitText text={name ?? `App ${appid}`}/>
+                </Link>
+                <p id={askId} className="text-base font-semibold">{t(`QUESTIONS.${question}.ASK`)}</p>
+                <p className="text-sm text-muted-foreground">{reason}</p>
+                <p className={cn('text-sm font-medium', points ? 'text-primary' : 'text-muted-foreground')}>
+                    {points ?? t('QUESTIONS.NO_POINTS')}
+                </p>
+                {question === 'RATE' ? (
+                    <div className="flex flex-wrap items-center gap-2">
+                        <RatingStars value={0} labelledBy={askId} disabled={busy}
+                                     onChange={(rating) => onAnswer({yes: true, rating})}/>
+                        <Button type="button" variant="outline" size="sm" disabled={busy}
+                                onClick={() => onAnswer({yes: false})}>
+                            {t('QUESTIONS.SKIP')}
+                        </Button>
+                    </div>
+                ) : (
+                    <div className="flex flex-wrap gap-2">
+                        <Button type="button" size="sm" disabled={busy} onClick={() => onAnswer({yes: true})}>
+                            {t('QUESTIONS.YES')}
+                        </Button>
+                        <Button type="button" variant="outline" size="sm" disabled={busy}
+                                onClick={() => onAnswer({yes: false})}>
+                            {t('QUESTIONS.NO')}
+                        </Button>
+                    </div>
+                )}
+            </div>
+        </Card>
+    );
+}

src/components/QuestionCard.test.jsx

@@ -0,0 +1,77 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, fireEvent, render, screen} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import QuestionCard from './QuestionCard.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+afterEach(cleanup);
+
+const item = (overrides) => ({appid: 10, name: 'Hades', imageUrl: null, question: 'RATE', status: 'FINISHED',
+    playtimeMinutes: 1500, normallyMinutes: null, lastActivity: null, ...overrides});
+
+const renderCard = (props, onAnswer = vi.fn()) => {
+    render(<MemoryRouter><QuestionCard item={item(props)} busy={false} onAnswer={onAnswer}/></MemoryRouter>);
+    return onAnswer;
+};
+
+describe('QuestionCard', () => {
+    it('sendsTheStarsAsARating', () => {
+        const onAnswer = renderCard();
+
+        fireEvent.click(screen.getByRole('button', {name: 'BACKLOG.RATING_STARS:4'}));
+
+        expect(onAnswer).toHaveBeenCalledWith({yes: true, rating: 4});
+    });
+
+    it('sendsNoForSkip', () => {
+        const onAnswer = renderCard();
+
+        fireEvent.click(screen.getByRole('button', {name: 'QUESTIONS.SKIP'}));
+
+        expect(onAnswer).toHaveBeenCalledWith({yes: false});
+    });
+
+    it('answersYesAndNoWithoutARating', () => {
+        const onAnswer = renderCard({question: 'START', status: 'BACKLOG'});
+
+        fireEvent.click(screen.getByRole('button', {name: 'QUESTIONS.YES'}));
+        fireEvent.click(screen.getByRole('button', {name: 'QUESTIONS.NO'}));
+
+        expect(onAnswer.mock.calls).toEqual([[{yes: true}], [{yes: false}]]);
+        expect(screen.queryByRole('button', {name: 'QUESTIONS.SKIP'})).toBeNull();
+    });
+
+    it('linksTheNameToTheGamePage', () => {
+        renderCard();
+
+        expect(screen.getByRole('link', {name: 'Hades'}).getAttribute('href')).toBe('/library/10');
+    });
+
+    describe('points line', () => {
+        const renderWithPoints = (props, expectedPoints) => render(
+            <MemoryRouter><QuestionCard item={item(props)} busy={false} expectedPoints={expectedPoints} onAnswer={vi.fn()}/></MemoryRouter>);
+
+        it('start_ShowsThePointsOfAStart', () => {
+            renderWithPoints({question: 'START'});
+
+            expect(screen.getByText('QUESTIONS.START.POINTS')).toBeTruthy();
+        });
+
+        it('finished_ShowsTheExpectedPointsOrThePendingText', () => {
+            const {unmount} = renderWithPoints({question: 'FINISHED'}, 40);
+            expect(screen.getByText('QUESTIONS.FINISHED.POINTS:40')).toBeTruthy();
+            unmount();
+
+            renderWithPoints({question: 'FINISHED'}, 0);
+            expect(screen.getByText('QUESTIONS.POINTS_PENDING')).toBeTruthy();
+        });
+
+        it.each(['DROPPED', 'RATE'])('%s_SaysThereAreNoPoints', (question) => {
+            renderWithPoints({question});
+
+            expect(screen.getByText('QUESTIONS.NO_POINTS')).toBeTruthy();
+        });
+    });
+});

src/components/RatingStars.jsx

@@ -0,0 +1,42 @@
+import {useTranslation} from 'react-i18next';
+import {Star} from 'lucide-react';
+
+import {cn} from '@/lib/utils';
+
+/**
+ * Five star buttons. Clicking the chosen star again sends 0, so the parent decides what that means.
+ *
+ * @param value 0 for no rating
+ * @param labelledBy id of the element that names the group
+ * @param readOnly shows the stars as one image, without buttons
+ */
+export default function RatingStars({value, onChange, labelledBy, disabled, readOnly}) {
+    const {t} = useTranslation();
+    if (readOnly) {
+        return (
+            <span role="img" aria-label={t('BACKLOG.RATING_STARS', {count: value})} className="inline-flex gap-0.5">
+                {[1, 2, 3, 4, 5].map((n) => (
+                    <Star key={n} className={cn('size-3.5', n <= value ? 'fill-amber-400 text-amber-400' : 'text-muted-foreground/40')}/>
+                ))}
+            </span>
+        );
+    }
+    return (
+        <div role="group" aria-labelledby={labelledBy} className="flex h-9 items-center gap-1">
+            {[1, 2, 3, 4, 5].map((n) => (
+                <button
+                    key={n}
+                    type="button"
+                    disabled={disabled}
+                    aria-label={t('BACKLOG.RATING_STARS', {count: n})}
+                    aria-pressed={value === n}
+                    onClick={() => onChange(value === n ? 0 : n)}
+                    className="rounded-sm p-0.5 pointer-coarse:size-11 pointer-coarse:p-2.5 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                >
+                    <Star className={cn('size-6 transition-colors',
+                        n <= value ? 'fill-amber-400 text-amber-400' : 'text-muted-foreground/40 hover:text-amber-400')}/>
+                </button>
+            ))}
+        </div>
+    );
+}

src/components/RemovedGamesList.jsx

@@ -0,0 +1,77 @@
+import {useEffect, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {Loader2} from 'lucide-react';
+import {toast} from 'sonner';
+
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import GameCover from './GameCover.jsx';
+import {fetchRemovedGames, restoreGame} from '../utils/manualGames.js';
+
+/**
+ * The games the user removed, one Restore button each: the "Removed" filter of the library. A list that does not load
+ * looks empty, like a list without games.
+ */
+export default function RemovedGamesList() {
+    const {t} = useTranslation();
+    const [games, setGames] = useState(null);
+    const [busy, setBusy] = useState(false);
+
+    useEffect(() => {
+        let active = true;
+        fetchRemovedGames().then(({ok, data}) => {
+            if (active) setGames(ok ? data.results : []);
+        });
+        return () => {
+            active = false;
+        };
+    }, []);
+
+    const restore = async (appid) => {
+        setBusy(true);
+        try {
+            const response = await restoreGame(appid);
+            if (response.status === 401) return;
+            if (response.ok || response.status === 404) {
+                setGames((current) => current.filter((game) => game.appid !== appid));
+                if (response.ok) toast.success(t('REMOVED_GAMES.RESTORED'));
+            } else {
+                toast.error(t('BACKLOG.SAVE_FAILED'));
+            }
+        } catch (err) {
+            console.error('restore error:', err);
+            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    if (!games) return <Loader2 className="size-5 animate-spin text-muted-foreground"/>;
+    return (
+        <div className="space-y-3">
+            <p className="text-sm text-muted-foreground">{t('REMOVED_GAMES.HINT')}</p>
+            {games.length === 0 ? (
+                <p className="text-sm text-muted-foreground">{t('LIBRARY.NO_REMOVED')}</p>
+            ) : (
+                <Card className="py-0">
+                    <ul className="divide-y">
+                        {games.map((game) => (
+                            <li key={game.appid} className="flex items-center gap-3 p-3">
+                                <div className="w-16 shrink-0">
+                                    <GameCover appid={game.appid} imageUrl={game.imageUrl}/>
+                                </div>
+                                <div className="min-w-0 flex-1">
+                                    <p className="truncate font-medium">{game.name ?? `App ${game.appid}`}</p>
+                                    {game.platform && <p className="text-sm text-muted-foreground">{game.platform}</p>}
+                                </div>
+                                <Button type="button" size="sm" variant="outline" disabled={busy} onClick={() => restore(game.appid)}>
+                                    {t('REMOVED_GAMES.RESTORE')}
+                                </Button>
+                            </li>
+                        ))}
+                    </ul>
+                </Card>
+            )}
+        </div>
+    );
+}

src/components/RemovedGamesList.test.jsx

@@ -0,0 +1,80 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
+import {MemoryRouter} from 'react-router-dom';
+import {toast} from 'sonner';
+import RemovedGamesList from './RemovedGamesList.jsx';
+import {fetchRoutes, json} from '../test/fetchRoutes.js';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+vi.mock('sonner', () => ({toast: {success: vi.fn(), error: vi.fn()}}));
+
+const removed = (appid, name) => ({appid, name, imageUrl: null, source: 'MANUAL', platform: 'Switch', removedAt: '2026-10-10T10:00:00Z'});
+const LIST = 'GET /api/library/removed-games';
+
+const renderSection = (routes) => {
+    fetchRoutes(routes);
+    return render(<MemoryRouter><RemovedGamesList/></MemoryRouter>);
+};
+
+afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+});
+
+describe('RemovedGamesList', () => {
+    it('listsTheGamesWithTheHint', async () => {
+        renderSection({[LIST]: json(200, {results: [removed(-1, 'Zelda'), removed(-2, 'Mario')]})});
+
+        expect(await screen.findByText('Zelda')).toBeTruthy();
+        expect(screen.getByText('Mario')).toBeTruthy();
+        expect(screen.getByText('REMOVED_GAMES.HINT')).toBeTruthy();
+        expect(screen.queryByText('LIBRARY.NO_REMOVED')).toBeNull();
+    });
+
+    it('showsNoLinkToTheGamePage', async () => {
+        renderSection({[LIST]: json(200, {results: [removed(-1, 'Zelda')]})});
+        await screen.findByText('Zelda');
+
+        expect(screen.queryByRole('link')).toBeNull();
+    });
+
+    it('restoresAGameAndDropsItsRow', async () => {
+        renderSection({
+            [LIST]: json(200, {results: [removed(-1, 'Zelda'), removed(-2, 'Mario')]}),
+            'POST /api/library/games/-1/restore': json(204, null),
+        });
+        await screen.findByText('Zelda');
+
+        fireEvent.click(screen.getAllByRole('button', {name: 'REMOVED_GAMES.RESTORE'})[0]);
+
+        await waitFor(() => expect(screen.queryByText('Zelda')).toBeNull());
+        expect(screen.getByText('Mario')).toBeTruthy();
+        expect(toast.success).toHaveBeenCalledWith('REMOVED_GAMES.RESTORED');
+    });
+
+    it('showsAnErrorAndKeepsTheRowWhenTheRestoreFails', async () => {
+        renderSection({
+            [LIST]: json(200, {results: [removed(-1, 'Zelda')]}),
+            'POST /api/library/games/-1/restore': json(500, {}),
+        });
+        await screen.findByText('Zelda');
+
+        fireEvent.click(screen.getByRole('button', {name: 'REMOVED_GAMES.RESTORE'}));
+
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith('BACKLOG.SAVE_FAILED'));
+        expect(screen.getByText('Zelda')).toBeTruthy();
+    });
+
+    it('saysSoForAnEmptyList', async () => {
+        renderSection({[LIST]: json(200, {results: []})});
+
+        expect(await screen.findByText('LIBRARY.NO_REMOVED')).toBeTruthy();
+    });
+
+    it('saysSoWhenTheListFails', async () => {
+        renderSection({[LIST]: json(500, {})});
+
+        expect(await screen.findByText('LIBRARY.NO_REMOVED')).toBeTruthy();
+    });
+});

src/components/SearchHitCard.jsx

@@ -0,0 +1,69 @@
+import {useEffect, useState} from 'react';
+import {useNavigate} from 'react-router-dom';
+import {useTranslation} from 'react-i18next';
+import {ArrowLeft, Plus} from 'lucide-react';
+
+import {Button} from '@/components/ui/button';
+import {Card} from '@/components/ui/card';
+import {AddForm} from './AddGamePanel.jsx';
+import FitText from './FitText.jsx';
+import GameCover from './GameCover.jsx';
+import TimeToBeat from './TimeToBeat.jsx';
+import {useCurrentUserContext} from '../context/CurrentUserContext.jsx';
+import {fetchPreview} from '../utils/catalog.js';
+import {hitTitle} from '../utils/manualGames.js';
+
+/**
+ * A search hit the user does not have: what the hit says, genres and time to beat when the catalog knows the game,
+ * and the add form behind an "Add" button.
+ */
+export default function SearchHitCard({hit, onBack}) {
+    const {t} = useTranslation();
+    const navigate = useNavigate();
+    const {user} = useCurrentUserContext();
+    const favorite = user?.settings?.favoritePlatform ?? null;
+    const [preview, setPreview] = useState(null);
+    const [adding, setAdding] = useState(false);
+
+    useEffect(() => {
+        let cancelled = false;
+        setPreview(null);
+        if (!hit.inCatalog) return undefined;
+        (async () => {
+            const {ok, data} = await fetchPreview(hit.appid);
+            if (!cancelled && ok && data) setPreview(data);
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [hit.appid, hit.inCatalog]);
+
+    return (
+        <Card className="gap-4 p-5">
+            {adding ? (
+                <AddForm hit={hit} favorite={favorite} onBack={onBack} navigate={navigate}/>
+            ) : (
+                <div className="flex flex-col gap-4 md:flex-row md:items-start">
+                    <GameCover appid={hit.appid} imageUrl={hit.imageUrl} className="w-full md:w-72 md:shrink-0"/>
+                    <div className="min-w-0 flex-1 space-y-3">
+                        <h1 className="@container text-2xl font-bold">
+                            <FitText text={hitTitle(hit)}/>
+                        </h1>
+                        {hit.platforms.length > 0 && (
+                            <p className="text-sm text-muted-foreground">{hit.platforms.join(' · ')}</p>
+                        )}
+                        {preview?.genres?.length > 0 && (
+                            <p className="text-sm text-muted-foreground">{preview.genres.join(', ')}</p>
+                        )}
+                        {preview && <TimeToBeat time={preview.timeToBeat}/>}
+                        <p className="text-sm text-muted-foreground">{t('CATALOG.NOT_IN_LIBRARY')}</p>
+                        <div className="flex flex-wrap gap-2">
+                            <Button variant="ghost" onClick={onBack}><ArrowLeft/>{t('MANUAL_GAME.BACK_TO_SEARCH')}</Button>
+                            <Button onClick={() => setAdding(true)}><Plus/>{t('CATALOG.ADD')}</Button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </Card>
+    );
+}

src/components/StatCard.jsx

@@ -2,14 +2,15 @@ import {useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 
 import {Card} from '@/components/ui/card';
+import useReducedMotion from '../hooks/useReducedMotion.js';
 import {useDrillTarget} from './stats/StatDrill.jsx';
 
-function useCountUp(target, durationMs = 1600) {
+function useCountUp(target, instant, durationMs = 1600) {
     const [value, setValue] = useState(0);
     useEffect(() => {
         const safeTarget = typeof target === 'number' && Number.isFinite(target) ? target : 0;
-        if (safeTarget === 0) {
-            setValue(0);
+        if (instant || safeTarget === 0) {
+            setValue(safeTarget);
             return;
         }
         let raf;
@@ -22,17 +23,19 @@ function useCountUp(target, durationMs = 1600) {
         };
         raf = requestAnimationFrame(step);
         return () => cancelAnimationFrame(raf);
-    }, [target, durationMs]);
+    }, [target, instant, durationMs]);
     return value;
 }
 
 /**
  * @param drill `{params}` of StatCount: the card is a button that opens the games behind the number
+ * @param onClick used when there is no drill target
  */
-export default function StatCard({label, value, icon: Icon, suffix, drill}) {
+export default function StatCard({label, value, icon: Icon, suffix, drill, onClick}) {
     const {i18n} = useTranslation();
-    const animated = useCountUp(value);
-    const target = useDrillTarget({title: label, count: value, ...drill});
+    const reduce = useReducedMotion();
+    const animated = useCountUp(value, reduce);
+    const target = useDrillTarget({title: label, count: value, ...drill}) ?? (onClick && {onClick});
     const card = (
         <Card className="gap-3 p-5">
             {Icon && (

src/components/StatCard.test.jsx

@@ -0,0 +1,26 @@
+// @vitest-environment jsdom
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {cleanup, render, screen} from '@testing-library/react';
+import StatCard from './StatCard.jsx';
+
+vi.mock('react-i18next', () => import('../test/i18n-mock.js'));
+
+afterEach(() => {
+    cleanup();
+    delete document.documentElement.dataset.reduceMotion;
+});
+
+describe('StatCard', () => {
+    it('shows the final number at once when the user wants reduced motion', () => {
+        document.documentElement.dataset.reduceMotion = 'true';
+        render(<StatCard label="Games" value={1234}/>);
+
+        expect(screen.getByText('1.234')).toBeTruthy();
+    });
+
+    it('counts up from 0 otherwise', () => {
+        render(<StatCard label="Games" value={1234}/>);
+
+        expect(screen.getByText('0')).toBeTruthy();
+    });
+});

src/components/StatusMenu.jsx

@@ -0,0 +1,48 @@
+import {useTranslation} from 'react-i18next';
+import {ChevronDown} from 'lucide-react';
+
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {cn} from '@/lib/utils';
+import GameStatusBadge, {STATUS_META} from './GameStatusBadge.jsx';
+import {GAME_STATUSES} from '../utils/limits.js';
+
+/**
+ * The status badge as a menu: choosing another status calls `onSelect(status)`; the current one does nothing.
+ *
+ * @param busy disables the trigger while a save runs
+ * @param compact see GameStatusBadge
+ */
+export default function StatusMenu({status, onSelect, busy, compact, className}) {
+    const {t} = useTranslation();
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <button type="button" disabled={busy}
+                        aria-label={`${t('BACKLOG.STATUS_LABEL')}: ${t(`BACKLOG.STATUS.${status}`)}`}
+                        className={cn('inline-flex items-center gap-1 rounded-md outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50 pointer-coarse:min-h-11', className)}>
+                    <GameStatusBadge status={status} compact={compact}/>
+                    <ChevronDown className="size-3 text-muted-foreground"/>
+                </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuRadioGroup value={status} onValueChange={(s) => s !== status && onSelect(s)}>
+                    {GAME_STATUSES.map((s) => {
+                        const {icon: Icon, text} = STATUS_META[s];
+                        return (
+                            <DropdownMenuRadioItem key={s} value={s}>
+                                <Icon className={text}/>
+                                {t(`BACKLOG.STATUS.${s}`)}
+                            </DropdownMenuRadioItem>
+                        );
+                    })}
+                </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}