@matter-server/dashboard 0.5.15 → 0.6.0

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

@@ -9,6 +9,7 @@ import { mdiFitToScreen, mdiMagnifyMinus, mdiMagnifyPlus, mdiPause, mdiPlay } fr
 import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import "../components/ha-svg-icon";
+import { reducedMotionStyles } from "../util/shared-styles.js";
 import "./components/footer";
 import "./components/header";
 import type { ActiveView } from "./components/header.js";
@@ -324,234 +325,242 @@ class MatterNetworkView extends LitElement {
         `;
     }
 
-    static override styles = css`
-        :host {
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-            height: 100dvh; /* dynamic viewport height - fallback above for older browsers */
-            overflow: hidden;
-            background-color: var(--md-sys-color-background, #fafafa);
-        }
-
-        .content {
-            display: flex;
-            flex: 1 1 0;
-            padding: 8px 16px;
-            gap: 8px;
-            max-width: 1600px;
-            margin: 0 auto;
-            width: 100%;
-            box-sizing: border-box;
-            min-height: 0;
-            overflow: hidden;
-        }
-
-        .main-area {
-            flex: 1 1 0;
-            display: flex;
-            flex-direction: column;
-            min-width: 0;
-            min-height: 0;
-            overflow: hidden;
-        }
-
-        .graph-section {
-            flex: 1 1 0;
-            min-height: 0;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-
-        .graph-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 4px;
-            flex-shrink: 0;
-        }
+    static override styles = [
+        reducedMotionStyles,
+        css`
+            :host {
+                display: flex;
+                flex-direction: column;
+                height: 100vh;
+                height: 100dvh; /* dynamic viewport height - fallback above for older browsers */
+                overflow: hidden;
+                background-color: var(--md-sys-color-background, #fafafa);
+            }
 
-        .graph-header h2 {
-            margin: 0;
-            font-size: 1.1rem;
-            font-weight: 500;
-            color: var(--md-sys-color-on-background, #333);
-        }
+            .content {
+                display: flex;
+                flex: 1 1 0;
+                padding: 8px 16px;
+                gap: 8px;
+                max-width: 1600px;
+                margin: 0 auto;
+                width: 100%;
+                box-sizing: border-box;
+                min-height: 0;
+                overflow: hidden;
+            }
 
-        .graph-controls {
-            display: flex;
-            gap: 4px;
-        }
+            .main-area {
+                flex: 1 1 0;
+                display: flex;
+                flex-direction: column;
+                min-width: 0;
+                min-height: 0;
+                overflow: hidden;
+            }
 
-        .graph-actions {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            min-width: 0;
-        }
+            .graph-section {
+                flex: 1 1 0;
+                min-height: 0;
+                display: flex;
+                flex-direction: column;
+                overflow: hidden;
+            }
 
-        .thread-search {
-            display: flex;
-            align-items: center;
-            gap: 4px;
-        }
+            .graph-header {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 4px;
+                flex-shrink: 0;
+            }
 
-        .thread-search input {
-            width: 260px;
-            max-width: 45vw;
-            padding: 6px 8px;
-            border: 1px solid var(--md-sys-color-outline-variant, #ccc);
-            border-radius: 4px;
-            background-color: var(--md-sys-color-surface, #fff);
-            color: var(--md-sys-color-on-surface, #1c1b1f);
-            font: inherit;
-        }
+            .graph-header h2 {
+                margin: 0;
+                font-size: 1.1rem;
+                font-weight: 500;
+                color: var(--md-sys-color-on-background, #333);
+            }
 
-        .thread-search input:focus {
-            outline: 2px solid var(--md-sys-color-primary, #6750a4);
-            outline-offset: 1px;
-        }
+            .graph-controls {
+                display: flex;
+                gap: 4px;
+            }
 
-        .search-button {
-            padding: 6px 10px;
-            border: 1px solid var(--md-sys-color-outline-variant, #ccc);
-            border-radius: 4px;
-            background-color: var(--md-sys-color-surface, #fff);
-            color: var(--md-sys-color-on-surface, #1c1b1f);
-            cursor: pointer;
-            font: inherit;
-        }
+            .graph-actions {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                min-width: 0;
+            }
 
-        .search-button:hover {
-            background-color: var(--md-sys-color-surface-container-high, #e8e8e8);
-        }
+            .thread-search {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+            }
 
-        .thread-search-status {
-            margin: 0 0 6px;
-            font-size: 0.85rem;
-            color: var(--md-sys-color-on-surface-variant, #666);
-        }
+            .thread-search input {
+                width: 260px;
+                max-width: 45vw;
+                padding: 6px 8px;
+                border: 1px solid var(--md-sys-color-outline-variant, #ccc);
+                border-radius: 4px;
+                background-color: var(--md-sys-color-surface, #fff);
+                color: var(--md-sys-color-on-surface, #1c1b1f);
+                font: inherit;
+            }
 
-        .thread-search-status.found {
-            color: #2e7d32;
-        }
+            .thread-search input:focus {
+                outline: 2px solid var(--md-sys-color-primary, #6750a4);
+                outline-offset: 1px;
+            }
 
-        .thread-search-status.not-found {
-            color: #c62828;
-        }
+            .search-button {
+                padding: 6px 10px;
+                border: 1px solid var(--md-sys-color-outline-variant, #ccc);
+                border-radius: 4px;
+                background-color: var(--md-sys-color-surface, #fff);
+                color: var(--md-sys-color-on-surface, #1c1b1f);
+                cursor: pointer;
+                font: inherit;
+            }
 
-        .control-button {
-            background: none;
-            border: 1px solid var(--md-sys-color-outline-variant, #ccc);
-            border-radius: 4px;
-            padding: 6px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition:
-                background-color 0.2s,
-                border-color 0.2s;
-        }
+            .search-button:hover {
+                background-color: var(--md-sys-color-surface-container-high, #e8e8e8);
+            }
 
-        .control-button:hover {
-            background-color: var(--md-sys-color-surface-container-high, #e8e8e8);
-        }
+            .search-button:focus-visible {
+                outline: 2px solid var(--md-sys-color-primary);
+                outline-offset: 1px;
+            }
 
-        .control-button.active {
-            background-color: var(--md-sys-color-primary-container, #e8def8);
-            border-color: var(--md-sys-color-primary, #6750a4);
-        }
+            .thread-search-status {
+                margin: 0 0 6px;
+                font-size: 0.85rem;
+                color: var(--md-sys-color-on-surface-variant, #666);
+            }
 
-        .control-button ha-svg-icon {
-            --icon-primary-color: var(--md-sys-color-on-surface-variant, #666);
-        }
+            .thread-search-status.found {
+                color: var(--signal-color-strong);
+            }
 
-        .control-button.active ha-svg-icon {
-            --icon-primary-color: var(--md-sys-color-on-primary-container, #21005d);
-        }
+            .thread-search-status.not-found {
+                color: var(--md-sys-color-error);
+            }
 
-        .graph-section thread-graph,
-        .graph-section wifi-graph {
-            flex: 1 1 0;
-            min-height: 0;
-        }
+            .control-button {
+                background: none;
+                border: 1px solid var(--md-sys-color-outline-variant, #ccc);
+                border-radius: 4px;
+                padding: 6px;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition:
+                    background-color 0.2s,
+                    border-color 0.2s;
+            }
 
-        .wifi-section {
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            overflow-y: auto;
-        }
+            .control-button:hover {
+                background-color: var(--md-sys-color-surface-container-high, #e8e8e8);
+            }
 
-        .wifi-section h2 {
-            margin: 0;
-            font-size: 1.25rem;
-            font-weight: 500;
-            color: var(--md-sys-color-on-background, #333);
-        }
+            .control-button.active {
+                background-color: var(--md-sys-color-primary-container, #e8def8);
+                border-color: var(--md-sys-color-primary, #6750a4);
+            }
 
-        .wifi-section device-panel {
-            flex-shrink: 0;
-        }
+            .control-button ha-svg-icon {
+                --icon-primary-color: var(--md-sys-color-on-surface-variant, #666);
+            }
 
-        .details-sidebar {
-            width: 320px;
-            flex-shrink: 0;
-            display: none;
-            min-height: 0;
-            overflow-y: auto;
-        }
+            .control-button.active ha-svg-icon {
+                --icon-primary-color: var(--md-sys-color-on-primary-container, #21005d);
+            }
 
-        .details-sidebar.visible {
-            display: block;
-        }
+            .graph-section thread-graph,
+            .graph-section wifi-graph {
+                flex: 1 1 0;
+                min-height: 0;
+            }
 
-        @media (max-width: 1024px) {
-            .content {
+            .wifi-section {
+                display: flex;
                 flex-direction: column;
+                gap: 16px;
+                overflow-y: auto;
             }
 
-            .details-sidebar {
-                width: 100%;
-                max-height: 300px;
+            .wifi-section h2 {
+                margin: 0;
+                font-size: 1.25rem;
+                font-weight: 500;
+                color: var(--md-sys-color-on-background, #333);
             }
 
-            .details-sidebar.visible {
-                display: block;
+            .wifi-section device-panel {
+                flex-shrink: 0;
             }
-        }
 
-        @media (max-width: 600px) {
-            .content {
-                padding: 8px;
+            .details-sidebar {
+                width: 320px;
+                flex-shrink: 0;
+                display: none;
+                min-height: 0;
+                overflow-y: auto;
             }
 
-            .graph-header {
-                align-items: flex-start;
-                gap: 6px;
+            .details-sidebar.visible {
+                display: block;
             }
 
-            .graph-actions {
-                flex-direction: column;
-                align-items: stretch;
-                width: 100%;
-            }
+            @media (max-width: 1024px) {
+                .content {
+                    flex-direction: column;
+                }
 
-            .thread-search {
-                width: 100%;
-            }
+                .details-sidebar {
+                    width: 100%;
+                    max-height: 300px;
+                }
 
-            .thread-search input {
-                flex: 1 1 auto;
-                width: auto;
-                max-width: none;
+                .details-sidebar.visible {
+                    display: block;
+                }
             }
 
-            .graph-controls {
-                justify-content: flex-end;
+            @media (max-width: 600px) {
+                .content {
+                    padding: 8px;
+                }
+
+                .graph-header {
+                    align-items: flex-start;
+                    gap: 6px;
+                }
+
+                .graph-actions {
+                    flex-direction: column;
+                    align-items: stretch;
+                    width: 100%;
+                }
+
+                .thread-search {
+                    width: 100%;
+                }
+
+                .thread-search input {
+                    flex: 1 1 auto;
+                    width: auto;
+                    max-width: none;
+                }
+
+                .graph-controls {
+                    justify-content: flex-end;
+                }
             }
-        }
-    `;
+        `,
+    ];
 }

package/src/pages/matter-node-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 { isTestNodeId, MatterClient, MatterNode } from "@matter-server/ws-client";
-import { mdiChevronRight, mdiGraphOutline } from "@mdi/js";
+import { mdiAlertCircleOutline, mdiChevronRight, mdiGraphOutline } from "@mdi/js";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
 import "../components/ha-svg-icon";
 import { getDeviceIcon, getEndpointIcon } from "../util/device-icons.js";
 import { formatNodeAddress, getEffectiveFabricIndex } from "../util/format_hex.js";
+import { notFoundStyles, reducedMotionStyles } from "../util/shared-styles.js";
 import "./components/header";
 import "./components/node-details";
 import { getEndpointDeviceTypes } from "./matter-endpoint-view.js";
@@ -44,8 +46,12 @@ class MatterNodeView extends LitElement {
     override render() {
         if (!this.node) {
             return html`
-                <p>Node not found!</p>
-                <button @click=${this._goBack}>Back</button>
+                <dashboard-header title="Node not found" .client=${this.client} backButton="#"></dashboard-header>
+                <div class="not-found">
+                    <ha-svg-icon .path=${mdiAlertCircleOutline}></ha-svg-icon>
+                    <p>Node not found</p>
+                    <md-outlined-button @click=${this._goBack}>Back</md-outlined-button>
+                </div>
             `;
         }
 
@@ -129,103 +135,107 @@ class MatterNodeView extends LitElement {
         history.back();
     }
 
-    static override styles = css`
-        :host {
-            display: flex;
-            background-color: var(--md-sys-color-background);
-            box-sizing: border-box;
-            flex-direction: column;
-            min-height: 100vh;
-        }
-
-        .container {
-            padding: 16px;
-            max-width: 95%;
-            margin: 0 auto;
-            width: 100%;
-        }
+    static override styles = [
+        notFoundStyles,
+        reducedMotionStyles,
+        css`
+            :host {
+                display: flex;
+                background-color: var(--md-sys-color-background);
+                box-sizing: border-box;
+                flex-direction: column;
+                min-height: 100vh;
+            }
 
-        @media (max-width: 600px) {
             .container {
-                padding: 16px 0;
+                padding: 16px;
+                max-width: 95%;
+                margin: 0 auto;
+                width: 100%;
             }
-        }
 
-        .status {
-            color: var(--danger-color);
-            font-weight: bold;
-            font-size: 0.8em;
-        }
+            @media (max-width: 600px) {
+                .container {
+                    padding: 16px 0;
+                }
+            }
 
-        .node-title-bar {
-            display: flex;
-            align-items: center;
-            gap: 16px;
-            margin-bottom: 16px;
-        }
+            .status {
+                color: var(--danger-color);
+                font-weight: bold;
+                font-size: 0.8em;
+            }
 
-        .node-icon {
-            --icon-primary-color: var(--md-sys-color-on-surface-variant, #666);
-            --mdc-icon-size: 28px;
-        }
+            .node-title-bar {
+                display: flex;
+                align-items: center;
+                gap: 16px;
+                margin-bottom: 16px;
+            }
 
-        .endpoint-icon {
-            --icon-primary-color: var(--md-sys-color-on-surface-variant, #666);
-        }
+            .node-icon {
+                --icon-primary-color: var(--md-sys-color-on-surface-variant, #666);
+                --mdc-icon-size: 28px;
+            }
 
-        .node-title-bar h2 {
-            margin: 0;
-            font-size: 1.25rem;
-            font-weight: 500;
-            color: var(--md-sys-color-on-background, #333);
-        }
+            .endpoint-icon {
+                --icon-primary-color: var(--md-sys-color-on-surface-variant, #666);
+            }
 
-        .node-id-hex {
-            font-size: 0.75em;
-            font-weight: 400;
-            color: var(--md-sys-color-on-surface-variant, #666);
-            font-family: monospace;
-        }
+            .node-title-bar h2 {
+                margin: 0;
+                font-size: 1.25rem;
+                font-weight: 500;
+                color: var(--md-sys-color-on-background, #333);
+            }
 
-        .show-in-graph-button {
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            padding: 6px 12px;
-            background-color: var(--md-sys-color-primary);
-            color: var(--md-sys-color-on-primary);
-            text-decoration: none;
-            border-radius: 4px;
-            font-size: 0.8rem;
-            font-weight: 500;
-            transition: opacity 0.2s;
-            white-space: nowrap;
-        }
+            .node-id-hex {
+                font-size: 0.75em;
+                font-weight: 400;
+                color: var(--md-sys-color-on-surface-variant, #666);
+                font-family: var(--monospace-font, monospace);
+            }
 
-        .show-in-graph-button:hover {
-            opacity: 0.9;
-        }
+            .show-in-graph-button {
+                display: inline-flex;
+                align-items: center;
+                gap: 6px;
+                padding: 6px 12px;
+                background-color: var(--md-sys-color-primary);
+                color: var(--md-sys-color-on-primary);
+                text-decoration: none;
+                border-radius: 4px;
+                font-size: 0.8rem;
+                font-weight: 500;
+                transition: opacity 0.2s;
+                white-space: nowrap;
+            }
 
-        .show-in-graph-button ha-svg-icon {
-            --icon-primary-color: var(--md-sys-color-on-primary);
-            width: 16px;
-            height: 16px;
-        }
+            .show-in-graph-button:hover {
+                opacity: 0.9;
+            }
 
-        @media (max-width: 768px) {
-            .show-in-graph-button {
-                display: none;
+            .show-in-graph-button ha-svg-icon {
+                --icon-primary-color: var(--md-sys-color-on-primary);
+                width: 16px;
+                height: 16px;
             }
-        }
 
-        @media (max-width: 480px) {
-            .show-in-graph-button .button-text {
-                display: none;
+            @media (max-width: 768px) {
+                .show-in-graph-button {
+                    display: none;
+                }
             }
 
-            .show-in-graph-button {
-                padding: 6px;
+            @media (max-width: 480px) {
+                .show-in-graph-button .button-text {
+                    display: none;
+                }
+
+                .show-in-graph-button {
+                    padding: 6px;
+                }
             }
-        }
-    `;
+        `,
+    ];
 }