Add custom card names to the edit card dialog header (#18750)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -31,6 +31,11 @@ import "./hui-card-preview";
 import type { EditCardDialogParams } from "./show-edit-card-dialog";
 import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
+import {
+  getCustomCardEntry,
+  isCustomType,
+  stripCustomPrefix,
+} from "../../../../data/lovelace_custom_cards";
 
 declare global {
   // for fire event
@@ -145,12 +150,23 @@ export class HuiDialogEditCard
 
     let heading: string;
     if (this._cardConfig && this._cardConfig.type) {
+      let cardName: string | undefined;
+      if (isCustomType(this._cardConfig.type)) {
+        cardName = getCustomCardEntry(stripCustomPrefix(this._cardConfig.type))
+          ?.name;
+        // Trim names that end in " Card" so as not to redundantly duplicate it
+        if (cardName?.toLowerCase().endsWith(" card")) {
+          cardName = cardName.substring(0, cardName.length - 5);
+        }
+      } else {
+        cardName = this.hass!.localize(
+          `ui.panel.lovelace.editor.card.${this._cardConfig.type}.name`
+        );
+      }
       heading = this.hass!.localize(
         "ui.panel.lovelace.editor.edit_card.typed_header",
         "type",
-        this.hass!.localize(
+        cardName
-          `ui.panel.lovelace.editor.card.${this._cardConfig.type}.name`
-        )
       );
     } else if (!this._cardConfig) {
       heading = this._viewConfig.title