UI: show clear storage state and hide migrate button when not needed

This commit is contained in:
Ponte
2026-02-11 19:28:18 +01:00
parent 73c3e30744
commit 3b86c381e3
3 changed files with 33 additions and 1 deletions

22
app.js
View File

@@ -36,6 +36,7 @@ const brandTabs = document.getElementById("brandTabs");
const consoleTabs = document.getElementById("consoleTabs"); const consoleTabs = document.getElementById("consoleTabs");
const gameSectionTitle = document.getElementById("gameSectionTitle"); const gameSectionTitle = document.getElementById("gameSectionTitle");
const dataModeInfo = document.getElementById("dataModeInfo"); const dataModeInfo = document.getElementById("dataModeInfo");
const storageState = document.getElementById("storageState");
const toolsDrawer = document.getElementById("toolsDrawer"); const toolsDrawer = document.getElementById("toolsDrawer");
const toolsToggleBtn = document.getElementById("toolsToggleBtn"); const toolsToggleBtn = document.getElementById("toolsToggleBtn");
const toolsCloseBtn = document.getElementById("toolsCloseBtn"); const toolsCloseBtn = document.getElementById("toolsCloseBtn");
@@ -438,17 +439,36 @@ function renderDataMode() {
if (dataMode === "api") { if (dataMode === "api") {
dataModeInfo.textContent = "Source: API (lecture/ecriture active sur la base de donnees)."; 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") { } else if (dataMode === "api-empty") {
dataModeInfo.textContent = "Source: API (base vide). Ajoute une section pour demarrer."; 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") { } else if (dataMode === "local-pending-import") {
dataModeInfo.textContent = "Source: localStorage detectee. Migration vers DB disponible."; dataModeInfo.textContent = "Source: localStorage detectee. Migration vers DB disponible.";
if (storageState) {
storageState.textContent = "Etat: LocalStorage (migration en attente)";
}
} else if (dataMode === "local-fallback") { } else if (dataMode === "local-fallback") {
dataModeInfo.textContent = "Source: localStorage (fallback). API indisponible."; dataModeInfo.textContent = "Source: localStorage (fallback). API indisponible.";
if (storageState) {
storageState.textContent = "Etat: LocalStorage (API indisponible)";
}
} else { } else {
dataModeInfo.textContent = "Source: localStorage"; 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) { if (showMigrateBtn) {
migrateBtn.classList.remove("hidden"); migrateBtn.classList.remove("hidden");
} else { } else {

View File

@@ -20,6 +20,7 @@
<button id="toolsCloseBtn" type="button" class="btn-secondary tools-close-btn">Fermer</button> <button id="toolsCloseBtn" type="button" class="btn-secondary tools-close-btn">Fermer</button>
</div> </div>
<p class="tools-subtitle">Sauvegarde, restauration et migration.</p> <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"> <button id="migrateBtn" type="button" class="btn-secondary hidden">
Migrer localStorage vers DB Migrer localStorage vers DB
</button> </button>

View File

@@ -75,6 +75,17 @@ body {
font-size: 0.9rem; 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 { .app-shell {
width: min(1100px, 94vw); width: min(1100px, 94vw);
margin: 2rem auto; margin: 2rem auto;