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>
     );
 }