UI V3: add top navigation, sidebar layout, and dedicated loans/stats views

2026-03-05 19:36:03 +01:00
parent e98d8c5717
commit afabdce17c
3 changed files with 268 additions and 42 deletions
--- a/app.js
+++ b/app.js
@@ -60,6 +60,15 @@ const googleBackupBtn = document.getElementById("googleBackupBtn");
 const googleRestoreBtn = document.getElementById("googleRestoreBtn");
 const quickSearchInput = document.getElementById("quickSearchInput");
 const quickSearchResults = document.getElementById("quickSearchResults");
+const topNavButtons = document.querySelectorAll(".topnav-btn[data-view]");
+const gamesPanel = document.getElementById("gamesPanel");
+const statsView = document.getElementById("statsView");
+const scannerZone = document.getElementById("scannerZone");
+const searchZone = document.getElementById("searchZone");
+const statsTotalGames = document.getElementById("statsTotalGames");
+const statsTotalValue = document.getElementById("statsTotalValue");
+const statsLoanedGames = document.getElementById("statsLoanedGames");
+const statsConsoleCount = document.getElementById("statsConsoleCount");
 const loanedFilterBtn = document.getElementById("loanedFilterBtn");
 const bulkActionsBar = document.getElementById("bulkActionsBar");
 const bulkSelectPage = document.getElementById("bulkSelectPage");
@@ -105,6 +114,7 @@ let selectedGameIds = new Set();
 let currentPage = 1;
 let currentPageGameIds = [];
 let currentTotalPages = 1;
+let currentView = "catalogue";
 // V2 is now the default UI. Use ?ui=v1 to force legacy mode if needed.
 const uiParam = new URLSearchParams(window.location.search).get("ui");
 const uiV2Enabled = uiParam !== "v1";
@@ -232,12 +242,19 @@ quickSearchInput.addEventListener("input", (event) => {
 });

 loanedFilterBtn.addEventListener("click", () => {
-  showLoanedOnly = !showLoanedOnly;
-  resetPaging();
-  selectedGameIds.clear();
-  renderGames();
+  setCurrentView(currentView === "loans" ? "catalogue" : "loans");
 });

+for (const navButton of topNavButtons) {
+  navButton.addEventListener("click", () => {
+    const view = navButton.dataset.view;
+    if (!view) {
+      return;
+    }
+    setCurrentView(view);
+  });
+}
+
 if (bulkSelectPage) {
  bulkSelectPage.addEventListener("change", (event) => {
    const checked = Boolean(event.target.checked);
@@ -885,6 +902,7 @@ restoreFileInput.addEventListener("change", async (event) => {

 function render() {
  renderV2Chrome();
+  renderViewChrome();
  renderDataMode();
  renderGoogleStatus();
  renderBrandTabs();
@@ -895,6 +913,59 @@ function render() {
  renderCollectionStats();
 }

+function setCurrentView(view) {
+  const allowed = new Set(["catalogue", "loans", "stats"]);
+  if (!allowed.has(view)) {
+    return;
+  }
+  currentView = view;
+  showLoanedOnly = view === "loans";
+  resetPaging();
+  selectedGameIds.clear();
+  render();
+}
+
+function renderViewChrome() {
+  const isStats = currentView === "stats";
+  const isLoans = currentView === "loans";
+
+  for (const navButton of topNavButtons) {
+    navButton.classList.toggle("active", navButton.dataset.view === currentView);
+  }
+
+  if (gamesPanel) {
+    gamesPanel.classList.toggle("hidden", isStats);
+  }
+  if (statsView) {
+    statsView.classList.toggle("hidden", !isStats);
+  }
+  if (gameForm) {
+    gameForm.classList.toggle("hidden", isLoans || isStats || v2FormCollapsed);
+  }
+  if (scannerZone) {
+    scannerZone.classList.toggle("hidden", isLoans || isStats);
+  }
+  if (searchZone) {
+    searchZone.classList.toggle("hidden", isStats);
+  }
+  if (bulkActionsBar) {
+    bulkActionsBar.classList.toggle("hidden", isStats);
+  }
+  if (paginationBar) {
+    paginationBar.classList.toggle("hidden", isStats);
+  }
+  if (v2ToggleFormBtn) {
+    v2ToggleFormBtn.classList.toggle("hidden", isLoans || isStats);
+  }
+  if (v2QuickBackupBtn) {
+    v2QuickBackupBtn.classList.toggle("hidden", isStats);
+  }
+  if (loanedFilterBtn) {
+    loanedFilterBtn.textContent = isLoans ? "Retour catalogue" : "Aller a la vue prets";
+    loanedFilterBtn.classList.toggle("hidden", isStats);
+  }
+}
+
 function renderDataMode() {
  if (!dataModeInfo) {
    return;
@@ -1040,9 +1111,24 @@ function renderCollectionStats() {
    const value = typeof game.value === "number" ? game.value : Number(game.value);
    return Number.isFinite(value) ? sum + value : sum;
  }, 0);
+  const loanedCount = allGames.filter((game) => normalizeText(game.loanedTo)).length;
+  const activeConsoles = Object.values(state.gamesByConsole).filter((games) => Array.isArray(games) && games.length > 0)
+    .length;

  totalGamesCount.textContent = String(totalCount);
  totalGamesValue.textContent = `${totalValue.toFixed(2)} EUR`;
+  if (statsTotalGames) {
+    statsTotalGames.textContent = String(totalCount);
+  }
+  if (statsTotalValue) {
+    statsTotalValue.textContent = `${totalValue.toFixed(2)} EUR`;
+  }
+  if (statsLoanedGames) {
+    statsLoanedGames.textContent = String(loanedCount);
+  }
+  if (statsConsoleCount) {
+    statsConsoleCount.textContent = String(activeConsoles);
+  }
 }

 function showToast(message, type = "info", timeoutMs = 2600) {
@@ -1211,10 +1297,12 @@ function updateBulkAndPaginationUi(pageGames, totalFilteredCount) {
    nextPageBtn.disabled = currentPage >= currentTotalPages;
  }
  if (paginationBar) {
-    paginationBar.classList.toggle("hidden", totalFilteredCount <= pageSizeForViewport());
+    const shouldHidePagination = currentView === "stats" || totalFilteredCount <= pageSizeForViewport();
+    paginationBar.classList.toggle("hidden", shouldHidePagination);
  }
  if (bulkActionsBar) {
-    bulkActionsBar.classList.toggle("hidden", totalFilteredCount === 0);
+    const shouldHideBulk = currentView === "stats" || totalFilteredCount === 0;
+    bulkActionsBar.classList.toggle("hidden", shouldHideBulk);
  }
 }

@@ -1412,15 +1500,15 @@ async function performBulkAction(action) {
 function renderGames() {
  const selectedConsole = state.selectedConsole;
  const inV2 = uiV2Enabled;
-  gameSectionTitle.textContent = inV2
+  gameSectionTitle.textContent =
+    currentView === "loans"
+      ? "Jeux pretes"
+      : inV2
        ? "Catalogue jeux"
-    : showLoanedOnly
-      ? "Jeux pretes - Toutes consoles"
        : selectedConsole
          ? `Jeux - ${selectedConsole}`
          : "Jeux";
  gamesList.innerHTML = "";
-  loanedFilterBtn.textContent = showLoanedOnly ? "Voir tous les jeux" : "Voir jeux pretes";

  if (!inV2 && !showLoanedOnly && !selectedConsole) {
    gamesList.innerHTML = '<p class="empty">Ajoute une section pour commencer.</p>';
--- a/index.html
+++ b/index.html
@@ -13,7 +13,18 @@
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
-    <button id="toolsToggleBtn" type="button" class="tools-toggle-btn">Outils</button>
+    <header class="topbar">
+      <div class="topbar-brand">
+        <p class="eyebrow">Collection Manager</p>
+        <h1>Collection Jeux Video</h1>
+      </div>
+      <nav class="topbar-nav" aria-label="Navigation principale">
+        <button type="button" class="topnav-btn active" data-view="catalogue">Catalogue</button>
+        <button type="button" class="topnav-btn" data-view="loans">Prets</button>
+        <button type="button" class="topnav-btn" data-view="stats">Statistiques</button>
+        <button id="toolsToggleBtn" type="button" class="topnav-btn">Outils</button>
+      </nav>
+    </header>
    <button id="gamesToggleBtn" type="button" class="games-toggle-btn">Jeux</button>
    <aside id="toolsDrawer" class="tools-drawer" aria-label="Menu outils">
      <div class="tools-header">
@@ -60,7 +71,29 @@
      </div>
    </aside>

-    <main class="app-shell">
+    <main class="app-shell v3-layout">
+      <aside class="v3-sidebar panel">
+        <section class="sidebar-block">
+          <h2 class="sidebar-title">Plateformes et consoles</h2>
+          <form id="platformForm" class="grid-form">
+            <label>
+              Marque (ex: SONY)
+              <input id="brandInput" required placeholder="SONY" />
+            </label>
+            <label>
+              Console (ex: PlayStation 5)
+              <input id="consoleInput" required placeholder="PlayStation 5" />
+            </label>
+            <button type="submit">Ajouter section</button>
+          </form>
+        </section>
+        <section class="sidebar-block">
+          <div id="brandTabs" class="tabs" aria-label="Onglets marques"></div>
+          <div id="consoleTabs" class="tabs secondary" aria-label="Onglets consoles"></div>
+        </section>
+      </aside>
+
+      <section class="v3-main">
      <div id="v2StickyBar" class="v2-sticky hidden">
        <div class="v2-sticky-title">Vue catalogue</div>
        <div id="v2StickyCount" class="v2-sticky-count">0 jeu affiche</div>
@@ -73,32 +106,34 @@
      <header class="hero">
        <div class="hero-copy">
          <p class="eyebrow">Catalogue perso</p>
-          <h1>Collection Jeux Video</h1>
+          <p class="subtitle">Gere ta collection, tes prets et la valeur de tes jeux en un seul endroit.</p>
        </div>
      </header>
-
-      <section class="panel platform-panel">
+      <section id="statsView" class="panel stats-view hidden">
        <div class="panel-header">
-          <h2>Plateformes et consoles</h2>
+          <h2>Statistiques collection</h2>
+        </div>
+        <div class="stats-grid">
+          <article class="stat-card">
+            <p class="stat-label">Nombre total de jeux</p>
+            <p id="statsTotalGames" class="stat-value">0</p>
+          </article>
+          <article class="stat-card">
+            <p class="stat-label">Valeur totale estimee</p>
+            <p id="statsTotalValue" class="stat-value">0.00 EUR</p>
+          </article>
+          <article class="stat-card">
+            <p class="stat-label">Jeux pretes</p>
+            <p id="statsLoanedGames" class="stat-value">0</p>
+          </article>
+          <article class="stat-card">
+            <p class="stat-label">Consoles actives</p>
+            <p id="statsConsoleCount" class="stat-value">0</p>
+          </article>
        </div>
-
-        <form id="platformForm" class="grid-form">
-          <label>
-            Marque (ex: SONY)
-            <input id="brandInput" required placeholder="SONY" />
-          </label>
-          <label>
-            Console (ex: PlayStation 5)
-            <input id="consoleInput" required placeholder="PlayStation 5" />
-          </label>
-          <button type="submit">Ajouter section</button>
-        </form>
-
-        <div id="brandTabs" class="tabs" aria-label="Onglets marques"></div>
-        <div id="consoleTabs" class="tabs secondary" aria-label="Onglets consoles"></div>
      </section>

-      <section class="panel games-panel">
+      <section id="gamesPanel" class="panel games-panel">
        <div class="panel-header">
          <h2 id="gameSectionTitle">Jeux</h2>
          <p id="dataModeInfo" class="data-mode"></p>
@@ -130,7 +165,7 @@
          </label>
        </div>
        <div class="games-actions-bar">
-          <button id="loanedFilterBtn" type="button" class="btn-secondary">Voir jeux pretes</button>
+          <button id="loanedFilterBtn" type="button" class="btn-secondary">Basculer vue prets</button>
        </div>
        <div id="bulkActionsBar" class="bulk-actions-bar">
          <label class="checkbox-row">
@@ -142,7 +177,7 @@
          <button id="bulkReturnBtn" type="button" class="btn-secondary" disabled>Marquer rendu</button>
          <button id="bulkDeleteBtn" type="button" class="btn-inline danger" disabled>Supprimer</button>
        </div>
-        <div class="scanner-zone">
+        <div id="scannerZone" class="scanner-zone">
          <div class="scanner-header">
            <strong>Scan camera (mobile)</strong>
            <p id="scannerStatus" class="scanner-status">Camera inactive.</p>
@@ -155,7 +190,7 @@
          <p id="scannerLastCode" class="scanner-last-code hidden"></p>
        </div>

-        <div class="search-zone">
+        <div id="searchZone" class="search-zone">
          <label>
            Recherche rapide anti-doublon
            <input id="quickSearchInput" placeholder="Ex: Destiny, Final Fantasy, Zelda..." />
@@ -226,6 +261,7 @@
          <button id="nextPageBtn" type="button" class="btn-secondary">Suivant</button>
        </div>
      </section>
+      </section>
    </main>
    <div id="toastContainer" class="toast-container" aria-live="polite" aria-atomic="true"></div>

--- a/styles.css
+++ b/styles.css
@@ -27,6 +27,49 @@ body {
  min-height: 100vh;
 }

+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 60;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+  padding: 0.7rem 1rem;
+  border-bottom: 1px solid var(--border);
+  background: rgba(248, 250, 253, 0.92);
+  backdrop-filter: blur(8px);
+}
+
+.topbar-brand h1 {
+  margin: 0.1rem 0 0;
+  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
+}
+
+.topbar-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.topnav-btn {
+  background: #dde7f3;
+  color: #1f324a;
+  border: 1px solid #cfd9e7;
+  border-radius: 10px;
+  padding: 0.48rem 0.72rem;
+  font-family: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.topnav-btn.active {
+  background: #0f6ab8;
+  color: #ffffff;
+  border-color: #0f6ab8;
+}
+
 .tools-toggle-btn {
  position: fixed;
  top: 1rem;
@@ -161,12 +204,36 @@ body {
 }

 .app-shell {
-  width: min(1100px, 94vw);
-  margin: 2rem auto;
+  width: min(1320px, 95vw);
+  margin: 1rem auto 2rem;
  display: grid;
  gap: 1rem;
 }

+.v3-layout {
+  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
+  align-items: start;
+}
+
+.v3-main {
+  display: grid;
+  gap: 1rem;
+}
+
+.v3-sidebar {
+  position: sticky;
+  top: 5rem;
+}
+
+.sidebar-block + .sidebar-block {
+  margin-top: 0.9rem;
+}
+
+.sidebar-title {
+  margin: 0 0 0.7rem;
+  font-size: 1rem;
+}
+
 .hero,
 .panel {
  background: var(--surface);
@@ -206,6 +273,12 @@ h1 {
  color: var(--muted);
 }

+.stats-grid {
+  display: grid;
+  gap: 0.75rem;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .panel {
  padding: 1rem;
 }
@@ -819,7 +892,7 @@ body.ui-v2 .game-actions {

 body.ui-v2 .hero {
  position: sticky;
-  top: 4.2rem;
+  top: 5.3rem;
  z-index: 15;
 }

@@ -861,6 +934,22 @@ body.ui-v2 .hero {
 }

@media (max-width: 900px) {
+  .topbar {
+    padding: 0.6rem 0.7rem;
+  }
+
+  .v3-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .v3-sidebar {
+    position: static;
+  }
+
+  .stats-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
  .v2-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
@@ -881,6 +970,19 @@ body.ui-v2 .hero {
 }

@media (max-width: 640px) {
+  .topbar-nav {
+    width: 100%;
+  }
+
+  .topnav-btn {
+    flex: 1 1 calc(50% - 0.3rem);
+    text-align: center;
+  }
+
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+
  .grid-form,
  .game-form {
    grid-template-columns: 1fr;