From 0cea78b3b13542c4728f2b125c20699d52236624 Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Mon, 27 Jul 2026 18:02:01 -0400
Subject: [PATCH] feat: badge version dans le header + tag v2.0.0-dev
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- index.html: <div class="version-badge"> dans header-right
- app.js: fetch /api/health → affiche version dans le badge
- style.css: .version-badge discret (10px, mono, muted)
- Tag: v2.0.0-dev créé → git describe retourne v2.0.0-dev
---
 frontend/index.html |  1 +
 frontend/js/app.js  | 11 +++++++++++
 frontend/style.css  | 15 +++++++++++++++
 3 files changed, 27 insertions(+)

diff --git a/frontend/index.html b/frontend/index.html
index 4b810f9..3685243 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -432,6 +432,7 @@
                     </div>
                     <!-- User menu (visible when logged in) -->
                     <div class="user-menu" id="user-menu"></div>
+                    <div class="version-badge" id="version-badge" title="Version ObsiGate"></div>
                     <div class="header-menu">
                         <button
                             class="header-menu-btn"
diff --git a/frontend/js/app.js b/frontend/js/app.js
index c878525..0dc50cb 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -104,4 +104,15 @@ async function init() {
 document.addEventListener("DOMContentLoaded", () => {
   init();
   Sync.init();
+  // Show version in header
+  fetch('/api/health')
+    .then(r => r.json())
+    .then(d => {
+      const badge = document.getElementById('version-badge');
+      if (badge && d.version) {
+        badge.textContent = d.version;
+        badge.style.display = 'inline-block';
+      }
+    })
+    .catch(() => {});
 });
diff --git a/frontend/style.css b/frontend/style.css
index fcf8694..0b65ada 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -522,6 +522,21 @@ a:hover {
   background: color-mix(in srgb, var(--accent) 10%, transparent);
 }
 
+/* Version badge in header */
+.version-badge {
+  display: none;
+  font-size: 10px;
+  color: var(--text-muted);
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--text-muted) 15%, transparent);
+  font-family: var(--font-mono, monospace);
+  white-space: nowrap;
+  cursor: default;
+  user-select: none;
+}
+
 .header-menu-dropdown {
   display: none;
   position: absolute;