Add version display in footer

- 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>
This commit is contained in:
2025-11-08 11:35:05 +01:00
parent b42fc95c61
commit 4f136eb3cb
2 changed files with 38 additions and 3 deletions

View File

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