From 3b86c381e352d6bd623006dcf75cd66a265e13ac Mon Sep 17 00:00:00 2001
From: Ponte <beuz@Mac-mini-de-Ponte.local>
Date: Wed, 11 Feb 2026 19:28:18 +0100
Subject: [PATCH] UI: show clear storage state and hide migrate button when not
 needed

---
 app.js     | 22 +++++++++++++++++++++-
 index.html |  1 +
 styles.css | 11 +++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/app.js b/app.js
index df6809a..033eada 100644
--- a/app.js
+++ b/app.js
@@ -36,6 +36,7 @@ const brandTabs = document.getElementById("brandTabs");
 const consoleTabs = document.getElementById("consoleTabs");
 const gameSectionTitle = document.getElementById("gameSectionTitle");
 const dataModeInfo = document.getElementById("dataModeInfo");
+const storageState = document.getElementById("storageState");
 const toolsDrawer = document.getElementById("toolsDrawer");
 const toolsToggleBtn = document.getElementById("toolsToggleBtn");
 const toolsCloseBtn = document.getElementById("toolsCloseBtn");
@@ -438,17 +439,36 @@ function renderDataMode() {
 
   if (dataMode === "api") {
     dataModeInfo.textContent = "Source: API (lecture/ecriture active sur la base de donnees).";
+    if (storageState) {
+      storageState.textContent = "Etat: Base de donnees active";
+    }
   } else if (dataMode === "api-empty") {
     dataModeInfo.textContent = "Source: API (base vide). Ajoute une section pour demarrer.";
+    if (storageState) {
+      storageState.textContent = "Etat: Base de donnees active (vide)";
+    }
   } else if (dataMode === "local-pending-import") {
     dataModeInfo.textContent = "Source: localStorage detectee. Migration vers DB disponible.";
+    if (storageState) {
+      storageState.textContent = "Etat: LocalStorage (migration en attente)";
+    }
   } else if (dataMode === "local-fallback") {
     dataModeInfo.textContent = "Source: localStorage (fallback). API indisponible.";
+    if (storageState) {
+      storageState.textContent = "Etat: LocalStorage (API indisponible)";
+    }
   } else {
     dataModeInfo.textContent = "Source: localStorage";
+    if (storageState) {
+      storageState.textContent = "Etat: LocalStorage";
+    }
   }
 
-  const showMigrateBtn = apiReachable && pendingLocalImport && payloadHasCatalogData(pendingLocalImport);
+  const showMigrateBtn =
+    dataMode === "local-pending-import" &&
+    apiReachable &&
+    pendingLocalImport &&
+    payloadHasCatalogData(pendingLocalImport);
   if (showMigrateBtn) {
     migrateBtn.classList.remove("hidden");
   } else {
diff --git a/index.html b/index.html
index c089b70..9c5c933 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,7 @@
         <button id="toolsCloseBtn" type="button" class="btn-secondary tools-close-btn">Fermer</button>
       </div>
       <p class="tools-subtitle">Sauvegarde, restauration et migration.</p>
+      <p id="storageState" class="storage-state">Etat: detection...</p>
       <button id="migrateBtn" type="button" class="btn-secondary hidden">
         Migrer localStorage vers DB
       </button>
diff --git a/styles.css b/styles.css
index 7ca6910..aac7e4c 100644
--- a/styles.css
+++ b/styles.css
@@ -75,6 +75,17 @@ body {
   font-size: 0.9rem;
 }
 
+.storage-state {
+  margin: 0 0 0.9rem;
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: #1e3d5d;
+  background: #e5eef8;
+  border: 1px solid #d2e0ef;
+  border-radius: 10px;
+  padding: 0.45rem 0.6rem;
+}
+
 .app-shell {
   width: min(1100px, 94vw);
   margin: 2rem auto;