feat: Introduce application version display in the frontend footer, showing both frontend and backend versions with integrated build arguments.

frontend/Dockerfile

@@ -4,6 +4,8 @@ WORKDIR /app
 COPY package*.json ./
 RUN npm install
 COPY . .
+ARG VITE_APP_VERSION=dev
+ENV VITE_APP_VERSION=${VITE_APP_VERSION}
 RUN npm run build
 
 # Run stage

frontend/src/App.css

@@ -1,4 +1,7 @@
 .app-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 90vh;
   width: 100%;
   max-width: 600px;
   background: var(--panel-bg);
@@ -11,6 +14,27 @@
   animation: slideIn 0.5s ease-out;
 }
 
+.main-content {
+  flex-grow: 1;
+}
+
+.app-footer {
+  margin-top: 2rem;
+  padding-top: 1rem;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 0.85em;
+  border-top: 1px solid var(--border-color);
+}
+
+.app-footer code {
+  background: rgba(139, 92, 246, 0.1);
+  padding: 0.2rem 0.4rem;
+  border-radius: 6px;
+  margin: 0 0.2rem;
+  color: var(--accent-primary);
+}
+
 @keyframes slideIn {
   from {
     opacity: 0;

frontend/src/App.jsx

@@ -1,12 +1,34 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import TodoList from './components/TodoList';
+import { getVersion } from './services/api';
 import './App.css';
 
 function App() {
+  const [backendVersion, setBackendVersion] = useState('...');
+  const frontendVersion = import.meta.env.VITE_APP_VERSION || 'dev';
+
+  useEffect(() => {
+    const fetchVersion = async () => {
+      try {
+        const data = await getVersion();
+        setBackendVersion(data.version || 'dev');
+      } catch (error) {
+        console.error('Error fetching backend version:', error);
+        setBackendVersion('unknown');
+      }
+    };
+    fetchVersion();
+  }, []);
+
   return (
-    <main>
-      <TodoList />
-    </main>
+    <div className="app-container">
+      <main className="main-content">
+        <TodoList />
+      </main>
+      <footer className="app-footer">
+        <p>Frontend <code>{frontendVersion}</code> | Backend <code>{backendVersion}</code></p>
+      </footer>
+    </div>
   );
 }
 

frontend/src/services/api.js

@@ -33,3 +33,11 @@ export const deleteTodo = async (id) => {
   if (!response.ok) throw new Error('Failed to delete todo');
   return true;
 };
+
+export const getVersion = async () => {
+  // Use the origin to ensure it accesses the /api/version correctly regardless of environment
+  const VERSION_URL = BASE_URL.replace('/todos', '/version');
+  const response = await fetch(VERSION_URL);
+  if (!response.ok) throw new Error('Failed to fetch version');
+  return response.json();
+};