Integrate Home Assistant data table with enhanced UI features

.gitignore

@@ -4,3 +4,4 @@ esphome_dashboard.egg-info
 dist
 .vscode/settings.json
 venv
+deployment-notes.md

package.json

@@ -37,10 +37,12 @@
     "@material/mwc-dialog": "^0.27.0",
     "@material/mwc-fab": "^0.27.0",
     "@material/mwc-formfield": "^0.27.0",
+    "@material/mwc-icon": "^0.27.0",
     "@material/mwc-icon-button": "^0.27.0",
     "@material/mwc-list": "^0.27.0",
     "@material/mwc-menu": "^0.27.0",
     "@material/mwc-radio": "^0.27.0",
+    "@material/mwc-select": "^0.27.0",
     "@material/mwc-snackbar": "^0.27.0",
     "@material/mwc-textfield": "^0.27.0",
     "@mdi/js": "^7.4.47",

raw_package/static/css/esphome-2.css

@@ -17,7 +17,7 @@
   --alert-error-color-bg: #faefeb;
   --mdc-theme-primary: #03a9f4;
   --primary-text-color: #212121;
-  --mdc-dialog-z-index: 998;
+  --mdc-dialog-z-index: 10000;
   --mdc-theme-primary-no-attention: #444444;
   --mdc-theme-on-primary-no-attention: white;
   --esphome-background-header: #e0e0e0;
@@ -103,7 +103,7 @@ esphome-main {
   background-color: var(--esphome-background-header);
   color: var(--primary-text-color);
   padding: 0 24px;
-  z-index: 1;
+  z-index: 50;
 }
 
 .flex {

src/api/device-ips.ts

@@ -0,0 +1,12 @@
+import { fetchApiJson } from "./index";
+
+export interface DeviceIPsResponse {
+  device_ips: Record<string, string | null>;
+}
+
+export const getDeviceIPs = async (): Promise<
+  Record<string, string | null>
+> => {
+  const response = await fetchApiJson<DeviceIPsResponse>("/resolve-device-ips");
+  return response.device_ips;
+};

src/components/esphome-button-menu.ts

@@ -22,7 +22,7 @@ export class ESPHomeButtonMenu extends LitElement {
       <div @click=${this._handleClick}>
         <slot name="trigger"></slot>
       </div>
-      <mwc-menu .corner=${this.corner}>
+      <mwc-menu .corner=${this.corner} @opened=${this._onOpened} @closed=${this._onClosed}>
         <slot></slot>
       </mwc-menu>
     `;
@@ -34,11 +34,35 @@ export class ESPHomeButtonMenu extends LitElement {
     this._menu!.show();
   }
 
+  private _onOpened(): void {
+    this.dispatchEvent(new CustomEvent("menu-opened", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private _onClosed(): void {
+    this.dispatchEvent(new CustomEvent("menu-closed", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
   static styles = css`
     :host {
       display: inline-block;
       position: relative;
     }
+    mwc-menu {
+      --mdc-theme-surface: var(--card-background-color);
+      --mdc-theme-on-surface: var(--primary-text-color);
+      --mdc-list-item-graphic-color: var(--primary-text-color);
+      --mdc-menu-z-index: 99999;
+    }
+    /* Force icon colors */
+    ::slotted(mwc-list-item) {
+      --mdc-theme-text-primary-on-background: var(--primary-text-color);
+    }
   `;
 }
 

src/components/esphome-card.ts

@@ -11,25 +11,39 @@ export class ESPHomeCard extends LitElement {
   static styles = css`
     :host {
       background: var(--card-background-color, white);
-      border-radius: 2px;
-      box-shadow:
-        0 2px 2px 0 rgb(0 0 0 / 14%),
-        0 3px 1px -2px rgb(0 0 0 / 12%),
-        0 1px 5px 0 rgb(0 0 0 / 20%);
+      border-radius: 4px;
+      box-shadow: var(
+        --ha-card-box-shadow,
+        0 2px 2px 0 rgba(0, 0, 0, 0.14),
+        0 1px 5px 0 rgba(0, 0, 0, 0.12),
+        0 3px 1px -2px rgba(0, 0, 0, 0.2)
+      );
       color: var(--primary-text-color);
       display: block;
       position: relative;
+      transition: all 0.3s ease;
+    }
+
+    :host(:hover) {
+      box-shadow: var(
+        --ha-card-box-shadow-hover,
+        0 4px 8px 0 rgba(0, 0, 0, 0.12),
+        0 2px 4px 0 rgba(0, 0, 0, 0.08)
+      );
     }
 
     :host ::slotted(.card-header) {
-      color: --primary-text-color;
-      font-size: 24px;
-      line-height: 32px;
-      padding: 12px 16px 16px;
+      color: var(--primary-text-color);
+      font-size: 16px;
+      line-height: 20px;
+      padding: 12px 16px;
       display: block;
       margin-block-start: 0px;
       margin-block-end: 0px;
-      font-weight: normal;
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     :host ::slotted(.card-content:not(:first-child)),
@@ -39,12 +53,17 @@ export class ESPHomeCard extends LitElement {
     }
 
     :host ::slotted(.card-content) {
-      padding: 16px;
+      padding: 0px 16px 8px;
+      font-size: 14px;
     }
 
     :host ::slotted(.card-actions) {
-      border-top: 1px solid var(--divider-color, #e8e8e8);
-      padding: 5px 16px;
+      border-top: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12));
+      padding: 4px 8px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 4px;
     }
 
     .status-bar {
@@ -56,24 +75,29 @@ export class ESPHomeCard extends LitElement {
       left: 0;
       right: 0;
       top: 0;
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
       transition: all 0.2s ease-in-out;
     }
     .status-bar::after {
       display: block;
       position: absolute;
-      right: 2px;
-      top: 3px;
+      right: 8px;
+      top: 8px;
       font-weight: bold;
-      font-size: 12px;
+      font-size: 11px;
       content: attr(data-status);
+      color: var(--primary-text-color);
+      background-color: var(--card-background-color);
+      padding: 2px 6px;
+      border-radius: 4px;
+      border: 1px solid var(--divider-color);
     }
     :host([no-status-bar]) .status-bar {
       height: 0px;
     }
     :host([no-status-bar]) .status-bar::after {
-      top: -1px;
+      display: none;
     }
 
     :host(.highlight) {
@@ -85,7 +109,15 @@ export class ESPHomeCard extends LitElement {
         transform: scale(1);
       }
       100% {
-        transform: scale(1.1);
+        transform: scale(1.05);
+      }
+    }
+
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+      :host {
+        --card-background-color: var(--ha-card-background, #1c1c1c);
+        --divider-color: rgba(255, 255, 255, 0.12);
       }
     }
   `;