From 4f136eb3cbe4c079b134213231fd2ab2e5f3b537 Mon Sep 17 00:00:00 2001
From: Bas van den Aakster <bvdaakster@gmail.com>
Date: Sat, 8 Nov 2025 11:35:05 +0100
Subject: [PATCH] Add version display in footer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add version state tracking for demo and server versions
- Create loadVersions() function to fetch server version via API
- Update footer to display both demo version and server version
- Update vite.config.js to inject git commit hash as VITE_VERSION

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/App.jsx    | 29 ++++++++++++++++++++++++++---
 vite.config.js | 12 ++++++++++++
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index e468da4..c89880c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -60,6 +60,10 @@ function App() {
   const [channelReady, setChannelReady] = useState(false);
   const [fileUploadProgress, setFileUploadProgress] = useState(null);
 
+  // Version state
+  const [demoVersion, setDemoVersion] = useState('unknown');
+  const [serverVersion, setServerVersion] = useState('unknown');
+
   const connectionRef = useRef(null);
   const dataChannelRef = useRef(null);
   const fileTransfersRef = useRef(new Map()); // Track ongoing file transfers
@@ -68,6 +72,7 @@ function App() {
   useEffect(() => {
     log('Demo initialized', 'info');
     loadTopics();
+    loadVersions();
   }, []);
 
   const log = (message, type = 'info') => {
@@ -75,6 +80,19 @@ function App() {
     setLogs(prev => [...prev, { message, type, timestamp }]);
   };
 
+  const loadVersions = async () => {
+    // Get demo version from build environment
+    setDemoVersion(import.meta.env.VITE_VERSION || 'unknown');
+
+    // Get server version from API
+    try {
+      const { version } = await client.getVersion();
+      setServerVersion(version);
+    } catch (error) {
+      log(`Error loading server version: ${error.message}`, 'error');
+    }
+  };
+
   const loadTopics = async () => {
     try {
       const { topics } = await client.listTopics();
@@ -518,9 +536,14 @@ function App() {
       </main>
 
       <footer className="footer">
-        <a href="https://ronde.vu" target="_blank" rel="noopener noreferrer">
-          ronde.vu
-        </a>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', alignItems: 'center' }}>
+          <a href="https://ronde.vu" target="_blank" rel="noopener noreferrer">
+            ronde.vu
+          </a>
+          <div style={{ fontSize: '0.75rem', color: '#888' }}>
+            Demo: {demoVersion} | Server: {serverVersion}
+          </div>
+        </div>
       </footer>
     </div>
   );
diff --git a/vite.config.js b/vite.config.js
index b6dbafb..d9584c6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,5 +1,14 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { execSync } from 'child_process';
+
+// Get git commit hash
+let version = 'unknown';
+try {
+  version = execSync('git rev-parse --short HEAD', { encoding: 'utf8' }).trim();
+} catch (err) {
+  console.warn('Could not get git commit hash, using "unknown"');
+}
 
 export default defineConfig({
   plugins: [react()],
@@ -10,5 +19,8 @@ export default defineConfig({
   build: {
     outDir: 'dist',
     sourcemap: true
+  },
+  define: {
+    'import.meta.env.VITE_VERSION': JSON.stringify(version)
   }
 });