Improve lovelace card events

src/panels/lovelace/components/hui-card-options.ts

@@ -275,9 +275,9 @@ export class HuiCardOptions extends LitElement {
     const cardConfig = this._currentView.cards![path[1]];
     showEditCardDialog(this, {
       lovelaceConfig: this.lovelace!.config,
-      cardConfig,
       saveConfig: this.lovelace!.saveConfig,
-      path: [path[0]],
+      path: [path[0], null],
+      newCardConfig: cardConfig,
     });
   }
 

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

@@ -214,8 +214,8 @@ export class HuiCreateDialogCard
     showEditCardDialog(this, {
       lovelaceConfig: this._params!.lovelaceConfig,
       saveConfig: this._params!.saveConfig,
-      path: this._params!.path,
-      cardConfig: config,
+      path: [this._params!.path[0], null],
+      newCardConfig: config,
     });
 
     this.closeDialog();

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

@@ -87,12 +87,13 @@ export class HuiDialogEditCard
     const [view, card] = params.path;
     this._viewConfig = params.lovelaceConfig.views[view];
     this._cardConfig =
-      card !== undefined ? this._viewConfig.cards![card] : params.cardConfig;
+      params.newCardConfig ??
+      (card !== null ? this._viewConfig.cards![card] : undefined);
     this.large = false;
     if (this._cardConfig && !Object.isFrozen(this._cardConfig)) {
       this._cardConfig = deepFreeze(this._cardConfig);
     }
-    if (params.cardConfig) {
+    if (params.newCardConfig) {
       this._dirty = true;
     }
   }
@@ -368,16 +369,13 @@ export class HuiDialogEditCard
       return;
     }
     this._saving = true;
+    const [view, card] = this._params!.path;
     await this._params!.saveConfig(
-      this._params!.path.length === 1
-        ? addCard(
-            this._params!.lovelaceConfig,
-            this._params!.path as [number],
-            this._cardConfig!
-          )
+      card === null
+        ? addCard(this._params!.lovelaceConfig, [view], this._cardConfig!)
         : replaceCard(
             this._params!.lovelaceConfig,
-            this._params!.path as [number, number],
+            [view, card],
             this._cardConfig!
           )
     );

src/panels/lovelace/editor/card-editor/show-create-card-dialog.ts

@@ -4,7 +4,7 @@ import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 export interface CreateCardDialogParams {
   lovelaceConfig: LovelaceConfig;
   saveConfig: (config: LovelaceConfig) => void;
-  path: [number] | [number, number];
+  path: [number];
   entities?: string[]; // We can pass entity id's that will be added to the config when a card is picked
 }
 

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

@@ -5,8 +5,9 @@ import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 export interface EditCardDialogParams {
   lovelaceConfig: LovelaceConfig;
   saveConfig: (config: LovelaceConfig) => void;
-  path: [number] | [number, number];
-  cardConfig?: LovelaceCardConfig;
+  path: [number, number | null];
+  // If specified, the card will be replaced with the new card.
+  newCardConfig?: LovelaceCardConfig;
 }
 
 export const importEditCardDialog = () => import("./hui-dialog-edit-card");

src/panels/lovelace/views/hui-view.ts

@@ -31,13 +31,19 @@ import {
   LovelaceViewConfig,
   isStrategyView,
 } from "../../../data/lovelace/config/view";
+import { HASSDomEvent } from "../../../common/dom/fire_event";
 
 declare global {
   // for fire event
   interface HASSDomEvents {
     "ll-create-card": undefined;
-    "ll-edit-card": { path: [number] | [number, number] };
-    "ll-delete-card": { path: [number] | [number, number]; confirm: boolean };
+    "ll-edit-card": { path: [number, number] };
+    "ll-delete-card": { path: [number, number]; confirm: boolean };
+  }
+  interface HTMLElementEventMap {
+    "ll-create-card": HASSDomEvent<HASSDomEvents["ll-create-card"]>;
+    "ll-edit-card": HASSDomEvent<HASSDomEvents["ll-edit-card"]>;
+    "ll-delete-card": HASSDomEvent<HASSDomEvents["ll-delete-card"]>;
   }
 }