feat(library): ask whether a game is finished

src/pages/GameDetail.jsx

@@ -14,6 +14,7 @@ import GameCover from '../components/GameCover.jsx';
 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 PlayingHint from '../components/PlayingHint.jsx';
 import TimeToBeat from '../components/TimeToBeat.jsx';
 import {formatPlaytime} from '../utils/games.js';
@@ -248,7 +249,13 @@ export default function GameDetail() {
                         </div>
                     </Card>
 
-                    <PlayingHint game={data} onChanged={(entry) => setData((d) => ({...d, ...entry}))}/>
+                    {/* The finished question also answers "are you playing it?". */}
+                    {!(data.finishedHint && ['BACKLOG', 'PLAYING'].includes(data.status)) && (
+                        <PlayingHint game={data} onChanged={(entry) => setData((d) => ({...d, ...entry}))}/>
+                    )}
+                    <FinishedHint game={data}
+                                  onChanged={(entry) => setData((d) => ({...d, ...entry, finishedHint: null}))}
+                                  onDismissed={() => setData((d) => ({...d, finishedHint: null}))}/>
                     <CompletedHint game={data} onChanged={(entry) => setData((d) => ({...d, ...entry}))}/>
 
                     <BacklogCard key={data.appid} game={data}