Add mac and bluetooth address to the device info card (#18392)

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

src/panels/config/devices/device-detail/ha-device-info-card.ts

@@ -9,6 +9,7 @@ import {
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { loadDeviceRegistryDetailDialog } from "../device-registry-detail/show-dialog-device-registry-detail";
+import { titleCase } from "../../../../common/string/title-case";
 
 @customElement("ha-device-info-card")
 export class HaDeviceCard extends LitElement {
@@ -106,6 +107,14 @@ export class HaDeviceCard extends LitElement {
                 </div>
               `
             : ""}
+          ${this._getAddresses().map(
+            ([type, value]) => html`
+              <div class="extra-info">
+                ${type === "mac" ? "MAC" : titleCase(type)}:
+                ${value.toUpperCase()}
+              </div>
+            `
+          )}
           <slot></slot>
         </div>
         <slot name="actions"></slot>
@@ -113,6 +122,12 @@ export class HaDeviceCard extends LitElement {
     `;
   }
 
+  protected _getAddresses() {
+    return this.device.connections.filter(
+      (conn) => conn[0] === "mac" || conn[0] === "bluetooth"
+    );
+  }
+
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     loadDeviceRegistryDetailDialog();