feat(ui): move spotify status into sidebar

allstarr/wwwroot/index.html

@@ -67,6 +67,12 @@
                 <div class="sidebar-brand">
                     <div class="sidebar-title">Allstarr</div>
                     <div class="sidebar-subtitle" id="sidebar-version">Loading...</div>
+                    <div class="sidebar-status" id="status-indicator">
+                        <span class="status-badge" id="spotify-status">
+                            <span class="status-dot"></span>
+                            <span>Loading...</span>
+                        </span>
+                    </div>
                 </div>
                 <nav class="sidebar-nav">
                     <button class="sidebar-link active" type="button" data-tab="dashboard">Dashboard</button>
@@ -87,17 +93,7 @@
 
             <main class="app-main">
                 <header class="app-header">
-                    <h1>
-                        Allstarr <span class="version" id="version">Loading...</span>
-                    </h1>
-                    <div class="header-actions">
-                        <div id="status-indicator">
-                            <span class="status-badge" id="spotify-status">
-                                <span class="status-dot"></span>
-                                <span>Loading...</span>
-                            </span>
-                        </div>
-                    </div>
+                    <h1>Allstarr</h1>
                 </header>
 
                 <div class="tabs top-tabs" aria-hidden="true">

allstarr/wwwroot/js/ui.js

@@ -235,9 +235,6 @@ bindRowMenuHandlers();
 bindTableRowHandlers();
 
 export function updateStatusUI(data) {
-  const versionEl = document.getElementById("version");
-  if (versionEl) versionEl.textContent = "v" + data.version;
-
   const sidebarVersionEl = document.getElementById("sidebar-version");
   if (sidebarVersionEl) sidebarVersionEl.textContent = "v" + data.version;
 

allstarr/wwwroot/styles.css

@@ -146,9 +146,9 @@ body {
 }
 
 .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
+    max-width: 1280px;
+    margin: 0 auto 0 0;
+    padding: 20px 20px 20px 8px;
 }
 
 .app-shell {
@@ -190,6 +190,18 @@ body {
         monospace;
 }
 
+.sidebar-status {
+    margin-top: 12px;
+}
+
+.sidebar-status .status-badge {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    padding: 8px 12px;
+    border-radius: 8px;
+}
+
 .sidebar-nav {
     display: grid;
     gap: 6px;
@@ -264,12 +276,6 @@ header {
     margin-bottom: 30px;
 }
 
-.header-actions {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
 .auth-user {
     color: var(--text-secondary);
     font-size: 0.85rem;
@@ -283,12 +289,6 @@ h1 {
     gap: 10px;
 }
 
-h1 .version {
-    font-size: 0.8rem;
-    color: var(--text-secondary);
-    font-weight: normal;
-}
-
 .status-badge {
     display: inline-flex;
     align-items: center;
@@ -1040,6 +1040,10 @@ input::placeholder {
 }
 
 @media (max-width: 768px) {
+    .container {
+        padding: 12px;
+    }
+
     .app-shell {
         grid-template-columns: 1fr;
         gap: 12px;