Update sync to use new API with progress modal

- Replace /sync endpoint (which now just starts sync) with polling /sync/progress
- Add SyncProgressModal.vue component to show live progress and results
- Update extraButtons.vue to use new sync flow with modal

Update character modal to use API
- Fetch character list from /characters endpoint
- Load character images from /character?name=<filename> endpoint
- Add object-fit: contain to preserve aspect ratios
- Fallback to hardcoded list if API fails
- Store API URLs for profile images

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>

src/components/items/extraButtons.vue

@@ -2,16 +2,29 @@
     <div class="extraButtonsDiv">
         <button @click="resetPlaylist">Reset playlist</button>
         <button @click="resetPoints">Reset points</button>
-        <button @click="syncGames">Sync games</button>
+        <button @click="handleSyncButtonClick">Sync games</button>
         <button @click="startSoundTest">Sound test</button>
+        <sync-progress-modal
+            :isOpen="showSyncModal"
+            :syncInProgress="syncInProgress"
+            @close="handleSyncComplete"
+        ></sync-progress-modal>
     </div>
 </template>
 
 <script>
+import SyncProgressModal from "./SyncProgressModal.vue";
+
 export default {
+    components: {
+        SyncProgressModal,
+    },
     data() {
         return {
             emptyPlaylist: [],
+            showSyncModal: false,
+            syncInProgress: false,
+            syncCompleted: false,
         };
     },
     methods: {
@@ -27,8 +40,47 @@ export default {
             this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
             this.$store.dispatch("setCurrentTrackHidden", false);
         },
-        async syncGames() {
-            await this.APIsyncGames();
+        async startSync() {
+            try {
+                // Start the sync
+                const response = await this.APIsyncGames();
+                // Check if sync was actually started or if one is in progress
+                if (response && (response.status === 423 || (response.data && response.data.includes("in progress")))) {
+                    // Sync is already in progress - show modal with polling
+                    this.syncInProgress = true;
+                } else {
+                    this.syncInProgress = true;
+                }
+                // Show the modal which will poll for progress
+                this.showSyncModal = true;
+            } catch (error) {
+                console.error("Failed to start sync:", error);
+                // If error is 423, sync is already in progress
+                if (error.response && error.response.status === 423) {
+                    this.syncInProgress = true;
+                    this.showSyncModal = true;
+                }
+            }
+        },
+        handleSyncButtonClick() {
+            // If we have a completed sync result, just show it
+            // Otherwise start a new sync
+            if (this.syncCompleted) {
+                this.showSyncResults();
+            } else {
+                this.startSync();
+            }
+        },
+        showSyncResults() {
+            // Show modal with existing results (no new sync)
+            this.syncInProgress = false;
+            this.showSyncModal = true;
+        },
+        async handleSyncComplete() {
+            this.syncInProgress = false;
+            this.syncCompleted = true;
+            this.showSyncModal = false;
+            // Refresh data after sync completes
             await this.APIresetPlaylist();
             this.$store.dispatch("resetPlayerScore");
             this.$store.dispatch("resetPlayerWelcomed");
@@ -63,12 +115,12 @@ export default {
                     method: "get",
                     url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/sync`,
                 })
-                    .then(() => {
-                        resolve();
+                    .then((response) => {
+                        resolve(response);
                     })
                     .catch(function(error) {
                         console.log(error);
-                        reject();
+                        reject(error);
                     });
             });
         },