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

@@ -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

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:

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

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>

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;