Add "Add condition" button in the editor

src/panels/lovelace/common/validate-condition.ts

@@ -3,6 +3,12 @@ import { HomeAssistant } from "../../../types";
 
 export type Condition = StateCondition | ResponsiveCondition;
 
+export type LegacyCondition = {
+  entity?: string;
+  state?: string;
+  state_not?: string;
+};
+
 export type StateCondition = {
   condition: "state";
   entity?: string;
@@ -50,7 +56,7 @@ export function checkConditionsMet(
 
 function valideStateCondition(condition: StateCondition) {
   return (
-    !!condition.entity &&
+    condition.entity != null &&
     (condition.state != null || condition.state_not != null)
   );
 }

src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts

@@ -1,34 +1,36 @@
 import { mdiCodeBraces, mdiDelete, mdiListBoxOutline } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
-import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-icon-button";
-import "../../../components/ha-yaml-editor";
-import { haStyle } from "../../../resources/styles";
-import type { HomeAssistant } from "../../../types";
-import "./types/ha-card-condition-responsive";
-import "./types/ha-card-condition-state";
-import { Condition } from "./validate-condition";
+import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-icon-button";
+import "../../../../components/ha-yaml-editor";
+import { haStyle } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
+import { Condition, LegacyCondition } from "../../common/validate-condition";
+import type { LovelaceConditionEditorConstructor } from "./types";
 
 @customElement("ha-card-condition-editor")
 export default class HaCardConditionEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) condition!: Condition;
+  @property({ attribute: false }) condition!: Condition | LegacyCondition;
 
   @state() public _yamlMode = false;
 
   protected render() {
-    const condition = this.condition;
+    const condition: Condition = {
+      condition: "state",
+      ...this.condition,
+    };
     const element = customElements.get(
       `ha-card-condition-${condition.condition}`
-    ) as any | undefined;
+    ) as LovelaceConditionEditorConstructor | undefined;
     const supported = element !== undefined;
 
     const valid =
       element &&
-      (!element.validateUIConfig || element.validateUIConfig(this.condition));
+      (!element.validateUIConfig || element.validateUIConfig(condition));
 
     const yamlMode = this._yamlMode || !supported || !valid;
 

src/panels/lovelace/editor/conditions/types.ts

@@ -0,0 +1,6 @@
+import { Condition } from "../../common/validate-condition";
+
+export interface LovelaceConditionEditorConstructor {
+  defaultConfig?: Condition;
+  validateUIConfig?: (condition: Condition) => boolean;
+}

src/panels/lovelace/editor/conditions/types/ha-card-condition-responsive.ts

@@ -1,14 +1,14 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { getAllCombinations } from "../../../../common/array/combinations";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import { LocalizeFunc } from "../../../../common/translations/localize";
-import "../../../../components/ha-form/ha-form";
-import type { SchemaUnion } from "../../../../components/ha-form/types";
-import { HaFormSchema } from "../../../../components/ha-form/types";
-import type { HomeAssistant } from "../../../../types";
-import { ResponsiveCondition } from "../validate-condition";
+import { getAllCombinations } from "../../../../../common/array/combinations";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import { LocalizeFunc } from "../../../../../common/translations/localize";
+import "../../../../../components/ha-form/ha-form";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
+import { HaFormSchema } from "../../../../../components/ha-form/types";
+import type { HomeAssistant } from "../../../../../types";
+import { ResponsiveCondition } from "../../../common/validate-condition";
 
 const BREAKPOINT_VALUES = [0, 768, 1024, 1280, Infinity];
 const BREAKPOINTS = ["mobile", "tablet", "desktop", "wide"] as const;

src/panels/lovelace/editor/conditions/types/ha-card-condition-state.ts

@@ -2,13 +2,13 @@ import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { assert, literal, object, optional, string } from "superstruct";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import { LocalizeFunc } from "../../../../common/translations/localize";
-import "../../../../components/ha-form/ha-form";
-import type { SchemaUnion } from "../../../../components/ha-form/types";
-import { HaFormSchema } from "../../../../components/ha-form/types";
-import type { HomeAssistant } from "../../../../types";
-import { StateCondition } from "../validate-condition";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import { LocalizeFunc } from "../../../../../common/translations/localize";
+import "../../../../../components/ha-form/ha-form";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
+import { HaFormSchema } from "../../../../../components/ha-form/types";
+import type { HomeAssistant } from "../../../../../types";
+import { StateCondition } from "../../../common/validate-condition";
 
 const stateConditionStruct = object({
   condition: literal("state"),
@@ -33,7 +33,7 @@ export class HaCardConditionState extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
   public static get defaultConfig(): StateCondition {
-    return { condition: "state", entity: "" };
+    return { condition: "state", entity: "", state: "" };
   }
 
   protected willUpdate(changedProperties: PropertyValues): void {

src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts

@@ -1,31 +1,48 @@
 import "@material/mwc-tab-bar/mwc-tab-bar";
 import "@material/mwc-tab/mwc-tab";
 import type { MDCTabBarActivatedEvent } from "@material/tab-bar";
-import { mdiCodeBraces, mdiContentCopy, mdiListBoxOutline } from "@mdi/js";
+import {
+  mdiCodeBraces,
+  mdiContentCopy,
+  mdiContentDuplicate,
+  mdiListBoxOutline,
+  mdiPlus,
+} from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { any, array, assert, assign, object, optional } from "superstruct";
 import { storage } from "../../../../common/decorators/storage";
 import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/entity/ha-entity-picker";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
+import "../../../../components/ha-button";
+import "../../../../components/ha-list-item";
+import "../../../../components/ha-menu-button";
+import type { HaSelect } from "../../../../components/ha-select";
+import "../../../../components/ha-svg-icon";
 import type {
   LovelaceCardConfig,
   LovelaceConfig,
 } from "../../../../data/lovelace";
 import type { HomeAssistant } from "../../../../types";
 import type { ConditionalCardConfig } from "../../cards/types";
-import "../../common/ha-card-condition-editor";
+import { Condition } from "../../common/validate-condition";
 import type { LovelaceCardEditor } from "../../types";
 import "../card-editor/hui-card-element-editor";
 import type { HuiCardElementEditor } from "../card-editor/hui-card-element-editor";
 import "../card-editor/hui-card-picker";
+import "../conditions/ha-card-condition-editor";
+import "../conditions/types/ha-card-condition-responsive";
+import "../conditions/types/ha-card-condition-state";
+import { LovelaceConditionEditorConstructor } from "../conditions/types";
 import "../hui-element-editor";
 import type { ConfigChangedEvent } from "../hui-element-editor";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import type { GUIModeChangedEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
+const UI_CONDITION: Condition["condition"][] = ["state", "responsive"];
+
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
@@ -158,13 +175,35 @@ export class HuiConditionalCardEditor
                   </div>
                 `
               )}
-              <div class="condition">
-                <div class="content">
-                  <ha-entity-picker
-                    .hass=${this.hass}
-                    @change=${this._addCondition}
-                  ></ha-entity-picker>
-                </div>
+              <div>
+                <ha-button-menu
+                  @action=${this._addCondition}
+                  fixed
+                  @closed=${stopPropagation}
+                >
+                  <ha-button
+                    slot="trigger"
+                    outlined
+                    .label=${this.hass.localize(
+                      "ui.panel.lovelace.editor.card.conditional.add_condition"
+                    )}
+                  >
+                    <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
+                  </ha-button>
+                  ${UI_CONDITION.map(
+                    (condition) => html`
+                      <ha-list-item .value=${condition} graphic="icon">
+                        ${this.hass!.localize(
+                          `ui.panel.lovelace.editor.card.conditional.condition.${condition}.label`
+                        ) || condition}
+                        <ha-svg-icon
+                          slot="graphic"
+                          .path=${mdiContentDuplicate}
+                        ></ha-svg-icon>
+                      </ha-list-item>
+                    `
+                  )}
+                </ha-button-menu>
               </div>
             </div>
           `}
@@ -233,19 +272,24 @@ export class HuiConditionalCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _addCondition(ev: Event): void {
-    const target = ev.target! as any;
-    if (target.value === "" || !this._config) {
+  private _addCondition(ev: CustomEvent): void {
+    const condition = (ev.currentTarget as HaSelect).items[ev.detail.index]
+      .value as Condition["condition"];
+    if (!this._config) {
       return;
     }
     const conditions = [...this._config.conditions];
-    conditions.push({
-      condition: "state",
-      entity: target.value,
-      state: "",
-    });
+
+    const elClass = customElements.get(`ha-card-condition-${condition}`) as
+      | LovelaceConditionEditorConstructor
+      | undefined;
+
+    conditions.push(
+      elClass?.defaultConfig
+        ? { ...elClass.defaultConfig }
+        : { condition: condition }
+    );
     this._config = { ...this._config, conditions };
-    target.value = "";
     fireEvent(this, "config-changed", { config: this._config });
   }
 
@@ -282,6 +326,9 @@ export class HuiConditionalCardEditor
         .condition .content {
           padding: 12px;
         }
+        ha-button-menu {
+          margin-top: 12px;
+        }
         .card {
           margin-top: 8px;
           border: 1px solid var(--divider-color);

src/translations/en.json

@@ -4769,6 +4769,7 @@
               "current_state": "current",
               "condition_explanation": "The card will be shown when ALL conditions below are fulfilled.",
               "change_type": "Change type",
+              "add_condition": "Add condition",
               "condition": {
                 "responsive": {
                   "label": "Responsive",