Make sure config exists

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,4 +1,4 @@
-name: Report a bug with the UI / Dashboards
+name: Report a bug with the UI, Frontend or Lovelace
 description: Report an issue related to the Home Assistant frontend.
 labels: bug
 body:
@@ -9,7 +9,7 @@ body:
 
         If you have a feature or enhancement request for the frontend, please [start an discussion][fr] instead of creating an issue.
 
-        **Please not not report issues for custom cards.**
+        **Please not not report issues for custom Lovelace cards.**
 
         [fr]: https://github.com/home-assistant/frontend/discussions
         [releases]: https://github.com/home-assistant/home-assistant/releases

.github/ISSUE_TEMPLATE/config.yml

@@ -1,17 +1,17 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Request a feature for the UI / Dashboards
+  - name: Request a feature for the UI, Frontend or Lovelace
     url: https://github.com/home-assistant/frontend/discussions/category_choices
     about: Request an new feature for the Home Assistant frontend.
-  - name: Report a bug that is NOT related to the UI / Dashboards
+  - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
     url: https://github.com/home-assistant/core/issues
-    about: This is the issue tracker for our frontend. Please report other issues in the backend ("core") repository.
+    about: This is the issue tracker for our frontend. Please report other issues with the backend repository.
   - name: Report incorrect or missing information on our website
     url: https://github.com/home-assistant/home-assistant.io/issues
     about: Our documentation has its own issue tracker. Please report issues with the website there.
   - name: I have a question or need support
     url: https://www.home-assistant.io/help
-    about: We use GitHub for tracking bugs. Check our website for resources on getting help.
+    about: We use GitHub for tracking bugs, check our website for resources on getting help.
   - name: I'm unsure where to go
     url: https://www.home-assistant.io/join-chat
     about: If you are unsure where to go, then joining our chat is recommended; Just ask!

build-scripts/webpack.js

@@ -3,10 +3,10 @@ const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
-const log = require("fancy-log");
-const WebpackBar = require("webpackbar");
 const paths = require("./paths.js");
 const bundle = require("./bundle.js");
+const log = require("fancy-log");
+const WebpackBar = require("webpackbar");
 
 class LogStartCompilePlugin {
   ignoredFirst = false;
@@ -138,8 +138,6 @@ const createWebpackConfig = ({
         "lit/directives/cache$": "lit/directives/cache.js",
         "lit/directives/repeat$": "lit/directives/repeat.js",
         "lit/polyfill-support$": "lit/polyfill-support.js",
-        "@lit-labs/virtualizer/layouts/grid":
-          "@lit-labs/virtualizer/layouts/grid.js",
       },
     },
     output: {

gallery/src/pages/automation/describe-action.ts

@@ -62,45 +62,6 @@ const ACTIONS = [
       entity_id: "input_boolean.toggle_4",
     },
   },
-  {
-    parallel: [
-      { scene: "scene.kitchen_morning" },
-      {
-        service: "media_player.play_media",
-        target: { entity_id: "media_player.living_room" },
-        data: { media_content_id: "", media_content_type: "" },
-        metadata: { title: "Happy Song" },
-      },
-    ],
-  },
-  {
-    stop: "No one is home!",
-  },
-  { repeat: { count: 3, sequence: [{ delay: "00:00:01" }] } },
-  {
-    repeat: {
-      for_each: ["bread", "butter", "cheese"],
-      sequence: [{ delay: "00:00:01" }],
-    },
-  },
-  {
-    if: [{ condition: "state" }],
-    then: [{ delay: "00:00:01" }],
-    else: [{ delay: "00:00:05" }],
-  },
-  {
-    choose: [
-      {
-        conditions: [{ condition: "state" }],
-        sequence: [{ delay: "00:00:01" }],
-      },
-      {
-        conditions: [{ condition: "sun" }],
-        sequence: [{ delay: "00:00:05" }],
-      },
-    ],
-    default: [{ delay: "00:00:03" }],
-  },
 ];
 
 @customElement("demo-automation-describe-action")

gallery/src/pages/automation/editor-action.ts

@@ -20,10 +20,6 @@ import { HaWaitForTriggerAction } from "../../../../src/panels/config/automation
 import { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
 import { Action } from "../../../../src/data/script";
 import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition";
-import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel";
-import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if";
-import { HaStopAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-stop";
-import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media";
 
 const SCHEMAS: { name: string; actions: Action[] }[] = [
   { name: "Event", actions: [HaEventAction.defaultConfig] },
@@ -32,15 +28,11 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
   { name: "Condition", actions: [HaConditionAction.defaultConfig] },
   { name: "Delay", actions: [HaDelayAction.defaultConfig] },
   { name: "Scene", actions: [HaSceneAction.defaultConfig] },
-  { name: "Play media", actions: [HaPlayMediaAction.defaultConfig] },
   { name: "Wait", actions: [HaWaitAction.defaultConfig] },
   { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
   { name: "Repeat", actions: [HaRepeatAction.defaultConfig] },
-  { name: "If-Then", actions: [HaIfAction.defaultConfig] },
   { name: "Choose", actions: [HaChooseAction.defaultConfig] },
   { name: "Variables", actions: [{ variables: { hello: "1" } }] },
-  { name: "Parallel", actions: [HaParallelAction.defaultConfig] },
-  { name: "Stop", actions: [HaStopAction.defaultConfig] },
 ];
 
 @customElement("demo-automation-editor-action")
@@ -94,6 +86,6 @@ class DemoHaAutomationEditorAction extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-automation-editor-action": DemoHaAutomationEditorAction;
+    "demo-ha-automation-editor-action": DemoHaAutomationEditorAction;
   }
 }

gallery/src/pages/automation/editor-condition.ts

@@ -8,7 +8,7 @@ import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import type { ConditionWithShorthand } from "../../../../src/data/automation";
+import type { Condition } from "../../../../src/data/automation";
 import "../../../../src/panels/config/automation/condition/ha-automation-condition";
 import { HaDeviceCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-device";
 import { HaLogicalCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-logical";
@@ -20,7 +20,7 @@ import { HaTimeCondition } from "../../../../src/panels/config/automation/condit
 import { HaTriggerCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger";
 import { HaZoneCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-zone";
 
-const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
+const SCHEMAS: { name: string; conditions: Condition[] }[] = [
   {
     name: "State",
     conditions: [{ condition: "state", ...HaStateCondition.defaultConfig }],
@@ -69,14 +69,6 @@ const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
     name: "Trigger",
     conditions: [{ condition: "trigger", ...HaTriggerCondition.defaultConfig }],
   },
-  {
-    name: "Shorthand",
-    conditions: [
-      { and: HaLogicalCondition.defaultConfig.conditions },
-      { or: HaLogicalCondition.defaultConfig.conditions },
-      { not: HaLogicalCondition.defaultConfig.conditions },
-    ],
-  },
 ];
 
 @customElement("demo-automation-editor-condition")

hassio/src/addon-store/hassio-addon-repository.ts

@@ -68,7 +68,6 @@ class HassioAddonRepositoryEl extends LitElement {
           ${addons.map(
             (addon) => html`
               <ha-card
-                outlined
                 .addon=${addon}
                 class=${addon.available ? "" : "not_available"}
                 @click=${this._addonTapped}

hassio/src/addon-view/config/hassio-addon-audio.ts

@@ -50,7 +50,6 @@ class HassioAddonAudio extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card
-        outlined
         .header=${this.supervisor.localize("addon.configuration.audio.header")}
       >
         <div class="card-content">

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

@@ -162,7 +162,7 @@ class HassioAddonConfig extends LitElement {
         );
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card outlined>
+      <ha-card>
         <div class="header">
           <h2>
             ${this.supervisor.localize("addon.configuration.options.header")}

hassio/src/addon-view/config/hassio-addon-network.ts

@@ -58,7 +58,6 @@ class HassioAddonNetwork extends LitElement {
 
     return html`
       <ha-card
-        outlined
         .header=${this.supervisor.localize(
           "addon.configuration.network.header"
         )}

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -38,7 +38,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
     }
     return html`
       <div class="content">
-        <ha-card outlined>
+        <ha-card>
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}

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

@@ -17,9 +17,7 @@ import {
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import { setSupervisorOption } from "../../../src/data/hassio/supervisor";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-error-screen";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
@@ -168,42 +166,6 @@ class HassioAddonDashboard extends LitElement {
   protected async firstUpdated(): Promise<void> {
     if (this.route.path === "") {
       const requestedAddon = extractSearchParam("addon");
-      const requestedAddonRepository = extractSearchParam("repository_url");
-      if (
-        requestedAddonRepository &&
-        !this.supervisor.supervisor.addons_repositories.find(
-          (repo) => repo === requestedAddonRepository
-        )
-      ) {
-        if (
-          !(await showConfirmationDialog(this, {
-            title: this.supervisor.localize("my.add_addon_repository_title"),
-            text: this.supervisor.localize(
-              "my.add_addon_repository_description",
-              { addon: requestedAddon, repository: requestedAddonRepository }
-            ),
-            confirmText: this.supervisor.localize("common.add"),
-            dismissText: this.supervisor.localize("common.cancel"),
-          }))
-        ) {
-          this._error = this.supervisor.localize(
-            "my.error_repository_not_found"
-          );
-          return;
-        }
-
-        try {
-          await setSupervisorOption(this.hass, {
-            addons_repositories: [
-              ...this.supervisor.supervisor.addons_repositories,
-              requestedAddonRepository,
-            ],
-          });
-        } catch (err: any) {
-          this._error = extractApiErrorMessage(err);
-        }
-      }
-
       if (requestedAddon) {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
         const validAddon = addonsInfo.addons.some(

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

@@ -166,7 +166,7 @@ class HassioAddonInfo extends LitElement {
           `
         : ""}
 
-      <ha-card outlined>
+      <ha-card>
         <div class="card-content">
           <div class="addon-header">
             ${!this.narrow ? this.addon.name : ""}
@@ -649,7 +649,7 @@ class HassioAddonInfo extends LitElement {
 
       ${this.addon.long_description
         ? html`
-            <ha-card outlined>
+            <ha-card>
               <div class="card-content">
                 <ha-markdown
                   .content=${this.addon.long_description}

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -2,7 +2,6 @@ import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-ansi-to-html";
 import "../../../../src/components/ha-card";
 import {
   fetchHassioAddonLogs,
@@ -12,6 +11,7 @@ import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
+import "../../components/hassio-ansi-to-html";
 import { hassioStyle } from "../../resources/hassio-style";
 
 @customElement("hassio-addon-logs")
@@ -34,15 +34,15 @@ class HassioAddonLogs extends LitElement {
   protected render(): TemplateResult {
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card outlined>
+      <ha-card>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
         <div class="card-content">
           ${this._content
-            ? html`<ha-ansi-to-html
+            ? html`<hassio-ansi-to-html
                 .content=${this._content}
-              ></ha-ansi-to-html>`
+              ></hassio-ansi-to-html>`
             : ""}
         </div>
         <div class="card-actions">

hassio/src/backups/hassio-backups.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiBackupRestore, mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
+import { mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -166,15 +166,7 @@ export class HassioBackups extends LitElement {
     }
     return html`
       <hass-tabs-subpage-data-table
-        .tabs=${atLeastVersion(this.hass.config.version, 2022, 5)
-          ? [
-              {
-                translationKey: "panel.backups",
-                path: `/hassio/backups`,
-                iconPath: mdiBackupRestore,
-              },
-            ]
-          : supervisorTabs(this.hass)}
+        .tabs=${supervisorTabs(this.hass)}
         .hass=${this.hass}
         .localizeFunc=${this.supervisor.localize}
         .searchLabel=${this.supervisor.localize("search")}
@@ -190,9 +182,7 @@ export class HassioBackups extends LitElement {
         selectable
         hasFab
         .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
-        back-path=${atLeastVersion(this.hass.config.version, 2022, 5)
-          ? "/config/system"
-          : "/config"}
+        back-path="/config"
         supervisor
       >
         <ha-button-menu

hassio/src/components/hassio-ansi-to-html.ts

@@ -10,8 +10,8 @@ interface State {
   backgroundColor: null | string;
 }
 
-@customElement("ha-ansi-to-html")
-class HaAnsiToHtml extends LitElement {
+@customElement("hassio-ansi-to-html")
+class HassioAnsiToHtml extends LitElement {
   @property() public content!: string;
 
   protected render(): TemplateResult | void {
@@ -241,6 +241,6 @@ class HaAnsiToHtml extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-ansi-to-html": HaAnsiToHtml;
+    "hassio-ansi-to-html": HassioAnsiToHtml;
   }
 }

hassio/src/dashboard/hassio-addons.ts

@@ -26,7 +26,7 @@ class HassioAddons extends LitElement {
         <div class="card-group">
           ${!this.supervisor.supervisor.addons?.length
             ? html`
-                <ha-card outlined>
+                <ha-card>
                   <div class="card-content">
                     <button class="link" @click=${this._openStore}>
                       ${this.supervisor.localize("dashboard.no_addons")}
@@ -38,11 +38,7 @@ class HassioAddons extends LitElement {
                 .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
                 .map(
                   (addon) => html`
-                    <ha-card
-                      outlined
-                      .addon=${addon}
-                      @click=${this._addonTapped}
-                    >
+                    <ha-card .addon=${addon} @click=${this._addonTapped}>
                       <div class="card-content">
                         <hassio-card-content
                           .hass=${this.hass}

hassio/src/dashboard/hassio-dashboard.ts

@@ -10,7 +10,6 @@ import { HomeAssistant, Route } from "../../../src/types";
 import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addons";
 import "./hassio-update";
-import "../../../src/layouts/hass-subpage";
 
 @customElement("hassio-dashboard")
 class HassioDashboard extends LitElement {
@@ -23,31 +22,6 @@ class HassioDashboard extends LitElement {
   @property({ attribute: false }) public route!: Route;
 
   protected render(): TemplateResult {
-    if (atLeastVersion(this.hass.config.version, 2022, 5)) {
-      return html`<hass-subpage
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .route=${this.route}
-        .header=${this.supervisor.localize("panel.addons")}
-      >
-        <hassio-addons
-          .hass=${this.hass}
-          .supervisor=${this.supervisor}
-        ></hassio-addons>
-        <a href="/hassio/store">
-          <ha-fab
-            .label=${this.supervisor.localize("panel.store")}
-            extended
-            class="non-tabs"
-          >
-            <ha-svg-icon
-              slot="icon"
-              .path=${mdiStorePlus}
-            ></ha-svg-icon> </ha-fab
-        ></a>
-      </hass-subpage>`;
-    }
-
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
@@ -100,12 +74,6 @@ class HassioDashboard extends LitElement {
         .content {
           margin: 0 auto;
         }
-        ha-fab.non-tabs {
-          position: fixed;
-          right: calc(16px + env(safe-area-inset-right));
-          bottom: calc(16px + env(safe-area-inset-bottom));
-          z-index: 1;
-        }
       `,
     ];
   }

hassio/src/dashboard/hassio-update.ts

@@ -85,7 +85,7 @@ export class HassioUpdate extends LitElement {
       return html``;
     }
     return html`
-      <ha-card outlined>
+      <ha-card>
         <div class="card-content">
           <div class="icon">
             <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>

hassio/src/hassio-main.ts

@@ -3,8 +3,8 @@ import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../src/common/config/version";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../src/common/dom/fire_event";
-import { mainWindow } from "../../src/common/dom/get_main_window";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
+import { mainWindow } from "../../src/common/dom/get_main_window";
 import { navigate } from "../../src/common/navigate";
 import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
@@ -73,18 +73,6 @@ export class HassioMain extends SupervisorBaseElement {
       });
     });
 
-    // Forward keydown events to the main window for quickbar access
-    document.body.addEventListener("keydown", (ev: KeyboardEvent) => {
-      if (ev.altKey || ev.ctrlKey || ev.shiftKey || ev.metaKey) {
-        // Ignore if modifier keys are pressed
-        return;
-      }
-      // @ts-ignore
-      fireEvent(mainWindow, "hass-quick-bar-trigger", ev, {
-        bubbles: false,
-      });
-    });
-
     makeDialogManager(this, this.shadowRoot!);
   }
 

hassio/src/hassio-my-redirect.ts

@@ -15,7 +15,7 @@ import {
 } from "../../src/panels/my/ha-panel-my";
 import { HomeAssistant, Route } from "../../src/types";
 
-export const REDIRECTS: Redirects = {
+const REDIRECTS: Redirects = {
   supervisor: {
     redirect: "/hassio/dashboard",
   },
@@ -42,9 +42,6 @@ export const REDIRECTS: Redirects = {
     params: {
       addon: "string",
     },
-    optional_params: {
-      repository_url: "url",
-    },
   },
   supervisor_ingress: {
     redirect: "/hassio/ingress",
@@ -127,14 +124,6 @@ class HassioMyRedirect extends LitElement {
       }
       resultParams[key] = params[key];
     });
-    Object.entries(redirect.optional_params || {}).forEach(([key, type]) => {
-      if (params[key]) {
-        if (!this._checkParamType(type, params[key])) {
-          throw Error();
-        }
-        resultParams[key] = params[key];
-      }
-    });
     return `?${createSearchParam(resultParams)}`;
   }
 

hassio/src/hassio-tabs.ts

@@ -8,27 +8,24 @@ import { atLeastVersion } from "../../src/common/config/version";
 import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant } from "../../src/types";
 
-export const supervisorTabs = (hass: HomeAssistant): PageNavigation[] =>
-  atLeastVersion(hass.config.version, 2022, 5)
-    ? []
-    : [
-        {
-          translationKey: atLeastVersion(hass.config.version, 2021, 12)
-            ? "panel.addons"
-            : "panel.dashboard",
-          path: `/hassio/dashboard`,
-          iconPath: atLeastVersion(hass.config.version, 2021, 12)
-            ? mdiPuzzle
-            : mdiViewDashboard,
-        },
-        {
-          translationKey: "panel.backups",
-          path: `/hassio/backups`,
-          iconPath: mdiBackupRestore,
-        },
-        {
-          translationKey: "panel.system",
-          path: `/hassio/system`,
-          iconPath: mdiCogs,
-        },
-      ];
+export const supervisorTabs = (hass: HomeAssistant): PageNavigation[] => [
+  {
+    translationKey: atLeastVersion(hass.config.version, 2021, 12)
+      ? "panel.addons"
+      : "panel.dashboard",
+    path: `/hassio/dashboard`,
+    iconPath: atLeastVersion(hass.config.version, 2021, 12)
+      ? mdiPuzzle
+      : mdiViewDashboard,
+  },
+  {
+    translationKey: "panel.backups",
+    path: `/hassio/backups`,
+    iconPath: mdiBackupRestore,
+  },
+  {
+    translationKey: "panel.system",
+    path: `/hassio/system`,
+    iconPath: mdiCogs,
+  },
+];

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

@@ -48,7 +48,7 @@ class HassioCoreInfo extends LitElement {
     ];
 
     return html`
-      <ha-card header="Core" outlined>
+      <ha-card header="Core">
         <div class="card-content">
           <div>
             <ha-settings-row>

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

@@ -66,7 +66,7 @@ class HassioHostInfo extends LitElement {
       },
     ];
     return html`
-      <ha-card header="Host" outlined>
+      <ha-card header="Host">
         <div class="card-content">
           <div>
             ${this.supervisor.host.features.includes("hostname")

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

@@ -23,10 +23,6 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../src/dialogs/generic/show-dialog-box";
-import {
-  UNHEALTHY_REASON_URL,
-  UNSUPPORTED_REASON_URL,
-} from "../../../src/panels/config/system-health/ha-config-system-health";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { bytesToString } from "../../../src/util/bytes-to-string";
@@ -34,6 +30,11 @@ import { documentationUrl } from "../../../src/util/documentation-url";
 import "../components/supervisor-metric";
 import { hassioStyle } from "../resources/hassio-style";
 
+const UNSUPPORTED_REASON_URL = {};
+const UNHEALTHY_REASON_URL = {
+  privileged: "/more-info/unsupported/privileged",
+};
+
 @customElement("hassio-supervisor-info")
 class HassioSupervisorInfo extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -57,7 +58,7 @@ class HassioSupervisorInfo extends LitElement {
       },
     ];
     return html`
-      <ha-card header="Supervisor" outlined>
+      <ha-card header="Supervisor">
         <div class="card-content">
           <div>
             <ha-settings-row>

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

@@ -1,4 +1,3 @@
-import "../../../src/components/ha-ansi-to-html";
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -12,6 +11,7 @@ import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-loading-screen";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
+import "../components/hassio-ansi-to-html";
 import { hassioStyle } from "../resources/hassio-style";
 
 interface LogProvider {
@@ -65,7 +65,7 @@ class HassioSupervisorLog extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      <ha-card outlined>
+      <ha-card>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
@@ -89,8 +89,8 @@ class HassioSupervisorLog extends LitElement {
 
         <div class="card-content" id="content">
           ${this._content
-            ? html`<ha-ansi-to-html .content=${this._content}>
-              </ha-ansi-to-html>`
+            ? html`<hassio-ansi-to-html .content=${this._content}>
+              </hassio-ansi-to-html>`
             : html`<hass-loading-screen no-toolbar></hass-loading-screen>`}
         </div>
         <div class="card-actions">

hassio/src/update-available/update-available-card.ts

@@ -128,7 +128,6 @@ class UpdateAvailableCard extends LitElement {
 
     return html`
       <ha-card
-        outlined
         .header=${this.supervisor.localize("update_available.update_name", {
           name: this._name,
         })}

setup.cfg

@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220504.0
+version      = 20220420.0
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0

src/common/datetime/duration.ts

@@ -1,16 +0,0 @@
-import secondsToDuration from "./seconds_to_duration";
-
-const DAY_IN_SECONDS = 86400;
-const HOUR_IN_SECONDS = 3600;
-const MINUTE_IN_SECONDS = 60;
-
-export const UNIT_TO_SECOND_CONVERT = {
-  s: 1,
-  min: MINUTE_IN_SECONDS,
-  h: HOUR_IN_SECONDS,
-  d: DAY_IN_SECONDS,
-};
-
-export const formatDuration = (duration: string, units: string): string =>
-  secondsToDuration(parseFloat(duration) * UNIT_TO_SECOND_CONVERT[units]) ||
-  "0";

src/common/entity/compute_state_display.ts

@@ -13,7 +13,6 @@ import { formatNumber, isNumericState } from "../number/format_number";
 import { LocalizeFunc } from "../translations/localize";
 import { computeStateDomain } from "./compute_state_domain";
 import { supportsFeature } from "./supports-feature";
-import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
 
 export const computeStateDisplay = (
   localize: LocalizeFunc,
@@ -29,21 +28,6 @@ export const computeStateDisplay = (
 
   // Entities with a `unit_of_measurement` or `state_class` are numeric values and should use `formatNumber`
   if (isNumericState(stateObj)) {
-    // state is duration
-    if (
-      stateObj.attributes.device_class === "duration" &&
-      stateObj.attributes.unit_of_measurement &&
-      UNIT_TO_SECOND_CONVERT[stateObj.attributes.unit_of_measurement]
-    ) {
-      try {
-        return formatDuration(
-          compareState,
-          stateObj.attributes.unit_of_measurement
-        );
-      } catch (_err) {
-        // fallback to default
-      }
-    }
     if (stateObj.attributes.device_class === "monetary") {
       try {
         return formatNumber(compareState, locale, {

src/common/util/promise-timeout.ts

@@ -1,4 +1,4 @@
-export const promiseTimeout = (ms: number, promise: Promise<any> | any) => {
+export const promiseTimeout = (ms: number, promise: Promise<any>) => {
   const timeout = new Promise((_resolve, reject) => {
     setTimeout(() => {
       reject(`Timed out in ${ms} ms.`);

src/common/util/subscribe-polling.ts

@@ -1,18 +0,0 @@
-import { HomeAssistant } from "../../types";
-
-export const subscribePollingCollection = (
-  hass: HomeAssistant,
-  updateData: (hass: HomeAssistant) => void,
-  interval: number
-) => {
-  let timeout;
-  const fetchData = async () => {
-    try {
-      await updateData(hass);
-    } finally {
-      timeout = setTimeout(() => fetchData(), interval);
-    }
-  };
-  fetchData();
-  return () => clearTimeout(timeout);
-};

src/components/currency-datalist.ts

@@ -1,167 +1,165 @@
-export const currencies = [
-  "AED",
-  "AFN",
-  "ALL",
-  "AMD",
-  "ANG",
-  "AOA",
-  "ARS",
-  "AUD",
-  "AWG",
-  "AZN",
-  "BAM",
-  "BBD",
-  "BDT",
-  "BGN",
-  "BHD",
-  "BIF",
-  "BMD",
-  "BND",
-  "BOB",
-  "BRL",
-  "BSD",
-  "BTN",
-  "BWP",
-  "BYN",
-  "BYR",
-  "BZD",
-  "CAD",
-  "CDF",
-  "CHF",
-  "CLP",
-  "CNY",
-  "COP",
-  "CRC",
-  "CUP",
-  "CVE",
-  "CZK",
-  "DJF",
-  "DKK",
-  "DOP",
-  "DZD",
-  "EGP",
-  "ERN",
-  "ETB",
-  "EUR",
-  "FJD",
-  "FKP",
-  "GBP",
-  "GEL",
-  "GHS",
-  "GIP",
-  "GMD",
-  "GNF",
-  "GTQ",
-  "GYD",
-  "HKD",
-  "HNL",
-  "HRK",
-  "HTG",
-  "HUF",
-  "IDR",
-  "ILS",
-  "INR",
-  "IQD",
-  "IRR",
-  "ISK",
-  "JMD",
-  "JOD",
-  "JPY",
-  "KES",
-  "KGS",
-  "KHR",
-  "KMF",
-  "KPW",
-  "KRW",
-  "KWD",
-  "KYD",
-  "KZT",
-  "LAK",
-  "LBP",
-  "LKR",
-  "LRD",
-  "LSL",
-  "LTL",
-  "LYD",
-  "MAD",
-  "MDL",
-  "MGA",
-  "MKD",
-  "MMK",
-  "MNT",
-  "MOP",
-  "MRO",
-  "MUR",
-  "MVR",
-  "MWK",
-  "MXN",
-  "MYR",
-  "MZN",
-  "NAD",
-  "NGN",
-  "NIO",
-  "NOK",
-  "NPR",
-  "NZD",
-  "OMR",
-  "PAB",
-  "PEN",
-  "PGK",
-  "PHP",
-  "PKR",
-  "PLN",
-  "PYG",
-  "QAR",
-  "RON",
-  "RSD",
-  "RUB",
-  "RWF",
-  "SAR",
-  "SBD",
-  "SCR",
-  "SDG",
-  "SEK",
-  "SGD",
-  "SHP",
-  "SLL",
-  "SOS",
-  "SRD",
-  "SSP",
-  "STD",
-  "SYP",
-  "SZL",
-  "THB",
-  "TJS",
-  "TMT",
-  "TND",
-  "TOP",
-  "TRY",
-  "TTD",
-  "TWD",
-  "TZS",
-  "UAH",
-  "UGX",
-  "USD",
-  "UYU",
-  "UZS",
-  "VEF",
-  "VND",
-  "VUV",
-  "WST",
-  "XAF",
-  "XCD",
-  "XOF",
-  "XPF",
-  "YER",
-  "ZAR",
-  "ZMK",
-  "ZWL",
-];
-
 export const createCurrencyListEl = () => {
   const list = document.createElement("datalist");
   list.id = "currencies";
-  for (const currency of currencies) {
+  for (const currency of [
+    "AED",
+    "AFN",
+    "ALL",
+    "AMD",
+    "ANG",
+    "AOA",
+    "ARS",
+    "AUD",
+    "AWG",
+    "AZN",
+    "BAM",
+    "BBD",
+    "BDT",
+    "BGN",
+    "BHD",
+    "BIF",
+    "BMD",
+    "BND",
+    "BOB",
+    "BRL",
+    "BSD",
+    "BTN",
+    "BWP",
+    "BYN",
+    "BYR",
+    "BZD",
+    "CAD",
+    "CDF",
+    "CHF",
+    "CLP",
+    "CNY",
+    "COP",
+    "CRC",
+    "CUP",
+    "CVE",
+    "CZK",
+    "DJF",
+    "DKK",
+    "DOP",
+    "DZD",
+    "EGP",
+    "ERN",
+    "ETB",
+    "EUR",
+    "FJD",
+    "FKP",
+    "GBP",
+    "GEL",
+    "GHS",
+    "GIP",
+    "GMD",
+    "GNF",
+    "GTQ",
+    "GYD",
+    "HKD",
+    "HNL",
+    "HRK",
+    "HTG",
+    "HUF",
+    "IDR",
+    "ILS",
+    "INR",
+    "IQD",
+    "IRR",
+    "ISK",
+    "JMD",
+    "JOD",
+    "JPY",
+    "KES",
+    "KGS",
+    "KHR",
+    "KMF",
+    "KPW",
+    "KRW",
+    "KWD",
+    "KYD",
+    "KZT",
+    "LAK",
+    "LBP",
+    "LKR",
+    "LRD",
+    "LSL",
+    "LTL",
+    "LYD",
+    "MAD",
+    "MDL",
+    "MGA",
+    "MKD",
+    "MMK",
+    "MNT",
+    "MOP",
+    "MRO",
+    "MUR",
+    "MVR",
+    "MWK",
+    "MXN",
+    "MYR",
+    "MZN",
+    "NAD",
+    "NGN",
+    "NIO",
+    "NOK",
+    "NPR",
+    "NZD",
+    "OMR",
+    "PAB",
+    "PEN",
+    "PGK",
+    "PHP",
+    "PKR",
+    "PLN",
+    "PYG",
+    "QAR",
+    "RON",
+    "RSD",
+    "RUB",
+    "RWF",
+    "SAR",
+    "SBD",
+    "SCR",
+    "SDG",
+    "SEK",
+    "SGD",
+    "SHP",
+    "SLL",
+    "SOS",
+    "SRD",
+    "SSP",
+    "STD",
+    "SYP",
+    "SZL",
+    "THB",
+    "TJS",
+    "TMT",
+    "TND",
+    "TOP",
+    "TRY",
+    "TTD",
+    "TWD",
+    "TZS",
+    "UAH",
+    "UGX",
+    "USD",
+    "UYU",
+    "UZS",
+    "VEF",
+    "VND",
+    "VUV",
+    "WST",
+    "XAF",
+    "XCD",
+    "XOF",
+    "XPF",
+    "YER",
+    "ZAR",
+    "ZMK",
+    "ZWL",
+  ]) {
     const option = document.createElement("option");
     option.value = currency;
     option.innerHTML = currency;

src/components/data-table/ha-data-table.ts

@@ -269,8 +269,8 @@ export class HaDataTable extends LitElement {
                       @change=${this._handleHeaderRowCheckboxClick}
                       .indeterminate=${this._checkedRows.length &&
                       this._checkedRows.length !== this._checkableRowsCount}
-                      .checked=${this._checkedRows.length &&
-                      this._checkedRows.length === this._checkableRowsCount}
+                      .checked=${this._checkedRows.length ===
+                      this._checkableRowsCount}
                     >
                     </ha-checkbox>
                   </div>

src/components/device/ha-device-automation-picker.ts

@@ -5,7 +5,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 import {
   DeviceAutomation,
   deviceAutomationsEqual,
-  sortDeviceAutomations,
 } from "../../data/device_automation";
 import { HomeAssistant } from "../../types";
 import "../ha-select";
@@ -128,9 +127,7 @@ export abstract class HaDeviceAutomationPicker<
 
   private async _updateDeviceInfo() {
     this._automations = this.deviceId
-      ? (await this._fetchDeviceAutomations(this.hass, this.deviceId)).sort(
-          sortDeviceAutomations
-        )
+      ? await this._fetchDeviceAutomations(this.hass, this.deviceId)
       : // No device, clear the list of automations
         [];
 
@@ -164,9 +161,8 @@ export abstract class HaDeviceAutomationPicker<
     if (this.value && deviceAutomationsEqual(automation, this.value)) {
       return;
     }
-    const value = { ...automation };
-    delete value.metadata;
-    fireEvent(this, "value-changed", { value });
+    fireEvent(this, "change");
+    fireEvent(this, "value-changed", { value: automation });
   }
 
   static get styles(): CSSResultGroup {

src/components/device/ha-device-picker.ts

@@ -198,10 +198,9 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
           this.hass,
           deviceEntityLookup[device.id]
         ),
-        area:
-          device.area_id && areaLookup[device.area_id]
-            ? areaLookup[device.area_id].name
-            : this.hass.localize("ui.components.device-picker.no_area"),
+        area: device.area_id
+          ? areaLookup[device.area_id].name
+          : this.hass.localize("ui.components.device-picker.no_area"),
       }));
       if (!outputDevices.length) {
         return [

src/components/ha-area-picker.ts

@@ -409,7 +409,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
             name,
           });
           this._areas = [...this._areas!, area];
-          (this.comboBox as any).filteredItems = this._getAreas(
+          (this.comboBox as any).items = this._getAreas(
             this._areas!,
             this._devices!,
             this._entities!,

src/components/ha-base-time-input.ts

@@ -310,7 +310,6 @@ export class HaBaseTimeInput extends LitElement {
       border-radius: var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0 0;
       overflow: hidden;
       position: relative;
-      direction: ltr;
     }
     ha-textfield {
       width: 40px;

src/components/ha-button-menu.ts

@@ -50,21 +50,6 @@ export class HaButtonMenu extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps): void {
-    super.firstUpdated(changedProps);
-
-    if (document.dir === "rtl") {
-      this.updateComplete.then(() => {
-        this.querySelectorAll("mwc-list-item").forEach((item) => {
-          const style = document.createElement("style");
-          style.innerHTML =
-            "span.material-icons:first-of-type { margin-left: var(--mdc-list-item-graphic-margin, 32px) !important; margin-right: 0px !important;}";
-          item!.shadowRoot!.appendChild(style);
-        });
-      });
-    }
-  }
-
   private _handleClick(): void {
     if (this.disabled) {
       return;

src/components/ha-clickable-list-item.ts

@@ -12,8 +12,6 @@ export class HaClickableListItem extends ListItemBase {
   // property used only in css
   @property({ type: Boolean, reflect: true }) public rtl = false;
 
-  @property({ type: Boolean, reflect: true }) public openNewTab = false;
-
   @query("a") private _anchor!: HTMLAnchorElement;
 
   public render() {
@@ -22,12 +20,7 @@ export class HaClickableListItem extends ListItemBase {
 
     return html`${this.disableHref
       ? html`<a aria-role="option">${r}</a>`
-      : html`<a
-          aria-role="option"
-          target=${this.openNewTab ? "_blank" : ""}
-          href=${href}
-          >${r}</a
-        >`}`;
+      : html`<a aria-role="option" href=${href}>${r}</a>`}`;
   }
 
   firstUpdated() {
@@ -47,6 +40,10 @@ export class HaClickableListItem extends ListItemBase {
           padding-left: 0px;
           padding-right: 0px;
         }
+        :host([rtl]) span {
+          margin-left: var(--mdc-list-item-graphic-margin, 20px) !important;
+          margin-right: 0px !important;
+        }
         :host([graphic="avatar"]:not([twoLine])),
         :host([graphic="icon"]:not([twoLine])) {
           height: 48px;
@@ -58,17 +55,6 @@ export class HaClickableListItem extends ListItemBase {
           align-items: center;
           padding-left: var(--mdc-list-side-padding, 20px);
           padding-right: var(--mdc-list-side-padding, 20px);
-          overflow: hidden;
-        }
-        :host-context([style*="direction: rtl;"])
-          span.material-icons:first-of-type {
-          margin-left: var(--mdc-list-item-graphic-margin, 16px) !important;
-          margin-right: 0px !important;
-        }
-        :host-context([style*="direction: rtl;"])
-          span.material-icons:last-of-type {
-          margin-left: 0px !important;
-          margin-right: auto !important;
         }
       `,
     ];

src/components/ha-fab.ts

@@ -1,25 +1,24 @@
-import { FabBase } from "@material/mwc-fab/mwc-fab-base";
-import { styles } from "@material/mwc-fab/mwc-fab.css";
+import { Fab } from "@material/mwc-fab";
 import { customElement } from "lit/decorators";
 import { css } from "lit";
 
 @customElement("ha-fab")
-export class HaFab extends FabBase {
+export class HaFab extends Fab {
   protected firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
   }
 
-  static override styles = [
-    styles,
+  static override styles = Fab.styles.concat([
     css`
-      :host .mdc-fab--extended .mdc-fab__icon {
-        margin-inline-start: -8px;
-        margin-inline-end: 12px;
-        direction: var(--direction);
+      :host-context([style*="direction: rtl;"])
+        .mdc-fab--extended
+        .mdc-fab__icon {
+        margin-left: 12px !important;
+        margin-right: calc(12px - 20px) !important;
       }
     `,
-  ];
+  ]);
 }
 
 declare global {

src/components/ha-form/ha-form-string.ts

@@ -132,11 +132,6 @@ export class HaFormString extends LitElement implements HaFormElement {
         --mdc-icon-button-size: 24px;
         color: var(--secondary-text-color);
       }
-
-      :host-context([style*="direction: rtl;"]) ha-icon-button {
-        right: auto;
-        left: 12px;
-      }
     `;
   }
 }

src/components/ha-metric.ts

@@ -1,79 +0,0 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { roundWithOneDecimal } from "../util/calculate";
-import "./ha-bar";
-import "./ha-settings-row";
-
-@customElement("ha-metric")
-class HaMetric extends LitElement {
-  @property({ type: Number }) public value!: number;
-
-  @property({ type: String }) public heading!: string;
-
-  @property({ type: String }) public tooltip?: string;
-
-  protected render(): TemplateResult {
-    const roundedValue = roundWithOneDecimal(this.value);
-    return html`
-      <ha-settings-row>
-        <span slot="heading"> ${this.heading} </span>
-        <div slot="description" .title=${this.tooltip ?? ""}>
-          <span class="value"> ${roundedValue} % </span>
-          <ha-bar
-            class=${classMap({
-              "target-warning": roundedValue > 50,
-              "target-critical": roundedValue > 85,
-            })}
-            .value=${this.value}
-          ></ha-bar>
-        </div>
-      </ha-settings-row>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      ha-settings-row {
-        padding: 0;
-        height: 54px;
-        width: 100%;
-      }
-      ha-settings-row > div[slot="description"] {
-        white-space: normal;
-        color: var(--secondary-text-color);
-        display: flex;
-        justify-content: space-between;
-      }
-      ha-bar {
-        --ha-bar-primary-color: var(
-          --metric-bar-ok-color,
-          var(--success-color)
-        );
-      }
-      .target-warning {
-        --ha-bar-primary-color: var(
-          --metric-bar-warning-color,
-          var(--warning-color)
-        );
-      }
-      .target-critical {
-        --ha-bar-primary-color: var(
-          --metric-bar-critical-color,
-          var(--error-color)
-        );
-      }
-      .value {
-        width: 48px;
-        padding-right: 4px;
-        flex-shrink: 0;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-metric": HaMetric;
-  }
-}

src/components/ha-navigation-list.ts

@@ -4,9 +4,9 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { PageNavigation } from "../layouts/hass-tabs-subpage";
 import type { HomeAssistant } from "../types";
-import "./ha-clickable-list-item";
 import "./ha-icon-next";
 import "./ha-svg-icon";
+import "./ha-clickable-list-item";
 
 @customElement("ha-navigation-list")
 class HaNavigationList extends LitElement {
@@ -56,15 +56,18 @@ class HaNavigationList extends LitElement {
   }
 
   static styles: CSSResultGroup = css`
-    :host {
-      --mdc-list-vertical-padding: 0;
+    a {
+      text-decoration: none;
+      color: var(--primary-text-color);
+      position: relative;
+      display: block;
+      outline: 0;
     }
     ha-svg-icon,
     ha-icon-next {
       color: var(--secondary-text-color);
       height: 24px;
       width: 24px;
-      display: block;
     }
     ha-svg-icon {
       padding: 8px;
@@ -75,10 +78,9 @@ class HaNavigationList extends LitElement {
     .icon-background ha-svg-icon {
       color: #fff;
     }
-    ha-clickable-list-item {
+    mwc-list-item {
       cursor: pointer;
       font-size: var(--navigation-list-item-title-font-size);
-      padding: var(--navigation-list-item-padding) 0;
     }
   `;
 }

src/components/ha-network.ts

@@ -163,9 +163,6 @@ export class HaNetwork extends LitElement {
 
         ha-settings-row {
           padding: 0;
-          --paper-time-input-justify-content: flex-end;
-          --settings-row-content-display: contents;
-          --settings-row-prefix-display: contents;
         }
 
         span[slot="heading"],

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

@@ -27,8 +27,8 @@ export class HaColorTempSelector extends LitElement {
         pin
         icon="hass:thermometer"
         .caption=${this.label || ""}
-        .min=${this.selector.color_temp?.min_mireds ?? 153}
-        .max=${this.selector.color_temp?.max_mireds ?? 500}
+        .min=${this.selector.color_temp.min_mireds ?? 153}
+        .max=${this.selector.color_temp.max_mireds ?? 500}
         .value=${this.value}
         .disabled=${this.disabled}
         .helper=${this.helper}

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

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -76,13 +76,6 @@ export class HaLocationSelector extends LitElement {
     const radius = ev.detail.radius;
     fireEvent(this, "value-changed", { value: { ...this.value, radius } });
   }
-
-  static styles = css`
-    :host {
-      display: block;
-      height: 400px;
-    }
-  `;
 }
 
 declare global {

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

@@ -107,7 +107,6 @@ export class HaNumberSelector extends LitElement {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        direction: ltr;
       }
       ha-slider {
         flex: 1;

src/components/ha-service-control.ts

@@ -472,7 +472,6 @@ export class HaServiceControl extends LitElement {
       ha-settings-row {
         --paper-time-input-justify-content: flex-end;
         --settings-row-content-width: 100%;
-        --settings-row-prefix-display: contents;
         border-top: var(
           --service-control-items-border-top,
           1px solid var(--divider-color)

src/components/ha-settings-row.ts

@@ -47,7 +47,7 @@ export class HaSettingsRow extends LitElement {
         display: contents;
       }
       :host(:not([narrow])) .content {
-        display: var(--settings-row-content-display, flex);
+        display: flex;
         justify-content: flex-end;
         flex: 1;
         padding: 16px 0;
@@ -68,7 +68,7 @@ export class HaSettingsRow extends LitElement {
         white-space: normal;
       }
       .prefix-wrap {
-        display: var(--settings-row-prefix-display);
+        display: contents;
       }
       :host([narrow]) .prefix-wrap {
         display: flex;

src/components/ha-sidebar.ts

@@ -1051,6 +1051,9 @@ class HaSidebar extends LitElement {
           padding: 0px 6px;
           color: var(--text-accent-color, var(--text-primary-color));
         }
+        .configuration-badge {
+          background-color: var(--primary-color);
+        }
         ha-svg-icon + .notification-badge,
         ha-svg-icon + .configuration-badge {
           position: absolute;

src/components/media-player/dialog-media-manage.ts

@@ -302,10 +302,6 @@ class DialogMediaManage extends LitElement {
           --mdc-theme-primary: var(--mdc-theme-on-primary);
         }
 
-        mwc-list {
-          direction: ltr;
-        }
-
         .danger {
           --mdc-theme-primary: var(--error-color);
         }
@@ -314,11 +310,6 @@ class DialogMediaManage extends LitElement {
           vertical-align: middle;
         }
 
-        :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
-          margin-left: 8px !important;
-          margin-right: 0px !important;
-        }
-
         .refresh {
           display: flex;
           height: 200px;

src/components/media-player/dialog-media-player-browse.ts

@@ -151,8 +151,6 @@ class DialogMediaPlayerBrowse extends LitElement {
 
         ha-media-player-browse {
           --media-browser-max-height: calc(100vh - 65px);
-          height: calc(100vh - 65px);
-          direction: ltr;
         }
 
         @media (min-width: 800px) {
@@ -165,7 +163,6 @@ class DialogMediaPlayerBrowse extends LitElement {
           ha-media-player-browse {
             position: initial;
             --media-browser-max-height: 100vh - 137px;
-            height: 100vh - 137px;
             width: 700px;
           }
         }

src/components/media-player/ha-media-manage-button.ts

@@ -59,11 +59,6 @@ class MediaManageButton extends LitElement {
     ha-circular-progress[slot="icon"] {
       vertical-align: middle;
     }
-
-    :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
-      margin-left: 8px;
-      margin-right: 0px;
-    }
   `;
 }
 

src/components/media-player/ha-media-player-browse.ts

@@ -1,6 +1,3 @@
-import "@lit-labs/virtualizer";
-import type { LitVirtualizer } from "@lit-labs/virtualizer";
-import { grid } from "@lit-labs/virtualizer/layouts/grid";
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
@@ -19,11 +16,12 @@ import {
   eventOptions,
   property,
   query,
+  queryAll,
   state,
 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
-import { until } from "lit/directives/until";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";
@@ -47,6 +45,7 @@ import { documentationUrl } from "../../util/documentation-url";
 import "../entity/ha-entity-picker";
 import "../ha-button-menu";
 import "../ha-card";
+import type { HaCard } from "../ha-card";
 import "../ha-circular-progress";
 import "../ha-fab";
 import "../ha-icon-button";
@@ -102,9 +101,7 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @query(".content") private _content?: HTMLDivElement;
 
-  @query("lit-virtualizer") private _virtualizer?: LitVirtualizer;
-
-  private _observed = false;
+  @queryAll(".lazythumbnail") private _thumbnails?: HaCard[];
 
   private _headerOffsetHeight = 0;
 
@@ -151,6 +148,326 @@ export class HaMediaPlayerBrowse extends LitElement {
     }
   }
 
+  protected render(): TemplateResult {
+    if (this._error) {
+      return html`
+        <div class="container">${this._renderError(this._error)}</div>
+      `;
+    }
+
+    if (!this._currentItem) {
+      return html`<ha-circular-progress active></ha-circular-progress>`;
+    }
+
+    const currentItem = this._currentItem;
+
+    const subtitle = this.hass.localize(
+      `ui.components.media-browser.class.${currentItem.media_class}`
+    );
+    const children = currentItem.children || [];
+    const mediaClass = MediaClassBrowserSettings[currentItem.media_class];
+    const childrenMediaClass = currentItem.children_media_class
+      ? MediaClassBrowserSettings[currentItem.children_media_class]
+      : MediaClassBrowserSettings.directory;
+
+    return html`
+              ${
+                currentItem.can_play
+                  ? html` <div
+                      class="header ${classMap({
+                        "no-img": !currentItem.thumbnail,
+                        "no-dialog": !this.dialog,
+                      })}"
+                      @transitionend=${this._setHeaderHeight}
+                    >
+                      <div class="header-content">
+                        ${currentItem.thumbnail
+                          ? html`
+                              <div
+                                class="img"
+                                style=${styleMap({
+                                  backgroundImage: currentItem.thumbnail
+                                    ? `url(${currentItem.thumbnail})`
+                                    : "none",
+                                })}
+                              >
+                                ${this._narrow && currentItem?.can_play
+                                  ? html`
+                                      <ha-fab
+                                        mini
+                                        .item=${currentItem}
+                                        @click=${this._actionClicked}
+                                      >
+                                        <ha-svg-icon
+                                          slot="icon"
+                                          .label=${this.hass.localize(
+                                            `ui.components.media-browser.${this.action}-media`
+                                          )}
+                                          .path=${this.action === "play"
+                                            ? mdiPlay
+                                            : mdiPlus}
+                                        ></ha-svg-icon>
+                                        ${this.hass.localize(
+                                          `ui.components.media-browser.${this.action}`
+                                        )}
+                                      </ha-fab>
+                                    `
+                                  : ""}
+                              </div>
+                            `
+                          : html``}
+                        <div class="header-info">
+                          <div class="breadcrumb">
+                            <h1 class="title">${currentItem.title}</h1>
+                            ${subtitle
+                              ? html` <h2 class="subtitle">${subtitle}</h2> `
+                              : ""}
+                          </div>
+                          ${currentItem.can_play &&
+                          (!currentItem.thumbnail || !this._narrow)
+                            ? html`
+                                <mwc-button
+                                  raised
+                                  .item=${currentItem}
+                                  @click=${this._actionClicked}
+                                >
+                                  <ha-svg-icon
+                                    .label=${this.hass.localize(
+                                      `ui.components.media-browser.${this.action}-media`
+                                    )}
+                                    .path=${this.action === "play"
+                                      ? mdiPlay
+                                      : mdiPlus}
+                                  ></ha-svg-icon>
+                                  ${this.hass.localize(
+                                    `ui.components.media-browser.${this.action}`
+                                  )}
+                                </mwc-button>
+                              `
+                            : ""}
+                        </div>
+                      </div>
+                    </div>`
+                  : ""
+              }
+          <div
+            class="content"
+            @scroll=${this._scroll}
+            @touchmove=${this._scroll}
+          >
+            ${
+              this._error
+                ? html`
+                    <div class="container">
+                      ${this._renderError(this._error)}
+                    </div>
+                  `
+                : isTTSMediaSource(currentItem.media_content_id)
+                ? html`
+                    <ha-browse-media-tts
+                      .item=${currentItem}
+                      .hass=${this.hass}
+                      .action=${this.action}
+                      @tts-picked=${this._ttsPicked}
+                    ></ha-browse-media-tts>
+                  `
+                : !children.length && !currentItem.not_shown
+                ? html`
+                    <div class="container no-items">
+                      ${currentItem.media_content_id ===
+                      "media-source://media_source/local/."
+                        ? html`
+                            <div class="highlight-add-button">
+                              <span>
+                                <ha-svg-icon
+                                  .path=${mdiArrowUpRight}
+                                ></ha-svg-icon>
+                              </span>
+                              <span>
+                                ${this.hass.localize(
+                                  "ui.components.media-browser.file_management.highlight_button"
+                                )}
+                              </span>
+                            </div>
+                          `
+                        : this.hass.localize(
+                            "ui.components.media-browser.no_items"
+                          )}
+                    </div>
+                  `
+                : childrenMediaClass.layout === "grid"
+                ? html`
+                    <div
+                      class="children ${classMap({
+                        portrait:
+                          childrenMediaClass.thumbnail_ratio === "portrait",
+                      })}"
+                    >
+                      ${children.map(
+                        (child) => html`
+                          <div
+                            class="child"
+                            .item=${child}
+                            @click=${this._childClicked}
+                          >
+                            <ha-card outlined>
+                              <div class="thumbnail">
+                                ${child.thumbnail
+                                  ? html`
+                                      <div
+                                        class="${["app", "directory"].includes(
+                                          child.media_class
+                                        )
+                                          ? "centered-image"
+                                          : ""} image lazythumbnail"
+                                        data-src=${child.thumbnail}
+                                      ></div>
+                                    `
+                                  : html`
+                                      <div class="icon-holder image">
+                                        <ha-svg-icon
+                                          class="folder"
+                                          .path=${MediaClassBrowserSettings[
+                                            child.media_class === "directory"
+                                              ? child.children_media_class ||
+                                                child.media_class
+                                              : child.media_class
+                                          ].icon}
+                                        ></ha-svg-icon>
+                                      </div>
+                                    `}
+                                ${child.can_play
+                                  ? html`
+                                      <ha-icon-button
+                                        class="play ${classMap({
+                                          can_expand: child.can_expand,
+                                        })}"
+                                        .item=${child}
+                                        .label=${this.hass.localize(
+                                          `ui.components.media-browser.${this.action}-media`
+                                        )}
+                                        .path=${this.action === "play"
+                                          ? mdiPlay
+                                          : mdiPlus}
+                                        @click=${this._actionClicked}
+                                      ></ha-icon-button>
+                                    `
+                                  : ""}
+                              </div>
+                              <div class="title">
+                                ${child.title}
+                                <paper-tooltip
+                                  fitToVisibleBounds
+                                  position="top"
+                                  offset="4"
+                                  >${child.title}</paper-tooltip
+                                >
+                              </div>
+                            </ha-card>
+                          </div>
+                        `
+                      )}
+                      ${currentItem.not_shown
+                        ? html`
+                            <div class="grid not-shown">
+                              <div class="title">
+                                ${this.hass.localize(
+                                  "ui.components.media-browser.not_shown",
+                                  { count: currentItem.not_shown }
+                                )}
+                              </div>
+                            </div>
+                          `
+                        : ""}
+                    </div>
+                  `
+                : html`
+                    <mwc-list>
+                      ${children.map(
+                        (child) => html`
+                          <mwc-list-item
+                            @click=${this._childClicked}
+                            .item=${child}
+                            .graphic=${mediaClass.show_list_images
+                              ? "medium"
+                              : "avatar"}
+                            dir=${computeRTLDirection(this.hass)}
+                          >
+                            <div
+                              class=${classMap({
+                                graphic: true,
+                                lazythumbnail:
+                                  mediaClass.show_list_images === true,
+                              })}
+                              data-src=${ifDefined(
+                                mediaClass.show_list_images && child.thumbnail
+                                  ? child.thumbnail
+                                  : undefined
+                              )}
+                              slot="graphic"
+                            >
+                              <ha-icon-button
+                                class="play ${classMap({
+                                  show:
+                                    !mediaClass.show_list_images ||
+                                    !child.thumbnail,
+                                })}"
+                                .item=${child}
+                                .label=${this.hass.localize(
+                                  `ui.components.media-browser.${this.action}-media`
+                                )}
+                                .path=${this.action === "play"
+                                  ? mdiPlay
+                                  : mdiPlus}
+                                @click=${this._actionClicked}
+                              ></ha-icon-button>
+                            </div>
+                            <span class="title">${child.title}</span>
+                          </mwc-list-item>
+                          <li divider role="separator"></li>
+                        `
+                      )}
+                      ${currentItem.not_shown
+                        ? html`
+                            <mwc-list-item
+                              noninteractive
+                              class="not-shown"
+                              .graphic=${mediaClass.show_list_images
+                                ? "medium"
+                                : "avatar"}
+                              dir=${computeRTLDirection(this.hass)}
+                            >
+                              <span class="title">
+                                ${this.hass.localize(
+                                  "ui.components.media-browser.not_shown",
+                                  { count: currentItem.not_shown }
+                                )}
+                              </span>
+                            </mwc-list-item>
+                          `
+                        : ""}
+                    </mwc-list>
+                  `
+            }
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected firstUpdated(): void {
+    this._measureCard();
+    this._attachResizeObserver();
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.size > 1 || !changedProps.has("hass")) {
+      return true;
+    }
+    const oldHass = changedProps.get("hass") as this["hass"];
+    return oldHass === undefined || oldHass.localize !== this.hass.localize;
+  }
+
   public willUpdate(changedProps: PropertyValues<this>): void {
     super.willUpdate(changedProps);
 
@@ -266,19 +583,6 @@ export class HaMediaPlayerBrowse extends LitElement {
     }
   }
 
-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.size > 1 || !changedProps.has("hass")) {
-      return true;
-    }
-    const oldHass = changedProps.get("hass") as this["hass"];
-    return oldHass === undefined || oldHass.localize !== this.hass.localize;
-  }
-
-  protected firstUpdated(): void {
-    this._measureCard();
-    this._attachResizeObserver();
-  }
-
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
@@ -286,383 +590,16 @@ export class HaMediaPlayerBrowse extends LitElement {
       this._animateHeaderHeight();
     } else if (changedProps.has("_currentItem")) {
       this._setHeaderHeight();
-
-      // This fixes a race condition for resizing of the cards using the grid layout
-      if (this._observed) {
-        return;
-      }
-
-      // @ts-ignore
-      const virtualizer = this._virtualizer?._virtualizer;
-
-      if (virtualizer) {
-        this._observed = true;
-        setTimeout(() => virtualizer._observeMutations(), 0);
-      }
+      this._attachIntersectionObserver();
     }
   }
 
-  protected render(): TemplateResult {
-    if (this._error) {
-      return html`
-        <div class="container">${this._renderError(this._error)}</div>
-      `;
-    }
-
-    if (!this._currentItem) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
-    }
-
-    const currentItem = this._currentItem;
-
-    const subtitle = this.hass.localize(
-      `ui.components.media-browser.class.${currentItem.media_class}`
-    );
-    const children = currentItem.children || [];
-    const mediaClass = MediaClassBrowserSettings[currentItem.media_class];
-    const childrenMediaClass = currentItem.children_media_class
-      ? MediaClassBrowserSettings[currentItem.children_media_class]
-      : MediaClassBrowserSettings.directory;
-
-    const backgroundImage = currentItem.thumbnail
-      ? this._getSignedThumbnail(currentItem.thumbnail).then(
-          (value) => `url(${value})`
-        )
-      : "none";
-
-    return html`
-              ${
-                currentItem.can_play
-                  ? html`
-                      <div
-                        class="header ${classMap({
-                          "no-img": !currentItem.thumbnail,
-                          "no-dialog": !this.dialog,
-                        })}"
-                        @transitionend=${this._setHeaderHeight}
-                      >
-                        <div class="header-content">
-                          ${currentItem.thumbnail
-                            ? html`
-                                <div
-                                  class="img"
-                                  style="background-image: ${until(
-                                    backgroundImage,
-                                    ""
-                                  )}"
-                                >
-                                  ${this._narrow && currentItem?.can_play
-                                    ? html`
-                                        <ha-fab
-                                          mini
-                                          .item=${currentItem}
-                                          @click=${this._actionClicked}
-                                        >
-                                          <ha-svg-icon
-                                            slot="icon"
-                                            .label=${this.hass.localize(
-                                              `ui.components.media-browser.${this.action}-media`
-                                            )}
-                                            .path=${this.action === "play"
-                                              ? mdiPlay
-                                              : mdiPlus}
-                                          ></ha-svg-icon>
-                                          ${this.hass.localize(
-                                            `ui.components.media-browser.${this.action}`
-                                          )}
-                                        </ha-fab>
-                                      `
-                                    : ""}
-                                </div>
-                              `
-                            : html``}
-                          <div class="header-info">
-                            <div class="breadcrumb">
-                              <h1 class="title">${currentItem.title}</h1>
-                              ${subtitle
-                                ? html` <h2 class="subtitle">${subtitle}</h2> `
-                                : ""}
-                            </div>
-                            ${currentItem.can_play &&
-                            (!currentItem.thumbnail || !this._narrow)
-                              ? html`
-                                  <mwc-button
-                                    raised
-                                    .item=${currentItem}
-                                    @click=${this._actionClicked}
-                                  >
-                                    <ha-svg-icon
-                                      .label=${this.hass.localize(
-                                        `ui.components.media-browser.${this.action}-media`
-                                      )}
-                                      .path=${this.action === "play"
-                                        ? mdiPlay
-                                        : mdiPlus}
-                                    ></ha-svg-icon>
-                                    ${this.hass.localize(
-                                      `ui.components.media-browser.${this.action}`
-                                    )}
-                                  </mwc-button>
-                                `
-                              : ""}
-                          </div>
-                        </div>
-                      </div>
-                    `
-                  : ""
-              }
-          <div
-            class="content"
-            @scroll=${this._scroll}
-            @touchmove=${this._scroll}
-          >
-            ${
-              this._error
-                ? html`
-                    <div class="container">
-                      ${this._renderError(this._error)}
-                    </div>
-                  `
-                : isTTSMediaSource(currentItem.media_content_id)
-                ? html`
-                    <ha-browse-media-tts
-                      .item=${currentItem}
-                      .hass=${this.hass}
-                      .action=${this.action}
-                      @tts-picked=${this._ttsPicked}
-                    ></ha-browse-media-tts>
-                  `
-                : !children.length && !currentItem.not_shown
-                ? html`
-                    <div class="container no-items">
-                      ${currentItem.media_content_id ===
-                      "media-source://media_source/local/."
-                        ? html`
-                            <div class="highlight-add-button">
-                              <span>
-                                <ha-svg-icon
-                                  .path=${mdiArrowUpRight}
-                                ></ha-svg-icon>
-                              </span>
-                              <span>
-                                ${this.hass.localize(
-                                  "ui.components.media-browser.file_management.highlight_button"
-                                )}
-                              </span>
-                            </div>
-                          `
-                        : this.hass.localize(
-                            "ui.components.media-browser.no_items"
-                          )}
-                    </div>
-                  `
-                : childrenMediaClass.layout === "grid"
-                ? html`
-                    <lit-virtualizer
-                      scroller
-                      .layout=${grid({
-                        itemSize: {
-                          width: "175px",
-                          height: "225px",
-                        },
-                        gap: "16px",
-                        flex: { preserve: "aspect-ratio" },
-                        justify: "space-evenly",
-                        direction: "vertical",
-                      })}
-                      .items=${children}
-                      .renderItem=${this._renderGridItem}
-                      class="children ${classMap({
-                        portrait:
-                          childrenMediaClass.thumbnail_ratio === "portrait",
-                        not_shown: !!currentItem.not_shown,
-                      })}"
-                    ></lit-virtualizer>
-                    ${currentItem.not_shown
-                      ? html`
-                          <div class="grid not-shown">
-                            <div class="title">
-                              ${this.hass.localize(
-                                "ui.components.media-browser.not_shown",
-                                { count: currentItem.not_shown }
-                              )}
-                            </div>
-                          </div>
-                        `
-                      : ""}
-                  `
-                : html`
-                    <mwc-list>
-                      <lit-virtualizer
-                        scroller
-                        .items=${children}
-                        style=${styleMap({
-                          height: `${children.length * 72 + 26}px`,
-                        })}
-                        .renderItem=${this._renderListItem}
-                      ></lit-virtualizer>
-                      ${currentItem.not_shown
-                        ? html`
-                            <mwc-list-item
-                              noninteractive
-                              class="not-shown"
-                              .graphic=${mediaClass.show_list_images
-                                ? "medium"
-                                : "avatar"}
-                              dir=${computeRTLDirection(this.hass)}
-                            >
-                              <span class="title">
-                                ${this.hass.localize(
-                                  "ui.components.media-browser.not_shown",
-                                  { count: currentItem.not_shown }
-                                )}
-                              </span>
-                            </mwc-list-item>
-                          `
-                        : ""}
-                    </mwc-list>
-                  `
-            }
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  private _renderGridItem = (child: MediaPlayerItem): TemplateResult => {
-    const backgroundImage = child.thumbnail
-      ? this._getSignedThumbnail(child.thumbnail).then(
-          (value) => `url(${value})`
-        )
-      : "none";
-
-    return html`
-      <div class="child" .item=${child} @click=${this._childClicked}>
-        <ha-card outlined>
-          <div class="thumbnail">
-            ${child.thumbnail
-              ? html`
-                  <div
-                    class="${["app", "directory"].includes(child.media_class)
-                      ? "centered-image"
-                      : ""} image"
-                    style="background-image: ${until(backgroundImage, "")}"
-                  ></div>
-                `
-              : html`
-                  <div class="icon-holder image">
-                    <ha-svg-icon
-                      class="folder"
-                      .path=${MediaClassBrowserSettings[
-                        child.media_class === "directory"
-                          ? child.children_media_class || child.media_class
-                          : child.media_class
-                      ].icon}
-                    ></ha-svg-icon>
-                  </div>
-                `}
-            ${child.can_play
-              ? html`
-                  <ha-icon-button
-                    class="play ${classMap({
-                      can_expand: child.can_expand,
-                    })}"
-                    .item=${child}
-                    .label=${this.hass.localize(
-                      `ui.components.media-browser.${this.action}-media`
-                    )}
-                    .path=${this.action === "play" ? mdiPlay : mdiPlus}
-                    @click=${this._actionClicked}
-                  ></ha-icon-button>
-                `
-              : ""}
-          </div>
-          <div class="title">
-            ${child.title}
-            <paper-tooltip fitToVisibleBounds position="top" offset="4"
-              >${child.title}</paper-tooltip
-            >
-          </div>
-        </ha-card>
-      </div>
-    `;
-  };
-
-  private _renderListItem = (child: MediaPlayerItem): TemplateResult => {
-    const currentItem = this._currentItem;
-    const mediaClass = MediaClassBrowserSettings[currentItem!.media_class];
-
-    const backgroundImage =
-      mediaClass.show_list_images && child.thumbnail
-        ? this._getSignedThumbnail(child.thumbnail).then(
-            (value) => `url(${value})`
-          )
-        : "none";
-
-    return html`
-      <mwc-list-item
-        @click=${this._childClicked}
-        .item=${child}
-        .graphic=${mediaClass.show_list_images ? "medium" : "avatar"}
-        dir=${computeRTLDirection(this.hass)}
-      >
-        <div
-          class=${classMap({
-            graphic: true,
-            thumbnail: mediaClass.show_list_images === true,
-          })}
-          style="background-image: ${until(backgroundImage, "")}"
-          slot="graphic"
-        >
-          <ha-icon-button
-            class="play ${classMap({
-              show: !mediaClass.show_list_images || !child.thumbnail,
-            })}"
-            .item=${child}
-            .label=${this.hass.localize(
-              `ui.components.media-browser.${this.action}-media`
-            )}
-            .path=${this.action === "play" ? mdiPlay : mdiPlus}
-            @click=${this._actionClicked}
-          ></ha-icon-button>
-        </div>
-        <span class="title">${child.title}</span>
-      </mwc-list-item>
-    `;
-  };
-
-  private async _getSignedThumbnail(
-    thumbnailUrl: string | undefined
-  ): Promise<string> {
-    if (!thumbnailUrl) {
-      return "";
-    }
-
-    if (thumbnailUrl.startsWith("/")) {
-      // Thumbnails served by local API require authentication
-      return (await getSignedPath(this.hass, thumbnailUrl)).path;
-    }
-
-    if (thumbnailUrl.startsWith("https://brands.home-assistant.io")) {
-      // The backend is not aware of the theme used by the users,
-      // so we rewrite the URL to show a proper icon
-      thumbnailUrl = brandsUrl({
-        domain: extractDomainFromBrandUrl(thumbnailUrl),
-        type: "icon",
-        useFallback: true,
-        darkOptimized: this.hass.themes?.darkMode,
-      });
-    }
-
-    return thumbnailUrl;
-  }
-
-  private _actionClicked = (ev: MouseEvent): void => {
+  private _actionClicked(ev: MouseEvent): void {
     ev.stopPropagation();
     const item = (ev.currentTarget as any).item;
 
     this._runAction(item);
-  };
+  }
 
   private _runAction(item: MediaPlayerItem): void {
     fireEvent(this, "media-picked", { item, navigateIds: this.navigateIds });
@@ -678,7 +615,7 @@ export class HaMediaPlayerBrowse extends LitElement {
     });
   }
 
-  private _childClicked = async (ev: MouseEvent): Promise<void> => {
+  private async _childClicked(ev: MouseEvent): Promise<void> {
     const target = ev.currentTarget as any;
     const item: MediaPlayerItem = target.item;
 
@@ -694,7 +631,7 @@ export class HaMediaPlayerBrowse extends LitElement {
     fireEvent(this, "media-browsed", {
       ids: [...this.navigateIds, item],
     });
-  };
+  }
 
   private async _fetchData(
     entityId: string,
@@ -721,6 +658,55 @@ export class HaMediaPlayerBrowse extends LitElement {
     this._resizeObserver.observe(this);
   }
 
+  /**
+   * Load thumbnails for images on demand as they become visible.
+   */
+  private async _attachIntersectionObserver(): Promise<void> {
+    if (!("IntersectionObserver" in window) || !this._thumbnails) {
+      return;
+    }
+    if (!this._intersectionObserver) {
+      this._intersectionObserver = new IntersectionObserver(
+        async (entries, observer) => {
+          await Promise.all(
+            entries.map(async (entry) => {
+              if (!entry.isIntersecting) {
+                return;
+              }
+              const thumbnailCard = entry.target as HTMLElement;
+              let thumbnailUrl = thumbnailCard.dataset.src;
+              if (!thumbnailUrl) {
+                return;
+              }
+              if (thumbnailUrl.startsWith("/")) {
+                // Thumbnails served by local API require authentication
+                const signedPath = await getSignedPath(this.hass, thumbnailUrl);
+                thumbnailUrl = signedPath.path;
+              } else if (
+                thumbnailUrl.startsWith("https://brands.home-assistant.io")
+              ) {
+                // The backend is not aware of the theme used by the users,
+                // so we rewrite the URL to show a proper icon
+                thumbnailUrl = brandsUrl({
+                  domain: extractDomainFromBrandUrl(thumbnailUrl),
+                  type: "icon",
+                  useFallback: true,
+                  darkOptimized: this.hass.themes?.darkMode,
+                });
+              }
+              thumbnailCard.style.backgroundImage = `url(${thumbnailUrl})`;
+              observer.unobserve(thumbnailCard); // loaded, so no need to observe anymore
+            })
+          );
+        }
+      );
+    }
+    const observer = this._intersectionObserver!;
+    for (const thumbnailCard of this._thumbnails) {
+      observer.observe(thumbnailCard);
+    }
+  }
+
   private _closeDialogAction(): void {
     fireEvent(this, "close-dialog");
   }
@@ -855,7 +841,6 @@ export class HaMediaPlayerBrowse extends LitElement {
         .content {
           overflow-y: auto;
           box-sizing: border-box;
-          height: 100%;
         }
 
         /* HEADER */
@@ -941,7 +926,6 @@ export class HaMediaPlayerBrowse extends LitElement {
         .not-shown {
           font-style: italic;
           color: var(--secondary-text-color);
-          padding: 8px 16px 8px;
         }
 
         .grid.not-shown {
@@ -967,11 +951,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           border-bottom-color: var(--divider-color);
         }
 
-        mwc-list-item {
-          width: 100%;
-        }
-
-        div.children {
+        .children {
           display: grid;
           grid-template-columns: repeat(
             auto-fit,
@@ -1008,7 +988,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding-bottom: 100%;
         }
 
-        .portrait ha-card .thumbnail {
+        .portrait.children ha-card .thumbnail {
           padding-bottom: 150%;
         }
 
@@ -1082,6 +1062,10 @@ export class HaMediaPlayerBrowse extends LitElement {
           color: var(--primary-color);
         }
 
+        ha-card:hover .lazythumbnail {
+          opacity: 0.5;
+        }
+
         .child .title {
           font-size: 16px;
           padding-top: 16px;
@@ -1143,7 +1127,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding: 0 24px;
         }
 
-        :host([narrow]) div.children {
+        :host([narrow]) .children {
           grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
         }
 
@@ -1248,16 +1232,6 @@ export class HaMediaPlayerBrowse extends LitElement {
           --mdc-fab-box-shadow: none;
           --mdc-theme-secondary: rgba(var(--rgb-primary-color), 0.5);
         }
-
-        lit-virtualizer {
-          height: 100%;
-          overflow: overlay !important;
-          contain: size layout !important;
-        }
-
-        lit-virtualizer.not_shown {
-          height: calc(100% - 36px);
-        }
       `,
     ];
   }

src/components/media-player/ha-media-upload-button.ts

@@ -119,11 +119,6 @@ class MediaUploadButton extends LitElement {
     ha-circular-progress[slot="icon"] {
       vertical-align: middle;
     }
-
-    :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
-      margin-left: 8px;
-      margin-right: 0px;
-    }
   `;
 }
 

src/components/trace/ha-timeline.ts

@@ -10,8 +10,6 @@ export class HaTimeline extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public raised = false;
 
-  @property({ reflect: true, type: Boolean }) notEnabled = false;
-
   @property({ type: Boolean }) public lastItem = false;
 
   @property({ type: String }) public icon?: string;
@@ -78,9 +76,6 @@ export class HaTimeline extends LitElement {
           margin-right: 8px;
           width: 24px;
         }
-        :host([notEnabled]) ha-svg-icon {
-          opacity: 0.5;
-        }
         ha-svg-icon {
           color: var(
             --timeline-ball-color,

src/components/trace/ha-trace-path-details.ts

@@ -114,11 +114,6 @@ export class HaTracePathDetails extends LitElement {
           const { path, timestamp, result, error, changed_variables, ...rest } =
             trace as any;
 
-          if (result?.enabled === false) {
-            return html`This node was disabled and skipped during execution so
-            no further trace information is available.`;
-          }
-
           return html`
             ${curPath === this.selected.path
               ? ""

src/components/trace/hat-graph-node.ts

@@ -19,8 +19,6 @@ export class HatGraphNode extends LitElement {
 
   @property({ reflect: true, type: Boolean }) disabled?: boolean;
 
-  @property({ reflect: true, type: Boolean }) notEnabled = false;
-
   @property({ reflect: true, type: Boolean }) graphStart?: boolean;
 
   @property({ type: Boolean, attribute: "nofocus" }) noFocus = false;
@@ -116,14 +114,8 @@ export class HatGraphNode extends LitElement {
         --stroke-clr: var(--hover-clr);
         --icon-clr: var(--default-icon-clr);
       }
-      :host([notEnabled]) circle {
-        --stroke-clr: var(--disabled-clr);
-      }
-      :host([notEnabled][active]) circle {
-        --stroke-clr: var(--disabled-active-clr);
-      }
-      :host([notEnabled]:hover) circle {
-        --stroke-clr: var(--disabled-hover-clr);
+      :host([disabled]) circle {
+        stroke: var(--disabled-clr);
       }
       svg {
         width: 100%;

src/components/trace/hat-script-graph.ts

@@ -1,11 +1,7 @@
 import {
   mdiAbTesting,
-  mdiAlertOctagon,
-  mdiArrowDecision,
   mdiArrowUp,
   mdiAsterisk,
-  mdiCallMissed,
-  mdiCallReceived,
   mdiCallSplit,
   mdiCheckboxBlankOutline,
   mdiCheckboxMarkedOutline,
@@ -13,12 +9,10 @@ import {
   mdiChevronRight,
   mdiChevronUp,
   mdiClose,
-  mdiCloseOctagon,
   mdiCodeBrackets,
   mdiDevices,
   mdiExclamation,
   mdiRefresh,
-  mdiShuffleDisabled,
   mdiTimerOutline,
   mdiTrafficLight,
 } from "@mdi/js";
@@ -33,9 +27,6 @@ import {
   DelayAction,
   DeviceAction,
   EventAction,
-  IfAction,
-  ManualScriptConfig,
-  ParallelAction,
   RepeatAction,
   SceneAction,
   ServiceAction,
@@ -45,8 +36,6 @@ import {
 import {
   ChooseActionTraceStep,
   ConditionTraceStep,
-  IfActionTraceStep,
-  StopActionTraceStep,
   TraceExtended,
 } from "../../data/trace";
 import "../ha-icon-button";
@@ -96,7 +85,6 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(config, path)}
         ?active=${this.selected === path}
         .iconPath=${mdiAsterisk}
-        .notEnabled=${config.enabled === false}
         tabindex=${track ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -113,9 +101,6 @@ export class HatScriptGraph extends LitElement {
 
   private typeRenderers = {
     condition: this.render_condition_node,
-    and: this.render_condition_node,
-    or: this.render_condition_node,
-    not: this.render_condition_node,
     delay: this.render_delay_node,
     event: this.render_event_node,
     scene: this.render_scene_node,
@@ -125,37 +110,23 @@ export class HatScriptGraph extends LitElement {
     repeat: this.render_repeat_node,
     choose: this.render_choose_node,
     device_id: this.render_device_node,
-    if: this.render_if_node,
-    stop: this.render_stop_node,
-    parallel: this.render_parallel_node,
     other: this.render_other_node,
   };
 
-  private render_action_node(
-    node: Action,
-    path: string,
-    graphStart = false,
-    disabled = false
-  ) {
+  private render_action_node(node: Action, path: string, graphStart = false) {
     const type =
       Object.keys(this.typeRenderers).find((key) => key in node) || "other";
     this.renderedNodes[path] = { config: node, path };
     if (this.trace && path in this.trace.trace) {
       this.trackedNodes[path] = this.renderedNodes[path];
     }
-    return this.typeRenderers[type].bind(this)(
-      node,
-      path,
-      graphStart,
-      disabled
-    );
+    return this.typeRenderers[type].bind(this)(node, path, graphStart);
   }
 
   private render_choose_node(
     config: ChooseAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     const trace = this.trace.trace[path] as ChooseActionTraceStep[] | undefined;
     const trace_path = trace
@@ -172,14 +143,12 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(config, path)}
         ?track=${trace !== undefined}
         ?active=${this.selected === path}
-        .notEnabled=${disabled || config.enabled === false}
       >
         <hat-graph-node
           .graphStart=${graphStart}
-          .iconPath=${mdiArrowDecision}
+          .iconPath=${mdiCallSplit}
           ?track=${trace !== undefined}
           ?active=${this.selected === path}
-          .notEnabled=${disabled || config.enabled === false}
           slot="head"
           nofocus
         ></hat-graph-node>
@@ -202,15 +171,12 @@ export class HatScriptGraph extends LitElement {
                     @focus=${this.selectNode(config, branch_path)}
                     ?track=${track_this}
                     ?active=${this.selected === branch_path}
-                    .notEnabled=${disabled || config.enabled === false}
                   ></hat-graph-node>
                   ${branch.sequence !== null
                     ? ensureArray(branch.sequence).map((action, j) =>
                         this.render_action_node(
                           action,
-                          `${branch_path}/sequence/${j}`,
-                          false,
-                          disabled || config.enabled === false
+                          `${branch_path}/sequence/${j}`
                         )
                       )
                     : ""}
@@ -222,12 +188,7 @@ export class HatScriptGraph extends LitElement {
           <hat-graph-spacer ?track=${track_default}></hat-graph-spacer>
           ${config.default !== null
             ? ensureArray(config.default)?.map((action, i) =>
-                this.render_action_node(
-                  action,
-                  `${path}/default/${i}`,
-                  false,
-                  disabled || config.enabled === false
-                )
+                this.render_action_node(action, `${path}/default/${i}`)
               )
             : ""}
         </div>
@@ -235,88 +196,10 @@ export class HatScriptGraph extends LitElement {
     `;
   }
 
-  private render_if_node(
-    config: IfAction,
-    path: string,
-    graphStart = false,
-    disabled = false
-  ) {
-    const trace = this.trace.trace[path] as IfActionTraceStep[] | undefined;
-    let trackThen = false;
-    let trackElse = false;
-    for (const trc of trace || []) {
-      if (!trackThen && trc.result?.choice === "then") {
-        trackThen = true;
-      }
-      if ((!trackElse && trc.result?.choice === "else") || !trc.result) {
-        trackElse = true;
-      }
-      if (trackElse && trackThen) {
-        break;
-      }
-    }
-    return html`
-      <hat-graph-branch
-        tabindex=${trace === undefined ? "-1" : "0"}
-        @focus=${this.selectNode(config, path)}
-        ?track=${trace !== undefined}
-        ?active=${this.selected === path}
-        .notEnabled=${disabled || config.enabled === false}
-      >
-        <hat-graph-node
-          .graphStart=${graphStart}
-          .iconPath=${mdiCallSplit}
-          ?track=${trace !== undefined}
-          ?active=${this.selected === path}
-          .notEnabled=${disabled || config.enabled === false}
-          slot="head"
-          nofocus
-        ></hat-graph-node>
-        ${config.else
-          ? html`<div class="graph-container" ?track=${trackElse}>
-              <hat-graph-node
-                .iconPath=${mdiCallMissed}
-                ?track=${trackElse}
-                ?active=${this.selected === path}
-                .notEnabled=${disabled || config.enabled === false}
-                nofocus
-              ></hat-graph-node
-              >${ensureArray(config.else).map((action, j) =>
-                this.render_action_node(
-                  action,
-                  `${path}/else/${j}`,
-                  false,
-                  disabled || config.enabled === false
-                )
-              )}
-            </div>`
-          : html`<hat-graph-spacer ?track=${trackElse}></hat-graph-spacer>`}
-        <div class="graph-container" ?track=${trackThen}>
-          <hat-graph-node
-            .iconPath=${mdiCallReceived}
-            ?track=${trackThen}
-            ?active=${this.selected === path}
-            .notEnabled=${disabled || config.enabled === false}
-            nofocus
-          ></hat-graph-node>
-          ${ensureArray(config.then).map((action, j) =>
-            this.render_action_node(
-              action,
-              `${path}/then/${j}`,
-              false,
-              disabled || config.enabled === false
-            )
-          )}
-        </div>
-      </hat-graph-branch>
-    `;
-  }
-
   private render_condition_node(
     node: Condition,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     const trace = this.trace.trace[path] as ConditionTraceStep[] | undefined;
     let track = false;
@@ -342,7 +225,6 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${track}
         ?active=${this.selected === path}
-        .notEnabled=${disabled || node.enabled === false}
         tabindex=${trace === undefined ? "-1" : "0"}
         short
       >
@@ -351,7 +233,6 @@ export class HatScriptGraph extends LitElement {
           slot="head"
           ?track=${track}
           ?active=${this.selected === path}
-          .notEnabled=${disabled || node.enabled === false}
           .iconPath=${mdiAbTesting}
           nofocus
         ></hat-graph-node>
@@ -366,7 +247,6 @@ export class HatScriptGraph extends LitElement {
           nofocus
           ?track=${trackFailed}
           ?active=${this.selected === path}
-          .notEnabled=${disabled || node.enabled === false}
         ></hat-graph-node>
       </hat-graph-branch>
     `;
@@ -375,8 +255,7 @@ export class HatScriptGraph extends LitElement {
   private render_delay_node(
     node: DelayAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     return html`
       <hat-graph-node
@@ -385,7 +264,6 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
-        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -394,8 +272,7 @@ export class HatScriptGraph extends LitElement {
   private render_device_node(
     node: DeviceAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     return html`
       <hat-graph-node
@@ -404,7 +281,6 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
-        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -413,8 +289,7 @@ export class HatScriptGraph extends LitElement {
   private render_event_node(
     node: EventAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     return html`
       <hat-graph-node
@@ -423,7 +298,6 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
-        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -432,8 +306,7 @@ export class HatScriptGraph extends LitElement {
   private render_repeat_node(
     node: RepeatAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     const trace: any = this.trace.trace[path];
     const repeats = this.trace?.trace[`${path}/repeat/sequence/0`]?.length;
@@ -443,14 +316,12 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
-        .notEnabled=${disabled || node.enabled === false}
       >
         <hat-graph-node
           .graphStart=${graphStart}
           .iconPath=${mdiRefresh}
           ?track=${path in this.trace.trace}
           ?active=${this.selected === path}
-          .notEnabled=${disabled || node.enabled === false}
           slot="head"
           nofocus
         ></hat-graph-node>
@@ -458,18 +329,12 @@ export class HatScriptGraph extends LitElement {
           .iconPath=${mdiArrowUp}
           ?track=${repeats > 1}
           ?active=${this.selected === path}
-          .notEnabled=${disabled || node.enabled === false}
           nofocus
           .badge=${repeats > 1 ? repeats : undefined}
         ></hat-graph-node>
         <div ?track=${trace}>
           ${ensureArray(node.repeat.sequence).map((action, i) =>
-            this.render_action_node(
-              action,
-              `${path}/repeat/sequence/${i}`,
-              false,
-              disabled || node.enabled === false
-            )
+            this.render_action_node(action, `${path}/repeat/sequence/${i}`)
           )}
         </div>
       </hat-graph-branch>
@@ -479,8 +344,7 @@ export class HatScriptGraph extends LitElement {
   private render_scene_node(
     node: SceneAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     return html`
       <hat-graph-node
@@ -489,7 +353,6 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
-        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -498,8 +361,7 @@ export class HatScriptGraph extends LitElement {
   private render_service_node(
     node: ServiceAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     return html`
       <hat-graph-node
@@ -508,7 +370,6 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
-        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -517,8 +378,7 @@ export class HatScriptGraph extends LitElement {
   private render_wait_node(
     node: WaitAction | WaitForTriggerAction,
     path: string,
-    graphStart = false,
-    disabled = false
+    graphStart = false
   ) {
     return html`
       <hat-graph-node
@@ -527,87 +387,12 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
-        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
   }
 
-  private render_parallel_node(
-    node: ParallelAction,
-    path: string,
-    graphStart = false,
-    disabled = false
-  ) {
-    const trace: any = this.trace.trace[path];
-    return html`
-      <hat-graph-branch
-        tabindex=${trace === undefined ? "-1" : "0"}
-        @focus=${this.selectNode(node, path)}
-        ?track=${path in this.trace.trace}
-        ?active=${this.selected === path}
-        .notEnabled=${disabled || node.enabled === false}
-      >
-        <hat-graph-node
-          .graphStart=${graphStart}
-          .iconPath=${mdiShuffleDisabled}
-          ?track=${path in this.trace.trace}
-          ?active=${this.selected === path}
-          .notEnabled=${disabled || node.enabled === false}
-          slot="head"
-          nofocus
-        ></hat-graph-node>
-        ${ensureArray(node.parallel).map((action, i) =>
-          "sequence" in action
-            ? html`<div ?track=${path in this.trace.trace}>
-                ${ensureArray((action as ManualScriptConfig).sequence).map(
-                  (sAction, j) =>
-                    this.render_action_node(
-                      sAction,
-                      `${path}/parallel/${i}/sequence/${j}`,
-                      false,
-                      disabled || node.enabled === false
-                    )
-                )}
-              </div>`
-            : this.render_action_node(
-                action,
-                `${path}/parallel/${i}/sequence/0`,
-                false,
-                disabled || node.enabled === false
-              )
-        )}
-      </hat-graph-branch>
-    `;
-  }
-
-  private render_stop_node(
-    node: Action,
-    path: string,
-    graphStart = false,
-    disabled = false
-  ) {
-    const trace = this.trace.trace[path] as StopActionTraceStep[] | undefined;
-    return html`
-      <hat-graph-node
-        .graphStart=${graphStart}
-        .iconPath=${trace?.[0].result?.error
-          ? mdiAlertOctagon
-          : mdiCloseOctagon}
-        @focus=${this.selectNode(node, path)}
-        ?track=${path in this.trace.trace}
-        ?active=${this.selected === path}
-        .notEnabled=${disabled || node.enabled === false}
-      ></hat-graph-node>
-    `;
-  }
-
-  private render_other_node(
-    node: Action,
-    path: string,
-    graphStart = false,
-    disabled = false
-  ) {
+  private render_other_node(node: Action, path: string, graphStart = false) {
     return html`
       <hat-graph-node
         .graphStart=${graphStart}
@@ -615,7 +400,6 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
-        .notEnabled=${disabled || node.enabled === false}
       ></hat-graph-node>
     `;
   }
@@ -754,8 +538,6 @@ export class HatScriptGraph extends LitElement {
         --track-clr: var(--track-color, var(--accent-color));
         --hover-clr: var(--hover-color, var(--primary-color));
         --disabled-clr: var(--disabled-color, var(--disabled-text-color));
-        --disabled-active-clr: rgba(var(--rgb-primary-color), 0.5);
-        --disabled-hover-clr: rgba(var(--rgb-primary-color), 0.7);
         --default-trigger-color: 3, 169, 244;
         --rgb-trigger-color: var(--trigger-color, var(--default-trigger-color));
         --background-clr: var(--background-color, white);

src/components/trace/hat-trace-timeline.ts

@@ -25,17 +25,12 @@ import {
   ChooseAction,
   ChooseActionChoice,
   getActionType,
-  IfAction,
-  ParallelAction,
-  RepeatAction,
 } from "../../data/script";
 import { describeAction } from "../../data/script_i18n";
 import {
-  ActionTraceStep,
   AutomationTraceExtended,
   ChooseActionTraceStep,
   getDataFromPath,
-  IfActionTraceStep,
   isTriggerPath,
   TriggerTraceStep,
 } from "../../data/trace";
@@ -110,7 +105,7 @@ class LogbookRenderer {
   }
 
   get hasNext() {
-    return this.curIndex < this.logbookEntries.length;
+    return this.curIndex !== this.logbookEntries.length;
   }
 
   maybeRenderItem() {
@@ -206,7 +201,7 @@ class ActionRenderer {
   }
 
   get hasNext() {
-    return this.curIndex < this.keys.length;
+    return this.curIndex !== this.keys.length;
   }
 
   renderItem() {
@@ -219,31 +214,15 @@ class ActionRenderer {
 
   private _renderItem(
     index: number,
-    actionType?: ReturnType<typeof getActionType>,
-    renderAllIterations?: boolean
+    actionType?: ReturnType<typeof getActionType>
   ): number {
     const value = this._getItem(index);
 
-    if (renderAllIterations) {
-      let i;
-      value.forEach((item) => {
-        i = this._renderIteration(index, item, actionType);
-      });
-      return i;
-    }
-    return this._renderIteration(index, value[0], actionType);
-  }
-
-  private _renderIteration(
-    index: number,
-    value: ActionTraceStep,
-    actionType?: ReturnType<typeof getActionType>
-  ) {
-    if (isTriggerPath(value.path)) {
-      return this._handleTrigger(index, value as TriggerTraceStep);
+    if (isTriggerPath(value[0].path)) {
+      return this._handleTrigger(index, value[0] as TriggerTraceStep);
     }
 
-    const timestamp = new Date(value.timestamp);
+    const timestamp = new Date(value[0].timestamp);
 
     // Render all logbook items that are in front of this item.
     while (
@@ -256,7 +235,7 @@ class ActionRenderer {
     this.logbookRenderer.flush();
     this.timeTracker.maybeRenderTime(timestamp);
 
-    const path = value.path;
+    const path = value[0].path;
     let data;
     try {
       data = getDataFromPath(this.trace.config, path);
@@ -284,24 +263,7 @@ class ActionRenderer {
       return this._handleChoose(index);
     }
 
-    if (actionType === "repeat") {
-      return this._handleRepeat(index);
-    }
-
-    if (actionType === "if") {
-      return this._handleIf(index);
-    }
-
-    if (actionType === "parallel") {
-      return this._handleParallel(index);
-    }
-
-    this._renderEntry(
-      path,
-      describeAction(this.hass, data, actionType),
-      undefined,
-      data.enabled === false
-    );
+    this._renderEntry(path, describeAction(this.hass, data, actionType));
 
     let i = index + 1;
 
@@ -354,16 +316,10 @@ class ActionRenderer {
     const chooseConfig = this._getDataFromPath(
       this.keys[index]
     ) as ChooseAction;
-    const disabled = chooseConfig.enabled === false;
     const name = chooseConfig.alias || "Choose";
 
     if (defaultExecuted) {
-      this._renderEntry(
-        choosePath,
-        `${name}: Default action executed`,
-        undefined,
-        disabled
-      );
+      this._renderEntry(choosePath, `${name}: Default action executed`);
     } else if (chooseTrace.result) {
       const choiceNumeric =
         chooseTrace.result.choice !== "default"
@@ -375,19 +331,9 @@ class ActionRenderer {
       const choiceName = choiceConfig
         ? `${choiceConfig.alias || `Option ${choiceNumeric}`} executed`
         : `Error: ${chooseTrace.error}`;
-      this._renderEntry(
-        choosePath,
-        `${name}: ${choiceName}`,
-        undefined,
-        disabled
-      );
+      this._renderEntry(choosePath, `${name}: ${choiceName}`);
     } else {
-      this._renderEntry(
-        choosePath,
-        `${name}: No action taken`,
-        undefined,
-        disabled
-      );
+      this._renderEntry(choosePath, `${name}: No action taken`);
     }
 
     let i;
@@ -428,130 +374,14 @@ class ActionRenderer {
     return i;
   }
 
-  private _handleRepeat(index: number): number {
-    const repeatPath = this.keys[index];
-    const startLevel = repeatPath.split("/").length;
-
-    const repeatConfig = this._getDataFromPath(
-      this.keys[index]
-    ) as RepeatAction;
-    const disabled = repeatConfig.enabled === false;
-
-    const name = repeatConfig.alias || describeAction(this.hass, repeatConfig);
-
-    this._renderEntry(repeatPath, name, undefined, disabled);
-
-    let i;
-
-    for (i = index + 1; i < this.keys.length; i++) {
-      const path = this.keys[i];
-      const parts = path.split("/");
-
-      // We're done if no more sequence in current level
-      if (parts.length <= startLevel) {
-        return i;
-      }
-
-      i = this._renderItem(i, getActionType(this._getDataFromPath(path)), true);
-    }
-
-    return i;
-  }
-
-  private _handleIf(index: number): number {
-    const ifPath = this.keys[index];
-    const startLevel = ifPath.split("/").length;
-
-    const ifTrace = this._getItem(index)[0] as IfActionTraceStep;
-    const ifConfig = this._getDataFromPath(this.keys[index]) as IfAction;
-    const disabled = ifConfig.enabled === false;
-    const name = ifConfig.alias || "If";
-
-    if (ifTrace.result?.choice) {
-      const choiceConfig = this._getDataFromPath(
-        `${this.keys[index]}/${ifTrace.result.choice}/`
-      ) as any;
-      const choiceName = choiceConfig
-        ? `${choiceConfig.alias || `${ifTrace.result.choice} action executed`}`
-        : `Error: ${ifTrace.error}`;
-      this._renderEntry(ifPath, `${name}: ${choiceName}`, undefined, disabled);
-    } else {
-      this._renderEntry(
-        ifPath,
-        `${name}: No action taken`,
-        undefined,
-        disabled
-      );
-    }
-
-    let i;
-
-    // Skip over conditions
-    for (i = index + 1; i < this.keys.length; i++) {
-      const path = this.keys[i];
-      const parts = this.keys[i].split("/");
-
-      // We're done if no more sequence in current level
-      if (parts.length <= startLevel) {
-        return i;
-      }
-
-      // We're going to skip all conditions
-      if (
-        parts[startLevel + 1] === "condition" ||
-        parts.length < startLevel + 2
-      ) {
-        continue;
-      }
-
-      i = this._renderItem(i, getActionType(this._getDataFromPath(path)));
-    }
-
-    return i;
-  }
-
-  private _handleParallel(index: number): number {
-    const parallelPath = this.keys[index];
-    const startLevel = parallelPath.split("/").length;
-
-    const parallelConfig = this._getDataFromPath(
-      this.keys[index]
-    ) as ParallelAction;
-
-    const disabled = parallelConfig.enabled === false;
-
-    const name = parallelConfig.alias || "Execute in parallel";
-
-    this._renderEntry(parallelPath, name, undefined, disabled);
-
-    let i;
-
-    for (i = index + 1; i < this.keys.length; i++) {
-      const path = this.keys[i];
-      const parts = path.split("/");
-
-      // We're done if no more sequence in current level
-      if (parts.length <= startLevel) {
-        return i;
-      }
-
-      i = this._renderItem(i, getActionType(this._getDataFromPath(path)));
-    }
-
-    return i;
-  }
-
   private _renderEntry(
     path: string,
     description: string,
-    icon = mdiRecordCircleOutline,
-    disabled = false
+    icon = mdiRecordCircleOutline
   ) {
     this.entries.push(html`
-      <ha-timeline .icon=${icon} data-path=${path} .notEnabled=${disabled}>
-        ${description}${disabled
-          ? html`<span class="disabled"> (disabled)</span>`
-          : ""}
+      <ha-timeline .icon=${icon} data-path=${path}>
+        ${description}
       </ha-timeline>
     `);
   }

src/data/application_credential.ts

@@ -1,44 +0,0 @@
-import { HomeAssistant } from "../types";
-
-export interface ApplicationCredentialsConfig {
-  domains: string[];
-}
-
-export interface ApplicationCredential {
-  id: string;
-  domain: string;
-  client_id: string;
-  client_secret: string;
-}
-
-export const fetchApplicationCredentialsConfig = async (hass: HomeAssistant) =>
-  hass.callWS<ApplicationCredentialsConfig>({
-    type: "application_credentials/config",
-  });
-
-export const fetchApplicationCredentials = async (hass: HomeAssistant) =>
-  hass.callWS<ApplicationCredential[]>({
-    type: "application_credentials/list",
-  });
-
-export const createApplicationCredential = async (
-  hass: HomeAssistant,
-  domain: string,
-  clientId: string,
-  clientSecret: string
-) =>
-  hass.callWS<ApplicationCredential>({
-    type: "application_credentials/create",
-    domain,
-    client_id: clientId,
-    client_secret: clientSecret,
-  });
-
-export const deleteApplicationCredential = async (
-  hass: HomeAssistant,
-  applicationCredentialsId: string
-) =>
-  hass.callWS<void>({
-    type: "application_credentials/delete",
-    application_credentials_id: applicationCredentialsId,
-  });

src/data/automation.ts

@@ -65,7 +65,6 @@ export interface BaseTrigger {
   platform: string;
   id?: string;
   variables?: Record<string, unknown>;
-  enabled?: boolean;
 }
 
 export interface StateTrigger extends BaseTrigger {
@@ -153,12 +152,6 @@ export interface EventTrigger extends BaseTrigger {
   context?: ContextConstraint;
 }
 
-export interface CalendarTrigger extends BaseTrigger {
-  platform: "calendar";
-  event: "start" | "end";
-  entity_id: string;
-}
-
 export type Trigger =
   | StateTrigger
   | MqttTrigger
@@ -173,13 +166,11 @@ export type Trigger =
   | TimeTrigger
   | TemplateTrigger
   | EventTrigger
-  | DeviceTrigger
-  | CalendarTrigger;
+  | DeviceTrigger;
 
 interface BaseCondition {
   condition: string;
   alias?: string;
-  enabled?: boolean;
 }
 
 export interface LogicalCondition extends BaseCondition {
@@ -235,24 +226,6 @@ export interface TriggerCondition extends BaseCondition {
   id: string;
 }
 
-type ShorthandBaseCondition = Omit<BaseCondition, "condition">;
-
-export interface ShorthandAndConditionList extends ShorthandBaseCondition {
-  condition: Condition[];
-}
-
-export interface ShorthandAndCondition extends ShorthandBaseCondition {
-  and: Condition[];
-}
-
-export interface ShorthandOrCondition extends ShorthandBaseCondition {
-  or: Condition[];
-}
-
-export interface ShorthandNotCondition extends ShorthandBaseCondition {
-  not: Condition[];
-}
-
 export type Condition =
   | StateCondition
   | NumericStateCondition
@@ -264,35 +237,6 @@ export type Condition =
   | LogicalCondition
   | TriggerCondition;
 
-export type ConditionWithShorthand =
-  | Condition
-  | ShorthandAndConditionList
-  | ShorthandAndCondition
-  | ShorthandOrCondition
-  | ShorthandNotCondition;
-
-export const expandConditionWithShorthand = (
-  cond: ConditionWithShorthand
-): Condition => {
-  if ("condition" in cond && Array.isArray(cond.condition)) {
-    return {
-      condition: "and",
-      conditions: cond.condition,
-    };
-  }
-
-  for (const condition of ["and", "or", "not"]) {
-    if (condition in cond) {
-      return {
-        condition,
-        conditions: cond[condition],
-      } as Condition;
-    }
-  }
-
-  return cond as Condition;
-};
-
 export const triggerAutomationActions = (
   hass: HomeAssistant,
   entityId: string

src/data/device_automation.ts

@@ -11,8 +11,6 @@ export interface DeviceAutomation {
   type?: string;
   subtype?: string;
   event?: string;
-  enabled?: boolean;
-  metadata?: { secondary: boolean };
 }
 
 export interface DeviceAction extends DeviceAutomation {
@@ -181,16 +179,3 @@ export const localizeDeviceAutomationTrigger = (
     (trigger.subtype ? `"${trigger.subtype}" ${trigger.type}` : trigger.type!)
   );
 };
-
-export const sortDeviceAutomations = (
-  automationA: DeviceAutomation,
-  automationB: DeviceAutomation
-) => {
-  if (automationA.metadata?.secondary && !automationB.metadata?.secondary) {
-    return 1;
-  }
-  if (!automationA.metadata?.secondary && automationB.metadata?.secondary) {
-    return -1;
-  }
-  return 0;
-};

src/data/error_log.ts

@@ -1,9 +1,4 @@
 import { HomeAssistant } from "../types";
 
-export interface LogProvider {
-  key: string;
-  name: string;
-}
-
 export const fetchErrorLog = (hass: HomeAssistant) =>
   hass.callApi<string>("GET", "error_log");

src/data/hardware.ts

@@ -1,22 +0,0 @@
-// Keep in sync with https://github.com/home-assistant/analytics.home-assistant.io/blob/dev/site/src/analytics-os-boards.ts#L6-L24
-export const BOARD_NAMES: Record<string, string> = {
-  "odroid-n2": "Home Assistant Blue / ODROID-N2",
-  "odroid-xu4": "ODROID-XU4",
-  "odroid-c2": "ODROID-C2",
-  "odroid-c4": "ODROID-C4",
-  rpi: "Raspberry Pi",
-  rpi0: "Raspberry Pi Zero",
-  "rpi0-w": "Raspberry Pi Zero W",
-  rpi2: "Raspberry Pi 2",
-  rpi3: "Raspberry Pi 3 (32-bit)",
-  "rpi3-64": "Raspberry Pi 3",
-  rpi4: "Raspberry Pi 4 (32-bit)",
-  "rpi4-64": "Raspberry Pi 4",
-  tinker: "ASUS Tinker Board",
-  "khadas-vim3": "Khadas VIM3",
-  "generic-aarch64": "Generic AArch64",
-  ova: "Virtual Machine",
-  "generic-x86-64": "Generic x86-64",
-  "intel-nuc": "Intel NUC",
-  yellow: "Home Assistant Yellow",
-};

src/data/hassio/supervisor.ts

@@ -1,7 +1,7 @@
 import { atLeastVersion } from "../../common/config/version";
 import { HomeAssistant, PanelInfo } from "../../types";
 import { SupervisorArch } from "../supervisor/supervisor";
-import { HassioAddonInfo } from "./addon";
+import { HassioAddonInfo, HassioAddonRepository } from "./addon";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
 export type HassioHomeAssistantInfo = {
@@ -23,7 +23,7 @@ export type HassioHomeAssistantInfo = {
 
 export type HassioSupervisorInfo = {
   addons: HassioAddonInfo[];
-  addons_repositories: string[];
+  addons_repositories: HassioAddonRepository[];
   arch: SupervisorArch;
   channel: string;
   debug: boolean;
@@ -179,10 +179,7 @@ export const fetchHassioInfo = async (
 };
 
 export const fetchHassioLogs = async (hass: HomeAssistant, provider: string) =>
-  hass.callApi<string>(
-    "GET",
-    `hassio/${provider.includes("_") ? `addons/${provider}` : provider}/logs`
-  );
+  hass.callApi<string>("GET", `hassio/${provider}/logs`);
 
 export const setSupervisorOption = async (
   hass: HomeAssistant,

src/data/logbook.ts

@@ -46,6 +46,7 @@ export const getLogbookDataForContext = async (
       startDate,
       undefined,
       undefined,
+      undefined,
       contextId
     )
   );
@@ -55,13 +56,20 @@ export const getLogbookData = async (
   hass: HomeAssistant,
   startDate: string,
   endDate: string,
-  entityId?: string
+  entityId?: string,
+  entity_matches_only?: boolean
 ): Promise<LogbookEntry[]> => {
   const localize = await hass.loadBackendTranslation("device_class");
   return addLogbookMessage(
     hass,
     localize,
-    await getLogbookDataCache(hass, startDate, endDate, entityId)
+    await getLogbookDataCache(
+      hass,
+      startDate,
+      endDate,
+      entityId,
+      entity_matches_only
+    )
   );
 };
 
@@ -89,7 +97,8 @@ export const getLogbookDataCache = async (
   hass: HomeAssistant,
   startDate: string,
   endDate: string,
-  entityId?: string
+  entityId?: string,
+  entity_matches_only?: boolean
 ) => {
   const ALL_ENTITIES = "*";
 
@@ -116,7 +125,8 @@ export const getLogbookDataCache = async (
     hass,
     startDate,
     endDate,
-    entityId !== ALL_ENTITIES ? entityId : undefined
+    entityId !== ALL_ENTITIES ? entityId : undefined,
+    entity_matches_only
   ).then((entries) => entries.reverse());
   return DATA_CACHE[cacheKey][entityId];
 };
@@ -126,6 +136,7 @@ const getLogbookDataFromServer = async (
   startDate: string,
   endDate?: string,
   entityId?: string,
+  entitymatchesOnly?: boolean,
   contextId?: string
 ) => {
   const params = new URLSearchParams();
@@ -136,6 +147,9 @@ const getLogbookDataFromServer = async (
   if (entityId) {
     params.append("entity", entityId);
   }
+  if (entitymatchesOnly) {
+    params.append("entity_matches_only", "");
+  }
   if (contextId) {
     params.append("context_id", contextId);
   }

src/data/script.ts

@@ -13,18 +13,11 @@ import {
   literal,
   is,
   Describe,
-  boolean,
 } from "superstruct";
 import { computeObjectId } from "../common/entity/compute_object_id";
 import { navigate } from "../common/navigate";
 import { HomeAssistant } from "../types";
-import {
-  Condition,
-  ShorthandAndCondition,
-  ShorthandNotCondition,
-  ShorthandOrCondition,
-  Trigger,
-} from "./automation";
+import { Condition, Trigger } from "./automation";
 import { BlueprintInput } from "./blueprint";
 
 export const MODES = ["single", "restart", "queued", "parallel"] as const;
@@ -32,7 +25,6 @@ export const MODES_MAX = ["queued", "parallel"];
 
 export const baseActionStruct = object({
   alias: optional(string()),
-  enabled: optional(boolean()),
 });
 
 const targetStruct = object({
@@ -96,18 +88,15 @@ export interface BlueprintScriptConfig extends ManualScriptConfig {
   use_blueprint: { path: string; input?: BlueprintInput };
 }
 
-interface BaseAction {
+export interface EventAction {
   alias?: string;
-  enabled?: boolean;
-}
-
-export interface EventAction extends BaseAction {
   event: string;
   event_data?: Record<string, any>;
   event_data_template?: Record<string, any>;
 }
 
-export interface ServiceAction extends BaseAction {
+export interface ServiceAction {
+  alias?: string;
   service?: string;
   service_template?: string;
   entity_id?: string;
@@ -115,48 +104,55 @@ export interface ServiceAction extends BaseAction {
   data?: Record<string, unknown>;
 }
 
-export interface DeviceAction extends BaseAction {
+export interface DeviceAction {
+  alias?: string;
   type: string;
   device_id: string;
   domain: string;
   entity_id: string;
 }
 
-export interface DelayActionParts extends BaseAction {
+export interface DelayActionParts {
   milliseconds?: number;
   seconds?: number;
   minutes?: number;
   hours?: number;
   days?: number;
 }
-export interface DelayAction extends BaseAction {
+export interface DelayAction {
+  alias?: string;
   delay: number | Partial<DelayActionParts> | string;
 }
 
-export interface ServiceSceneAction extends BaseAction {
+export interface ServiceSceneAction {
+  alias?: string;
   service: "scene.turn_on";
   target?: { entity_id?: string };
   entity_id?: string;
   metadata: Record<string, unknown>;
 }
-export interface LegacySceneAction extends BaseAction {
+export interface LegacySceneAction {
+  alias?: string;
   scene: string;
 }
 export type SceneAction = ServiceSceneAction | LegacySceneAction;
 
-export interface WaitAction extends BaseAction {
+export interface WaitAction {
+  alias?: string;
   wait_template: string;
   timeout?: number;
   continue_on_timeout?: boolean;
 }
 
-export interface WaitForTriggerAction extends BaseAction {
+export interface WaitForTriggerAction {
+  alias?: string;
   wait_for_trigger: Trigger | Trigger[];
   timeout?: number;
   continue_on_timeout?: boolean;
 }
 
-export interface PlayMediaAction extends BaseAction {
+export interface PlayMediaAction {
+  alias?: string;
   service: "media_player.play_media";
   target?: { entity_id?: string };
   entity_id?: string;
@@ -164,11 +160,13 @@ export interface PlayMediaAction extends BaseAction {
   metadata: Record<string, unknown>;
 }
 
-export interface RepeatAction extends BaseAction {
-  repeat: CountRepeat | WhileRepeat | UntilRepeat | ForEachRepeat;
+export interface RepeatAction {
+  alias?: string;
+  repeat: CountRepeat | WhileRepeat | UntilRepeat;
 }
 
-interface BaseRepeat extends BaseAction {
+interface BaseRepeat {
+  alias?: string;
   sequence: Action | Action[];
 }
 
@@ -184,40 +182,38 @@ export interface UntilRepeat extends BaseRepeat {
   until: Condition[];
 }
 
-export interface ForEachRepeat extends BaseRepeat {
-  for_each: string | any[];
-}
-
-export interface ChooseActionChoice extends BaseAction {
+export interface ChooseActionChoice {
+  alias?: string;
   conditions: string | Condition[];
   sequence: Action | Action[];
 }
 
-export interface ChooseAction extends BaseAction {
+export interface ChooseAction {
+  alias?: string;
   choose: ChooseActionChoice | ChooseActionChoice[] | null;
   default?: Action | Action[];
 }
 
-export interface IfAction extends BaseAction {
+export interface IfAction {
+  alias?: string;
   if: string | Condition[];
   then: Action | Action[];
   else?: Action | Action[];
 }
 
-export interface VariablesAction extends BaseAction {
+export interface VariablesAction {
+  alias?: string;
   variables: Record<string, unknown>;
 }
 
-export interface StopAction extends BaseAction {
+export interface StopAction {
+  alias?: string;
   stop: string;
   error?: boolean;
 }
 
-export interface ParallelAction extends BaseAction {
-  parallel: ManualScriptConfig | Action | (ManualScriptConfig | Action)[];
-}
-
-interface UnknownAction extends BaseAction {
+interface UnknownAction {
+  alias?: string;
   [key: string]: unknown;
 }
 
@@ -226,9 +222,6 @@ export type Action =
   | DeviceAction
   | ServiceAction
   | Condition
-  | ShorthandAndCondition
-  | ShorthandOrCondition
-  | ShorthandNotCondition
   | DelayAction
   | SceneAction
   | WaitAction
@@ -239,7 +232,6 @@ export type Action =
   | VariablesAction
   | PlayMediaAction
   | StopAction
-  | ParallelAction
   | UnknownAction;
 
 export interface ActionTypes {
@@ -257,7 +249,6 @@ export interface ActionTypes {
   service: ServiceAction;
   play_media: PlayMediaAction;
   stop: StopAction;
-  parallel: ParallelAction;
   unknown: UnknownAction;
 }
 
@@ -307,7 +298,7 @@ export const getActionType = (action: Action): ActionType => {
   if ("wait_template" in action) {
     return "wait_template";
   }
-  if (["condition", "and", "or", "not"].some((key) => key in action)) {
+  if ("condition" in action) {
     return "check_condition";
   }
   if ("event" in action) {
@@ -337,9 +328,6 @@ export const getActionType = (action: Action): ActionType => {
   if ("stop" in action) {
     return "stop";
   }
-  if ("parallel" in action) {
-    return "parallel";
-  }
   if ("service" in action) {
     if ("metadata" in action) {
       if (is(action, activateSceneActionStruct)) {

src/data/script_i18n.ts

@@ -8,17 +8,12 @@ import { describeCondition, describeTrigger } from "./automation_i18n";
 import {
   ActionType,
   ActionTypes,
-  ChooseAction,
   DelayAction,
   DeviceAction,
   EventAction,
   getActionType,
-  IfAction,
-  ParallelAction,
   PlayMediaAction,
-  RepeatAction,
   SceneAction,
-  StopAction,
   VariablesAction,
   WaitForTriggerAction,
 } from "./script";
@@ -166,81 +161,6 @@ export const describeAction = <T extends ActionType>(
     return `Test ${describeCondition(action as Condition)}`;
   }
 
-  if (actionType === "stop") {
-    const config = action as StopAction;
-    return `Stopped${config.stop ? ` because: ${config.stop}` : ""}`;
-  }
-
-  if (actionType === "if") {
-    const config = action as IfAction;
-    return `If ${
-      typeof config.if === "string"
-        ? config.if
-        : ensureArray(config.if)
-            .map((condition) => describeCondition(condition))
-            .join(", ")
-    } then ${ensureArray(config.then).map((thenAction) =>
-      describeAction(hass, thenAction)
-    )}${
-      config.else
-        ? ` else ${ensureArray(config.else).map((elseAction) =>
-            describeAction(hass, elseAction)
-          )}`
-        : ""
-    }`;
-  }
-
-  if (actionType === "choose") {
-    const config = action as ChooseAction;
-    return config.choose
-      ? `If ${ensureArray(config.choose)
-          .map(
-            (chooseAction) =>
-              `${
-                typeof chooseAction.conditions === "string"
-                  ? chooseAction.conditions
-                  : ensureArray(chooseAction.conditions)
-                      .map((condition) => describeCondition(condition))
-                      .join(", ")
-              } then ${ensureArray(chooseAction.sequence)
-                .map((chooseSeq) => describeAction(hass, chooseSeq))
-                .join(", ")}`
-          )
-          .join(", else if ")}${
-          config.default
-            ? `. If none match: ${ensureArray(config.default)
-                .map((dAction) => describeAction(hass, dAction))
-                .join(", ")}`
-            : ""
-        }`
-      : "Choose";
-  }
-
-  if (actionType === "repeat") {
-    const config = action as RepeatAction;
-    return `Repeat ${ensureArray(config.repeat.sequence).map((repeatAction) =>
-      describeAction(hass, repeatAction)
-    )} ${"count" in config.repeat ? `${config.repeat.count} times` : ""}${
-      "while" in config.repeat
-        ? `while ${ensureArray(config.repeat.while)
-            .map((condition) => describeCondition(condition))
-            .join(", ")} is true`
-        : "until" in config.repeat
-        ? `until ${ensureArray(config.repeat.until)
-            .map((condition) => describeCondition(condition))
-            .join(", ")} is true`
-        : "for_each" in config.repeat
-        ? `for every item: ${ensureArray(config.repeat.for_each)
-            .map((item) => JSON.stringify(item))
-            .join(", ")}`
-        : ""
-    }`;
-  }
-
-  if (actionType === "check_condition") {
-    return `Test ${describeCondition(action as Condition)}`;
-  }
-
   if (actionType === "device_action") {
     const config = action as DeviceAction;
     const stateObj = hass.states[config.entity_id as string];
@@ -249,12 +169,5 @@ export const describeAction = <T extends ActionType>(
     }`;
   }
 
-  if (actionType === "parallel") {
-    const config = action as ParallelAction;
-    return `Run in parallel: ${ensureArray(config.parallel)
-      .map((pAction) => describeAction(hass, pAction))
-      .join(", ")}`;
-  }
-
   return actionType;
 };

src/data/trace.ts

@@ -44,14 +44,6 @@ export interface ChooseActionTraceStep extends BaseTraceStep {
   result?: { choice: number | "default" };
 }
 
-export interface IfActionTraceStep extends BaseTraceStep {
-  result?: { choice: "then" | "else" };
-}
-
-export interface StopActionTraceStep extends BaseTraceStep {
-  result?: { stop: string; error: boolean };
-}
-
 export interface ChooseChoiceActionTraceStep extends BaseTraceStep {
   result?: { result: boolean };
 }
@@ -185,11 +177,7 @@ export const getDataFromPath = (
     const asNumber = Number(raw);
 
     if (isNaN(asNumber)) {
-      const tempResult = result[raw];
-      if (!tempResult && raw === "sequence") {
-        continue;
-      }
-      result = tempResult;
+      result = result[raw];
       continue;
     }
 

src/data/update.ts

@@ -1,17 +1,10 @@
 import type {
-  HassEntities,
   HassEntityAttributeBase,
   HassEntityBase,
-  HassEvent,
 } from "home-assistant-js-websocket";
 import { BINARY_STATE_ON } from "../common/const";
-import { computeDomain } from "../common/entity/compute_domain";
-import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { supportsFeature } from "../common/entity/supports-feature";
-import { caseInsensitiveStringCompare } from "../common/string/compare";
-import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../types";
-import { showToast } from "../util/toast";
 
 export const UPDATE_SUPPORT_INSTALL = 1;
 export const UPDATE_SUPPORT_SPECIFIC_VERSION = 2;
@@ -38,12 +31,8 @@ export const updateUsesProgress = (entity: UpdateEntity): boolean =>
   supportsFeature(entity, UPDATE_SUPPORT_PROGRESS) &&
   typeof entity.attributes.in_progress === "number";
 
-export const updateCanInstall = (
-  entity: UpdateEntity,
-  showSkipped = false
-): boolean =>
-  (entity.state === BINARY_STATE_ON ||
-    (showSkipped && Boolean(entity.attributes.skipped_version))) &&
+export const updateCanInstall = (entity: UpdateEntity): boolean =>
+  entity.state === BINARY_STATE_ON &&
   supportsFeature(entity, UPDATE_SUPPORT_INSTALL);
 
 export const updateIsInstalling = (entity: UpdateEntity): boolean =>
@@ -54,92 +43,3 @@ export const updateReleaseNotes = (hass: HomeAssistant, entityId: string) =>
     type: "update/release_notes",
     entity_id: entityId,
   });
-
-export const filterUpdateEntities = (entities: HassEntities) =>
-  (
-    Object.values(entities).filter(
-      (entity) => computeStateDomain(entity) === "update"
-    ) as UpdateEntity[]
-  ).sort((a, b) => {
-    if (a.attributes.title === "Home Assistant Core") {
-      return -3;
-    }
-    if (b.attributes.title === "Home Assistant Core") {
-      return 3;
-    }
-    if (a.attributes.title === "Home Assistant Operating System") {
-      return -2;
-    }
-    if (b.attributes.title === "Home Assistant Operating System") {
-      return 2;
-    }
-    if (a.attributes.title === "Home Assistant Supervisor") {
-      return -1;
-    }
-    if (b.attributes.title === "Home Assistant Supervisor") {
-      return 1;
-    }
-    return caseInsensitiveStringCompare(
-      a.attributes.title || a.attributes.friendly_name || "",
-      b.attributes.title || b.attributes.friendly_name || ""
-    );
-  });
-
-export const filterUpdateEntitiesWithInstall = (
-  entities: HassEntities,
-  showSkipped = false
-) =>
-  filterUpdateEntities(entities).filter((entity) =>
-    updateCanInstall(entity, showSkipped)
-  );
-
-export const checkForEntityUpdates = async (
-  element: HTMLElement,
-  hass: HomeAssistant
-) => {
-  const entities = filterUpdateEntities(hass.states).map(
-    (entity) => entity.entity_id
-  );
-
-  if (!entities.length) {
-    showAlertDialog(element, {
-      title: hass.localize("ui.panel.config.updates.no_update_entities.title"),
-      text: hass.localize(
-        "ui.panel.config.updates.no_update_entities.description"
-      ),
-      warning: true,
-    });
-    return;
-  }
-
-  let updated = 0;
-
-  const unsubscribeEvents = await hass.connection.subscribeEvents<HassEvent>(
-    (event) => {
-      if (computeDomain(event.data.entity_id) === "update") {
-        updated++;
-        showToast(element, {
-          message: hass.localize("ui.panel.config.updates.updates_refreshed", {
-            count: updated,
-          }),
-        });
-      }
-    },
-    "state_changed"
-  );
-
-  await hass.callService("homeassistant", "update_entity", {
-    entity_id: entities,
-  });
-
-  // there is no reliable way to know if all the updates are done updating, so we just wait a bit for now...
-  await new Promise((r) => setTimeout(r, 10000));
-
-  unsubscribeEvents();
-
-  if (updated === 0) {
-    showToast(element, {
-      message: hass.localize("ui.panel.config.updates.no_new_updates"),
-    });
-  }
-};

src/data/zwave_js.ts

@@ -127,7 +127,7 @@ export interface ZWaveJSClient {
 
 export interface ZWaveJSController {
   home_id: number;
-  sdk_version: string;
+  library_version: string;
   type: number;
   own_node_id: number;
   is_secondary: boolean;
@@ -136,7 +136,7 @@ export interface ZWaveJSController {
   was_real_primary: boolean;
   is_static_update_controller: boolean;
   is_slave: boolean;
-  firmware_version: string;
+  serial_api_version: string;
   manufacturer_id: number;
   product_id: number;
   product_type: number;

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -312,7 +312,6 @@ class DataEntryFlowDialog extends LitElement {
                         .flowConfig=${this._params.flowConfig}
                         .step=${this._step}
                         .hass=${this.hass}
-                        .domain=${this._step.handler}
                       ></step-flow-abort>
                     `
                   : this._step.type === "progress"

src/dialogs/config-flow/show-dialog-options-flow.ts

@@ -146,14 +146,14 @@ export const showOptionsFlowDialog = (
       renderMenuHeader(hass, step) {
         return (
           hass.localize(
-            `component.${configEntry.domain}.options.step.${step.step_id}.title`
-          ) || hass.localize(`component.${configEntry.domain}.title`)
+            `component.${step.handler}.option.step.${step.step_id}.title`
+          ) || hass.localize(`component.${step.handler}.title`)
         );
       },
 
       renderMenuDescription(hass, step) {
         const description = hass.localize(
-          `component.${configEntry.domain}.options.step.${step.step_id}.description`,
+          `component.${step.handler}.option.step.${step.step_id}.description`,
           step.description_placeholders
         );
         return description
@@ -169,7 +169,7 @@ export const showOptionsFlowDialog = (
 
       renderMenuOption(hass, step, option) {
         return hass.localize(
-          `component.${configEntry.domain}.options.step.${step.step_id}.menu_options.${option}`,
+          `component.${step.handler}.options.step.${step.step_id}.menu_options.${option}`,
           step.description_placeholders
         );
       },

src/dialogs/config-flow/step-flow-abort.ts

@@ -15,11 +15,13 @@ class StepFlowAbort extends LitElement {
 
   @property({ attribute: false }) public step!: DataEntryFlowStepAbort;
 
-  @property({ attribute: false }) public domain!: string;
-
   protected render(): TemplateResult {
     return html`
-      <h2>${this.hass.localize(`component.${this.domain}.title`)}</h2>
+      <h2>
+        ${this.hass.localize(
+          "ui.panel.config.integrations.config_flow.aborted"
+        )}
+      </h2>
       <div class="content">
         ${this.flowConfig.renderAbortDescription(this.hass, this.step)}
       </div>

src/dialogs/generic/dialog-box.ts

@@ -1,13 +1,12 @@
 import "@material/mwc-button/mwc-button";
 import { mdiAlertOutline } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-dialog";
 import "../../components/ha-svg-icon";
 import "../../components/ha-switch";
-import { HaTextField } from "../../components/ha-textfield";
+import "../../components/ha-textfield";
 import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { DialogBoxParams } from "./show-dialog-box";
@@ -18,10 +17,13 @@ class DialogBox extends LitElement {
 
   @state() private _params?: DialogBoxParams;
 
-  @query("ha-textfield") private _textField?: HaTextField;
+  @state() private _value?: string;
 
   public async showDialog(params: DialogBoxParams): Promise<void> {
     this._params = params;
+    if (params.prompt) {
+      this._value = params.defaultValue;
+    }
   }
 
   public closeDialog(): boolean {
@@ -73,7 +75,9 @@ class DialogBox extends LitElement {
             ? html`
                 <ha-textfield
                   dialogInitialFocus
-                  value=${ifDefined(this._params.defaultValue)}
+                  .value=${this._value || ""}
+                  @keyup=${this._handleKeyUp}
+                  @change=${this._valueChanged}
                   .label=${this._params.inputLabel
                     ? this._params.inputLabel
                     : ""}
@@ -105,6 +109,10 @@ class DialogBox extends LitElement {
     `;
   }
 
+  private _valueChanged(ev) {
+    this._value = ev.target.value;
+  }
+
   private _dismiss(): void {
     if (this._params?.cancel) {
       this._params.cancel();
@@ -112,9 +120,15 @@ class DialogBox extends LitElement {
     this._close();
   }
 
+  private _handleKeyUp(ev: KeyboardEvent) {
+    if (ev.keyCode === 13) {
+      this._confirm();
+    }
+  }
+
   private _confirm(): void {
     if (this._params!.confirm) {
-      this._params!.confirm(this._textField?.value);
+      this._params!.confirm(this._value);
     }
     this._close();
   }

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

@@ -119,15 +119,7 @@ class MoreInfoVacuum extends LitElement {
                         "ui.dialogs.more_info_control.vacuum.status"
                       )}:
                     </span>
-                    <span>
-                      <strong>
-                        ${stateObj.attributes.status ||
-                        this.hass.localize(
-                          `component.vacuum.state._.${stateObj.state}`
-                        ) ||
-                        stateObj.state}
-                      </strong>
-                    </span>
+                    <span><strong>${stateObj.attributes.status}</strong></span>
                   </div>
                 `
               : ""}

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -17,7 +17,6 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { canShowPage } from "../../common/config/can_show_page";
 import { componentsWithService } from "../../common/config/components_with_service";
-import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
@@ -34,7 +33,6 @@ import "../../components/ha-circular-progress";
 import "../../components/ha-header-bar";
 import "../../components/ha-icon-button";
 import "../../components/ha-textfield";
-import { fetchHassioSupervisorInfo } from "../../data/hassio/supervisor";
 import { domainToName } from "../../data/integration";
 import { getPanelNameTranslationKey } from "../../data/panel";
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
@@ -247,10 +245,9 @@ export class QuickBar extends LitElement {
     `;
   }
 
-  private async _initializeItemsIfNeeded() {
+  private _initializeItemsIfNeeded() {
     if (this._commandMode) {
-      this._commandItems =
-        this._commandItems || (await this._generateCommandItems());
+      this._commandItems = this._commandItems || this._generateCommandItems();
     } else {
       this._entityItems = this._entityItems || this._generateEntityItems();
     }
@@ -488,11 +485,11 @@ export class QuickBar extends LitElement {
       );
   }
 
-  private async _generateCommandItems(): Promise<CommandItem[]> {
+  private _generateCommandItems(): CommandItem[] {
     return [
       ...this._generateReloadCommands(),
       ...this._generateServerControlCommands(),
-      ...(await this._generateNavigationCommands()),
+      ...this._generateNavigationCommands(),
     ].sort((a, b) =>
       caseInsensitiveStringCompare(a.strings.join(" "), b.strings.join(" "))
     );
@@ -581,40 +578,11 @@ export class QuickBar extends LitElement {
     });
   }
 
-  private async _generateNavigationCommands(): Promise<CommandItem[]> {
+  private _generateNavigationCommands(): CommandItem[] {
     const panelItems = this._generateNavigationPanelCommands();
     const sectionItems = this._generateNavigationConfigSectionCommands();
-    const supervisorItems: BaseNavigationCommand[] = [];
-    if (isComponentLoaded(this.hass, "hassio")) {
-      const supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
-      supervisorItems.push({
-        path: "/hassio/store",
-        primaryText: this.hass.localize(
-          "ui.dialogs.quick-bar.commands.navigation.addon_store"
-        ),
-      });
-      supervisorItems.push({
-        path: "/hassio/dashboard",
-        primaryText: this.hass.localize(
-          "ui.dialogs.quick-bar.commands.navigation.addon_dashboard"
-        ),
-      });
-      for (const addon of supervisorInfo.addons) {
-        supervisorItems.push({
-          path: `/hassio/addon/${addon.slug}`,
-          primaryText: this.hass.localize(
-            "ui.dialogs.quick-bar.commands.navigation.addon_info",
-            { addon: addon.name }
-          ),
-        });
-      }
-    }
 
-    return this._finalizeNavigationCommands([
-      ...panelItems,
-      ...sectionItems,
-      ...supervisorItems,
-    ]);
+    return this._finalizeNavigationCommands([...panelItems, ...sectionItems]);
   }
 
   private _generateNavigationPanelCommands(): BaseNavigationCommand[] {
@@ -642,14 +610,20 @@ export class QuickBar extends LitElement {
         if (!canShowPage(this.hass, page)) {
           continue;
         }
-
+        if (!page.component) {
+          continue;
+        }
         const info = this._getNavigationInfoFromConfig(page);
 
         if (!info) {
           continue;
         }
         // Add to list, but only if we do not already have an entry for the same path and component
-        if (items.some((e) => e.path === info.path)) {
+        if (
+          items.some(
+            (e) => e.path === info.path && e.component === info.component
+          )
+        ) {
           continue;
         }
 
@@ -663,19 +637,14 @@ export class QuickBar extends LitElement {
   private _getNavigationInfoFromConfig(
     page: PageNavigation
   ): NavigationInfo | undefined {
-    const path = page.path.substring(1);
+    if (!page.component) {
+      return undefined;
+    }
+    const caption = this.hass.localize(
+      `ui.dialogs.quick-bar.commands.navigation.${page.component}`
+    );
 
-    let name = path.substring(path.indexOf("/") + 1);
-    name = name.indexOf("/") > -1 ? name.substring(0, name.indexOf("/")) : name;
-
-    const caption =
-      (name &&
-        this.hass.localize(
-          `ui.dialogs.quick-bar.commands.navigation.${name}`
-        )) ||
-      (page.translationKey && this.hass.localize(page.translationKey));
-
-    if (caption) {
+    if (page.translationKey && caption) {
       return { ...page, primaryText: caption };
     }
 

src/layouts/hass-subpage.ts

@@ -99,7 +99,6 @@ class HassSubpage extends LitElement {
       ha-icon-button-arrow-prev,
       ::slotted([slot="toolbar-icon"]) {
         pointer-events: auto;
-        color: var(--sidebar-icon-color);
       }
 
       .main-title {

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

@@ -130,7 +130,7 @@ export class HaTabsSubpageDataTable extends LitElement {
    * Array of tabs to show on the page.
    * @type {Array}
    */
-  @property() public tabs: PageNavigation[] = [];
+  @property() public tabs!: PageNavigation[];
 
   /**
    * Force hides the filter menu.
@@ -283,9 +283,6 @@ export class HaTabsSubpageDataTable extends LitElement {
         height: calc(100vh - 1px - var(--header-height));
         display: block;
       }
-      :host([narrow]) hass-tabs-subpage {
-        --main-title-margin: 0;
-      }
       .table-header {
         display: flex;
         align-items: center;

src/layouts/hass-tabs-subpage.ts

@@ -82,16 +82,6 @@ class HassTabsSubpage extends LitElement {
           (!page.advancedOnly || showAdvanced)
       );
 
-      if (shownTabs.length < 2) {
-        if (shownTabs.length === 1) {
-          const page = shownTabs[0];
-          return [
-            page.translationKey ? localizeFunc(page.translationKey) : page.name,
-          ];
-        }
-        return [""];
-      }
-
       return shownTabs.map(
         (page) =>
           html`
@@ -144,7 +134,7 @@ class HassTabsSubpage extends LitElement {
       this.narrow,
       this.localizeFunc || this.hass.localize
     );
-    const showTabs = tabs.length > 1;
+    const showTabs = tabs.length > 1 || !this.narrow;
     return html`
       <div class="toolbar">
         ${this.mainPage || (!this.backPath && history.state?.root)
@@ -169,10 +159,8 @@ class HassTabsSubpage extends LitElement {
                 @click=${this._backTapped}
               ></ha-icon-button-arrow-prev>
             `}
-        ${this.narrow || !showTabs
-          ? html`<div class="main-title">
-              <slot name="header">${!showTabs ? tabs[0] : ""}</slot>
-            </div>`
+        ${this.narrow
+          ? html`<div class="main-title"><slot name="header"></slot></div>`
           : ""}
         ${showTabs
           ? html`
@@ -295,7 +283,6 @@ class HassTabsSubpage extends LitElement {
         max-height: var(--header-height);
         line-height: 20px;
         color: var(--sidebar-text-color);
-        margin: var(--main-title-margin, 0 0 0 24px);
       }
 
       .content {

src/onboarding/onboarding-restore-backup.ts

@@ -1,11 +1,11 @@
 import "@material/mwc-button/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import "../../hassio/src/components/hassio-ansi-to-html";
 import { showBackupUploadDialog } from "../../hassio/src/dialogs/backup/show-dialog-backup-upload";
 import { showHassioBackupDialog } from "../../hassio/src/dialogs/backup/show-dialog-hassio-backup";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-card";
-import "../components/ha-ansi-to-html";
 import { fetchInstallationType } from "../data/onboarding";
 import { makeDialogManager } from "../dialogs/make-dialog-manager";
 import { ProvideHassLitMixin } from "../mixins/provide-hass-lit-mixin";
@@ -86,7 +86,7 @@ class OnboardingRestoreBackup extends ProvideHassLitMixin(LitElement) {
           padding: 4px;
           margin-top: 8px;
         }
-        ha-ansi-to-html {
+        hassio-ansi-to-html {
           display: block;
           line-height: 22px;
           padding: 0 8px;

src/panels/calendar/ha-full-calendar.ts

@@ -11,7 +11,14 @@ import listPlugin from "@fullcalendar/list";
 // @ts-ignore
 import listStyle from "@fullcalendar/list/main.css";
 import "@material/mwc-button";
-import { mdiViewAgenda, mdiViewDay, mdiViewModule, mdiViewWeek } from "@mdi/js";
+import {
+  mdiChevronLeft,
+  mdiChevronRight,
+  mdiViewAgenda,
+  mdiViewDay,
+  mdiViewModule,
+  mdiViewWeek,
+} from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -26,6 +33,7 @@ import memoize from "memoize-one";
 import { useAmPm } from "../../common/datetime/use_am_pm";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button-toggle-group";
+import "../../components/ha-icon-button";
 import "../../components/ha-icon-button-prev";
 import "../../components/ha-icon-button-next";
 import { haStyle } from "../../resources/styles";
@@ -144,18 +152,20 @@ export class HAFullCalendar extends LitElement {
                     <div class="controls">
                       <h1>${this.calendar.view.title}</h1>
                       <div>
-                        <ha-icon-button-prev
+                        <ha-icon-button
                           .label=${this.hass.localize("ui.common.previous")}
+                          .path=${mdiChevronLeft}
                           class="prev"
                           @click=${this._handlePrev}
                         >
-                        </ha-icon-button-prev>
-                        <ha-icon-button-next
+                        </ha-icon-button>
+                        <ha-icon-button
                           .label=${this.hass.localize("ui.common.next")}
+                          .path=${mdiChevronRight}
                           class="next"
                           @click=${this._handleNext}
                         >
-                        </ha-icon-button-next>
+                        </ha-icon-button>
                       </div>
                     </div>
                     <div class="controls">

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

@@ -1,224 +0,0 @@
-import "@material/mwc-button";
-import "@material/mwc-list/mwc-list-item";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
-import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-circular-progress";
-import "../../../components/ha-combo-box";
-import { createCloseHeading } from "../../../components/ha-dialog";
-import "../../../components/ha-textfield";
-import {
-  fetchApplicationCredentialsConfig,
-  createApplicationCredential,
-  ApplicationCredential,
-} from "../../../data/application_credential";
-import { domainToName } from "../../../data/integration";
-import { PolymerChangedEvent } from "../../../polymer-types";
-import { haStyleDialog } from "../../../resources/styles";
-import { HomeAssistant } from "../../../types";
-import { AddApplicationCredentialDialogParams } from "./show-dialog-add-application-credential";
-
-interface Domain {
-  id: string;
-  name: string;
-}
-
-const rowRenderer: ComboBoxLitRenderer<Domain> = (item) => html`<mwc-list-item>
-  <span>${item.name}</span>
-</mwc-list-item>`;
-
-@customElement("dialog-add-application-credential")
-export class DialogAddApplicationCredential extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _loading = false;
-
-  // Error message when can't talk to server etc
-  @state() private _error?: string;
-
-  @state() private _params?: AddApplicationCredentialDialogParams;
-
-  @state() private _domain?: string;
-
-  @state() private _clientId?: string;
-
-  @state() private _clientSecret?: string;
-
-  @state() private _domains?: Domain[];
-
-  public showDialog(params: AddApplicationCredentialDialogParams) {
-    this._params = params;
-    this._domain = "";
-    this._clientId = "";
-    this._clientSecret = "";
-    this._error = undefined;
-    this._loading = false;
-    this._fetchConfig();
-  }
-
-  private async _fetchConfig() {
-    const config = await fetchApplicationCredentialsConfig(this.hass);
-    this._domains = config.domains.map((domain) => ({
-      id: domain,
-      name: domainToName(this.hass.localize, domain),
-    }));
-  }
-
-  protected render(): TemplateResult {
-    if (!this._params || !this._domains) {
-      return html``;
-    }
-    return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize(
-            "ui.panel.config.application_credentials.editor.caption"
-          )
-        )}
-      >
-        <div>
-          ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
-          <ha-combo-box
-            name="domain"
-            .hass=${this.hass}
-            .label=${this.hass.localize(
-              "ui.panel.config.application_credentials.editor.domain"
-            )}
-            .value=${this._domain}
-            .renderer=${rowRenderer}
-            .items=${this._domains}
-            item-id-path="id"
-            item-value-path="id"
-            item-label-path="name"
-            required
-            @value-changed=${this._handleDomainPicked}
-          ></ha-combo-box>
-          <ha-textfield
-            class="clientId"
-            name="clientId"
-            .label=${this.hass.localize(
-              "ui.panel.config.application_credentials.editor.client_id"
-            )}
-            .value=${this._clientId}
-            required
-            @input=${this._handleValueChanged}
-            error-message=${this.hass.localize("ui.common.error_required")}
-            dialogInitialFocus
-          ></ha-textfield>
-          <ha-textfield
-            .label=${this.hass.localize(
-              "ui.panel.config.application_credentials.editor.client_secret"
-            )}
-            type="password"
-            name="clientSecret"
-            .value=${this._clientSecret}
-            required
-            @input=${this._handleValueChanged}
-            error-message=${this.hass.localize("ui.common.error_required")}
-          ></ha-textfield>
-        </div>
-        ${this._loading
-          ? html`
-              <div slot="primaryAction" class="submit-spinner">
-                <ha-circular-progress active></ha-circular-progress>
-              </div>
-            `
-          : html`
-              <mwc-button
-                slot="primaryAction"
-                .disabled=${!this._domain ||
-                !this._clientId ||
-                !this._clientSecret}
-                @click=${this._createApplicationCredential}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.application_credentials.editor.create"
-                )}
-              </mwc-button>
-            `}
-      </ha-dialog>
-    `;
-  }
-
-  public closeDialog() {
-    this._params = undefined;
-    this._domains = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  private async _handleDomainPicked(ev: PolymerChangedEvent<string>) {
-    const target = ev.target as any;
-    if (target.selectedItem) {
-      this._domain = target.selectedItem.id;
-    }
-  }
-
-  private _handleValueChanged(ev: CustomEvent) {
-    this._error = undefined;
-    const name = (ev.target as any).name;
-    const value = (ev.target as any).value;
-    this[`_${name}`] = value;
-  }
-
-  private async _createApplicationCredential(ev) {
-    ev.preventDefault();
-    if (!this._domain || !this._clientId || !this._clientSecret) {
-      return;
-    }
-
-    this._loading = true;
-    this._error = "";
-
-    let applicationCredential: ApplicationCredential;
-    try {
-      applicationCredential = await createApplicationCredential(
-        this.hass,
-        this._domain,
-        this._clientId,
-        this._clientSecret
-      );
-    } catch (err: any) {
-      this._loading = false;
-      this._error = err.message;
-      return;
-    }
-    this._params!.applicationCredentialAddedCallback(applicationCredential);
-    this.closeDialog();
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyleDialog,
-      css`
-        ha-dialog {
-          --mdc-dialog-max-width: 500px;
-          --dialog-z-index: 10;
-        }
-        .row {
-          display: flex;
-          padding: 8px 0;
-        }
-        ha-combo-box {
-          display: block;
-          margin-bottom: 24px;
-        }
-        ha-textfield {
-          display: block;
-          margin-bottom: 24px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-add-application-credential": DialogAddApplicationCredential;
-  }
-}

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -1,259 +0,0 @@
-import { mdiDelete, mdiPlus } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import memoizeOne from "memoize-one";
-import type { HASSDomEvent } from "../../../common/dom/fire_event";
-import { LocalizeFunc } from "../../../common/translations/localize";
-import {
-  DataTableColumnContainer,
-  SelectionChangedEvent,
-} from "../../../components/data-table/ha-data-table";
-import "../../../components/data-table/ha-data-table-icon";
-import "../../../components/ha-fab";
-import "../../../components/ha-help-tooltip";
-import "../../../components/ha-svg-icon";
-import {
-  ApplicationCredential,
-  deleteApplicationCredential,
-  fetchApplicationCredentials,
-} from "../../../data/application_credential";
-import { domainToName } from "../../../data/integration";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
-import "../../../layouts/hass-tabs-subpage-data-table";
-import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
-import { HomeAssistant, Route } from "../../../types";
-import { configSections } from "../ha-panel-config";
-import { showAddApplicationCredentialDialog } from "./show-dialog-add-application-credential";
-
-@customElement("ha-config-application-credentials")
-export class HaConfigApplicationCredentials extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() public _applicationCredentials: ApplicationCredential[] = [];
-
-  @property() public isWide!: boolean;
-
-  @property() public narrow!: boolean;
-
-  @property() public route!: Route;
-
-  @state() private _selected: string[] = [];
-
-  @query("hass-tabs-subpage-data-table", true)
-  private _dataTable!: HaTabsSubpageDataTable;
-
-  private _columns = memoizeOne(
-    (narrow: boolean, localize: LocalizeFunc): DataTableColumnContainer => {
-      const columns: DataTableColumnContainer<ApplicationCredential> = {
-        clientId: {
-          title: localize(
-            "ui.panel.config.application_credentials.picker.headers.client_id"
-          ),
-          width: "25%",
-          direction: "asc",
-          grows: true,
-          template: (_, entry: ApplicationCredential) =>
-            html`${entry.client_id}`,
-        },
-        application: {
-          title: localize(
-            "ui.panel.config.application_credentials.picker.headers.application"
-          ),
-          sortable: true,
-          width: "20%",
-          direction: "asc",
-          hidden: narrow,
-          template: (_, entry) => html`${domainToName(localize, entry.domain)}`,
-        },
-      };
-
-      return columns;
-    }
-  );
-
-  protected firstUpdated(changedProperties: PropertyValues) {
-    super.firstUpdated(changedProperties);
-    this._loadTranslations();
-    this._fetchApplicationCredentials();
-  }
-
-  protected render() {
-    return html`
-      <hass-tabs-subpage-data-table
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .route=${this.route}
-        backPath="/config"
-        .tabs=${configSections.devices}
-        .columns=${this._columns(this.narrow, this.hass.localize)}
-        .data=${this._applicationCredentials}
-        hasFab
-        selectable
-        @selection-changed=${this._handleSelectionChanged}
-      >
-        ${this._selected.length
-          ? html`
-              <div
-                class=${classMap({
-                  "header-toolbar": this.narrow,
-                  "table-header": !this.narrow,
-                })}
-                slot="header"
-              >
-                <p class="selected-txt">
-                  ${this.hass.localize(
-                    "ui.panel.config.application_credentials.picker.selected",
-                    "number",
-                    this._selected.length
-                  )}
-                </p>
-                <div class="header-btns">
-                  ${!this.narrow
-                    ? html`
-                        <mwc-button
-                          @click=${this._removeSelected}
-                          class="warning"
-                          >${this.hass.localize(
-                            "ui.panel.config.application_credentials.picker.remove_selected.button"
-                          )}</mwc-button
-                        >
-                      `
-                    : html`
-                        <ha-icon-button
-                          class="warning"
-                          id="remove-btn"
-                          @click=${this._removeSelected}
-                          .path=${mdiDelete}
-                          .label=${this.hass.localize("ui.common.remove")}
-                        ></ha-icon-button>
-                        <ha-help-tooltip
-                          .label=${this.hass.localize(
-                            "ui.panel.config.application_credentials.picker.remove_selected.button"
-                          )}
-                        >
-                        </ha-help-tooltip>
-                      `}
-                </div>
-              </div>
-            `
-          : html``}
-        <ha-fab
-          slot="fab"
-          .label=${this.hass.localize(
-            "ui.panel.config.application_credentials.picker.add_application_credential"
-          )}
-          extended
-          @click=${this._addApplicationCredential}
-        >
-          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-        </ha-fab>
-      </hass-tabs-subpage-data-table>
-    `;
-  }
-
-  private _handleSelectionChanged(
-    ev: HASSDomEvent<SelectionChangedEvent>
-  ): void {
-    this._selected = ev.detail.value;
-  }
-
-  private _removeSelected() {
-    showConfirmationDialog(this, {
-      title: this.hass.localize(
-        `ui.panel.config.application_credentials.picker.remove_selected.confirm_title`,
-        "number",
-        this._selected.length
-      ),
-      text: this.hass.localize(
-        "ui.panel.config.application_credentials.picker.remove_selected.confirm_text"
-      ),
-      confirmText: this.hass.localize("ui.common.remove"),
-      dismissText: this.hass.localize("ui.common.cancel"),
-      confirm: async () => {
-        await Promise.all(
-          this._selected.map(async (applicationCredential) => {
-            await deleteApplicationCredential(this.hass, applicationCredential);
-          })
-        );
-        this._dataTable.clearSelection();
-        this._fetchApplicationCredentials();
-      },
-    });
-  }
-
-  private async _loadTranslations() {
-    await this.hass.loadBackendTranslation("title", undefined, true);
-  }
-
-  private async _fetchApplicationCredentials() {
-    this._applicationCredentials = await fetchApplicationCredentials(this.hass);
-  }
-
-  private _addApplicationCredential() {
-    showAddApplicationCredentialDialog(this, {
-      applicationCredentialAddedCallback: async (
-        applicationCredential: ApplicationCredential
-      ) => {
-        if (applicationCredential) {
-          this._applicationCredentials = [
-            ...this._applicationCredentials,
-            applicationCredential,
-          ];
-        }
-      },
-    });
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      .table-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        height: 56px;
-        background-color: var(--mdc-text-field-fill-color, whitesmoke);
-        border-bottom: 1px solid
-          var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42));
-        box-sizing: border-box;
-      }
-      .header-toolbar {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        color: var(--secondary-text-color);
-        position: relative;
-        top: -4px;
-      }
-      .selected-txt {
-        font-weight: bold;
-        padding-left: 16px;
-      }
-      .table-header .selected-txt {
-        margin-top: 20px;
-      }
-      .header-toolbar .selected-txt {
-        font-size: 16px;
-      }
-      .header-toolbar .header-btns {
-        margin-right: -12px;
-      }
-      .header-btns {
-        display: flex;
-      }
-      .header-btns > mwc-button,
-      .header-btns > ha-icon-button {
-        margin: 8px;
-      }
-      ha-button-menu {
-        margin-left: 8px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-config-application-credentials": HaConfigApplicationCredentials;
-  }
-}

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

@@ -1,22 +0,0 @@
-import { fireEvent } from "../../../common/dom/fire_event";
-import { ApplicationCredential } from "../../../data/application_credential";
-
-export interface AddApplicationCredentialDialogParams {
-  applicationCredentialAddedCallback: (
-    applicationCredential: ApplicationCredential
-  ) => void;
-}
-
-export const loadAddApplicationCredentialDialog = () =>
-  import("./dialog-add-application-credential");
-
-export const showAddApplicationCredentialDialog = (
-  element: HTMLElement,
-  dialogParams: AddApplicationCredentialDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-add-application-credential",
-    dialogImport: loadAddApplicationCredentialDialog,
-    dialogParams,
-  });
-};

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

@@ -259,7 +259,6 @@ class HaConfigAreaPage extends LitElement {
                   <ha-svg-icon .path=${mdiImagePlus} slot="icon"></ha-svg-icon>
                 </mwc-button>`}
             <ha-card
-              outlined
               .header=${this.hass.localize("ui.panel.config.devices.caption")}
               >${devices.length
                 ? devices.map(
@@ -282,7 +281,6 @@ class HaConfigAreaPage extends LitElement {
                   `}
             </ha-card>
             <ha-card
-              outlined
               .header=${this.hass.localize(
                 "ui.panel.config.areas.editor.linked_entities_caption"
               )}
@@ -316,7 +314,6 @@ class HaConfigAreaPage extends LitElement {
             ${isComponentLoaded(this.hass, "automation")
               ? html`
                   <ha-card
-                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.automation.automations_heading"
                     )}
@@ -364,7 +361,6 @@ class HaConfigAreaPage extends LitElement {
             ${isComponentLoaded(this.hass, "scene")
               ? html`
                   <ha-card
-                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.scene.scenes_heading"
                     )}
@@ -404,7 +400,6 @@ class HaConfigAreaPage extends LitElement {
             ${isComponentLoaded(this.hass, "script")
               ? html`
                   <ha-card
-                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.script.scripts_heading"
                     )}

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

@@ -33,7 +33,6 @@ import "./types/ha-automation-action-delay";
 import "./types/ha-automation-action-device_id";
 import "./types/ha-automation-action-event";
 import "./types/ha-automation-action-if";
-import "./types/ha-automation-action-parallel";
 import "./types/ha-automation-action-play_media";
 import "./types/ha-automation-action-repeat";
 import "./types/ha-automation-action-service";
@@ -55,7 +54,6 @@ const OPTIONS = [
   "if",
   "device_id",
   "stop",
-  "parallel",
 ];
 
 const getType = (action: Action | undefined) => {
@@ -65,9 +63,6 @@ const getType = (action: Action | undefined) => {
   if ("service" in action || "scene" in action) {
     return getActionType(action);
   }
-  if (["and", "or", "not"].some((key) => key in action)) {
-    return "condition";
-  }
   return OPTIONS.find((option) => option in action);
 };
 
@@ -164,83 +159,63 @@ export default class HaAutomationActionRow extends LitElement {
     const yamlMode = this._yamlMode;
 
     return html`
-      <ha-card outlined>
-        ${this.action.enabled === false
-          ? html`<div class="disabled-bar">
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.disabled"
-              )}
-            </div>`
-          : ""}
-        <div class="card-menu">
-          ${this.index !== 0
-            ? html`
-                <ha-icon-button
-                  .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
-                  .label=${this.hass.localize(
-                    "ui.panel.config.automation.editor.move_down"
-                  )}
-                  .path=${mdiArrowDown}
-                  @click=${this._moveDown}
-                ></ha-icon-button>
-              `
-            : ""}
-          <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
-            <ha-icon-button
-              slot="trigger"
-              .label=${this.hass.localize("ui.common.menu")}
-              .path=${mdiDotsVertical}
-            ></ha-icon-button>
-            <mwc-list-item>
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.run_action"
-              )}
-            </mwc-list-item>
-            <mwc-list-item .disabled=${!this._uiModeAvailable}>
-              ${yamlMode
-                ? this.hass.localize(
-                    "ui.panel.config.automation.editor.edit_ui"
-                  )
-                : this.hass.localize(
-                    "ui.panel.config.automation.editor.edit_yaml"
-                  )}
-            </mwc-list-item>
-            <mwc-list-item>
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.duplicate"
-              )}
-            </mwc-list-item>
-            <mwc-list-item>
-              ${this.action.enabled === false
-                ? this.hass.localize(
-                    "ui.panel.config.automation.editor.actions.enable"
-                  )
-                : this.hass.localize(
-                    "ui.panel.config.automation.editor.actions.disable"
-                  )}
-            </mwc-list-item>
-            <mwc-list-item class="warning">
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.delete"
-              )}
-            </mwc-list-item>
-          </ha-button-menu>
-        </div>
-        <div
-          class="card-content ${this.action.enabled === false
-            ? "disabled"
-            : ""}"
-        >
+      <ha-card>
+        <div class="card-content">
+          <div class="card-menu">
+            ${this.index !== 0
+              ? html`
+                  <ha-icon-button
+                    .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
+                    .label=${this.hass.localize(
+                      "ui.panel.config.automation.editor.move_down"
+                    )}
+                    .path=${mdiArrowDown}
+                    @click=${this._moveDown}
+                  ></ha-icon-button>
+                `
+              : ""}
+            <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
+              <ha-icon-button
+                slot="trigger"
+                .label=${this.hass.localize("ui.common.menu")}
+                .path=${mdiDotsVertical}
+              ></ha-icon-button>
+              <mwc-list-item>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.actions.run_action"
+                )}
+              </mwc-list-item>
+              <mwc-list-item .disabled=${!this._uiModeAvailable}>
+                ${yamlMode
+                  ? this.hass.localize(
+                      "ui.panel.config.automation.editor.edit_ui"
+                    )
+                  : this.hass.localize(
+                      "ui.panel.config.automation.editor.edit_yaml"
+                    )}
+              </mwc-list-item>
+              <mwc-list-item>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.actions.duplicate"
+                )}
+              </mwc-list-item>
+              <mwc-list-item class="warning">
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.actions.delete"
+                )}
+              </mwc-list-item>
+            </ha-button-menu>
+          </div>
           ${this._warnings
             ? html`<ha-alert
                 alert-type="warning"
@@ -339,23 +314,11 @@ export default class HaAutomationActionRow extends LitElement {
         fireEvent(this, "duplicate");
         break;
       case 3:
-        this._onDisable();
-        break;
-      case 4:
         this._onDelete();
         break;
     }
   }
 
-  private _onDisable() {
-    const enabled = !(this.action.enabled ?? true);
-    const value = { ...this.action, enabled };
-    fireEvent(this, "value-changed", { value });
-    if (this._yamlMode) {
-      this._yamlEditor?.setValue(value);
-    }
-  }
-
   private async _runAction() {
     const validated = await validateConfig(this.hass, {
       action: this.action,
@@ -445,27 +408,11 @@ export default class HaAutomationActionRow extends LitElement {
     return [
       haStyle,
       css`
-        .disabled {
-          opacity: 0.5;
-          pointer-events: none;
-        }
-        .card-content {
-          padding-top: 16px;
-          margin-top: 0;
-        }
-        .disabled-bar {
-          background: var(--divider-color, #e0e0e0);
-          text-align: center;
-          border-top-right-radius: var(--ha-card-border-radius);
-          border-top-left-radius: var(--ha-card-border-radius);
-        }
         .card-menu {
-          float: right;
+          position: absolute;
+          right: 16px;
           z-index: 3;
-          margin: 4px;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
-          display: flex;
-          align-items: center;
         }
         :host-context([style*="direction: rtl;"]) .card-menu {
           right: initial;

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

@@ -1,4 +1,3 @@
-import deepClone from "deep-clone-simple";
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -33,7 +32,7 @@ export default class HaAutomationAction extends LitElement {
           ></ha-automation-action-row>
         `
       )}
-      <ha-card outlined>
+      <ha-card>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addAction}>
             ${this.hass.localize(
@@ -84,7 +83,7 @@ export default class HaAutomationAction extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.actions.concat(deepClone(this.actions[index])),
+      value: this.actions.concat(this.actions[index]),
     });
   }
 

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

@@ -69,7 +69,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
           </div>
         </ha-card>`
       )}
-      <ha-card outlined>
+      <ha-card>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addOption}>
             ${this.hass.localize(

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

@@ -1,56 +0,0 @@
-import { CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../../../../common/dom/fire_event";
-import { Action, ParallelAction } from "../../../../../data/script";
-import { HaDeviceAction } from "./ha-automation-action-device_id";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant } from "../../../../../types";
-import "../ha-automation-action";
-import "../../../../../components/ha-textfield";
-import type { ActionElement } from "../ha-automation-action-row";
-
-@customElement("ha-automation-action-parallel")
-export class HaParallelAction extends LitElement implements ActionElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public action!: ParallelAction;
-
-  public static get defaultConfig() {
-    return {
-      parallel: [HaDeviceAction.defaultConfig],
-    };
-  }
-
-  protected render() {
-    const action = this.action;
-
-    return html`
-      <ha-automation-action
-        .actions=${action.parallel}
-        @value-changed=${this._actionsChanged}
-        .hass=${this.hass}
-      ></ha-automation-action>
-    `;
-  }
-
-  private _actionsChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    const value = ev.detail.value as Action[];
-    fireEvent(this, "value-changed", {
-      value: {
-        ...this.action,
-        parallel: value,
-      },
-    });
-  }
-
-  static get styles(): CSSResultGroup {
-    return haStyle;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-automation-action-parallel": HaParallelAction;
-  }
-}

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

@@ -33,7 +33,7 @@ export class HaWaitAction extends LitElement implements ActionElement {
   @property({ attribute: false }) public action!: WaitAction;
 
   public static get defaultConfig() {
-    return { wait_template: "", continue_on_timeout: true };
+    return { wait_template: "" };
   }
 
   protected render() {

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

@@ -75,7 +75,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
             "ui.panel.config.automation.editor.introduction"
           )}
         </span>
-        <ha-card outlined>
+        <ha-card>
           <div class="card-content">
             <ha-textfield
               .label=${this.hass.localize(
@@ -145,7 +145,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
       </ha-config-section>
 
       <ha-card
-        outlined
         class="blueprint"
         .header=${this.hass.localize(
           "ui.panel.config.automation.editor.blueprint.header"
@@ -333,7 +332,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
         ha-settings-row {
           --paper-time-input-justify-content: flex-end;
           --settings-row-content-width: 100%;
-          --settings-row-prefix-display: contents;
           border-top: 1px solid var(--divider-color);
         }
       `,

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

@@ -5,11 +5,11 @@ import { dynamicElement } from "../../../../common/dom/dynamic-element-directive
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
+import "../../../../components/ha-card";
 import "../../../../components/ha-select";
 import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-yaml-editor";
 import type { Condition } from "../../../../data/automation";
-import { expandConditionWithShorthand } from "../../../../data/automation";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "./types/ha-automation-condition-and";
@@ -42,14 +42,10 @@ const OPTIONS = [
 export default class HaAutomationConditionEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() condition!: Condition;
+  @property() public condition!: Condition;
 
   @property() public yamlMode = false;
 
-  private _processedCondition = memoizeOne((condition) =>
-    expandConditionWithShorthand(condition)
-  );
-
   private _processedTypes = memoizeOne(
     (localize: LocalizeFunc): [string, string][] =>
       OPTIONS.map(
@@ -64,8 +60,7 @@ export default class HaAutomationConditionEditor extends LitElement {
   );
 
   protected render() {
-    const condition = this._processedCondition(this.condition);
-    const selected = OPTIONS.indexOf(condition.condition);
+    const selected = OPTIONS.indexOf(this.condition.condition);
     const yamlMode = this.yamlMode || selected === -1;
     return html`
       ${yamlMode
@@ -75,7 +70,7 @@ export default class HaAutomationConditionEditor extends LitElement {
                   ${this.hass.localize(
                     "ui.panel.config.automation.editor.conditions.unsupported_condition",
                     "condition",
-                    condition.condition
+                    this.condition.condition
                   )}
                 `
               : ""}
@@ -95,7 +90,7 @@ export default class HaAutomationConditionEditor extends LitElement {
               .label=${this.hass.localize(
                 "ui.panel.config.automation.editor.conditions.type_select"
               )}
-              .value=${condition.condition}
+              .value=${this.condition.condition}
               naturalMenuWidth
               @selected=${this._typeChanged}
             >
@@ -108,8 +103,8 @@ export default class HaAutomationConditionEditor extends LitElement {
 
             <div>
               ${dynamicElement(
-                `ha-automation-condition-${condition.condition}`,
-                { hass: this.hass, condition: condition }
+                `ha-automation-condition-${this.condition.condition}`,
+                { hass: this.hass, condition: this.condition }
               )}
             </div>
           `}
@@ -129,7 +124,7 @@ export default class HaAutomationConditionEditor extends LitElement {
       defaultConfig: Omit<Condition, "condition">;
     };
 
-    if (type !== this._processedCondition(this.condition).condition) {
+    if (type !== this.condition.condition) {
       fireEvent(this, "value-changed", {
         value: {
           condition: type,

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

@@ -2,7 +2,7 @@ import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/ha-button-menu";
@@ -19,7 +19,6 @@ import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import "./ha-automation-condition-editor";
 import { validateConfig } from "../../../../data/config";
-import { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 
 export interface ConditionElement extends LitElement {
   condition: Condition;
@@ -60,69 +59,47 @@ export default class HaAutomationConditionRow extends LitElement {
 
   @state() private _warnings?: string[];
 
-  @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
-
   protected render() {
     if (!this.condition) {
       return html``;
     }
     return html`
-      <ha-card outlined>
-        ${this.condition.enabled === false
-          ? html`<div class="disabled-bar">
+      <ha-card>
+        <div class="card-content">
+          <div class="card-menu">
+            <ha-progress-button @click=${this._testCondition}>
               ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.disabled"
+                "ui.panel.config.automation.editor.conditions.test"
               )}
-            </div>`
-          : ""}
-        <div class="card-menu">
-          <ha-progress-button @click=${this._testCondition}>
-            ${this.hass.localize(
-              "ui.panel.config.automation.editor.conditions.test"
-            )}
-          </ha-progress-button>
-          <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
-            <ha-icon-button
-              slot="trigger"
-              .label=${this.hass.localize("ui.common.menu")}
-              .path=${mdiDotsVertical}
-            >
-            </ha-icon-button>
-            <mwc-list-item>
-              ${this._yamlMode
-                ? this.hass.localize(
-                    "ui.panel.config.automation.editor.edit_ui"
-                  )
-                : this.hass.localize(
-                    "ui.panel.config.automation.editor.edit_yaml"
-                  )}
-            </mwc-list-item>
-            <mwc-list-item>
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.duplicate"
-              )}
-            </mwc-list-item>
-            <mwc-list-item>
-              ${this.condition.enabled === false
-                ? this.hass.localize(
-                    "ui.panel.config.automation.editor.actions.enable"
-                  )
-                : this.hass.localize(
-                    "ui.panel.config.automation.editor.actions.disable"
-                  )}
-            </mwc-list-item>
-            <mwc-list-item class="warning">
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.delete"
-              )}
-            </mwc-list-item>
-          </ha-button-menu>
-        </div>
-        <div
-          class="card-content ${this.condition.enabled === false
-            ? "disabled"
-            : ""}"
-        >
+            </ha-progress-button>
+            <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
+              <ha-icon-button
+                slot="trigger"
+                .label=${this.hass.localize("ui.common.menu")}
+                .path=${mdiDotsVertical}
+              >
+              </ha-icon-button>
+              <mwc-list-item>
+                ${this._yamlMode
+                  ? this.hass.localize(
+                      "ui.panel.config.automation.editor.edit_ui"
+                    )
+                  : this.hass.localize(
+                      "ui.panel.config.automation.editor.edit_yaml"
+                    )}
+              </mwc-list-item>
+              <mwc-list-item>
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.actions.duplicate"
+                )}
+              </mwc-list-item>
+              <mwc-list-item class="warning">
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.actions.delete"
+                )}
+              </mwc-list-item>
+            </ha-button-menu>
+          </div>
           ${this._warnings
             ? html`<ha-alert
                 alert-type="warning"
@@ -176,23 +153,11 @@ export default class HaAutomationConditionRow extends LitElement {
         fireEvent(this, "duplicate");
         break;
       case 2:
-        this._onDisable();
-        break;
-      case 3:
         this._onDelete();
         break;
     }
   }
 
-  private _onDisable() {
-    const enabled = !(this.condition.enabled ?? true);
-    const value = { ...this.condition, enabled };
-    fireEvent(this, "value-changed", { value });
-    if (this._yamlMode) {
-      this._yamlEditor?.setValue(value);
-    }
-  }
-
   private _onDelete() {
     showConfirmationDialog(this, {
       text: this.hass.localize(
@@ -273,24 +238,9 @@ export default class HaAutomationConditionRow extends LitElement {
     return [
       haStyle,
       css`
-        .disabled {
-          opacity: 0.5;
-          pointer-events: none;
-        }
-        .card-content {
-          padding-top: 16px;
-          margin-top: 0;
-        }
-        .disabled-bar {
-          background: var(--divider-color, #e0e0e0);
-          text-align: center;
-          border-top-right-radius: var(--ha-card-border-radius);
-          border-top-left-radius: var(--ha-card-border-radius);
-        }
         .card-menu {
           float: right;
           z-index: 3;
-          margin: 4px;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
           display: flex;
           align-items: center;

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

@@ -1,4 +1,3 @@
-import deepClone from "deep-clone-simple";
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -57,7 +56,7 @@ export default class HaAutomationCondition extends LitElement {
           ></ha-automation-condition-row>
         `
       )}
-      <ha-card outlined>
+      <ha-card>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addCondition}>
             ${this.hass.localize(
@@ -97,7 +96,7 @@ export default class HaAutomationCondition extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.conditions.concat(deepClone(this.conditions[index])),
+      value: this.conditions.concat(this.conditions[index]),
     });
   }
 

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

@@ -3,6 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-blueprint-picker";
+import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import { showAutomationEditor } from "../../../data/automation";

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

@@ -239,8 +239,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                   ? html`
                       ${!this.narrow
                         ? html`
-                            <ha-card outlined>
-                              <div class="card-header">
+                            <ha-card
+                              ><div class="card-header">
                                 ${this._config.alias}
                               </div>
                               ${stateObj
@@ -275,8 +275,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                         .defaultValue=${this._preprocessYaml()}
                         @value-changed=${this._yamlChanged}
                       ></ha-yaml-editor>
-                      <ha-card outlined>
-                        <div class="card-actions">
+                      <ha-card
+                        ><div class="card-actions">
                           <mwc-button @click=${this._copyYaml}>
                             ${this.hass.localize(
                               "ui.panel.config.automation.editor.copy_to_clipboard"

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

@@ -47,7 +47,7 @@ export class HaManualAutomationEditor extends LitElement {
             "ui.panel.config.automation.editor.introduction"
           )}
         </span>
-        <ha-card outlined>
+        <ha-card>
           <div class="card-content">
             <ha-textfield
               .label=${this.hass.localize(