fix(docker): persist branding uploads across container rebuilds

Mount ./data/uploads into /app/static/uploads so uploaded logos
survive image rebuilds during the update process.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/services/netbird_service.py

@@ -264,7 +264,7 @@ async def deploy_customer(db: Session, customer_id: int) -> dict[str, Any]:
             _log_action(db, customer_id, "deploy", "info",
                         "Auto-setup failed — admin must complete setup manually.")
 
-        # Step 9: Create NPM proxy host + stream (production only)
+        # Step 9: Create NPM proxy host (production only)
         npm_proxy_id = None
         npm_stream_id = None
         if not local_mode:
@@ -294,27 +294,6 @@ async def deploy_customer(db: Session, customer_id: int) -> dict[str, Any]:
                     f"(SSL: {'OK' if ssl_ok else 'FAILED — check DNS and port 80 accessibility'})",
                 )
 
-            # Create NPM UDP stream for relay STUN port
-            stream_result = await npm_service.create_stream(
-                api_url=config.npm_api_url,
-                npm_email=config.npm_api_email,
-                npm_password=config.npm_api_password,
-                incoming_port=allocated_port,
-                forwarding_host=forward_host,
-                forwarding_port=allocated_port,
-            )
-            npm_stream_id = stream_result.get("stream_id")
-            if stream_result.get("error"):
-                _log_action(
-                    db, customer_id, "deploy", "error",
-                    f"NPM stream creation failed: {stream_result['error']}",
-                )
-            else:
-                _log_action(
-                    db, customer_id, "deploy", "info",
-                    f"NPM UDP stream created: port {allocated_port} -> {forward_host}:{allocated_port}",
-                )
-
             # Note: Keep HTTPS configs even if SSL cert creation failed.
             # SSL can be set up manually in NPM later. Switching to HTTP
             # would break the dashboard when the user accesses via HTTPS.
@@ -443,17 +422,6 @@ async def undeploy_customer(db: Session, customer_id: int) -> dict[str, Any]:
             except Exception as exc:
                 _log_action(db, customer_id, "undeploy", "error", f"NPM removal error: {exc}")
 
-        # Remove NPM stream
-        if deployment.npm_stream_id and config.npm_api_email:
-            try:
-                await npm_service.delete_stream(
-                    config.npm_api_url, config.npm_api_email, config.npm_api_password,
-                    deployment.npm_stream_id,
-                )
-                _log_action(db, customer_id, "undeploy", "info", "NPM stream removed.")
-            except Exception as exc:
-                _log_action(db, customer_id, "undeploy", "error", f"NPM stream removal error: {exc}")
-
         # Remove Windows DNS A-record (non-fatal)
         if config and config.dns_enabled and config.dns_server and config.dns_zone:
             try:

docker-compose.yml

@@ -57,6 +57,7 @@ services:
       - "${WEB_UI_PORT:-8000}:8000"
     volumes:
       - ./data:/app/data:z
+      - ./data/uploads:/app/static/uploads:z
       - ./logs:/app/logs:z
       - ./backups:/app/backups:z
       - /var/run/docker.sock:/var/run/docker.sock:z

static/css/styles.css

@@ -188,3 +188,36 @@ body.i18n-loading #app-page {
     font-weight: 600;
     background: rgba(0, 0, 0, 0.02);
 }
+
+/* ---------------------------------------------------------------------------
+   Dark mode overrides (Bootstrap 5.3 data-bs-theme="dark")
+   Bootstrap handles most components automatically; only custom elements need
+   explicit overrides here.
+--------------------------------------------------------------------------- */
+[data-bs-theme="dark"] .card {
+    border-color: rgba(255, 255, 255, 0.08);
+}
+
+[data-bs-theme="dark"] .card-header {
+    background: rgba(255, 255, 255, 0.04);
+}
+
+[data-bs-theme="dark"] .log-entry {
+    border-bottom-color: rgba(255, 255, 255, 0.07);
+}
+
+[data-bs-theme="dark"] .log-time {
+    color: #9ca3af;
+}
+
+[data-bs-theme="dark"] .table th {
+    color: #9ca3af;
+}
+
+[data-bs-theme="dark"] .login-container {
+    background: linear-gradient(135deg, #0d0d1a 0%, #0a1020 50%, #071525 100%);
+}
+
+[data-bs-theme="dark"] .stat-card {
+    background: var(--bs-card-bg);
+}

static/index.html

@@ -6,6 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>NetBird MSP Appliance</title>
     <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
+    <script>
+        // Apply dark mode before page renders to prevent flash
+        (function () {
+            const saved = localStorage.getItem('darkMode');
+            if (saved === 'dark') document.documentElement.setAttribute('data-bs-theme', 'dark');
+        })();
+    </script>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
     <link href="/static/css/styles.css" rel="stylesheet">
@@ -109,6 +116,10 @@
                     <span id="nav-brand-name">NetBird MSP</span>
                 </a>
                 <div class="d-flex align-items-center">
+                    <!-- Dark Mode Toggle -->
+                    <button class="btn btn-outline-light btn-sm me-2" id="darkmode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
+                        <i id="darkmode-icon" class="bi bi-moon-fill"></i>
+                    </button>
                     <!-- Language Switcher -->
                     <div class="dropdown me-2">
                         <button class="btn btn-outline-light btn-sm dropdown-toggle" id="language-switcher-btn"

static/js/app.js

@@ -66,10 +66,35 @@ async function api(method, path, body = null) {
     return data;
 }
 
+// ---------------------------------------------------------------------------
+// Dark mode
+// ---------------------------------------------------------------------------
+function toggleDarkMode() {
+    const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark';
+    if (isDark) {
+        document.documentElement.removeAttribute('data-bs-theme');
+        localStorage.setItem('darkMode', 'light');
+        document.getElementById('darkmode-icon').className = 'bi bi-moon-fill';
+    } else {
+        document.documentElement.setAttribute('data-bs-theme', 'dark');
+        localStorage.setItem('darkMode', 'dark');
+        document.getElementById('darkmode-icon').className = 'bi bi-sun-fill';
+    }
+}
+
+function syncDarkmodeIcon() {
+    const icon = document.getElementById('darkmode-icon');
+    if (!icon) return;
+    icon.className = document.documentElement.getAttribute('data-bs-theme') === 'dark'
+        ? 'bi bi-sun-fill'
+        : 'bi bi-moon-fill';
+}
+
 // ---------------------------------------------------------------------------
 // Auth
 // ---------------------------------------------------------------------------
 async function initApp() {
+    syncDarkmodeIcon();
     await initI18n();
     await loadBranding();
     await loadAzureLoginConfig();