From 57d93c4f4b4e7b8c2c1f54924b28c33446d5782e Mon Sep 17 00:00:00 2001
From: Spark <spark@hatch.local>
Date: Mon, 12 Oct 2026 14:40:05 -0400
Subject: [PATCH] =?UTF-8?q?feat(ui):=20en-t=C3=AAte=20Projets=20profession?=
 =?UTF-8?q?nel=20=E2=80=94=20titre=20sobre,=20bande=20KPI=20unifi=C3=A9e,?=
 =?UTF-8?q?=20barre=20d'outils=20unique?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Titre « Projets » + sous-titre discret (fini le Bonjour 👋),
  en-tête deux fois plus compact.
- Les 4 statistiques deviennent une bande KPI bordée unique
  (séparateurs fins, chiffres tabulaires, KPI journal cliquables
  vers /activity).
- Onglets/filtre/tri/regroupement/vue réunis dans UNE barre :
  contrôle segmenté avec pastilles de compte, filtre rectangle.
  Crochets JS/Alpine inchangés ; .stat-tile conservée (briefing).
---
 app/templates/dashboard.html |  68 +++++++++---------
 static/css/style.css         | 130 ++++++++++++++++++++++-------------
 2 files changed, 116 insertions(+), 82 deletions(-)

diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index c41f7b5..e1465bd 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -11,16 +11,21 @@
 <body>
     {% include "_header.html" %}
 
-    <section class="hero">
-        <div class="hero-text">
-            <h2>Bonjour 👋 Voici vos projets Gitea, en un coup d'œil.</h2>
-            <p>Glissez les cartes, suivez ce qui avance, et laissez Gitea rester la source de vérité.</p>
-        </div>
-        <div class="stat-tiles">
-            <div class="stat-tile"><span class="stat-num">{{ active_repos|length }}</span><span class="stat-label">projets actifs</span></div>
-            <div class="stat-tile"><span class="stat-num">{{ metrics.closed }}</span><span class="stat-label">issues fermées · 30 j</span></div>
-            <div class="stat-tile"><span class="stat-num">{{ metrics.moved }}</span><span class="stat-label">déplacements · 30 j</span></div>
-            <div class="stat-tile"><span class="stat-num">{% if metrics.avg_cycle_days is not none %}{{ metrics.avg_cycle_days }} j{% else %}—{% endif %}</span><span class="stat-label">temps de cycle moyen</span></div>
+    <!-- En-tête de page (refonte 0.20.0) : titre sobre, bande KPI
+         unifiée, puis UNE barre d'outils (dans <main>) qui regroupe
+         onglets, filtre, tri et vue — fini les rangées éparses. -->
+    <section class="page-head">
+        <div class="page-head-row">
+            <div class="page-title">
+                <h1>Projets</h1>
+                <p class="page-sub">Vue d'ensemble de vos dépôts Gitea — Gitea reste la source de vérité.</p>
+            </div>
+            <div class="kpi-strip" aria-label="Indicateurs des 30 derniers jours">
+                <div class="kpi"><span class="kpi-value">{{ active_repos|length }}</span><span class="kpi-label">Projets actifs</span></div>
+                <a class="kpi" href="/activity"><span class="kpi-value">{{ metrics.closed }}</span><span class="kpi-label">Issues fermées · 30 j</span></a>
+                <a class="kpi" href="/activity"><span class="kpi-value">{{ metrics.moved }}</span><span class="kpi-label">Déplacements · 30 j</span></a>
+                <div class="kpi"><span class="kpi-value">{% if metrics.avg_cycle_days is not none %}{{ metrics.avg_cycle_days }}<span class="kpi-unit"> j</span>{% else %}—{% endif %}</span><span class="kpi-label">Temps de cycle moyen</span></div>
+            </div>
         </div>
     </section>
 
@@ -40,31 +45,22 @@
         }
     </script>
     <main x-data="dashState()">
-        <!-- Tabs: "actif" = mis à jour dans la fenêtre glissante;
-             "archivé" = le vrai drapeau Gitea (repo.archived). -->
-        <div class="tabs">
-            <button :class="{ active: tab === 'active' }" @click="tab = 'active'">
-                🟢 Actifs ({{ active_repos|length }})
-            </button>
-            <button :class="{ active: tab === 'inactive' }" @click="tab = 'inactive'">
-                💤 Inactifs ({{ inactive_repos|length }})
-            </button>
-            <button :class="{ active: tab === 'archived' }" @click="tab = 'archived'">
-                🗄️ Archivés ({{ archived_repos|length }})
-            </button>
-        </div>
-
-        <!-- Search: the repo name lives in a data-* attribute (HTML-escaped
-             by Jinja), never interpolated into a JS string literal. -->
-        <div class="search-bar">
-            <input type="text" id="project-search" placeholder="🔍 Filtrer les projets..." x-model="search" autocomplete="off">
-            <kbd class="kbd">/</kbd>
-        </div>
-
-        <!-- Outils d'affichage (#21 tri/regroupement, #22 vue liste) :
-             pilotés par dashboard.js, préférences en localStorage. -->
-        <div class="dash-tools">
-            <label class="dash-tool">↕️ Tri
+        <!-- Barre d'outils unique (0.20.0) : onglets segmentés,
+             filtre, tri/regroupement (#21) et vue (#22) alignés.
+             Onglets : "actif" = fenêtre glissante ; "archivé" =
+             le vrai drapeau Gitea (repo.archived). Le filtre lit
+             des data-* échappés par Jinja, jamais des littéraux JS. -->
+        <div class="dash-toolbar">
+            <div class="seg-tabs" role="tablist" aria-label="État des projets">
+                <button type="button" role="tab" :class="{ active: tab === 'active' }" @click="tab = 'active'">Actifs <span class="seg-count">{{ active_repos|length }}</span></button>
+                <button type="button" role="tab" :class="{ active: tab === 'inactive' }" @click="tab = 'inactive'">Inactifs <span class="seg-count">{{ inactive_repos|length }}</span></button>
+                <button type="button" role="tab" :class="{ active: tab === 'archived' }" @click="tab = 'archived'">Archivés <span class="seg-count">{{ archived_repos|length }}</span></button>
+            </div>
+            <div class="search-bar toolbar-search">
+                <input type="text" id="project-search" placeholder="Filtrer les projets..." x-model="search" autocomplete="off">
+                <kbd class="kbd">/</kbd>
+            </div>
+            <label class="dash-tool">Tri
                 <select id="dash-sort">
                     <option value="default">Par défaut</option>
                     <option value="updated">Activité Gitea récente</option>
@@ -74,7 +70,7 @@
                 </select>
             </label>
             <label class="dash-tool dash-tool-check">
-                <input type="checkbox" id="dash-group"> 🗂️ Grouper par propriétaire
+                <input type="checkbox" id="dash-group"> Grouper par propriétaire
             </label>
             <div class="dash-view-toggle" role="group" aria-label="Mode d'affichage">
                 <button type="button" :class="{ active: view === 'grid' }" @click="setView('grid')">▦ Grille</button>
diff --git a/static/css/style.css b/static/css/style.css
index 0ac22dd..0a7b831 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -150,17 +150,44 @@ header h1 { font-size: 1.2rem; font-weight: 600; }
 .btn-sm:hover { background: var(--surface-3); border-color: var(--border-strong); text-decoration: none; }
 .btn-sm:active { transform: scale(0.97); }
 
-/* ── Hero (dashboard) ───────────────────────── */
-.hero {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    gap: 24px;
-    flex-wrap: wrap;
-    padding: 30px 24px 6px;
+/* ── En-tête de page Projets (0.20.0) ─────────
+   Titre sobre + bande KPI unifiée ; les contrôles vivent dans
+   .dash-toolbar (plus bas). Les .stat-tile restent utilisés par
+   le briefing quotidien. */
+.page-head { padding: 22px 24px 0; }
+.page-head-row {
+    display: flex; justify-content: space-between; align-items: flex-end;
+    gap: 20px; flex-wrap: wrap;
+}
+.page-title h1 {
+    font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em;
+    line-height: 1.15; margin: 0;
+}
+.page-sub { color: var(--text-2); font-size: 0.92rem; margin-top: 5px; }
+.kpi-strip {
+    display: flex; align-items: stretch;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    overflow: hidden;
+}
+.kpi {
+    display: flex; flex-direction: column; gap: 1px;
+    padding: 9px 18px 10px;
+    color: var(--text);
+}
+.kpi + .kpi { border-left: 1px solid var(--border); }
+a.kpi { transition: background 0.15s; }
+a.kpi:hover { background: var(--surface-2); text-decoration: none; }
+.kpi-value {
+    font-size: 1.22rem; font-weight: 700; letter-spacing: -0.01em;
+    font-variant-numeric: tabular-nums; line-height: 1.2;
+}
+.kpi-unit { font-size: 0.85rem; font-weight: 600; color: var(--text-2); }
+.kpi-label {
+    font-size: 0.68rem; color: var(--text-2);
+    text-transform: uppercase; letter-spacing: 0.55px; white-space: nowrap;
 }
-.hero-text h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px; }
-.hero-text p { color: var(--text-2); font-size: 0.95rem; max-width: 520px; }
 .stat-tiles { display: flex; gap: 10px; flex-wrap: wrap; }
 .stat-tile {
     background: linear-gradient(180deg, var(--surface-2), var(--surface));
@@ -175,38 +202,13 @@ header h1 { font-size: 1.2rem; font-weight: 600; }
 .stat-num { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }
 .stat-label { font-size: 0.72rem; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; }
 
-/* ── Tabs + search (dashboard) ──────────────── */
-.tabs {
-    display: flex;
-    gap: 6px;
-    padding: 18px 24px 0;
-    flex-wrap: wrap;
-}
-.tabs button {
-    padding: 8px 16px;
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background: var(--surface);
-    color: var(--text-2);
-    cursor: pointer;
-    font-size: 0.88rem;
-    font-weight: 500;
-    transition: all 0.15s;
-}
-.tabs button.active {
-    color: #fff;
-    background: linear-gradient(135deg, rgba(124,92,252,.9), rgba(91,138,247,.9));
-    border-color: transparent;
-}
-.tabs button:hover { color: var(--text); }
-.tabs button.active:hover { color: #fff; }
-
+/* ── Recherche (dashboard + filtre prévisions) ── */
 .search-bar { padding: 14px 24px 2px; display: flex; align-items: center; gap: 10px; }
 .search-bar input {
     width: 100%;
     max-width: 430px;
-    padding: 11px 16px;
-    border-radius: 999px;
+    padding: 9px 13px;
+    border-radius: 9px;
     border: 1px solid var(--border);
     background: var(--surface);
     color: var(--text);
@@ -869,13 +871,18 @@ footer {
 
 /* ── Responsive ─────────────────────────────── */
 @media (max-width: 900px) {
-    .hero { flex-direction: column; align-items: flex-start; }
+    .page-head-row { flex-direction: column; align-items: flex-start; }
+    .kpi-strip { width: 100%; }
+    .kpi { flex: 1 1 0; padding: 9px 12px 10px; }
+    .kpi-label { white-space: normal; }
     .kanban-column { max-height: none; }
 }
 @media (max-width: 768px) {
     .app-header, header { padding: 10px 14px; }
     .crumb { display: none; }
-    .hero, .tabs, .search-bar, .project-grid, .board-toolbar, .milestone-bar { padding-left: 14px; padding-right: 14px; }
+    .page-head, .project-grid, .board-toolbar, .milestone-bar { padding-left: 14px; padding-right: 14px; }
+    .dash-toolbar { margin-left: 14px; margin-right: 14px; }
+    .search-bar { padding-left: 14px; padding-right: 14px; }
     .milestone-banner { margin-left: 14px; margin-right: 14px; }
     .board-container { flex-direction: column; overflow: visible; }
     .notes-panel { width: 100%; max-height: 240px; border-left: none; border-top: 1px solid var(--border); }
@@ -1374,20 +1381,51 @@ body.sidebar-collapsed .side-foot { justify-content: center; }
 
 /* ── Dashboard vague 2 suite (0.18.0, #19 #21 #22 #23) ── */
 .activity-line { margin-top: 8px; font-size: 0.82rem; color: var(--text-2); }
-.dash-tools {
-    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
-    padding: 0 24px; margin: 4px 0 14px;
+/* Barre d'outils unique du dashboard (0.20.0) : onglets
+   segmentés, filtre, tri, regroupement et vue dans UN cadre. */
+.dash-toolbar {
+    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
+    margin: 16px 24px 18px; padding: 8px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px;
 }
-.dash-tool { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--text-2); }
+.seg-tabs {
+    display: inline-flex; gap: 2px; padding: 3px;
+    background: var(--surface-2); border-radius: 9px;
+}
+.seg-tabs button {
+    display: inline-flex; align-items: center; gap: 7px;
+    padding: 6px 13px; border: none; border-radius: 7px;
+    background: transparent; color: var(--text-2);
+    cursor: pointer; font-size: 0.88rem; font-weight: 500;
+    transition: background 0.15s, color 0.15s;
+    min-height: 32px;
+}
+.seg-tabs button:hover { color: var(--text); }
+.seg-tabs button.active {
+    background: var(--surface); color: var(--text); font-weight: 600;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
+}
+.seg-count {
+    font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums;
+    background: rgba(255, 255, 255, 0.08); color: var(--text-2);
+    border-radius: 999px; padding: 1px 7px;
+}
+.seg-tabs button.active .seg-count { background: rgba(124, 92, 252, 0.22); color: var(--text); }
+.dash-toolbar .toolbar-search { padding: 0; flex: 1 1 200px; }
+.dash-toolbar .toolbar-search input { max-width: none; background: var(--surface-2); }
+.dash-tool { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--text-2); white-space: nowrap; }
 .dash-tool select {
     background: var(--surface-2); color: var(--text);
     border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px;
+    min-height: 36px;
 }
 .dash-tool-check input { width: 17px; height: 17px; accent-color: #7c5cfc; }
-.dash-view-toggle { margin-left: auto; display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
+.dash-view-toggle { margin-left: auto; display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
 .dash-view-toggle button {
     background: var(--surface-1); color: var(--text-2); border: none;
-    padding: 7px 14px; cursor: pointer; font-size: 0.88rem;
+    padding: 7px 14px; cursor: pointer; font-size: 0.88rem; min-height: 36px;
 }
 .dash-view-toggle button.active { background: var(--surface-3, #1d2942); color: var(--text); font-weight: 700; }
 .owner-group { grid-column: 1 / -1; }