fix(stats): pluralize the platform game count and lift meta legibility - #4065
Conversation
Server Stats rendered "1 games" for a single-game platform, and the row meta line leaned on the faint foreground tier: the middot separator, the size percentage and the region expand toggle all sat at the edge of readability. - Pass the count as vue-i18n's plural choice and give every locale the plural forms its `collection.games-count` sibling already uses. - Draw the separator as a 4px dot in the muted tier instead of a thin middot glyph, and move the size percentage off the faint tier. - Outline the region expand/collapse control so it reads as a button, and label it for screen readers. - Spell out the coverage tooltip as "IGDB matches: 159 / 227". Fixes #4057 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Greptile SummaryThis PR improves the v2 platform statistics display by pluralizing game counts, clarifying metadata coverage, increasing visual contrast, and making the region toggle accessible.
Confidence Score: 5/5The PR appears safe to merge, with no concrete blocking or independently actionable non-blocking defects identified. The component changes consistently use the new translations, preserve existing data behavior, improve accessibility and contrast, and add focused coverage for the corrected English plural rendering. Reviews (1): Last reviewed commit: "fix(stats): pluralize the platform game ..." | Re-trigger Greptile |
There was a problem hiding this comment.
Pull request overview
This PR addresses the UX and i18n nits in the v2 Settings server stats (PlatformsStatsSection), improving correctness of game-count pluralization, readability of metadata/region separators and percentages, and accessibility/clarity of tooltips and the region expand-collapse control.
Changes:
- Updated
settings.platform-count-gamesusage to pass vue-i18n plural choice index, and expanded all locale values to plural-form strings. - Improved UI legibility by replacing the middot separator glyph with a rendered dot, lifting faint text to a stronger token, and restyling the regions toggle as an outlined button with accessible labeling.
- Added a unit test that mounts with real vue-i18n messages to validate singular vs plural rendering.
Reviewed changes
Copilot reviewed 20 out of 20 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/v2/components/Settings/PlatformsStatsSection.vue | Pluralization fix, clearer tooltip text via i18n key, improved separator rendering, and accessible outlined regions toggle. |
| frontend/src/v2/components/Settings/PlatformsStatsSection.test.ts | Uses real createI18n messages and adds a singular/plural assertion for game counts. |
| frontend/src/locales/bg_BG/settings.json | Adds plural forms and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/cs_CZ/settings.json | Adds plural forms (4-form) and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/de_DE/settings.json | Adds plural forms and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/en_GB/settings.json | Adds plural forms and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/en_US/settings.json | Adds plural forms and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/es_ES/settings.json | Adds new tooltip/toggle strings for platform stats. |
| frontend/src/locales/fr_FR/settings.json | Adds plural forms and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/hu_HU/settings.json | Adds plural forms and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/it_IT/settings.json | Adds plural forms and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/ja_JP/settings.json | Adds plural forms and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/ko_KR/settings.json | Adds plural forms and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/pl_PL/settings.json | Adds plural forms (3-form) and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/pt_BR/settings.json | Adds plural forms and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/ro_RO/settings.json | Adds plural forms and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/ru_RU/settings.json | Adds plural forms and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/tr_TR/settings.json | Adds plural forms and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/zh_CN/settings.json | Adds plural forms and new tooltip/toggle strings for platform stats. |
| frontend/src/locales/zh_TW/settings.json | Adds plural forms and new tooltip/toggle strings for platform stats. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Description
Fixes #4057 — the four Server Stats nits from the issue, all in the v2
PlatformsStatsSection.1 games→1 game.settings.platform-count-gameswas interpolated without a plural choice. It now passes the count as vue-i18n's choice index, and every locale gained the plural forms its existingcollection.games-countsibling already uses (including the 4-form Czech rule registered inlocales/index.ts; locales without numeral agreement — hu, tr, ja, ko, zh — mirror their sibling's repeated form).The separator dot is now visible. It was a
·character at 12px in--r-color-fg-faint(0.25 alpha in dark). It's drawn as a 4px circle in--r-color-fg-mutedinstead, and carriesaria-hiddenso screen readers skip it.The size percentage moved off the faint tier to
--r-color-fg-muted, same readability complaint.The region
+N/-toggle is now an outlined button, matching the region chips it sits next to (surface fill,--r-color-border-strong, hover state). It also picked uptitle/aria-label("Show more regions" / "Show fewer regions") andaria-expanded— it previously had no accessible name at all. The collapse glyph is a proper minus sign rather than a hyphen.The coverage tooltip spells out what the number means:
IGDB: 159 / 227→IGDB matches: 159 / 227, via a translated key instead of an inline template literal.Three new keys (
platform-metadata-matches,platform-regions-show-more,platform-regions-show-less) are translated across all 18 locales.Testing
PlatformsStatsSection.test.tspreviously mockedtto echo the key, which cannot exercise plural selection. It now mounts with a realcreateI18nover the actualen_US/settings.json, plus a new case asserting a one-game platform renders1 gamenext to a six-game one rendering6 games.Verified with
vitest(20 passed),vue-tsc,trunk check, both i18n scripts,npm run build, and a Playwright pass over a preview build against a real library in both dark and light themes — confirming1 game, the new tooltips, and the outlined toggle in its expanded and collapsed states.AI assistance disclosure
This change was written with AI assistance (Claude Code / Claude Opus 5). The AI produced the component and locale changes, the added test, and this description; I reviewed them and the verification runs above. The non-English translations were AI-generated following each locale's existing terminology in the same files — native-speaker review is welcome, particularly for the plural forms.
Checklist
Screenshots (if applicable)
Captured against a real library in both themes; happy to attach on request.