Align entity registry buttons

.github/workflows/demo.yaml

@@ -27,7 +27,9 @@ jobs:
       - name: Build Demo
         run: ./node_modules/.bin/gulp build-demo
       - name: Deploy to Netlify
-        run: npx netlify-cli deploy --dir=demo/dist --prod
+        uses: netlify/actions/cli@master
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
+        with:
+          args: deploy --dir=demo/dist --prod

.github/workflows/stale.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@v6.0.0
+        uses: actions/stale@v5.1.1
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

demo/src/ha-demo.ts

@@ -61,14 +61,12 @@ class HaDemo extends HomeAssistantAppEl {
         area_id: null,
         disabled_by: null,
         entity_id: "sensor.co2_intensity",
-        id: "sensor.co2_intensity",
         name: null,
         icon: null,
         platform: "co2signal",
         hidden_by: null,
         entity_category: null,
         has_entity_name: false,
-        unique_id: "co2_intensity",
       },
       {
         config_entry_id: "co2signal",
@@ -76,14 +74,12 @@ class HaDemo extends HomeAssistantAppEl {
         area_id: null,
         disabled_by: null,
         entity_id: "sensor.grid_fossil_fuel_percentage",
-        id: "sensor.co2_intensity",
         name: null,
         icon: null,
         platform: "co2signal",
         hidden_by: null,
         entity_category: null,
         has_entity_name: false,
-        unique_id: "grid_fossil_fuel_percentage",
       },
     ]);
 

demo/src/stubs/energy.ts

@@ -11,12 +11,14 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
           {
             stat_energy_from: "sensor.energy_consumption_tarif_1",
             stat_cost: "sensor.energy_consumption_tarif_1_cost",
+            entity_energy_from: "sensor.energy_consumption_tarif_1",
             entity_energy_price: null,
             number_energy_price: null,
           },
           {
             stat_energy_from: "sensor.energy_consumption_tarif_2",
             stat_cost: "sensor.energy_consumption_tarif_2_cost",
+            entity_energy_from: "sensor.energy_consumption_tarif_2",
             entity_energy_price: null,
             number_energy_price: null,
           },
@@ -25,12 +27,14 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
           {
             stat_energy_to: "sensor.energy_production_tarif_1",
             stat_compensation: "sensor.energy_production_tarif_1_compensation",
+            entity_energy_to: "sensor.energy_production_tarif_1",
             entity_energy_price: null,
             number_energy_price: null,
           },
           {
             stat_energy_to: "sensor.energy_production_tarif_2",
             stat_compensation: "sensor.energy_production_tarif_2_compensation",
+            entity_energy_to: "sensor.energy_production_tarif_2",
             entity_energy_price: null,
             number_energy_price: null,
           },
@@ -51,6 +55,7 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
         type: "gas",
         stat_energy_from: "sensor.energy_gas",
         stat_cost: "sensor.energy_gas_cost",
+        entity_energy_from: "sensor.energy_gas",
         entity_energy_price: null,
         number_energy_price: null,
       },

demo/src/stubs/history.ts

@@ -6,7 +6,7 @@ import {
   endOfDay,
 } from "date-fns/esm";
 import { HassEntity } from "home-assistant-js-websocket";
-import { StatisticValue } from "../../../src/data/recorder";
+import { StatisticValue } from "../../../src/data/history";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 interface HistoryQueryParams {

gallery/src/pages/Text/remove-delete-add-create.markdown

@@ -1,56 +0,0 @@
----
-title: When to use remove, delete, add and create
-subtitle: The difference between remove/delete and add/create.
----
-
-# Remove vs Delete
-Remove and Delete are quite similar, but can be frustrating if used inconsistently.
-
-## Remove
-Take away and set aside, but kept in existence.
-
-For example:
-* Removing a user's permission
-* Removing a user from a group
-* Removing links between items
-* Removing a widget
-* Removing a link
-* Removing an item from a cart
-
-## Delete
-Erase, rendered nonexistent or nonrecoverable.
-
-For example:
-* Deleting a field
-* Deleting a value in a field
-* Deleting a task
-* Deleting a group
-* Deleting a permission
-* Deleting a calendar event
-
-# Add vs Create
-In most cases, Create can be paired with Delete, and Add can be paired with Remove.
-
-## Add
-An already-exisiting item.
-
-For example:
-* Adding a permission to a user
-* Adding a user to a group
-* Adding links between items
-* Adding a widget
-* Adding a link
-* Adding an item to a cart
-
-## Create
-Something made from scratch.
-
-For example:
-* Creating a new field
-* Creating a new value in a field
-* Creating a new task
-* Creating a new group
-* Creating a new permission
-* Creating a new calendar event
-
-Based on this is [UX magazine article](https://uxmag.com/articles/ui-copy-remove-vs-delete2-banner).

gallery/src/pages/components/dialogs.markdown

@@ -1,9 +1,9 @@
 ---
-title: Dialogs
+title: Dialgos
 subtitle: Dialogs provide important prompts in a user flow.
 ---
 
-# Material Design 3
+# Material Desing 3
 
 Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on it's [website](https://m3.material.io/components/dialogs/overview). 
 

gallery/src/pages/components/ha-selector.ts

@@ -195,48 +195,6 @@ const SCHEMAS: {
           },
         },
       },
-      select_disabled_list: {
-        name: "Select disabled option",
-        selector: {
-          select: {
-            options: [
-              { label: "Option 1", value: "Option 1" },
-              { label: "Option 2", value: "Option 2" },
-              { label: "Option 3", value: "Option 3", disabled: true },
-            ],
-            mode: "list",
-          },
-        },
-      },
-      select_disabled_multiple: {
-        name: "Select disabled option",
-        selector: {
-          select: {
-            multiple: true,
-            options: [
-              { label: "Option 1", value: "Option 1" },
-              { label: "Option 2", value: "Option 2" },
-              { label: "Option 3", value: "Option 3", disabled: true },
-            ],
-            mode: "list",
-          },
-        },
-      },
-      select_disabled: {
-        name: "Select disabled option",
-        selector: {
-          select: {
-            options: [
-              { label: "Option 1", value: "Option 1" },
-              { label: "Option 2", value: "Option 2" },
-              { label: "Option 3", value: "Option 3", disabled: true },
-              { label: "Option 4", value: "Option 4", disabled: true },
-              { label: "Option 5", value: "Option 5", disabled: true },
-              { label: "Option 6", value: "Option 6" },
-            ],
-          },
-        },
-      },
       select_custom: {
         name: "Select (Custom)",
         selector: {

gallery/src/pages/misc/integration-card.ts

@@ -191,12 +191,10 @@ const createEntityRegistryEntries = (
     hidden_by: null,
     entity_category: null,
     entity_id: "binary_sensor.updater",
-    id: "binary_sensor.updater",
     name: null,
     icon: null,
     platform: "updater",
     has_entity_name: false,
-    unique_id: "updater",
   },
 ];
 

gallery/src/pages/more-info/cover.ts

@@ -1,7 +1,16 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import { CoverEntityFeature } from "../../../../src/data/cover";
+import {
+  SUPPORT_OPEN,
+  SUPPORT_STOP,
+  SUPPORT_CLOSE,
+  SUPPORT_SET_POSITION,
+  SUPPORT_OPEN_TILT,
+  SUPPORT_STOP_TILT,
+  SUPPORT_CLOSE_TILT,
+  SUPPORT_SET_TILT_POSITION,
+} from "../../../../src/data/cover";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
 import {
@@ -13,127 +22,113 @@ import "../../components/demo-more-infos";
 const ENTITIES = [
   getEntity("cover", "position_buttons", "on", {
     friendly_name: "Position Buttons",
-    supported_features:
+    supported_features: SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE,
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE,
   }),
   getEntity("cover", "position_slider_half", "on", {
     friendly_name: "Position Half-Open",
     supported_features:
-      CoverEntityFeature.OPEN +
+      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION,
     current_position: 50,
   }),
   getEntity("cover", "position_slider_open", "on", {
     friendly_name: "Position Open",
     supported_features:
-      CoverEntityFeature.OPEN +
+      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION,
     current_position: 100,
   }),
   getEntity("cover", "position_slider_closed", "on", {
     friendly_name: "Position Closed",
     supported_features:
-      CoverEntityFeature.OPEN +
+      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION,
     current_position: 0,
   }),
   getEntity("cover", "tilt_buttons", "on", {
     friendly_name: "Tilt Buttons",
     supported_features:
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT + SUPPORT_STOP_TILT + SUPPORT_CLOSE_TILT,
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT,
   }),
   getEntity("cover", "tilt_slider_half", "on", {
     friendly_name: "Tilt Half-Open",
     supported_features:
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
+      SUPPORT_CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_SET_TILT_POSITION,
     current_tilt_position: 50,
   }),
   getEntity("cover", "tilt_slider_open", "on", {
     friendly_name: "Tilt Open",
     supported_features:
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
+      SUPPORT_CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_SET_TILT_POSITION,
     current_tilt_position: 100,
   }),
   getEntity("cover", "tilt_slider_closed", "on", {
     friendly_name: "Tilt Closed",
     supported_features:
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
+      SUPPORT_CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_SET_TILT_POSITION,
     current_tilt_position: 0,
   }),
   getEntity("cover", "position_slider_tilt_slider", "on", {
     friendly_name: "Both Sliders",
     supported_features:
-      CoverEntityFeature.OPEN +
+      SUPPORT_OPEN +
-      CoverEntityFeature.STOP +
+      SUPPORT_STOP +
-      CoverEntityFeature.CLOSE +
+      SUPPORT_CLOSE +
-      CoverEntityFeature.SET_POSITION +
+      SUPPORT_SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
+      SUPPORT_CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_SET_TILT_POSITION,
     current_position: 30,
     current_tilt_position: 70,
   }),
   getEntity("cover", "position_tilt_slider", "on", {
     friendly_name: "Position & Tilt Slider",
     supported_features:
-      CoverEntityFeature.OPEN +
+      SUPPORT_OPEN +
-      CoverEntityFeature.STOP +
+      SUPPORT_STOP +
-      CoverEntityFeature.CLOSE +
+      SUPPORT_CLOSE +
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
+      SUPPORT_CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_SET_TILT_POSITION,
     current_tilt_position: 70,
   }),
   getEntity("cover", "position_slider_tilt", "on", {
     friendly_name: "Position Slider & Tilt",
     supported_features:
-      CoverEntityFeature.OPEN +
+      SUPPORT_OPEN +
-      CoverEntityFeature.STOP +
+      SUPPORT_STOP +
-      CoverEntityFeature.CLOSE +
+      SUPPORT_CLOSE +
-      CoverEntityFeature.SET_POSITION +
+      SUPPORT_SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT,
+      SUPPORT_CLOSE_TILT,
     current_position: 30,
   }),
   getEntity("cover", "position_slider_only_tilt_slider", "on", {
     friendly_name: "Position Slider Only & Tilt Buttons",
     supported_features:
-      CoverEntityFeature.SET_POSITION +
+      SUPPORT_SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT,
+      SUPPORT_CLOSE_TILT,
     current_position: 30,
   }),
   getEntity("cover", "position_slider_only_tilt", "on", {
     friendly_name: "Position Slider Only & Tilt",
     supported_features:
-      CoverEntityFeature.SET_POSITION +
+      SUPPORT_SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
+      SUPPORT_OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
+      SUPPORT_STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
+      SUPPORT_CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
+      SUPPORT_SET_TILT_POSITION,
     current_position: 30,
     current_tilt_position: 70,
   }),

gallery/src/pages/more-info/input-number.markdown

@@ -1,3 +0,0 @@
----
-title: Input Number
----

gallery/src/pages/more-info/input-number.ts

@@ -1,60 +0,0 @@
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
-import {
-  MockHomeAssistant,
-  provideHass,
-} from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-more-infos";
-
-const ENTITIES = [
-  getEntity("input_number", "box1", 0, {
-    friendly_name: "Box1",
-    min: 0,
-    max: 100,
-    step: 1,
-    initial: 0,
-    mode: "box",
-    unit_of_measurement: "items",
-  }),
-  getEntity("input_number", "slider1", 0, {
-    friendly_name: "Slider1",
-    min: 0,
-    max: 100,
-    step: 1,
-    initial: 0,
-    mode: "slider",
-    unit_of_measurement: "items",
-  }),
-];
-
-@customElement("demo-more-info-input-number")
-class DemoMoreInfoInputNumber extends LitElement {
-  @property() public hass!: MockHomeAssistant;
-
-  @query("demo-more-infos") private _demoRoot!: HTMLElement;
-
-  protected render(): TemplateResult {
-    return html`
-      <demo-more-infos
-        .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
-      ></demo-more-infos>
-    `;
-  }
-
-  protected firstUpdated(changedProperties: PropertyValues) {
-    super.firstUpdated(changedProperties);
-    const hass = provideHass(this._demoRoot);
-    hass.updateTranslations(null, "en");
-    hass.addEntities(ENTITIES);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-more-info-input-number": DemoMoreInfoInputNumber;
-  }
-}

gallery/src/pages/more-info/light.ts

@@ -1,7 +1,12 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import { LightColorMode, LightEntityFeature } from "../../../../src/data/light";
+import {
+  LightColorModes,
+  SUPPORT_EFFECT,
+  SUPPORT_FLASH,
+  SUPPORT_TRANSITION,
+} from "../../../../src/data/light";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
 import {
@@ -17,8 +22,8 @@ const ENTITIES = [
   getEntity("light", "kitchen_light", "on", {
     friendly_name: "Brightness Light",
     brightness: 200,
-    supported_color_modes: [LightColorMode.BRIGHTNESS],
+    supported_color_modes: [LightColorModes.BRIGHTNESS],
-    color_mode: LightColorMode.BRIGHTNESS,
+    color_mode: LightColorModes.BRIGHTNESS,
   }),
   getEntity("light", "color_temperature_light", "on", {
     friendly_name: "White Color Temperature Light",
@@ -27,10 +32,10 @@ const ENTITIES = [
     min_mireds: 30,
     max_mireds: 150,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
+      LightColorModes.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
+      LightColorModes.COLOR_TEMP,
     ],
-    color_mode: LightColorMode.COLOR_TEMP,
+    color_mode: LightColorModes.COLOR_TEMP,
   }),
   getEntity("light", "color_hs_light", "on", {
     friendly_name: "Color HS Light",
@@ -39,16 +44,13 @@ const ENTITIES = [
     rgb_color: [30, 100, 255],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features:
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
+      LightColorModes.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
+      LightColorModes.COLOR_TEMP,
-      LightColorMode.HS,
+      LightColorModes.HS,
     ],
-    color_mode: LightColorMode.HS,
+    color_mode: LightColorModes.HS,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_rgb_ct_light", "on", {
@@ -57,28 +59,22 @@ const ENTITIES = [
     color_temp: 75,
     min_mireds: 30,
     max_mireds: 150,
-    supported_features:
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
+      LightColorModes.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
+      LightColorModes.COLOR_TEMP,
-      LightColorMode.RGB,
+      LightColorModes.RGB,
     ],
-    color_mode: LightColorMode.COLOR_TEMP,
+    color_mode: LightColorModes.COLOR_TEMP,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_RGB_light", "on", {
     friendly_name: "Color Effects Light",
     brightness: 255,
     rgb_color: [30, 100, 255],
-    supported_features:
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-      LightEntityFeature.EFFECT +
+    supported_color_modes: [LightColorModes.BRIGHTNESS, LightColorModes.RGB],
-      LightEntityFeature.FLASH +
+    color_mode: LightColorModes.RGB,
-      LightEntityFeature.TRANSITION,
-    supported_color_modes: [LightColorMode.BRIGHTNESS, LightColorMode.RGB],
-    color_mode: LightColorMode.RGB,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_rgbw_light", "on", {
@@ -87,16 +83,13 @@ const ENTITIES = [
     rgbw_color: [30, 100, 255, 125],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features:
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
+      LightColorModes.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
+      LightColorModes.COLOR_TEMP,
-      LightColorMode.RGBW,
+      LightColorModes.RGBW,
     ],
-    color_mode: LightColorMode.RGBW,
+    color_mode: LightColorModes.RGBW,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_rgbww_light", "on", {
@@ -105,16 +98,13 @@ const ENTITIES = [
     rgbww_color: [30, 100, 255, 125, 10],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features:
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
+      LightColorModes.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
+      LightColorModes.COLOR_TEMP,
-      LightColorMode.RGBWW,
+      LightColorModes.RGBWW,
     ],
-    color_mode: LightColorMode.RGBWW,
+    color_mode: LightColorModes.RGBWW,
     effect_list: ["random", "colorloop"],
   }),
   getEntity("light", "color_xy_light", "on", {
@@ -124,16 +114,13 @@ const ENTITIES = [
     rgb_color: [30, 100, 255],
     min_mireds: 30,
     max_mireds: 150,
-    supported_features:
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
     supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
+      LightColorModes.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
+      LightColorModes.COLOR_TEMP,
-      LightColorMode.XY,
+      LightColorModes.XY,
     ],
-    color_mode: LightColorMode.XY,
+    color_mode: LightColorModes.XY,
     effect_list: ["random", "colorloop"],
   }),
 ];

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -1024,13 +1024,10 @@ class HassioAddonInfo extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: this.supervisor.localize("dialog.uninstall_addon.title", {
+      title: this.addon.name,
-        name: this.addon.name,
+      text: "Are you sure you want to uninstall this add-on?",
-      }),
+      confirmText: "uninstall add-on",
-      text: this.supervisor.localize("dialog.uninstall_addon.text"),
+      dismissText: "no",
-      confirmText: this.supervisor.localize("dialog.uninstall_addon.uninstall"),
-      dismissText: this.supervisor.localize("common.cancel"),
-      destructive: true,
     });
 
     if (!confirmed) {

hassio/src/dialogs/suggestAddonRestart.ts

@@ -18,11 +18,9 @@ export const suggestAddonRestart = async (
   addon: HassioAddonDetails
 ): Promise<void> => {
   const confirmed = await showConfirmationDialog(element, {
-    title: supervisor.localize("dialog.restart_addon.title", {
+    title: supervisor.localize("common.restart_name", "name", addon.name),
-      name: addon.name,
-    }),
     text: supervisor.localize("dialog.restart_addon.text"),
-    confirmText: supervisor.localize("dialog.restart_addon.restart"),
+    confirmText: supervisor.localize("dialog.restart_addon.confirm_text"),
     dismissText: supervisor.localize("common.cancel"),
   });
   if (confirmed) {
@@ -30,9 +28,11 @@ export const suggestAddonRestart = async (
       await restartHassioAddon(hass, addon.slug);
     } catch (err: any) {
       showAlertDialog(element, {
-        title: supervisor.localize("common.failed_to_restart_name", {
+        title: supervisor.localize(
-          name: addon.name,
+          "common.failed_to_restart_name",
-        }),
+          "name",
+          addon.name
+        ),
         text: extractApiErrorMessage(err),
       });
     }

hassio/src/system/hassio-supervisor-info.ts

@@ -23,7 +23,6 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../src/dialogs/generic/show-dialog-box";
-import { showJoinBetaDialog } from "../../../src/panels/config/core/updates/show-dialog-join-beta";
 import {
   UNHEALTHY_REASON_URL,
   UNSUPPORTED_REASON_URL,
@@ -231,27 +230,36 @@ class HassioSupervisorInfo extends LitElement {
     button.progress = true;
 
     if (this.supervisor.supervisor.channel === "stable") {
-      showJoinBetaDialog(this, {
+      const confirmed = await showConfirmationDialog(this, {
-        join: async () => {
+        title: this.supervisor.localize("system.supervisor.warning"),
-          await this._setChannel("beta");
+        text: html`${this.supervisor.localize("system.supervisor.beta_warning")}
-          button.progress = false;
+          <br />
-        },
+          <b> ${this.supervisor.localize("system.supervisor.beta_backup")} </b>
-        cancel: () => {
+          <br /><br />
-          button.progress = false;
+          ${this.supervisor.localize("system.supervisor.beta_release_items")}
-        },
+          <ul>
+            <li>Home Assistant Core</li>
+            <li>Home Assistant Supervisor</li>
+            <li>Home Assistant Operating System</li>
+          </ul>
+          <br />
+          ${this.supervisor.localize("system.supervisor.beta_join_confirm")}`,
+        confirmText: this.supervisor.localize(
+          "system.supervisor.join_beta_action"
+        ),
+        dismissText: this.supervisor.localize("common.cancel"),
       });
-    } else {
-      await this._setChannel("stable");
-      button.progress = false;
-    }
-  }
 
-  private async _setChannel(
+      if (!confirmed) {
-    channel: SupervisorOptions["channel"]
+        button.progress = false;
-  ): Promise<void> {
+        return;
+      }
+    }
+
     try {
       const data: Partial<SupervisorOptions> = {
-        channel,
+        channel:
+          this.supervisor.supervisor.channel === "stable" ? "beta" : "stable",
       };
       await setSupervisorOption(this.hass, data);
       await this._reloadSupervisor();
@@ -262,6 +270,8 @@ class HassioSupervisorInfo extends LitElement {
         ),
         text: extractApiErrorMessage(err),
       });
+    } finally {
+      button.progress = false;
     }
   }
 

package.json

@@ -93,8 +93,8 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.4.1",
     "@thomasloven/round-slider": "0.5.4",
-    "@vaadin/combo-box": "^23.2.0",
+    "@vaadin/combo-box": "^23.1.5",
-    "@vaadin/vaadin-themable-mixin": "^23.2.0",
+    "@vaadin/vaadin-themable-mixin": "^23.1.5",
     "@vibrant/color": "^3.2.1-alpha.1",
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
@@ -111,7 +111,7 @@
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.2.3",
+    "hls.js": "^1.2.1",
     "home-assistant-js-websocket": "^8.0.0",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20220907.0"
+version      = "20220816.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

script/core

@@ -46,14 +46,6 @@ frontend:
 #   development_repo: ${WD}" >> "${WD}/config/configuration.yaml"
   fi
 
-  if [ ! -z "${CODESPACES}" ]; then
-  echo "
-http:
-  use_x_forwarded_for: true
-  trusted_proxies:
-    - 127.0.0.1
-" >> "${WD}/config/configuration.yaml"
-  fi
 fi
 
 hass -c "${WD}/config"

src/common/const.ts

@@ -6,7 +6,6 @@ import {
   mdiAlert,
   mdiAngleAcute,
   mdiAppleSafari,
-  mdiArrowLeftRight,
   mdiBell,
   mdiBookmark,
   mdiBrightness5,
@@ -26,6 +25,7 @@ import {
   mdiFlower,
   mdiFormatListBulleted,
   mdiFormTextbox,
+  mdiGasCylinder,
   mdiGauge,
   mdiGestureTapButton,
   mdiGoogleAssistant,
@@ -37,8 +37,6 @@ import {
   mdiLightningBolt,
   mdiMailbox,
   mdiMapMarkerRadius,
-  mdiMeterGas,
-  mdiMicrophoneMessage,
   mdiMolecule,
   mdiMoleculeCo,
   mdiMoleculeCo2,
@@ -49,14 +47,13 @@ import {
   mdiRobotVacuum,
   mdiScriptText,
   mdiSineWave,
-  mdiSpeedometer,
+  mdiMicrophoneMessage,
   mdiThermometer,
   mdiThermostat,
   mdiTimerOutline,
   mdiVideo,
   mdiWaterPercent,
   mdiWeatherCloudy,
-  mdiWeight,
   mdiWhiteBalanceSunny,
   mdiWifi,
 } from "@mdi/js";
@@ -124,13 +121,11 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   carbon_monoxide: mdiMoleculeCo,
   current: mdiCurrentAc,
   date: mdiCalendar,
-  distance: mdiArrowLeftRight,
   energy: mdiLightningBolt,
   frequency: mdiSineWave,
-  gas: mdiMeterGas,
+  gas: mdiGasCylinder,
   humidity: mdiWaterPercent,
   illuminance: mdiBrightness5,
-  moisture: mdiWaterPercent,
   monetary: mdiCash,
   nitrogen_dioxide: mdiMolecule,
   nitrogen_monoxide: mdiMolecule,
@@ -144,14 +139,11 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   pressure: mdiGauge,
   reactive_power: mdiFlash,
   signal_strength: mdiWifi,
-  speed: mdiSpeedometer,
   sulphur_dioxide: mdiMolecule,
   temperature: mdiThermometer,
   timestamp: mdiClock,
   volatile_organic_compounds: mdiMolecule,
   voltage: mdiSineWave,
-  // volume: TBD, => no well matching icon found
-  weight: mdiWeight,
 };
 
 /** Domains that have a state card. */

src/common/datetime/format_duration.ts

@@ -1,28 +0,0 @@
-import { HaDurationData } from "../../components/ha-duration-input";
-
-const leftPad = (num: number) => (num < 10 ? `0${num}` : num);
-
-export const formatDuration = (duration: HaDurationData) => {
-  const d = duration.days || 0;
-  const h = duration.hours || 0;
-  const m = duration.minutes || 0;
-  const s = duration.seconds || 0;
-  const ms = duration.milliseconds || 0;
-
-  if (d > 0) {
-    return `${d} days ${h}:${leftPad(m)}:${leftPad(s)}`;
-  }
-  if (h > 0) {
-    return `${h}:${leftPad(m)}:${leftPad(s)}`;
-  }
-  if (m > 0) {
-    return `${m}:${leftPad(s)}`;
-  }
-  if (s > 0) {
-    return `${s} seconds`;
-  }
-  if (ms > 0) {
-    return `${ms} milliseconds`;
-  }
-  return null;
-};

src/common/entity/compute_state_display.ts

@@ -2,18 +2,17 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { FrontendLocaleData } from "../../data/translation";
 import {
-  updateIsInstallingFromAttributes,
   UPDATE_SUPPORT_PROGRESS,
+  updateIsInstallingFromAttributes,
 } from "../../data/update";
-import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
 import { formatNumber, isNumericFromAttributes } from "../number/format_number";
-import { blankBeforePercent } from "../translations/blank_before_percent";
 import { LocalizeFunc } from "../translations/localize";
-import { computeDomain } from "./compute_domain";
 import { supportsFeatureFromAttributes } from "./supports-feature";
+import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
+import { computeDomain } from "./compute_domain";
 
 export const computeStateDisplay = (
   localize: LocalizeFunc,
@@ -68,7 +67,7 @@ export const computeStateDisplayFromEntityAttributes = (
     const unit = !attributes.unit_of_measurement
       ? ""
       : attributes.unit_of_measurement === "%"
-      ? blankBeforePercent(locale) + "%"
+      ? "%"
       : ` ${attributes.unit_of_measurement}`;
     return `${formatNumber(state, locale)}${unit}`;
   }

src/common/entity/feature_class_names.ts

@@ -1,14 +1,10 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { supportsFeature } from "./supports-feature";
 
-export type FeatureClassNames<T extends number = number> = Partial<
-  Record<T, string>
->;
-
 // Expects classNames to be an object mapping feature-bit -> className
 export const featureClassNames = (
   stateObj: HassEntity,
-  classNames: FeatureClassNames
+  classNames: { [feature: number]: string }
 ) => {
   if (!stateObj || !stateObj.attributes.supported_features) {
     return "";

src/common/entity/get_states.ts

@@ -37,7 +37,6 @@ const FIXED_DOMAIN_STATES = {
   siren: ["on", "off"],
   sun: ["above_horizon", "below_horizon"],
   switch: ["on", "off"],
-  timer: ["active", "idle", "paused"],
   update: ["on", "off"],
   vacuum: ["cleaning", "docked", "error", "idle", "paused", "returning"],
   weather: [
@@ -240,13 +239,10 @@ export const getStates = (
       }
       break;
     case "light":
-      if (attribute === "effect" && state.attributes.effect_list) {
+      if (attribute === "effect") {
         result.push(...state.attributes.effect_list);
-      } else if (
+      } else if (attribute === "color_mode") {
-        attribute === "color_mode" &&
+        result.push(...state.attributes.color_modes);
-        state.attributes.supported_color_modes
-      ) {
-        result.push(...state.attributes.supported_color_modes);
       }
       break;
     case "media_player":

src/common/string/title-case.ts

@@ -1,4 +0,0 @@
-export const titleCase = (s) =>
-  s.replace(/^_*(.)|_+(.)/g, (_s, c, d) =>
-    c ? c.toUpperCase() : " " + d.toUpperCase()
-  );

src/common/translations/blank_before_percent.ts

@@ -1,18 +0,0 @@
-import { FrontendLocaleData } from "../../data/translation";
-
-// Logic based on https://en.wikipedia.org/wiki/Percent_sign#Form_and_spacing
-export const blankBeforePercent = (
-  localeOptions: FrontendLocaleData
-): string => {
-  switch (localeOptions.language) {
-    case "cz":
-    case "de":
-    case "fi":
-    case "fr":
-    case "sk":
-    case "sv":
-      return " ";
-    default:
-      return "";
-  }
-};

src/components/chart/statistics-chart.ts

@@ -13,7 +13,6 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import {
@@ -21,37 +20,31 @@ import {
   numberFormatToLocale,
 } from "../../common/number/format_number";
 import {
+  getStatisticIds,
   getStatisticLabel,
-  getStatisticMetadata,
   Statistics,
   statisticsHaveType,
+  StatisticsMetaData,
   StatisticType,
-} from "../../data/recorder";
+} from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
 
-export type ExtendedStatisticType = StatisticType | "state";
-
-export const statTypeMap: Record<ExtendedStatisticType, StatisticType> = {
-  mean: "mean",
-  min: "min",
-  max: "max",
-  sum: "sum",
-  state: "sum",
-};
 @customElement("statistics-chart")
 class StatisticsChart extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public statisticsData!: Statistics;
 
+  @property({ type: Array }) public statisticIds?: StatisticsMetaData[];
+
   @property() public names: boolean | Record<string, string> = false;
 
   @property() public unit?: string;
 
   @property({ attribute: false }) public endTime?: Date;
 
-  @property({ type: Array }) public statTypes: Array<ExtendedStatisticType> = [
+  @property({ type: Array }) public statTypes: Array<StatisticType> = [
     "sum",
     "min",
     "mean",
@@ -198,28 +191,18 @@ class StatisticsChart extends LitElement {
     };
   }
 
-  private _getStatisticsMetaData = memoizeOne(
+  private async _getStatisticIds() {
-    async (statisticIds: string[] | undefined) => {
+    this.statisticIds = await getStatisticIds(this.hass);
-      const statsMetadataArray = await getStatisticMetadata(
+  }
-        this.hass,
-        statisticIds
-      );
-      const statisticsMetaData = {};
-      statsMetadataArray.forEach((x) => {
-        statisticsMetaData[x.statistic_id] = x;
-      });
-      return statisticsMetaData;
-    }
-  );
 
   private async _generateData() {
     if (!this.statisticsData) {
       return;
     }
 
-    const statisticsMetaData = await this._getStatisticsMetaData(
+    if (!this.statisticIds) {
-      Object.keys(this.statisticsData)
+      await this._getStatisticIds();
-    );
+    }
 
     let colorIndex = 0;
     const statisticsData = Object.values(this.statisticsData);
@@ -250,7 +233,9 @@ class StatisticsChart extends LitElement {
     const names = this.names || {};
     statisticsData.forEach((stats) => {
       const firstStat = stats[0];
-      const meta = statisticsMetaData?.[firstStat.statistic_id];
+      const meta = this.statisticIds!.find(
+        (stat) => stat.statistic_id === firstStat.statistic_id
+      );
       let name = names[firstStat.statistic_id];
       if (!name) {
         name = getStatisticLabel(this.hass, firstStat.statistic_id, meta);
@@ -316,7 +301,7 @@ class StatisticsChart extends LitElement {
         : this.statTypes;
 
       sortedTypes.forEach((type) => {
-        if (statisticsHaveType(stats, statTypeMap[type])) {
+        if (statisticsHaveType(stats, type)) {
           const band = drawBands && (type === "min" || type === "max");
           statTypes.push(type);
           statDataSets.push({
@@ -344,6 +329,7 @@ class StatisticsChart extends LitElement {
 
       let prevDate: Date | null = null;
       // Process chart data.
+      let initVal: number | null = null;
       let prevSum: number | null = null;
       stats.forEach((stat) => {
         const date = new Date(stat.start);
@@ -355,11 +341,11 @@ class StatisticsChart extends LitElement {
         statTypes.forEach((type) => {
           let val: number | null;
           if (type === "sum") {
-            if (prevSum === null) {
+            if (initVal === null) {
-              val = 0;
+              initVal = val = stat.state || 0;
               prevSum = stat.sum;
             } else {
-              val = (stat.sum || 0) - prevSum;
+              val = initVal + ((stat.sum || 0) - prevSum!);
             }
           } else {
             val = stat[type];

src/components/entity/ha-entity-state-picker.ts

@@ -7,8 +7,6 @@ import { getStates } from "../../common/entity/get_states";
 import { HomeAssistant } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
-import { formatAttributeValue } from "../../data/entity_attributes";
-import { fireEvent } from "../../common/dom/fire_event";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
@@ -57,7 +55,7 @@ class HaEntityStatePicker extends LitElement {
                     this.hass.locale,
                     key
                   )
-                : formatAttributeValue(this.hass, key),
+                : key,
             }))
           : [];
     }
@@ -71,7 +69,16 @@ class HaEntityStatePicker extends LitElement {
     return html`
       <ha-combo-box
         .hass=${this.hass}
-        .value=${this._value}
+        .value=${this.value
+          ? this.entityId && this.hass.states[this.entityId]
+            ? computeStateDisplay(
+                this.hass.localize,
+                this.hass.states[this.entityId],
+                this.hass.locale,
+                this.value
+              )
+            : this.value
+          : ""}
         .autofocus=${this.autofocus}
         .label=${this.label ??
         this.hass.localize("ui.components.entity.entity-state-picker.state")}
@@ -88,28 +95,12 @@ class HaEntityStatePicker extends LitElement {
     `;
   }
 
-  private get _value() {
-    return this.value || "";
-  }
-
   private _openedChanged(ev: PolymerChangedEvent<boolean>) {
     this._opened = ev.detail.value;
   }
 
   private _valueChanged(ev: PolymerChangedEvent<string>) {
-    ev.stopPropagation();
+    this.value = ev.detail.value;
-    const newValue = ev.detail.value;
-    if (newValue !== this._value) {
-      this._setValue(newValue);
-    }
-  }
-
-  private _setValue(value: string) {
-    this.value = value;
-    setTimeout(() => {
-      fireEvent(this, "value-changed", { value });
-      fireEvent(this, "change");
-    }, 0);
   }
 }
 

src/components/entity/ha-statistic-picker.ts

@@ -3,11 +3,10 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { ensureArray } from "../../common/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { stringCompare } from "../../common/string/compare";
-import { getStatisticIds, StatisticsMetaData } from "../../data/recorder";
+import { getStatisticIds, StatisticsMetaData } from "../../data/history";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
@@ -40,20 +39,22 @@ export class HaStatisticPicker extends LitElement {
     type: Array,
     attribute: "include-statistics-unit-of-measurement",
   })
-  public includeStatisticsUnitOfMeasurement?: string | string[];
+  public includeStatisticsUnitOfMeasurement?: string[];
 
   /**
    * Show only statistics displayed with these units of measurements.
+   * @type {Array}
    * @attr include-display-unit-of-measurement
    */
-  @property({ attribute: "include-display-unit-of-measurement" })
+  @property({ type: Array, attribute: "include-display-unit-of-measurement" })
-  public includeDisplayUnitOfMeasurement?: string | string[];
+  public includeDisplayUnitOfMeasurement?: string[];
 
   /**
    * Show only statistics with these device classes.
+   * @type {Array}
    * @attr include-device-classes
    */
-  @property({ attribute: "include-device-classes" })
+  @property({ type: Array, attribute: "include-device-classes" })
   public includeDeviceClasses?: string[];
 
   /**
@@ -96,8 +97,8 @@ export class HaStatisticPicker extends LitElement {
   private _getStatistics = memoizeOne(
     (
       statisticIds: StatisticsMetaData[],
-      includeStatisticsUnitOfMeasurement?: string | string[],
+      includeStatisticsUnitOfMeasurement?: string[],
-      includeDisplayUnitOfMeasurement?: string | string[],
+      includeDisplayUnitOfMeasurement?: string[],
       includeDeviceClasses?: string[],
       entitiesOnly?: boolean
     ): Array<{ id: string; name: string; state?: HassEntity }> => {
@@ -113,15 +114,17 @@ export class HaStatisticPicker extends LitElement {
       }
 
       if (includeStatisticsUnitOfMeasurement) {
-        const includeUnits = ensureArray(includeStatisticsUnitOfMeasurement);
         statisticIds = statisticIds.filter((meta) =>
-          includeUnits.includes(meta.statistics_unit_of_measurement)
+          includeStatisticsUnitOfMeasurement.includes(
+            meta.statistics_unit_of_measurement
+          )
         );
       }
       if (includeDisplayUnitOfMeasurement) {
-        const includeUnits = ensureArray(includeDisplayUnitOfMeasurement);
         statisticIds = statisticIds.filter((meta) =>
-          includeUnits.includes(meta.display_unit_of_measurement)
+          includeDisplayUnitOfMeasurement.includes(
+            meta.display_unit_of_measurement
+          )
         );
       }
 

src/components/entity/ha-statistics-picker.ts

@@ -22,52 +22,11 @@ class HaStatisticsPicker extends LitElement {
   @property({ attribute: "pick-statistic-label" })
   public pickStatisticLabel?: string;
 
-  /**
-   * Show only statistics natively stored with these units of measurements.
-   * @attr include-statistics-unit-of-measurement
-   */
-  @property({
-    attribute: "include-statistics-unit-of-measurement",
-  })
-  public includeStatisticsUnitOfMeasurement?: string[] | string;
-
-  /**
-   * Show only statistics displayed with these units of measurements.
-   * @attr include-display-unit-of-measurement
-   */
-  @property({ attribute: "include-display-unit-of-measurement" })
-  public includeDisplayUnitOfMeasurement?: string[] | string;
-
-  /**
-   * Ignore filtering of statistics type and units when only a single statistic is selected.
-   * @type {boolean}
-   * @attr ignore-restrictions-on-first-statistic
-   */
-  @property({
-    type: Boolean,
-    attribute: "ignore-restrictions-on-first-statistic",
-  })
-  public ignoreRestrictionsOnFirstStatistic = false;
-
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
     }
 
-    const ignoreRestriction =
-      this.ignoreRestrictionsOnFirstStatistic &&
-      this._currentStatistics.length <= 1;
-
-    const includeDisplayUnitCurrent = ignoreRestriction
-      ? undefined
-      : this.includeDisplayUnitOfMeasurement;
-    const includeStatisticsUnitCurrent = ignoreRestriction
-      ? undefined
-      : this.includeStatisticsUnitOfMeasurement;
-    const includeStatisticTypesCurrent = ignoreRestriction
-      ? undefined
-      : this.statisticTypes;
-
     return html`
       ${this._currentStatistics.map(
         (statisticId) => html`
@@ -75,10 +34,8 @@ class HaStatisticsPicker extends LitElement {
             <ha-statistic-picker
               .curValue=${statisticId}
               .hass=${this.hass}
-              .includeDisplayUnitOfMeasurement=${includeDisplayUnitCurrent}
-              .includeStatisticsUnitOfMeasurement=${includeStatisticsUnitCurrent}
               .value=${statisticId}
-              .statisticTypes=${includeStatisticTypesCurrent}
+              .statisticTypes=${this.statisticTypes}
               .statisticIds=${this.statisticIds}
               .label=${this.pickedStatisticLabel}
               @value-changed=${this._statisticChanged}
@@ -89,10 +46,6 @@ class HaStatisticsPicker extends LitElement {
       <div>
         <ha-statistic-picker
           .hass=${this.hass}
-          .includeDisplayUnitOfMeasurement=${this
-            .includeDisplayUnitOfMeasurement}
-          .includeStatisticsUnitOfMeasurement=${this
-            .includeStatisticsUnitOfMeasurement}
           .statisticTypes=${this.statisticTypes}
           .statisticIds=${this.statisticIds}
           .label=${this.pickStatisticLabel}

src/components/ha-combo-box.ts

@@ -290,7 +290,6 @@ export class HaComboBox extends LitElement {
       }
       vaadin-combo-box-light {
         position: relative;
-        --vaadin-combo-box-overlay-max-height: calc(45vh);
       }
       ha-textfield {
         width: 100%;

src/components/ha-cover-controls.ts

@@ -3,14 +3,15 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { computeCloseIcon, computeOpenIcon } from "../common/entity/cover_icon";
-import { supportsFeature } from "../common/entity/supports-feature";
 import {
   CoverEntity,
-  CoverEntityFeature,
   isClosing,
   isFullyClosed,
   isFullyOpen,
   isOpening,
+  supportsClose,
+  supportsOpen,
+  supportsStop,
 } from "../data/cover";
 import { UNAVAILABLE } from "../data/entity";
 import type { HomeAssistant } from "../types";
@@ -31,7 +32,7 @@ class HaCoverControls extends LitElement {
       <div class="state">
         <ha-icon-button
           class=${classMap({
-            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.OPEN),
+            hidden: !supportsOpen(this.stateObj),
           })}
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.cover.open_cover"
@@ -43,7 +44,7 @@ class HaCoverControls extends LitElement {
         </ha-icon-button>
         <ha-icon-button
           class=${classMap({
-            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.STOP),
+            hidden: !supportsStop(this.stateObj),
           })}
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.cover.stop_cover"
@@ -54,7 +55,7 @@ class HaCoverControls extends LitElement {
         ></ha-icon-button>
         <ha-icon-button
           class=${classMap({
-            hidden: !supportsFeature(this.stateObj, CoverEntityFeature.CLOSE),
+            hidden: !supportsClose(this.stateObj),
           })}
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.cover.close_cover"

src/components/ha-cover-tilt-controls.ts

@@ -2,12 +2,13 @@ import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { supportsFeature } from "../common/entity/supports-feature";
 import {
   CoverEntity,
-  CoverEntityFeature,
   isFullyClosedTilt,
   isFullyOpenTilt,
+  supportsCloseTilt,
+  supportsOpenTilt,
+  supportsStopTilt,
 } from "../data/cover";
 import { UNAVAILABLE } from "../data/entity";
 import { HomeAssistant } from "../types";
@@ -26,10 +27,7 @@ class HaCoverTiltControls extends LitElement {
 
     return html` <ha-icon-button
         class=${classMap({
-          invisible: !supportsFeature(
+          invisible: !supportsOpenTilt(this.stateObj),
-            this.stateObj,
-            CoverEntityFeature.OPEN_TILT
-          ),
         })}
         .label=${this.hass.localize(
           "ui.dialogs.more_info_control.cover.open_tilt_cover"
@@ -40,10 +38,7 @@ class HaCoverTiltControls extends LitElement {
       ></ha-icon-button>
       <ha-icon-button
         class=${classMap({
-          invisible: !supportsFeature(
+          invisible: !supportsStopTilt(this.stateObj),
-            this.stateObj,
-            CoverEntityFeature.STOP_TILT
-          ),
         })}
         .label=${this.hass.localize(
           "ui.dialogs.more_info_control.cover.stop_cover"
@@ -54,10 +49,7 @@ class HaCoverTiltControls extends LitElement {
       ></ha-icon-button>
       <ha-icon-button
         class=${classMap({
-          invisible: !supportsFeature(
+          invisible: !supportsCloseTilt(this.stateObj),
-            this.stateObj,
-            CoverEntityFeature.CLOSE_TILT
-          ),
         })}
         .label=${this.hass.localize(
           "ui.dialogs.more_info_control.cover.close_tilt_cover"

src/components/ha-formfield.ts

@@ -13,9 +13,6 @@ export class HaFormfield extends FormfieldBase {
       switch (input.tagName) {
         case "HA-CHECKBOX":
         case "HA-RADIO":
-          if ((input as any).disabled) {
-            break;
-          }
           (input as any).checked = !(input as any).checked;
           fireEvent(input, "change");
           break;

src/components/ha-gauge.ts

@@ -2,7 +2,6 @@ import { css, LitElement, PropertyValues, svg, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { formatNumber } from "../common/number/format_number";
-import { blankBeforePercent } from "../common/translations/blank_before_percent";
 import { afterNextRender } from "../common/util/render-status";
 import { FrontendLocaleData } from "../data/translation";
 import { getValueInPercentage, normalize } from "../util/calculate";
@@ -134,11 +133,7 @@ export class Gauge extends LitElement {
               ? this._segment_label
               : this.valueText || formatNumber(this.value, this.locale)
           }${
-      this._segment_label
+      this._segment_label ? "" : this.label === "%" ? "%" : ` ${this.label}`
-        ? ""
-        : this.label === "%"
-        ? blankBeforePercent(this.locale) + "%"
-        : ` ${this.label}`
     }
         </text>
       </svg>`;

src/components/ha-hls-player.ts

@@ -165,7 +165,7 @@ class HaHLSPlayer extends LitElement {
     window.addEventListener("resize", this._resizeExoPlayer);
     this.updateComplete.then(() => nextRender()).then(this._resizeExoPlayer);
     this._videoEl.style.visibility = "hidden";
-    await this.hass!.auth.external!.fireMessage({
+    await this.hass!.auth.external!.sendMessage({
       type: "exoplayer/play_hls",
       payload: {
         url: new URL(url, window.location.href).toString(),

src/components/ha-icon-overflow-menu.ts

@@ -3,8 +3,6 @@ import { mdiDotsVertical } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";
 import "./ha-button-menu";
 import "./ha-icon-button";
@@ -17,9 +15,7 @@ export interface IconOverflowMenuItem {
   narrowOnly?: boolean;
   disabled?: boolean;
   tooltip?: string;
-  action: () => any;
+  onClick: CallableFunction;
-  warning?: boolean;
-  divider?: boolean;
 }
 
 @customElement("ha-icon-overflow-menu")
@@ -47,23 +43,19 @@ export class HaIconOverflowMenu extends LitElement {
                 slot="trigger"
               ></ha-icon-button>
 
-              ${this.items.map((item) =>
+              ${this.items.map(
-                item.divider
+                (item) => html`
-                  ? html`<li divider role="separator"></li>`
+                  <mwc-list-item
-                  : html`<mwc-list-item
+                    graphic="icon"
-                      graphic="icon"
+                    .disabled=${item.disabled}
-                      ?disabled=${item.disabled}
+                    @click=${item.action}
-                      @click=${item.action}
+                  >
-                      class=${classMap({ warning: Boolean(item.warning) })}
+                    <div slot="graphic">
-                    >
+                      <ha-svg-icon .path=${item.path}></ha-svg-icon>
-                      <div slot="graphic">
+                    </div>
-                        <ha-svg-icon
+                    ${item.label}
-                          class=${classMap({ warning: Boolean(item.warning) })}
+                  </mwc-list-item>
-                          .path=${item.path}
+                `
-                        ></ha-svg-icon>
-                      </div>
-                      ${item.label}
-                    </mwc-list-item> `
               )}
             </ha-button-menu>`
         : html`
@@ -71,8 +63,6 @@ export class HaIconOverflowMenu extends LitElement {
             ${this.items.map((item) =>
               item.narrowOnly
                 ? ""
-                : item.divider
-                ? html`<div role="separator"></div>`
                 : html`<div>
                     ${item.tooltip
                       ? html`<paper-tooltip animation-delay="0" position="left">
@@ -83,7 +73,7 @@ export class HaIconOverflowMenu extends LitElement {
                       @click=${item.action}
                       .label=${item.label}
                       .path=${item.path}
-                      ?disabled=${item.disabled}
+                      .disabled=${item.disabled}
                     ></ha-icon-button>
                   </div> `
             )}
@@ -91,8 +81,7 @@ export class HaIconOverflowMenu extends LitElement {
     `;
   }
 
-  protected _handleIconOverflowMenuOpened(e) {
+  protected _handleIconOverflowMenuOpened() {
-    e.stopPropagation();
     // If this component is used inside a data table, the z-index of the row
     // needs to be increased. Otherwise the ha-button-menu would be displayed
     // underneath the next row in the table.
@@ -110,22 +99,12 @@ export class HaIconOverflowMenu extends LitElement {
   }
 
   static get styles() {
-    return [
+    return css`
-      haStyle,
+      :host {
-      css`
+        display: flex;
-        :host {
+        justify-content: flex-end;
-          display: flex;
+      }
-          justify-content: flex-end;
+    `;
-        }
-        li[role="separator"] {
-          border-bottom-color: var(--divider-color);
-        }
-        div[role="separator"] {
-          border-right: 1px solid var(--divider-color);
-          width: 1px;
-        }
-      `,
-    ];
   }
 }
 

src/components/ha-icon-picker.ts

@@ -1,4 +1,4 @@
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
@@ -13,8 +13,7 @@ type IconItem = {
   icon: string;
   keywords: string[];
 };
-let iconItems: IconItem[] = [{ icon: "", keywords: [] }];
+let iconItems: IconItem[] = [];
-let iconLoaded = false;
 
 // eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<IconItem> = (item) => html`<mwc-list-item
@@ -89,16 +88,15 @@ export class HaIconPicker extends LitElement {
 
   private async _openedChanged(ev: PolymerChangedEvent<boolean>) {
     this._opened = ev.detail.value;
-    if (this._opened && !iconLoaded) {
+    if (this._opened && !iconItems.length) {
       const iconList = await import("../../build/mdi/iconList.json");
 
       iconItems = iconList.default.map((icon) => ({
         icon: `mdi:${icon.name}`,
         keywords: icon.keywords,
       }));
-      iconLoaded = true;
 
-      this.comboBox.filteredItems = iconItems;
+      (this.comboBox as any).filteredItems = iconItems;
 
       Object.keys(customIcons).forEach((iconSet) => {
         this._loadCustomIconItems(iconSet);
@@ -118,17 +116,13 @@ export class HaIconPicker extends LitElement {
         keywords: icon.keywords ?? [],
       }));
       iconItems.push(...customIconItems);
-      this.comboBox.filteredItems = iconItems;
+      (this.comboBox as any).filteredItems = iconItems;
     } catch (e) {
       // eslint-disable-next-line
       console.warn(`Unable to load icon list for ${iconsetPrefix} iconset`);
     }
   }
 
-  protected shouldUpdate(changedProps: PropertyValues) {
-    return !this._opened || changedProps.has("_opened");
-  }
-
   private _valueChanged(ev: PolymerChangedEvent<string>) {
     ev.stopPropagation();
     this._setValue(ev.detail.value);
@@ -167,12 +161,14 @@ export class HaIconPicker extends LitElement {
       filteredItems.push(...filteredItemsByKeywords);
 
       if (filteredItems.length > 0) {
-        this.comboBox.filteredItems = filteredItems;
+        (this.comboBox as any).filteredItems = filteredItems;
       } else {
-        this.comboBox.filteredItems = [{ icon: filterString, keywords: [] }];
+        (this.comboBox as any).filteredItems = [
+          { icon: filterString, keywords: [] },
+        ];
       }
     } else {
-      this.comboBox.filteredItems = iconItems;
+      (this.comboBox as any).filteredItems = iconItems;
     }
   }
 

src/components/ha-navigation-picker.ts

@@ -1,221 +0,0 @@
-import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import { titleCase } from "../common/string/title-case";
-import {
-  fetchConfig,
-  LovelaceConfig,
-  LovelaceViewConfig,
-} from "../data/lovelace";
-import { PolymerChangedEvent } from "../polymer-types";
-import { HomeAssistant, PanelInfo } from "../types";
-import "./ha-combo-box";
-import type { HaComboBox } from "./ha-combo-box";
-import "./ha-icon";
-
-type NavigationItem = {
-  path: string;
-  icon: string;
-  title: string;
-};
-
-const DEFAULT_ITEMS: NavigationItem[] = [{ path: "", icon: "", title: "" }];
-
-// eslint-disable-next-line lit/prefer-static-styles
-const rowRenderer: ComboBoxLitRenderer<NavigationItem> = (item) => html`
-  <mwc-list-item graphic="icon" .twoline=${!!item.title}>
-    <ha-icon .icon=${item.icon} slot="graphic"></ha-icon>
-    <span>${item.title || item.path}</span>
-    <span slot="secondary">${item.path}</span>
-  </mwc-list-item>
-`;
-
-const createViewNavigationItem = (
-  prefix: string,
-  view: LovelaceViewConfig,
-  index: number
-) => ({
-  path: `/${prefix}/${view.path ?? index}`,
-  icon: view.icon ?? "mdi:view-compact",
-  title: view.title ?? (view.path ? titleCase(view.path) : `${index}`),
-});
-
-const createPanelNavigationItem = (hass: HomeAssistant, panel: PanelInfo) => ({
-  path: `/${panel.url_path}`,
-  icon: panel.icon ?? "mdi:view-dashboard",
-  title:
-    panel.url_path === hass.defaultPanel
-      ? hass.localize("panel.states")
-      : hass.localize(`panel.${panel.title}`) ||
-        panel.title ||
-        (panel.url_path ? titleCase(panel.url_path) : ""),
-});
-
-@customElement("ha-navigation-picker")
-export class HaNavigationPicker extends LitElement {
-  @property() public hass?: HomeAssistant;
-
-  @property() public label?: string;
-
-  @property() public value?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = false;
-
-  @state() private _opened = false;
-
-  private navigationItemsLoaded = false;
-
-  private navigationItems: NavigationItem[] = DEFAULT_ITEMS;
-
-  @query("ha-combo-box", true) private comboBox!: HaComboBox;
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-combo-box
-        .hass=${this.hass}
-        item-value-path="path"
-        item-label-path="path"
-        .value=${this._value}
-        allow-custom-value
-        .filteredItems=${this.navigationItems}
-        .label=${this.label}
-        .helper=${this.helper}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        .renderer=${rowRenderer}
-        @opened-changed=${this._openedChanged}
-        @value-changed=${this._valueChanged}
-        @filter-changed=${this._filterChanged}
-      >
-      </ha-combo-box>
-    `;
-  }
-
-  private async _openedChanged(ev: PolymerChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-    if (this._opened && !this.navigationItemsLoaded) {
-      this._loadNavigationItems();
-    }
-  }
-
-  private async _loadNavigationItems() {
-    this.navigationItemsLoaded = true;
-
-    const panels = Object.entries(this.hass!.panels).map(([id, panel]) => ({
-      id,
-      ...panel,
-    }));
-    const lovelacePanels = panels.filter(
-      (panel) => panel.component_name === "lovelace"
-    );
-
-    const viewConfigs = await Promise.all(
-      lovelacePanels.map((panel) =>
-        fetchConfig(
-          this.hass!.connection,
-          // path should be null to fetch default lovelace panel
-          panel.url_path === "lovelace" ? null : panel.url_path,
-          true
-        )
-          .then((config) => [panel.id, config] as [string, LovelaceConfig])
-          .catch((_) => [panel.id, undefined] as [string, undefined])
-      )
-    );
-
-    const panelViewConfig = new Map(viewConfigs);
-
-    this.navigationItems = [];
-
-    for (const panel of panels) {
-      this.navigationItems.push(createPanelNavigationItem(this.hass!, panel));
-
-      const config = panelViewConfig.get(panel.id);
-
-      if (!config) continue;
-
-      config.views.forEach((view, index) =>
-        this.navigationItems.push(
-          createViewNavigationItem(panel.url_path, view, index)
-        )
-      );
-    }
-
-    this.comboBox.filteredItems = this.navigationItems;
-  }
-
-  protected shouldUpdate(changedProps: PropertyValues) {
-    return !this._opened || changedProps.has("_opened");
-  }
-
-  private _valueChanged(ev: PolymerChangedEvent<string>) {
-    ev.stopPropagation();
-    this._setValue(ev.detail.value);
-  }
-
-  private _setValue(value: string) {
-    this.value = value;
-    fireEvent(
-      this,
-      "value-changed",
-      { value: this._value },
-      {
-        bubbles: false,
-        composed: false,
-      }
-    );
-  }
-
-  private _filterChanged(ev: CustomEvent): void {
-    const filterString = ev.detail.value.toLowerCase();
-    const characterCount = filterString.length;
-    if (characterCount >= 2) {
-      const filteredItems: NavigationItem[] = [];
-
-      this.navigationItems.forEach((item) => {
-        if (
-          item.path.toLowerCase().includes(filterString) ||
-          item.title.toLowerCase().includes(filterString)
-        ) {
-          filteredItems.push(item);
-        }
-      });
-
-      if (filteredItems.length > 0) {
-        this.comboBox.filteredItems = filteredItems;
-      } else {
-        this.comboBox.filteredItems = [];
-      }
-    } else {
-      this.comboBox.filteredItems = this.navigationItems;
-    }
-  }
-
-  private get _value() {
-    return this.value || "";
-  }
-
-  static get styles() {
-    return css`
-      ha-icon,
-      ha-svg-icon {
-        color: var(--primary-text-color);
-        position: relative;
-        bottom: 0px;
-      }
-      *[slot="prefix"] {
-        margin-right: 8px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-navigation-picker": HaNavigationPicker;
-  }
-}

src/components/ha-selector/ha-selector-navigation.ts

@@ -1,47 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import { NavigationSelector } from "../../data/selector";
-import { HomeAssistant } from "../../types";
-import "../ha-navigation-picker";
-
-@customElement("ha-selector-navigation")
-export class HaNavigationSelector extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public selector!: NavigationSelector;
-
-  @property() public value?: string;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean, reflect: true }) public disabled = false;
-
-  @property({ type: Boolean }) public required = true;
-
-  protected render() {
-    return html`
-      <ha-navigation-picker
-        .hass=${this.hass}
-        .label=${this.label}
-        .value=${this.value}
-        .required=${this.required}
-        .disabled=${this.disabled}
-        .helper=${this.helper}
-        @value-changed=${this._valueChanged}
-      ></ha-navigation-picker>
-    `;
-  }
-
-  private _valueChanged(ev: CustomEvent) {
-    fireEvent(this, "value-changed", { value: ev.detail.value });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-navigation": HaNavigationSelector;
-  }
-}

src/components/ha-selector/ha-selector-number.ts

@@ -51,9 +51,8 @@ export class HaNumberSelector extends LitElement {
             `
           : ""}
         <ha-textfield
-          .inputMode=${(this.selector.number.step || 1) % 1 !== 0
+          inputMode="numeric"
-            ? "decimal"
+          pattern="[0-9]+([\\.][0-9]+)?"
-            : "numeric"}
           .label=${this.selector.number.mode !== "box" ? undefined : this.label}
           .placeholder=${this.placeholder}
           class=${classMap({ single: this.selector.number.mode === "box" })}

src/components/ha-selector/ha-selector-select.ts

@@ -13,7 +13,6 @@ import type { HaComboBox } from "../ha-combo-box";
 import "../ha-formfield";
 import "../ha-radio";
 import "../ha-select";
-import "../ha-input-helper-text";
 
 @customElement("ha-selector-select")
 export class HaSelectSelector extends LitElement {
@@ -41,7 +40,7 @@ export class HaSelectSelector extends LitElement {
     );
 
     if (!this.selector.select.custom_value && this._mode === "list") {
-      if (!this.selector.select.multiple) {
+      if (!this.selector.select.multiple || this.required) {
         return html`
           <div>
             ${this.label}
@@ -51,7 +50,7 @@ export class HaSelectSelector extends LitElement {
                   <ha-radio
                     .checked=${item.value === this.value}
                     .value=${item.value}
-                    .disabled=${item.disabled || this.disabled}
+                    .disabled=${this.disabled}
                     @change=${this._valueChanged}
                   ></ha-radio>
                 </ha-formfield>
@@ -64,14 +63,13 @@ export class HaSelectSelector extends LitElement {
 
       return html`
         <div>
-          ${this.label}
+          ${this.label}${options.map(
-          ${options.map(
             (item: SelectOption) => html`
               <ha-formfield .label=${item.label}>
                 <ha-checkbox
                   .checked=${this.value?.includes(item.value)}
                   .value=${item.value}
-                  .disabled=${item.disabled || this.disabled}
+                  .disabled=${this.disabled}
                   @change=${this._checkboxChanged}
                 ></ha-checkbox>
               </ha-formfield>
@@ -114,9 +112,7 @@ export class HaSelectSelector extends LitElement {
           .disabled=${this.disabled}
           .required=${this.required && !value.length}
           .value=${this._filter}
-          .items=${options.filter(
+          .items=${options.filter((item) => !this.value?.includes(item.value))}
-            (option) => !option.disabled && !value?.includes(option.value)
-          )}
           @filter-changed=${this._filterChanged}
           @value-changed=${this._comboBoxValueChanged}
         ></ha-combo-box>
@@ -140,7 +136,7 @@ export class HaSelectSelector extends LitElement {
           .helper=${this.helper}
           .disabled=${this.disabled}
           .required=${this.required}
-          .items=${options.filter((item) => !item.disabled)}
+          .items=${options}
           .value=${this.value}
           @filter-changed=${this._filterChanged}
           @value-changed=${this._comboBoxValueChanged}
@@ -161,9 +157,7 @@ export class HaSelectSelector extends LitElement {
       >
         ${options.map(
           (item: SelectOption) => html`
-            <mwc-list-item .value=${item.value} .disabled=${item.disabled}
+            <mwc-list-item .value=${item.value}>${item.label}</mwc-list-item>
-              >${item.label}</mwc-list-item
-            >
           `
         )}
       </ha-select>
@@ -291,9 +285,6 @@ export class HaSelectSelector extends LitElement {
     ha-formfield {
       display: block;
     }
-    mwc-list-item[disabled] {
-      --mdc-theme-text-primary-on-background: var(--disabled-text-color);
-    }
   `;
 }
 

src/components/ha-selector/ha-selector.ts

@@ -16,7 +16,6 @@ import "./ha-selector-device";
 import "./ha-selector-duration";
 import "./ha-selector-entity";
 import "./ha-selector-file";
-import "./ha-selector-navigation";
 import "./ha-selector-number";
 import "./ha-selector-object";
 import "./ha-selector-select";

src/components/ha-sidebar.ts

@@ -221,15 +221,13 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   private _sortable?: SortableInstance;
 
   public hassSubscribe(): UnsubscribeFunc[] {
-    return this.hass.user?.is_admin
+    return [
-      ? [
+      subscribeRepairsIssueRegistry(this.hass.connection!, (repairs) => {
-          subscribeRepairsIssueRegistry(this.hass.connection!, (repairs) => {
+        this._issuesCount = repairs.issues.filter(
-            this._issuesCount = repairs.issues.filter(
+          (issue) => !issue.ignored
-              (issue) => !issue.ignored
+        ).length;
-            ).length;
+      }),
-          }),
+    ];
-        ]
-      : [];
   }
 
   protected render() {

src/components/ha-textfield.ts

@@ -82,13 +82,6 @@ export class HaTextField extends TextFieldBase {
         direction: var(--direction);
       }
 
-      .mdc-floating-label:not(.mdc-floating-label--float-above) {
-        text-overflow: ellipsis;
-        width: inherit;
-        padding-right: 30px;
-        box-sizing: border-box;
-      }
-
       input {
         text-align: var(--text-field-text-align, start);
       }

src/components/trace/trace-tab-styles.ts

@@ -28,7 +28,7 @@ export const traceTabStyles = css`
   }
 
   .tabs > *.active {
-    border-bottom-color: var(--primary-color);
+    border-bottom-color: var(--accent-color);
   }
 
   .tabs > *:focus,

src/data/application_credential.ts

@@ -8,10 +8,6 @@ export interface ApplicationCredentialsConfig {
   integrations: Record<string, ApplicationCredentialsDomainConfig>;
 }
 
-export interface ApplicationCredentialsConfigEntry {
-  application_credentials_id?: string;
-}
-
 export interface ApplicationCredential {
   id: string;
   domain: string;
@@ -25,15 +21,6 @@ export const fetchApplicationCredentialsConfig = async (hass: HomeAssistant) =>
     type: "application_credentials/config",
   });
 
-export const fetchApplicationCredentialsConfigEntry = async (
-  hass: HomeAssistant,
-  configEntryId: string
-) =>
-  hass.callWS<ApplicationCredentialsConfigEntry>({
-    type: "application_credentials/config_entry",
-    config_entry_id: configEntryId,
-  });
-
 export const fetchApplicationCredentials = async (hass: HomeAssistant) =>
   hass.callWS<ApplicationCredential[]>({
     type: "application_credentials/list",

src/data/automation.ts

@@ -9,7 +9,6 @@ import { DeviceCondition, DeviceTrigger } from "./device_automation";
 import { Action, MODES } from "./script";
 
 export const AUTOMATION_DEFAULT_MODE: typeof MODES[number] = "single";
-export const AUTOMATION_DEFAULT_MAX = 10;
 
 export interface AutomationEntity extends HassEntityBase {
   attributes: HassEntityAttributeBase & {
@@ -314,25 +313,11 @@ let inititialAutomationEditorData: Partial<AutomationConfig> | undefined;
 export const getAutomationConfig = (hass: HomeAssistant, id: string) =>
   hass.callApi<AutomationConfig>("GET", `config/automation/config/${id}`);
 
-export const saveAutomationConfig = (
-  hass: HomeAssistant,
-  id: string,
-  config: AutomationConfig
-) => hass.callApi<void>("POST", `config/automation/config/${id}`, config);
-
 export const showAutomationEditor = (data?: Partial<AutomationConfig>) => {
   inititialAutomationEditorData = data;
   navigate("/config/automation/edit/new");
 };
 
-export const duplicateAutomation = (config: AutomationConfig) => {
-  showAutomationEditor({
-    ...config,
-    id: undefined,
-    alias: undefined,
-  });
-};
-
 export const getAutomationEditorInitData = () => {
   const data = inititialAutomationEditorData;
   inititialAutomationEditorData = undefined;

src/data/automation_i18n.ts

@@ -1,15 +1,7 @@
-import { formatDuration } from "../common/datetime/format_duration";
 import secondsToDuration from "../common/datetime/seconds_to_duration";
-import { ensureArray } from "../common/ensure-array";
 import { computeStateName } from "../common/entity/compute_state_name";
 import type { HomeAssistant } from "../types";
 import { Condition, Trigger } from "./automation";
-import {
-  DeviceCondition,
-  DeviceTrigger,
-  localizeDeviceAutomationCondition,
-  localizeDeviceAutomationTrigger,
-} from "./device_automation";
 import { formatAttributeName } from "./entity_attributes";
 
 export const describeTrigger = (
@@ -76,7 +68,7 @@ export const describeTrigger = (
   }
 
   // State Trigger
-  if (trigger.platform === "state") {
+  if (trigger.platform === "state" && trigger.entity_id) {
     let base = "When";
     let entities = "";
 
@@ -97,17 +89,12 @@ export const describeTrigger = (
           } ${computeStateName(states[entity]) || entity}`;
         }
       }
-    } else if (trigger.entity_id) {
+    } else {
       entities = states[trigger.entity_id]
         ? computeStateName(states[trigger.entity_id])
         : trigger.entity_id;
     }
 
-    if (!entities) {
-      // no entity_id or empty array
-      entities = "something";
-    }
-
     base += ` ${entities} changes`;
 
     if (trigger.from) {
@@ -141,19 +128,17 @@ export const describeTrigger = (
       base += ` to ${to}`;
     }
 
-    if (trigger.for) {
+    if ("for" in trigger) {
-      let duration: string | null;
+      let duration: string;
       if (typeof trigger.for === "number") {
-        duration = secondsToDuration(trigger.for);
+        duration = `for ${secondsToDuration(trigger.for)!}`;
       } else if (typeof trigger.for === "string") {
-        duration = trigger.for;
+        duration = `for ${trigger.for}`;
       } else {
-        duration = formatDuration(trigger.for);
+        duration = `for ${JSON.stringify(trigger.for)}`;
       }
 
-      if (duration) {
+      base += ` for ${duration}`;
-        base += ` for ${duration}`;
-      }
     }
 
     return base;
@@ -189,7 +174,7 @@ export const describeTrigger = (
   // Time Trigger
   if (trigger.platform === "time" && trigger.at) {
     const at = trigger.at.includes(".")
-      ? `entity ${computeStateName(hass.states[trigger.at]) || trigger.at}`
+      ? hass.states[trigger.at] || trigger.at
       : trigger.at;
 
     return `When the time is equal to ${at}`;
@@ -295,7 +280,7 @@ export const describeTrigger = (
   }
   // MQTT Trigger
   if (trigger.platform === "mqtt") {
-    return "When an MQTT message has been received";
+    return "When a MQTT payload has been received";
   }
 
   // Template Trigger
@@ -307,25 +292,7 @@ export const describeTrigger = (
   if (trigger.platform === "webhook") {
     return "When a Webhook payload has been received";
   }
-
+  return `${trigger.platform || "Unknown"} trigger`;
-  if (trigger.platform === "device") {
-    if (!trigger.device_id) {
-      return "Device trigger";
-    }
-    const config = trigger as DeviceTrigger;
-    const localized = localizeDeviceAutomationTrigger(hass, config);
-    if (localized) {
-      return localized;
-    }
-    const stateObj = hass.states[config.entity_id as string];
-    return `${stateObj ? computeStateName(stateObj) : config.entity_id} ${
-      config.type
-    }`;
-  }
-
-  return `${
-    trigger.platform ? trigger.platform.replace(/_/g, " ") : "Unknown"
-  } trigger`;
 };
 
 export const describeCondition = (
@@ -337,64 +304,15 @@ export const describeCondition = (
     return condition.alias;
   }
 
-  if (!condition.condition) {
+  if (["or", "and", "not"].includes(condition.condition)) {
-    const shorthands: Array<"and" | "or" | "not"> = ["and", "or", "not"];
+    return `multiple conditions using "${condition.condition}"`;
-    for (const key of shorthands) {
-      if (!(key in condition)) {
-        continue;
-      }
-      if (ensureArray(condition[key])) {
-        condition = {
-          condition: key,
-          conditions: condition[key],
-        };
-      }
-    }
-  }
-
-  if (condition.condition === "or") {
-    const conditions = ensureArray(condition.conditions);
-
-    let count = "condition";
-
-    if (conditions && conditions.length > 0) {
-      count = `of ${conditions.length} conditions`;
-    }
-
-    return `Test if any ${count} matches`;
-  }
-
-  if (condition.condition === "and") {
-    const conditions = ensureArray(condition.conditions);
-
-    const count =
-      conditions && conditions.length > 0
-        ? `${conditions.length} `
-        : "multiple";
-
-    return `Test if ${count} conditions match`;
-  }
-
-  if (condition.condition === "not") {
-    const conditions = ensureArray(condition.conditions);
-
-    const what =
-      conditions && conditions.length > 0
-        ? `none of ${conditions.length} conditions match`
-        : "no condition matches";
-
-    return `Test if ${what}`;
   }
 
   // State Condition
-  if (condition.condition === "state") {
+  if (condition.condition === "state" && condition.entity_id) {
     let base = "Confirm";
     const stateObj = hass.states[condition.entity_id];
-    const entity = stateObj
+    const entity = stateObj ? computeStateName(stateObj) : condition.entity_id;
-      ? computeStateName(stateObj)
-      : condition.entity_id
-      ? condition.entity_id
-      : "an entity";
 
     if ("attribute" in condition) {
       base += ` ${condition.attribute} from`;
@@ -410,14 +328,10 @@ export const describeCondition = (
             : ""
         } ${state}`;
       }
-    } else if (condition.state) {
+    } else {
       states = condition.state.toString();
     }
 
-    if (!states) {
-      states = "a state";
-    }
-
     base += ` ${entity} is ${states}`;
 
     if ("for" in condition) {
@@ -553,22 +467,5 @@ export const describeCondition = (
     }`;
   }
 
-  if (condition.condition === "device") {
+  return `${condition.condition} condition`;
-    if (!condition.device_id) {
-      return "Device condition";
-    }
-    const config = condition as DeviceCondition;
-    const localized = localizeDeviceAutomationCondition(hass, config);
-    if (localized) {
-      return localized;
-    }
-    const stateObj = hass.states[config.entity_id as string];
-    return `${stateObj ? computeStateName(stateObj) : config.entity_id} ${
-      config.type
-    }`;
-  }
-
-  return `${
-    condition.condition ? condition.condition.replace(/_/g, " ") : "Unknown"
-  } condition`;
 };

src/data/config_entries.ts

@@ -1,4 +1,3 @@
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
 
 export interface ConfigEntry {
@@ -45,29 +44,6 @@ export const RECOVERABLE_STATES: ConfigEntry["state"][] = [
   "setup_retry",
 ];
 
-export interface ConfigEntryUpdate {
-  // null means no update as is the current state
-  type: null | "added" | "removed" | "updated";
-  entry: ConfigEntry;
-}
-
-export const subscribeConfigEntries = (
-  hass: HomeAssistant,
-  callbackFunction: (message: ConfigEntryUpdate[]) => void,
-  filters?: { type?: "helper" | "integration"; domain?: string }
-): Promise<UnsubscribeFunc> => {
-  const params: any = {
-    type: "config_entries/subscribe",
-  };
-  if (filters && filters.type) {
-    params.type_filter = filters.type;
-  }
-  return hass.connection.subscribeMessage<ConfigEntryUpdate[]>(
-    (message) => callbackFunction(message),
-    params
-  );
-};
-
 export const getConfigEntries = (
   hass: HomeAssistant,
   filters?: { type?: "helper" | "integration"; domain?: string }

src/data/cover.ts

@@ -4,16 +4,46 @@ import {
 } from "home-assistant-js-websocket";
 import { supportsFeature } from "../common/entity/supports-feature";
 
-export const enum CoverEntityFeature {
+export const SUPPORT_OPEN = 1;
-  OPEN = 1,
+export const SUPPORT_CLOSE = 2;
-  CLOSE = 2,
+export const SUPPORT_SET_POSITION = 4;
-  SET_POSITION = 4,
+export const SUPPORT_STOP = 8;
-  STOP = 8,
+export const SUPPORT_OPEN_TILT = 16;
-  OPEN_TILT = 16,
+export const SUPPORT_CLOSE_TILT = 32;
-  CLOSE_TILT = 32,
+export const SUPPORT_STOP_TILT = 64;
-  STOP_TILT = 64,
+export const SUPPORT_SET_TILT_POSITION = 128;
-  SET_TILT_POSITION = 128,
+
-}
+export const FEATURE_CLASS_NAMES = {
+  4: "has-set_position",
+  16: "has-open_tilt",
+  32: "has-close_tilt",
+  64: "has-stop_tilt",
+  128: "has-set_tilt_position",
+};
+
+export const supportsOpen = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_OPEN);
+
+export const supportsClose = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_CLOSE);
+
+export const supportsSetPosition = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_SET_POSITION);
+
+export const supportsStop = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_STOP);
+
+export const supportsOpenTilt = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_OPEN_TILT);
+
+export const supportsCloseTilt = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_CLOSE_TILT);
+
+export const supportsStopTilt = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_STOP_TILT);
+
+export const supportsSetTiltPosition = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_SET_TILT_POSITION);
 
 export function isFullyOpen(stateObj: CoverEntity) {
   if (stateObj.attributes.current_position !== undefined) {
@@ -47,19 +77,17 @@ export function isClosing(stateObj: CoverEntity) {
 
 export function isTiltOnly(stateObj: CoverEntity) {
   const supportsCover =
-    supportsFeature(stateObj, CoverEntityFeature.OPEN) ||
+    supportsOpen(stateObj) || supportsClose(stateObj) || supportsStop(stateObj);
-    supportsFeature(stateObj, CoverEntityFeature.CLOSE) ||
-    supportsFeature(stateObj, CoverEntityFeature.STOP);
   const supportsTilt =
-    supportsFeature(stateObj, CoverEntityFeature.OPEN_TILT) ||
+    supportsOpenTilt(stateObj) ||
-    supportsFeature(stateObj, CoverEntityFeature.CLOSE_TILT) ||
+    supportsCloseTilt(stateObj) ||
-    supportsFeature(stateObj, CoverEntityFeature.STOP_TILT);
+    supportsStopTilt(stateObj);
   return supportsTilt && !supportsCover;
 }
 
 interface CoverEntityAttributes extends HassEntityAttributeBase {
-  current_position?: number;
+  current_position: number;
-  current_tilt_position?: number;
+  current_tilt_position: number;
 }
 
 export interface CoverEntity extends HassEntityBase {

src/data/energy.ts

@@ -20,8 +20,7 @@ import {
   getStatisticMetadata,
   Statistics,
   StatisticsMetaData,
-  StatisticsUnitConfiguration,
+} from "./history";
-} from "./recorder";
 
 const energyCollectionKeys: (string | undefined)[] = [];
 
@@ -29,6 +28,7 @@ export const emptyFlowFromGridSourceEnergyPreference =
   (): FlowFromGridSourceEnergyPreference => ({
     stat_energy_from: "",
     stat_cost: null,
+    entity_energy_from: null,
     entity_energy_price: null,
     number_energy_price: null,
   });
@@ -37,6 +37,7 @@ export const emptyFlowToGridSourceEnergyPreference =
   (): FlowToGridSourceEnergyPreference => ({
     stat_energy_to: "",
     stat_compensation: null,
+    entity_energy_to: null,
     entity_energy_price: null,
     number_energy_price: null,
   });
@@ -66,6 +67,7 @@ export const emptyGasEnergyPreference = (): GasSourceTypeEnergyPreference => ({
   type: "gas",
   stat_energy_from: "",
   stat_cost: null,
+  entity_energy_from: null,
   entity_energy_price: null,
   number_energy_price: null,
 });
@@ -90,6 +92,7 @@ export interface FlowFromGridSourceEnergyPreference {
   stat_cost: string | null;
 
   // Can be used to generate costs if stat_cost omitted
+  entity_energy_from: string | null;
   entity_energy_price: string | null;
   number_energy_price: number | null;
 }
@@ -101,7 +104,8 @@ export interface FlowToGridSourceEnergyPreference {
   // $ meter
   stat_compensation: string | null;
 
-  // Can be used to generate costs if stat_compensation omitted
+  // Can be used to generate costs if stat_cost omitted
+  entity_energy_to: string | null;
   entity_energy_price: string | null;
   number_energy_price: number | null;
 }
@@ -137,6 +141,7 @@ export interface GasSourceTypeEnergyPreference {
   stat_cost: string | null;
 
   // Can be used to generate costs if stat_cost omitted
+  entity_energy_from: string | null;
   entity_energy_price: string | null;
   number_energy_price: number | null;
   unit_of_measurement?: string | null;
@@ -353,19 +358,12 @@ const getEnergyData = async (
   // Subtract 1 hour from start to get starting point data
   const startMinHour = addHours(start, -1);
 
-  const lengthUnit = hass.config.unit_system.length || "";
-  const units: StatisticsUnitConfiguration = {
-    energy: "kWh",
-    volume: lengthUnit === "km" ? "m³" : "ft³",
-  };
-
   const stats = await fetchStatistics(
     hass!,
     startMinHour,
     end,
     statIDs,
-    period,
+    period
-    units
   );
 
   let statsCompare;
@@ -387,8 +385,7 @@ const getEnergyData = async (
       compareStartMinHour,
       endCompare,
       statIDs,
-      period,
+      period
-      units
     );
   }
 
@@ -624,7 +621,7 @@ export const getEnergyGasUnitCategory = (
     const statisticIdWithMeta = statisticsMetaData[source.stat_energy_from];
     if (statisticIdWithMeta) {
       return ENERGY_GAS_VOLUME_UNITS.includes(
-        statisticIdWithMeta.statistics_unit_of_measurement
+        statisticIdWithMeta.display_unit_of_measurement
       )
         ? "volume"
         : "energy";

src/data/entity_registry.ts

@@ -1,13 +1,11 @@
 import { Connection, createCollection } from "home-assistant-js-websocket";
 import { Store } from "home-assistant-js-websocket/dist/store";
-import memoizeOne from "memoize-one";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
 import { debounce } from "../common/util/debounce";
 import { HomeAssistant } from "../types";
 
 export interface EntityRegistryEntry {
-  id: string;
   entity_id: string;
   name: string | null;
   icon: string | null;
@@ -20,10 +18,10 @@ export interface EntityRegistryEntry {
   entity_category: "config" | "diagnostic" | null;
   has_entity_name: boolean;
   original_name?: string;
-  unique_id: string;
 }
 
 export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
+  unique_id: string;
   capabilities: Record<string, unknown>;
   original_icon?: string;
   device_class?: string;
@@ -61,7 +59,7 @@ export interface EntityRegistryEntryUpdateParams {
   hidden_by: string | null;
   new_entity_id?: string;
   options_domain?: string;
-  options?: SensorEntityOptions | NumberEntityOptions | WeatherEntityOptions;
+  options?: SensorEntityOptions | WeatherEntityOptions;
 }
 
 export const findBatteryEntity = (
@@ -93,10 +91,7 @@ export const computeEntityRegistryName = (
     return entry.name;
   }
   const state = hass.states[entry.entity_id];
-  if (state) {
+  return state ? computeStateName(state) : entry.entity_id;
-    return computeStateName(state);
-  }
-  return entry.original_name ? entry.original_name : entry.entity_id;
 };
 
 export const getExtendedEntityRegistryEntry = (
@@ -166,16 +161,6 @@ export const sortEntityRegistryByName = (entries: EntityRegistryEntry[]) =>
     caseInsensitiveStringCompare(entry1.name || "", entry2.name || "")
   );
 
-export const entityRegistryById = memoizeOne(
-  (entries: HomeAssistant["entities"]) => {
-    const entities: HomeAssistant["entities"] = {};
-    for (const entity of Object.values(entries)) {
-      entities[entity.id] = entity;
-    }
-    return entities;
-  }
-);
-
 export const getEntityPlatformLookup = (
   entities: EntityRegistryEntry[]
 ): Record<string, string> => {

src/data/history.ts

@@ -1,7 +1,10 @@
 import { HassEntities, HassEntity } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDisplayFromEntityAttributes } from "../common/entity/compute_state_display";
-import { computeStateNameFromEntityAttributes } from "../common/entity/compute_state_name";
+import {
+  computeStateName,
+  computeStateNameFromEntityAttributes,
+} from "../common/entity/compute_state_name";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
 import { FrontendLocaleData } from "./translation";
@@ -60,6 +63,87 @@ export interface HistoryResult {
   timeline: TimelineEntity[];
 }
 
+export type StatisticType = "sum" | "min" | "max" | "mean";
+
+export interface Statistics {
+  [statisticId: string]: StatisticValue[];
+}
+
+export interface StatisticValue {
+  statistic_id: string;
+  start: string;
+  end: string;
+  last_reset: string | null;
+  max: number | null;
+  mean: number | null;
+  min: number | null;
+  sum: number | null;
+  state: number | null;
+}
+
+export interface StatisticsMetaData {
+  display_unit_of_measurement: string;
+  statistics_unit_of_measurement: string;
+  statistic_id: string;
+  source: string;
+  name?: string | null;
+  has_sum: boolean;
+  has_mean: boolean;
+}
+
+export type StatisticsValidationResult =
+  | StatisticsValidationResultNoState
+  | StatisticsValidationResultEntityNotRecorded
+  | StatisticsValidationResultEntityNoLongerRecorded
+  | StatisticsValidationResultUnsupportedStateClass
+  | StatisticsValidationResultUnitsChanged
+  | StatisticsValidationResultUnsupportedUnitMetadata
+  | StatisticsValidationResultUnsupportedUnitState;
+
+export interface StatisticsValidationResultNoState {
+  type: "no_state";
+  data: { statistic_id: string };
+}
+
+export interface StatisticsValidationResultEntityNoLongerRecorded {
+  type: "entity_no_longer_recorded";
+  data: { statistic_id: string };
+}
+
+export interface StatisticsValidationResultEntityNotRecorded {
+  type: "entity_not_recorded";
+  data: { statistic_id: string };
+}
+
+export interface StatisticsValidationResultUnsupportedStateClass {
+  type: "unsupported_state_class";
+  data: { statistic_id: string; state_class: string };
+}
+
+export interface StatisticsValidationResultUnitsChanged {
+  type: "units_changed";
+  data: { statistic_id: string; state_unit: string; metadata_unit: string };
+}
+
+export interface StatisticsValidationResultUnsupportedUnitMetadata {
+  type: "unsupported_unit_metadata";
+  data: {
+    statistic_id: string;
+    device_class: string;
+    metadata_unit: string;
+    supported_unit: string;
+  };
+}
+
+export interface StatisticsValidationResultUnsupportedUnitState {
+  type: "unsupported_unit_state";
+  data: { statistic_id: string; device_class: string; metadata_unit: string };
+}
+
+export interface StatisticsValidationResults {
+  [statisticId: string]: StatisticsValidationResult[];
+}
+
 export interface HistoryStates {
   [entityId: string]: EntityHistoryState[];
 }
@@ -365,3 +449,132 @@ export const computeHistory = (
 
   return { line: unitStates, timeline: timelineDevices };
 };
+
+// Statistics
+
+export const getStatisticIds = (
+  hass: HomeAssistant,
+  statistic_type?: "mean" | "sum"
+) =>
+  hass.callWS<StatisticsMetaData[]>({
+    type: "history/list_statistic_ids",
+    statistic_type,
+  });
+
+export const getStatisticMetadata = (
+  hass: HomeAssistant,
+  statistic_ids?: string[]
+) =>
+  hass.callWS<StatisticsMetaData[]>({
+    type: "recorder/get_statistics_metadata",
+    statistic_ids,
+  });
+
+export const fetchStatistics = (
+  hass: HomeAssistant,
+  startTime: Date,
+  endTime?: Date,
+  statistic_ids?: string[],
+  period: "5minute" | "hour" | "day" | "month" = "hour"
+) =>
+  hass.callWS<Statistics>({
+    type: "history/statistics_during_period",
+    start_time: startTime.toISOString(),
+    end_time: endTime?.toISOString(),
+    statistic_ids,
+    period,
+  });
+
+export const validateStatistics = (hass: HomeAssistant) =>
+  hass.callWS<StatisticsValidationResults>({
+    type: "recorder/validate_statistics",
+  });
+
+export const updateStatisticsMetadata = (
+  hass: HomeAssistant,
+  statistic_id: string,
+  unit_of_measurement: string | null
+) =>
+  hass.callWS<void>({
+    type: "recorder/update_statistics_metadata",
+    statistic_id,
+    unit_of_measurement,
+  });
+
+export const clearStatistics = (hass: HomeAssistant, statistic_ids: string[]) =>
+  hass.callWS<void>({
+    type: "recorder/clear_statistics",
+    statistic_ids,
+  });
+
+export const calculateStatisticSumGrowth = (
+  values: StatisticValue[]
+): number | null => {
+  if (!values || values.length < 2) {
+    return null;
+  }
+  const endSum = values[values.length - 1].sum;
+  if (endSum === null) {
+    return null;
+  }
+  const startSum = values[0].sum;
+  if (startSum === null) {
+    return endSum;
+  }
+  return endSum - startSum;
+};
+
+export const calculateStatisticsSumGrowth = (
+  data: Statistics,
+  stats: string[]
+): number | null => {
+  let totalGrowth: number | null = null;
+
+  for (const stat of stats) {
+    if (!(stat in data)) {
+      continue;
+    }
+    const statGrowth = calculateStatisticSumGrowth(data[stat]);
+
+    if (statGrowth === null) {
+      continue;
+    }
+    if (totalGrowth === null) {
+      totalGrowth = statGrowth;
+    } else {
+      totalGrowth += statGrowth;
+    }
+  }
+
+  return totalGrowth;
+};
+
+export const statisticsHaveType = (
+  stats: StatisticValue[],
+  type: StatisticType
+) => stats.some((stat) => stat[type] !== null);
+
+export const adjustStatisticsSum = (
+  hass: HomeAssistant,
+  statistic_id: string,
+  start_time: string,
+  adjustment: number
+): Promise<void> =>
+  hass.callWS({
+    type: "recorder/adjust_sum_statistics",
+    statistic_id,
+    start_time,
+    adjustment,
+  });
+
+export const getStatisticLabel = (
+  hass: HomeAssistant,
+  statisticsId: string,
+  statisticsMetaData: StatisticsMetaData | undefined
+): string => {
+  const entity = hass.states[statisticsId];
+  if (entity) {
+    return computeStateName(entity);
+  }
+  return statisticsMetaData?.name || statisticsId;
+};

src/data/light.ts

@@ -3,83 +3,76 @@ import {
   HassEntityBase,
 } from "home-assistant-js-websocket";
 
-export const enum LightEntityFeature {
+export const enum LightColorModes {
-  EFFECT = 4,
-  FLASH = 8,
-  TRANSITION = 32,
-}
-
-export const enum LightColorMode {
   UNKNOWN = "unknown",
   ONOFF = "onoff",
   BRIGHTNESS = "brightness",
   COLOR_TEMP = "color_temp",
+  WHITE = "white",
   HS = "hs",
   XY = "xy",
   RGB = "rgb",
   RGBW = "rgbw",
   RGBWW = "rgbww",
-  WHITE = "white",
 }
 
 const modesSupportingColor = [
-  LightColorMode.HS,
+  LightColorModes.HS,
-  LightColorMode.XY,
+  LightColorModes.XY,
-  LightColorMode.RGB,
+  LightColorModes.RGB,
-  LightColorMode.RGBW,
+  LightColorModes.RGBW,
-  LightColorMode.RGBWW,
+  LightColorModes.RGBWW,
 ];
 
-const modesSupportingBrightness = [
+const modesSupportingDimming = [
   ...modesSupportingColor,
-  LightColorMode.COLOR_TEMP,
+  LightColorModes.COLOR_TEMP,
-  LightColorMode.BRIGHTNESS,
+  LightColorModes.BRIGHTNESS,
-  LightColorMode.WHITE,
 ];
 
+export const SUPPORT_EFFECT = 4;
+export const SUPPORT_FLASH = 8;
+export const SUPPORT_TRANSITION = 32;
+
 export const lightSupportsColorMode = (
   entity: LightEntity,
-  mode: LightColorMode
+  mode: LightColorModes
-) => entity.attributes.supported_color_modes?.includes(mode) || false;
+) => entity.attributes.supported_color_modes?.includes(mode);
 
 export const lightIsInColorMode = (entity: LightEntity) =>
-  (entity.attributes.color_mode &&
+  modesSupportingColor.includes(entity.attributes.color_mode);
-    modesSupportingColor.includes(entity.attributes.color_mode)) ||
-  false;
 
 export const lightSupportsColor = (entity: LightEntity) =>
   entity.attributes.supported_color_modes?.some((mode) =>
     modesSupportingColor.includes(mode)
   );
 
-export const lightSupportsBrightness = (entity: LightEntity) =>
+export const lightSupportsDimming = (entity: LightEntity) =>
   entity.attributes.supported_color_modes?.some((mode) =>
-    modesSupportingBrightness.includes(mode)
+    modesSupportingDimming.includes(mode)
-  ) || false;
+  );
 
-export const getLightCurrentModeRgbColor = (
+export const getLightCurrentModeRgbColor = (entity: LightEntity): number[] =>
-  entity: LightEntity
+  entity.attributes.color_mode === LightColorModes.RGBWW
-): number[] | undefined =>
-  entity.attributes.color_mode === LightColorMode.RGBWW
     ? entity.attributes.rgbww_color
-    : entity.attributes.color_mode === LightColorMode.RGBW
+    : entity.attributes.color_mode === LightColorModes.RGBW
     ? entity.attributes.rgbw_color
     : entity.attributes.rgb_color;
 
 interface LightEntityAttributes extends HassEntityAttributeBase {
-  min_mireds?: number;
+  min_mireds: number;
-  max_mireds?: number;
+  max_mireds: number;
-  brightness?: number;
+  friendly_name: string;
-  xy_color?: [number, number];
+  brightness: number;
-  hs_color?: [number, number];
+  hs_color: [number, number];
-  color_temp?: number;
+  rgb_color: [number, number, number];
-  rgb_color?: [number, number, number];
+  rgbw_color: [number, number, number, number];
-  rgbw_color?: [number, number, number, number];
+  rgbww_color: [number, number, number, number, number];
-  rgbww_color?: [number, number, number, number, number];
+  color_temp: number;
   effect?: string;
-  effect_list?: string[] | null;
+  effect_list: string[] | null;
-  supported_color_modes?: LightColorMode[];
+  supported_color_modes: LightColorModes[];
-  color_mode?: LightColorMode;
+  color_mode: LightColorModes;
 }
 
 export interface LightEntity extends HassEntityBase {

src/data/lovelace.ts

@@ -93,8 +93,6 @@ export interface LovelaceViewConfig {
   panel?: boolean;
   background?: string;
   visible?: boolean | ShowViewConfig[];
-  subview?: boolean;
-  back_path?: string;
 }
 
 export interface LovelaceViewElement extends HTMLElement {

src/data/media-player.ts

@@ -51,7 +51,6 @@ interface MediaPlayerEntityAttributes extends HassEntityAttributeBase {
   media_duration?: number;
   media_position?: number;
   media_title?: string;
-  media_channel?: string;
   icon?: string;
   entity_picture_local?: string;
   is_volume_muted?: boolean;
@@ -236,9 +235,6 @@ export const computeMediaDescription = (
         }
       }
       break;
-    case "channel":
-      secondaryTitle = stateObj.attributes.media_channel!;
-      break;
     default:
       secondaryTitle = stateObj.attributes.app_name || "";
   }

src/data/recorder.ts

@@ -1,247 +0,0 @@
-import { computeStateName } from "../common/entity/compute_state_name";
-import { HomeAssistant } from "../types";
-
-export type StatisticType = "state" | "sum" | "min" | "max" | "mean";
-
-export interface Statistics {
-  [statisticId: string]: StatisticValue[];
-}
-
-export interface StatisticValue {
-  statistic_id: string;
-  start: string;
-  end: string;
-  last_reset: string | null;
-  max: number | null;
-  mean: number | null;
-  min: number | null;
-  sum: number | null;
-  state: number | null;
-}
-
-export interface StatisticsMetaData {
-  display_unit_of_measurement: string;
-  statistics_unit_of_measurement: string;
-  statistic_id: string;
-  source: string;
-  name?: string | null;
-  has_sum: boolean;
-  has_mean: boolean;
-}
-
-export type StatisticsValidationResult =
-  | StatisticsValidationResultNoState
-  | StatisticsValidationResultEntityNotRecorded
-  | StatisticsValidationResultEntityNoLongerRecorded
-  | StatisticsValidationResultUnsupportedStateClass
-  | StatisticsValidationResultUnitsChanged
-  | StatisticsValidationResultUnsupportedUnitMetadata
-  | StatisticsValidationResultUnsupportedUnitState;
-
-export interface StatisticsValidationResultNoState {
-  type: "no_state";
-  data: { statistic_id: string };
-}
-
-export interface StatisticsValidationResultEntityNoLongerRecorded {
-  type: "entity_no_longer_recorded";
-  data: { statistic_id: string };
-}
-
-export interface StatisticsValidationResultEntityNotRecorded {
-  type: "entity_not_recorded";
-  data: { statistic_id: string };
-}
-
-export interface StatisticsValidationResultUnsupportedStateClass {
-  type: "unsupported_state_class";
-  data: { statistic_id: string; state_class: string };
-}
-
-export interface StatisticsValidationResultUnitsChanged {
-  type: "units_changed";
-  data: { statistic_id: string; state_unit: string; metadata_unit: string };
-}
-
-export interface StatisticsValidationResultUnsupportedUnitMetadata {
-  type: "unsupported_unit_metadata";
-  data: {
-    statistic_id: string;
-    device_class: string;
-    metadata_unit: string;
-    supported_unit: string;
-  };
-}
-
-export interface StatisticsUnitConfiguration {
-  energy?: "Wh" | "kWh" | "MWh";
-  power?: "W" | "kW";
-  pressure?:
-    | "Pa"
-    | "hPa"
-    | "kPa"
-    | "bar"
-    | "cbar"
-    | "mbar"
-    | "inHg"
-    | "psi"
-    | "mmHg";
-  temperature?: "°C" | "°F" | "K";
-  volume?: "ft³" | "m³";
-}
-
-export interface StatisticsValidationResultUnsupportedUnitState {
-  type: "unsupported_unit_state";
-  data: { statistic_id: string; device_class: string; metadata_unit: string };
-}
-
-export interface StatisticsValidationResults {
-  [statisticId: string]: StatisticsValidationResult[];
-}
-
-export const getStatisticIds = (
-  hass: HomeAssistant,
-  statistic_type?: "mean" | "sum"
-) =>
-  hass.callWS<StatisticsMetaData[]>({
-    type: "recorder/list_statistic_ids",
-    statistic_type,
-  });
-
-export const getStatisticMetadata = (
-  hass: HomeAssistant,
-  statistic_ids?: string[]
-) =>
-  hass.callWS<StatisticsMetaData[]>({
-    type: "recorder/get_statistics_metadata",
-    statistic_ids,
-  });
-
-export const fetchStatistics = (
-  hass: HomeAssistant,
-  startTime: Date,
-  endTime?: Date,
-  statistic_ids?: string[],
-  period: "5minute" | "hour" | "day" | "month" = "hour",
-  units?: StatisticsUnitConfiguration
-) =>
-  hass.callWS<Statistics>({
-    type: "recorder/statistics_during_period",
-    start_time: startTime.toISOString(),
-    end_time: endTime?.toISOString(),
-    statistic_ids,
-    period,
-    units,
-  });
-
-export const validateStatistics = (hass: HomeAssistant) =>
-  hass.callWS<StatisticsValidationResults>({
-    type: "recorder/validate_statistics",
-  });
-
-export const updateStatisticsMetadata = (
-  hass: HomeAssistant,
-  statistic_id: string,
-  unit_of_measurement: string | null
-) =>
-  hass.callWS<void>({
-    type: "recorder/update_statistics_metadata",
-    statistic_id,
-    unit_of_measurement,
-  });
-
-export const clearStatistics = (hass: HomeAssistant, statistic_ids: string[]) =>
-  hass.callWS<void>({
-    type: "recorder/clear_statistics",
-    statistic_ids,
-  });
-
-export const calculateStatisticSumGrowth = (
-  values: StatisticValue[]
-): number | null => {
-  if (!values || values.length < 2) {
-    return null;
-  }
-  const endSum = values[values.length - 1].sum;
-  if (endSum === null) {
-    return null;
-  }
-  const startSum = values[0].sum;
-  if (startSum === null) {
-    return endSum;
-  }
-  return endSum - startSum;
-};
-
-export const calculateStatisticsSumGrowth = (
-  data: Statistics,
-  stats: string[]
-): number | null => {
-  let totalGrowth: number | null = null;
-
-  for (const stat of stats) {
-    if (!(stat in data)) {
-      continue;
-    }
-    const statGrowth = calculateStatisticSumGrowth(data[stat]);
-
-    if (statGrowth === null) {
-      continue;
-    }
-    if (totalGrowth === null) {
-      totalGrowth = statGrowth;
-    } else {
-      totalGrowth += statGrowth;
-    }
-  }
-
-  return totalGrowth;
-};
-
-export const statisticsHaveType = (
-  stats: StatisticValue[],
-  type: StatisticType
-) => stats.some((stat) => stat[type] !== null);
-
-const mean_stat_types: readonly StatisticType[] = ["mean", "min", "max"];
-const sum_stat_types: readonly StatisticType[] = ["sum"];
-
-export const statisticsMetaHasType = (
-  metadata: StatisticsMetaData,
-  type: StatisticType
-) => {
-  if (mean_stat_types.includes(type) && metadata.has_mean) {
-    return true;
-  }
-  if (sum_stat_types.includes(type) && metadata.has_sum) {
-    return true;
-  }
-  return false;
-};
-
-export const adjustStatisticsSum = (
-  hass: HomeAssistant,
-  statistic_id: string,
-  start_time: string,
-  adjustment: number,
-  display_unit: string
-): Promise<void> =>
-  hass.callWS({
-    type: "recorder/adjust_sum_statistics",
-    statistic_id,
-    start_time,
-    adjustment,
-    display_unit,
-  });
-
-export const getStatisticLabel = (
-  hass: HomeAssistant,
-  statisticsId: string,
-  statisticsMetaData: StatisticsMetaData | undefined
-): string => {
-  const entity = hass.states[statisticsId];
-  if (entity) {
-    return computeStateName(entity);
-  }
-  return statisticsMetaData?.name || statisticsId;
-};

src/data/scene.ts

@@ -14,11 +14,8 @@ export const SCENE_IGNORED_DOMAINS = [
   "input_button",
   "persistent_notification",
   "person",
-  "scene",
-  "schedule",
   "sensor",
   "sun",
-  "update",
   "weather",
   "zone",
 ];

src/data/script.ts

@@ -15,6 +15,7 @@ import {
   Describe,
   boolean,
 } from "superstruct";
+import { computeObjectId } from "../common/entity/compute_object_id";
 import { navigate } from "../common/navigate";
 import { HomeAssistant } from "../types";
 import {
@@ -277,9 +278,9 @@ export type ActionType = keyof ActionTypes;
 
 export const triggerScript = (
   hass: HomeAssistant,
-  scriptId: string,
+  entityId: string,
   variables?: Record<string, unknown>
-) => hass.callService("script", scriptId, variables);
+) => hass.callService("script", computeObjectId(entityId), variables);
 
 export const canRun = (state: ScriptEntity) => {
   if (state.state === "off") {
@@ -300,9 +301,6 @@ export const deleteScript = (hass: HomeAssistant, objectId: string) =>
 
 let inititialScriptEditorData: Partial<ScriptConfig> | undefined;
 
-export const getScriptConfig = (hass: HomeAssistant, objectId: string) =>
-  hass.callApi<ScriptConfig>("GET", `config/script/config/${objectId}`);
-
 export const showScriptEditor = (data?: Partial<ScriptConfig>) => {
   inititialScriptEditorData = data;
   navigate("/config/script/edit/new");

src/data/script_i18n.ts

@@ -1,4 +1,3 @@
-import { formatDuration } from "../common/datetime/format_duration";
 import secondsToDuration from "../common/datetime/seconds_to_duration";
 import { ensureArray } from "../common/ensure-array";
 import { computeStateName } from "../common/entity/compute_state_name";
@@ -6,13 +5,6 @@ import { isTemplate } from "../common/string/has-template";
 import { HomeAssistant } from "../types";
 import { Condition } from "./automation";
 import { describeCondition, describeTrigger } from "./automation_i18n";
-import { localizeDeviceAutomationAction } from "./device_automation";
-import { computeDeviceName } from "./device_registry";
-import {
-  computeEntityRegistryName,
-  entityRegistryById,
-} from "./entity_registry";
-import { domainToName } from "./integration";
 import {
   ActionType,
   ActionTypes,
@@ -55,13 +47,9 @@ export const describeAction = <T extends ActionType>(
     ) {
       base = "Call a service based on a template";
     } else if (config.service) {
-      const [domain, serviceName] = config.service.split(".", 2);
+      base = `Call service ${config.service}`;
-      const service = hass.services[domain][serviceName];
-      base = service
-        ? `${domainToName(hass.localize, domain)}: ${service.name}`
-        : `Call service: ${config.service}`;
     } else {
-      return "Call a service";
+      return actionType;
     }
     if (config.target) {
       const targets: string[] = [];
@@ -78,49 +66,26 @@ export const describeAction = <T extends ActionType>(
           ? config.target[key]
           : [config.target[key]];
 
+        const values: string[] = [];
+
+        let renderValues = true;
+
         for (const targetThing of keyConf) {
           if (isTemplate(targetThing)) {
             targets.push(`templated ${label}`);
+            renderValues = false;
             break;
-          } else if (key === "entity_id") {
-            if (targetThing.includes(".")) {
-              const state = hass.states[targetThing];
-              if (state) {
-                targets.push(computeStateName(state));
-              } else {
-                targets.push(targetThing);
-              }
-            } else {
-              const entityReg = entityRegistryById(hass.entities)[targetThing];
-              if (entityReg) {
-                targets.push(
-                  computeEntityRegistryName(hass, entityReg) || targetThing
-                );
-              } else {
-                targets.push("unknown entity");
-              }
-            }
-          } else if (key === "device_id") {
-            const device = hass.devices[targetThing];
-            if (device) {
-              targets.push(computeDeviceName(device, hass));
-            } else {
-              targets.push("unknown device");
-            }
-          } else if (key === "area_id") {
-            const area = hass.areas[targetThing];
-            if (area?.name) {
-              targets.push(area.name);
-            } else {
-              targets.push("unknown area");
-            }
           } else {
-            targets.push(targetThing);
+            values.push(targetThing);
           }
         }
+
+        if (renderValues) {
+          targets.push(`${label} ${values.join(", ")}`);
+        }
       }
       if (targets.length > 0) {
-        base += ` ${targets.join(", ")}`;
+        base += ` on ${targets.join(", ")}`;
       }
     }
 
@@ -137,11 +102,9 @@ export const describeAction = <T extends ActionType>(
     } else if (typeof config.delay === "string") {
       duration = isTemplate(config.delay)
         ? "based on a template"
-        : `for ${config.delay || "a duration"}`;
+        : `for ${config.delay}`;
-    } else if (config.delay) {
-      duration = `for ${formatDuration(config.delay)}`;
     } else {
-      duration = "for a duration";
+      duration = `for ${JSON.stringify(config.delay)}`;
     }
 
     return `Delay ${duration}`;
@@ -155,12 +118,13 @@ export const describeAction = <T extends ActionType>(
     } else {
       entityId = config.target?.entity_id || config.entity_id;
     }
-    if (!entityId) {
-      return "Activate a scene";
-    }
     const sceneStateObj = entityId ? hass.states[entityId] : undefined;
-    return `Active scene ${
+    return `Scene ${
-      sceneStateObj ? computeStateName(sceneStateObj) : entityId
+      sceneStateObj
+        ? computeStateName(sceneStateObj)
+        : "scene" in config
+        ? config.scene
+        : config.target?.entity_id || config.entity_id || ""
     }`;
   }
 
@@ -168,22 +132,16 @@ export const describeAction = <T extends ActionType>(
     const config = action as PlayMediaAction;
     const entityId = config.target?.entity_id || config.entity_id;
     const mediaStateObj = entityId ? hass.states[entityId] : undefined;
-    return `Play ${
+    return `Play ${config.metadata.title || config.data.media_content_id} on ${
-      config.metadata.title || config.data.media_content_id || "media"
-    } on ${
       mediaStateObj
         ? computeStateName(mediaStateObj)
-        : entityId || "a media player"
+        : config.target?.entity_id || config.entity_id
     }`;
   }
 
   if (actionType === "wait_for_trigger") {
     const config = action as WaitForTriggerAction;
-    const triggers = ensureArray(config.wait_for_trigger);
+    return `Wait for ${ensureArray(config.wait_for_trigger)
-    if (!triggers || triggers.length === 0) {
-      return "Wait for a trigger";
-    }
-    return `Wait for ${triggers
       .map((trigger) => describeTrigger(trigger, hass))
       .join(", ")}`;
   }
@@ -206,26 +164,22 @@ export const describeAction = <T extends ActionType>(
   }
 
   if (actionType === "check_condition") {
-    return describeCondition(action as Condition, hass);
+    return `Test ${describeCondition(action as Condition, hass)}`;
   }
 
   if (actionType === "stop") {
     const config = action as StopAction;
-    return `Stop${config.stop ? ` because: ${config.stop}` : ""}`;
+    return `Stopped${config.stop ? ` because: ${config.stop}` : ""}`;
   }
 
   if (actionType === "if") {
     const config = action as IfAction;
     return `Perform an action if: ${
-      !config.if
+      typeof config.if === "string"
-        ? ""
-        : typeof config.if === "string"
         ? config.if
         : ensureArray(config.if).length > 1
         ? `${ensureArray(config.if).length} conditions`
-        : ensureArray(config.if).length
+        : describeCondition(ensureArray(config.if)[0], hass)
-        ? describeCondition(ensureArray(config.if)[0], hass)
-        : ""
     }${config.else ? " (or else!)" : ""}`;
   }
 
@@ -265,13 +219,6 @@ export const describeAction = <T extends ActionType>(
 
   if (actionType === "device_action") {
     const config = action as DeviceAction;
-    if (!config.device_id) {
-      return "Device action";
-    }
-    const localized = localizeDeviceAutomationAction(hass, config);
-    if (localized) {
-      return localized;
-    }
     const stateObj = hass.states[config.entity_id as string];
     return `${config.type || "Perform action with"} ${
       stateObj ? computeStateName(stateObj) : config.entity_id

src/data/selector.ts

@@ -21,7 +21,6 @@ export type Selector =
   | IconSelector
   | LocationSelector
   | MediaSelector
-  | NavigationSelector
   | NumberSelector
   | ObjectSelector
   | SelectSelector
@@ -172,11 +171,6 @@ export interface MediaSelectorValue {
   };
 }
 
-export interface NavigationSelector {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  navigation: {};
-}
-
 export interface NumberSelector {
   number: {
     min?: number;
@@ -195,7 +189,6 @@ export interface ObjectSelector {
 export interface SelectOption {
   value: string;
   label: string;
-  disabled?: boolean;
 }
 
 export interface SelectSelector {

src/data/zha.ts

@@ -309,7 +309,7 @@ export const fetchCommandsForCluster = (
     cluster_type: clusterType,
   });
 
-export const fetchClustersForZhaDevice = (
+export const fetchClustersForZhaNode = (
   hass: HomeAssistant,
   ieeeAddress: string
 ): Promise<Cluster[]> =>

src/data/zwave_js.ts

@@ -85,13 +85,6 @@ enum Protocols {
   ZWaveLongRange = 1,
 }
 
-enum NodeType {
-  Controller,
-  /** @deprecated Use `NodeType["End Node"]` instead */
-  "Routing End Node",
-  "End Node" = 1,
-}
-
 export enum FirmwareUpdateStatus {
   Error_Timeout = -1,
   Error_Checksum = 0,
@@ -149,12 +142,12 @@ export interface ZWaveJSController {
   sdk_version: string;
   type: number;
   own_node_id: number;
-  is_primary: boolean;
+  is_secondary: boolean;
   is_using_home_id_from_other_network: boolean;
   is_sis_present: boolean;
   was_real_primary: boolean;
-  is_suc: boolean;
+  is_static_update_controller: boolean;
-  node_type: NodeType;
+  is_slave: boolean;
   firmware_version: string;
   manufacturer_id: number;
   product_id: number;

src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts

@@ -170,6 +170,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
           ),
         });
       }
+      this._params!.entryUpdated(result.config_entry);
       this.closeDialog();
     } catch (err: any) {
       this._error = err.message || "Unknown error";

src/dialogs/config-entry-system-options/show-dialog-config-entry-system-options.ts

@@ -5,6 +5,7 @@ import { IntegrationManifest } from "../../data/integration";
 export interface ConfigEntrySystemOptionsDialogParams {
   entry: ConfigEntry;
   manifest?: IntegrationManifest;
+  entryUpdated(entry: ConfigEntry): void;
 }
 
 export const loadConfigEntrySystemOptionsDialog = () =>

src/dialogs/generic/dialog-box.ts

@@ -2,7 +2,6 @@ import "@material/mwc-button/mwc-button";
 import { mdiAlertOutline } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-dialog";
@@ -97,9 +96,6 @@ class DialogBox extends LitElement {
           @click=${this._confirm}
           ?dialogInitialFocus=${!this._params.prompt}
           slot="primaryAction"
-          class=${classMap({
-            destructive: this._params.destructive || false,
-          })}
         >
           ${this._params.confirmText
             ? this._params.confirmText
@@ -157,9 +153,6 @@ class DialogBox extends LitElement {
       .secondary {
         color: var(--secondary-text-color);
       }
-      .destructive {
-        --mdc-theme-primary: var(--error-color);
-      }
       ha-dialog {
         --mdc-dialog-heading-ink-color: var(--primary-text-color);
         --mdc-dialog-content-ink-color: var(--primary-text-color);

src/dialogs/generic/show-dialog-box.ts

@@ -16,7 +16,6 @@ export interface ConfirmationDialogParams extends BaseDialogBoxParams {
   dismissText?: string;
   confirm?: () => void;
   cancel?: () => void;
-  destructive?: boolean;
 }
 
 export interface PromptDialogParams extends BaseDialogBoxParams {

src/dialogs/more-info/controls/more-info-cover.ts

@@ -1,29 +1,19 @@
 import { css, CSSResult, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { attributeClassNames } from "../../../common/entity/attribute_class_names";
-import {
+import { featureClassNames } from "../../../common/entity/feature_class_names";
-  FeatureClassNames,
-  featureClassNames,
-} from "../../../common/entity/feature_class_names";
-import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
 import "../../../components/ha-cover-tilt-controls";
 import "../../../components/ha-labeled-slider";
 import {
   CoverEntity,
-  CoverEntityFeature,
+  FEATURE_CLASS_NAMES,
   isTiltOnly,
+  supportsSetPosition,
+  supportsSetTiltPosition,
 } from "../../../data/cover";
 import { HomeAssistant } from "../../../types";
 
-export const FEATURE_CLASS_NAMES: FeatureClassNames<CoverEntityFeature> = {
-  [CoverEntityFeature.SET_POSITION]: "has-set_position",
-  [CoverEntityFeature.OPEN_TILT]: "has-open_tilt",
-  [CoverEntityFeature.CLOSE_TILT]: "has-close_tilt",
-  [CoverEntityFeature.STOP_TILT]: "has-stop_tilt",
-  [CoverEntityFeature.SET_TILT_POSITION]: "has-set_tilt_position",
-};
-
 @customElement("more-info-cover")
 class MoreInfoCover extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -44,16 +34,13 @@ class MoreInfoCover extends LitElement {
             .caption=${this.hass.localize("ui.card.cover.position")}
             pin=""
             .value=${this.stateObj.attributes.current_position}
-            .disabled=${!supportsFeature(
+            .disabled=${!supportsSetPosition(this.stateObj)}
-              this.stateObj,
-              CoverEntityFeature.SET_POSITION
-            )}
             @change=${this._coverPositionSliderChanged}
           ></ha-labeled-slider>
         </div>
 
         <div class="tilt">
-          ${supportsFeature(this.stateObj, CoverEntityFeature.SET_TILT_POSITION)
+          ${supportsSetTiltPosition(this.stateObj)
             ? // Either render the labeled slider and put the tilt buttons into its slot
               // or (if tilt position is not supported and therefore no slider is shown)
               // render a title <div> (same style as for a labeled slider) and directly put

src/dialogs/more-info/controls/more-info-light.ts

@@ -20,13 +20,13 @@ import "../../../components/ha-labeled-slider";
 import "../../../components/ha-select";
 import {
   getLightCurrentModeRgbColor,
-  LightColorMode,
+  LightColorModes,
   LightEntity,
-  LightEntityFeature,
   lightIsInColorMode,
   lightSupportsColor,
   lightSupportsColorMode,
-  lightSupportsBrightness,
+  lightSupportsDimming,
+  SUPPORT_EFFECT,
 } from "../../../data/light";
 import type { HomeAssistant } from "../../../types";
 
@@ -56,7 +56,7 @@ class MoreInfoLight extends LitElement {
 
   @state() private _colorPickerColor?: [number, number, number];
 
-  @state() private _mode?: "color" | LightColorMode;
+  @state() private _mode?: "color" | LightColorModes;
 
   protected render(): TemplateResult {
     if (!this.hass || !this.stateObj) {
@@ -65,29 +65,29 @@ class MoreInfoLight extends LitElement {
 
     const supportsTemp = lightSupportsColorMode(
       this.stateObj,
-      LightColorMode.COLOR_TEMP
+      LightColorModes.COLOR_TEMP
     );
 
     const supportsWhite = lightSupportsColorMode(
       this.stateObj,
-      LightColorMode.WHITE
+      LightColorModes.WHITE
     );
 
     const supportsRgbww = lightSupportsColorMode(
       this.stateObj,
-      LightColorMode.RGBWW
+      LightColorModes.RGBWW
     );
 
     const supportsRgbw =
       !supportsRgbww &&
-      lightSupportsColorMode(this.stateObj, LightColorMode.RGBW);
+      lightSupportsColorMode(this.stateObj, LightColorModes.RGBW);
 
     const supportsColor =
       supportsRgbww || supportsRgbw || lightSupportsColor(this.stateObj);
 
     return html`
       <div class="content">
-        ${lightSupportsBrightness(this.stateObj)
+        ${lightSupportsDimming(this.stateObj)
           ? html`
               <ha-labeled-slider
                 caption=${this.hass.localize("ui.card.light.brightness")}
@@ -113,7 +113,7 @@ class MoreInfoLight extends LitElement {
                 : ""}
               ${supportsTemp &&
               ((!supportsColor && !supportsWhite) ||
-                this._mode === LightColorMode.COLOR_TEMP)
+                this._mode === LightColorModes.COLOR_TEMP)
                 ? html`
                     <ha-labeled-slider
                       class="color_temp"
@@ -204,7 +204,7 @@ class MoreInfoLight extends LitElement {
                       : ""}
                   `
                 : ""}
-              ${supportsFeature(this.stateObj, LightEntityFeature.EFFECT) &&
+              ${supportsFeature(this.stateObj, SUPPORT_EFFECT) &&
               this.stateObj!.attributes.effect_list?.length
                 ? html`
                     <hr />
@@ -260,31 +260,31 @@ class MoreInfoLight extends LitElement {
       let brightnessAdjust = 100;
       this._brightnessAdjusted = undefined;
       if (
-        stateObj.attributes.color_mode === LightColorMode.RGB &&
+        stateObj.attributes.color_mode === LightColorModes.RGB &&
-        !lightSupportsColorMode(stateObj, LightColorMode.RGBWW) &&
+        !lightSupportsColorMode(stateObj, LightColorModes.RGBWW) &&
-        !lightSupportsColorMode(stateObj, LightColorMode.RGBW)
+        !lightSupportsColorMode(stateObj, LightColorModes.RGBW)
       ) {
-        const maxVal = Math.max(...stateObj.attributes.rgb_color!);
+        const maxVal = Math.max(...stateObj.attributes.rgb_color);
         if (maxVal < 255) {
           this._brightnessAdjusted = maxVal;
           brightnessAdjust = (this._brightnessAdjusted / 255) * 100;
         }
       }
       this._brightnessSliderValue = Math.round(
-        ((stateObj.attributes.brightness || 0) * brightnessAdjust) / 255
+        (stateObj.attributes.brightness * brightnessAdjust) / 255
       );
       this._ctSliderValue = stateObj.attributes.color_temp;
       this._wvSliderValue =
-        stateObj.attributes.color_mode === LightColorMode.RGBW
+        stateObj.attributes.color_mode === LightColorModes.RGBW
-          ? Math.round((stateObj.attributes.rgbw_color![3] * 100) / 255)
+          ? Math.round((stateObj.attributes.rgbw_color[3] * 100) / 255)
           : undefined;
       this._cwSliderValue =
-        stateObj.attributes.color_mode === LightColorMode.RGBWW
+        stateObj.attributes.color_mode === LightColorModes.RGBWW
-          ? Math.round((stateObj.attributes.rgbww_color![3] * 100) / 255)
+          ? Math.round((stateObj.attributes.rgbww_color[3] * 100) / 255)
           : undefined;
       this._wwSliderValue =
-        stateObj.attributes.color_mode === LightColorMode.RGBWW
+        stateObj.attributes.color_mode === LightColorModes.RGBWW
-          ? Math.round((stateObj.attributes.rgbww_color![4] * 100) / 255)
+          ? Math.round((stateObj.attributes.rgbww_color[4] * 100) / 255)
           : undefined;
 
       const currentRgbColor = getLightCurrentModeRgbColor(stateObj);
@@ -307,10 +307,10 @@ class MoreInfoLight extends LitElement {
     (supportsTemp: boolean, supportsWhite: boolean) => {
       const modes = [{ label: "Color", value: "color" }];
       if (supportsTemp) {
-        modes.push({ label: "Temperature", value: LightColorMode.COLOR_TEMP });
+        modes.push({ label: "Temperature", value: LightColorModes.COLOR_TEMP });
       }
       if (supportsWhite) {
-        modes.push({ label: "White", value: LightColorMode.WHITE });
+        modes.push({ label: "White", value: LightColorModes.WHITE });
       }
       return modes;
     }
@@ -342,7 +342,7 @@ class MoreInfoLight extends LitElement {
 
     this._brightnessSliderValue = bri;
 
-    if (this._mode === LightColorMode.WHITE) {
+    if (this._mode === LightColorModes.WHITE) {
       this.hass.callService("light", "turn_on", {
         entity_id: this.stateObj!.entity_id,
         white: Math.min(255, Math.round((bri * 255) / 100)),
@@ -486,7 +486,7 @@ class MoreInfoLight extends LitElement {
   }
 
   private _setRgbWColor(rgbColor: [number, number, number]) {
-    if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW)) {
+    if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGBWW)) {
       const rgbww_color: [number, number, number, number, number] = this
         .stateObj!.attributes.rgbww_color
         ? [...this.stateObj!.attributes.rgbww_color]
@@ -495,7 +495,7 @@ class MoreInfoLight extends LitElement {
         entity_id: this.stateObj!.entity_id,
         rgbww_color: rgbColor.concat(rgbww_color.slice(3)),
       });
-    } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)) {
+    } else if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGBW)) {
       const rgbw_color: [number, number, number, number] = this.stateObj!
         .attributes.rgbw_color
         ? [...this.stateObj!.attributes.rgbw_color]
@@ -524,8 +524,8 @@ class MoreInfoLight extends LitElement {
     ];
 
     if (
-      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW) ||
+      lightSupportsColorMode(this.stateObj!, LightColorModes.RGBWW) ||
-      lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)
+      lightSupportsColorMode(this.stateObj!, LightColorModes.RGBW)
     ) {
       this._setRgbWColor(
         this._colorBrightnessSliderValue
@@ -535,7 +535,7 @@ class MoreInfoLight extends LitElement {
             )
           : [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b]
       );
-    } else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGB)) {
+    } else if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGB)) {
       const rgb_color: [number, number, number] = [
         ev.detail.rgb.r,
         ev.detail.rgb.g,

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -167,8 +167,7 @@ class MoreInfoMediaPlayer extends LitElement {
             </div>
           `
         : ""}
-      ${![UNAVAILABLE, UNKNOWN, "off"].includes(stateObj.state) &&
+      ${supportsFeature(stateObj, SUPPORT_SELECT_SOUND_MODE) &&
-      supportsFeature(stateObj, SUPPORT_SELECT_SOUND_MODE) &&
       stateObj.attributes.sound_mode_list?.length
         ? html`
             <div class="sound-input">

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -90,7 +90,7 @@ export class MoreInfoDialog extends LitElement {
     const stateObj = this.hass.states[entityId];
 
     const domain = computeDomain(entityId);
-    const name = (stateObj && computeStateName(stateObj)) || entityId;
+    const name = stateObj ? computeStateName(stateObj) : entityId;
     const tabs = this._getTabs(entityId, this.hass.user!.is_admin);
 
     return html`

src/external_app/external_app_entrypoint.ts

@@ -7,7 +7,7 @@ This is the entry point for providing external app stuff from app entrypoint.
 
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistantMain } from "../layouts/home-assistant-main";
-import type { EMIncomingMessageCommands } from "./external_messaging";
+import type { EMExternalMessageCommands } from "./external_messaging";
 
 export const attachExternalToApp = (hassMainEl: HomeAssistantMain) => {
   window.addEventListener("haptic", (ev) =>
@@ -24,7 +24,7 @@ export const attachExternalToApp = (hassMainEl: HomeAssistantMain) => {
 
 const handleExternalMessage = (
   hassMainEl: HomeAssistantMain,
-  msg: EMIncomingMessageCommands
+  msg: EMExternalMessageCommands
 ): boolean => {
   const bus = hassMainEl.hass.auth.external!;
 

src/external_app/external_messaging.ts

@@ -8,6 +8,7 @@ interface CommandInFlight {
 export interface EMMessage {
   id?: number;
   type: string;
+  payload?: unknown;
 }
 
 interface EMError {
@@ -29,120 +30,34 @@ interface EMMessageResultError {
   error: EMError;
 }
 
-interface EMOutgoingMessageConfigGet extends EMMessage {
+interface EMExternalMessageRestart {
-  type: "config/get";
-}
-
-interface EMOutgoingMessageMatterCommission extends EMMessage {
-  type: "matter/commission";
-}
-
-type EMOutgoingMessageWithAnswer = {
-  "config/get": {
-    request: EMOutgoingMessageConfigGet;
-    response: ExternalConfig;
-  };
-  "matter/commission": {
-    request: EMOutgoingMessageMatterCommission;
-    response: {
-      code: string;
-    };
-  };
-};
-
-interface EMOutgoingMessageExoplayerPlayHLS extends EMMessage {
-  type: "exoplayer/play_hls";
-  payload: {
-    url: string;
-    muted: boolean;
-  };
-}
-interface EMOutgoingMessageExoplayerResize extends EMMessage {
-  type: "exoplayer/resize";
-  payload: {
-    left: number;
-    top: number;
-    right: number;
-    bottom: number;
-  };
-}
-
-interface EMOutgoingMessageExoplayerStop extends EMMessage {
-  type: "exoplayer/stop";
-}
-
-interface EMOutgoingMessageThemeUpdate extends EMMessage {
-  type: "theme-update";
-}
-
-interface EMOutgoingMessageHaptic extends EMMessage {
-  type: "haptic";
-  payload: { hapticType: string };
-}
-
-interface EMOutgoingMessageConnectionStatus extends EMMessage {
-  type: "connection-status";
-  payload: { event: string };
-}
-
-interface EMOutgoingMessageAppConfiguration extends EMMessage {
-  type: "config_screen/show";
-}
-
-interface EMOutgoingMessageTagWrite extends EMMessage {
-  type: "tag/write";
-  payload: {
-    name: string | null;
-    tag: string;
-  };
-}
-
-interface EMOutgoingMessageSidebarShow extends EMMessage {
-  type: "sidebar/show";
-}
-
-type EMOutgoingMessageWithoutAnswer =
-  | EMOutgoingMessageHaptic
-  | EMOutgoingMessageConnectionStatus
-  | EMOutgoingMessageAppConfiguration
-  | EMOutgoingMessageTagWrite
-  | EMOutgoingMessageSidebarShow
-  | EMOutgoingMessageExoplayerPlayHLS
-  | EMOutgoingMessageExoplayerResize
-  | EMOutgoingMessageExoplayerStop
-  | EMOutgoingMessageThemeUpdate
-  | EMMessageResultSuccess
-  | EMMessageResultError;
-
-interface EMIncomingMessageRestart {
   id: number;
   type: "command";
   command: "restart";
 }
 
-interface EMIncomingMessageShowNotifications {
+interface EMExternMessageShowNotifications {
   id: number;
   type: "command";
   command: "notifications/show";
 }
 
-export type EMIncomingMessageCommands =
+export type EMExternalMessageCommands =
-  | EMIncomingMessageRestart
+  | EMExternalMessageRestart
-  | EMIncomingMessageShowNotifications;
+  | EMExternMessageShowNotifications;
 
-type EMIncomingMessage =
+type ExternalMessage =
   | EMMessageResultSuccess
   | EMMessageResultError
-  | EMIncomingMessageCommands;
+  | EMExternalMessageCommands;
 
-type EMIncomingMessageHandler = (msg: EMIncomingMessageCommands) => boolean;
+type ExternalMessageHandler = (msg: EMExternalMessageCommands) => boolean;
 
 export interface ExternalConfig {
   hasSettingsScreen: boolean;
   hasSidebar: boolean;
   canWriteTag: boolean;
   hasExoPlayer: boolean;
-  canCommissionMatter: boolean;
 }
 
 export class ExternalMessaging {
@@ -152,7 +67,7 @@ export class ExternalMessaging {
 
   public msgId = 0;
 
-  private _commandHandler?: EMIncomingMessageHandler;
+  private _commandHandler?: ExternalMessageHandler;
 
   public async attach() {
     window[CALLBACK_EXTERNAL_BUS] = (msg) => this.receiveMessage(msg);
@@ -162,12 +77,12 @@ export class ExternalMessaging {
         payload: { event: ev.detail },
       })
     );
-    this.config = await this.sendMessage<"config/get">({
+    this.config = await this.sendMessage<ExternalConfig>({
       type: "config/get",
     });
   }
 
-  public addCommandHandler(handler: EMIncomingMessageHandler) {
+  public addCommandHandler(handler: ExternalMessageHandler) {
     this._commandHandler = handler;
   }
 
@@ -175,33 +90,31 @@ export class ExternalMessaging {
    * Send message to external app that expects a response.
    * @param msg message to send
    */
-  public sendMessage<T extends keyof EMOutgoingMessageWithAnswer>(
+  public sendMessage<T>(msg: EMMessage): Promise<T> {
-    msg: EMOutgoingMessageWithAnswer[T]["request"]
-  ): Promise<EMOutgoingMessageWithAnswer[T]["response"]> {
     const msgId = ++this.msgId;
     msg.id = msgId;
 
-    this._sendExternal(msg);
+    this.fireMessage(msg);
 
-    return new Promise<EMOutgoingMessageWithAnswer[T]["response"]>(
+    return new Promise<T>((resolve, reject) => {
-      (resolve, reject) => {
+      this.commands[msgId] = { resolve, reject };
-        this.commands[msgId] = { resolve, reject };
+    });
-      }
-    );
   }
 
   /**
    * Send message to external app without expecting a response.
    * @param msg message to send
    */
-  public fireMessage(msg: EMOutgoingMessageWithoutAnswer) {
+  public fireMessage(
+    msg: EMMessage | EMMessageResultSuccess | EMMessageResultError
+  ) {
     if (!msg.id) {
       msg.id = ++this.msgId;
     }
     this._sendExternal(msg);
   }
 
-  public receiveMessage(msg: EMIncomingMessage) {
+  public receiveMessage(msg: ExternalMessage) {
     if (__DEV__) {
       // eslint-disable-next-line no-console
       console.log("Receiving message from external app", msg);

src/layouts/hass-subpage.ts

@@ -1,15 +1,6 @@
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
 import { customElement, eventOptions, property } from "lit/decorators";
 import { restoreScroll } from "../common/decorators/restore-scroll";
-import { toggleAttribute } from "../common/dom/toggle_attribute";
-import { computeRTL } from "../common/util/compute_rtl";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
 import { HomeAssistant } from "../types";
@@ -24,8 +15,6 @@ class HassSubpage extends LitElement {
 
   @property({ type: String, attribute: "back-path" }) public backPath?: string;
 
-  @property() public backCallback?: () => void;
-
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
   @property({ type: Boolean }) public supervisor = false;
@@ -33,17 +22,6 @@ class HassSubpage extends LitElement {
   // @ts-ignore
   @restoreScroll(".content") private _savedScrollPos?: number;
 
-  protected willUpdate(changedProps: PropertyValues): void {
-    super.willUpdate(changedProps);
-    if (!changedProps.has("hass")) {
-      return;
-    }
-    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass || oldHass.locale !== this.hass.locale) {
-      toggleAttribute(this, "rtl", computeRTL(this.hass));
-    }
-  }
-
   protected render(): TemplateResult {
     return html`
       <div class="toolbar">
@@ -74,9 +52,6 @@ class HassSubpage extends LitElement {
         <slot name="toolbar-icon"></slot>
       </div>
       <div class="content" @scroll=${this._saveScrollPos}><slot></slot></div>
-      <div id="fab">
-        <slot name="fab"></slot>
-      </div>
     `;
   }
 
@@ -86,10 +61,6 @@ class HassSubpage extends LitElement {
   }
 
   private _backTapped(): void {
-    if (this.backCallback) {
-      this.backCallback();
-      return;
-    }
     history.back();
   }
 
@@ -145,29 +116,6 @@ class HassSubpage extends LitElement {
         overflow: auto;
         -webkit-overflow-scrolling: touch;
       }
-
-      #fab {
-        position: fixed;
-        right: calc(16px + env(safe-area-inset-right));
-        bottom: calc(16px + env(safe-area-inset-bottom));
-        z-index: 1;
-      }
-      :host([narrow]) #fab.tabs {
-        bottom: calc(84px + env(safe-area-inset-bottom));
-      }
-      #fab[is-wide] {
-        bottom: 24px;
-        right: 24px;
-      }
-      :host([rtl]) #fab {
-        right: auto;
-        left: calc(16px + env(safe-area-inset-left));
-      }
-      :host([rtl][is-wide]) #fab {
-        bottom: 24px;
-        left: 24px;
-        right: auto;
-      }
     `;
   }
 }

src/layouts/hass-tabs-subpage-data-table.ts

@@ -375,9 +375,3 @@ export class HaTabsSubpageDataTable extends LitElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hass-tabs-subpage-data-table": HaTabsSubpageDataTable;
-  }
-}

src/panels/config/application_credentials/dialog-add-application-credential.ts

@@ -1,9 +1,8 @@
 import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
-import { mdiOpenInNew } from "@mdi/js";
-import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-combo-box";
@@ -11,15 +10,14 @@ import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-markdown";
 import "../../../components/ha-textfield";
 import {
-  ApplicationCredential,
-  ApplicationCredentialsConfig,
-  createApplicationCredential,
   fetchApplicationCredentialsConfig,
+  createApplicationCredential,
+  ApplicationCredentialsConfig,
+  ApplicationCredential,
 } from "../../../data/application_credential";
 import { domainToName } from "../../../data/integration";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
-import { documentationUrl } from "../../../util/documentation-url";
 import { AddApplicationCredentialDialogParams } from "./show-dialog-add-application-credential";
 
 interface Domain {
@@ -100,25 +98,6 @@ export class DialogAddApplicationCredential extends LitElement {
       >
         <div>
           ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
-          <p>
-            ${this.hass.localize(
-              "ui.panel.config.application_credentials.editor.description"
-            )}
-            <br />
-            <a
-              href=${documentationUrl(
-                this.hass!,
-                "/integrations/application_credentials"
-              )}
-              target="_blank"
-              rel="noreferrer"
-            >
-              ${this.hass!.localize(
-                "ui.panel.config.application_credentials.editor.view_documentation"
-              )}
-              <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
-            </a>
-          </p>
           <ha-combo-box
             name="domain"
             .hass=${this.hass}
@@ -164,10 +143,6 @@ export class DialogAddApplicationCredential extends LitElement {
             @input=${this._handleValueChanged}
             error-message=${this.hass.localize("ui.common.error_required")}
             dialogInitialFocus
-            .helper=${this.hass.localize(
-              "ui.panel.config.application_credentials.editor.client_id_helper"
-            )}
-            helperPersistent
           ></ha-textfield>
           <ha-textfield
             .label=${this.hass.localize(
@@ -179,10 +154,6 @@ export class DialogAddApplicationCredential extends LitElement {
             required
             @input=${this._handleValueChanged}
             error-message=${this.hass.localize("ui.common.error_required")}
-            .helper=${this.hass.localize(
-              "ui.panel.config.application_credentials.editor.client_secret_helper"
-            )}
-            helperPersistent
           ></ha-textfield>
         </div>
         ${this._loading
@@ -192,18 +163,15 @@ export class DialogAddApplicationCredential extends LitElement {
               </div>
             `
           : html`
-              <mwc-button slot="primaryAction" @click=${this._abortDialog}>
-                ${this.hass.localize("ui.common.cancel")}
-              </mwc-button>
               <mwc-button
                 slot="primaryAction"
                 .disabled=${!this._domain ||
                 !this._clientId ||
                 !this._clientSecret}
-                @click=${this._addApplicationCredential}
+                @click=${this._createApplicationCredential}
               >
                 ${this.hass.localize(
-                  "ui.panel.config.application_credentials.editor.add"
+                  "ui.panel.config.application_credentials.editor.create"
                 )}
               </mwc-button>
             `}
@@ -245,7 +213,7 @@ export class DialogAddApplicationCredential extends LitElement {
     this.closeDialog();
   }
 
-  private async _addApplicationCredential(ev) {
+  private async _createApplicationCredential(ev) {
     ev.preventDefault();
     if (!this._domain || !this._clientId || !this._clientSecret) {
       return;
@@ -292,12 +260,6 @@ export class DialogAddApplicationCredential extends LitElement {
           display: block;
           margin-bottom: 24px;
         }
-        a {
-          text-decoration: none;
-        }
-        a ha-svg-icon {
-          --mdc-icon-size: 16px;
-        }
       `,
     ];
   }

src/panels/config/areas/ha-config-area-page.ts

@@ -45,14 +45,13 @@ import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box
 import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
-import { HomeAssistant } from "../../../types";
+import { HomeAssistant, Route } from "../../../types";
 import "../../logbook/ha-logbook";
+import { configSections } from "../ha-panel-config";
 import {
   loadAreaRegistryDetailDialog,
   showAreaRegistryDetailDialog,
 } from "./show-dialog-area-registry-detail";
-import "../../../layouts/hass-error-screen";
-import "../../../layouts/hass-subpage";
 
 declare type NameAndEntity<EntityType extends HassEntity> = {
   name: string;
@@ -67,9 +66,11 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public narrow!: boolean;
 
-  @property({ type: Boolean }) public isWide!: boolean;
+  @property() public isWide!: boolean;
 
-  @property({ type: Boolean }) public showAdvanced!: boolean;
+  @property() public showAdvanced!: boolean;
+
+  @property() public route!: Route;
 
   @state() public _areas!: AreaRegistryEntry[];
 
@@ -241,20 +242,43 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
     }
 
     return html`
-      <hass-subpage
+      <hass-tabs-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .header=${area.name}
+        .tabs=${configSections.areas}
+        .route=${this.route}
       >
-        <ha-icon-button
+        ${this.narrow
-          .path=${mdiPencil}
+          ? html`<span slot="header"> ${area.name} </span>
-          .entry=${area}
+              <ha-icon-button
-          @click=${this._showSettings}
+                .path=${mdiPencil}
-          slot="toolbar-icon"
+                .entry=${area}
-          .label=${this.hass.localize("ui.panel.config.areas.edit_settings")}
+                @click=${this._showSettings}
-        ></ha-icon-button>
+                slot="toolbar-icon"
+                .label=${this.hass.localize(
+                  "ui.panel.config.areas.edit_settings"
+                )}
+              ></ha-icon-button>`
+          : ""}
 
         <div class="container">
+          ${!this.narrow
+            ? html`
+                <div class="fullwidth">
+                  <h1>
+                    ${area.name}
+                    <ha-icon-button
+                      .path=${mdiPencil}
+                      .entry=${area}
+                      @click=${this._showSettings}
+                      .label=${this.hass.localize(
+                        "ui.panel.config.areas.edit_settings"
+                      )}
+                    ></ha-icon-button>
+                  </h1>
+                </div>
+              `
+            : ""}
           <div class="column">
             ${area.picture
               ? html`<div class="img-container">
@@ -480,7 +504,7 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
               : ""}
           </div>
         </div>
-      </hass-subpage>
+      </hass-tabs-subpage>
     `;
   }
 

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -1,6 +1,8 @@
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import {
+  mdiArrowDown,
+  mdiArrowUp,
   mdiCheck,
   mdiContentDuplicate,
   mdiDelete,
@@ -15,15 +17,13 @@ import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
-import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-expansion-panel";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
-import { ACTION_TYPES } from "../../../../data/action";
 import { validateConfig } from "../../../../data/config";
 import { Action, getActionType } from "../../../../data/script";
 import { describeAction } from "../../../../data/script_i18n";
@@ -50,6 +50,8 @@ import "./types/ha-automation-action-service";
 import "./types/ha-automation-action-stop";
 import "./types/ha-automation-action-wait_for_trigger";
 import "./types/ha-automation-action-wait_template";
+import { ACTION_TYPES } from "../../../../data/action";
+import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 
 const getType = (action: Action | undefined) => {
   if (!action) {
@@ -64,6 +66,13 @@ const getType = (action: Action | undefined) => {
   return Object.keys(ACTION_TYPES).find((option) => option in action);
 };
 
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "move-action": { direction: "up" | "down" };
+  }
+}
+
 export interface ActionElement extends LitElement {
   action: Action;
 }
@@ -98,12 +107,12 @@ export default class HaAutomationActionRow extends LitElement {
 
   @property() public action!: Action;
 
+  @property() public index!: number;
+
+  @property() public totalActions!: number;
+
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ type: Boolean }) public hideMenu = false;
-
-  @property({ type: Boolean }) public reOrderMode = false;
-
   @state() private _warnings?: string[];
 
   @state() private _uiModeAvailable = true;
@@ -148,120 +157,125 @@ export default class HaAutomationActionRow extends LitElement {
             </div>`
           : ""}
         <ha-expansion-panel leftChevron>
-          <h3 slot="header">
+          <div slot="header">
             <ha-svg-icon
               class="action-icon"
               .path=${ACTION_TYPES[type!]}
             ></ha-svg-icon>
             ${capitalizeFirstLetter(describeAction(this.hass, this.action))}
-          </h3>
+          </div>
 
-          <slot name="icons" slot="icons"></slot>
+          ${this.index !== 0
-          ${this.hideMenu
+            ? html`
-            ? ""
+                <ha-icon-button
-            : html`
-                <ha-button-menu
                   slot="icons"
-                  fixed
+                  .label=${this.hass.localize(
-                  corner="BOTTOM_START"
+                    "ui.panel.config.automation.editor.move_up"
-                  @action=${this._handleAction}
+                  )}
-                  @click=${preventDefault}
+                  .path=${mdiArrowUp}
-                >
+                  @click=${this._moveUp}
-                  <ha-icon-button
+                ></ha-icon-button>
-                    slot="trigger"
+              `
-                    .label=${this.hass.localize("ui.common.menu")}
+            : ""}
-                    .path=${mdiDotsVertical}
+          ${this.index !== this.totalActions - 1
-                  ></ha-icon-button>
+            ? html`
-                  <mwc-list-item graphic="icon">
+                <ha-icon-button
-                    ${this.hass.localize(
+                  slot="icons"
-                      "ui.panel.config.automation.editor.actions.run"
+                  .label=${this.hass.localize(
-                    )}
+                    "ui.panel.config.automation.editor.move_down"
-                    <ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
+                  )}
-                  </mwc-list-item>
+                  .path=${mdiArrowDown}
+                  @click=${this._moveDown}
+                ></ha-icon-button>
+              `
+            : ""}
+          <ha-button-menu
+            slot="icons"
+            fixed
+            corner="BOTTOM_START"
+            @action=${this._handleAction}
+            @click=${preventDefault}
+          >
+            <ha-icon-button
+              slot="trigger"
+              .label=${this.hass.localize("ui.common.menu")}
+              .path=${mdiDotsVertical}
+            ></ha-icon-button>
+            <mwc-list-item graphic="icon">
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.run"
+              )}
+              <ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
+            </mwc-list-item>
 
-                  <mwc-list-item graphic="icon">
+            <mwc-list-item graphic="icon">
-                    ${this.hass.localize(
+              ${this.hass.localize(
-                      "ui.panel.config.automation.editor.actions.rename"
+                "ui.panel.config.automation.editor.actions.rename"
-                    )}
+              )}
-                    <ha-svg-icon
+              <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
-                      slot="graphic"
+            </mwc-list-item>
-                      .path=${mdiRenameBox}
+            <mwc-list-item graphic="icon">
-                    ></ha-svg-icon>
+              ${this.hass.localize(
-                  </mwc-list-item>
+                "ui.panel.config.automation.editor.actions.duplicate"
-                  <mwc-list-item graphic="icon">
+              )}
-                    ${this.hass.localize(
+              <ha-svg-icon
-                      "ui.panel.config.automation.editor.actions.duplicate"
+                slot="graphic"
-                    )}
+                .path=${mdiContentDuplicate}
-                    <ha-svg-icon
+              ></ha-svg-icon>
-                      slot="graphic"
+            </mwc-list-item>
-                      .path=${mdiContentDuplicate}
-                    ></ha-svg-icon>
-                  </mwc-list-item>
 
-                  <li divider role="separator"></li>
+            <li divider role="separator"></li>
 
-                  <mwc-list-item
+            <mwc-list-item .disabled=${!this._uiModeAvailable} graphic="icon">
-                    .disabled=${!this._uiModeAvailable}
+              ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
-                    graphic="icon"
+              ${!yamlMode
-                  >
+                ? html`<ha-svg-icon
-                    ${this.hass.localize(
+                    slot="graphic"
-                      "ui.panel.config.automation.editor.edit_ui"
+                    .path=${mdiCheck}
-                    )}
+                  ></ha-svg-icon>`
-                    ${!yamlMode
+                : ``}
-                      ? html`<ha-svg-icon
+            </mwc-list-item>
-                          class="selected_menu_item"
-                          slot="graphic"
-                          .path=${mdiCheck}
-                        ></ha-svg-icon>`
-                      : ``}
-                  </mwc-list-item>
 
-                  <mwc-list-item
+            <mwc-list-item .disabled=${!this._uiModeAvailable} graphic="icon">
-                    .disabled=${!this._uiModeAvailable}
+              ${this.hass.localize(
-                    graphic="icon"
+                "ui.panel.config.automation.editor.edit_yaml"
-                  >
+              )}
-                    ${this.hass.localize(
+              ${yamlMode
-                      "ui.panel.config.automation.editor.edit_yaml"
+                ? html`<ha-svg-icon
-                    )}
+                    slot="graphic"
-                    ${yamlMode
+                    .path=${mdiCheck}
-                      ? html`<ha-svg-icon
+                  ></ha-svg-icon>`
-                          class="selected_menu_item"
+                : ``}
-                          slot="graphic"
+            </mwc-list-item>
-                          .path=${mdiCheck}
-                        ></ha-svg-icon>`
-                      : ``}
-                  </mwc-list-item>
 
-                  <li divider role="separator"></li>
+            <li divider role="separator"></li>
-
-                  <mwc-list-item graphic="icon">
-                    ${this.action.enabled === false
-                      ? this.hass.localize(
-                          "ui.panel.config.automation.editor.actions.enable"
-                        )
-                      : this.hass.localize(
-                          "ui.panel.config.automation.editor.actions.disable"
-                        )}
-                    <ha-svg-icon
-                      slot="graphic"
-                      .path=${this.action.enabled === false
-                        ? mdiPlayCircleOutline
-                        : mdiStopCircleOutline}
-                    ></ha-svg-icon>
-                  </mwc-list-item>
-                  <mwc-list-item class="warning" graphic="icon">
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.actions.delete"
-                    )}
-                    <ha-svg-icon
-                      class="warning"
-                      slot="graphic"
-                      .path=${mdiDelete}
-                    ></ha-svg-icon>
-                  </mwc-list-item>
-                </ha-button-menu>
-              `}
 
+            <mwc-list-item graphic="icon">
+              ${this.action.enabled === false
+                ? this.hass.localize(
+                    "ui.panel.config.automation.editor.actions.enable"
+                  )
+                : this.hass.localize(
+                    "ui.panel.config.automation.editor.actions.disable"
+                  )}
+              <ha-svg-icon
+                slot="graphic"
+                .path=${this.action.enabled === false
+                  ? mdiPlayCircleOutline
+                  : mdiStopCircleOutline}
+              ></ha-svg-icon>
+            </mwc-list-item>
+            <mwc-list-item class="warning" graphic="icon">
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.delete"
+              )}
+              <ha-svg-icon
+                class="warning"
+                slot="graphic"
+                .path=${mdiDelete}
+              ></ha-svg-icon>
+            </mwc-list-item>
+          </ha-button-menu>
           <div
             class=${classMap({
               "card-content": true,
@@ -311,7 +325,6 @@ export default class HaAutomationActionRow extends LitElement {
                       hass: this.hass,
                       action: this.action,
                       narrow: this.narrow,
-                      reOrderMode: this.reOrderMode,
                     })}
                   </div>
                 `}
@@ -331,6 +344,16 @@ export default class HaAutomationActionRow extends LitElement {
     }
   }
 
+  private _moveUp(ev) {
+    ev.preventDefault();
+    fireEvent(this, "move-action", { direction: "up" });
+  }
+
+  private _moveDown(ev) {
+    ev.preventDefault();
+    fireEvent(this, "move-action", { direction: "down" });
+  }
+
   private async _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
@@ -404,15 +427,11 @@ export default class HaAutomationActionRow extends LitElement {
 
   private _onDelete() {
     showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.automation.editor.actions.delete_confirm_title"
-      ),
       text: this.hass.localize(
-        "ui.panel.config.automation.editor.actions.delete_confirm_text"
+        "ui.panel.config.automation.editor.actions.delete_confirm"
       ),
       dismissText: this.hass.localize("ui.common.cancel"),
       confirmText: this.hass.localize("ui.common.delete"),
-      destructive: true,
       confirm: () => {
         fireEvent(this, "value-changed", { value: null });
       },
@@ -488,18 +507,13 @@ export default class HaAutomationActionRow extends LitElement {
           --expansion-panel-summary-padding: 0 0 0 8px;
           --expansion-panel-content-padding: 0;
         }
-        h3 {
-          margin: 0;
-          font-size: inherit;
-          font-weight: inherit;
-        }
         .action-icon {
           display: none;
         }
         @media (min-width: 870px) {
           .action-icon {
             display: inline-block;
-            color: var(--secondary-text-color);
+            color: var(--primary-color);
             opacity: 0.9;
             margin-right: 8px;
           }
@@ -520,12 +534,6 @@ export default class HaAutomationActionRow extends LitElement {
         .warning ul {
           margin: 4px 0;
         }
-        .selected_menu_item {
-          color: var(--primary-color);
-        }
-        li[role="separator"] {
-          border-bottom-color: var(--divider-color);
-        }
       `,
     ];
   }

src/panels/config/automation/action/ha-automation-action.ts

@@ -1,25 +1,15 @@
+import { repeat } from "lit/directives/repeat";
+import { mdiPlus } from "@mdi/js";
+import deepClone from "deep-clone-simple";
 import "@material/mwc-button";
 import type { ActionDetail } from "@material/mwc-list";
-import { mdiArrowDown, mdiArrowUp, mdiDrag, mdiPlus } from "@mdi/js";
+import memoizeOne from "memoize-one";
-import deepClone from "deep-clone-simple";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
-import type { SortableEvent } from "sortablejs";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { stringCompare } from "../../../../common/string/compare";
-import { LocalizeFunc } from "../../../../common/translations/localize";
-import "../../../../components/ha-button-menu";
-import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-svg-icon";
-import { ACTION_TYPES } from "../../../../data/action";
+import "../../../../components/ha-button-menu";
 import { Action } from "../../../../data/script";
-import { sortableStyles } from "../../../../resources/ha-sortable-style";
-import {
-  loadSortable,
-  SortableInstance,
-} from "../../../../resources/sortable.ondemand";
 import { HomeAssistant } from "../../../../types";
 import "./ha-automation-action-row";
 import type HaAutomationActionRow from "./ha-automation-action-row";
@@ -37,6 +27,10 @@ import "./types/ha-automation-action-service";
 import "./types/ha-automation-action-stop";
 import "./types/ha-automation-action-wait_for_trigger";
 import "./types/ha-automation-action-wait_template";
+import { ACTION_TYPES } from "../../../../data/action";
+import { stringCompare } from "../../../../common/string/compare";
+import { LocalizeFunc } from "../../../../common/translations/localize";
+import type { HaSelect } from "../../../../components/ha-select";
 
 @customElement("ha-automation-action")
 export default class HaAutomationAction extends LitElement {
@@ -46,62 +40,28 @@ export default class HaAutomationAction extends LitElement {
 
   @property() public actions!: Action[];
 
-  @property({ type: Boolean }) public reOrderMode = false;
-
   private _focusLastActionOnChange = false;
 
   private _actionKeys = new WeakMap<Action, string>();
 
-  private _sortable?: SortableInstance;
-
   protected render() {
     return html`
-      <div class="actions">
+      ${repeat(
-        ${repeat(
+        this.actions,
-          this.actions,
+        (action) => this._getKey(action),
-          (action) => this._getKey(action),
+        (action, idx) => html`
-          (action, idx) => html`
+          <ha-automation-action-row
-            <ha-automation-action-row
+            .index=${idx}
-              .index=${idx}
+            .totalActions=${this.actions.length}
-              .action=${action}
+            .action=${action}
-              .narrow=${this.narrow}
+            .narrow=${this.narrow}
-              .hideMenu=${this.reOrderMode}
+            @duplicate=${this._duplicateAction}
-              .reOrderMode=${this.reOrderMode}
+            @move-action=${this._move}
-              @duplicate=${this._duplicateAction}
+            @value-changed=${this._actionChanged}
-              @value-changed=${this._actionChanged}
+            .hass=${this.hass}
-              .hass=${this.hass}
+          ></ha-automation-action-row>
-            >
+        `
-              ${this.reOrderMode
+      )}
-                ? html`
-                    <ha-icon-button
-                      .index=${idx}
-                      slot="icons"
-                      .label=${this.hass.localize(
-                        "ui.panel.config.automation.editor.move_up"
-                      )}
-                      .path=${mdiArrowUp}
-                      @click=${this._moveUp}
-                      .disabled=${idx === 0}
-                    ></ha-icon-button>
-                    <ha-icon-button
-                      .index=${idx}
-                      slot="icons"
-                      .label=${this.hass.localize(
-                        "ui.panel.config.automation.editor.move_down"
-                      )}
-                      .path=${mdiArrowDown}
-                      @click=${this._moveDown}
-                      .disabled=${idx === this.actions.length - 1}
-                    ></ha-icon-button>
-                    <div class="handle" slot="icons">
-                      <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
-                    </div>
-                  `
-                : ""}
-            </ha-automation-action-row>
-          `
-        )}
-      </div>
       <ha-button-menu fixed @action=${this._addAction}>
         <mwc-button
           slot="trigger"
@@ -126,13 +86,6 @@ export default class HaAutomationAction extends LitElement {
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
 
-    if (changedProps.has("reOrderMode")) {
-      if (this.reOrderMode) {
-        this._createSortable();
-      } else {
-        this._destroySortable();
-      }
-    }
     if (changedProps.has("actions") && this._focusLastActionOnChange) {
       this._focusLastActionOnChange = false;
 
@@ -147,33 +100,6 @@ export default class HaAutomationAction extends LitElement {
     }
   }
 
-  private async _createSortable() {
-    const Sortable = await loadSortable();
-    this._sortable = new Sortable(this.shadowRoot!.querySelector(".actions")!, {
-      animation: 150,
-      fallbackClass: "sortable-fallback",
-      handle: ".handle",
-      onChoose: (evt: SortableEvent) => {
-        (evt.item as any).placeholder =
-          document.createComment("sort-placeholder");
-        evt.item.after((evt.item as any).placeholder);
-      },
-      onEnd: (evt: SortableEvent) => {
-        // put back in original location
-        if ((evt.item as any).placeholder) {
-          (evt.item as any).placeholder.replaceWith(evt.item);
-          delete (evt.item as any).placeholder;
-        }
-        this._dragged(evt);
-      },
-    });
-  }
-
-  private _destroySortable() {
-    this._sortable?.destroy();
-    this._sortable = undefined;
-  }
-
   private _getKey(action: Action) {
     if (!this._actionKeys.has(action)) {
       this._actionKeys.set(action, Math.random().toString());
@@ -195,24 +121,12 @@ export default class HaAutomationAction extends LitElement {
     fireEvent(this, "value-changed", { value: actions });
   }
 
-  private _moveUp(ev) {
+  private _move(ev: CustomEvent) {
+    // Prevent possible parent action-row from also moving
+    ev.stopPropagation();
+
     const index = (ev.target as any).index;
-    const newIndex = index - 1;
+    const newIndex = ev.detail.direction === "up" ? index - 1 : index + 1;
-    this._move(index, newIndex);
-  }
-
-  private _moveDown(ev) {
-    const index = (ev.target as any).index;
-    const newIndex = index + 1;
-    this._move(index, newIndex);
-  }
-
-  private _dragged(ev: SortableEvent): void {
-    if (ev.oldIndex === ev.newIndex) return;
-    this._move(ev.oldIndex!, ev.newIndex!);
-  }
-
-  private _move(index: number, newIndex: number) {
     const actions = this.actions.concat();
     const action = actions.splice(index, 1)[0];
     actions.splice(newIndex, 0, action);
@@ -263,27 +177,16 @@ export default class HaAutomationAction extends LitElement {
   );
 
   static get styles(): CSSResultGroup {
-    return [
+    return css`
-      sortableStyles,
+      ha-automation-action-row {
-      css`
+        display: block;
-        ha-automation-action-row {
+        margin-bottom: 16px;
-          display: block;
+        scroll-margin-top: 48px;
-          margin-bottom: 16px;
+      }
-          scroll-margin-top: 48px;
+      ha-svg-icon {
-        }
+        height: 20px;
-        ha-svg-icon {
+      }
-          height: 20px;
+    `;
-        }
-        .handle {
-          cursor: move;
-          padding: 12px;
-        }
-        .handle ha-svg-icon {
-          pointer-events: none;
-          height: 24px;
-        }
-      `,
-    ];
   }
 }
 

src/panels/config/automation/action/types/ha-automation-action-choose.ts

@@ -9,6 +9,7 @@ import { Action, ChooseAction } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
 import { ActionElement } from "../ha-automation-action-row";
+import "../../../../../components/ha-form/ha-form";
 
 @customElement("ha-automation-action-choose")
 export class HaChooseAction extends LitElement implements ActionElement {
@@ -16,8 +17,6 @@ export class HaChooseAction extends LitElement implements ActionElement {
 
   @property() public action!: ChooseAction;
 
-  @property({ type: Boolean }) public reOrderMode = false;
-
   @state() private _showDefault = false;
 
   public static get defaultConfig() {
@@ -53,7 +52,6 @@ export class HaChooseAction extends LitElement implements ActionElement {
             </h3>
             <ha-automation-condition
               .conditions=${option.conditions}
-              .reOrderMode=${this.reOrderMode}
               .hass=${this.hass}
               .idx=${idx}
               @value-changed=${this._conditionChanged}
@@ -63,13 +61,13 @@ export class HaChooseAction extends LitElement implements ActionElement {
                 "ui.panel.config.automation.editor.actions.type.choose.sequence"
               )}:
             </h3>
-            <ha-automation-action
+            <ha-form
-              .actions=${option.sequence || []}
-              .reOrderMode=${this.reOrderMode}
               .hass=${this.hass}
+              .schema=${[{ name: "sequence", selector: { action: {} } }]}
+              .data=${option}
               .idx=${idx}
               @value-changed=${this._actionChanged}
-            ></ha-automation-action>
+            ></ha-form>
           </div>
         </ha-card>`
       )}
@@ -91,7 +89,6 @@ export class HaChooseAction extends LitElement implements ActionElement {
             </h2>
             <ha-automation-action
               .actions=${action.default || []}
-              .reOrderMode=${this.reOrderMode}
               @value-changed=${this._defaultChanged}
               .hass=${this.hass}
             ></ha-automation-action>
@@ -125,7 +122,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
 
   private _actionChanged(ev: CustomEvent) {
     ev.stopPropagation();
-    const value = ev.detail.value as Action[];
+    const value = ev.detail.value.sequence as Action[];
     const index = (ev.target as any).idx;
     const choose = this.action.choose
       ? [...ensureArray(this.action.choose)]
@@ -184,6 +181,9 @@ export class HaChooseAction extends LitElement implements ActionElement {
           right: 0;
           padding: 4px;
         }
+        ha-form::part(root) {
+          overflow: visible;
+        }
         ha-svg-icon {
           height: 20px;
         }

src/panels/config/automation/action/types/ha-automation-action-if.ts

@@ -15,8 +15,6 @@ export class HaIfAction extends LitElement implements ActionElement {
 
   @property({ attribute: false }) public action!: IfAction;
 
-  @property({ type: Boolean }) public reOrderMode = false;
-
   @state() private _showElse = false;
 
   public static get defaultConfig() {
@@ -37,9 +35,8 @@ export class HaIfAction extends LitElement implements ActionElement {
       </h3>
       <ha-automation-condition
         .conditions=${action.if}
-        .reOrderMode=${this.reOrderMode}
-        @value-changed=${this._ifChanged}
         .hass=${this.hass}
+        @value-changed=${this._ifChanged}
       ></ha-automation-condition>
 
       <h3>
@@ -49,7 +46,6 @@ export class HaIfAction extends LitElement implements ActionElement {
       </h3>
       <ha-automation-action
         .actions=${action.then}
-        .reOrderMode=${this.reOrderMode}
         @value-changed=${this._thenChanged}
         .hass=${this.hass}
       ></ha-automation-action>
@@ -62,7 +58,6 @@ export class HaIfAction extends LitElement implements ActionElement {
             </h3>
             <ha-automation-action
               .actions=${action.else || []}
-              .reOrderMode=${this.reOrderMode}
               @value-changed=${this._elseChanged}
               .hass=${this.hass}
             ></ha-automation-action>

src/panels/config/automation/action/types/ha-automation-action-parallel.ts

@@ -14,8 +14,6 @@ export class HaParallelAction extends LitElement implements ActionElement {
 
   @property({ attribute: false }) public action!: ParallelAction;
 
-  @property({ type: Boolean }) public reOrderMode = false;
-
   public static get defaultConfig() {
     return {
       parallel: [],
@@ -28,7 +26,6 @@ export class HaParallelAction extends LitElement implements ActionElement {
     return html`
       <ha-automation-action
         .actions=${action.parallel}
-        .reOrderMode=${this.reOrderMode}
         @value-changed=${this._actionsChanged}
         .hass=${this.hass}
       ></ha-automation-action>

src/panels/config/automation/action/types/ha-automation-action-repeat.ts

@@ -25,8 +25,6 @@ export class HaRepeatAction extends LitElement implements ActionElement {
 
   @property({ attribute: false }) public action!: RepeatAction;
 
-  @property({ type: Boolean }) public reOrderMode = false;
-
   public static get defaultConfig() {
     return { repeat: { count: 2, sequence: [] } };
   }
@@ -97,7 +95,6 @@ export class HaRepeatAction extends LitElement implements ActionElement {
       </h3>
       <ha-automation-action
         .actions=${action.sequence}
-        .reOrderMode=${this.reOrderMode}
         @value-changed=${this._actionChanged}
         .hass=${this.hass}
       ></ha-automation-action>
@@ -115,7 +112,6 @@ export class HaRepeatAction extends LitElement implements ActionElement {
 
     fireEvent(this, "value-changed", {
       value: {
-        ...this.action,
         repeat: { [type]: value, sequence: this.action.repeat.sequence },
       },
     });
@@ -126,7 +122,6 @@ export class HaRepeatAction extends LitElement implements ActionElement {
     const value = ev.detail.value as Condition[];
     fireEvent(this, "value-changed", {
       value: {
-        ...this.action,
         repeat: {
           ...this.action.repeat,
           [getType(this.action.repeat)!]: value,
@@ -140,7 +135,6 @@ export class HaRepeatAction extends LitElement implements ActionElement {
     const value = ev.detail.value as Action[];
     fireEvent(this, "value-changed", {
       value: {
-        ...this.action,
         repeat: {
           ...this.action.repeat,
           sequence: value,
@@ -156,7 +150,6 @@ export class HaRepeatAction extends LitElement implements ActionElement {
     }
     fireEvent(this, "value-changed", {
       value: {
-        ...this.action,
         repeat: {
           ...this.action.repeat,
           count: newVal,

src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts

@@ -1,167 +0,0 @@
-import "@material/mwc-button";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import { createCloseHeading } from "../../../../components/ha-dialog";
-import "../../../../components/ha-textfield";
-import "../../../../components/ha-select";
-import { HassDialog } from "../../../../dialogs/make-dialog-manager";
-import { haStyle, haStyleDialog } from "../../../../resources/styles";
-import type { HomeAssistant } from "../../../../types";
-import type { AutomationModeDialog } from "./show-dialog-automation-mode";
-import {
-  AUTOMATION_DEFAULT_MAX,
-  AUTOMATION_DEFAULT_MODE,
-} from "../../../../data/automation";
-import { documentationUrl } from "../../../../util/documentation-url";
-import { isMaxMode, MODES } from "../../../../data/script";
-import "@material/mwc-list/mwc-list-item";
-import { stopPropagation } from "../../../../common/dom/stop_propagation";
-
-@customElement("ha-dialog-automation-mode")
-class DialogAutomationMode extends LitElement implements HassDialog {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _opened = false;
-
-  private _params!: AutomationModeDialog;
-
-  @state() private _newMode: typeof MODES[number] = AUTOMATION_DEFAULT_MODE;
-
-  @state() private _newMax?: number;
-
-  public showDialog(params: AutomationModeDialog): void {
-    this._opened = true;
-    this._params = params;
-    this._newMode = params.config.mode || AUTOMATION_DEFAULT_MODE;
-    this._newMax = isMaxMode(this._newMode)
-      ? params.config.max || AUTOMATION_DEFAULT_MAX
-      : undefined;
-  }
-
-  public closeDialog(): void {
-    this._params.onClose();
-
-    if (this._opened) {
-      fireEvent(this, "dialog-closed", { dialog: this.localName });
-    }
-    this._opened = false;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._opened) {
-      return html``;
-    }
-
-    return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.panel.config.automation.editor.change_mode")
-        )}
-      >
-        <ha-select
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.modes.label"
-          )}
-          .value=${this._newMode}
-          @selected=${this._modeChanged}
-          @closed=${stopPropagation}
-          fixedMenuPosition
-          .helper=${html`
-            <a
-              style="color: var(--secondary-text-color)"
-              href=${documentationUrl(this.hass, "/docs/automation/modes/")}
-              target="_blank"
-              rel="noreferrer"
-              >${this.hass.localize(
-                "ui.panel.config.automation.editor.modes.learn_more"
-              )}</a
-            >
-          `}
-        >
-          ${MODES.map(
-            (mode) => html`
-              <mwc-list-item .value=${mode}>
-                ${this.hass.localize(
-                  `ui.panel.config.automation.editor.modes.${mode}`
-                ) || mode}
-              </mwc-list-item>
-            `
-          )}
-        </ha-select>
-        ${isMaxMode(this._newMode)
-          ? html`
-              <br /><ha-textfield
-                .label=${this.hass.localize(
-                  `ui.panel.config.automation.editor.max.${this._newMode}`
-                )}
-                type="number"
-                name="max"
-                .value=${this._newMax?.toString() ?? ""}
-                @change=${this._valueChanged}
-                class="max"
-              >
-              </ha-textfield>
-            `
-          : html``}
-
-        <mwc-button @click=${this.closeDialog} slot="secondaryAction">
-          ${this.hass.localize("ui.dialogs.generic.cancel")}
-        </mwc-button>
-        <mwc-button @click=${this._save} slot="primaryAction">
-          ${this.hass.localize("ui.panel.config.automation.editor.change_mode")}
-        </mwc-button>
-      </ha-dialog>
-    `;
-  }
-
-  private _modeChanged(ev) {
-    const mode = ev.target.value;
-    this._newMode = mode;
-    if (!isMaxMode(mode)) {
-      this._newMax = undefined;
-    } else if (!this._newMax) {
-      this._newMax = AUTOMATION_DEFAULT_MAX;
-    }
-  }
-
-  private _valueChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    const target = ev.target as any;
-    if (target.name === "max") {
-      this._newMax = Number(target.value);
-    }
-  }
-
-  private _save(): void {
-    this._params.updateAutomation({
-      ...this._params.config,
-      mode: this._newMode,
-      max: this._newMax,
-    });
-    this.closeDialog();
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        ha-select,
-        ha-textfield {
-          display: block;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-dialog-automation-mode": DialogAutomationMode;
-  }
-}

src/panels/config/automation/automation-mode-dialog/show-dialog-automation-mode.ts

@@ -1,22 +0,0 @@
-import { fireEvent } from "../../../../common/dom/fire_event";
-import type { AutomationConfig } from "../../../../data/automation";
-
-export const loadAutomationModeDialog = () =>
-  import("./dialog-automation-mode");
-
-export interface AutomationModeDialog {
-  config: AutomationConfig;
-  updateAutomation: (config: AutomationConfig) => void;
-  onClose: () => void;
-}
-
-export const showAutomationModeDialog = (
-  element: HTMLElement,
-  dialogParams: AutomationModeDialog
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "ha-dialog-automation-mode",
-    dialogImport: loadAutomationModeDialog,
-    dialogParams,
-  });
-};

src/panels/config/automation/automation-rename-dialog/dialog-automation-rename.ts

@@ -1,157 +0,0 @@
-import "@material/mwc-button";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import { createCloseHeading } from "../../../../components/ha-dialog";
-import { HassDialog } from "../../../../dialogs/make-dialog-manager";
-import { haStyle, haStyleDialog } from "../../../../resources/styles";
-import type { HomeAssistant } from "../../../../types";
-import type { AutomationRenameDialog } from "./show-dialog-automation-rename";
-import "../../../../components/ha-textarea";
-import "../../../../components/ha-alert";
-import "../../../../components/ha-textfield";
-
-@customElement("ha-dialog-automation-rename")
-class DialogAutomationRename extends LitElement implements HassDialog {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _opened = false;
-
-  @state() private _error?: string;
-
-  private _params!: AutomationRenameDialog;
-
-  private _newName?: string;
-
-  private _newDescription?: string;
-
-  public showDialog(params: AutomationRenameDialog): void {
-    this._opened = true;
-    this._params = params;
-    this._newName =
-      params.config.alias ||
-      this.hass.localize("ui.panel.config.automation.editor.default_name");
-    this._newDescription = params.config.description || "";
-  }
-
-  public closeDialog(): void {
-    this._params.onClose();
-
-    if (this._opened) {
-      fireEvent(this, "dialog-closed", { dialog: this.localName });
-    }
-    this._opened = false;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._opened) {
-      return html``;
-    }
-    return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize(
-            this._params.config.alias
-              ? "ui.panel.config.automation.editor.rename"
-              : "ui.panel.config.automation.editor.save"
-          )
-        )}
-      >
-        ${this._error
-          ? html`<ha-alert alert-type="error"
-              >${this.hass.localize(
-                "ui.panel.config.automation.editor.missing_name"
-              )}</ha-alert
-            >`
-          : ""}
-        <ha-textfield
-          dialogInitialFocus
-          .value=${this._newName}
-          .placeholder=${this.hass.localize(
-            "ui.panel.config.automation.editor.default_name"
-          )}
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.alias"
-          )}
-          required
-          type="string"
-          @input=${this._valueChanged}
-        ></ha-textfield>
-
-        <ha-textarea
-          .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.description.label"
-          )}
-          .placeholder=${this.hass.localize(
-            "ui.panel.config.automation.editor.description.placeholder"
-          )}
-          name="description"
-          autogrow
-          .value=${this._newDescription}
-          @input=${this._valueChanged}
-        ></ha-textarea>
-
-        <mwc-button @click=${this.closeDialog} slot="secondaryAction">
-          ${this.hass.localize("ui.dialogs.generic.cancel")}
-        </mwc-button>
-        <mwc-button @click=${this._save} slot="primaryAction">
-          ${this.hass.localize(
-            this._params.config.alias
-              ? "ui.panel.config.automation.editor.rename"
-              : "ui.panel.config.automation.editor.save"
-          )}
-        </mwc-button>
-      </ha-dialog>
-    `;
-  }
-
-  private _valueChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    const target = ev.target as any;
-    if (target.name === "description") {
-      this._newDescription = target.value;
-    } else {
-      this._newName = target.value;
-    }
-  }
-
-  private _save(): void {
-    if (!this._newName) {
-      this._error = "Name is required";
-      return;
-    }
-    this._params.updateAutomation({
-      ...this._params.config,
-      alias: this._newName,
-      description: this._newDescription,
-    });
-    this.closeDialog();
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        ha-textfield,
-        ha-textarea {
-          display: block;
-        }
-        ha-alert {
-          display: block;
-          margin-bottom: 16px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-dialog-automation-rename": DialogAutomationRename;
-  }
-}

src/panels/config/automation/automation-rename-dialog/show-dialog-automation-rename.ts

@@ -1,22 +0,0 @@
-import { fireEvent } from "../../../../common/dom/fire_event";
-import type { AutomationConfig } from "../../../../data/automation";
-
-export const loadAutomationRenameDialog = () =>
-  import("./dialog-automation-rename");
-
-export interface AutomationRenameDialog {
-  config: AutomationConfig;
-  updateAutomation: (config: AutomationConfig) => void;
-  onClose: () => void;
-}
-
-export const showAutomationRenameDialog = (
-  element: HTMLElement,
-  dialogParams: AutomationRenameDialog
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "ha-dialog-automation-rename",
-    dialogImport: loadAutomationRenameDialog,
-    dialogParams,
-  });
-};

src/panels/config/automation/blueprint-automation-editor.ts

@@ -1,8 +1,9 @@
 import "@material/mwc-button/mwc-button";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-blueprint-picker";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
@@ -10,8 +11,10 @@ import "../../../components/ha-markdown";
 import "../../../components/ha-selector/ha-selector";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-textfield";
-import "../../../components/ha-alert";
+import {
-import { BlueprintAutomationConfig } from "../../../data/automation";
+  BlueprintAutomationConfig,
+  triggerAutomationActions,
+} from "../../../data/automation";
 import {
   BlueprintOrError,
   Blueprints,
@@ -35,6 +38,8 @@ export class HaBlueprintAutomationEditor extends LitElement {
 
   @state() private _blueprints?: Blueprints;
 
+  @state() private _showDescription = false;
+
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     this._getBlueprints();
@@ -47,26 +52,89 @@ export class HaBlueprintAutomationEditor extends LitElement {
     return this._blueprints[this.config.use_blueprint.path];
   }
 
+  protected willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
+    if (
+      !this._showDescription &&
+      changedProps.has("config") &&
+      this.config.description
+    ) {
+      this._showDescription = true;
+    }
+  }
+
   protected render() {
     const blueprint = this._blueprint;
     return html`
-      ${this.stateObj?.state === "off"
+      <ha-config-section vertical .isWide=${this.isWide}>
-        ? html`
+        ${!this.narrow
-            <ha-alert alert-type="info">
+          ? html` <span slot="header">${this.config.alias}</span> `
-              ${this.hass.localize(
+          : ""}
-                "ui.panel.config.automation.editor.disabled"
+        <span slot="introduction">
-              )}
+          ${this.hass.localize(
-              <mwc-button slot="action" @click=${this._enable}>
+            "ui.panel.config.automation.editor.introduction"
-                ${this.hass.localize(
+          )}
-                  "ui.panel.config.automation.editor.enable"
+        </span>
-                )}
+        <ha-card outlined>
-              </mwc-button>
+          <div class="card-content">
-            </ha-alert>
+            ${this._showDescription
-          `
+              ? html`
-        : ""}
+                  <ha-textarea
-      ${this.config.description
+                    .label=${this.hass.localize(
-        ? html`<p class="description">${this.config.description}</p>`
+                      "ui.panel.config.automation.editor.description.label"
-        : ""}
+                    )}
+                    .placeholder=${this.hass.localize(
+                      "ui.panel.config.automation.editor.description.placeholder"
+                    )}
+                    name="description"
+                    autogrow
+                    .value=${this.config.description || ""}
+                    @change=${this._valueChanged}
+                  ></ha-textarea>
+                `
+              : html`
+                  <div class="link-button-row">
+                    <button class="link" @click=${this._addDescription}>
+                      ${this.hass.localize(
+                        "ui.panel.config.automation.editor.description.add"
+                      )}
+                    </button>
+                  </div>
+                `}
+          </div>
+          ${this.stateObj
+            ? html`
+                <div class="card-actions layout horizontal justified center">
+                  <div class="layout horizontal center">
+                    <ha-entity-toggle
+                      .hass=${this.hass}
+                      .stateObj=${this.stateObj!}
+                    ></ha-entity-toggle>
+                    ${this.hass.localize(
+                      "ui.panel.config.automation.editor.enable_disable"
+                    )}
+                  </div>
+                  <div>
+                    <a href="/config/automation/trace/${this.config.id}">
+                      <mwc-button>
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.editor.show_trace"
+                        )}
+                      </mwc-button>
+                    </a>
+                    <mwc-button
+                      @click=${this._runActions}
+                      .stateObj=${this.stateObj}
+                    >
+                      ${this.hass.localize("ui.card.automation.trigger")}
+                    </mwc-button>
+                  </div>
+                </div>
+              `
+            : ""}
+        </ha-card>
+      </ha-config-section>
+
       <ha-card
         outlined
         class="blueprint"
@@ -152,6 +220,10 @@ export class HaBlueprintAutomationEditor extends LitElement {
     this._blueprints = await fetchBlueprints(this.hass, "automation");
   }
 
+  private _runActions(ev: Event) {
+    triggerAutomationActions(this.hass, (ev.target as any).stateObj.entity_id);
+  }
+
   private _blueprintChanged(ev) {
     ev.stopPropagation();
     if (this.config.use_blueprint.path === ev.detail.value) {
@@ -196,24 +268,33 @@ export class HaBlueprintAutomationEditor extends LitElement {
     });
   }
 
-  private async _enable(): Promise<void> {
+  private _valueChanged(ev: CustomEvent) {
-    if (!this.hass || !this.stateObj) {
+    ev.stopPropagation();
+    const target = ev.target as any;
+    const name = target.name;
+    if (!name) {
       return;
     }
-    await this.hass.callService("automation", "turn_on", {
+    const newVal = target.value;
-      entity_id: this.stateObj.entity_id,
+    if ((this.config![name] || "") === newVal) {
+      return;
+    }
+    fireEvent(this, "value-changed", {
+      value: { ...this.config!, [name]: newVal },
     });
   }
 
+  private _addDescription() {
+    this._showDescription = true;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
-        :host {
-          display: block;
-        }
         ha-card.blueprint {
-          margin: 0 auto;
+          max-width: 1040px;
+          margin: 24px auto;
         }
         .padding {
           padding: 16px;
@@ -224,6 +305,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
         .blueprint-picker-container {
           padding: 0 16px 16px;
         }
+        ha-textarea,
         ha-textfield,
         ha-blueprint-picker {
           display: block;
@@ -231,18 +313,14 @@ export class HaBlueprintAutomationEditor extends LitElement {
         h3 {
           margin: 16px;
         }
-        .introduction {
+        span[slot="introduction"] a {
-          margin-top: 0;
-          margin-bottom: 12px;
-        }
-        .introduction a {
           color: var(--primary-color);
         }
         p {
           margin-bottom: 0;
         }
-        .description {
+        ha-entity-toggle {
-          margin-bottom: 16px;
+          margin-right: 8px;
         }
         ha-settings-row {
           --paper-time-input-justify-content: flex-end;
@@ -250,10 +328,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
           --settings-row-prefix-display: contents;
           border-top: 1px solid var(--divider-color);
         }
-        ha-alert {
-          margin-bottom: 16px;
-          display: block;
-        }
       `,
     ];
   }

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -28,8 +28,6 @@ export default class HaAutomationConditionEditor extends LitElement {
 
   @property({ type: Boolean }) public yamlMode = false;
 
-  @property({ type: Boolean }) public reOrderMode = false;
-
   private _processedCondition = memoizeOne((condition) =>
     expandConditionWithShorthand(condition)
   );
@@ -62,11 +60,7 @@ export default class HaAutomationConditionEditor extends LitElement {
             <div>
               ${dynamicElement(
                 `ha-automation-condition-${condition.condition}`,
-                {
+                { hass: this.hass, condition: condition }
-                  hass: this.hass,
-                  condition: condition,
-                  reOrderMode: this.reOrderMode,
-                }
               )}
             </div>
           `}

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -70,10 +70,6 @@ export default class HaAutomationConditionRow extends LitElement {
 
   @property() public condition!: Condition;
 
-  @property({ type: Boolean }) public hideMenu = false;
-
-  @property({ type: Boolean }) public reOrderMode = false;
-
   @state() private _yamlMode = false;
 
   @state() private _warnings?: string[];
@@ -97,7 +93,7 @@ export default class HaAutomationConditionRow extends LitElement {
           : ""}
 
         <ha-expansion-panel leftChevron>
-          <h3 slot="header">
+          <div slot="header">
             <ha-svg-icon
               class="condition-icon"
               .path=${CONDITION_TYPES[this.condition.condition]}
@@ -105,108 +101,96 @@ export default class HaAutomationConditionRow extends LitElement {
             ${capitalizeFirstLetter(
               describeCondition(this.condition, this.hass)
             )}
-          </h3>
+          </div>
 
-          <slot name="icons" slot="icons"></slot>
+          <ha-button-menu
-          ${this.hideMenu
+            slot="icons"
-            ? ""
+            fixed
-            : html`
+            corner="BOTTOM_START"
-                <ha-button-menu
+            @action=${this._handleAction}
-                  slot="icons"
+            @click=${preventDefault}
-                  fixed
+          >
-                  corner="BOTTOM_START"
+            <ha-icon-button
-                  @action=${this._handleAction}
+              slot="trigger"
-                  @click=${preventDefault}
+              .label=${this.hass.localize("ui.common.menu")}
-                >
+              .path=${mdiDotsVertical}
-                  <ha-icon-button
+            >
-                    slot="trigger"
+            </ha-icon-button>
-                    .label=${this.hass.localize("ui.common.menu")}
-                    .path=${mdiDotsVertical}
-                  >
-                  </ha-icon-button>
 
-                  <mwc-list-item graphic="icon">
+            <mwc-list-item graphic="icon">
-                    ${this.hass.localize(
+              ${this.hass.localize(
-                      "ui.panel.config.automation.editor.conditions.test"
+                "ui.panel.config.automation.editor.conditions.test"
-                    )}
+              )}
-                    <ha-svg-icon slot="graphic" .path=${mdiFlask}></ha-svg-icon>
+              <ha-svg-icon slot="graphic" .path=${mdiFlask}></ha-svg-icon>
-                  </mwc-list-item>
+            </mwc-list-item>
-                  <mwc-list-item graphic="icon">
+            <mwc-list-item graphic="icon">
-                    ${this.hass.localize(
+              ${this.hass.localize(
-                      "ui.panel.config.automation.editor.conditions.rename"
+                "ui.panel.config.automation.editor.conditions.rename"
-                    )}
+              )}
-                    <ha-svg-icon
+              <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
-                      slot="graphic"
+            </mwc-list-item>
-                      .path=${mdiRenameBox}
+            <mwc-list-item graphic="icon">
-                    ></ha-svg-icon>
+              ${this.hass.localize(
-                  </mwc-list-item>
+                "ui.panel.config.automation.editor.actions.duplicate"
-                  <mwc-list-item graphic="icon">
+              )}
-                    ${this.hass.localize(
+              <ha-svg-icon
-                      "ui.panel.config.automation.editor.actions.duplicate"
+                slot="graphic"
-                    )}
+                .path=${mdiContentDuplicate}
-                    <ha-svg-icon
+              ></ha-svg-icon>
-                      slot="graphic"
+            </mwc-list-item>
-                      .path=${mdiContentDuplicate}
-                    ></ha-svg-icon>
-                  </mwc-list-item>
 
-                  <li divider role="separator"></li>
+            <li divider role="separator"></li>
 
-                  <mwc-list-item graphic="icon">
+            <mwc-list-item graphic="icon">
-                    ${this.hass.localize(
+              ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
-                      "ui.panel.config.automation.editor.edit_ui"
+              ${!this._yamlMode
-                    )}
+                ? html`<ha-svg-icon
-                    ${!this._yamlMode
+                    slot="graphic"
-                      ? html`<ha-svg-icon
+                    .path=${mdiCheck}
-                          class="selected_menu_item"
+                  ></ha-svg-icon>`
-                          slot="graphic"
+                : ``}
-                          .path=${mdiCheck}
+            </mwc-list-item>
-                        ></ha-svg-icon>`
-                      : ``}
-                  </mwc-list-item>
 
-                  <mwc-list-item graphic="icon">
+            <mwc-list-item graphic="icon">
-                    ${this.hass.localize(
+              ${this.hass.localize(
-                      "ui.panel.config.automation.editor.edit_yaml"
+                "ui.panel.config.automation.editor.edit_yaml"
-                    )}
+              )}
-                    ${this._yamlMode
+              ${this._yamlMode
-                      ? html`<ha-svg-icon
+                ? html`<ha-svg-icon
-                          class="selected_menu_item"
+                    slot="graphic"
-                          slot="graphic"
+                    .path=${mdiCheck}
-                          .path=${mdiCheck}
+                  ></ha-svg-icon>`
-                        ></ha-svg-icon>`
+                : ``}
-                      : ``}
+            </mwc-list-item>
-                  </mwc-list-item>
 
-                  <li divider role="separator"></li>
+            <li divider role="separator"></li>
 
-                  <mwc-list-item graphic="icon">
+            <mwc-list-item graphic="icon">
-                    ${this.condition.enabled === false
+              ${this.condition.enabled === false
-                      ? this.hass.localize(
+                ? this.hass.localize(
-                          "ui.panel.config.automation.editor.actions.enable"
+                    "ui.panel.config.automation.editor.actions.enable"
-                        )
+                  )
-                      : this.hass.localize(
+                : this.hass.localize(
-                          "ui.panel.config.automation.editor.actions.disable"
+                    "ui.panel.config.automation.editor.actions.disable"
-                        )}
+                  )}
-                    <ha-svg-icon
+              <ha-svg-icon
-                      slot="graphic"
+                slot="graphic"
-                      .path=${this.condition.enabled === false
+                .path=${this.condition.enabled === false
-                        ? mdiPlayCircleOutline
+                  ? mdiPlayCircleOutline
-                        : mdiStopCircleOutline}
+                  : mdiStopCircleOutline}
-                    ></ha-svg-icon>
+              ></ha-svg-icon>
-                  </mwc-list-item>
+            </mwc-list-item>
-                  <mwc-list-item class="warning" graphic="icon">
+            <mwc-list-item class="warning" graphic="icon">
-                    ${this.hass.localize(
+              ${this.hass.localize(
-                      "ui.panel.config.automation.editor.actions.delete"
+                "ui.panel.config.automation.editor.actions.delete"
-                    )}
+              )}
-                    <ha-svg-icon
+              <ha-svg-icon
-                      class="warning"
+                class="warning"
-                      slot="graphic"
+                slot="graphic"
-                      .path=${mdiDelete}
+                .path=${mdiDelete}
-                    ></ha-svg-icon>
+              ></ha-svg-icon>
-                  </mwc-list-item>
+            </mwc-list-item>
-                </ha-button-menu>
+          </ha-button-menu>
-              `}
 
           <div
             class=${classMap({
@@ -240,7 +224,6 @@ export default class HaAutomationConditionRow extends LitElement {
               .yamlMode=${this._yamlMode}
               .hass=${this.hass}
               .condition=${this.condition}
-              .reOrderMode=${this.reOrderMode}
             ></ha-automation-condition-editor>
           </div>
         </ha-expansion-panel>
@@ -314,15 +297,11 @@ export default class HaAutomationConditionRow extends LitElement {
 
   private _onDelete() {
     showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.automation.editor.conditions.delete_confirm_title"
-      ),
       text: this.hass.localize(
-        "ui.panel.config.automation.editor.conditions.delete_confirm_text"
+        "ui.panel.config.automation.editor.conditions.delete_confirm"
       ),
       dismissText: this.hass.localize("ui.common.cancel"),
       confirmText: this.hass.localize("ui.common.delete"),
-      destructive: true,
       confirm: () => {
         fireEvent(this, "value-changed", { value: null });
       },
@@ -444,18 +423,13 @@ export default class HaAutomationConditionRow extends LitElement {
           --expansion-panel-summary-padding: 0 0 0 8px;
           --expansion-panel-content-padding: 0;
         }
-        h3 {
-          margin: 0;
-          font-size: inherit;
-          font-weight: inherit;
-        }
         .condition-icon {
           display: none;
         }
         @media (min-width: 870px) {
           .condition-icon {
             display: inline-block;
-            color: var(--secondary-text-color);
+            color: var(--primary-color);
             opacity: 0.9;
             margin-right: 8px;
           }
@@ -498,12 +472,6 @@ export default class HaAutomationConditionRow extends LitElement {
         .testing.pass {
           background-color: var(--success-color);
         }
-        .selected_menu_item {
-          color: var(--primary-color);
-        }
-        li[role="separator"] {
-          border-bottom-color: var(--divider-color);
-        }
       `,
     ];
   }

src/panels/config/automation/condition/ha-automation-condition.ts

@@ -1,15 +1,14 @@
-import "@material/mwc-button";
+import { mdiPlus } from "@mdi/js";
-import type { ActionDetail } from "@material/mwc-list";
+import { repeat } from "lit/directives/repeat";
-import { mdiArrowDown, mdiArrowUp, mdiDrag, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
+import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
-import type { SortableEvent } from "sortablejs";
+import type { ActionDetail } from "@material/mwc-list";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-button-menu";
 import "../../../../components/ha-svg-icon";
+import "../../../../components/ha-button-menu";
 import type { Condition } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
 import "./ha-automation-condition-row";
@@ -17,14 +16,6 @@ import type HaAutomationConditionRow from "./ha-automation-condition-row";
 // Uncommenting these and this element doesn't load
 // import "./types/ha-automation-condition-not";
 // import "./types/ha-automation-condition-or";
-import { stringCompare } from "../../../../common/string/compare";
-import type { LocalizeFunc } from "../../../../common/translations/localize";
-import type { HaSelect } from "../../../../components/ha-select";
-import { CONDITION_TYPES } from "../../../../data/condition";
-import {
-  loadSortable,
-  SortableInstance,
-} from "../../../../resources/sortable.ondemand";
 import "./types/ha-automation-condition-and";
 import "./types/ha-automation-condition-device";
 import "./types/ha-automation-condition-numeric_state";
@@ -34,7 +25,10 @@ import "./types/ha-automation-condition-template";
 import "./types/ha-automation-condition-time";
 import "./types/ha-automation-condition-trigger";
 import "./types/ha-automation-condition-zone";
-import { sortableStyles } from "../../../../resources/ha-sortable-style";
+import { CONDITION_TYPES } from "../../../../data/condition";
+import { stringCompare } from "../../../../common/string/compare";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
+import type { HaSelect } from "../../../../components/ha-select";
 
 @customElement("ha-automation-condition")
 export default class HaAutomationCondition extends LitElement {
@@ -42,23 +36,11 @@ export default class HaAutomationCondition extends LitElement {
 
   @property() public conditions!: Condition[];
 
-  @property({ type: Boolean }) public reOrderMode = false;
-
   private _focusLastConditionOnChange = false;
 
   private _conditionKeys = new WeakMap<Condition, string>();
 
-  private _sortable?: SortableInstance;
-
   protected updated(changedProperties: PropertyValues) {
-    if (changedProperties.has("reOrderMode")) {
-      if (this.reOrderMode) {
-        this._createSortable();
-      } else {
-        this._destroySortable();
-      }
-    }
-
     if (!changedProperties.has("conditions")) {
       return;
     }
@@ -100,53 +82,19 @@ export default class HaAutomationCondition extends LitElement {
       return html``;
     }
     return html`
-      <div class="conditions">
+      ${repeat(
-        ${repeat(
+        this.conditions,
-          this.conditions,
+        (condition) => this._getKey(condition),
-          (condition) => this._getKey(condition),
+        (cond, idx) => html`
-          (cond, idx) => html`
+          <ha-automation-condition-row
-            <ha-automation-condition-row
+            .index=${idx}
-              .index=${idx}
+            .condition=${cond}
-              .totalConditions=${this.conditions.length}
+            @duplicate=${this._duplicateCondition}
-              .condition=${cond}
+            @value-changed=${this._conditionChanged}
-              .hideMenu=${this.reOrderMode}
+            .hass=${this.hass}
-              .reOrderMode=${this.reOrderMode}
+          ></ha-automation-condition-row>
-              @duplicate=${this._duplicateCondition}
+        `
-              @move-condition=${this._move}
+      )}
-              @value-changed=${this._conditionChanged}
-              .hass=${this.hass}
-            >
-              ${this.reOrderMode
-                ? html`
-                    <ha-icon-button
-                      .index=${idx}
-                      slot="icons"
-                      .label=${this.hass.localize(
-                        "ui.panel.config.automation.editor.move_up"
-                      )}
-                      .path=${mdiArrowUp}
-                      @click=${this._moveUp}
-                      .disabled=${idx === 0}
-                    ></ha-icon-button>
-                    <ha-icon-button
-                      .index=${idx}
-                      slot="icons"
-                      .label=${this.hass.localize(
-                        "ui.panel.config.automation.editor.move_down"
-                      )}
-                      .path=${mdiArrowDown}
-                      @click=${this._moveDown}
-                      .disabled=${idx === this.conditions.length - 1}
-                    ></ha-icon-button>
-                    <div class="handle" slot="icons">
-                      <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
-                    </div>
-                  `
-                : ""}
-            </ha-automation-condition-row>
-          `
-        )}
-      </div>
       <ha-button-menu fixed @action=${this._addCondition}>
         <mwc-button
           slot="trigger"
@@ -168,36 +116,6 @@ export default class HaAutomationCondition extends LitElement {
     `;
   }
 
-  private async _createSortable() {
-    const Sortable = await loadSortable();
-    this._sortable = new Sortable(
-      this.shadowRoot!.querySelector(".conditions")!,
-      {
-        animation: 150,
-        fallbackClass: "sortable-fallback",
-        handle: ".handle",
-        onChoose: (evt: SortableEvent) => {
-          (evt.item as any).placeholder =
-            document.createComment("sort-placeholder");
-          evt.item.after((evt.item as any).placeholder);
-        },
-        onEnd: (evt: SortableEvent) => {
-          // put back in original location
-          if ((evt.item as any).placeholder) {
-            (evt.item as any).placeholder.replaceWith(evt.item);
-            delete (evt.item as any).placeholder;
-          }
-          this._dragged(evt);
-        },
-      }
-    );
-  }
-
-  private _destroySortable() {
-    this._sortable?.destroy();
-    this._sortable = undefined;
-  }
-
   private _getKey(condition: Condition) {
     if (!this._conditionKeys.has(condition)) {
       this._conditionKeys.set(condition, Math.random().toString());
@@ -224,30 +142,6 @@ export default class HaAutomationCondition extends LitElement {
     fireEvent(this, "value-changed", { value: conditions });
   }
 
-  private _moveUp(ev) {
-    const index = (ev.target as any).index;
-    const newIndex = index - 1;
-    this._move(index, newIndex);
-  }
-
-  private _moveDown(ev) {
-    const index = (ev.target as any).index;
-    const newIndex = index + 1;
-    this._move(index, newIndex);
-  }
-
-  private _dragged(ev: SortableEvent): void {
-    if (ev.oldIndex === ev.newIndex) return;
-    this._move(ev.oldIndex!, ev.newIndex!);
-  }
-
-  private _move(index: number, newIndex: number) {
-    const conditions = this.conditions.concat();
-    const condition = conditions.splice(index, 1)[0];
-    conditions.splice(newIndex, 0, condition);
-    fireEvent(this, "value-changed", { value: conditions });
-  }
-
   private _conditionChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const conditions = [...this.conditions];
@@ -292,27 +186,16 @@ export default class HaAutomationCondition extends LitElement {
   );
 
   static get styles(): CSSResultGroup {
-    return [
+    return css`
-      sortableStyles,
+      ha-automation-condition-row {
-      css`
+        display: block;
-        ha-automation-condition-row {
+        margin-bottom: 16px;
-          display: block;
+        scroll-margin-top: 48px;
-          margin-bottom: 16px;
+      }
-          scroll-margin-top: 48px;
+      ha-svg-icon {
-        }
+        height: 20px;
-        ha-svg-icon {
+      }
-          height: 20px;
+    `;
-        }
-        .handle {
-          cursor: move;
-          padding: 12px;
-        }
-        .handle ha-svg-icon {
-          pointer-events: none;
-          height: 24px;
-        }
-      `,
-    ];
   }
 }
 

src/panels/config/automation/condition/types/ha-automation-condition-logical.ts

@@ -12,8 +12,6 @@ export class HaLogicalCondition extends LitElement implements ConditionElement {
 
   @property({ attribute: false }) public condition!: LogicalCondition;
 
-  @property({ type: Boolean }) public reOrderMode = false;
-
   public static get defaultConfig() {
     return {
       conditions: [],
@@ -26,7 +24,6 @@ export class HaLogicalCondition extends LitElement implements ConditionElement {
         .conditions=${this.condition.conditions || []}
         @value-changed=${this._valueChanged}
         .hass=${this.hass}
-        .reOrderMode=${this.reOrderMode}
       ></ha-automation-condition>
     `;
   }

src/panels/config/automation/ha-automation-editor.ts

@@ -1,17 +1,14 @@
-import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import {
   mdiCheck,
   mdiContentDuplicate,
   mdiContentSave,
-  mdiDebugStepOver,
   mdiDelete,
   mdiDotsVertical,
-  mdiInformationOutline,
+  mdiPencil,
   mdiPlay,
   mdiPlayCircleOutline,
   mdiRenameBox,
-  mdiSort,
   mdiStopCircleOutline,
   mdiTransitConnection,
 } from "@mdi/js";
@@ -26,12 +23,10 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { property, query, state } from "lit/decorators";
+import { property, state, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
-import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
@@ -45,26 +40,24 @@ import {
   deleteAutomation,
   getAutomationConfig,
   getAutomationEditorInitData,
-  saveAutomationConfig,
   showAutomationEditor,
   triggerAutomationActions,
 } from "../../../data/automation";
 import {
   showAlertDialog,
   showConfirmationDialog,
+  showPromptDialog,
 } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/ha-app-layout";
-import "../../../layouts/hass-subpage";
+import "../../../layouts/hass-tabs-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { showToast } from "../../../util/toast";
 import "../ha-config-section";
-import { showAutomationModeDialog } from "./automation-mode-dialog/show-dialog-automation-mode";
+import { configSections } from "../ha-panel-config";
-import { showAutomationRenameDialog } from "./automation-rename-dialog/show-dialog-automation-rename";
 import "./blueprint-automation-editor";
 import "./manual-automation-editor";
-import type { HaManualAutomationEditor } from "./manual-automation-editor";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -104,10 +97,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
   @state() private _mode: "gui" | "yaml" = "gui";
 
-  @query("ha-yaml-editor", true) private _yamlEditor?: HaYamlEditor;
+  @query("ha-yaml-editor", true) private _editor?: HaYamlEditor;
-
-  @query("manual-automation-editor")
-  private _manualEditor?: HaManualAutomationEditor;
 
   private _configSubscriptions: Record<
     string,
@@ -121,27 +111,13 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
       ? this.hass.states[this._entityId]
       : undefined;
     return html`
-      <hass-subpage
+      <hass-tabs-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
         .backCallback=${this._backTapped}
-        .header=${!this._config
+        .tabs=${configSections.automations}
-          ? ""
-          : this._config.alias ||
-            this.hass.localize(
-              "ui.panel.config.automation.editor.default_name"
-            )}
       >
-        ${this._config?.id && !this.narrow
-          ? html`
-              <mwc-button @click=${this._showTrace} slot="toolbar-icon">
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.show_trace"
-                )}
-              </mwc-button>
-            `
-          : ""}
         <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
           <ha-icon-button
             slot="trigger"
@@ -149,18 +125,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             .path=${mdiDotsVertical}
           ></ha-icon-button>
 
-          <mwc-list-item
-            graphic="icon"
-            .disabled=${!stateObj}
-            @click=${this._showInfo}
-          >
-            ${this.hass.localize("ui.panel.config.automation.editor.show_info")}
-            <ha-svg-icon
-              slot="graphic"
-              .path=${mdiInformationOutline}
-            ></ha-svg-icon>
-          </mwc-list-item>
-
           <mwc-list-item
             graphic="icon"
             .disabled=${!stateObj}
@@ -170,9 +134,15 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             <ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
           </mwc-list-item>
 
-          ${stateObj && this._config && this.narrow
+          ${stateObj
-            ? html`<a href="/config/automation/trace/${this._config.id}">
+            ? html`<a
-                <mwc-list-item graphic="icon">
+                href="/config/automation/trace/${this._config
+                  ? this._config.id
+                  : ""}"
+                target="_blank"
+                .disabled=${!stateObj}
+              >
+                <mwc-list-item graphic="icon" .disabled=${!stateObj}>
                   ${this.hass.localize(
                     "ui.panel.config.automation.editor.show_trace"
                   )}
@@ -184,45 +154,11 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
               </a>`
             : ""}
 
-          <mwc-list-item
+          <mwc-list-item graphic="icon" @click=${this._promptAutomationAlias}>
-            graphic="icon"
-            @click=${this._promptAutomationAlias}
-            .disabled=${!this.automationId || this._mode === "yaml"}
-          >
             ${this.hass.localize("ui.panel.config.automation.editor.rename")}
             <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
           </mwc-list-item>
 
-          ${this._config && !("use_blueprint" in this._config)
-            ? html`
-                <mwc-list-item
-                  graphic="icon"
-                  @click=${this._promptAutomationMode}
-                  .disabled=${this._mode === "yaml"}
-                >
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.change_mode"
-                  )}
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiDebugStepOver}
-                  ></ha-svg-icon>
-                </mwc-list-item>
-              `
-            : ""}
-          ${this._config && !("use_blueprint" in this._config)
-            ? html`<mwc-list-item
-                graphic="icon"
-                @click=${this._toggleReOrderMode}
-                .disabled=${this._mode === "yaml"}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.re_order"
-                )}
-                <ha-svg-icon slot="graphic" .path=${mdiSort}></ha-svg-icon>
-              </mwc-list-item>`
-            : ""}
-
           <mwc-list-item
             .disabled=${!this.automationId}
             graphic="icon"
@@ -265,12 +201,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             .disabled=${!stateObj}
             @click=${this._toggle}
           >
-            ${stateObj?.state === "off"
+            ${!stateObj || stateObj.state === "off"
               ? this.hass.localize("ui.panel.config.automation.editor.enable")
               : this.hass.localize("ui.panel.config.automation.editor.disable")}
             <ha-svg-icon
               slot="graphic"
-              .path=${stateObj?.state === "off"
+              .path=${!stateObj || stateObj.state === "off"
                 ? mdiPlayCircleOutline
                 : mdiStopCircleOutline}
             ></ha-svg-icon>
@@ -301,48 +237,70 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                 @subscribe-automation-config=${this._subscribeAutomationConfig}
               >
                 ${this._errors
-                  ? html`<ha-alert alert-type="error">
+                  ? html`<div class="errors">${this._errors}</div>`
-                      ${this._errors}
-                    </ha-alert>`
                   : ""}
                 ${this._mode === "gui"
-                  ? "use_blueprint" in this._config
+                  ? html`
-                    ? html`
+                      ${this.narrow
-                        <blueprint-automation-editor
+                        ? html`<span slot="header"
-                          .hass=${this.hass}
+                            >${this._config!.alias ||
-                          .narrow=${this.narrow}
+                            this.hass.localize(
-                          .isWide=${this.isWide}
+                              "ui.panel.config.automation.editor.default_name"
-                          .stateObj=${stateObj}
+                            )}</span
-                          .config=${this._config}
+                          >`
-                          @value-changed=${this._valueChanged}
+                        : html`
-                        ></blueprint-automation-editor>
+                            <div class="header-name">
-                      `
+                              <h1>
-                    : html`
+                                ${this._config!.alias ||
-                        <manual-automation-editor
+                                this.hass.localize(
-                          .hass=${this.hass}
+                                  "ui.panel.config.automation.editor.default_name"
-                          .narrow=${this.narrow}
+                                )}
-                          .isWide=${this.isWide}
+                              </h1>
-                          .stateObj=${stateObj}
+                              <ha-icon-button
-                          .config=${this._config}
+                                .path=${mdiPencil}
-                          @value-changed=${this._valueChanged}
+                                @click=${this._promptAutomationAlias}
-                        ></manual-automation-editor>
+                                .label=${this.hass.localize(
-                      `
+                                  "ui.panel.config.automation.editor.rename"
+                                )}
+                              ></ha-icon-button>
+                            </div>
+                          `}
+                      ${"use_blueprint" in this._config
+                        ? html`
+                            <blueprint-automation-editor
+                              .hass=${this.hass}
+                              .narrow=${this.narrow}
+                              .isWide=${this.isWide}
+                              .stateObj=${stateObj}
+                              .config=${this._config}
+                              @value-changed=${this._valueChanged}
+                            ></blueprint-automation-editor>
+                          `
+                        : html`
+                            <manual-automation-editor
+                              .hass=${this.hass}
+                              .narrow=${this.narrow}
+                              .isWide=${this.isWide}
+                              .stateObj=${stateObj}
+                              .config=${this._config}
+                              @value-changed=${this._valueChanged}
+                            ></manual-automation-editor>
+                          `}
+                    `
                   : this._mode === "yaml"
                   ? html`
-                      ${stateObj?.state === "off"
+                      ${!this.narrow
                         ? html`
-                            <ha-alert alert-type="info">
+                            <ha-card outlined>
-                              ${this.hass.localize(
+                              <div class="card-header">
-                                "ui.panel.config.automation.editor.disabled"
+                                ${this._config.alias ||
-                              )}
+                                this.hass.localize(
-                              <mwc-button slot="action" @click=${this._toggle}>
+                                  "ui.panel.config.automation.editor.default_name"
-                                ${this.hass.localize(
-                                  "ui.panel.config.automation.editor.enable"
                                 )}
-                              </mwc-button>
+                              </div>
-                            </ha-alert>
+                            </ha-card>
                           `
-                        : ""}
+                        : ``}
                       <ha-yaml-editor
                         .hass=${this.hass}
                         .defaultValue=${this._preprocessYaml()}
@@ -371,7 +329,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         >
           <ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
         </ha-fab>
-      </hass-subpage>
+      </hass-tabs-subpage>
     `;
   }
 
@@ -450,7 +408,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
       this._dirty = false;
       this._config = config;
     } catch (err: any) {
-      await showAlertDialog(this, {
+      showAlertDialog(this, {
         text:
           err.status_code === 404
             ? this.hass.localize(
@@ -461,8 +419,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                 "err_no",
                 err.status_code
               ),
-      });
+      }).then(() => history.back());
-      history.back();
     }
   }
 
@@ -473,22 +430,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     this._errors = undefined;
   }
 
-  private _showInfo() {
-    if (!this.hass || !this._entityId) {
-      return;
-    }
-    fireEvent(this, "hass-more-info", { entityId: this._entityId });
-  }
-
-  private async _showTrace() {
-    if (this._config?.id) {
-      const result = await this.confirmUnsavedChanged();
-      if (result) {
-        navigate(`/config/automation/trace/${this._config.id}`);
-      }
-    }
-  }
-
   private _runActions() {
     if (!this.hass || !this._entityId) {
       return;
@@ -511,17 +452,19 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
   }
 
   private _preprocessYaml() {
-    if (!this._config) {
+    const cleanConfig = this._config;
+    if (!cleanConfig) {
       return {};
     }
-    const cleanConfig: AutomationConfig = { ...this._config };
+
     delete cleanConfig.id;
+
     return cleanConfig;
   }
 
   private async _copyYaml(): Promise<void> {
-    if (this._yamlEditor?.yaml) {
+    if (this._editor?.yaml) {
-      await copyToClipboard(this._yamlEditor.yaml);
+      await copyToClipboard(this._editor.yaml);
       showToast(this, {
         message: this.hass.localize("ui.common.copied_clipboard"),
       });
@@ -533,67 +476,65 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     if (!ev.detail.isValid) {
       return;
     }
-    this._config = { id: this._config?.id, ...ev.detail.value };
+    this._config = ev.detail.value;
     this._errors = undefined;
     this._dirty = true;
   }
 
-  private async confirmUnsavedChanged(): Promise<boolean> {
+  private _backTapped = (): void => {
     if (this._dirty) {
-      return showConfirmationDialog(this, {
+      showConfirmationDialog(this, {
-        title: this.hass!.localize(
-          "ui.panel.config.automation.editor.unsaved_confirm_title"
-        ),
         text: this.hass!.localize(
-          "ui.panel.config.automation.editor.unsaved_confirm_text"
+          "ui.panel.config.automation.editor.unsaved_confirm"
         ),
         confirmText: this.hass!.localize("ui.common.leave"),
         dismissText: this.hass!.localize("ui.common.stay"),
-        destructive: true,
+        confirm: () => {
+          setTimeout(() => history.back());
+        },
       });
-    }
+    } else {
-    return true;
+      history.back();
-  }
-
-  private _backTapped = async () => {
-    const result = await this.confirmUnsavedChanged();
-    if (result) {
-      afterNextRender(() => history.back());
     }
   };
 
   private async _duplicate() {
-    const result = await this.confirmUnsavedChanged();
+    if (this._dirty) {
-    if (result) {
+      if (
-      showAutomationEditor({
+        !(await showConfirmationDialog(this, {
-        ...this._config,
+          text: this.hass!.localize(
-        id: undefined,
+            "ui.panel.config.automation.editor.unsaved_confirm"
-        alias: undefined,
+          ),
-      });
+          confirmText: this.hass!.localize("ui.common.leave"),
+          dismissText: this.hass!.localize("ui.common.stay"),
+        }))
+      ) {
+        return;
+      }
+      // Wait for dialog to complete closing
+      await new Promise((resolve) => setTimeout(resolve, 0));
     }
+    showAutomationEditor({
+      ...this._config,
+      id: undefined,
+      alias: undefined,
+    });
   }
 
   private async _deleteConfirm() {
     showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.automation.picker.delete_confirm_title"
-      ),
       text: this.hass.localize(
-        "ui.panel.config.automation.picker.delete_confirm_text",
+        "ui.panel.config.automation.picker.delete_confirm"
-        { name: this._config?.alias }
       ),
       confirmText: this.hass!.localize("ui.common.delete"),
-      destructive: true,
       dismissText: this.hass!.localize("ui.common.cancel"),
       confirm: () => this._delete(),
     });
   }
 
   private async _delete() {
-    if (this.automationId) {
+    await deleteAutomation(this.hass, this.automationId as string);
-      await deleteAutomation(this.hass, this.automationId);
+    history.back();
-      history.back();
-    }
   }
 
   private _switchUiMode() {
@@ -604,63 +545,62 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     this._mode = "yaml";
   }
 
-  private _toggleReOrderMode() {
+  private async _promptAutomationAlias(): Promise<string | null> {
-    if (this._manualEditor) {
+    const result = await showPromptDialog(this, {
-      this._manualEditor.reOrderMode = !this._manualEditor.reOrderMode;
+      title: this.hass.localize(
+        "ui.panel.config.automation.editor.automation_alias"
+      ),
+      inputLabel: this.hass.localize("ui.panel.config.automation.editor.alias"),
+      inputType: "string",
+      placeholder: this.hass.localize(
+        "ui.panel.config.automation.editor.default_name"
+      ),
+      defaultValue: this._config!.alias,
+      confirmText: this.hass.localize("ui.common.submit"),
+    });
+    if (result) {
+      this._config!.alias = result;
+      this._dirty = true;
+      this.requestUpdate();
     }
-  }
+    return result;
-
-  private async _promptAutomationAlias(): Promise<void> {
-    return new Promise((resolve) => {
-      showAutomationRenameDialog(this, {
-        config: this._config!,
-        updateAutomation: (config) => {
-          this._config = config;
-          this._dirty = true;
-          this.requestUpdate();
-          resolve();
-        },
-        onClose: () => resolve(),
-      });
-    });
-  }
-
-  private async _promptAutomationMode(): Promise<void> {
-    return new Promise((resolve) => {
-      showAutomationModeDialog(this, {
-        config: this._config!,
-        updateAutomation: (config) => {
-          this._config = config;
-          this._dirty = true;
-          this.requestUpdate();
-          resolve();
-        },
-        onClose: () => resolve(),
-      });
-    });
   }
 
   private async _saveAutomation(): Promise<void> {
     const id = this.automationId || String(Date.now());
-    if (!this.automationId) {
+    if (!this._config!.alias) {
-      await this._promptAutomationAlias();
+      const alias = await this._promptAutomationAlias();
+      if (!alias) {
+        showAlertDialog(this, {
+          text: this.hass.localize(
+            "ui.panel.config.automation.editor.missing_name"
+          ),
+        });
+        return;
+      }
+      this._config!.alias = alias;
     }
 
-    try {
+    this.hass!.callApi(
-      await saveAutomationConfig(this.hass, id, this._config!);
+      "POST",
-    } catch (errors: any) {
+      "config/automation/config/" + id,
-      this._errors = errors.body.message || errors.error || errors.body;
+      this._config
-      showToast(this, {
+    ).then(
-        message: errors.body.message || errors.error || errors.body,
+      () => {
-      });
+        this._dirty = false;
-      throw errors;
-    }
 
-    this._dirty = false;
+        if (!this.automationId) {
-
+          navigate(`/config/automation/edit/${id}`, { replace: true });
-    if (!this.automationId) {
+        }
-      navigate(`/config/automation/edit/${id}`, { replace: true });
+      },
-    }
+      (errors) => {
+        this._errors = errors.body.message || errors.error || errors.body;
+        showToast(this, {
+          message: errors.body.message || errors.error || errors.body,
+        });
+        throw errors;
+      }
+    );
   }
 
   private _subscribeAutomationConfig(ev) {
@@ -683,6 +623,11 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         ha-card {
           overflow: hidden;
         }
+        .errors {
+          padding: 20px;
+          font-weight: bold;
+          color: var(--error-color);
+        }
         .content {
           padding-bottom: 20px;
         }
@@ -692,8 +637,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
           flex-direction: column;
           padding-bottom: 0;
         }
-        manual-automation-editor,
+        manual-automation-editor {
-        blueprint-automation-editor {
           margin: 0 auto;
           max-width: 1040px;
           padding: 28px 20px 0;
@@ -734,6 +678,15 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         }
         h1 {
           margin: 0;
+          font-family: var(--paper-font-headline_-_font-family);
+          -webkit-font-smoothing: var(
+            --paper-font-headline_-_-webkit-font-smoothing
+          );
+          font-size: var(--paper-font-headline_-_font-size);
+          font-weight: var(--paper-font-headline_-_font-weight);
+          letter-spacing: var(--paper-font-headline_-_letter-spacing);
+          line-height: var(--paper-font-headline_-_line-height);
+          opacity: var(--dark-primary-opacity);
         }
         .header-name {
           display: flex;

src/panels/config/automation/ha-automation-picker.ts

@@ -1,16 +1,4 @@
-import {
+import { mdiHelpCircle, mdiInformationOutline, mdiPlus } from "@mdi/js";
-  mdiCancel,
-  mdiContentDuplicate,
-  mdiDelete,
-  mdiHelpCircle,
-  mdiInformationOutline,
-  mdiPlay,
-  mdiPlayCircleOutline,
-  mdiPlus,
-  mdiStopCircleOutline,
-  mdiTransitConnection,
-} from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -25,22 +13,11 @@ import type {
   RowClickedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-button-related-filter-menu";
-import "../../../components/ha-chip";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-icon-overflow-menu";
 import "../../../components/ha-svg-icon";
-import {
+import type { AutomationEntity } from "../../../data/automation";
-  AutomationEntity,
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
-  deleteAutomation,
-  duplicateAutomation,
-  getAutomationConfig,
-  triggerAutomationActions,
-} from "../../../data/automation";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
@@ -86,7 +63,6 @@ class HaAutomationPicker extends LitElement {
         ...automation,
         name: computeStateName(automation),
         last_triggered: automation.attributes.last_triggered || undefined,
-        disabled: automation.state === "off",
       }));
     }
   );
@@ -147,108 +123,22 @@ class HaAutomationPicker extends LitElement {
           },
         };
       }
-
-      columns.disabled = this.narrow
-        ? {
-            title: "",
-            template: (disabled: boolean) =>
-              disabled
-                ? html`
-                    <paper-tooltip animation-delay="0" position="left">
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.picker.disabled"
-                      )}
-                    </paper-tooltip>
-                    <ha-svg-icon
-                      .path=${mdiCancel}
-                      style="color: var(--secondary-text-color)"
-                    ></ha-svg-icon>
-                  `
-                : "",
-          }
-        : {
-            width: "20%",
-            title: "",
-            template: (disabled: boolean) =>
-              disabled
-                ? html`
-                    <ha-chip>
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.picker.disabled"
-                      )}
-                    </ha-chip>
-                  `
-                : "",
-          };
-
       columns.actions = {
         title: "",
-        width: this.narrow ? undefined : "10%",
+        label: this.hass.localize(
-        type: "overflow-menu",
+          "ui.panel.config.automation.picker.headers.actions"
-        template: (_: string, automation: any) =>
+        ),
-          html`
+        type: "icon-button",
-            <ha-icon-overflow-menu
+        template: (_info, automation: any) => html`
-              .hass=${this.hass}
+          <ha-icon-button
-              narrow
+            .automation=${automation}
-              .items=${[
+            .label=${this.hass.localize(
-                {
+              "ui.panel.config.automation.picker.headers.actions"
-                  path: mdiInformationOutline,
+            )}
-                  label: this.hass.localize(
+            .path=${mdiInformationOutline}
-                    "ui.panel.config.automation.editor.show_info"
+            @click=${this._showInfo}
-                  ),
+          ></ha-icon-button>
-                  action: () => this._showInfo(automation),
+        `,
-                },
-                {
-                  path: mdiPlay,
-                  label: this.hass.localize(
-                    "ui.panel.config.automation.editor.run"
-                  ),
-                  action: () => this._runActions(automation),
-                },
-                {
-                  path: mdiTransitConnection,
-                  label: this.hass.localize(
-                    "ui.panel.config.automation.editor.show_trace"
-                  ),
-                  action: () => this._showTrace(automation),
-                },
-                {
-                  divider: true,
-                },
-                {
-                  path: mdiContentDuplicate,
-                  label: this.hass.localize(
-                    "ui.panel.config.automation.picker.duplicate"
-                  ),
-                  action: () => this.duplicate(automation),
-                },
-                {
-                  path:
-                    automation.state === "off"
-                      ? mdiPlayCircleOutline
-                      : mdiStopCircleOutline,
-                  label:
-                    automation.state === "off"
-                      ? this.hass.localize(
-                          "ui.panel.config.automation.editor.enable"
-                        )
-                      : this.hass.localize(
-                          "ui.panel.config.automation.editor.disable"
-                        ),
-                  action: () => this._toggle(automation),
-                },
-                {
-                  label: this.hass.localize(
-                    "ui.panel.config.automation.picker.delete"
-                  ),
-                  path: mdiDelete,
-                  action: () => this._deleteConfirm(automation),
-                  warning: true,
-                },
-              ]}
-            >
-            </ha-icon-overflow-menu>
-          `,
       };
       return columns;
     }
@@ -320,83 +210,12 @@ class HaAutomationPicker extends LitElement {
     this._filterValue = undefined;
   }
 
-  private _showInfo(automation: any) {
+  private _showInfo(ev) {
+    ev.stopPropagation();
+    const automation = ev.currentTarget.automation;
     fireEvent(this, "hass-more-info", { entityId: automation.entity_id });
   }
 
-  private _runActions(automation: any) {
-    triggerAutomationActions(this.hass, automation.entity_id);
-  }
-
-  private _showTrace(automation: any) {
-    navigate(`/config/automation/trace/${automation.attributes.id}`);
-  }
-
-  private async _toggle(automation): Promise<void> {
-    const service = automation.state === "off" ? "turn_on" : "turn_off";
-    await this.hass.callService("automation", service, {
-      entity_id: automation.entity_id,
-    });
-  }
-
-  private async _deleteConfirm(automation) {
-    showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.automation.picker.delete_confirm_title"
-      ),
-      text: this.hass.localize(
-        "ui.panel.config.automation.picker.delete_confirm_text",
-        { name: automation.name }
-      ),
-      confirmText: this.hass!.localize("ui.common.delete"),
-      dismissText: this.hass!.localize("ui.common.cancel"),
-      confirm: () => this._delete(automation),
-      destructive: true,
-    });
-  }
-
-  private async _delete(automation) {
-    try {
-      await deleteAutomation(this.hass, automation.attributes.id);
-    } catch (err: any) {
-      await showAlertDialog(this, {
-        text:
-          err.status_code === 400
-            ? this.hass.localize(
-                "ui.panel.config.automation.editor.load_error_not_deletable"
-              )
-            : this.hass.localize(
-                "ui.panel.config.automation.editor.load_error_unknown",
-                "err_no",
-                err.status_code
-              ),
-      });
-    }
-  }
-
-  private async duplicate(automation) {
-    try {
-      const config = await getAutomationConfig(
-        this.hass,
-        automation.attributes.id
-      );
-      duplicateAutomation(config);
-    } catch (err: any) {
-      await showAlertDialog(this, {
-        text:
-          err.status_code === 404
-            ? this.hass.localize(
-                "ui.panel.config.automation.editor.load_error_not_duplicable"
-              )
-            : this.hass.localize(
-                "ui.panel.config.automation.editor.load_error_unknown",
-                "err_no",
-                err.status_code
-              ),
-      });
-    }
-  }
-
   private _showHelp() {
     showAlertDialog(this, {
       title: this.hass.localize("ui.panel.config.automation.caption"),
@@ -423,7 +242,7 @@ class HaAutomationPicker extends LitElement {
     );
 
     if (automation?.attributes.id) {
-      navigate(`/config/automation/edit/${automation.attributes.id}`);
+      navigate(`/config/automation/edit/${automation?.attributes.id}`);
     }
   }
 

src/panels/config/automation/ha-automation-trace.ts

@@ -1,7 +1,5 @@
 import {
-  mdiDotsVertical,
   mdiDownload,
-  mdiInformationOutline,
   mdiPencil,
   mdiRayEndArrow,
   mdiRayStartArrow,
@@ -13,8 +11,6 @@ import { classMap } from "lit/directives/class-map";
 import { repeat } from "lit/directives/repeat";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
-import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-button-menu";
 import "../../../components/ha-icon-button";
 import "../../../components/trace/ha-trace-blueprint-config";
 import "../../../components/trace/ha-trace-config";
@@ -36,9 +32,9 @@ import {
   loadTraces,
 } from "../../../data/trace";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
-import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
+import { configSections } from "../ha-panel-config";
 
 @customElement("ha-automation-trace")
 export class HaAutomationTrace extends LitElement {
@@ -94,116 +90,89 @@ export class HaAutomationTrace extends LitElement {
       </div>`;
     }
 
+    const actionButtons = html`
+      <ha-icon-button
+        .label=${this.hass.localize("ui.panel.config.automation.trace.refresh")}
+        .path=${mdiRefresh}
+        @click=${this._refreshTraces}
+      ></ha-icon-button>
+      <ha-icon-button
+        .label=${this.hass.localize(
+          "ui.panel.config.automation.trace.download_trace"
+        )}
+        .path=${mdiDownload}
+        .disabled=${!this._trace}
+        @click=${this._downloadTrace}
+      ></ha-icon-button>
+    `;
+
     return html`
       ${devButtons}
-      <hass-subpage .hass=${this.hass} .narrow=${this.narrow} .header=${title}>
+      <hass-tabs-subpage
-        ${!this.narrow && stateObj?.attributes.id
+        .hass=${this.hass}
-          ? html`
+        .narrow=${this.narrow}
-              <a
+        .route=${this.route}
-                class="trace-link"
+        .tabs=${configSections.automations}
-                href="/config/automation/edit/${stateObj.attributes.id}"
+      >
-                slot="toolbar-icon"
+        ${this.narrow
-              >
+          ? html`<span slot="header">${title}</span>
-                <mwc-button>
+              <div slot="toolbar-icon">${actionButtons}</div>`
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.trace.edit_automation"
-                  )}
-                </mwc-button>
-              </a>
-            `
           : ""}
-        <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
+        <div class="toolbar">
-          <ha-icon-button
+          ${!this.narrow
-            slot="trigger"
+            ? html`<div>
-            .label=${this.hass.localize("ui.common.menu")}
+                ${title}
-            .path=${mdiDotsVertical}
-          ></ha-icon-button>
-
-          <mwc-list-item
-            graphic="icon"
-            .disabled=${!stateObj}
-            @click=${this._showInfo}
-          >
-            ${this.hass.localize("ui.panel.config.automation.editor.show_info")}
-            <ha-svg-icon
-              slot="graphic"
-              .path=${mdiInformationOutline}
-            ></ha-svg-icon>
-          </mwc-list-item>
-
-          ${stateObj?.attributes.id && this.narrow
-            ? html`
                 <a
-                  class="trace-link"
+                  class="linkButton"
-                  href="/config/automation/edit/${stateObj.attributes.id}"
+                  href="/config/automation/edit/${this.automationId}"
                 >
-                  <mwc-list-item graphic="icon">
+                  <ha-icon-button
-                    ${this.hass.localize(
+                    .label=${this.hass!.localize(
                       "ui.panel.config.automation.trace.edit_automation"
                     )}
-                    <ha-svg-icon
+                    .path=${mdiPencil}
-                      slot="graphic"
+                    tabindex="-1"
-                      .path=${mdiPencil}
+                  ></ha-icon-button>
-                    ></ha-svg-icon>
-                  </mwc-list-item>
                 </a>
-              `
+              </div>`
             : ""}
-
-          <li divider role="separator"></li>
-
-          <mwc-list-item graphic="icon" @click=${this._refreshTraces}>
-            ${this.hass.localize("ui.panel.config.automation.trace.refresh")}
-            <ha-svg-icon slot="graphic" .path=${mdiRefresh}></ha-svg-icon>
-          </mwc-list-item>
-
-          <mwc-list-item
-            graphic="icon"
-            .disabled=${!this._trace}
-            @click=${this._downloadTrace}
-          >
-            ${this.hass.localize(
-              "ui.panel.config.automation.trace.download_trace"
-            )}
-            <ha-svg-icon slot="graphic" .path=${mdiDownload}></ha-svg-icon>
-          </mwc-list-item>
-        </ha-button-menu>
-
-        <div class="toolbar">
           ${this._traces && this._traces.length > 0
             ? html`
-                <ha-icon-button
+                <div>
-                  .label=${this.hass!.localize(
+                  <ha-icon-button
-                    "ui.panel.config.automation.trace.older_trace"
+                    .label=${this.hass!.localize(
-                  )}
+                      "ui.panel.config.automation.trace.older_trace"
-                  .path=${mdiRayEndArrow}
+                    )}
-                  .disabled=${this._traces[this._traces.length - 1].run_id ===
+                    .path=${mdiRayEndArrow}
-                  this._runId}
+                    .disabled=${this._traces[this._traces.length - 1].run_id ===
-                  @click=${this._pickOlderTrace}
+                    this._runId}
-                ></ha-icon-button>
+                    @click=${this._pickOlderTrace}
-                <select .value=${this._runId} @change=${this._pickTrace}>
+                  ></ha-icon-button>
-                  ${repeat(
+                  <select .value=${this._runId} @change=${this._pickTrace}>
-                    this._traces,
+                    ${repeat(
-                    (trace) => trace.run_id,
+                      this._traces,
-                    (trace) =>
+                      (trace) => trace.run_id,
-                      html`<option value=${trace.run_id}>
+                      (trace) =>
-                        ${formatDateTimeWithSeconds(
+                        html`<option value=${trace.run_id}>
-                          new Date(trace.timestamp.start),
+                          ${formatDateTimeWithSeconds(
-                          this.hass.locale
+                            new Date(trace.timestamp.start),
-                        )}
+                            this.hass.locale
-                      </option>`
+                          )}
-                  )}
+                        </option>`
-                </select>
+                    )}
-                <ha-icon-button
+                  </select>
-                  .label=${this.hass!.localize(
+                  <ha-icon-button
-                    "ui.panel.config.automation.trace.newer_trace"
+                    .label=${this.hass!.localize(
-                  )}
+                      "ui.panel.config.automation.trace.newer_trace"
-                  .path=${mdiRayStartArrow}
+                    )}
-                  .disabled=${this._traces[0].run_id === this._runId}
+                    .path=${mdiRayStartArrow}
-                  @click=${this._pickNewerTrace}
+                    .disabled=${this._traces[0].run_id === this._runId}
-                ></ha-icon-button>
+                    @click=${this._pickNewerTrace}
+                  ></ha-icon-button>
+                </div>
               `
             : ""}
+          ${!this.narrow ? html`<div>${actionButtons}</div>` : ""}
         </div>
 
         ${this._traces === undefined
@@ -307,7 +276,7 @@ export class HaAutomationTrace extends LitElement {
                 </div>
               </div>
             `}
-      </hass-subpage>
+      </hass-tabs-subpage>
     `;
   }
 
@@ -488,13 +457,6 @@ export class HaAutomationTrace extends LitElement {
     }
   }
 
-  private _showInfo() {
-    if (!this.hass || !this._entityId) {
-      return;
-    }
-    fireEvent(this, "hass-more-info", { entityId: this._entityId });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -503,7 +465,7 @@ export class HaAutomationTrace extends LitElement {
         .toolbar {
           display: flex;
           align-items: center;
-          justify-content: center;
+          justify-content: space-between;
           font-size: 20px;
           height: var(--header-height);
           padding: 0 16px;
@@ -514,6 +476,15 @@ export class HaAutomationTrace extends LitElement {
           box-sizing: border-box;
         }
 
+        .toolbar > * {
+          display: flex;
+          align-items: center;
+        }
+
+        :host([narrow]) .toolbar > * {
+          display: contents;
+        }
+
         .main {
           height: calc(100% - 56px);
           display: flex;
@@ -549,9 +520,6 @@ export class HaAutomationTrace extends LitElement {
         .linkButton {
           color: var(--primary-text-color);
         }
-        .trace-link {
-          text-decoration: none;
-        }
       `,
     ];
   }

src/panels/config/automation/manual-automation-editor.ts

@@ -1,18 +1,21 @@
 import "@material/mwc-button/mwc-button";
-import { mdiHelpCircle } from "@mdi/js";
+import { mdiHelpCircle, mdiRobot } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-card";
+import "../../../components/ha-textarea";
+import "../../../components/ha-textfield";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-alert";
 import {
+  AUTOMATION_DEFAULT_MODE,
   Condition,
   ManualAutomationConfig,
   Trigger,
 } from "../../../data/automation";
-import { Action } from "../../../data/script";
+import { Action, isMaxMode, MODES } from "../../../data/script";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
@@ -32,53 +35,91 @@ export class HaManualAutomationEditor extends LitElement {
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  @property({ type: Boolean, reflect: true, attribute: "re-order-mode" })
-  public reOrderMode = false;
-
   protected render() {
     return html`
-      ${this.stateObj?.state === "off"
+      <ha-card outlined>
-        ? html`
+        ${this.stateObj && this.stateObj.state === "off"
-            <ha-alert alert-type="info">
+          ? html`<div class="disabled-bar">
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.disabled"
               )}
-              <mwc-button slot="action" @click=${this._enable}>
+            </div>`
-                ${this.hass.localize(
+          : ""}
-                  "ui.panel.config.automation.editor.enable"
+
-                )}
+        <ha-expansion-panel leftChevron>
-              </mwc-button>
+          <div slot="header">
-            </ha-alert>
+            <ha-svg-icon class="settings-icon" .path=${mdiRobot}></ha-svg-icon>
-          `
+            ${this.hass.localize(
-        : ""}
+              "ui.panel.config.automation.editor.automation_settings"
-      ${this.reOrderMode
+            )}
-        ? html`
+          </div>
-            <ha-alert
+          <div class="card-content">
-              alert-type="info"
+            <ha-textarea
-              .title=${this.hass.localize(
+              .label=${this.hass.localize(
-                "ui.panel.config.automation.editor.re_order_mode.title"
+                "ui.panel.config.automation.editor.description.label"
               )}
+              .placeholder=${this.hass.localize(
+                "ui.panel.config.automation.editor.description.placeholder"
+              )}
+              name="description"
+              autogrow
+              .value=${this.config.description || ""}
+              @change=${this._valueChanged}
+            ></ha-textarea>
+            <ha-select
+              .label=${this.hass.localize(
+                "ui.panel.config.automation.editor.modes.label"
+              )}
+              .value=${this.config.mode || AUTOMATION_DEFAULT_MODE}
+              @selected=${this._modeChanged}
+              fixedMenuPosition
+              .helper=${html`
+                <a
+                  style="color: var(--secondary-text-color)"
+                  href=${documentationUrl(this.hass, "/docs/automation/modes/")}
+                  target="_blank"
+                  rel="noreferrer"
+                  >${this.hass.localize(
+                    "ui.panel.config.automation.editor.modes.learn_more"
+                  )}</a
+                >
+              `}
             >
-              ${this.hass.localize(
+              ${MODES.map(
-                "ui.panel.config.automation.editor.re_order_mode.description"
+                (mode) => html`
+                  <mwc-list-item .value=${mode}>
+                    ${this.hass.localize(
+                      `ui.panel.config.automation.editor.modes.${mode}`
+                    ) || mode}
+                  </mwc-list-item>
+                `
               )}
-              <mwc-button slot="action" @click=${this._exitReOrderMode}>
+            </ha-select>
-                ${this.hass.localize(
+            ${this.config.mode && isMaxMode(this.config.mode)
-                  "ui.panel.config.automation.editor.re_order_mode.exit"
+              ? html`
-                )}
+                  <br /><ha-textfield
-              </mwc-button>
+                    .label=${this.hass.localize(
-            </ha-alert>
+                      `ui.panel.config.automation.editor.max.${this.config.mode}`
-          `
+                    )}
-        : ""}
+                    type="number"
-      ${this.config.description
+                    name="max"
-        ? html`<p class="description">${this.config.description}</p>`
+                    .value=${this.config.max || "10"}
-        : ""}
+                    @change=${this._valueChanged}
+                    class="max"
+                  >
+                  </ha-textfield>
+                `
+              : html``}
+          </div>
+        </ha-expansion-panel>
+      </ha-card>
+
       <div class="header">
-        <h2 id="triggers-heading" class="name">
+        <div class="name">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.header"
           )}
-        </h2>
+        </div>
         <a
           href=${documentationUrl(this.hass, "/docs/automation/trigger/")}
           target="_blank"
@@ -94,20 +135,17 @@ export class HaManualAutomationEditor extends LitElement {
       </div>
 
       <ha-automation-trigger
-        role="region"
-        aria-labelledby="triggers-heading"
         .triggers=${this.config.trigger}
         @value-changed=${this._triggerChanged}
         .hass=${this.hass}
-        .reOrderMode=${this.reOrderMode}
       ></ha-automation-trigger>
 
       <div class="header">
-        <h2 id="conditions-heading" class="name">
+        <div class="name">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.conditions.header"
           )}
-        </h2>
+        </div>
         <a
           href=${documentationUrl(this.hass, "/docs/automation/condition/")}
           target="_blank"
@@ -123,50 +161,80 @@ export class HaManualAutomationEditor extends LitElement {
       </div>
 
       <ha-automation-condition
-        role="region"
-        aria-labelledby="conditions-heading"
         .conditions=${this.config.condition || []}
         @value-changed=${this._conditionChanged}
         .hass=${this.hass}
-        .reOrderMode=${this.reOrderMode}
       ></ha-automation-condition>
 
       <div class="header">
-        <h2 id="actions-heading" class="name">
+        <div class="name">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.actions.header"
           )}
-        </h2>
-        <div>
-          <a
-            href=${documentationUrl(this.hass, "/docs/automation/action/")}
-            target="_blank"
-            rel="noreferrer"
-          >
-            <ha-icon-button
-              .path=${mdiHelpCircle}
-              .label=${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.learn_more"
-              )}
-            ></ha-icon-button>
-          </a>
         </div>
+        <a
+          href=${documentationUrl(this.hass, "/docs/automation/action/")}
+          target="_blank"
+          rel="noreferrer"
+        >
+          <ha-icon-button
+            .path=${mdiHelpCircle}
+            .label=${this.hass.localize(
+              "ui.panel.config.automation.editor.actions.learn_more"
+            )}
+          ></ha-icon-button>
+        </a>
       </div>
 
       <ha-automation-action
-        role="region"
-        aria-labelledby="actions-heading"
         .actions=${this.config.action}
         @value-changed=${this._actionChanged}
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .reOrderMode=${this.reOrderMode}
       ></ha-automation-action>
     `;
   }
 
-  private _exitReOrderMode() {
+  private _valueChanged(ev: CustomEvent) {
-    this.reOrderMode = !this.reOrderMode;
+    ev.stopPropagation();
+    const target = ev.target as any;
+    const name = target.name;
+    if (!name) {
+      return;
+    }
+    let newVal = target.value;
+    if (target.type === "number") {
+      newVal = Number(newVal);
+    }
+    if ((this.config![name] || "") === newVal) {
+      return;
+    }
+    fireEvent(this, "value-changed", {
+      value: { ...this.config!, [name]: newVal },
+    });
+  }
+
+  private _modeChanged(ev) {
+    const mode = ev.target.value;
+
+    if (
+      mode === this.config!.mode ||
+      (!this.config!.mode && mode === MODES[0])
+    ) {
+      return;
+    }
+    const value = {
+      ...this.config!,
+      mode,
+    };
+
+    if (!isMaxMode(mode)) {
+      delete value.max;
+    }
+
+    fireEvent(this, "value-changed", {
+      value,
+    });
   }
 
   private _triggerChanged(ev: CustomEvent): void {
@@ -193,15 +261,6 @@ export class HaManualAutomationEditor extends LitElement {
     });
   }
 
-  private async _enable(): Promise<void> {
-    if (!this.hass || !this.stateObj) {
-      return;
-    }
-    await this.hass.callService("automation", "turn_on", {
-      entity_id: this.stateObj.entity_id,
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -212,19 +271,30 @@ export class HaManualAutomationEditor extends LitElement {
         ha-card {
           overflow: hidden;
         }
-        .description {
+        .link-button-row {
-          margin: 0;
+          padding: 14px;
         }
+        ha-textarea,
+        ha-textfield {
+          display: block;
+        }
+
         p {
           margin-bottom: 0;
         }
+        ha-entity-toggle {
+          margin-right: 8px;
+        }
+        ha-select,
+        .max {
+          margin-top: 16px;
+          width: 200px;
+        }
         .header {
           display: flex;
+          margin: 16px 0;
           align-items: center;
         }
-        .header:first-child {
-          margin-top: -16px;
-        }
         .header .name {
           font-size: 20px;
           font-weight: 400;
@@ -233,9 +303,32 @@ export class HaManualAutomationEditor extends LitElement {
         .header a {
           color: var(--secondary-text-color);
         }
-        ha-alert {
+        ha-expansion-panel {
-          display: block;
+          --expansion-panel-summary-padding: 0 0 0 8px;
-          margin-bottom: 16px;
+          --expansion-panel-content-padding: 0;
+        }
+        .card-content {
+          padding: 16px;
+        }
+        .card-content ha-textarea:first-child {
+          margin-top: -16px;
+        }
+        .settings-icon {
+          display: none;
+        }
+        @media (min-width: 870px) {
+          .settings-icon {
+            display: inline-block;
+            color: var(--primary-color);
+            opacity: 0.9;
+            margin-right: 8px;
+          }
+        }
+        .disabled-bar {
+          background: var(--divider-color, #e0e0e0);
+          text-align: center;
+          border-top-right-radius: var(--ha-card-border-radius);
+          border-top-left-radius: var(--ha-card-border-radius);
         }
       `,
     ];

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -87,8 +87,6 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   @property({ attribute: false }) public trigger!: Trigger;
 
-  @property({ type: Boolean }) public hideMenu = false;
-
   @state() private _warnings?: string[];
 
   @state() private _yamlMode = false;
@@ -123,117 +121,102 @@ export default class HaAutomationTriggerRow extends LitElement {
           : ""}
 
         <ha-expansion-panel leftChevron>
-          <h3 slot="header">
+          <div slot="header">
             <ha-svg-icon
               class="trigger-icon"
               .path=${TRIGGER_TYPES[this.trigger.platform]}
             ></ha-svg-icon>
             ${capitalizeFirstLetter(describeTrigger(this.trigger, this.hass))}
-          </h3>
+          </div>
+          <ha-button-menu
+            slot="icons"
+            fixed
+            corner="BOTTOM_START"
+            @action=${this._handleAction}
+            @click=${preventDefault}
+          >
+            <ha-icon-button
+              slot="trigger"
+              .label=${this.hass.localize("ui.common.menu")}
+              .path=${mdiDotsVertical}
+            ></ha-icon-button>
 
-          <slot name="icons" slot="icons"></slot>
+            <mwc-list-item graphic="icon">
-          ${this.hideMenu
+              ${this.hass.localize(
-            ? ""
+                "ui.panel.config.automation.editor.triggers.rename"
-            : html`
+              )}
-                <ha-button-menu
+              <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
-                  slot="icons"
+            </mwc-list-item>
-                  fixed
+            <mwc-list-item graphic="icon">
-                  corner="BOTTOM_START"
+              ${this.hass.localize(
-                  @action=${this._handleAction}
+                "ui.panel.config.automation.editor.actions.duplicate"
-                  @click=${preventDefault}
+              )}
-                >
+              <ha-svg-icon
-                  <ha-icon-button
+                slot="graphic"
-                    slot="trigger"
+                .path=${mdiContentDuplicate}
-                    .label=${this.hass.localize("ui.common.menu")}
+              ></ha-svg-icon>
-                    .path=${mdiDotsVertical}
+            </mwc-list-item>
-                  ></ha-icon-button>
 
-                  <mwc-list-item graphic="icon">
+            <mwc-list-item graphic="icon">
-                    ${this.hass.localize(
+              ${this.hass.localize(
-                      "ui.panel.config.automation.editor.triggers.rename"
+                "ui.panel.config.automation.editor.triggers.edit_id"
-                    )}
+              )}
-                    <ha-svg-icon
+              <ha-svg-icon slot="graphic" .path=${mdiIdentifier}></ha-svg-icon>
-                      slot="graphic"
+            </mwc-list-item>
-                      .path=${mdiRenameBox}
-                    ></ha-svg-icon>
-                  </mwc-list-item>
-                  <mwc-list-item graphic="icon">
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.actions.duplicate"
-                    )}
-                    <ha-svg-icon
-                      slot="graphic"
-                      .path=${mdiContentDuplicate}
-                    ></ha-svg-icon>
-                  </mwc-list-item>
 
-                  <mwc-list-item graphic="icon">
+            <li divider role="separator"></li>
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.triggers.edit_id"
-                    )}
-                    <ha-svg-icon
-                      slot="graphic"
-                      .path=${mdiIdentifier}
-                    ></ha-svg-icon>
-                  </mwc-list-item>
 
-                  <li divider role="separator"></li>
+            <mwc-list-item .disabled=${!supported} graphic="icon">
+              ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
+              ${!yamlMode
+                ? html`<ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiCheck}
+                  ></ha-svg-icon>`
+                : ``}
+            </mwc-list-item>
 
-                  <mwc-list-item .disabled=${!supported} graphic="icon">
+            <mwc-list-item .disabled=${!supported} graphic="icon">
-                    ${this.hass.localize(
+              ${this.hass.localize(
-                      "ui.panel.config.automation.editor.edit_ui"
+                "ui.panel.config.automation.editor.edit_yaml"
-                    )}
+              )}
-                    ${!yamlMode
+              ${yamlMode
-                      ? html`<ha-svg-icon
+                ? html`<ha-svg-icon
-                          class="selected_menu_item"
+                    slot="graphic"
-                          slot="graphic"
+                    .path=${mdiCheck}
-                          .path=${mdiCheck}
+                  ></ha-svg-icon>`
-                        ></ha-svg-icon>`
+                : ``}
-                      : ``}
+            </mwc-list-item>
-                  </mwc-list-item>
 
-                  <mwc-list-item .disabled=${!supported} graphic="icon">
+            <li divider role="separator"></li>
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.edit_yaml"
-                    )}
-                    ${yamlMode
-                      ? html`<ha-svg-icon
-                          class="selected_menu_item"
-                          slot="graphic"
-                          .path=${mdiCheck}
-                        ></ha-svg-icon>`
-                      : ``}
-                  </mwc-list-item>
 
-                  <li divider role="separator"></li>
+            <mwc-list-item graphic="icon">
+              ${this.trigger.enabled === false
+                ? this.hass.localize(
+                    "ui.panel.config.automation.editor.actions.enable"
+                  )
+                : this.hass.localize(
+                    "ui.panel.config.automation.editor.actions.disable"
+                  )}
+              <ha-svg-icon
+                slot="graphic"
+                .path=${this.trigger.enabled === false
+                  ? mdiPlayCircleOutline
+                  : mdiStopCircleOutline}
+              ></ha-svg-icon>
+            </mwc-list-item>
+            <mwc-list-item class="warning" graphic="icon">
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.delete"
+              )}
+              <ha-svg-icon
+                class="warning"
+                slot="graphic"
+                .path=${mdiDelete}
+              ></ha-svg-icon>
+            </mwc-list-item>
+          </ha-button-menu>
 
-                  <mwc-list-item graphic="icon">
-                    ${this.trigger.enabled === false
-                      ? this.hass.localize(
-                          "ui.panel.config.automation.editor.actions.enable"
-                        )
-                      : this.hass.localize(
-                          "ui.panel.config.automation.editor.actions.disable"
-                        )}
-                    <ha-svg-icon
-                      slot="graphic"
-                      .path=${this.trigger.enabled === false
-                        ? mdiPlayCircleOutline
-                        : mdiStopCircleOutline}
-                    ></ha-svg-icon>
-                  </mwc-list-item>
-                  <mwc-list-item class="warning" graphic="icon">
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.actions.delete"
-                    )}
-                    <ha-svg-icon
-                      class="warning"
-                      slot="graphic"
-                      .path=${mdiDelete}
-                    ></ha-svg-icon>
-                  </mwc-list-item>
-                </ha-button-menu>
-              `}
           <div
             class=${classMap({
               "card-content": true,
@@ -430,15 +413,11 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   private _onDelete() {
     showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.automation.editor.triggers.delete_confirm_title"
-      ),
       text: this.hass.localize(
-        "ui.panel.config.automation.editor.triggers.delete_confirm_text"
+        "ui.panel.config.automation.editor.triggers.delete_confirm"
       ),
       dismissText: this.hass.localize("ui.common.cancel"),
       confirmText: this.hass.localize("ui.common.delete"),
-      destructive: true,
       confirm: () => {
         fireEvent(this, "value-changed", { value: null });
       },
@@ -553,18 +532,13 @@ export default class HaAutomationTriggerRow extends LitElement {
           --expansion-panel-summary-padding: 0 0 0 8px;
           --expansion-panel-content-padding: 0;
         }
-        h3 {
-          margin: 0;
-          font-size: inherit;
-          font-weight: inherit;
-        }
         .trigger-icon {
           display: none;
         }
         @media (min-width: 870px) {
           .trigger-icon {
             display: inline-block;
-            color: var(--secondary-text-color);
+            color: var(--primary-color);
             opacity: 0.9;
             margin-right: 8px;
           }
@@ -613,12 +587,6 @@ export default class HaAutomationTriggerRow extends LitElement {
           display: block;
           margin-bottom: 24px;
         }
-        .selected_menu_item {
-          color: var(--primary-color);
-        }
-        li[role="separator"] {
-          border-bottom-color: var(--divider-color);
-        }
       `,
     ];
   }

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -1,26 +1,22 @@
-import "@material/mwc-button";
+import { repeat } from "lit/directives/repeat";
-import type { ActionDetail } from "@material/mwc-list";
+import { mdiPlus } from "@mdi/js";
-import { mdiArrowDown, mdiArrowUp, mdiDrag, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
+import memoizeOne from "memoize-one";
+import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
-import { repeat } from "lit/directives/repeat";
+import type { ActionDetail } from "@material/mwc-list";
-import memoizeOne from "memoize-one";
-import type { SortableEvent } from "sortablejs";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { stringCompare } from "../../../../common/string/compare";
-import type { LocalizeFunc } from "../../../../common/translations/localize";
-import "../../../../components/ha-button-menu";
-import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-svg-icon";
+import "../../../../components/ha-button-menu";
 import { Trigger } from "../../../../data/automation";
 import { TRIGGER_TYPES } from "../../../../data/trigger";
-import { sortableStyles } from "../../../../resources/ha-sortable-style";
-import { SortableInstance } from "../../../../resources/sortable";
-import { loadSortable } from "../../../../resources/sortable.ondemand";
 import { HomeAssistant } from "../../../../types";
 import "./ha-automation-trigger-row";
 import type HaAutomationTriggerRow from "./ha-automation-trigger-row";
+import type { LocalizeFunc } from "../../../../common/translations/localize";
+import { stringCompare } from "../../../../common/string/compare";
+import type { HaSelect } from "../../../../components/ha-select";
 import "./types/ha-automation-trigger-calendar";
 import "./types/ha-automation-trigger-device";
 import "./types/ha-automation-trigger-event";
@@ -43,93 +39,49 @@ export default class HaAutomationTrigger extends LitElement {
 
   @property() public triggers!: Trigger[];
 
-  @property({ type: Boolean }) public reOrderMode = false;
-
   private _focusLastTriggerOnChange = false;
 
   private _triggerKeys = new WeakMap<Trigger, string>();
 
-  private _sortable?: SortableInstance;
-
   protected render() {
     return html`
-      <div class="triggers">
+      ${repeat(
-        ${repeat(
+        this.triggers,
-          this.triggers,
+        (trigger) => this._getKey(trigger),
-          (trigger) => this._getKey(trigger),
+        (trg, idx) => html`
-          (trg, idx) => html`
+          <ha-automation-trigger-row
-            <ha-automation-trigger-row
+            .index=${idx}
-              .index=${idx}
+            .trigger=${trg}
-              .trigger=${trg}
+            @duplicate=${this._duplicateTrigger}
-              .hideMenu=${this.reOrderMode}
+            @value-changed=${this._triggerChanged}
-              @duplicate=${this._duplicateTrigger}
+            .hass=${this.hass}
-              @value-changed=${this._triggerChanged}
+          ></ha-automation-trigger-row>
-              .hass=${this.hass}
+        `
-            >
+      )}
-              ${this.reOrderMode
+      <ha-button-menu @action=${this._addTrigger}>
-                ? html`
+        <mwc-button
-                    <ha-icon-button
+          slot="trigger"
-                      .index=${idx}
+          outlined
-                      slot="icons"
+          .label=${this.hass.localize(
-                      .label=${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.add"
-                        "ui.panel.config.automation.editor.move_up"
+          )}
-                      )}
+        >
-                      .path=${mdiArrowUp}
+          <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-                      @click=${this._moveUp}
+        </mwc-button>
-                      .disabled=${idx === 0}
+        ${this._processedTypes(this.hass.localize).map(
-                    ></ha-icon-button>
+          ([opt, label, icon]) => html`
-                    <ha-icon-button
+            <mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
-                      .index=${idx}
+              ${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
-                      slot="icons"
+            ></mwc-list-item>
-                      .label=${this.hass.localize(
-                        "ui.panel.config.automation.editor.move_down"
-                      )}
-                      .path=${mdiArrowDown}
-                      @click=${this._moveDown}
-                      .disabled=${idx === this.triggers.length - 1}
-                    ></ha-icon-button>
-                    <div class="handle" slot="icons">
-                      <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
-                    </div>
-                  `
-                : ""}
-            </ha-automation-trigger-row>
           `
         )}
-        </div>
+      </ha-button-menu>
-        <ha-button-menu @action=${this._addTrigger}>
-          <mwc-button
-            slot="trigger"
-            outlined
-            .label=${this.hass.localize(
-              "ui.panel.config.automation.editor.triggers.add"
-            )}
-          >
-            <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-          </mwc-button>
-          ${this._processedTypes(this.hass.localize).map(
-            ([opt, label, icon]) => html`
-              <mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
-                ${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
-              ></mwc-list-item>
-            `
-          )}
-        </ha-button-menu>
-      </div>
     `;
   }
 
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
 
-    if (changedProps.has("reOrderMode")) {
-      if (this.reOrderMode) {
-        this._createSortable();
-      } else {
-        this._destroySortable();
-      }
-    }
-
     if (changedProps.has("triggers") && this._focusLastTriggerOnChange) {
       this._focusLastTriggerOnChange = false;
 
@@ -144,36 +96,6 @@ export default class HaAutomationTrigger extends LitElement {
     }
   }
 
-  private async _createSortable() {
-    const Sortable = await loadSortable();
-    this._sortable = new Sortable(
-      this.shadowRoot!.querySelector(".triggers")!,
-      {
-        animation: 150,
-        fallbackClass: "sortable-fallback",
-        handle: ".handle",
-        onChoose: (evt: SortableEvent) => {
-          (evt.item as any).placeholder =
-            document.createComment("sort-placeholder");
-          evt.item.after((evt.item as any).placeholder);
-        },
-        onEnd: (evt: SortableEvent) => {
-          // put back in original location
-          if ((evt.item as any).placeholder) {
-            (evt.item as any).placeholder.replaceWith(evt.item);
-            delete (evt.item as any).placeholder;
-          }
-          this._dragged(evt);
-        },
-      }
-    );
-  }
-
-  private _destroySortable() {
-    this._sortable?.destroy();
-    this._sortable = undefined;
-  }
-
   private _getKey(action: Trigger) {
     if (!this._triggerKeys.has(action)) {
       this._triggerKeys.set(action, Math.random().toString());
@@ -200,30 +122,6 @@ export default class HaAutomationTrigger extends LitElement {
     fireEvent(this, "value-changed", { value: triggers });
   }
 
-  private _moveUp(ev) {
-    const index = (ev.target as any).index;
-    const newIndex = index - 1;
-    this._move(index, newIndex);
-  }
-
-  private _moveDown(ev) {
-    const index = (ev.target as any).index;
-    const newIndex = index + 1;
-    this._move(index, newIndex);
-  }
-
-  private _dragged(ev: SortableEvent): void {
-    if (ev.oldIndex === ev.newIndex) return;
-    this._move(ev.oldIndex!, ev.newIndex!);
-  }
-
-  private _move(index: number, newIndex: number) {
-    const triggers = this.triggers.concat();
-    const trigger = triggers.splice(index, 1)[0];
-    triggers.splice(newIndex, 0, trigger);
-    fireEvent(this, "value-changed", { value: triggers });
-  }
-
   private _triggerChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const triggers = [...this.triggers];
@@ -268,27 +166,16 @@ export default class HaAutomationTrigger extends LitElement {
   );
 
   static get styles(): CSSResultGroup {
-    return [
+    return css`
-      sortableStyles,
+      ha-automation-trigger-row {
-      css`
+        display: block;
-        ha-automation-trigger-row {
+        margin-bottom: 16px;
-          display: block;
+        scroll-margin-top: 48px;
-          margin-bottom: 16px;
+      }
-          scroll-margin-top: 48px;
+      ha-svg-icon {
-        }
+        height: 20px;
-        ha-svg-icon {
+      }
-          height: 20px;
+    `;
-        }
-        .handle {
-          cursor: move;
-          padding: 12px;
-        }
-        .handle ha-svg-icon {
-          pointer-events: none;
-          height: 24px;
-        }
-      `,
-    ];
   }
 }
 

src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts

@@ -15,7 +15,7 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
 
   @property() public trigger!: TagTrigger;
 
-  @state() private _tags?: Tag[];
+  @state() private _tags: Tag[] = [];
 
   public static get defaultConfig() {
     return { tag_id: "" };
@@ -27,16 +27,14 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
   }
 
   protected render() {
-    if (!this._tags) {
+    const { tag_id } = this.trigger;
-      return html``;
-    }
     return html`
       <ha-select
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.type.tag.label"
         )}
         .disabled=${this._tags.length === 0}
-        .value=${this.trigger.tag_id}
+        .value=${tag_id}
         @selected=${this._tagChanged}
       >
         ${this._tags.map(
@@ -51,19 +49,13 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
   }
 
   private async _fetchTags() {
-    this._tags = (await fetchTags(this.hass)).sort((a, b) =>
+    this._tags = await fetchTags(this.hass);
+    this._tags.sort((a, b) =>
       caseInsensitiveStringCompare(a.name || a.id, b.name || b.id)
     );
   }
 
   private _tagChanged(ev) {
-    if (
-      !ev.target.value ||
-      !this._tags ||
-      this.trigger.tag_id === ev.target.value
-    ) {
-      return;
-    }
     fireEvent(this, "value-changed", {
       value: {
         ...this.trigger,