feat(library): add the game data correction dialog

src/pages/GameDetail.jsx

@@ -1,7 +1,7 @@
 import {useEffect, useMemo, useState} from 'react';
 import {Link, useNavigate, useParams} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
-import {ArrowLeft, Clock, ExternalLink, Eye, EyeOff, Gamepad2, Image as ImageIcon, ImageOff, PanelTop, RotateCcw, ShieldOff, Timer, Trophy} from 'lucide-react';
+import {ArrowLeft, Clock, ExternalLink, Eye, EyeOff, Gamepad2, Image as ImageIcon, ImageOff, PanelTop, PencilLine, RotateCcw, ShieldOff, Timer, Trophy} from 'lucide-react';
 import {toast} from 'sonner';
 
 import {Badge} from '@/components/ui/badge';
@@ -15,15 +15,18 @@ import GameStatusBadge from '../components/GameStatusBadge.jsx';
 import ManualGameCard from '../components/ManualGameCard.jsx';
 import CompletedHint from '../components/CompletedHint.jsx';
 import FinishedHint from '../components/FinishedHint.jsx';
+import GameCorrectionDialog from '../components/GameCorrectionDialog.jsx';
 import PlayingHint from '../components/PlayingHint.jsx';
 import TimeToBeat from '../components/TimeToBeat.jsx';
 import {formatPlaytime} from '../utils/games.js';
+import useCurrentUser from '../hooks/useCurrentUser.js';
 import useSessionExpired from '../hooks/useSessionExpired.js';
 import useSaveAppearance from '../hooks/useSaveAppearance.js';
 import {usePreferences} from '../context/PreferencesContext.jsx';
 import PageContainer from '../components/PageContainer.jsx';
 import {apiFetch} from '../utils/api.js';
 import {ACHIEVEMENT_ICONS, reportBrokenImage} from '../utils/brokenImages.js';
+import {canCorrect} from '../utils/corrections.js';
 import {setGameHidden} from '../utils/hiddenGames.js';
 import {hasSession} from '../utils/auth.js';
 import {isSteamKey} from '../utils/manualGames.js';
@@ -63,6 +66,9 @@ export default function GameDetail() {
     const [isLoading, setIsLoading] = useState(true);
     const [hiding, setHiding] = useState(false);
     const [error, setError] = useState(null);
+    const [correcting, setCorrecting] = useState(false);
+    const [reloads, setReloads] = useState(0);
+    const auditor = canCorrect(useCurrentUser(true));
 
     useEffect(() => {
         let cancelled = false;
@@ -107,7 +113,7 @@ export default function GameDetail() {
         return () => {
             cancelled = true;
         };
-    }, [appid, navigate, expireSession, t]);
+    }, [appid, navigate, expireSession, t, reloads]);
 
     const sortedAchievements = useMemo(() => {
         if (!data?.achievements) return [];
@@ -211,6 +217,11 @@ export default function GameDetail() {
                                         </a>
                                     </Button>
                                 )}
+                                {auditor && (
+                                    <Button variant="outline" size="sm" className="mt-3 ml-2" onClick={() => setCorrecting(true)}>
+                                        <PencilLine/>{t('CORRECTION.OPEN')}
+                                    </Button>
+                                )}
                             </div>
                             {/* Store page, background and banner need Steam art, so a game off Steam has none of them.
                                 Hide is here too: only a Steam game can be hidden. */}
@@ -339,6 +350,11 @@ export default function GameDetail() {
                     )}
                 </>
             )}
+            {/* Outside the content: the reload after a save must not close it. */}
+            {data && auditor && (
+                <GameCorrectionDialog game={data} open={correcting} onOpenChange={setCorrecting}
+                                      onChanged={() => setReloads((n) => n + 1)}/>
+            )}
         </PageContainer>
     );
 }

src/pages/GameDetail.test.jsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
-import {cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
+import {act, cleanup, fireEvent, render, screen, waitFor} from '@testing-library/react';
 import {MemoryRouter, Route, Routes} from 'react-router-dom';
 import GameDetail from './GameDetail.jsx';
 import {PreferencesProvider} from '../context/PreferencesContext.jsx';
@@ -241,4 +241,34 @@ describe('GameDetail of a game added by hand', () => {
         expect(await screen.findByRole('button', {name: 'GAME_DETAIL.SET_BACKGROUND'})).toBeTruthy();
         expect(screen.queryByText('MANUAL_GAME.TITLE')).toBeNull();
     });
+
+    describe('corrections', () => {
+        const loggedInAs = (me) => {
+            globalThis.fetch = vi.fn(async (url) => ({ok: true, status: 200,
+                json: async () => (url.includes('/api/users/me') ? me : game)}));
+        };
+
+        it('offers "correct data" to an active auditor', async () => {
+            loggedInAs({role: 'AUDITOR', activeRole: 'AUDITOR'});
+            renderDetail();
+
+            fireEvent.click(await screen.findByRole('button', {name: 'CORRECTION.OPEN'}));
+
+            expect(await screen.findByText('CORRECTION.TITLE')).toBeTruthy();
+        });
+
+        it('offers nothing to a user or to an admin viewing as user', async () => {
+            for (const me of [{role: 'USER', activeRole: 'USER'}, {role: 'PLATFORM_ADMIN', activeRole: 'USER'}]) {
+                loggedInAs(me);
+                renderDetail();
+
+                await screen.findByText('Half-Life 2');
+                await waitFor(() => expect(fetch).toHaveBeenCalledWith(expect.stringContaining('/api/users/me'), expect.anything()));
+                // Let the answer of /me reach the page before looking for the button.
+                await act(async () => {});
+                expect(screen.queryByRole('button', {name: 'CORRECTION.OPEN'})).toBeNull();
+                cleanup();
+            }
+        });
+    });
 });