Allow deleting own suggestions in Suggest phase and surface delete chip

wwwroot/app.js

@@ -107,7 +107,7 @@ function renderMySuggestions() {
   const wrap = $("my-suggestions");
   if (!wrap) return;
   wrap.innerHTML = "";
-  state.mySuggestions.forEach((s) => wrap.appendChild(buildCard(s, { showAuthor: false })));
+  state.mySuggestions.forEach((s) => wrap.appendChild(buildCard(s, { showAuthor: false, allowDelete: true })));
 }
 
 function renderAllSuggestions() {
@@ -289,7 +289,7 @@ async function refreshPhaseData() {
   await Promise.all([loadSuggestData(), loadRevealData(), loadVoteData(), loadResults()]);
 }
 
-function buildCard(s, { showAuthor }) {
+function buildCard(s, { showAuthor = false, allowDelete = false }) {
   const card = document.createElement("article");
   card.className = "game-card";
   const hasImage = !!s.screenshotUrl;
@@ -304,6 +304,7 @@ function buildCard(s, { showAuthor }) {
         ${s.youtubeUrl ? `<a class="link compact" href="${s.youtubeUrl}" target="_blank" rel="noopener">YouTube ↗</a>` : ""}
         <div class="title-meta">
           ${showAuthor && s.author ? `<span class="chip">${s.author}</span>` : ""}
+          ${allowDelete ? `<button class="chip danger-chip" data-delete="${s.id}" type="button">Delete</button>` : ""}
         </div>
       </div>
       ${s.genre ? `<p class="muted">${s.genre}</p>` : ""}
@@ -314,6 +315,18 @@ function buildCard(s, { showAuthor }) {
     const btn = card.querySelector(".card-visual");
     btn.addEventListener("click", () => openLightbox(s.screenshotUrl, s.name));
   }
+   if (allowDelete) {
+     const del = card.querySelector("[data-delete]");
+     del.addEventListener("click", async () => {
+       try {
+         await api(`/api/suggestions/${s.id}`, { method: "DELETE" });
+         toast("Suggestion deleted");
+         await loadSuggestData();
+       } catch (err) {
+         toast(err.message, true);
+       }
+     });
+   }
   return card;
 }