feat: expose app version from ConfigMap in sidebar footer

frontend/src/components/Layout.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { ReactNode, useEffect, useState } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
 import Box from '@mui/material/Box'
 import Drawer from '@mui/material/Drawer'
@@ -13,6 +13,7 @@ import Tooltip from '@mui/material/Tooltip'
 import DnsIcon from '@mui/icons-material/Dns'
 import LogoutIcon from '@mui/icons-material/Logout'
 import { useAuth } from '../store/auth'
+import api from '../api'
 
 const DRAWER_WIDTH = 240
 
@@ -22,6 +23,11 @@ export default function Layout({ children, title }: Props) {
   const navigate = useNavigate()
   const location = useLocation()
   const { user, logout } = useAuth()
+  const [version, setVersion] = useState<string | null>(null)
+
+  useEffect(() => {
+    api.get('/health').then((r) => setVersion(r.data.version)).catch(() => {})
+  }, [])
 
   return (
     <Box sx={{ display: 'flex', minHeight: '100vh' }}>
@@ -47,7 +53,10 @@ export default function Layout({ children, title }: Props) {
         </List>
         <Divider sx={{ borderColor: '#2d3748' }} />
         <Box sx={{ px: 2, py: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-          <Typography variant="caption" sx={{ color: '#94a3b8' }}>{user?.username}</Typography>
+          <Box>
+            <Typography variant="caption" sx={{ color: '#94a3b8', display: 'block' }}>{user?.username}</Typography>
+            {version && <Typography variant="caption" sx={{ color: '#4a5568', fontSize: 10 }}>v{version}</Typography>}
+          </Box>
           <Tooltip title="Logout">
             <IconButton onClick={logout} size="small" sx={{ color: '#94a3b8' }}><LogoutIcon fontSize="small" /></IconButton>
           </Tooltip>