Added view title to heading of Lovelace Add Card picker (#4083)

* Added view title to heading of Lovelace Add Card picker

* Fixed building error, cleaned up code

* Changed _view to _viewConfig and added check for undefined _cardConfig

* Added else if for undefined _cardConfig, added else for manual cards

* Used template literal instead of string concatenation

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -49,9 +49,6 @@ export class HuiCardPicker extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      <h3>
-        ${this.hass!.localize("ui.panel.lovelace.editor.edit_card.pick_card")}
-      </h3>
       <div class="cards-container">
         ${cards.map((card: string) => {
           return html`

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

@@ -10,7 +10,10 @@ import {
 
 import { HomeAssistant } from "../../../../types";
 import { HASSDomEvent } from "../../../../common/dom/fire_event";
-import { LovelaceCardConfig } from "../../../../data/lovelace";
+import {
+  LovelaceCardConfig,
+  LovelaceViewConfig,
+} from "../../../../data/lovelace";
 import "./hui-card-editor";
 // tslint:disable-next-line
 import { HuiCardEditor } from "./hui-card-editor";
@@ -40,6 +43,7 @@ export class HuiDialogEditCard extends LitElement {
   @property() private _params?: EditCardDialogParams;
 
   @property() private _cardConfig?: LovelaceCardConfig;
+  @property() private _viewConfig!: LovelaceViewConfig;
 
   @property() private _saving: boolean = false;
   @property() private _error?: string;
@@ -47,10 +51,9 @@ export class HuiDialogEditCard extends LitElement {
   public async showDialog(params: EditCardDialogParams): Promise<void> {
     this._params = params;
     const [view, card] = params.path;
+    this._viewConfig = params.lovelace.config.views[view];
     this._cardConfig =
-      card !== undefined
+      card !== undefined ? this._viewConfig.cards![card] : undefined;
-        ? params.lovelace.config.views[view].cards![card]
-        : undefined;
   }
 
   private get _cardEditorEl(): HuiCardEditor | null {
@@ -67,6 +70,14 @@ export class HuiDialogEditCard extends LitElement {
       heading = `${this.hass!.localize(
         `ui.panel.lovelace.editor.card.${this._cardConfig.type}.name`
       )} ${this.hass!.localize("ui.panel.lovelace.editor.edit_card.header")}`;
+    } else if (!this._cardConfig) {
+      heading = this._viewConfig.title
+        ? this.hass!.localize(
+            "ui.panel.lovelace.editor.edit_card.pick_card_view_title",
+            "name",
+            `"${this._viewConfig.title}"`
+          )
+        : this.hass!.localize("ui.panel.lovelace.editor.edit_card.pick_card");
     } else {
       heading = this.hass!.localize(
         "ui.panel.lovelace.editor.edit_card.header"

src/translations/en.json

@@ -1403,7 +1403,8 @@
           },
           "edit_card": {
             "header": "Card Configuration",
-            "pick_card": "Pick the card you want to add.",
+            "pick_card": "Which card would you like to add?",
+            "pick_card_view_title": "Which card would you like to add to your {name} view?",
             "toggle_editor": "Toggle Editor",
             "show_visual_editor": "Show Visual Editor",
             "show_code_editor": "Show Code Editor",