From 4fbc155f8bad9f3116e8841e4537bea73f7353ce Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 1 Apr 2025 18:11:29 +0200
Subject: [PATCH] Use md list in config navigation (#24885)

---
 src/components/entity/state-badge.ts          |  7 +-
 src/components/ha-navigation-list.ts          | 50 +++++------
 .../config/core/ha-config-section-updates.ts  |  3 +
 .../config/dashboard/ha-config-updates.ts     | 83 +++++++++----------
 4 files changed, 66 insertions(+), 77 deletions(-)

diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts
index f1a4bfd8be..1ca73b9882 100644
--- a/src/components/entity/state-badge.ts
+++ b/src/components/entity/state-badge.ts
@@ -193,17 +193,16 @@ export class StateBadge extends LitElement {
       css`
         :host {
           position: relative;
-          display: inline-block;
+          display: inline-flex;
           width: 40px;
           color: var(--paper-item-icon-color, #44739e);
           border-radius: 50%;
           height: 40px;
-          text-align: center;
           background-size: cover;
-          line-height: 40px;
-          vertical-align: middle;
           box-sizing: border-box;
           --state-inactive-color: initial;
+          align-items: center;
+          justify-content: center;
         }
         :host(:focus) {
           outline: none;
diff --git a/src/components/ha-navigation-list.ts b/src/components/ha-navigation-list.ts
index 65cd965092..fd00db4609 100644
--- a/src/components/ha-navigation-list.ts
+++ b/src/components/ha-navigation-list.ts
@@ -1,15 +1,14 @@
-import "@material/mwc-list/mwc-list";
-import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
-import { navigate } from "../common/navigate";
 import type { PageNavigation } from "../layouts/hass-tabs-subpage";
 import type { HomeAssistant } from "../types";
 import "./ha-icon-next";
 import "./ha-list-item";
 import "./ha-svg-icon";
+import "./ha-md-list";
+import "./ha-md-list-item";
 
 @customElement("ha-navigation-list")
 class HaNavigationList extends LitElement {
@@ -26,21 +25,21 @@ class HaNavigationList extends LitElement {
 
   public render(): TemplateResult {
     return html`
-      <mwc-list
+      <ha-md-list
         innerRole="menu"
         itemRoles="menuitem"
         innerAriaLabel=${ifDefined(this.label)}
-        @action=${this._handleListAction}
       >
-        ${this.pages.map(
-          (page) => html`
-            <ha-list-item
-              graphic="avatar"
-              .twoline=${this.hasSecondary}
-              .hasMeta=${!this.narrow}
+        ${this.pages.map((page) => {
+          const externalApp = page.path.endsWith("#external-app-configuration");
+          return html`
+            <ha-md-list-item
+              .type=${externalApp ? "button" : "link"}
+              .href=${externalApp ? undefined : page.path}
+              @click=${externalApp ? this._handleExternalApp : undefined}
             >
               <div
-                slot="graphic"
+                slot="start"
                 class=${page.iconColor ? "icon-background" : ""}
                 .style="background-color: ${page.iconColor || "undefined"}"
               >
@@ -48,31 +47,23 @@ class HaNavigationList extends LitElement {
               </div>
               <span>${page.name}</span>
               ${this.hasSecondary
-                ? html`<span slot="secondary">${page.description}</span>`
+                ? html`<span slot="supporting-text">${page.description}</span>`
                 : ""}
               ${!this.narrow
-                ? html`<ha-icon-next slot="meta"></ha-icon-next>`
+                ? html`<ha-icon-next slot="end"></ha-icon-next>`
                 : ""}
-            </ha-list-item>
-          `
-        )}
-      </mwc-list>
+            </ha-md-list-item>
+          `;
+        })}
+      </ha-md-list>
     `;
   }
 
-  private _handleListAction(ev: CustomEvent<ActionDetail>) {
-    const path = this.pages[ev.detail.index].path;
-    if (path.endsWith("#external-app-configuration")) {
-      this.hass.auth.external!.fireMessage({ type: "config_screen/show" });
-    } else {
-      navigate(path);
-    }
+  private _handleExternalApp() {
+    this.hass.auth.external!.fireMessage({ type: "config_screen/show" });
   }
 
   static styles: CSSResultGroup = css`
-    :host {
-      --mdc-list-vertical-padding: 0;
-    }
     ha-svg-icon,
     ha-icon-next {
       color: var(--secondary-text-color);
@@ -89,8 +80,7 @@ class HaNavigationList extends LitElement {
     .icon-background ha-svg-icon {
       color: #fff;
     }
-    ha-list-item {
-      cursor: pointer;
+    ha-md-list-item {
       font-size: var(--navigation-list-item-title-font-size);
     }
   `;
diff --git a/src/panels/config/core/ha-config-section-updates.ts b/src/panels/config/core/ha-config-section-updates.ts
index a79c1693f6..a556798803 100644
--- a/src/panels/config/core/ha-config-section-updates.ts
+++ b/src/panels/config/core/ha-config-section-updates.ts
@@ -197,6 +197,9 @@ class HaConfigSectionUpdates extends LitElement {
       display: flex;
       margin-bottom: max(24px, env(safe-area-inset-bottom));
     }
+    ha-config-updates {
+      margin-bottom: 8px;
+    }
 
     .card-content {
       display: flex;
diff --git a/src/panels/config/dashboard/ha-config-updates.ts b/src/panels/config/dashboard/ha-config-updates.ts
index 6450785dd0..271e398558 100644
--- a/src/panels/config/dashboard/ha-config-updates.ts
+++ b/src/panels/config/dashboard/ha-config-updates.ts
@@ -1,5 +1,3 @@
-import "@material/mwc-button/mwc-button";
-import "@material/mwc-list/mwc-list";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
@@ -11,7 +9,8 @@ import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_
 import "../../../components/entity/state-badge";
 import "../../../components/ha-alert";
 import "../../../components/ha-icon-next";
-import "../../../components/ha-list-item";
+import "../../../components/ha-md-list";
+import "../../../components/ha-md-list-item";
 import "../../../components/ha-spinner";
 import type { DeviceRegistryEntry } from "../../../data/device_registry";
 import { subscribeDeviceRegistry } from "../../../data/device_registry";
@@ -69,7 +68,7 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
           count: this.total || this.updateEntities.length,
         })}
       </div>
-      <mwc-list>
+      <ha-md-list>
         ${updates.map((entity) => {
           const entityEntry = this.getEntityEntry(entity.entity_id);
           const deviceEntry =
@@ -78,44 +77,43 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
               : undefined;
 
           return html`
-            <ha-list-item
-              twoline
-              graphic="medium"
+            <ha-md-list-item
               class=${ifDefined(
                 entity.attributes.skipped_version ? "skipped" : undefined
               )}
               .entity_id=${entity.entity_id}
               .hasMeta=${!this.narrow}
+              type="button"
               @click=${this._openMoreInfo}
             >
-              <state-badge
-                slot="graphic"
-                .title=${entity.attributes.title ||
-                entity.attributes.friendly_name}
-                .hass=${this.hass}
-                .stateObj=${entity}
-                class=${ifDefined(
-                  this.narrow && entity.attributes.in_progress
-                    ? "updating"
-                    : undefined
-                )}
-              ></state-badge>
-              ${this.narrow && entity.attributes.in_progress
-                ? html`<ha-spinner
-                    slot="graphic"
-                    class="absolute"
-                    size="small"
-                    .ariaLabel=${this.hass.localize(
-                      "ui.panel.config.updates.update_in_progress"
-                    )}
-                  ></ha-spinner>`
-                : ""}
+              <div slot="start">
+                <state-badge
+                  .title=${entity.attributes.title ||
+                  entity.attributes.friendly_name}
+                  .hass=${this.hass}
+                  .stateObj=${entity}
+                  class=${ifDefined(
+                    this.narrow && entity.attributes.in_progress
+                      ? "updating"
+                      : undefined
+                  )}
+                ></state-badge>
+                ${this.narrow && entity.attributes.in_progress
+                  ? html`<ha-spinner
+                      class="absolute"
+                      size="small"
+                      .ariaLabel=${this.hass.localize(
+                        "ui.panel.config.updates.update_in_progress"
+                      )}
+                    ></ha-spinner>`
+                  : ""}
+              </div>
               <span
                 >${deviceEntry
                   ? computeDeviceNameDisplay(deviceEntry, this.hass)
                   : entity.attributes.friendly_name}</span
               >
-              <span slot="secondary">
+              <span slot="supporting-text">
                 ${entity.attributes.title} ${entity.attributes.latest_version}
                 ${entity.attributes.skipped_version
                   ? `(${this.hass.localize("ui.panel.config.updates.skipped")})`
@@ -123,7 +121,7 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
               </span>
               ${!this.narrow
                 ? entity.attributes.in_progress
-                  ? html`<div slot="meta">
+                  ? html`<div slot="end">
                       <ha-spinner
                         size="small"
                         .ariaLabel=${this.hass.localize(
@@ -131,12 +129,12 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
                         )}
                       ></ha-spinner>
                     </div>`
-                  : html`<ha-icon-next slot="meta"></ha-icon-next>`
+                  : html`<ha-icon-next slot="end"></ha-icon-next>`
                 : ""}
-            </ha-list-item>
+            </ha-md-list-item>
           `;
         })}
-      </mwc-list>
+      </ha-md-list>
     `;
   }
 
@@ -149,9 +147,6 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
   static get styles(): CSSResultGroup[] {
     return [
       css`
-        :host {
-          --mdc-list-vertical-padding: 0;
-        }
         .title {
           font-size: 16px;
           padding: 16px;
@@ -160,8 +155,8 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
         .skipped {
           background: var(--secondary-background-color);
         }
-        ha-list-item {
-          --mdc-list-item-graphic-size: 40px;
+        ha-md-list-item {
+          --md-list-item-leading-icon-size: 40px;
         }
         ha-icon-next {
           color: var(--secondary-text-color);
@@ -184,14 +179,16 @@ class HaConfigUpdates extends SubscribeMixin(LitElement) {
           outline: none;
           text-decoration: underline;
         }
-        ha-list-item {
-          cursor: pointer;
+        ha-md-list-item {
           font-size: 16px;
         }
+        div[slot="start"] {
+          position: relative;
+        }
         ha-spinner.absolute {
           position: absolute;
-          width: 28px;
-          height: 28px;
+          left: 6px;
+          top: 6px;
         }
         state-badge.updating {
           opacity: 0.5;