@matter-server/dashboard 0.2.6 → 0.2.7-alpha.0-20260118-993a1c7

package/src/components/dialogs/binding/node-binding-dialog.ts

@@ -306,7 +306,7 @@ export class NodeBindingDialog extends LitElement {
                         <md-list style="padding-bottom:18px;">
                             ${Object.values(bindings).map(
                                 (entry, index) => html`
-                  <md-list-item style="background:cornsilk;">
+                  <md-list-item class="binding-item">
                     <div style="display:flex;gap:10px;">
                         <div>node:${entry["node"]}</div>
                         <div>endpoint:${entry["endpoint"]}</div>
@@ -376,9 +376,13 @@ export class NodeBindingDialog extends LitElement {
     }
 
     static override styles = css`
+        .binding-item {
+            background: var(--md-sys-color-surface-container-high);
+        }
+
         .inline-group {
             display: flex;
-            border: 2px solid #673ab7;
+            border: 2px solid var(--md-sys-color-primary);
             padding: 1px;
             border-radius: 8px;
             position: relative;
@@ -404,8 +408,8 @@ export class NodeBindingDialog extends LitElement {
             position: absolute;
             left: 15px;
             top: -12px;
-            background: #673ab7;
-            color: white;
+            background: var(--md-sys-color-primary);
+            color: var(--md-sys-color-on-primary);
             padding: 3px 15px;
             border-radius: 4px;
         }

package/src/entrypoint/main.ts

@@ -5,6 +5,7 @@
  */
 
 import { MatterClient } from "@matter-server/ws-client";
+import "../util/theme-service.js"; // Initialize theme service early
 
 async function main() {
     import("../pages/matter-dashboard-app.js");

package/src/pages/components/header.ts

@@ -10,10 +10,11 @@ import "@material/web/iconbutton/icon-button";
 import "@material/web/list/list";
 import "@material/web/list/list-item";
 import { MatterClient } from "@matter-server/ws-client";
-import { mdiArrowLeft, mdiLogout } from "@mdi/js";
+import { mdiArrowLeft, mdiBrightnessAuto, mdiLogout, mdiWeatherNight, mdiWeatherSunny } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import "../../components/ha-svg-icon";
+import { EffectiveTheme, ThemePreference, ThemeService } from "../../util/theme-service.js";
 
 interface HeaderAction {
     label: string;
@@ -28,6 +29,50 @@ export class DashboardHeader extends LitElement {
 
     public client?: MatterClient;
 
+    @state() private _themePreference: ThemePreference = ThemeService.preference;
+    @state() private _effectiveTheme: EffectiveTheme = ThemeService.effectiveTheme;
+
+    private _unsubscribeTheme?: () => void;
+
+    override connectedCallback() {
+        super.connectedCallback();
+        this._unsubscribeTheme = ThemeService.subscribe(theme => {
+            this._effectiveTheme = theme;
+            this._themePreference = ThemeService.preference;
+        });
+    }
+
+    override disconnectedCallback() {
+        super.disconnectedCallback();
+        this._unsubscribeTheme?.();
+    }
+
+    private _cycleTheme() {
+        ThemeService.cycleTheme();
+    }
+
+    private _getThemeIcon(): string {
+        switch (this._themePreference) {
+            case "light":
+                return mdiWeatherSunny;
+            case "dark":
+                return mdiWeatherNight;
+            case "system":
+                return mdiBrightnessAuto;
+        }
+    }
+
+    private _getThemeTooltip(): string {
+        switch (this._themePreference) {
+            case "light":
+                return "Theme: Light";
+            case "dark":
+                return "Theme: Dark";
+            case "system":
+                return `Theme: System (${this._effectiveTheme})`;
+        }
+    }
+
     protected override render() {
         return html`
             <div class="header">
@@ -50,14 +95,18 @@ export class DashboardHeader extends LitElement {
                             </md-icon-button>
                         `;
                     })}
-                    <!-- optional logout button -->
-                    ${this.client?.isProduction
-                        ? nothing
-                        : html`
-                              <md-icon-button @click=${this.client?.disconnect}>
+                    <!-- theme toggle button -->
+                    <md-icon-button @click=${this._cycleTheme} .title=${this._getThemeTooltip()}>
+                        <ha-svg-icon .path=${this._getThemeIcon()}></ha-svg-icon>
+                    </md-icon-button>
+                    <!-- optional logout button (only when client exists and not in production) -->
+                    ${this.client && !this.client.isProduction
+                        ? html`
+                              <md-icon-button @click=${this.client.disconnect}>
                                   <ha-svg-icon .path=${mdiLogout}></ha-svg-icon>
                               </md-icon-button>
-                          `}
+                          `
+                        : nothing}
                 </div>
             </div>
         `;

package/src/pages/matter-dashboard-app.ts

@@ -6,11 +6,14 @@
 
 import { ContextProvider } from "@lit/context";
 import { MatterClient, MatterError } from "@matter-server/ws-client";
-import { LitElement, PropertyValueMap, html } from "lit";
+import { mdiRefresh } from "@mdi/js";
+import { LitElement, PropertyValueMap, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { clientContext } from "../client/client-context.js";
+import "../components/ha-svg-icon";
 import { clone } from "../util/clone_class.js";
 import type { Route } from "../util/routing.js";
+import "./components/header";
 import "./matter-cluster-view";
 import "./matter-endpoint-view";
 import "./matter-node-view";
@@ -34,31 +37,11 @@ class MatterDashboardApp extends LitElement {
     @state()
     private _state: "connecting" | "connected" | "error" | "disconnected" = "connecting";
 
-    private _error: string | undefined;
-
     private provider = new ContextProvider(this, { context: clientContext, initialValue: this.client });
 
     protected override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
         super.firstUpdated(_changedProperties);
-        this.client.startListening().then(
-            () => {
-                this._state = "connected";
-                this.client.addEventListener("nodes_changed", () => {
-                    this.requestUpdate();
-                    this.provider.setValue(clone(this.client));
-                });
-                this.client.addEventListener("server_info_updated", () => {
-                    this.provider.setValue(clone(this.client));
-                });
-                this.client.addEventListener("connection_lost", () => {
-                    this._state = "disconnected";
-                });
-            },
-            (err: MatterError) => {
-                this._state = "error";
-                this._error = err.message;
-            },
-        );
+        this._connect();
 
         // Handle history changes
         const updateRoute = () => {
@@ -72,17 +55,73 @@ class MatterDashboardApp extends LitElement {
         updateRoute();
     }
 
+    private _connect() {
+        this.client.startListening().then(
+            () => {
+                this._state = "connected";
+                this._setupEventListeners();
+            },
+            (_err: MatterError) => {
+                this._state = "error";
+            },
+        );
+    }
+
+    private _setupEventListeners() {
+        this.client.addEventListener("nodes_changed", () => {
+            this.requestUpdate();
+            this.provider.setValue(clone(this.client));
+        });
+        this.client.addEventListener("server_info_updated", () => {
+            this.provider.setValue(clone(this.client));
+        });
+        this.client.addEventListener("connection_lost", () => {
+            this._state = "disconnected";
+        });
+    }
+
+    private _reconnect = () => {
+        this._state = "connecting";
+        this._connect();
+    };
+
     override render() {
         if (this._state === "connecting") {
-            return html`<p>Connecting...</p>`;
+            return html`
+                <dashboard-header title="Matter Server"></dashboard-header>
+                <div class="status-page">
+                    <p class="status-message">Connecting...</p>
+                </div>
+            `;
         }
         if (this._state === "disconnected") {
-            return html`<p>Connection lost</p>`;
+            return html`
+                <dashboard-header title="Matter Server"></dashboard-header>
+                <div class="status-page">
+                    <p class="status-message error">Connection lost</p>
+                    <p class="status-hint">
+                        The connection to the Matter Server was lost. Please check if the server is running.
+                    </p>
+                    <button class="retry-button" @click=${this._reconnect}>
+                        <ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
+                        Reconnect
+                    </button>
+                </div>
+            `;
         }
         if (this._state === "error") {
             return html`
-                <p>Error: ${this._error}</p>
-                <button @click=${this.client.disconnect}>Clear stored URL</button>
+                <dashboard-header title="Matter Server"></dashboard-header>
+                <div class="status-page">
+                    <p class="status-message error">No connection</p>
+                    <p class="status-hint">
+                        Unable to connect to the Matter Server. Please check if the server is running.
+                    </p>
+                    <button class="retry-button" @click=${this._reconnect}>
+                        <ha-svg-icon .path=${mdiRefresh}></ha-svg-icon>
+                        Reconnect
+                    </button>
+                </div>
             `;
         }
         if (this._route.prefix === "node" && this._route.path.length == 3) {
@@ -122,4 +161,62 @@ class MatterDashboardApp extends LitElement {
             .route=${this._route}
         ></matter-server-view>`;
     }
+
+    static override styles = css`
+        :host {
+            display: block;
+            min-height: 100vh;
+            background-color: var(--md-sys-color-background);
+        }
+
+        .status-page {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 48px 24px;
+            text-align: center;
+        }
+
+        .status-message {
+            font-size: 1.5rem;
+            color: var(--md-sys-color-on-background);
+            margin: 0 0 16px 0;
+        }
+
+        .status-message.error {
+            color: var(--danger-color);
+        }
+
+        .status-hint {
+            font-size: 1rem;
+            color: var(--md-sys-color-on-surface-variant);
+            margin: 0;
+            max-width: 400px;
+        }
+
+        .retry-button {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            margin-top: 24px;
+            padding: 12px 24px;
+            font-size: 1rem;
+            background-color: var(--md-sys-color-primary);
+            color: var(--md-sys-color-on-primary);
+            --icon-primary-color: var(--md-sys-color-on-primary);
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        .retry-button:hover {
+            opacity: 0.9;
+        }
+
+        .retry-button ha-svg-icon {
+            width: 20px;
+            height: 20px;
+        }
+    `;
 }

package/src/util/theme-service.ts

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Theme service for managing dark/light mode preferences.
+ * Supports three modes: light, dark, and system (auto-detect from OS).
+ */
+
+export type ThemePreference = "light" | "dark" | "system";
+export type EffectiveTheme = "light" | "dark";
+
+const STORAGE_KEY = "matterTheme";
+
+class ThemeServiceImpl {
+    private _preference: ThemePreference = "system";
+    private _mediaQuery: MediaQueryList;
+    private _listeners: Set<(theme: EffectiveTheme) => void> = new Set();
+
+    constructor() {
+        this._mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        this._mediaQuery.addEventListener("change", () => this._applyTheme());
+        this._loadPreference();
+        this._applyTheme();
+    }
+
+    get preference(): ThemePreference {
+        return this._preference;
+    }
+
+    get effectiveTheme(): EffectiveTheme {
+        if (this._preference === "system") {
+            return this._mediaQuery.matches ? "dark" : "light";
+        }
+        return this._preference;
+    }
+
+    setPreference(pref: ThemePreference): void {
+        this._preference = pref;
+        localStorage.setItem(STORAGE_KEY, pref);
+        this._applyTheme();
+    }
+
+    cycleTheme(): ThemePreference {
+        const cycle: ThemePreference[] = ["light", "dark", "system"];
+        const currentIndex = cycle.indexOf(this._preference);
+        const nextIndex = (currentIndex + 1) % cycle.length;
+        this.setPreference(cycle[nextIndex]);
+        return this._preference;
+    }
+
+    subscribe(callback: (theme: EffectiveTheme) => void): () => void {
+        this._listeners.add(callback);
+        return () => this._listeners.delete(callback);
+    }
+
+    private _loadPreference(): void {
+        // Check for query parameter override (e.g., ?theme=dark)
+        const urlParams = new URLSearchParams(window.location.search);
+        const themeParam = urlParams.get("theme") as ThemePreference | null;
+        if (themeParam && ["light", "dark", "system"].includes(themeParam)) {
+            // Use query parameter value and save to localStorage
+            this._preference = themeParam;
+            localStorage.setItem(STORAGE_KEY, themeParam);
+            // Remove the query parameter from URL without reload
+            urlParams.delete("theme");
+            const newUrl = urlParams.toString()
+                ? `${window.location.pathname}?${urlParams.toString()}${window.location.hash}`
+                : `${window.location.pathname}${window.location.hash}`;
+            history.replaceState({}, "", newUrl);
+            return;
+        }
+
+        // Fall back to localStorage
+        const stored = localStorage.getItem(STORAGE_KEY) as ThemePreference | null;
+        if (stored && ["light", "dark", "system"].includes(stored)) {
+            this._preference = stored;
+        }
+        // Default is "system" if nothing stored
+    }
+
+    private _applyTheme(): void {
+        const effective = this.effectiveTheme;
+        document.documentElement.classList.toggle("dark-theme", effective === "dark");
+
+        // Update meta theme-color for mobile browsers
+        const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+        if (metaThemeColor) {
+            metaThemeColor.setAttribute("content", effective === "dark" ? "#1e1e1e" : "#03a9f4");
+        }
+
+        this._listeners.forEach(cb => cb(effective));
+    }
+}
+
+export const ThemeService = new ThemeServiceImpl();