Add unlink flow for linked games

wwwroot/js/ui.js

@@ -3,6 +3,7 @@ import { t } from "./i18n.js";
 import { state, getSavedUsername, setSavedUsername } from "./state.js";
 import { $, toast } from "./dom.js";
 import { setupCardVisualHover, triggerCelebration } from "./effects.js";
+import { adminApi } from "./api.js";
 
 export function setAuthUI(isAuthed) {
     const main = document.querySelector("main");
@@ -307,7 +308,9 @@ export function buildCard(
             ? t("card.linkedWith", { names: linkedTitles.join(", ") })
             : t("card.linked")
         : "";
-    const linkChip = linked ? `<span class="chip icon link-chip" title="${linkTooltip}">🔗</span>` : "";
+    const linkChip = linked
+        ? `<button class="chip icon link-chip${state.me?.isAdmin ? " link-chip-action" : ""}" data-unlink="${s.id}" type="button" title="${linkTooltip}">🔗</button>`
+        : "";
     const visual = hasImage
         ? `<button class="card-visual" data-img="${s.screenshotUrl}" aria-label="${t("card.openScreenshot")}" style="background-image:url('${s.screenshotUrl}')"></button>`
         : `<div class="card-visual"></div>`;
@@ -351,6 +354,10 @@ export function buildCard(
         setupCardVisualHover(btn, s.screenshotUrl);
         btn.addEventListener("click", () => openLightbox(s.screenshotUrl, s.name));
     }
+    if (linked && state.me?.isAdmin) {
+        const unlinkBtn = card.querySelector("[data-unlink]");
+        unlinkBtn?.addEventListener("click", () => openUnlinkConfirm(s));
+    }
     if (allowEdit) {
         const editBtn = card.querySelector("[data-edit]");
         editBtn?.addEventListener("click", () =>
@@ -890,6 +897,27 @@ function syncLinkedSliders(sourceEl, value) {
     });
 }
 
+function openUnlinkConfirm(s) {
+    const peers = linkedPeerTitles(s);
+    const names = peers.length ? peers.join(", ") : t("admin.unlinkUnknownPeers");
+    openConfirmModal({
+        title: t("admin.unlinkTitle"),
+        body: t("admin.unlinkBody", { name: s.name, peers: names }),
+        confirmLabel: t("admin.unlinkConfirm"),
+        cancelLabel: t("modal.cancel"),
+        onConfirm: async (close) => {
+            try {
+                await adminApi.unlinkSuggestions(s.id);
+                toast(t("admin.unlinkDone"));
+                close();
+                await window.refreshPhaseData();
+            } catch (err) {
+                toast(err.message, true);
+            }
+        }
+    });
+}
+
 export function updatePhaseNav() {
     const isAdmin = !!state.me?.isAdmin;
     const phase = state.phase;