feat: add version footer to dashboard UI (v1.2.1)

- /health endpoint now includes version field
- Footer displays 'sofarr vX.Y.Z' fetched on page load
- Subtle .app-version styling (smaller, dimmed)
- Bump version to 1.2.1, update CHANGELOG

CHANGELOG.md

@@ -6,6 +6,14 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ---
 
+## [1.2.1] - 2026-05-17
+
+### Added
+
+- **Version footer** — the dashboard footer now displays the running app version (e.g. `sofarr v1.2.1`), fetched from the `/health` endpoint on page load.
+
+---
+
 ## [1.2.0] - 2025-05-17
 
 ### Security

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sofarr",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A personal media download dashboard that shows your downloads 'so far' while you relax on the sofa waiting for your *arr services to finish",
   "main": "server/index.js",
   "scripts": {

public/app.js

@@ -27,13 +27,25 @@ document.addEventListener('DOMContentLoaded', () => {
   initThemeSwitcher();
   initTabs();
   initHistoryControls();
-  
+  loadAppVersion();
+
   document.getElementById('login-form').addEventListener('submit', handleLogin);
   document.getElementById('logout-btn').addEventListener('click', handleLogout);
   document.getElementById('show-all-toggle').addEventListener('change', handleShowAllToggle);
   document.getElementById('status-btn').addEventListener('click', toggleStatusPanel);
 });
 
+function loadAppVersion() {
+  fetch('/health')
+    .then(r => r.json())
+    .then(data => {
+      if (data.version) {
+        document.getElementById('app-version').textContent = `sofarr v${data.version}`;
+      }
+    })
+    .catch(() => {});
+}
+
 function initThemeSwitcher() {
   const saved = localStorage.getItem('sofarr-theme') || 'light';
   document.querySelectorAll('.theme-btn').forEach(btn => {

public/index.html

@@ -112,6 +112,7 @@
 
             <footer class="app-footer">
                 <p>Ensure your media is tagged with your username in Sonarr/Radarr to match downloads to users.</p>
+                <p class="app-version" id="app-version"></p>
             </footer>
         </div>
     </div>

public/style.css

@@ -866,6 +866,12 @@ body {
   opacity: 0.8;
 }
 
+.app-version {
+  font-size: 0.72rem;
+  opacity: 0.5;
+  margin-top: 4px;
+}
+
 /* ===== Login ===== */
 .login-container {
   display: flex;

server/index.js

@@ -197,7 +197,7 @@ app.use(express.json({ limit: '64kb' })); // prevent oversized JSON payloads
 // Used by Docker HEALTHCHECK and orchestrators.
 // ---------------------------------------------------------------------------
 app.get('/health', (req, res) => {
-  res.json({ status: 'ok', uptime: process.uptime() });
+  res.json({ status: 'ok', uptime: process.uptime(), version });
 });
 
 app.get('/ready', (req, res) => {