From 8caa8361022b5b427e846971a52c3a13a8d7af09 Mon Sep 17 00:00:00 2001
From: RamonCalvo <ramon.calvo@gmail.com>
Date: Sat, 28 Mar 2026 20:46:41 -0600
Subject: [PATCH] feat: add version footer with VITE_DEPLOYED_VERSION

Shows v:dev locally and v:<commit-hash> in deployed builds.
Variable passed as build arg through Docker Compose.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .env.example           |  1 +
 docker-compose.yml     |  1 +
 frontend/Dockerfile    |  1 +
 frontend/src/App.vue   |  5 +++++
 frontend/src/style.css | 19 ++++++++++++++++++-
 5 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index dc4ba27..2e2922e 100644
--- a/.env.example
+++ b/.env.example
@@ -11,3 +11,4 @@ VITE_FIREBASE_STORAGE_BUCKET=
 VITE_FIREBASE_MESSAGING_SENDER_ID=
 VITE_FIREBASE_APP_ID=
 VITE_FIREBASE_MEASUREMENT_ID=
+VITE_DEPLOYED_VERSION=dev
diff --git a/docker-compose.yml b/docker-compose.yml
index a565c34..d93040f 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -41,6 +41,7 @@ services:
         - VITE_FIREBASE_MESSAGING_SENDER_ID=${VITE_FIREBASE_MESSAGING_SENDER_ID}
         - VITE_FIREBASE_APP_ID=${VITE_FIREBASE_APP_ID}
         - VITE_FIREBASE_MEASUREMENT_ID=${VITE_FIREBASE_MEASUREMENT_ID}
+        - VITE_DEPLOYED_VERSION=${VITE_DEPLOYED_VERSION:-dev}
     ports:
       - "3000:80"
     depends_on:
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 7b4784d..23a4f3a 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -10,6 +10,7 @@ ARG VITE_FIREBASE_STORAGE_BUCKET
 ARG VITE_FIREBASE_MESSAGING_SENDER_ID
 ARG VITE_FIREBASE_APP_ID
 ARG VITE_FIREBASE_MEASUREMENT_ID
+ARG VITE_DEPLOYED_VERSION=dev
 RUN npm run build
 
 FROM nginx:alpine
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2fbfcd9..76cfac7 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -24,6 +24,7 @@ const filtered = computed(() => {
 })
 
 const year = new Date().getFullYear()
+const version = import.meta.env.VITE_DEPLOYED_VERSION || 'dev'
 
 async function load() {
   if (!user.value) return
@@ -109,5 +110,9 @@ watch(user, (u) => { if (u) load() })
         @click="activeIndex = i"
       >{{ section.letter }}</button>
     </nav>
+
+    <footer class="footer">
+      <span class="footer-version">v:{{ version }}</span>
+    </footer>
   </div>
 </template>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 013bee3..b627e54 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -23,7 +23,7 @@ body {
 .layout {
   display: grid;
   grid-template-columns: 1fr auto;
-  height: 100vh;
+  grid-template-rows: 1fr auto;
   border: 1px solid #222;
   margin: 12px;
   height: calc(100vh - 24px);
@@ -371,6 +371,23 @@ body {
   color: #fff;
 }
 
+/* Footer */
+.footer {
+  grid-column: 1 / -1;
+  border-top: 1px solid #222;
+  padding: 0.5rem 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.footer-version {
+  font-size: 0.6rem;
+  color: #333;
+  font-weight: 300;
+  font-family: 'Inter', monospace;
+  letter-spacing: 0.05em;
+}
+
 /* Loading */
 .loading-screen {
   display: flex;