UI: add console colors, state badges, sticky header and clearer actions

app.js

@@ -564,6 +564,13 @@ gamesList.addEventListener("click", async (event) => {
   }
 
   if (apiReachable && dataMode !== "local-pending-import") {
+    if (action === "delete") {
+      const confirmed = window.confirm("Etes-vous sur de vouloir supprimer ce jeu ?");
+      if (!confirmed) {
+        return;
+      }
+    }
+
     try {
       if (action === "delete") {
         await apiRequest(`/api/catalog/games/${id}`, { method: "DELETE" });
@@ -603,6 +610,10 @@ gamesList.addEventListener("click", async (event) => {
   }
 
   if (action === "delete") {
+    const confirmed = window.confirm("Etes-vous sur de vouloir supprimer ce jeu ?");
+    if (!confirmed) {
+      return;
+    }
     games.splice(idx, 1);
     if (editingGameId === id) {
       resetEditMode();
@@ -977,6 +988,58 @@ function badgeClassForGenre(genreValue) {
   return "default";
 }
 
+function consoleThemeClass(consoleName) {
+  const normalized = normalizeText(consoleName).toLowerCase();
+  if (normalized.includes("playstation 5") || normalized === "ps5") {
+    return "console-theme-ps5";
+  }
+  if (normalized.includes("playstation 4") || normalized === "ps4") {
+    return "console-theme-ps4";
+  }
+  if (normalized.includes("playstation 3") || normalized === "ps3") {
+    return "console-theme-ps3";
+  }
+  if (normalized.includes("playstation 2") || normalized === "ps2") {
+    return "console-theme-ps2";
+  }
+  if (normalized.includes("playstation") || normalized === "ps1") {
+    return "console-theme-ps1";
+  }
+  if (normalized.includes("switch")) {
+    return "console-theme-switch";
+  }
+  if (normalized.includes("xbox")) {
+    return "console-theme-xbox";
+  }
+  if (normalized.includes("wii")) {
+    return "console-theme-wii";
+  }
+  if (normalized.includes("snes")) {
+    return "console-theme-snes";
+  }
+  if (normalized.includes("nes")) {
+    return "console-theme-nes";
+  }
+  return "console-theme-default";
+}
+
+function conditionBadgeClass(conditionValue) {
+  if (conditionValue == null || Number.isNaN(Number(conditionValue))) {
+    return "status-neutral";
+  }
+  const value = Number(conditionValue);
+  if (value >= 9) {
+    return "status-good";
+  }
+  if (value >= 7) {
+    return "status-medium";
+  }
+  if (value >= 5) {
+    return "status-warning";
+  }
+  return "status-low";
+}
+
 function renderSearchResults() {
   if (!quickSearchResults) {
     return;
@@ -1143,7 +1206,7 @@ function renderGames() {
     });
 
     if (v2StickyCount) {
-      v2StickyCount.textContent = `${games.length} jeu${games.length > 1 ? "x" : ""}`;
+      v2StickyCount.textContent = `${games.length} jeu${games.length > 1 ? "x" : ""} affiche${games.length > 1 ? "s" : ""}`;
     }
   }
 
@@ -1157,6 +1220,7 @@ function renderGames() {
   for (const game of games) {
     const card = gameCardTemplate.content.cloneNode(true);
     const article = card.querySelector(".game-card");
+    article.classList.add(consoleThemeClass(game.consoleName));
     if (inlineEditingGameId === game.id) {
       article.classList.add("editing");
     }
@@ -1195,6 +1259,12 @@ function renderGames() {
     } else {
       badgesContainer.innerHTML = "";
     }
+    if (game.condition != null && !Number.isNaN(Number(game.condition))) {
+      badgesContainer.insertAdjacentHTML(
+        "beforeend",
+        `<span class="status-badge ${conditionBadgeClass(game.condition)}">Etat ${escapeHtml(String(game.condition))}/10</span>`,
+      );
+    }
     const coverEl = card.querySelector(".game-cover");
     const coverUrl = normalizeText(game.coverUrl);
     if (coverUrl) {
@@ -1214,10 +1284,18 @@ function renderGames() {
     const deleteBtn = card.querySelector('[data-action="delete"]');
 
     editBtn.dataset.id = game.id;
+    editBtn.textContent = "✏️ Editer";
+    editBtn.title = "Editer ce jeu";
+    editBtn.setAttribute("aria-label", "Editer ce jeu");
     toggleBtn.dataset.id = game.id;
-    toggleBtn.textContent = game.loanedTo ? "Marquer comme rendu" : "Marquer comme prete";
+    toggleBtn.textContent = game.loanedTo ? "📥 Rendu" : "📤 Preter";
+    toggleBtn.title = game.loanedTo ? "Marquer comme rendu" : "Marquer comme prete";
+    toggleBtn.setAttribute("aria-label", toggleBtn.title);
 
     deleteBtn.dataset.id = game.id;
+    deleteBtn.textContent = "🗑️ Supprimer";
+    deleteBtn.title = "Supprimer ce jeu";
+    deleteBtn.setAttribute("aria-label", "Supprimer ce jeu");
 
     if (inlineEditingGameId === game.id) {
       const editor = document.createElement("div");