@matter-server/dashboard 0.5.15 → 0.6.0

package/src/pages/cluster-commands/base-cluster-commands.ts

@@ -7,6 +7,7 @@
 import { MatterClient, MatterNode } from "@matter-server/ws-client";
 import { LitElement, css, type CSSResultGroup } from "lit";
 import { property } from "lit/decorators.js";
+import { reducedMotionStyles } from "../../util/shared-styles.js";
 
 /**
  * Base class for cluster-specific command panels.
@@ -39,84 +40,87 @@ export abstract class BaseClusterCommands extends LitElement {
         }
     }
 
-    static override styles: CSSResultGroup = css`
-        :host {
-            display: block;
-        }
-
-        details.command-panel {
-            background-color: var(--md-sys-color-surface-container);
-            border-radius: 12px;
-            overflow: hidden;
-        }
-
-        details.command-panel summary {
-            padding: 16px;
-            font-weight: 500;
-            color: var(--md-sys-color-on-surface);
-            cursor: pointer;
-            user-select: none;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        details.command-panel summary:hover {
-            background-color: var(--md-sys-color-surface-container-high);
-        }
-
-        details.command-panel summary::before {
-            content: "▶";
-            font-size: 12px;
-            transition: transform 0.2s ease;
-        }
-
-        details.command-panel[open] summary::before {
-            transform: rotate(90deg);
-        }
-
-        details.command-panel summary::-webkit-details-marker {
-            display: none;
-        }
-
-        .command-content {
-            padding: 0 16px 16px 16px;
-        }
-
-        .command-row {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            flex-wrap: wrap;
-        }
-
-        .command-row label {
-            font-size: 14px;
-            color: var(--md-sys-color-on-surface-variant);
-            display: flex;
-            align-items: center;
-            gap: 4px;
-        }
-
-        .command-row input[type="number"] {
-            width: 70px;
-            padding: 8px;
-            border: 1px solid var(--md-sys-color-outline);
-            border-radius: 4px;
-            background: var(--md-sys-color-surface);
-            color: var(--md-sys-color-on-surface);
-        }
-
-        .command-row input[type="checkbox"] {
-            width: 16px;
-            height: 16px;
-            margin: 0;
-        }
-
-        md-filled-button,
-        md-outlined-button {
-            --md-filled-button-container-height: 36px;
-            --md-outlined-button-container-height: 36px;
-        }
-    `;
+    static override styles: CSSResultGroup = [
+        reducedMotionStyles,
+        css`
+            :host {
+                display: block;
+            }
+
+            details.command-panel {
+                background-color: var(--md-sys-color-surface-container);
+                border-radius: 12px;
+                overflow: hidden;
+            }
+
+            details.command-panel summary {
+                padding: 16px;
+                font-weight: 500;
+                color: var(--md-sys-color-on-surface);
+                cursor: pointer;
+                user-select: none;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            }
+
+            details.command-panel summary:hover {
+                background-color: var(--md-sys-color-surface-container-high);
+            }
+
+            details.command-panel summary::before {
+                content: "▶";
+                font-size: 12px;
+                transition: transform 0.2s ease;
+            }
+
+            details.command-panel[open] summary::before {
+                transform: rotate(90deg);
+            }
+
+            details.command-panel summary::-webkit-details-marker {
+                display: none;
+            }
+
+            .command-content {
+                padding: 0 16px 16px 16px;
+            }
+
+            .command-row {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+                flex-wrap: wrap;
+            }
+
+            .command-row label {
+                font-size: 14px;
+                color: var(--md-sys-color-on-surface-variant);
+                display: flex;
+                align-items: center;
+                gap: 4px;
+            }
+
+            .command-row input[type="number"] {
+                width: 70px;
+                padding: 8px;
+                border: 1px solid var(--md-sys-color-outline);
+                border-radius: 4px;
+                background: var(--md-sys-color-surface);
+                color: var(--md-sys-color-on-surface);
+            }
+
+            .command-row input[type="checkbox"] {
+                width: 16px;
+                height: 16px;
+                margin: 0;
+            }
+
+            md-filled-button,
+            md-outlined-button {
+                --md-filled-button-container-height: 36px;
+                --md-outlined-button-container-height: 36px;
+            }
+        `,
+    ];
 }

package/src/pages/components/header.ts

@@ -15,6 +15,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { showLogLevelDialog } from "../../components/dialogs/settings/show-log-level-dialog.js";
 import "../../components/ha-svg-icon";
+import { reducedMotionStyles } from "../../util/shared-styles.js";
 import { EffectiveTheme, ThemePreference, ThemeService } from "../../util/theme-service.js";
 
 interface HeaderAction {
@@ -174,68 +175,71 @@ export class DashboardHeader extends LitElement {
         `;
     }
 
-    static override styles = css`
-        .header {
-            background-color: var(--md-sys-color-primary);
-            color: var(--md-sys-color-on-primary);
-            --icon-primary-color: var(--md-sys-color-on-primary);
-            font-weight: 400;
-            display: flex;
-            align-items: center;
-            padding-left: 18px;
-            padding-right: 8px;
-            min-height: 48px;
-        }
+    static override styles = [
+        reducedMotionStyles,
+        css`
+            .header {
+                background-color: var(--md-sys-color-primary);
+                color: var(--md-sys-color-on-primary);
+                --icon-primary-color: var(--md-sys-color-on-primary);
+                font-weight: 400;
+                display: flex;
+                align-items: center;
+                padding-left: 18px;
+                padding-right: 8px;
+                min-height: 48px;
+            }
 
-        md-icon-button {
-            margin-right: 8px;
-        }
+            md-icon-button {
+                margin-right: 8px;
+            }
 
-        .title {
-            flex: 1;
-            min-width: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
+            .title {
+                flex: 1;
+                min-width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
 
-        .actions {
-            display: flex;
-            max-width: 100%;
-            align-items: center;
-        }
+            .actions {
+                display: flex;
+                max-width: 100%;
+                align-items: center;
+            }
 
-        .nav-tabs {
-            display: flex;
-            margin-left: 24px;
-            gap: 4px;
-        }
+            .nav-tabs {
+                display: flex;
+                margin-left: 24px;
+                gap: 4px;
+            }
 
-        .nav-tab {
-            padding: 8px 16px;
-            color: var(--md-sys-color-on-primary);
-            text-decoration: none;
-            font-size: 0.875rem;
-            font-weight: 500;
-            border-radius: 4px 4px 0 0;
-            opacity: 0.7;
-            transition: opacity 0.2s;
-        }
+            .nav-tab {
+                padding: 8px 16px;
+                color: var(--md-sys-color-on-primary);
+                text-decoration: none;
+                font-size: 0.875rem;
+                font-weight: 500;
+                border-radius: 4px 4px 0 0;
+                opacity: 0.7;
+                transition: opacity 0.2s;
+            }
 
-        .nav-tab:hover {
-            opacity: 0.9;
-        }
+            .nav-tab:hover {
+                opacity: 0.9;
+            }
 
-        .nav-tab.active {
-            opacity: 1;
-            background-color: rgba(255, 255, 255, 0.15);
-            border-bottom: 2px solid var(--md-sys-color-on-primary);
-        }
+            .nav-tab.active {
+                opacity: 1;
+                background-color: rgba(255, 255, 255, 0.15);
+                border-bottom: 2px solid var(--md-sys-color-on-primary);
+            }
 
-        @media (max-width: 768px) {
-            .nav-tabs {
-                display: none;
+            @media (max-width: 768px) {
+                .nav-tabs {
+                    display: none;
+                }
             }
-        }
-    `;
+        `,
+    ];
 }

package/src/pages/components/node-details.ts

@@ -166,7 +166,7 @@ export class NodeDetails extends LitElement {
                 title: "Reinterview node",
                 text: "Success!",
             });
-            location.reload();
+            location.hash = "#";
         } catch (err: any) {
             showAlertDialog({
                 title: "Failed to reinterview node",

package/src/pages/components/server-details.ts

@@ -102,6 +102,8 @@ export class ServerDetails extends LitElement {
                         title: "Failed to import test node",
                         text: err.message,
                     });
+                } finally {
+                    fileElem.value = "";
                 }
             };
         }

package/src/pages/matter-cluster-view.ts

@@ -5,11 +5,13 @@
  */
 
 import { provide } from "@lit/context";
+import "@material/web/button/outlined-button";
 import "@material/web/divider/divider";
 import "@material/web/iconbutton/icon-button";
 import "@material/web/list/list";
 import "@material/web/list/list-item";
 import { isTestNodeId, MatterClient, MatterNode, toBigIntAwareJson } from "@matter-server/ws-client";
+import { mdiAlertCircleOutline } from "@mdi/js";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
@@ -19,6 +21,7 @@ import "../components/ha-svg-icon";
 import "../pages/components/node-details";
 // Cluster command components (auto-register on import)
 import { formatHex, formatNodeAddress, getEffectiveFabricIndex } from "../util/format_hex.js";
+import { notFoundStyles } from "../util/shared-styles.js";
 import { getClusterCommandsTag } from "./cluster-commands/index.js";
 import { bindingContext } from "./components/context.js";
 
@@ -74,8 +77,12 @@ class MatterClusterView extends LitElement {
     override render() {
         if (!this.node || this.endpoint == undefined || this.cluster == undefined) {
             return html`
-                <p>Node, endpoint or cluster not found!</p>
-                <button @click=${this._goBack}>Back</button>
+                <dashboard-header title="Not found" .client=${this.client} backButton="#"></dashboard-header>
+                <div class="not-found">
+                    <ha-svg-icon .path=${mdiAlertCircleOutline}></ha-svg-icon>
+                    <p>Node, endpoint, or cluster not found</p>
+                    <md-outlined-button @click=${this._goBack}>Back</md-outlined-button>
+                </div>
             `;
         }
 
@@ -127,13 +134,13 @@ class MatterClusterView extends LitElement {
                                 </div>
                                 <div slot="end">
                                     ${toBigIntAwareJson(attribute.value).length > 30
-                                        ? html`<button
+                                        ? html`<md-outlined-button
                                               @click=${() => {
                                                   this._showAttributeValue(attribute.value);
                                               }}
                                           >
                                               Show value
-                                          </button>`
+                                          </md-outlined-button>`
                                         : html`<code>${toBigIntAwareJson(attribute.value)}</code>`}
                                 </div>
                             </md-list-item>
@@ -190,45 +197,48 @@ class MatterClusterView extends LitElement {
         history.back();
     }
 
-    static override styles = css`
-        :host {
-            display: block;
-            background-color: var(--md-sys-color-background);
-        }
+    static override styles = [
+        notFoundStyles,
+        css`
+            :host {
+                display: block;
+                background-color: var(--md-sys-color-background);
+            }
 
-        .header {
-            background-color: var(--md-sys-color-primary);
-            color: var(--md-sys-color-on-primary);
-            --icon-primary-color: var(--md-sys-color-on-primary);
-            font-weight: 400;
-            display: flex;
-            align-items: center;
-            padding-right: 8px;
-            height: 48px;
-        }
+            .header {
+                background-color: var(--md-sys-color-primary);
+                color: var(--md-sys-color-on-primary);
+                --icon-primary-color: var(--md-sys-color-on-primary);
+                font-weight: 400;
+                display: flex;
+                align-items: center;
+                padding-right: 8px;
+                height: 48px;
+            }
 
-        md-icon-button {
-            margin-right: 8px;
-        }
+            md-icon-button {
+                margin-right: 8px;
+            }
 
-        .flex {
-            flex: 1;
-        }
+            .flex {
+                flex: 1;
+            }
 
-        .container {
-            padding: 16px;
-            max-width: 95%;
-            margin: 0 auto;
-        }
+            .container {
+                padding: 16px;
+                max-width: 95%;
+                margin: 0 auto;
+            }
 
-        .status {
-            color: var(--danger-color);
-            font-weight: bold;
-            font-size: 0.8em;
-        }
+            .status {
+                color: var(--danger-color);
+                font-weight: bold;
+                font-size: 0.8em;
+            }
 
-        md-list-item.alternate-row {
-            background-color: rgba(128, 128, 128, 0.1);
-        }
-    `;
+            md-list-item.alternate-row {
+                background-color: var(--md-sys-color-surface-container-low);
+            }
+        `,
+    ];
 }

package/src/pages/matter-endpoint-view.ts

@@ -4,18 +4,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import "@material/web/button/outlined-button";
 import "@material/web/divider/divider";
 import "@material/web/iconbutton/icon-button";
 import "@material/web/list/list";
 import "@material/web/list/list-item";
 import { MatterClient, MatterNode, isTestNodeId } from "@matter-server/ws-client";
-import { mdiChevronRight } from "@mdi/js";
+import { mdiAlertCircleOutline, mdiChevronRight } from "@mdi/js";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
 import { DeviceType, clusters, device_types } from "../client/models/descriptions.js";
 import "../components/ha-svg-icon";
 import { formatHex, formatNodeAddress, getEffectiveFabricIndex } from "../util/format_hex.js";
+import { notFoundStyles } from "../util/shared-styles.js";
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -57,8 +59,12 @@ class MatterEndpointView extends LitElement {
     override render() {
         if (!this.node || this.endpoint == undefined) {
             return html`
-                <p>Node or endpoint not found!</p>
-                <button @click=${this._goBack}>Back</button>
+                <dashboard-header title="Not found" .client=${this.client} backButton="#"></dashboard-header>
+                <div class="not-found">
+                    <ha-svg-icon .path=${mdiAlertCircleOutline}></ha-svg-icon>
+                    <p>Node or endpoint not found</p>
+                    <md-outlined-button @click=${this._goBack}>Back</md-outlined-button>
+                </div>
             `;
         }
 
@@ -120,41 +126,44 @@ class MatterEndpointView extends LitElement {
         history.back();
     }
 
-    static override styles = css`
-        :host {
-            display: block;
-            background-color: var(--md-sys-color-background);
-        }
-
-        .header {
-            background-color: var(--md-sys-color-primary);
-            color: var(--md-sys-color-on-primary);
-            --icon-primary-color: var(--md-sys-color-on-primary);
-            font-weight: 400;
-            display: flex;
-            align-items: center;
-            padding-right: 8px;
-            height: 48px;
-        }
-
-        md-icon-button {
-            margin-right: 8px;
-        }
-
-        .flex {
-            flex: 1;
-        }
-
-        .container {
-            padding: 16px;
-            max-width: 95%;
-            margin: 0 auto;
-        }
-
-        .status {
-            color: var(--danger-color);
-            font-weight: bold;
-            font-size: 0.8em;
-        }
-    `;
+    static override styles = [
+        notFoundStyles,
+        css`
+            :host {
+                display: block;
+                background-color: var(--md-sys-color-background);
+            }
+
+            .header {
+                background-color: var(--md-sys-color-primary);
+                color: var(--md-sys-color-on-primary);
+                --icon-primary-color: var(--md-sys-color-on-primary);
+                font-weight: 400;
+                display: flex;
+                align-items: center;
+                padding-right: 8px;
+                height: 48px;
+            }
+
+            md-icon-button {
+                margin-right: 8px;
+            }
+
+            .flex {
+                flex: 1;
+            }
+
+            .container {
+                padding: 16px;
+                max-width: 95%;
+                margin: 0 auto;
+            }
+
+            .status {
+                color: var(--danger-color);
+                font-weight: bold;
+                font-size: 0.8em;
+            }
+        `,
+    ];
 }