feat(sync): add Set to 100% button for all-unlocked games

The sync details show a Set to 100% button for ALL_UNLOCKED games.
The button uses the existing status PUT, checks points, and reloads
the Dashboard. Refs #21

src/components/SyncChangesDialog.jsx

@@ -3,6 +3,7 @@ import {useTranslation} from 'react-i18next';
 
 import {Dialog, DialogContent, DialogDescription, DialogTitle} from '@/components/ui/dialog';
 import {Skeleton} from '@/components/ui/skeleton';
+import SyncCompletedButton from './SyncCompletedButton.jsx';
 import GameRow from './stats/GameRow.jsx';
 import {formatPlaytime} from '../utils/games.js';
 import {fetchSyncChanges, groupByKind} from '../utils/syncChanges.js';
@@ -10,8 +11,10 @@ import {fetchSyncChanges, groupByKind} from '../utils/syncChanges.js';
 /**
  * The changes of the last sync, grouped by kind. Loads the result again when it opens: the achievements of a sync
  * arrive after its games.
+ *
+ * @param onChanged called after a game was set to COMPLETED from here
  */
-export default function SyncChangesDialog({onClose}) {
+export default function SyncChangesDialog({onClose, onChanged}) {
     const {t} = useTranslation();
     const [changes, setChanges] = useState(null);
     const [failed, setFailed] = useState(false);
@@ -52,7 +55,12 @@ export default function SyncChangesDialog({onClose}) {
                     <section key={kind} className="space-y-2">
                         <h3 className="text-sm font-semibold">{t(`SYNC_CHANGES.HEADING.${kind}`)}</h3>
                         <ul className="space-y-2">
-                            {rows.map((change, index) => (
+                            {rows.map((change, index) => kind === 'ALL_UNLOCKED' ? (
+                                <li key={change.appid} className="flex items-center gap-3">
+                                    <div className="min-w-0 flex-1"><GameRow game={change} linked/></div>
+                                    <SyncCompletedButton appid={change.appid} onChanged={onChanged}/>
+                                </li>
+                            ) : (
                                 <li key={`${change.appid}-${change.fromStatus}-${index}`}>
                                     <GameRow game={change} value={value(change)} linked/>
                                 </li>