Align entity registry buttons

demo/src/ha-demo.ts

@@ -61,7 +61,6 @@ 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",
@@ -75,7 +74,6 @@ 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",

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/misc/integration-card.ts

@@ -191,7 +191,6 @@ const createEntityRegistryEntries = (
     hidden_by: null,
     entity_category: null,
     entity_id: "binary_sensor.updater",
-    id: "binary_sensor.updater",
     name: null,
     icon: null,
     platform: "updater",

pyproject.toml

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

src/common/const.ts

@@ -126,7 +126,6 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   gas: mdiGasCylinder,
   humidity: mdiWaterPercent,
   illuminance: mdiBrightness5,
-  moisture: mdiWaterPercent,
   monetary: mdiCash,
   nitrogen_dioxide: mdiMolecule,
   nitrogen_monoxide: mdiMolecule,

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/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/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.label === "%"
-        ? blankBeforePercent(this.locale) + "%"
-        : ` ${this.label}`
+      this._segment_label ? "" : this.label === "%" ? "%" : ` ${this.label}`
     }
         </text>
       </svg>`;

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";
@@ -18,7 +16,6 @@ export interface IconOverflowMenuItem {
   disabled?: boolean;
   tooltip?: string;
   onClick: CallableFunction;
-  warning?: boolean;
 }
 
 @customElement("ha-icon-overflow-menu")
@@ -52,13 +49,9 @@ export class HaIconOverflowMenu extends LitElement {
                     graphic="icon"
                     .disabled=${item.disabled}
                     @click=${item.action}
-                    class=${classMap({ warning: Boolean(item.warning) })}
                   >
                     <div slot="graphic">
-                      <ha-svg-icon
-                        class=${classMap({ warning: Boolean(item.warning) })}
-                        .path=${item.path}
-                      ></ha-svg-icon>
+                      <ha-svg-icon .path=${item.path}></ha-svg-icon>
                     </div>
                     ${item.label}
                   </mwc-list-item>
@@ -88,8 +81,7 @@ export class HaIconOverflowMenu extends LitElement {
     `;
   }
 
-  protected _handleIconOverflowMenuOpened(e) {
-    e.stopPropagation();
+  protected _handleIconOverflowMenuOpened() {
     // 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.
@@ -107,15 +99,12 @@ export class HaIconOverflowMenu extends LitElement {
   }
 
   static get styles() {
-    return [
-      haStyle,
-      css`
-        :host {
-          display: flex;
-          justify-content: flex-end;
-        }
-      `,
-    ];
+    return css`
+      :host {
+        display: flex;
+        justify-content: flex-end;
+      }
+    `;
   }
 }
 

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";
@@ -123,10 +123,6 @@ export class HaIconPicker extends LitElement {
     }
   }
 
-  protected shouldUpdate(changedProps: PropertyValues) {
-    return !this._opened || changedProps.has("_opened");
-  }
-
   private _valueChanged(ev: PolymerChangedEvent<string>) {
     ev.stopPropagation();
     this._setValue(ev.detail.value);

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 & {

src/data/automation_i18n.ts

@@ -1,14 +1,7 @@
 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 = (
@@ -75,7 +68,7 @@ export const describeTrigger = (
   }
 
   // State Trigger
-  if (trigger.platform === "state") {
+  if (trigger.platform === "state" && trigger.entity_id) {
     let base = "When";
     let entities = "";
 
@@ -96,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) {
@@ -292,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
@@ -304,25 +292,7 @@ export const describeTrigger = (
   if (trigger.platform === "webhook") {
     return "When a Webhook payload has been received";
   }
-
-  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`;
+  return `${trigger.platform || "Unknown"} trigger`;
 };
 
 export const describeCondition = (
@@ -334,64 +304,15 @@ export const describeCondition = (
     return condition.alias;
   }
 
-  if (!condition.condition) {
-    const shorthands: Array<"and" | "or" | "not"> = ["and", "or", "not"];
-    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}`;
+  if (["or", "and", "not"].includes(condition.condition)) {
+    return `multiple conditions using "${condition.condition}"`;
   }
 
   // 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
-      ? computeStateName(stateObj)
-      : condition.entity_id
-      ? condition.entity_id
-      : "an entity";
+    const entity = stateObj ? computeStateName(stateObj) : condition.entity_id;
 
     if ("attribute" in condition) {
       base += ` ${condition.attribute} from`;
@@ -407,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) {
@@ -550,22 +467,5 @@ export const describeCondition = (
     }`;
   }
 
-  if (condition.condition === "device") {
-    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`;
+  return `${condition.condition} condition`;
 };

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;
@@ -163,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/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/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);
-      const service = hass.services[domain][serviceName];
-      base = service
-        ? `${domainToName(hass.localize, domain)}: ${service.name}`
-        : `Call service: ${config.service}`;
+      base = `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"}`;
-    } else if (config.delay) {
-      duration = `for ${formatDuration(config.delay)}`;
+        : `for ${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 ${
-      sceneStateObj ? computeStateName(sceneStateObj) : entityId
+    return `Scene ${
+      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 ${
-      config.metadata.title || config.data.media_content_id || "media"
-    } on ${
+    return `Play ${config.metadata.title || config.data.media_content_id} 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);
-    if (!triggers || triggers.length === 0) {
-      return "Wait for a trigger";
-    }
-    return `Wait for ${triggers
+    return `Wait for ${ensureArray(config.wait_for_trigger)
       .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/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/layouts/hass-subpage.ts

@@ -15,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;
@@ -54,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>
     `;
   }
 
@@ -66,10 +61,6 @@ class HassSubpage extends LitElement {
   }
 
   private _backTapped(): void {
-    if (this.backCallback) {
-      this.backCallback();
-      return;
-    }
     history.back();
   }
 
@@ -125,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/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
-          .path=${mdiPencil}
-          .entry=${area}
-          @click=${this._showSettings}
-          slot="toolbar-icon"
-          .label=${this.hass.localize("ui.panel.config.areas.edit_settings")}
-        ></ha-icon-button>
+        ${this.narrow
+          ? html`<span slot="header"> ${area.name} </span>
+              <ha-icon-button
+                .path=${mdiPencil}
+                .entry=${area}
+                @click=${this._showSettings}
+                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.hideMenu
-            ? ""
-            : html`
-                <ha-button-menu
+          ${this.index !== 0
+            ? html`
+                <ha-icon-button
                   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>
+                  .label=${this.hass.localize(
+                    "ui.panel.config.automation.editor.move_up"
+                  )}
+                  .path=${mdiArrowUp}
+                  @click=${this._moveUp}
+                ></ha-icon-button>
+              `
+            : ""}
+          ${this.index !== this.totalActions - 1
+            ? html`
+                <ha-icon-button
+                  slot="icons"
+                  .label=${this.hass.localize(
+                    "ui.panel.config.automation.editor.move_down"
+                  )}
+                  .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">
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.actions.rename"
-                    )}
-                    <ha-svg-icon
-                      slot="graphic"
-                      .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">
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.rename"
+              )}
+              <ha-svg-icon slot="graphic" .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>
 
-                  <li divider role="separator"></li>
+            <li divider role="separator"></li>
 
-                  <mwc-list-item
-                    .disabled=${!this._uiModeAvailable}
-                    graphic="icon"
-                  >
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.edit_ui"
-                    )}
-                    ${!yamlMode
-                      ? html`<ha-svg-icon
-                          class="selected_menu_item"
-                          slot="graphic"
-                          .path=${mdiCheck}
-                        ></ha-svg-icon>`
-                      : ``}
-                  </mwc-list-item>
+            <mwc-list-item .disabled=${!this._uiModeAvailable} 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=${!this._uiModeAvailable}
-                    graphic="icon"
-                  >
-                    ${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>
+            <mwc-list-item .disabled=${!this._uiModeAvailable} graphic="icon">
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.edit_yaml"
+              )}
+              ${yamlMode
+                ? html`<ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiCheck}
+                  ></ha-svg-icon>`
+                : ``}
+            </mwc-list-item>
 
-                  <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>
-              `}
+            <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>
           <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:
@@ -484,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;
           }
@@ -516,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 deepClone from "deep-clone-simple";
+import memoizeOne from "memoize-one";
 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(
-          this.actions,
-          (action) => this._getKey(action),
-          (action, idx) => html`
-            <ha-automation-action-row
-              .index=${idx}
-              .action=${action}
-              .narrow=${this.narrow}
-              .hideMenu=${this.reOrderMode}
-              .reOrderMode=${this.reOrderMode}
-              @duplicate=${this._duplicateAction}
-              @value-changed=${this._actionChanged}
-              .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.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>
+      ${repeat(
+        this.actions,
+        (action) => this._getKey(action),
+        (action, idx) => html`
+          <ha-automation-action-row
+            .index=${idx}
+            .totalActions=${this.actions.length}
+            .action=${action}
+            .narrow=${this.narrow}
+            @duplicate=${this._duplicateAction}
+            @move-action=${this._move}
+            @value-changed=${this._actionChanged}
+            .hass=${this.hass}
+          ></ha-automation-action-row>
+        `
+      )}
       <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;
-    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 newIndex = ev.detail.direction === "up" ? index - 1 : index + 1;
     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 [
-      sortableStyles,
-      css`
-        ha-automation-action-row {
-          display: block;
-          margin-bottom: 16px;
-          scroll-margin-top: 48px;
-        }
-        ha-svg-icon {
-          height: 20px;
-        }
-        .handle {
-          cursor: move;
-          padding: 12px;
-        }
-        .handle ha-svg-icon {
-          pointer-events: none;
-          height: 24px;
-        }
-      `,
-    ];
+    return css`
+      ha-automation-action-row {
+        display: block;
+        margin-bottom: 16px;
+        scroll-margin-top: 48px;
+      }
+      ha-svg-icon {
+        height: 20px;
+      }
+    `;
   }
 }
 

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

@@ -17,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() {
@@ -54,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}
@@ -92,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>

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>

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"
-          @change=${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}
-          @change=${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 { BlueprintAutomationConfig } from "../../../data/automation";
+import {
+  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"
-        ? html`
-            <ha-alert alert-type="info">
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.disabled"
-              )}
-              <mwc-button slot="action" @click=${this._enable}>
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.enable"
-                )}
-              </mwc-button>
-            </ha-alert>
-          `
-        : ""}
-      ${this.config.description
-        ? html`<p class="description">${this.config.description}</p>`
-        : ""}
+      <ha-config-section vertical .isWide=${this.isWide}>
+        ${!this.narrow
+          ? html` <span slot="header">${this.config.alias}</span> `
+          : ""}
+        <span slot="introduction">
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.introduction"
+          )}
+        </span>
+        <ha-card outlined>
+          <div class="card-content">
+            ${this._showDescription
+              ? html`
+                  <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.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> {
-    if (!this.hass || !this.stateObj) {
+  private _valueChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const target = ev.target as any;
+    const name = target.name;
+    if (!name) {
       return;
     }
-    await this.hass.callService("automation", "turn_on", {
-      entity_id: this.stateObj.entity_id,
+    const newVal = target.value;
+    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 {
-          margin-top: 0;
-          margin-bottom: 12px;
-        }
-        .introduction a {
+        span[slot="introduction"] a {
           color: var(--primary-color);
         }
         p {
           margin-bottom: 0;
         }
-        .description {
-          margin-bottom: 16px;
+        ha-entity-toggle {
+          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,
-                  reOrderMode: this.reOrderMode,
-                }
+                { hass: this.hass, condition: condition }
               )}
             </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>
-          ${this.hideMenu
-            ? ""
-            : html`
-                <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>
+          <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.conditions.test"
-                    )}
-                    <ha-svg-icon slot="graphic" .path=${mdiFlask}></ha-svg-icon>
-                  </mwc-list-item>
-                  <mwc-list-item graphic="icon">
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.conditions.rename"
-                    )}
-                    <ha-svg-icon
-                      slot="graphic"
-                      .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">
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.conditions.test"
+              )}
+              <ha-svg-icon slot="graphic" .path=${mdiFlask}></ha-svg-icon>
+            </mwc-list-item>
+            <mwc-list-item graphic="icon">
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.conditions.rename"
+              )}
+              <ha-svg-icon slot="graphic" .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>
 
-                  <li divider role="separator"></li>
+            <li divider role="separator"></li>
 
-                  <mwc-list-item graphic="icon">
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.edit_ui"
-                    )}
-                    ${!this._yamlMode
-                      ? html`<ha-svg-icon
-                          class="selected_menu_item"
-                          slot="graphic"
-                          .path=${mdiCheck}
-                        ></ha-svg-icon>`
-                      : ``}
-                  </mwc-list-item>
+            <mwc-list-item graphic="icon">
+              ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
+              ${!this._yamlMode
+                ? html`<ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiCheck}
+                  ></ha-svg-icon>`
+                : ``}
+            </mwc-list-item>
 
-                  <mwc-list-item graphic="icon">
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.edit_yaml"
-                    )}
-                    ${this._yamlMode
-                      ? html`<ha-svg-icon
-                          class="selected_menu_item"
-                          slot="graphic"
-                          .path=${mdiCheck}
-                        ></ha-svg-icon>`
-                      : ``}
-                  </mwc-list-item>
+            <mwc-list-item graphic="icon">
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.edit_yaml"
+              )}
+              ${this._yamlMode
+                ? html`<ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiCheck}
+                  ></ha-svg-icon>`
+                : ``}
+            </mwc-list-item>
 
-                  <li divider role="separator"></li>
+            <li divider role="separator"></li>
 
-                  <mwc-list-item graphic="icon">
-                    ${this.condition.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.condition.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.condition.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.condition.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({
@@ -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>
@@ -440,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;
           }
@@ -494,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 type { ActionDetail } from "@material/mwc-list";
-import { mdiArrowDown, mdiArrowUp, mdiDrag, mdiPlus } from "@mdi/js";
+import { mdiPlus } from "@mdi/js";
+import { repeat } from "lit/directives/repeat";
 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(
-          this.conditions,
-          (condition) => this._getKey(condition),
-          (cond, idx) => html`
-            <ha-automation-condition-row
-              .index=${idx}
-              .totalConditions=${this.conditions.length}
-              .condition=${cond}
-              .hideMenu=${this.reOrderMode}
-              .reOrderMode=${this.reOrderMode}
-              @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>
+      ${repeat(
+        this.conditions,
+        (condition) => this._getKey(condition),
+        (cond, idx) => html`
+          <ha-automation-condition-row
+            .index=${idx}
+            .condition=${cond}
+            @duplicate=${this._duplicateCondition}
+            @value-changed=${this._conditionChanged}
+            .hass=${this.hass}
+          ></ha-automation-condition-row>
+        `
+      )}
       <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 [
-      sortableStyles,
-      css`
-        ha-automation-condition-row {
-          display: block;
-          margin-bottom: 16px;
-          scroll-margin-top: 48px;
-        }
-        ha-svg-icon {
-          height: 20px;
-        }
-        .handle {
-          cursor: move;
-          padding: 12px;
-        }
-        .handle ha-svg-icon {
-          pointer-events: none;
-          height: 24px;
-        }
-      `,
-    ];
+    return css`
+      ha-automation-condition-row {
+        display: block;
+        margin-bottom: 16px;
+        scroll-margin-top: 48px;
+      }
+      ha-svg-icon {
+        height: 20px;
+      }
+    `;
   }
 }
 

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,9 +23,8 @@ 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 "../../../components/ha-button-menu";
@@ -50,19 +46,18 @@ import {
 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 { showAutomationRenameDialog } from "./automation-rename-dialog/show-dialog-automation-rename";
+import { configSections } from "../ha-panel-config";
 import "./blueprint-automation-editor";
 import "./manual-automation-editor";
-import type { HaManualAutomationEditor } from "./manual-automation-editor";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -102,10 +97,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
   @state() private _mode: "gui" | "yaml" = "gui";
 
-  @query("ha-yaml-editor", true) private _yamlEditor?: HaYamlEditor;
-
-  @query("manual-automation-editor")
-  private _manualEditor?: HaManualAutomationEditor;
+  @query("ha-yaml-editor", true) private _editor?: HaYamlEditor;
 
   private _configSubscriptions: Record<
     string,
@@ -119,33 +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
-          ? ""
-          : this._config.alias ||
-            this.hass.localize(
-              "ui.panel.config.automation.editor.default_name"
-            )}
+        .tabs=${configSections.automations}
       >
-        ${this._config?.id && !this.narrow
-          ? html`
-              <a
-                class="trace-link"
-                href="/config/automation/trace/${this._config.id}"
-                slot="toolbar-icon"
-              >
-                <mwc-button>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.show_trace"
-                  )}
-                </mwc-button>
-              </a>
-            `
-          : ""}
         <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
           <ha-icon-button
             slot="trigger"
@@ -153,14 +125,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             .path=${mdiDotsVertical}
           ></ha-icon-button>
 
-          <mwc-list-item graphic="icon" @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
-            ? html`<a href="/config/automation/trace/${this._config.id}">
-                <mwc-list-item graphic="icon">
+          ${stateObj
+            ? html`<a
+                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,42 +154,11 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
               </a>`
             : ""}
 
-          <mwc-list-item
-            graphic="icon"
-            @click=${this._promptAutomationAlias}
-            .disabled=${!this.automationId || this._mode === "yaml"}
-          >
+          <mwc-list-item graphic="icon" @click=${this._promptAutomationAlias}>
             ${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.automationId || 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>
-              `
-            : ""}
-
-          <mwc-list-item
-            graphic="icon"
-            @click=${this._toggleReOrderMode}
-            .disabled=${this._mode !== "gui"}
-          >
-            ${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"
@@ -262,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>
@@ -298,48 +237,70 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                 @subscribe-automation-config=${this._subscribeAutomationConfig}
               >
                 ${this._errors
-                  ? html`<ha-alert alert-type="error">
-                      ${this._errors}
-                    </ha-alert>`
+                  ? html`<div class="errors">${this._errors}</div>`
                   : ""}
                 ${this._mode === "gui"
-                  ? "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>
-                      `
+                  ? html`
+                      ${this.narrow
+                        ? html`<span slot="header"
+                            >${this._config!.alias ||
+                            this.hass.localize(
+                              "ui.panel.config.automation.editor.default_name"
+                            )}</span
+                          >`
+                        : html`
+                            <div class="header-name">
+                              <h1>
+                                ${this._config!.alias ||
+                                this.hass.localize(
+                                  "ui.panel.config.automation.editor.default_name"
+                                )}
+                              </h1>
+                              <ha-icon-button
+                                .path=${mdiPencil}
+                                @click=${this._promptAutomationAlias}
+                                .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">
-                              ${this.hass.localize(
-                                "ui.panel.config.automation.editor.disabled"
-                              )}
-                              <mwc-button slot="action" @click=${this._toggle}>
-                                ${this.hass.localize(
-                                  "ui.panel.config.automation.editor.enable"
+                            <ha-card outlined>
+                              <div class="card-header">
+                                ${this._config.alias ||
+                                this.hass.localize(
+                                  "ui.panel.config.automation.editor.default_name"
                                 )}
-                              </mwc-button>
-                            </ha-alert>
+                              </div>
+                            </ha-card>
                           `
-                        : ""}
+                        : ``}
                       <ha-yaml-editor
                         .hass=${this.hass}
                         .defaultValue=${this._preprocessYaml()}
@@ -368,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>
     `;
   }
 
@@ -469,13 +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 _runActions() {
     if (!this.hass || !this._entityId) {
       return;
@@ -509,8 +463,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
   }
 
   private async _copyYaml(): Promise<void> {
-    if (this._yamlEditor?.yaml) {
-      await copyToClipboard(this._yamlEditor.yaml);
+    if (this._editor?.yaml) {
+      await copyToClipboard(this._editor.yaml);
       showToast(this, {
         message: this.hass.localize("ui.common.copied_clipboard"),
       });
@@ -591,46 +545,40 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     this._mode = "yaml";
   }
 
-  private _toggleReOrderMode() {
-    if (this._manualEditor) {
-      this._manualEditor.reOrderMode = !this._manualEditor.reOrderMode;
+  private async _promptAutomationAlias(): Promise<string | null> {
+    const result = await showPromptDialog(this, {
+      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();
     }
-  }
-
-  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(),
-      });
-    });
+    return result;
   }
 
   private async _saveAutomation(): Promise<void> {
     const id = this.automationId || String(Date.now());
-    if (!this.automationId) {
-      await this._promptAutomationAlias();
+    if (!this._config!.alias) {
+      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;
     }
 
     this.hass!.callApi(
@@ -675,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;
         }
@@ -684,11 +637,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
           flex-direction: column;
           padding-bottom: 0;
         }
-        .trace-link {
-          text-decoration: none;
-        }
-        manual-automation-editor,
-        blueprint-automation-editor {
+        manual-automation-editor {
           margin: 0 auto;
           max-width: 1040px;
           padding: 28px 20px 0;
@@ -729,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 {
-  mdiCancel,
-  mdiContentDuplicate,
-  mdiDelete,
-  mdiHelpCircle,
-  mdiInformationOutline,
-  mdiPlay,
-  mdiPlayCircleOutline,
-  mdiPlus,
-  mdiStopCircleOutline,
-  mdiTransitConnection,
-} from "@mdi/js";
-import "@polymer/paper-tooltip/paper-tooltip";
+import { mdiHelpCircle, mdiInformationOutline, mdiPlus } from "@mdi/js";
 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 {
-  AutomationEntity,
-  deleteAutomation,
-  getAutomationConfig,
-  showAutomationEditor,
-  triggerAutomationActions,
-} from "../../../data/automation";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../dialogs/generic/show-dialog-box";
+import type { AutomationEntity } from "../../../data/automation";
+import { showAlertDialog } 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,105 +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%",
-        type: "overflow-menu",
-        template: (_: string, automation: any) =>
-          html`
-            <ha-icon-overflow-menu
-              .hass=${this.hass}
-              narrow
-              .items=${[
-                {
-                  path: mdiInformationOutline,
-                  label: this.hass.localize(
-                    "ui.panel.config.automation.editor.show_info"
-                  ),
-                  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),
-                },
-                {
-                  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>
-          `,
+        label: this.hass.localize(
+          "ui.panel.config.automation.picker.headers.actions"
+        ),
+        type: "icon-button",
+        template: (_info, automation: any) => html`
+          <ha-icon-button
+            .automation=${automation}
+            .label=${this.hass.localize(
+              "ui.panel.config.automation.picker.headers.actions"
+            )}
+            .path=${mdiInformationOutline}
+            @click=${this._showInfo}
+          ></ha-icon-button>
+        `,
       };
       return columns;
     }
@@ -317,52 +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, {
-      text: this.hass.localize(
-        "ui.panel.config.automation.picker.delete_confirm"
-      ),
-      confirmText: this.hass!.localize("ui.common.delete"),
-      dismissText: this.hass!.localize("ui.common.cancel"),
-      confirm: () => this._delete(automation),
-    });
-  }
-
-  private async _delete(automation) {
-    await deleteAutomation(this.hass, automation.attributes.id);
-  }
-
-  private async duplicate(automation) {
-    const config = await getAutomationConfig(
-      this.hass,
-      automation.attributes.id
-    );
-    showAutomationEditor({
-      ...config,
-      id: undefined,
-      alias: undefined,
-    });
-  }
-
   private _showHelp() {
     showAlertDialog(this, {
       title: this.hass.localize("ui.panel.config.automation.caption"),

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

@@ -1,21 +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-icon-button";
-import "../../../components/ha-alert";
 import "../../../components/ha-textarea";
 import "../../../components/ha-textfield";
+import "../../../components/ha-icon-button";
 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";
@@ -35,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"
-        ? html`
-            <ha-alert alert-type="info">
+      <ha-card outlined>
+        ${this.stateObj && this.stateObj.state === "off"
+          ? html`<div class="disabled-bar">
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.disabled"
               )}
-              <mwc-button slot="action" @click=${this._enable}>
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.enable"
-                )}
-              </mwc-button>
-            </ha-alert>
-          `
-        : ""}
-      ${this.reOrderMode
-        ? html`
-            <ha-alert
-              alert-type="info"
-              .title=${this.hass.localize(
-                "ui.panel.config.automation.editor.re_order_mode.title"
+            </div>`
+          : ""}
+
+        <ha-expansion-panel leftChevron>
+          <div slot="header">
+            <ha-svg-icon class="settings-icon" .path=${mdiRobot}></ha-svg-icon>
+            ${this.hass.localize(
+              "ui.panel.config.automation.editor.automation_settings"
+            )}
+          </div>
+          <div class="card-content">
+            <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.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(
-                "ui.panel.config.automation.editor.re_order_mode.description"
+              ${MODES.map(
+                (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}>
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.re_order_mode.exit"
-                )}
-              </mwc-button>
-            </ha-alert>
-          `
-        : ""}
-      ${this.config.description
-        ? html`<p class="description">${this.config.description}</p>`
-        : ""}
+            </ha-select>
+            ${this.config.mode && isMaxMode(this.config.mode)
+              ? html`
+                  <br /><ha-textfield
+                    .label=${this.hass.localize(
+                      `ui.panel.config.automation.editor.max.${this.config.mode}`
+                    )}
+                    type="number"
+                    name="max"
+                    .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"
@@ -97,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"
@@ -126,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() {
-    this.reOrderMode = !this.reOrderMode;
+  private _valueChanged(ev: CustomEvent) {
+    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 {
@@ -196,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,
@@ -218,9 +274,11 @@ export class HaManualAutomationEditor extends LitElement {
         .link-button-row {
           padding: 14px;
         }
-        .description {
-          margin: 0;
+        ha-textarea,
+        ha-textfield {
+          display: block;
         }
+
         p {
           margin-bottom: 0;
         }
@@ -234,11 +292,9 @@ export class HaManualAutomationEditor extends LitElement {
         }
         .header {
           display: flex;
+          margin: 16px 0;
           align-items: center;
         }
-        .header:first-child {
-          margin-top: -16px;
-        }
         .header .name {
           font-size: 20px;
           font-weight: 400;
@@ -247,11 +303,6 @@ export class HaManualAutomationEditor extends LitElement {
         .header a {
           color: var(--secondary-text-color);
         }
-        h3 {
-          margin: 0;
-          font-size: inherit;
-          font-weight: inherit;
-        }
         ha-expansion-panel {
           --expansion-panel-summary-padding: 0 0 0 8px;
           --expansion-panel-content-padding: 0;
@@ -259,13 +310,16 @@ export class HaManualAutomationEditor extends LitElement {
         .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(--secondary-text-color);
+            color: var(--primary-color);
             opacity: 0.9;
             margin-right: 8px;
           }
@@ -276,10 +330,6 @@ export class HaManualAutomationEditor extends LitElement {
           border-top-right-radius: var(--ha-card-border-radius);
           border-top-left-radius: var(--ha-card-border-radius);
         }
-        ha-alert {
-          display: block;
-          margin-bottom: 16px;
-        }
       `,
     ];
   }

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>
-          ${this.hideMenu
-            ? ""
-            : html`
-                <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.triggers.rename"
+              )}
+              <ha-svg-icon slot="graphic" .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">
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.triggers.rename"
-                    )}
-                    <ha-svg-icon
-                      slot="graphic"
-                      .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">
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.edit_id"
+              )}
+              <ha-svg-icon slot="graphic" .path=${mdiIdentifier}></ha-svg-icon>
+            </mwc-list-item>
 
-                  <mwc-list-item graphic="icon">
-                    ${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>
 
-                  <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">
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.edit_ui"
-                    )}
-                    ${!yamlMode
-                      ? html`<ha-svg-icon
-                          class="selected_menu_item"
-                          slot="graphic"
-                          .path=${mdiCheck}
-                        ></ha-svg-icon>`
-                      : ``}
-                  </mwc-list-item>
+            <mwc-list-item .disabled=${!supported} graphic="icon">
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.edit_yaml"
+              )}
+              ${yamlMode
+                ? html`<ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiCheck}
+                  ></ha-svg-icon>`
+                : ``}
+            </mwc-list-item>
 
-                  <mwc-list-item .disabled=${!supported} graphic="icon">
-                    ${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>
 
-                  <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,
@@ -549,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;
           }
@@ -609,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 type { ActionDetail } from "@material/mwc-list";
-import { mdiArrowDown, mdiArrowUp, mdiDrag, mdiPlus } from "@mdi/js";
+import { repeat } from "lit/directives/repeat";
+import { 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 memoizeOne from "memoize-one";
-import type { SortableEvent } from "sortablejs";
+import type { ActionDetail } from "@material/mwc-list";
 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(
-          this.triggers,
-          (trigger) => this._getKey(trigger),
-          (trg, idx) => html`
-            <ha-automation-trigger-row
-              .index=${idx}
-              .trigger=${trg}
-              .hideMenu=${this.reOrderMode}
-              @duplicate=${this._duplicateTrigger}
-              @value-changed=${this._triggerChanged}
-              .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.triggers.length - 1}
-                    ></ha-icon-button>
-                    <div class="handle" slot="icons">
-                      <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
-                    </div>
-                  `
-                : ""}
-            </ha-automation-trigger-row>
+      ${repeat(
+        this.triggers,
+        (trigger) => this._getKey(trigger),
+        (trg, idx) => html`
+          <ha-automation-trigger-row
+            .index=${idx}
+            .trigger=${trg}
+            @duplicate=${this._duplicateTrigger}
+            @value-changed=${this._triggerChanged}
+            .hass=${this.hass}
+          ></ha-automation-trigger-row>
+        `
+      )}
+      <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>
           `
         )}
-        </div>
-        <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>
+      </ha-button-menu>
     `;
   }
 
   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 [
-      sortableStyles,
-      css`
-        ha-automation-trigger-row {
-          display: block;
-          margin-bottom: 16px;
-          scroll-margin-top: 48px;
-        }
-        ha-svg-icon {
-          height: 20px;
-        }
-        .handle {
-          cursor: move;
-          padding: 12px;
-        }
-        .handle ha-svg-icon {
-          pointer-events: none;
-          height: 24px;
-        }
-      `,
-    ];
+    return css`
+      ha-automation-trigger-row {
+        display: block;
+        margin-bottom: 16px;
+        scroll-margin-top: 48px;
+      }
+      ha-svg-icon {
+        height: 20px;
+      }
+    `;
   }
 }
 

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) {
-      return html``;
-    }
+    const { tag_id } = this.trigger;
     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,

src/panels/config/devices/ha-config-device-page.ts

@@ -60,11 +60,12 @@ import {
 import "../../../layouts/hass-error-screen";
 import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
-import type { HomeAssistant } from "../../../types";
+import type { HomeAssistant, Route } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import { fileDownload } from "../../../util/file_download";
 import "../../logbook/ha-logbook";
 import "../ha-config-section";
+import { configSections } from "../ha-panel-config";
 import "./device-detail/ha-device-entities-card";
 import "./device-detail/ha-device-info-card";
 import { showDeviceAutomationDialog } from "./device-detail/show-dialog-device-automation";
@@ -72,7 +73,6 @@ import {
   loadDeviceRegistryDetailDialog,
   showDeviceRegistryDetailDialog,
 } from "./device-registry-detail/show-dialog-device-registry-detail";
-import "../../../layouts/hass-subpage";
 
 export interface EntityRegistryStateEntry extends EntityRegistryEntry {
   stateName?: string | null;
@@ -96,21 +96,23 @@ export interface DeviceAlert {
 export class HaConfigDevicePage extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public devices!: DeviceRegistryEntry[];
+  @property() public devices!: DeviceRegistryEntry[];
 
-  @property({ attribute: false }) public entries!: ConfigEntry[];
+  @property() public entries!: ConfigEntry[];
 
-  @property({ attribute: false }) public entities!: EntityRegistryEntry[];
+  @property() public entities!: EntityRegistryEntry[];
 
-  @property({ attribute: false }) public areas!: AreaRegistryEntry[];
+  @property() public areas!: AreaRegistryEntry[];
 
   @property() public deviceId!: string;
 
   @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() private _related?: RelatedResult;
 
@@ -607,12 +609,16 @@ export class HaConfigDevicePage extends LitElement {
       : "";
 
     return html`
-      <hass-subpage
+      <hass-tabs-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .header=${deviceName}
+        .tabs=${configSections.devices}
+        .route=${this.route}
       >
-
+        ${
+          this.narrow
+            ? html`
+                <span slot="header">${deviceName}</span>
                 <ha-icon-button
                   slot="toolbar-icon"
                   .path=${mdiPencil}
@@ -621,20 +627,39 @@ export class HaConfigDevicePage extends LitElement {
                     "ui.panel.config.devices.edit_settings"
                   )}
                 ></ha-icon-button>
+              `
+            : ""
+        }
         <div class="container">
           <div class="header fullwidth">
             ${
-              area
-                ? html`<div class="header-name">
-                    <a href="/config/areas/area/${area.area_id}"
-                      >${this.hass.localize(
-                        "ui.panel.config.integrations.config_entry.area",
-                        "area",
-                        area.name || "Unnamed Area"
-                      )}</a
-                    >
-                  </div>`
-                : ""
+              this.narrow
+                ? ""
+                : html`
+                    <div class="header-name">
+                      <div>
+                        <h1>${deviceName}</h1>
+                        ${area
+                          ? html`
+                              <a href="/config/areas/area/${area.area_id}"
+                                >${this.hass.localize(
+                                  "ui.panel.config.integrations.config_entry.area",
+                                  "area",
+                                  area.name || "Unnamed Area"
+                                )}</a
+                              >
+                            `
+                          : ""}
+                      </div>
+                      <ha-icon-button
+                        .path=${mdiPencil}
+                        @click=${this._showSettings}
+                        .label=${this.hass.localize(
+                          "ui.panel.config.devices.edit_settings"
+                        )}
+                      ></ha-icon-button>
+                    </div>
+                  `
             }
                 <div class="header-right">
                   ${
@@ -834,7 +859,7 @@ export class HaConfigDevicePage extends LitElement {
             </div>
           </div>
         </ha-config-section>
-      </hass-subpage>    `;
+      </hass-tabs-subpage>    `;
   }
 
   private async _getDiagnosticButtons(requestId: number): Promise<void> {
@@ -919,18 +944,7 @@ export class HaConfigDevicePage extends LitElement {
       buttons.push({
         action: async () => {
           const confirmed = await showConfirmationDialog(this, {
-            text:
-              this._integrations(device, this.entries).length > 1
-                ? this.hass.localize(
-                    `ui.panel.config.devices.confirm_delete_integration`,
-                    {
-                      integration: domainToName(
-                        this.hass.localize,
-                        entry.domain
-                      ),
-                    }
-                  )
-                : this.hass.localize(`ui.panel.config.devices.confirm_delete`),
+            text: this.hass.localize("ui.panel.config.devices.confirm_delete"),
           });
 
           if (!confirmed) {
@@ -946,7 +960,7 @@ export class HaConfigDevicePage extends LitElement {
         classes: "warning",
         icon: mdiDelete,
         label:
-          this._integrations(device, this.entries).length > 1
+          buttons.length > 1
             ? this.hass.localize(
                 `ui.panel.config.devices.delete_device_integration`,
                 {

src/panels/config/entities/entity-registry-settings.ts

@@ -872,17 +872,10 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
       name: this._name.trim() || null,
       icon: this._icon.trim() || null,
       area_id: this._areaId || null,
+      device_class: this._deviceClass || null,
       new_entity_id: this._entityId.trim(),
     };
 
-    // Only update device class if changed by user
-    if (
-      this._deviceClass !==
-      (this.entry.device_class || this.entry.original_device_class)
-    ) {
-      params.device_class = this._deviceClass;
-    }
-
     const stateObj: HassEntity | undefined =
       this.hass.states[this.entry.entity_id];
     const domain = computeDomain(this.entry.entity_id);
@@ -1058,10 +1051,9 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
         .buttons {
           box-sizing: border-box;
           display: flex;
-          padding: 24px;
-          padding-top: 16px;
+          padding: 8px 24px 24px 24px;
           justify-content: space-between;
-          padding-bottom: max(env(safe-area-inset-bottom), 24px);
+          padding-bottom: max(env(safe-area-inset-bottom), 16px);
           background-color: var(--mdc-theme-surface, #fff);
           border-top: 1px solid var(--divider-color);
           position: sticky;

src/panels/config/entities/ha-config-entities.ts

@@ -68,10 +68,9 @@ import type { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
 
-export interface StateEntity extends Omit<EntityRegistryEntry, "id"> {
+export interface StateEntity extends EntityRegistryEntry {
   readonly?: boolean;
   selectable?: boolean;
-  id?: string;
 }
 
 export interface EntityRow extends StateEntity {
@@ -303,7 +302,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
 
   private _filteredEntitiesAndDomains = memoize(
     (
-      entities: StateEntity[],
+      entities: EntityRegistryEntry[],
       devices: DeviceRegistryEntry[] | undefined,
       areas: AreaRegistryEntry[] | undefined,
       stateEntities: StateEntity[],
@@ -393,10 +392,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         result.push({
           ...entry,
           entity,
-          name: computeEntityRegistryName(
-            this.hass!,
-            entry as EntityRegistryEntry
-          ),
+          name: computeEntityRegistryName(this.hass!, entry),
           unavailable,
           restored,
           area: area ? area.name : "—",

src/panels/config/ha-panel-config.ts

@@ -319,7 +319,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       translationKey: "hardware",
       iconPath: mdiMemory,
       iconColor: "#301A8E",
-      components: ["hassio", "hardware"],
+      component: "hassio",
     },
   ],
   about: [

src/panels/config/hardware/ha-config-hardware.ts

@@ -284,38 +284,38 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
                 </ha-card>
               `
             : ""}
-          ${this._systemStatusData
-            ? html` <ha-card outlined>
-                  <div class="header">
-                    <div class="title">
-                      ${this.hass.localize(
-                        "ui.panel.config.hardware.processor"
-                      )}
-                    </div>
-                    <div class="value">
-                      ${this._systemStatusData.cpu_percent || "-"}%
-                    </div>
-                  </div>
-                  <div class="card-content">
-                    <ha-chart-base
-                      .data=${{
-                        datasets: [
-                          {
-                            ...DATA_SET_CONFIG,
-                            data: this._cpuEntries,
-                          },
-                        ],
-                      }}
-                      .options=${this._chartOptions}
-                    ></ha-chart-base>
-                  </div>
-                </ha-card>
-                <ha-card outlined>
-                  <div class="header">
-                    <div class="title">
-                      ${this.hass.localize("ui.panel.config.hardware.memory")}
-                    </div>
-                    <div class="value">
+
+          <ha-card outlined>
+            <div class="header">
+              <div class="title">
+                ${this.hass.localize("ui.panel.config.hardware.processor")}
+              </div>
+              <div class="value">
+                ${this._systemStatusData?.cpu_percent || "-"}%
+              </div>
+            </div>
+            <div class="card-content">
+              <ha-chart-base
+                .data=${{
+                  datasets: [
+                    {
+                      ...DATA_SET_CONFIG,
+                      data: this._cpuEntries,
+                    },
+                  ],
+                }}
+                .options=${this._chartOptions}
+              ></ha-chart-base>
+            </div>
+          </ha-card>
+          <ha-card outlined>
+            <div class="header">
+              <div class="title">
+                ${this.hass.localize("ui.panel.config.hardware.memory")}
+              </div>
+              <div class="value">
+                ${this._systemStatusData
+                  ? html`
                       ${round(this._systemStatusData.memory_used_mb / 1024, 1)}
                       GB /
                       ${round(
@@ -325,23 +325,24 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
                         0
                       )}
                       GB
-                    </div>
-                  </div>
-                  <div class="card-content">
-                    <ha-chart-base
-                      .data=${{
-                        datasets: [
-                          {
-                            ...DATA_SET_CONFIG,
-                            data: this._memoryEntries,
-                          },
-                        ],
-                      }}
-                      .options=${this._chartOptions}
-                    ></ha-chart-base>
-                  </div>
-                </ha-card>`
-            : ""}
+                    `
+                  : "- GB / - GB"}
+              </div>
+            </div>
+            <div class="card-content">
+              <ha-chart-base
+                .data=${{
+                  datasets: [
+                    {
+                      ...DATA_SET_CONFIG,
+                      data: this._memoryEntries,
+                    },
+                  ],
+                }}
+                .options=${this._chartOptions}
+              ></ha-chart-base>
+            </div>
+          </ha-card>
         </div>
       </hass-subpage>
     `;

src/panels/config/helpers/forms/ha-schedule-form.ts

@@ -36,6 +36,7 @@ const defaultFullCalendarConfig: CalendarOptions = {
   selectOverlap: false,
   eventOverlap: false,
   allDaySlot: false,
+  slotMinTime: "00:00:59",
   height: "parent",
   locales: allLocales,
   firstDay: 1,
@@ -177,7 +178,7 @@ class HaScheduleForm extends LitElement {
       },
       eventTimeFormat: {
         hour: useAmPm(this.hass.locale) ? "numeric" : "2-digit",
-        minute: useAmPm(this.hass.locale) ? "numeric" : "2-digit",
+        minute: undefined,
         hour12: useAmPm(this.hass.locale),
         meridiem: useAmPm(this.hass.locale) ? "narrow" : false,
       },
@@ -213,8 +214,7 @@ class HaScheduleForm extends LitElement {
       }
 
       this[`_${day}`].forEach((item: ScheduleDay, index: number) => {
-        // Add 7 to 0 because we start the calendar on Monday
-        const distance = i - currentDay + (i === 0 ? 7 : 0);
+        const distance = i - currentDay;
 
         const start = new Date();
         start.setDate(start.getDate() + distance);
@@ -227,9 +227,7 @@ class HaScheduleForm extends LitElement {
         end.setDate(end.getDate() + distance);
         end.setHours(
           parseInt(item.to.slice(0, 2)),
-          parseInt(item.to.slice(-2)),
-          0,
-          0
+          parseInt(item.to.slice(-2))
         );
 
         events.push({
@@ -383,9 +381,6 @@ class HaScheduleForm extends LitElement {
           margin: 8px 0;
           height: 450px;
           width: 100%;
-          -webkit-user-select: none;
-          -ms-user-select: none;
-          user-select: none;
         }
         .fc-scroller {
           overflow-x: visible !important;

src/panels/config/integrations/integration-panels/zha/zha-config-dashboard-router.ts

@@ -60,7 +60,7 @@ class ZHAConfigDashboardRouter extends HassRouterPage {
     } else if (this._currentPage === "device") {
       el.ieee = this.routeTail.path.substr(1);
     } else if (this._currentPage === "visualization") {
-      el.zoomedDeviceIdFromURL = this.routeTail.path.substr(1);
+      el.zoomedDeviceId = this.routeTail.path.substr(1);
     }
 
     const searchParams = new URLSearchParams(window.location.search);

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -37,10 +37,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
   @property({ type: Boolean }) public isWide!: boolean;
 
   @property()
-  public zoomedDeviceIdFromURL?: string;
-
-  @state()
-  private zoomedDeviceId?: string;
+  public zoomedDeviceId?: string;
 
   @query("#visualization", true)
   private _visualization?: HTMLElement;
@@ -67,11 +64,6 @@ export class ZHANetworkVisualizationPage extends LitElement {
   protected firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
 
-    // prevent zoomedDeviceIdFromURL from being restored to zoomedDeviceId after the user clears it
-    if (this.zoomedDeviceIdFromURL) {
-      this.zoomedDeviceId = this.zoomedDeviceIdFromURL;
-    }
-
     if (this.hass) {
       this._fetchData();
     }

src/panels/config/scene/ha-scene-dashboard.ts

@@ -11,13 +11,9 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
-import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
+import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import { navigate } from "../../../common/navigate";
-import {
-  DataTableColumnContainer,
-  RowClickedEvent,
-} from "../../../components/data-table/ha-data-table";
+import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-button-related-filter-menu";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
@@ -169,8 +165,6 @@ class HaSceneDashboard extends LitElement {
         )}
         @clear-filter=${this._clearFilter}
         hasFab
-        clickable
-        @row-click=${this._handleRowClicked}
       >
         <ha-icon-button
           slot="toolbar-icon"
@@ -202,14 +196,6 @@ class HaSceneDashboard extends LitElement {
     `;
   }
 
-  private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
-    const scene = this.scenes.find((a) => a.entity_id === ev.detail.id);
-
-    if (scene?.attributes.id) {
-      navigate(`/config/scene/edit/${scene?.attributes.id}`);
-    }
-  }
-
   private _relatedFilterChanged(ev: CustomEvent) {
     this._filterValue = ev.detail.value;
     if (!this._filterValue) {

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

@@ -63,13 +63,13 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
-import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { showToast } from "../../../util/toast";
 import "../ha-config-section";
+import { configSections } from "../ha-panel-config";
 
 interface DeviceEntities {
   id: string;
@@ -214,16 +214,17 @@ export class HaSceneEditor extends SubscribeMixin(
       this._deviceEntityLookup,
       this._deviceRegistryEntries
     );
+    const name = this._scene
+      ? computeStateName(this._scene)
+      : this.hass.localize("ui.panel.config.scene.editor.default_name");
 
     return html`
-      <hass-subpage
+      <hass-tabs-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
         .backCallback=${this._backTapped}
-        .header=${this._scene
-          ? computeStateName(this._scene)
-          : this.hass.localize("ui.panel.config.scene.editor.default_name")}
+        .tabs=${configSections.automations}
       >
         <ha-button-menu
           corner="BOTTOM_START"
@@ -271,6 +272,7 @@ export class HaSceneEditor extends SubscribeMixin(
           </mwc-list-item>
         </ha-button-menu>
         ${this._errors ? html` <div class="errors">${this._errors}</div> ` : ""}
+        ${this.narrow ? html` <span slot="header">${name}</span> ` : ""}
         <div
           id="root"
           class=${classMap({
@@ -279,7 +281,15 @@ export class HaSceneEditor extends SubscribeMixin(
         >
           ${this._config
             ? html`
-                <div class="container">
+                <ha-config-section vertical .isWide=${this.isWide}>
+                  ${!this.narrow
+                    ? html` <span slot="header">${name}</span> `
+                    : ""}
+                  <div slot="introduction">
+                    ${this.hass.localize(
+                      "ui.panel.config.scene.editor.introduction"
+                    )}
+                  </div>
                   <ha-card outlined>
                     <div class="card-content">
                       <ha-textfield
@@ -312,7 +322,7 @@ export class HaSceneEditor extends SubscribeMixin(
                       </ha-area-picker>
                     </div>
                   </ha-card>
-                </div>
+                </ha-config-section>
 
                 <ha-config-section vertical .isWide=${this.isWide}>
                   <div slot="header">
@@ -476,7 +486,7 @@ export class HaSceneEditor extends SubscribeMixin(
         >
           <ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
         </ha-fab>
-      </hass-subpage>
+      </hass-tabs-subpage>
     `;
   }
 
@@ -953,16 +963,6 @@ export class HaSceneEditor extends SubscribeMixin(
         ha-card {
           overflow: hidden;
         }
-        .container {
-          display: flex;
-          justify-content: center;
-          margin-top: 24px;
-        }
-        .container > * {
-          max-width: 1040px;
-          flex: 1 1 auto;
-        }
-
         .errors {
           padding: 20px;
           font-weight: bold;

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

@@ -18,7 +18,7 @@ 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 memoizeOne from "memoize-one";
 import { computeObjectId } from "../../../common/entity/compute_object_id";
@@ -51,13 +51,13 @@ import {
 } from "../../../data/script";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/ha-app-layout";
-import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import { HaDeviceAction } from "../automation/action/types/ha-automation-action-device_id";
+import { configSections } from "../ha-panel-config";
 import "./blueprint-script-editor";
 
 export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
@@ -168,12 +168,12 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     };
 
     return html`
-      <hass-subpage
+      <hass-tabs-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
         .backCallback=${this._backTapped}
-        .header=${!this._config?.alias ? "" : this._config.alias}
+        .tabs=${configSections.automations}
       >
         <ha-button-menu
           corner="BOTTOM_START"
@@ -192,6 +192,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
               "ui.panel.config.automation.editor.edit_ui"
             )}
             graphic="icon"
+            ?activated=${this._mode === "gui"}
           >
             ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
             ${this._mode === "gui"
@@ -209,6 +210,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
               "ui.panel.config.automation.editor.edit_yaml"
             )}
             graphic="icon"
+            ?activated=${this._mode === "yaml"}
           >
             ${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
             ${this._mode === "yaml"
@@ -227,11 +229,13 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           <mwc-list-item
             .disabled=${!this.scriptEntityId}
             .label=${this.hass.localize(
-              "ui.panel.config.script.picker.duplicate"
+              "ui.panel.config.script.picker.duplicate_script"
             )}
             graphic="icon"
           >
-            ${this.hass.localize("ui.panel.config.script.picker.duplicate")}
+            ${this.hass.localize(
+              "ui.panel.config.script.picker.duplicate_script"
+            )}
             <ha-svg-icon
               slot="graphic"
               .path=${mdiContentDuplicate}
@@ -241,12 +245,12 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           <mwc-list-item
             .disabled=${!this.scriptEntityId}
             aria-label=${this.hass.localize(
-              "ui.panel.config.script.picker.delete"
+              "ui.panel.config.script.editor.delete_script"
             )}
             class=${classMap({ warning: Boolean(this.scriptEntityId) })}
             graphic="icon"
           >
-            ${this.hass.localize("ui.panel.config.script.picker.delete")}
+            ${this.hass.localize("ui.panel.config.script.editor.delete_script")}
             <ha-svg-icon
               class=${classMap({ warning: Boolean(this.scriptEntityId) })}
               slot="graphic"
@@ -255,6 +259,9 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
             </ha-svg-icon>
           </mwc-list-item>
         </ha-button-menu>
+        ${this.narrow
+          ? html`<span slot="header">${this._config?.alias}</span>`
+          : ""}
         <div
           class="content ${classMap({
             "yaml-mode": this._mode === "yaml",
@@ -324,11 +331,11 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                             `
                           : html`
                               <div class="header">
-                                <h2 id="sequence-heading" class="name">
+                                <div class="name">
                                   ${this.hass.localize(
                                     "ui.panel.config.script.editor.sequence"
                                   )}
-                                </h2>
+                                </div>
                                 <a
                                   href=${documentationUrl(
                                     this.hass,
@@ -347,8 +354,6 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                               </div>
 
                               <ha-automation-action
-                                role="region"
-                                aria-labelledby="sequence-heading"
                                 .actions=${this._config.sequence}
                                 @value-changed=${this._sequenceChanged}
                                 .hass=${this.hass}
@@ -412,7 +417,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
         >
           <ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
         </ha-fab>
-      </hass-subpage>
+      </hass-tabs-subpage>
     `;
   }
 
@@ -826,9 +831,6 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           font-weight: 400;
           flex: 1;
         }
-        .header a {
-          color: var(--secondary-text-color);
-        }
       `,
     ];
   }

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

@@ -11,14 +11,10 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { formatDateTime } from "../../../common/datetime/format_date_time";
-import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
+import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
-import { navigate } from "../../../common/navigate";
 import { computeRTL } from "../../../common/util/compute_rtl";
-import {
-  DataTableColumnContainer,
-  RowClickedEvent,
-} from "../../../components/data-table/ha-data-table";
+import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-button-related-filter-menu";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
@@ -195,8 +191,6 @@ class HaScriptPicker extends LitElement {
         )}
         @clear-filter=${this._clearFilter}
         hasFab
-        clickable
-        @row-click=${this._handleRowClicked}
       >
         <ha-icon-button
           slot="toolbar-icon"
@@ -247,10 +241,6 @@ class HaScriptPicker extends LitElement {
     this._filterValue = undefined;
   }
 
-  private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
-    navigate(`/config/script/edit/${ev.detail.id}`);
-  }
-
   private _runScript = async (ev) => {
     ev.stopPropagation();
     const script = ev.currentTarget.script as HassEntity;

src/panels/logbook/ha-logbook-renderer.ts

@@ -34,8 +34,6 @@ import {
 } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
-import "../../components/ha-icon-next";
-import { navigate } from "../../common/navigate";
 
 declare global {
   interface HASSDomEvents {
@@ -158,26 +156,8 @@ class HaLogbookRenderer extends LitElement {
           })
         : undefined;
 
-    const traceContext =
-      triggerDomains.includes(item.domain!) &&
-      item.context_id! in this.traceContexts
-        ? this.traceContexts[item.context_id!]
-        : undefined;
-
-    const hasTrace = traceContext !== undefined;
-
     return html`
-      <div
-        class="entry-container ${classMap({ clickable: hasTrace })}"
-        .traceLink=${traceContext
-          ? `/config/${traceContext.domain}/trace/${
-              traceContext.domain === "script"
-                ? `script.${traceContext.item_id}`
-                : traceContext.item_id
-            }?run_id=${traceContext.run_id}`
-          : undefined}
-        @click=${this._handleClick}
-      >
+      <div class="entry-container">
         ${index === 0 ||
         (item?.when &&
           previous?.when &&
@@ -206,16 +186,15 @@ class HaLogbookRenderer extends LitElement {
             <div class="message-relative_time">
               <div class="message">
                 ${!this.noName // Used for more-info panel (single entity case)
-                  ? this._renderEntity(item.entity_id, item.name, hasTrace)
+                  ? this._renderEntity(item.entity_id, item.name)
                   : ""}
                 ${this._renderMessage(
                   item,
                   seenEntityIds,
                   domain,
-                  historicStateObj,
-                  hasTrace
+                  historicStateObj
                 )}
-                ${this._renderContextMessage(item, seenEntityIds, hasTrace)}
+                ${this._renderContextMessage(item, seenEntityIds)}
               </div>
               <div class="secondary">
                 <span
@@ -231,15 +210,33 @@ class HaLogbookRenderer extends LitElement {
                   capitalize
                 ></ha-relative-time>
                 ${item.context_user_id ? html`${this._renderUser(item)}` : ""}
-                ${hasTrace
-                  ? `- ${this.hass.localize(
-                      "ui.components.logbook.show_trace"
-                    )}`
+                ${triggerDomains.includes(item.domain!) &&
+                item.context_id! in this.traceContexts
+                  ? html`
+                      -
+                      <a
+                        href=${`/config/${
+                          this.traceContexts[item.context_id!].domain
+                        }/trace/${
+                          this.traceContexts[item.context_id!].domain ===
+                          "script"
+                            ? `script.${
+                                this.traceContexts[item.context_id!].item_id
+                              }`
+                            : this.traceContexts[item.context_id!].item_id
+                        }?run_id=${
+                          this.traceContexts[item.context_id!].run_id
+                        }`}
+                        @click=${this._close}
+                        >${this.hass.localize(
+                          "ui.components.logbook.show_trace"
+                        )}</a
+                      >
+                    `
                   : ""}
               </div>
             </div>
           </div>
-          ${hasTrace ? html`<ha-icon-next></ha-icon-next>` : ""}
         </div>
       </div>
     `;
@@ -261,8 +258,7 @@ class HaLogbookRenderer extends LitElement {
     item: LogbookEntry,
     seenEntityIds: string[],
     domain?: string,
-    historicStateObj?: HassEntity,
-    noLink?: boolean
+    historicStateObj?: HassEntity
   ) {
     if (item.entity_id) {
       if (item.state) {
@@ -295,8 +291,7 @@ class HaLogbookRenderer extends LitElement {
             ? stripEntityId(message, item.context_entity_id)
             : message,
           seenEntityIds,
-          undefined,
-          noLink
+          undefined
         )
       : "";
   }
@@ -312,8 +307,7 @@ class HaLogbookRenderer extends LitElement {
 
   private _renderUnseenContextSourceEntity(
     item: LogbookEntry,
-    seenEntityIds: string[],
-    noLink: boolean
+    seenEntityIds: string[]
   ) {
     if (
       !item.context_entity_id ||
@@ -326,16 +320,11 @@ class HaLogbookRenderer extends LitElement {
     // described event.
     return html` (${this._renderEntity(
       item.context_entity_id,
-      item.context_entity_id_name,
-      noLink
+      item.context_entity_id_name
     )})`;
   }
 
-  private _renderContextMessage(
-    item: LogbookEntry,
-    seenEntityIds: string[],
-    noLink: boolean
-  ) {
+  private _renderContextMessage(item: LogbookEntry, seenEntityIds: string[]) {
     // State change
     if (item.context_state) {
       const historicStateObj =
@@ -348,11 +337,7 @@ class HaLogbookRenderer extends LitElement {
       return html`${this.hass.localize(
         "ui.components.logbook.triggered_by_state_of"
       )}
-      ${this._renderEntity(
-        item.context_entity_id,
-        item.context_entity_id_name,
-        noLink
-      )}
+      ${this._renderEntity(item.context_entity_id, item.context_entity_id_name)}
       ${historicStateObj
         ? localizeStateMessage(
             this.hass,
@@ -394,17 +379,11 @@ class HaLogbookRenderer extends LitElement {
           ? "ui.components.logbook.triggered_by_automation"
           : "ui.components.logbook.triggered_by_script"
       )}
-      ${this._renderEntity(
-        item.context_entity_id,
-        item.context_entity_id_name,
-        noLink
-      )}
+      ${this._renderEntity(item.context_entity_id, item.context_entity_id_name)}
       ${item.context_message
         ? this._formatMessageWithPossibleEntity(
             contextTriggerSource,
-            seenEntityIds,
-            undefined,
-            noLink
+            seenEntityIds
           )
         : ""}`;
     }
@@ -415,16 +394,14 @@ class HaLogbookRenderer extends LitElement {
     ${this._formatMessageWithPossibleEntity(
       item.context_message,
       seenEntityIds,
-      item.context_entity_id,
-      noLink
+      item.context_entity_id
     )}
-    ${this._renderUnseenContextSourceEntity(item, seenEntityIds, noLink)}`;
+    ${this._renderUnseenContextSourceEntity(item, seenEntityIds)}`;
   }
 
   private _renderEntity(
     entityId: string | undefined,
-    entityName: string | undefined,
-    noLink?: boolean
+    entityName: string | undefined
   ) {
     const hasState = entityId && entityId in this.hass.states;
     const displayName =
@@ -435,22 +412,19 @@ class HaLogbookRenderer extends LitElement {
     if (!hasState) {
       return displayName;
     }
-    return noLink
-      ? displayName
-      : html`<button
-          class="link"
-          @click=${this._entityClicked}
-          .entityId=${entityId}
-        >
-          ${displayName}
-        </button>`;
+    return html`<button
+      class="link"
+      @click=${this._entityClicked}
+      .entityId=${entityId}
+    >
+      ${displayName}
+    </button>`;
   }
 
   private _formatMessageWithPossibleEntity(
     message: string,
     seenEntities: string[],
-    possibleEntity?: string,
-    noLink?: boolean
+    possibleEntity?: string
   ) {
     //
     // As we are looking at a log(book), we are doing entity_id
@@ -475,8 +449,7 @@ class HaLogbookRenderer extends LitElement {
           return html`${messageParts.join(" ")}
           ${this._renderEntity(
             entityId,
-            this.hass.states[entityId].attributes.friendly_name,
-            noLink
+            this.hass.states[entityId].attributes.friendly_name
           )}
           ${messageEnd.join(" ")}`;
         }
@@ -502,7 +475,7 @@ class HaLogbookRenderer extends LitElement {
           message.length - possibleEntityName.length
         );
         return html`${message}
-        ${this._renderEntity(possibleEntity, possibleEntityName, noLink)}`;
+        ${this._renderEntity(possibleEntity, possibleEntityName)}`;
       }
     }
     return message;
@@ -521,12 +494,8 @@ class HaLogbookRenderer extends LitElement {
     });
   }
 
-  _handleClick(ev) {
-    if (!ev.currentTarget.traceLink) {
-      return;
-    }
-    navigate(ev.currentTarget.traceLink);
-    fireEvent(this, "closed");
+  private _close(): void {
+    setTimeout(() => fireEvent(this, "closed"), 500);
   }
 
   static get styles(): CSSResultGroup {
@@ -551,20 +520,10 @@ class HaLogbookRenderer extends LitElement {
           padding: 8px 16px;
           box-sizing: border-box;
           border-top: 1px solid var(--divider-color);
-          justify-content: space-between;
-          align-items: center;
         }
 
-        ha-icon-next {
-          color: var(--secondary-text-color);
-        }
-
-        .clickable {
-          cursor: pointer;
-        }
-
-        :not(.clickable) .entry.no-entity,
-        :not(.clickable) .no-name .entry {
+        .entry.no-entity,
+        .no-name .entry {
           cursor: default;
         }
 

src/panels/logbook/ha-logbook.ts

@@ -377,32 +377,16 @@ export class HaLogbook extends LitElement {
       return;
     }
     const nonExpiredRecords = this._nonExpiredRecords(purgeBeforePythonTime);
-
-    // Entries are sorted in descending order with newest first.
-    if (!nonExpiredRecords.length) {
-      // We have no records left, so we can just replace the list
-      this._logbookEntries = newEntries;
-    } else if (
-      newEntries[newEntries.length - 1].when > // oldest new entry
-      nonExpiredRecords[0].when // newest old entry
-    ) {
-      // The new records are newer than the old records
-      // append the old records to the end of the new records
-      this._logbookEntries = newEntries.concat(nonExpiredRecords);
-    } else if (
-      nonExpiredRecords[nonExpiredRecords.length - 1].when > // oldest old entry
-      newEntries[0].when // newest new entry
-    ) {
-      // The new records are older than the old records
-      // append the new records to the end of the old records
-      this._logbookEntries = nonExpiredRecords.concat(newEntries);
-    } else {
-      // The new records are in the middle of the old records
-      // so we need to re-sort them
-      this._logbookEntries = nonExpiredRecords
-        .concat(newEntries)
-        .sort((a, b) => b.when - a.when);
-    }
+    this._logbookEntries = !nonExpiredRecords.length
+      ? // All existing entries expired
+        newEntries
+      : newEntries[0].when >= nonExpiredRecords[0].when
+      ? // The new records are newer than the old records
+        // append the old records to the end of the new records
+        newEntries.concat(nonExpiredRecords)
+      : // The new records are older than the old records
+        // append the new records to the end of the old records
+        nonExpiredRecords.concat(newEntries);
   };
 
   private _updateTraceContexts = throttle(async () => {

src/translations/en.json

@@ -301,7 +301,6 @@
       "refresh": "Refresh",
       "cancel": "Cancel",
       "delete": "Delete",
-      "duplicate": "Duplicate",
       "remove": "Remove",
       "enable": "Enable",
       "disable": "Disable",
@@ -1791,10 +1790,9 @@
             "edit_automation": "Edit automation",
             "dev_automation": "Debug automation",
             "show_info_automation": "Show info about automation",
-            "delete": "[%key:ui::common::delete%]",
+            "delete": "Delete",
             "delete_confirm": "Are you sure you want to delete this automation?",
-            "duplicate": "[%key:ui::common::duplicate%]",
-            "disabled": "Disabled",
+            "duplicate": "Duplicate",
             "headers": {
               "toggle": "Enable/disable",
               "name": "Name",
@@ -1824,7 +1822,7 @@
             "run": "[%key:ui::panel::config::automation::editor::actions::run%]",
             "rename": "[%key:ui::panel::config::automation::editor::triggers::rename%]",
             "show_trace": "Traces",
-            "show_info": "Information",
+            "introduction": "Use automations to bring your home to life.",
             "default_name": "New Automation",
             "missing_name": "Cannot save automation without a name",
             "load_error_not_editable": "Only automations in automations.yaml are editable.",
@@ -1836,12 +1834,6 @@
             "automation_settings": "Automation settings",
             "move_up": "Move up",
             "move_down": "Move down",
-            "re_order": "Re-order",
-            "re_order_mode": {
-              "title": "Re-order mode",
-              "description": "You are in re-order mode, you can re-order your triggers, conditions and actions.",
-              "exit": "Exit"
-            },
             "description": {
               "label": "Description",
               "placeholder": "Optional description",
@@ -1853,7 +1845,6 @@
               "no_blueprints": "You don't have any blueprints",
               "no_inputs": "This blueprint doesn't have any inputs."
             },
-            "change_mode": "Change mode",
             "modes": {
               "label": "Mode",
               "learn_more": "Learn about modes",
@@ -1876,11 +1867,11 @@
               "add": "Add trigger",
               "id": "Trigger ID",
               "edit_id": "Edit ID",
-              "duplicate": "[%key:ui::common::duplicate%]",
+              "duplicate": "Duplicate",
               "rename": "Rename",
               "change_alias": "Rename trigger",
               "alias": "Trigger name",
-              "delete": "[%key:ui::common::delete%]",
+              "delete": "[%key:ui::panel::mailbox::delete_button%]",
               "delete_confirm": "Are you sure you want to delete this?",
               "unsupported_platform": "No visual editor support for platform: {platform}",
               "type_select": "Trigger type",
@@ -1996,11 +1987,11 @@
               "testing_pass": "Condition passes",
               "invalid_condition": "Invalid condition configuration",
               "test_failed": "Error occurred while testing condition",
-              "duplicate": "[%key:ui::common::duplicate%]",
+              "duplicate": "[%key:ui::panel::config::automation::editor::triggers::duplicate%]",
               "rename": "[%key:ui::panel::config::automation::editor::triggers::rename%]",
               "change_alias": "Rename condition",
               "alias": "Condition name",
-              "delete": "[%key:ui::common::delete%]",
+              "delete": "[%key:ui::panel::mailbox::delete_button%]",
               "delete_confirm": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm%]",
               "unsupported_condition": "No visual editor support for condition: {condition}",
               "type_select": "Condition type",
@@ -2087,14 +2078,14 @@
               "run": "Run",
               "run_action_error": "Error running action",
               "run_action_success": "Action run successfully",
-              "duplicate": "[%key:ui::common::duplicate%]",
+              "duplicate": "[%key:ui::panel::config::automation::editor::triggers::duplicate%]",
               "rename": "[%key:ui::panel::config::automation::editor::triggers::rename%]",
               "change_alias": "Rename action",
               "alias": "Action name",
               "enable": "Enable",
               "disable": "Disable",
               "disabled": "Disabled",
-              "delete": "[%key:ui::common::delete%]",
+              "delete": "[%key:ui::panel::mailbox::delete_button%]",
               "delete_confirm": "[%key:ui::panel::config::automation::editor::triggers::delete_confirm%]",
               "unsupported_action": "No visual editor support for action: {action}",
               "type_select": "Action type",
@@ -2267,7 +2258,7 @@
             "header": "Script Editor",
             "introduction": "The script editor allows you to create and edit scripts. Please follow the link below to read the instructions to make sure that you have configured Home Assistant correctly.",
             "learn_more": "Learn more about scripts",
-            "no_scripts": "We couldn't find any scripts",
+            "no_scripts": "We couldn’t find any scripts",
             "add_script": "Add script",
             "show_info": "Show info about script",
             "run_script": "Run script",
@@ -2277,8 +2268,8 @@
               "name": "Name",
               "state": "State"
             },
-            "delete": "[%key:ui::common::delete%]",
-            "duplicate": "[%key:ui::common::duplicate%]"
+            "duplicate_script": "Duplicate script",
+            "duplicate": "[%key:ui::panel::config::automation::picker::duplicate%]"
           },
           "editor": {
             "alias": "Name",
@@ -2305,6 +2296,7 @@
             "load_error_not_editable": "Only scripts inside scripts.yaml are editable.",
             "load_error_unknown": "Error loading script ({err_no}).",
             "delete_confirm": "Are you sure you want to delete this script?",
+            "delete_script": "Delete script",
             "save_script": "Save script",
             "sequence": "Sequence",
             "sequence_sentence": "The sequence of actions of this script.",
@@ -2320,7 +2312,7 @@
             "introduction": "The scene editor allows you to create and edit scenes. Please follow the link below to read the instructions to make sure that you have configured Home Assistant correctly.",
             "learn_more": "Learn more about scenes",
             "pick_scene": "Pick scene to edit",
-            "no_scenes": "We couldn't find any scenes",
+            "no_scenes": "We couldn’t find any scenes",
             "add_scene": "Add scene",
             "only_editable": "Only scenes defined in scenes.yaml are editable.",
             "edit_scene": "Edit scene",
@@ -2328,7 +2320,7 @@
             "delete_scene": "Delete scene",
             "delete_confirm": "Are you sure you want to delete this scene?",
             "duplicate_scene": "Duplicate scene",
-            "duplicate": "[%key:ui::common::duplicate%]",
+            "duplicate": "Duplicate",
             "headers": {
               "activate": "Activate",
               "state": "State",
@@ -2338,6 +2330,7 @@
             }
           },
           "editor": {
+            "introduction": "Use scenes to bring your home to life.",
             "default_name": "New Scene",
             "load_error_not_editable": "Only scenes in scenes.yaml are editable.",
             "load_error_unknown": "Error loading scene ({err_no}).",
@@ -2583,7 +2576,7 @@
           "download_diagnostics": "Download diagnostics",
           "download_diagnostics_integration": "Download {integration} diagnostics",
           "delete_device": "Delete",
-          "delete_device_integration": "Remove device from {integration}",
+          "delete_device_integration": "Remove {integration} from device",
           "type": {
             "device_heading": "Device",
             "device": "device",
@@ -2660,7 +2653,6 @@
           },
           "delete": "Delete",
           "confirm_delete": "Are you sure you want to delete this device?",
-          "confirm_delete_integration": "Are you sure you want to remove this device from {integration}?",
           "picker": {
             "search": "Search devices",
             "filter": {
@@ -3860,7 +3852,7 @@
             },
             "entity": {
               "name": "Entity",
-              "description": "The Entity card gives you a quick overview of your entity's state."
+              "description": "The Entity card gives you a quick overview of your entity’s state."
             },
             "button": {
               "name": "Button",