Display version prefix in title heading

Author: polius

api/main.py

@@ -13,7 +13,7 @@
 SECRET_KEY = os.getenv("SECRET_KEY")
 
 # Init FastAPI
-app = FastAPI(title='FileSync API', version='1.0', root_path="/api")
+app = FastAPI(title='FileSync API', version='3.6.0', root_path="/api")
 
 # Allow your dev frontend origin
 app.add_middleware(
@@ -27,7 +27,7 @@
 # Add root route
 @app.get("/")
 async def root():
-    return {"message": "Welcome to FileSync API!"}
+    return {"message": "Welcome to FileSync API!", "version": app.version}
 
 # Add health check route
 @app.get("/health")

web/css/style.css

@@ -68,6 +68,20 @@ h1 {
   letter-spacing: -0.02em;
 }
 
+.app-version {
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  color: var(--color-h1);
+  padding: 0.15rem 0.6rem;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background-color: var(--color-surface);
+  border: 1.5px solid var(--color-border);
+  border-radius: 20px;
+  position: relative;
+  top: -2px;
+}
+
 h2 {
   color: var(--color-h2);
   font-size: 1.6rem;

web/index.html

@@ -43,7 +43,7 @@
             </div>
           </div>
           <div class="col col-auto">
-            <h1 class="fw-semibold" style="font-family: Acme; font-size: 2.8rem; margin-bottom:0">FileSync</h1>
+            <h1 class="fw-semibold" style="font-family: Acme; font-size: 2.8rem; margin-bottom:0; display: inline-flex; align-items: baseline; gap: 12px;">FileSync<span class="app-version" id="appVersion"></span></h1>
           </div>
         </div>
         <h2 class="fw-normal" style="margin:0; font-size: calc(1.05rem + 0.3vw); letter-spacing: -0.01em">Send files from one device to many in real-time.</h2>

web/js/modules/script.js

@@ -23,8 +23,18 @@ if (window.localStorage.getItem('mode') == 'light') {
   qr.set({foreground: '#212529'});
 }
 
+// Load app version from API
+async function loadVersion() {
+  const res = await fetch('/api/');
+  const data = await res.json();
+  document.getElementById('appVersion').textContent = `v${data.version}`;
+}
+
 // On Load
 async function onLoad() {
+  // Load version badge
+  await loadVersion();
+
   // Create current user
   user = new User(room_id)