feat(client): add report-card nudge and debug-menu entry point#5160
Conversation
Introduce a one-time, dismissible nudge that points players at the top-left report-card flag, persisted via a new dismissedReportCardNudge preference (store v23 -> v24, additive default). It is chained after the sandbox-tools nudge so the first-run hints never stack, and gated on the report affordance being available. Also add an always-visible 'Report a Card Problem' entry point to the debug panel that opens the same dialog (closing the panel first so its z-[9999] layer does not hide the z-50 dialog). New i18n keys (help.reportCardNudge) across all 7 locales.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a card-reporting feature, including a first-run dismissible nudge (ReportCardNudge) to guide players on how to flag rendering or behavior issues, along with localized strings across multiple languages and integration into the game page and preferences store. Feedback highlights a non-standard Tailwind opacity value in the nudge component that could cause styling issues, and hardcoded English strings in the debug panel that bypass the internationalization framework.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| const setDismissed = usePreferencesStore((s) => s.setDismissedReportCardNudge); | ||
|
|
||
| return ( | ||
| <div className="max-w-[min(24rem,calc(100vw-1.25rem))] rounded-[18px] border border-rose-400/25 bg-slate-950/86 p-3 text-sm text-slate-100 shadow-[0_24px_64px_rgba(15,23,42,0.55)] backdrop-blur-xl"> |
There was a problem hiding this comment.
[MED] Non-standard Tailwind opacity value. Evidence:
client/src/components/help/ReportCardNudge.tsx:19.
Why it matters: Using a non-standard opacity value like/86without arbitrary brackets will fail to generate the correct utility class in Tailwind CSS unless explicitly defined in the theme.
Suggested fix: Changebg-slate-950/86tobg-slate-950/[0.86]or use a standard opacity like/80or/90.
| <div className="max-w-[min(24rem,calc(100vw-1.25rem))] rounded-[18px] border border-rose-400/25 bg-slate-950/86 p-3 text-sm text-slate-100 shadow-[0_24px_64px_rgba(15,23,42,0.55)] backdrop-blur-xl"> | |
| <div className="max-w-[min(24rem,calc(100vw-1.25rem))] rounded-[18px] border border-rose-400/25 bg-slate-950/[0.86] p-3 text-sm text-slate-100 shadow-[0_24px_64px_rgba(15,23,42,0.55)] backdrop-blur-xl"> |
| <section className="border-b border-gray-700 px-3 py-2"> | ||
| <p className="mb-1 text-xs text-gray-500"> | ||
| See a card rendering or behaving wrong? Flag it so we can fix it. | ||
| </p> | ||
| <button | ||
| onClick={handleReportCard} | ||
| disabled={!gameState} | ||
| className="flex w-full items-center justify-center gap-1.5 rounded bg-red-600/90 px-2 py-1 text-xs font-medium text-white transition-colors hover:bg-red-500 disabled:cursor-not-allowed disabled:opacity-40" | ||
| > | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 20 20" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| strokeWidth={1.5} | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| className="h-3.5 w-3.5" | ||
| > | ||
| <path d="M4 2.5v15" /> | ||
| <path d="M4 3.5h9.5l-1.6 3 1.6 3H4" /> | ||
| </svg> | ||
| Report a Card Problem | ||
| </button> | ||
| </section> |
There was a problem hiding this comment.
[MED] Hardcoded user-facing strings. Evidence:
client/src/components/chrome/DebugPanel.tsx:312-333.
Why it matters: Hardcoded strings bypass the internationalization (i18n) framework, preventing these labels from being translated into the other 6 supported locales.
Suggested fix: ImportuseTranslationfromreact-i18nextand use translation keys (e.g., fromcommon.jsonorgame.json) instead of hardcoded English text.
1 participant
Introduce a one-time, dismissible nudge that points players at the
top-left report-card flag, persisted via a new dismissedReportCardNudge
preference (store v23 -> v24, additive default). It is chained after the
sandbox-tools nudge so the first-run hints never stack, and gated on the
report affordance being available.
Also add an always-visible 'Report a Card Problem' entry point to the
debug panel that opens the same dialog (closing the panel first so its
z-[9999] layer does not hide the z-50 dialog).
New i18n keys (help.reportCardNudge) across all 7 locales.