Fix zwave js handling multiple config entries

* Remove "Lovelace" from Github issue templates

* Changes from review

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,4 +1,4 @@
-name: Report a bug with the UI, Frontend or Lovelace
+name: Report a bug with the UI / Dashboards
 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 Lovelace cards.**
+        **Please not not report issues for custom 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, Frontend or Lovelace
+  - name: Request a feature for the UI / Dashboards
     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, Frontend or Lovelace
+  - name: Report a bug that is NOT related to the UI / Dashboards
     url: https://github.com/home-assistant/core/issues
-    about: This is the issue tracker for our frontend. Please report other issues with the backend repository.
+    about: This is the issue tracker for our frontend. Please report other issues in the backend ("core") 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 paths = require("./paths.js");
-const bundle = require("./bundle.js");
 const log = require("fancy-log");
 const WebpackBar = require("webpackbar");
+const paths = require("./paths.js");
+const bundle = require("./bundle.js");
 
 class LogStartCompilePlugin {
   ignoredFirst = false;
@@ -138,6 +138,8 @@ 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,6 +62,45 @@ 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,6 +20,10 @@ 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] },
@@ -28,11 +32,15 @@ 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")
@@ -86,6 +94,6 @@ class DemoHaAutomationEditorAction extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-ha-automation-editor-action": DemoHaAutomationEditorAction;
+    "demo-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 { Condition } from "../../../../src/data/automation";
+import type { ConditionWithShorthand } 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: Condition[] }[] = [
+const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
   {
     name: "State",
     conditions: [{ condition: "state", ...HaStateCondition.defaultConfig }],
@@ -69,6 +69,14 @@ const SCHEMAS: { name: string; conditions: Condition[] }[] = [
     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")

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

@@ -159,13 +159,19 @@ export class DemoHaAlert extends LitElement {
 
   firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    applyThemesOnElement(this.shadowRoot!.querySelector(".dark"), {
-      default_theme: "default",
-      default_dark_theme: "default",
-      themes: {},
-      darkMode: true,
-      theme: "default",
-    });
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
   }
 
   static get styles() {

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

@@ -170,6 +170,7 @@ const SCHEMAS: {
           select: { options: ["Option 1", "Option 2"], mode: "list" },
         },
       },
+      template: { name: "Template", selector: { template: {} } },
       select: {
         name: "Select",
         selector: {

gallery/src/pages/components/ha-tip.markdown

@@ -0,0 +1,3 @@
+---
+title: Tips
+---

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

@@ -0,0 +1,73 @@
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../../src/components/ha-tip";
+import "../../../../src/components/ha-card";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+
+const tips: (string | TemplateResult)[] = [
+  "Test tip",
+  "Bigger test tip, with some random text just to fill up as much space as possible without it looking like I'm really trying to to that",
+  html`<i>Tip</i> <b>with</b> <sub>HTML</sub>`,
+];
+
+@customElement("demo-components-ha-tip")
+export class DemoHaTip extends LitElement {
+  protected render(): TemplateResult {
+    return html` ${["light", "dark"].map(
+      (mode) => html`
+        <div class=${mode}>
+          <ha-card header="ha-tip ${mode} demo">
+            <div class="card-content">
+              ${tips.map((tip) => html`<ha-tip>${tip}</ha-tip>`)}
+            </div>
+          </ha-card>
+        </div>
+      `
+    )}`;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      .dark,
+      .light {
+        display: block;
+        background-color: var(--primary-background-color);
+        padding: 0 50px;
+      }
+      ha-tip {
+        margin-bottom: 14px;
+      }
+      ha-card {
+        margin: 24px auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-tip": DemoHaTip;
+  }
+}

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

@@ -133,6 +133,12 @@ const ENTITIES = [
     friendly_name: "Update with auto update",
     auto_update: true,
   }),
+  getEntity("update", "update20", "on", {
+    ...base_attributes,
+    in_progress: true,
+    title: undefined,
+    friendly_name: "Installing without title",
+  }),
 ];
 
 @customElement("demo-more-info-update")

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

@@ -68,6 +68,7 @@ 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,6 +50,7 @@ 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

@@ -39,7 +39,14 @@ import type { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
 
-const SUPPORTED_UI_TYPES = ["string", "select", "boolean", "integer", "float"];
+const SUPPORTED_UI_TYPES = [
+  "string",
+  "select",
+  "boolean",
+  "integer",
+  "float",
+  "schema",
+];
 
 const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
   new Type("!secret", {
@@ -48,6 +55,8 @@ const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
   }),
 ]);
 
+const MASKED_FIELDS = ["password", "secret", "token"];
+
 @customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
   @property({ attribute: false }) public addon!: HassioAddonDetails;
@@ -75,19 +84,66 @@ class HassioAddonConfig extends LitElement {
   public computeLabel = (entry: HaFormSchema): string =>
     this.addon.translations[this.hass.language]?.configuration?.[entry.name]
       ?.name ||
-    this.addon.translations.en?.configuration?.[entry.name].name ||
+    this.addon.translations.en?.configuration?.[entry.name]?.name ||
     entry.name;
 
-  private _schema = memoizeOne((schema: HaFormSchema[]): HaFormSchema[] =>
-    // @ts-expect-error supervisor does not implement [string, string] for select.options[]
-    schema.map((entry) =>
-      entry.type === "select"
-        ? {
-            ...entry,
-            options: entry.options.map((option) => [option, option]),
-          }
-        : entry
-    )
+  public computeHelper = (entry: HaFormSchema): string =>
+    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
+      ?.description ||
+    this.addon.translations.en?.configuration?.[entry.name]?.description ||
+    "";
+
+  private _convertSchema = memoizeOne(
+    // Convert supervisor schema to selectors
+    (schema: Record<string, any>): HaFormSchema[] =>
+      schema.map((entry) =>
+        entry.type === "select"
+          ? {
+              name: entry.name,
+              required: entry.required,
+              selector: { select: { options: entry.options } },
+            }
+          : entry.type === "string"
+          ? entry.multiple
+            ? {
+                name: entry.name,
+                required: entry.required,
+                selector: {
+                  select: { options: [], multiple: true, custom_value: true },
+                },
+              }
+            : {
+                name: entry.name,
+                required: entry.required,
+                selector: {
+                  text: {
+                    type:
+                      entry.format || MASKED_FIELDS.includes(entry.name)
+                        ? "password"
+                        : "text",
+                  },
+                },
+              }
+          : entry.type === "boolean"
+          ? {
+              name: entry.name,
+              required: entry.required,
+              selector: { boolean: {} },
+            }
+          : entry.type === "schema"
+          ? {
+              name: entry.name,
+              required: entry.required,
+              selector: { object: {} },
+            }
+          : entry.type === "float" || entry.type === "integer"
+          ? {
+              name: entry.name,
+              required: entry.required,
+              selector: { number: { mode: "box" } },
+            }
+          : entry
+      )
   );
 
   private _filteredShchema = memoizeOne(
@@ -106,7 +162,7 @@ class HassioAddonConfig extends LitElement {
         );
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card>
+      <ha-card outlined>
         <div class="header">
           <h2>
             ${this.supervisor.localize("addon.configuration.options.header")}
@@ -140,7 +196,8 @@ class HassioAddonConfig extends LitElement {
                 .data=${this._options!}
                 @value-changed=${this._configChanged}
                 .computeLabel=${this.computeLabel}
-                .schema=${this._schema(
+                .computeHelper=${this.computeHelper}
+                .schema=${this._convertSchema(
                   this._showOptional
                     ? this.addon.schema!
                     : this._filteredShchema(
@@ -197,8 +254,9 @@ class HassioAddonConfig extends LitElement {
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     this._canShowSchema = !this.addon.schema!.find(
-      // @ts-ignore
-      (entry) => !SUPPORTED_UI_TYPES.includes(entry.type) || entry.multiple
+      (entry) =>
+        // @ts-ignore
+        !SUPPORTED_UI_TYPES.includes(entry.type)
     );
     this._yamlMode = !this._canShowSchema;
   }

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

@@ -1,4 +1,3 @@
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResultGroup,
@@ -8,10 +7,13 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-form/ha-form";
+import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
@@ -24,16 +26,6 @@ import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
 
-interface NetworkItem {
-  description: string;
-  container: string;
-  host: number | null;
-}
-
-interface NetworkItemInput extends PaperInputElement {
-  container: string;
-}
-
 @customElement("hassio-addon-network")
 class HassioAddonNetwork extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -42,9 +34,13 @@ class HassioAddonNetwork extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
+  @state() private _showOptional = false;
+
+  @state() private _configHasChanged = false;
+
   @state() private _error?: string;
 
-  @state() private _config?: NetworkItem[];
+  @state() private _config?: Record<string, any>;
 
   public connectedCallback(): void {
     super.connectedCallback();
@@ -56,59 +52,61 @@ class HassioAddonNetwork extends LitElement {
       return html``;
     }
 
+    const hasHiddenOptions = Object.keys(this._config).find(
+      (entry) => this._config![entry] === null
+    );
+
     return html`
       <ha-card
+        outlined
         .header=${this.supervisor.localize(
           "addon.configuration.network.header"
         )}
       >
         <div class="card-content">
+          <p>
+            ${this.supervisor.localize(
+              "addon.configuration.network.introduction"
+            )}
+          </p>
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
 
-          <table>
-            <tbody>
-              <tr>
-                <th>
-                  ${this.supervisor.localize(
-                    "addon.configuration.network.container"
-                  )}
-                </th>
-                <th>
-                  ${this.supervisor.localize(
-                    "addon.configuration.network.host"
-                  )}
-                </th>
-                <th>${this.supervisor.localize("common.description")}</th>
-              </tr>
-              ${this._config!.map(
-                (item) => html`
-                  <tr>
-                    <td>${item.container}</td>
-                    <td>
-                      <paper-input
-                        @value-changed=${this._configChanged}
-                        placeholder=${this.supervisor.localize(
-                          "addon.configuration.network.disabled"
-                        )}
-                        .value=${item.host ? String(item.host) : ""}
-                        .container=${item.container}
-                        no-label-float
-                      ></paper-input>
-                    </td>
-                    <td>${this._computeDescription(item)}</td>
-                  </tr>
-                `
-              )}
-            </tbody>
-          </table>
+          <ha-form
+            .data=${this._config}
+            @value-changed=${this._configChanged}
+            .computeLabel=${this._computeLabel}
+            .computeHelper=${this._computeHelper}
+            .schema=${this._createSchema(
+              this._config,
+              this._showOptional,
+              this.hass.userData?.showAdvanced || false
+            )}
+          ></ha-form>
         </div>
+        ${hasHiddenOptions
+          ? html`<ha-formfield
+              class="show-optional"
+              .label=${this.supervisor.localize(
+                "addon.configuration.network.show_disabled"
+              )}
+            >
+              <ha-switch
+                @change=${this._toggleOptional}
+                .checked=${this._showOptional}
+              >
+              </ha-switch>
+            </ha-formfield>`
+          : ""}
         <div class="card-actions">
           <ha-progress-button class="warning" @click=${this._resetTapped}>
             ${this.supervisor.localize("common.reset_defaults")}
           </ha-progress-button>
-          <ha-progress-button @click=${this._saveTapped}>
+          <ha-progress-button
+            @click=${this._saveTapped}
+            .disabled=${!this._configHasChanged}
+          >
             ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
@@ -123,50 +121,60 @@ class HassioAddonNetwork extends LitElement {
     }
   }
 
-  private _computeDescription = (item: NetworkItem): string =>
-    this.addon.translations[this.hass.language]?.network?.[item.container]
-      ?.description ||
-    this.addon.translations.en?.network?.[item.container]?.description ||
-    item.description;
+  private _createSchema = memoizeOne(
+    (
+      config: Record<string, number>,
+      showOptional: boolean,
+      advanced: boolean
+    ): HaFormSchema[] =>
+      (showOptional
+        ? Object.keys(config)
+        : Object.keys(config).filter((entry) => config[entry] !== null)
+      ).map((entry) => ({
+        name: entry,
+        selector: {
+          number: {
+            mode: "box",
+            min: 0,
+            max: 65535,
+            unit_of_measurement: advanced ? entry : undefined,
+          },
+        },
+      }))
+  );
+
+  private _computeLabel = (_: HaFormSchema): string => "";
+
+  private _computeHelper = (item: HaFormSchema): string =>
+    this.addon.translations[this.hass.language]?.network?.[item.name] ||
+    this.addon.translations.en?.network?.[item.name] ||
+    this.addon.network_description?.[item.name] ||
+    item.name;
 
   private _setNetworkConfig(): void {
-    const network = this.addon.network || {};
-    const description = this.addon.network_description || {};
-    const items: NetworkItem[] = Object.keys(network).map((key) => ({
-      container: key,
-      host: network[key],
-      description: description[key],
-    }));
-    this._config = items.sort((a, b) => (a.container > b.container ? 1 : -1));
+    this._config = this.addon.network || {};
   }
 
-  private async _configChanged(ev: Event): Promise<void> {
-    const target = ev.target as NetworkItemInput;
-    this._config!.forEach((item) => {
-      if (
-        item.container === target.container &&
-        item.host !== parseInt(String(target.value), 10)
-      ) {
-        item.host = target.value ? parseInt(String(target.value), 10) : null;
-      }
-    });
+  private async _configChanged(ev: CustomEvent): Promise<void> {
+    this._configHasChanged = true;
+    this._config! = ev.detail.value;
   }
 
   private async _resetTapped(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
-    button.progress = true;
-
     const data: HassioAddonSetOptionParams = {
       network: null,
     };
 
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
+      this._configHasChanged = false;
       const eventdata = {
         success: true,
         response: undefined,
         path: "option",
       };
+      button.actionSuccess();
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
@@ -177,19 +185,21 @@ class HassioAddonNetwork extends LitElement {
         "error",
         extractApiErrorMessage(err)
       );
+      button.actionError();
     }
+  }
 
-    button.progress = false;
+  private _toggleOptional() {
+    this._showOptional = !this._showOptional;
   }
 
   private async _saveTapped(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
-    button.progress = true;
 
     this._error = undefined;
     const networkconfiguration = {};
-    this._config!.forEach((item) => {
-      networkconfiguration[item.container] = parseInt(String(item.host), 10);
+    Object.entries(this._config!).forEach(([key, value]) => {
+      networkconfiguration[key] = value ?? null;
     });
 
     const data: HassioAddonSetOptionParams = {
@@ -198,11 +208,13 @@ class HassioAddonNetwork extends LitElement {
 
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
+      this._configHasChanged = false;
       const eventdata = {
         success: true,
         response: undefined,
         path: "option",
       };
+      button.actionSuccess();
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
@@ -213,8 +225,8 @@ class HassioAddonNetwork extends LitElement {
         "error",
         extractApiErrorMessage(err)
       );
+      button.actionError();
     }
-    button.progress = false;
   }
 
   static get styles(): CSSResultGroup {
@@ -232,6 +244,9 @@ class HassioAddonNetwork extends LitElement {
           display: flex;
           justify-content: space-between;
         }
+        .show-optional {
+          padding: 16px;
+        }
       `,
     ];
   }

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>
+        <ha-card outlined>
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}

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

@@ -17,7 +17,9 @@ 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";
@@ -166,6 +168,42 @@ 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>
+      <ha-card outlined>
         <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>
+            <ha-card outlined>
               <div class="card-content">
                 <ha-markdown
                   .content=${this.addon.long_description}

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

@@ -2,6 +2,7 @@ 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,
@@ -11,7 +12,6 @@ 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>
+      <ha-card outlined>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
         <div class="card-content">
           ${this._content
-            ? html`<hassio-ansi-to-html
+            ? html`<ha-ansi-to-html
                 .content=${this._content}
-              ></hassio-ansi-to-html>`
+              ></ha-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 { mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
+import { mdiBackupRestore, mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -166,7 +166,15 @@ export class HassioBackups extends LitElement {
     }
     return html`
       <hass-tabs-subpage-data-table
-        .tabs=${supervisorTabs(this.hass)}
+        .tabs=${atLeastVersion(this.hass.config.version, 2022, 5)
+          ? [
+              {
+                translationKey: "panel.backups",
+                path: `/hassio/backups`,
+                iconPath: mdiBackupRestore,
+              },
+            ]
+          : supervisorTabs(this.hass)}
         .hass=${this.hass}
         .localizeFunc=${this.supervisor.localize}
         .searchLabel=${this.supervisor.localize("search")}
@@ -182,7 +190,9 @@ export class HassioBackups extends LitElement {
         selectable
         hasFab
         .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
-        back-path="/config"
+        back-path=${atLeastVersion(this.hass.config.version, 2022, 5)
+          ? "/config/system"
+          : "/config"}
         supervisor
       >
         <ha-button-menu

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

hassio/src/dashboard/hassio-dashboard.ts

@@ -10,6 +10,7 @@ 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 {
@@ -22,6 +23,31 @@ 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}
@@ -74,6 +100,12 @@ 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>
+      <ha-card outlined>
         <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 { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { mainWindow } from "../../src/common/dom/get_main_window";
+import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
 import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
@@ -73,6 +73,18 @@ 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";
 
-const REDIRECTS: Redirects = {
+export const REDIRECTS: Redirects = {
   supervisor: {
     redirect: "/hassio/dashboard",
   },
@@ -42,6 +42,9 @@ const REDIRECTS: Redirects = {
     params: {
       addon: "string",
     },
+    optional_params: {
+      repository_url: "url",
+    },
   },
   supervisor_ingress: {
     redirect: "/hassio/ingress",
@@ -124,6 +127,14 @@ 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,24 +8,27 @@ 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[] => [
-  {
-    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[] =>
+  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,
+        },
+      ];

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

@@ -48,7 +48,7 @@ class HassioCoreInfo extends LitElement {
     ];
 
     return html`
-      <ha-card header="Core">
+      <ha-card header="Core" outlined>
         <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">
+      <ha-card header="Host" outlined>
         <div class="card-content">
           <div>
             ${this.supervisor.host.features.includes("hostname")

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

@@ -23,6 +23,10 @@ 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";
@@ -30,11 +34,6 @@ 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;
@@ -58,7 +57,7 @@ class HassioSupervisorInfo extends LitElement {
       },
     ];
     return html`
-      <ha-card header="Supervisor">
+      <ha-card header="Supervisor" outlined>
         <div class="card-content">
           <div>
             <ha-settings-row>

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

@@ -1,3 +1,4 @@
+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";
@@ -11,7 +12,6 @@ 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>
+      <ha-card outlined>
         ${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`<hassio-ansi-to-html .content=${this._content}>
-              </hassio-ansi-to-html>`
+            ? html`<ha-ansi-to-html .content=${this._content}>
+              </ha-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,6 +128,7 @@ class UpdateAvailableCard extends LitElement {
 
     return html`
       <ha-card
+        outlined
         .header=${this.supervisor.localize("update_available.update_name", {
           name: this._name,
         })}

package.json

@@ -108,7 +108,7 @@
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^1.1.5",
-    "home-assistant-js-websocket": "^7.0.1",
+    "home-assistant-js-websocket": "^7.0.3",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
     "js-yaml": "^4.1.0",

script/core

@@ -15,7 +15,7 @@ if [ -z $(which hass) ]; then
   echo "Installing Home Asstant core from dev."
   python3 -m pip install --upgrade \
     colorlog \
-    git+git://github.com/home-assistant/home-assistant.git@dev
+    git+https://github.com/home-assistant/home-assistant.git@dev
 fi
 
 if [ ! -d "${WD}/config" ]; then

setup.cfg

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

src/common/datetime/duration.ts

@@ -0,0 +1,16 @@
+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/dom/is-navigation-click.ts

@@ -12,7 +12,7 @@ export const isNavigationClick = (e: MouseEvent) => {
 
   const anchor = e
     .composedPath()
-    .filter((n) => (n as HTMLElement).tagName === "A")[0] as
+    .find((n) => (n as HTMLElement).tagName === "A") as
     | HTMLAnchorElement
     | undefined;
   if (

src/common/entity/binary_sensor_icon.ts

@@ -29,8 +29,11 @@ import {
   mdiPowerPlug,
   mdiPowerPlugOff,
   mdiRadioboxBlank,
-  mdiSmoke,
   mdiSnowflake,
+  mdiSmokeDetector,
+  mdiSmokeDetectorAlert,
+  mdiSmokeDetectorVariant,
+  mdiSmokeDetectorVariantAlert,
   mdiSquare,
   mdiSquareOutline,
   mdiStop,
@@ -52,6 +55,8 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
       return is_off ? mdiBattery : mdiBatteryOutline;
     case "battery_charging":
       return is_off ? mdiBattery : mdiBatteryCharging;
+    case "carbon_monoxide":
+      return is_off ? mdiSmokeDetector : mdiSmokeDetectorAlert;
     case "cold":
       return is_off ? mdiThermometer : mdiSnowflake;
     case "connectivity":
@@ -68,7 +73,7 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
     case "tamper":
       return is_off ? mdiCheckCircle : mdiAlertCircle;
     case "smoke":
-      return is_off ? mdiCheckCircle : mdiSmoke;
+      return is_off ? mdiSmokeDetectorVariant : mdiSmokeDetectorVariantAlert;
     case "heat":
       return is_off ? mdiThermometer : mdiFire;
     case "light":

src/common/entity/compute_state_display.ts

@@ -13,6 +13,7 @@ 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,
@@ -28,11 +29,27 @@ 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, {
           style: "currency",
           currency: stateObj.attributes.unit_of_measurement,
+          minimumFractionDigits: 2,
         });
       } catch (_err) {
         // fallback to default

src/common/entity/domain_icon.ts

@@ -8,26 +8,25 @@ import {
   mdiCalendar,
   mdiCast,
   mdiCastConnected,
+  mdiCheckCircleOutline,
   mdiClock,
+  mdiCloseCircleOutline,
   mdiGestureTapButton,
   mdiLanConnect,
   mdiLanDisconnect,
-  mdiLightSwitch,
   mdiLock,
   mdiLockAlert,
   mdiLockClock,
   mdiLockOpen,
+  mdiPackage,
+  mdiPackageDown,
   mdiPackageUp,
   mdiPowerPlug,
   mdiPowerPlugOff,
   mdiRestart,
-  mdiToggleSwitch,
-  mdiToggleSwitchOff,
-  mdiCheckCircleOutline,
-  mdiCloseCircleOutline,
+  mdiToggleSwitchVariant,
+  mdiToggleSwitchVariantOff,
   mdiWeatherNight,
-  mdiPackage,
-  mdiPackageDown,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import { updateIsInstalling, UpdateEntity } from "../../data/update";
@@ -109,9 +108,11 @@ export const domainIcon = (
         case "outlet":
           return compareState === "on" ? mdiPowerPlug : mdiPowerPlugOff;
         case "switch":
-          return compareState === "on" ? mdiToggleSwitch : mdiToggleSwitchOff;
+          return compareState === "on"
+            ? mdiToggleSwitchVariant
+            : mdiToggleSwitchVariantOff;
         default:
-          return mdiLightSwitch;
+          return mdiToggleSwitchVariant;
       }
 
     case "sensor": {

src/common/util/promise-timeout.ts

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

src/common/util/subscribe-polling.ts

@@ -0,0 +1,18 @@
+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/chart/statistics-chart.ts

@@ -347,8 +347,8 @@ class StatisticsChart extends LitElement {
         statTypes.forEach((type) => {
           let val: number | null;
           if (type === "sum") {
-            if (!initVal) {
-              initVal = val = stat.state;
+            if (initVal === null) {
+              initVal = val = stat.state || 0;
               prevSum = stat.sum;
             } else {
               val = initVal + ((stat.sum || 0) - prevSum!);

src/components/currency-datalist.ts

@@ -1,165 +1,167 @@
+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 [
-    "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",
-  ]) {
+  for (const currency of currencies) {
     const option = document.createElement("option");
     option.value = currency;
     option.innerHTML = currency;

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

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

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

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

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

@@ -4,6 +4,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import "./ha-device-picker";
+import type { HaDevicePickerDeviceFilterFunc } from "./ha-device-picker";
 
 @customElement("ha-devices-picker")
 class HaDevicesPicker extends LitElement {
@@ -13,6 +14,8 @@ class HaDevicesPicker extends LitElement {
 
   @property() public helper?: string;
 
+  @property({ type: Boolean }) public disabled?: boolean;
+
   @property({ type: Boolean }) public required?: boolean;
 
   /**
@@ -39,6 +42,8 @@ class HaDevicesPicker extends LitElement {
 
   @property({ attribute: "pick-device-label" }) public pickDeviceLabel?: string;
 
+  @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
@@ -53,11 +58,13 @@ class HaDevicesPicker extends LitElement {
               allow-custom-entity
               .curValue=${entityId}
               .hass=${this.hass}
+              .deviceFilter=${this.deviceFilter}
               .includeDomains=${this.includeDomains}
               .excludeDomains=${this.excludeDomains}
               .includeDeviceClasses=${this.includeDeviceClasses}
               .value=${entityId}
               .label=${this.pickedDeviceLabel}
+              .disabled=${this.disabled}
               @value-changed=${this._deviceChanged}
             ></ha-device-picker>
           </div>
@@ -65,12 +72,15 @@ class HaDevicesPicker extends LitElement {
       )}
       <div>
         <ha-device-picker
+          allow-custom-entity
           .hass=${this.hass}
           .helper=${this.helper}
+          .deviceFilter=${this.deviceFilter}
           .includeDomains=${this.includeDomains}
           .excludeDomains=${this.excludeDomains}
           .includeDeviceClasses=${this.includeDeviceClasses}
           .label=${this.pickDeviceLabel}
+          .disabled=${this.disabled}
           .required=${this.required && !currentDevices.length}
           @value-changed=${this._addDevice}
         ></ha-device-picker>

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

@@ -14,6 +14,8 @@ class HaEntitiesPickerLight extends LitElement {
 
   @property({ type: Array }) public value?: string[];
 
+  @property({ type: Boolean }) public disabled?: boolean;
+
   @property({ type: Boolean }) public required?: boolean;
 
   @property() public helper?: string;
@@ -96,6 +98,7 @@ class HaEntitiesPickerLight extends LitElement {
               .entityFilter=${this._entityFilter}
               .value=${entityId}
               .label=${this.pickedEntityLabel}
+              .disabled=${this.disabled}
               @value-changed=${this._entityChanged}
             ></ha-entity-picker>
           </div>
@@ -103,6 +106,7 @@ class HaEntitiesPickerLight extends LitElement {
       )}
       <div>
         <ha-entity-picker
+          allow-custom-entity
           .hass=${this.hass}
           .includeDomains=${this.includeDomains}
           .excludeDomains=${this.excludeDomains}
@@ -113,6 +117,7 @@ class HaEntitiesPickerLight extends LitElement {
           .entityFilter=${this._entityFilter}
           .label=${this.pickEntityLabel}
           .helper=${this.helper}
+          .disabled=${this.disabled}
           .required=${this.required && !currentEntities.length}
           @value-changed=${this._addEntity}
         ></ha-entity-picker>

src/components/ha-analytics.ts

@@ -2,12 +2,12 @@ import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { Analytics, AnalyticsPreferences } from "../data/analytics";
+import type { Analytics, AnalyticsPreferences } from "../data/analytics";
 import { haStyle } from "../resources/styles";
-import { HomeAssistant } from "../types";
-import "./ha-checkbox";
-import type { HaCheckbox } from "./ha-checkbox";
+import type { HomeAssistant } from "../types";
 import "./ha-settings-row";
+import "./ha-switch";
+import type { HaSwitch } from "./ha-switch";
 
 const ADDITIONAL_PREFERENCES = [
   {
@@ -40,62 +40,62 @@ export class HaAnalytics extends LitElement {
 
     return html`
       <ha-settings-row>
-        <span slot="prefix">
-          <ha-checkbox
-            @change=${this._handleRowCheckboxClick}
-            .checked=${baseEnabled}
-            .preference=${"base"}
-            .disabled=${loading}
-            name="base"
-          >
-          </ha-checkbox>
-        </span>
         <span slot="heading" data-for="base"> Basic analytics </span>
         <span slot="description" data-for="base">
           This includes information about your system.
         </span>
+        <ha-switch
+          @change=${this._handleRowClick}
+          .checked=${baseEnabled}
+          .preference=${"base"}
+          .disabled=${loading}
+          name="base"
+        >
+        </ha-switch>
       </ha-settings-row>
       ${ADDITIONAL_PREFERENCES.map(
         (preference) =>
-          html`<ha-settings-row>
-            <span slot="prefix">
-              <ha-checkbox
-                @change=${this._handleRowCheckboxClick}
-                .checked=${this.analytics?.preferences[preference.key]}
-                .preference=${preference.key}
-                name=${preference.key}
-              >
-              </ha-checkbox>
-              ${!baseEnabled
-                ? html`<paper-tooltip animation-delay="0" position="right">
-                    You need to enable basic analytics for this option to be
-                    available
-                  </paper-tooltip>`
-                : ""}
-            </span>
-            <span slot="heading" data-for=${preference.key}>
-              ${preference.title}
-            </span>
-            <span slot="description" data-for=${preference.key}>
-              ${preference.description}
-            </span>
-          </ha-settings-row>`
+          html`
+            <ha-settings-row>
+              <span slot="heading" data-for=${preference.key}>
+                ${preference.title}
+              </span>
+              <span slot="description" data-for=${preference.key}>
+                ${preference.description}
+              </span>
+              <span>
+                <ha-switch
+                  @change=${this._handleRowClick}
+                  .checked=${this.analytics?.preferences[preference.key]}
+                  .preference=${preference.key}
+                  name=${preference.key}
+                >
+                </ha-switch>
+                ${!baseEnabled
+                  ? html`
+                      <paper-tooltip animation-delay="0" position="right">
+                        You need to enable basic analytics for this option to be
+                        available
+                      </paper-tooltip>
+                    `
+                  : ""}
+              </span>
+            </ha-settings-row>
+          `
       )}
       <ha-settings-row>
-        <span slot="prefix">
-          <ha-checkbox
-            @change=${this._handleRowCheckboxClick}
-            .checked=${this.analytics?.preferences.diagnostics}
-            .preference=${"diagnostics"}
-            .disabled=${loading}
-            name="diagnostics"
-          >
-          </ha-checkbox>
-        </span>
         <span slot="heading" data-for="diagnostics"> Diagnostics </span>
         <span slot="description" data-for="diagnostics">
           Share crash reports when unexpected errors occur.
         </span>
+        <ha-switch
+          @change=${this._handleRowClick}
+          .checked=${this.analytics?.preferences.diagnostics}
+          .preference=${"diagnostics"}
+          .disabled=${loading}
+          name="diagnostics"
+        >
+        </ha-switch>
       </ha-settings-row>
     `;
   }
@@ -120,23 +120,23 @@ export class HaAnalytics extends LitElement {
     });
   }
 
-  private _handleRowCheckboxClick(ev: Event) {
-    const checkbox = ev.currentTarget as HaCheckbox;
-    const preference = (checkbox as any).preference;
+  private _handleRowClick(ev: Event) {
+    const target = ev.currentTarget as HaSwitch;
+    const preference = (target as any).preference;
     const preferences = this.analytics ? { ...this.analytics.preferences } : {};
 
-    if (preferences[preference] === checkbox.checked) {
+    if (preferences[preference] === target.checked) {
       return;
     }
 
-    preferences[preference] = checkbox.checked;
+    preferences[preference] = target.checked;
 
     if (
       ADDITIONAL_PREFERENCES.some((entry) => entry.key === preference) &&
-      checkbox.checked
+      target.checked
     ) {
       preferences.base = true;
-    } else if (preference === "base" && !checkbox.checked) {
+    } else if (preference === "base" && !target.checked) {
       preferences.usage = false;
       preferences.statistics = false;
     }

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

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

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).items = this._getAreas(
+          (this.comboBox as any).filteredItems = this._getAreas(
             this._areas!,
             this._devices!,
             this._entities!,

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

@@ -131,7 +131,7 @@ export class HaBaseTimeInput extends LitElement {
   protected render(): TemplateResult {
     return html`
       ${this.label
-        ? html`<label>${this.label}${this.required ? "*" : ""}</label>`
+        ? html`<label>${this.label}${this.required ? " *" : ""}</label>`
         : ""}
       <div class="time-input-wrap">
         ${this.enableDay
@@ -310,6 +310,7 @@ 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-toggle-group.ts

@@ -117,6 +117,19 @@ export class HaButtonToggleGroup extends LitElement {
         --mdc-shape-small: 4px;
         border-right-width: 1px;
       }
+
+      :host([dir="rtl"]) ha-icon-button:first-child,
+      :host([dir="rtl"]) mwc-button:first-child {
+        border-radius: 0 4px 4px 0;
+        border-right-width: 1px;
+        --mdc-shape-small: 0 4px 4px 0;
+        --mdc-button-outline-width: 1px;
+      }
+      :host([dir="rtl"]) ha-icon-button:last-child,
+      :host([dir="rtl"]) mwc-button:last-child {
+        --mdc-shape-small: 4px 0 0 4px;
+        border-radius: 4px 0 0 4px;
+      }
     `;
   }
 }

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

@@ -0,0 +1,76 @@
+import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
+import { styles } from "@material/mwc-list/mwc-list-item.css";
+import { css, CSSResult, html } from "lit";
+import { customElement, property, query } from "lit/decorators";
+
+@customElement("ha-clickable-list-item")
+export class HaClickableListItem extends ListItemBase {
+  @property() public href?: string;
+
+  @property({ type: Boolean }) public disableHref = false;
+
+  // 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() {
+    const r = super.render();
+    const href = this.href || "";
+
+    return html`${this.disableHref
+      ? html`<a aria-role="option">${r}</a>`
+      : html`<a
+          aria-role="option"
+          target=${this.openNewTab ? "_blank" : ""}
+          href=${href}
+          >${r}</a
+        >`}`;
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    this.addEventListener("keydown", (ev) => {
+      if (ev.key === "Enter" || ev.key === " ") {
+        this._anchor.click();
+      }
+    });
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      styles,
+      css`
+        :host {
+          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;
+        }
+        a {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          padding-left: var(--mdc-list-side-padding, 20px);
+          padding-right: var(--mdc-list-side-padding, 20px);
+          overflow: hidden;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-clickable-list-item": HaClickableListItem;
+  }
+}

src/components/ha-combo-box.ts

@@ -250,6 +250,18 @@ export class HaComboBox extends LitElement {
         top: -7px;
         right: 36px;
       }
+
+      :host-context([style*="direction: rtl;"]) .toggle-button {
+        left: 12px;
+        right: auto;
+        top: -10px;
+      }
+      :host-context([style*="direction: rtl;"]) .clear-button {
+        --mdc-icon-size: 20px;
+        top: -7px;
+        left: 36px;
+        right: auto;
+      }
     `;
   }
 }

src/components/ha-dialog.ts

@@ -98,6 +98,10 @@ export class HaDialog extends DialogBase {
         margin-left: 40px;
         margin-right: 0px;
       }
+      :host-context([style*="direction: rtl;"]) .dialog-actions {
+        left: 0px !important;
+        right: auto !important;
+      }
     `,
   ];
 }

src/components/ha-fab.ts

@@ -1,5 +1,6 @@
 import { Fab } from "@material/mwc-fab";
 import { customElement } from "lit/decorators";
+import { css } from "lit";
 
 @customElement("ha-fab")
 export class HaFab extends Fab {
@@ -7,6 +8,17 @@ export class HaFab extends Fab {
     super.firstUpdated(changedProperties);
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
   }
+
+  static override styles = Fab.styles.concat([
+    css`
+      :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-file-upload.ts

@@ -176,10 +176,24 @@ export class HaFileUpload extends LitElement {
         .mdc-text-field__icon--leading {
           margin-bottom: 12px;
         }
+        :host-context([style*="direction: rtl;"])
+          .mdc-text-field__icon--leading {
+          margin-right: 0px;
+        }
         .mdc-text-field--filled .mdc-floating-label--float-above {
           transform: scale(0.75);
           top: 8px;
         }
+        :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+          left: initial;
+          right: 16px;
+        }
+        :host-context([style*="direction: rtl;"])
+          .mdc-text-field--filled
+          .mdc-floating-label {
+          left: initial;
+          right: 48px;
+        }
         .dragged:before {
           position: var(--layout-fit_-_position);
           top: var(--layout-fit_-_top);

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

@@ -132,6 +132,11 @@ 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-labeled-slider.js

@@ -53,7 +53,7 @@ class HaLabeledSlider extends PolymerElement {
   }
 
   _getTitle() {
-    return `${this.caption}${this.required ? "*" : ""}`;
+    return `${this.caption}${this.caption && this.required ? " *" : ""}`;
   }
 
   static get properties() {

src/components/ha-metric.ts

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,90 @@
+import "@material/mwc-list/mwc-list";
+import "@material/mwc-list/mwc-list-item";
+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";
+
+@customElement("ha-navigation-list")
+class HaNavigationList extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public pages!: PageNavigation[];
+
+  @property({ type: Boolean }) public hasSecondary = false;
+
+  public render(): TemplateResult {
+    return html`
+      <mwc-list>
+        ${this.pages.map(
+          (page) => html`
+            <ha-clickable-list-item
+              graphic="avatar"
+              .twoline=${this.hasSecondary}
+              .hasMeta=${!this.narrow}
+              @click=${this._entryClicked}
+              href=${page.path}
+            >
+              <div
+                slot="graphic"
+                class=${page.iconColor ? "icon-background" : ""}
+                .style="background-color: ${page.iconColor || "undefined"}"
+              >
+                <ha-svg-icon .path=${page.iconPath}></ha-svg-icon>
+              </div>
+              <span>${page.name}</span>
+              ${this.hasSecondary
+                ? html`<span slot="secondary">${page.description}</span>`
+                : ""}
+              ${!this.narrow
+                ? html`<ha-icon-next slot="meta"></ha-icon-next>`
+                : ""}
+            </ha-clickable-list-item>
+          `
+        )}
+      </mwc-list>
+    `;
+  }
+
+  private _entryClicked(ev) {
+    ev.currentTarget.blur();
+  }
+
+  static styles: CSSResultGroup = css`
+    :host {
+      --mdc-list-vertical-padding: 0;
+    }
+    ha-svg-icon,
+    ha-icon-next {
+      color: var(--secondary-text-color);
+      height: 24px;
+      width: 24px;
+      display: block;
+    }
+    ha-svg-icon {
+      padding: 8px;
+    }
+    .icon-background {
+      border-radius: 50%;
+    }
+    .icon-background ha-svg-icon {
+      color: #fff;
+    }
+    ha-clickable-list-item {
+      cursor: pointer;
+      font-size: var(--navigation-list-item-title-font-size);
+      padding: var(--navigation-list-item-padding) 0;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-navigation-list": HaNavigationList;
+  }
+}

src/components/ha-network.ts

@@ -163,6 +163,9 @@ 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-select.ts

@@ -47,6 +47,10 @@ export class HaSelect extends SelectBase {
       .mdc-select__anchor {
         width: var(--ha-select-min-width, 200px);
       }
+      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+        right: 16px !important;
+        left: initial !important;
+      }
     `,
   ];
 }

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

@@ -26,9 +26,9 @@ export class HaColorTempSelector extends LitElement {
       <ha-labeled-slider
         pin
         icon="hass:thermometer"
-        .caption=${this.label}
-        .min=${this.selector.color_temp.min_mireds ?? 153}
-        .max=${this.selector.color_temp.max_mireds ?? 500}
+        .caption=${this.label || ""}
+        .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-device.ts

@@ -66,12 +66,14 @@ export class HaDeviceSelector extends LitElement {
         .hass=${this.hass}
         .value=${this.value}
         .helper=${this.helper}
+        .deviceFilter=${this._filterDevices}
         .includeDeviceClasses=${this.selector.device.entity?.device_class
           ? [this.selector.device.entity.device_class]
           : undefined}
         .includeDomains=${this.selector.device.entity?.domain
           ? [this.selector.device.entity.domain]
           : undefined}
+        .disabled=${this.disabled}
         .required=${this.required}
       ></ha-devices-picker>
     `;

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

@@ -51,9 +51,10 @@ export class HaEntitySelector extends LitElement {
         .hass=${this.hass}
         .value=${this.value}
         .helper=${this.helper}
-        .entityFilter=${this._filterEntities}
         .includeEntities=${this.selector.entity.include_entities}
         .excludeEntities=${this.selector.entity.exclude_entities}
+        .entityFilter=${this._filterEntities}
+        .disabled=${this.disabled}
         .required=${this.required}
       ></ha-entities-picker>
     `;

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

@@ -1,4 +1,4 @@
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -76,6 +76,13 @@ 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

@@ -30,7 +30,7 @@ export class HaNumberSelector extends LitElement {
     const isBox = this.selector.number.mode === "box";
 
     return html`
-      ${this.label}${this.required ? "*" : ""}
+      ${this.label ? html`${this.label}${this.required ? " *" : ""}` : ""}
       <div class="input">
         ${!isBox
           ? html`<ha-slider
@@ -107,6 +107,7 @@ export class HaNumberSelector extends LitElement {
         display: flex;
         justify-content: space-between;
         align-items: center;
+        direction: ltr;
       }
       ha-slider {
         flex: 1;

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

@@ -3,6 +3,7 @@ import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "../ha-yaml-editor";
+import "../ha-input-helper-text";
 
 @customElement("ha-selector-object")
 export class HaObjectSelector extends LitElement {
@@ -12,6 +13,8 @@ export class HaObjectSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property() public placeholder?: string;
 
   @property({ type: Boolean }) public disabled = false;
@@ -20,13 +23,17 @@ export class HaObjectSelector extends LitElement {
 
   protected render() {
     return html`<ha-yaml-editor
-      .hass=${this.hass}
-      .readonly=${this.disabled}
-      .required=${this.required}
-      .placeholder=${this.placeholder}
-      .defaultValue=${this.value}
-      @value-changed=${this._handleChange}
-    ></ha-yaml-editor>`;
+        .hass=${this.hass}
+        .readonly=${this.disabled}
+        .label=${this.label}
+        .required=${this.required}
+        .placeholder=${this.placeholder}
+        .defaultValue=${this.value}
+        @value-changed=${this._handleChange}
+      ></ha-yaml-editor>
+      ${this.helper
+        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        : ""} `;
   }
 
   private _handleChange(ev) {

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

@@ -0,0 +1,56 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import { HomeAssistant } from "../../types";
+import "../ha-code-editor";
+import "../ha-input-helper-text";
+
+@customElement("ha-selector-template")
+export class HaTemplateSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    return html`
+      ${this.label
+        ? html`<p>${this.label}${this.required ? " *" : ""}</p>`
+        : ""}
+      <ha-code-editor
+        mode="jinja2"
+        .hass=${this.hass}
+        .value=${this.value}
+        .readOnly=${this.disabled}
+        autofocus
+        autocomplete-entities
+        @value-changed=${this._handleChange}
+        dir="ltr"
+      ></ha-code-editor>
+      ${this.helper
+        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        : ""}
+    `;
+  }
+
+  private _handleChange(ev) {
+    const value = ev.target.value;
+    if (this.value === value) {
+      return;
+    }
+    fireEvent(this, "value-changed", { value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-template": HaTemplateSelector;
+  }
+}

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

@@ -18,6 +18,7 @@ import "./ha-selector-number";
 import "./ha-selector-object";
 import "./ha-selector-select";
 import "./ha-selector-target";
+import "./ha-selector-template";
 import "./ha-selector-text";
 import "./ha-selector-time";
 import "./ha-selector-icon";

src/components/ha-service-control.ts

@@ -472,6 +472,7 @@ 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: flex;
+        display: var(--settings-row-content-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: contents;
+        display: var(--settings-row-prefix-display);
       }
       :host([narrow]) .prefix-wrap {
         display: flex;

src/components/ha-sidebar.ts

@@ -1039,6 +1039,8 @@ class HaSidebar extends LitElement {
 
         .notification-badge,
         .configuration-badge {
+          left: calc(var(--app-drawer-width) - 42px);
+          position: absolute;
           min-width: 20px;
           box-sizing: border-box;
           border-radius: 50%;
@@ -1049,9 +1051,6 @@ 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/ha-target-picker.ts

@@ -616,6 +616,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         opacity: var(--light-disabled-opacity);
         pointer-events: none;
       }
+      :host-context([style*="direction: rtl;"]) .mdc-chip__icon {
+        margin-right: -14px !important;
+        margin-left: 4px !important;
+      }
     `;
   }
 }

src/components/ha-textfield.ts

@@ -91,6 +91,19 @@ export class HaTextField extends TextFieldBase {
       .mdc-text-field {
         overflow: var(--text-field-overflow);
       }
+
+      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+        right: 10px !important;
+        left: initial !important;
+      }
+
+      :host-context([style*="direction: rtl;"])
+        .mdc-text-field--with-leading-icon.mdc-text-field--filled
+        .mdc-floating-label {
+        max-width: calc(100% - 48px);
+        right: 48px !important;
+        left: initial !important;
+      }
     `,
   ];
 }

src/components/ha-tip.ts

@@ -0,0 +1,38 @@
+import { mdiLightbulbOutline } from "@mdi/js";
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+
+import "./ha-svg-icon";
+
+@customElement("ha-tip")
+class HaTip extends LitElement {
+  public render() {
+    return html`
+      <ha-svg-icon .path=${mdiLightbulbOutline}></ha-svg-icon>
+      <span class="prefix">Tip!</span>
+      <span class="text"><slot></slot></span>
+    `;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      text-align: center;
+    }
+
+    .text {
+      margin-left: 2px;
+      color: var(--secondary-text-color);
+    }
+
+    .prefix {
+      font-weight: 500;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tip": HaTip;
+  }
+}

src/components/ha-yaml-editor.ts

@@ -61,7 +61,9 @@ export class HaYamlEditor extends LitElement {
       return html``;
     }
     return html`
-      ${this.label ? html`<p>${this.label}${this.required ? "*" : ""}</p>` : ""}
+      ${this.label
+        ? html`<p>${this.label}${this.required ? " *" : ""}</p>`
+        : ""}
       <ha-code-editor
         .hass=${this.hass}
         .value=${this._yaml}

src/components/map/ha-locations-editor.ts

@@ -19,9 +19,9 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { LeafletModuleType } from "../../common/dom/setup-leaflet-map";
 import type { HomeAssistant } from "../../types";
+import "../ha-input-helper-text";
 import "./ha-map";
 import type { HaMap } from "./ha-map";
-import "../ha-input-helper-text";
 
 declare global {
   // for fire event
@@ -297,7 +297,7 @@ export class HaLocationsEditor extends LitElement {
     return css`
       ha-map {
         display: block;
-        height: 300px;
+        height: 100%;
       }
     `;
   }

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

@@ -302,6 +302,10 @@ class DialogMediaManage extends LitElement {
           --mdc-theme-primary: var(--mdc-theme-on-primary);
         }
 
+        mwc-list {
+          direction: ltr;
+        }
+
         .danger {
           --mdc-theme-primary: var(--error-color);
         }
@@ -310,6 +314,11 @@ 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,6 +151,8 @@ 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) {
@@ -163,6 +165,7 @@ 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,6 +59,11 @@ 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,3 +1,6 @@
+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";
@@ -16,12 +19,11 @@ 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";
@@ -45,7 +47,6 @@ 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";
@@ -101,7 +102,9 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @query(".content") private _content?: HTMLDivElement;
 
-  @queryAll(".lazythumbnail") private _thumbnails?: HaCard[];
+  @query("lit-virtualizer") private _virtualizer?: LitVirtualizer;
+
+  private _observed = false;
 
   private _headerOffsetHeight = 0;
 
@@ -148,326 +151,6 @@ 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);
 
@@ -583,6 +266,19 @@ 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);
 
@@ -590,16 +286,383 @@ export class HaMediaPlayerBrowse extends LitElement {
       this._animateHeaderHeight();
     } else if (changedProps.has("_currentItem")) {
       this._setHeaderHeight();
-      this._attachIntersectionObserver();
+
+      // 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);
+      }
     }
   }
 
-  private _actionClicked(ev: MouseEvent): void {
+  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 => {
     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 });
@@ -615,7 +678,7 @@ export class HaMediaPlayerBrowse extends LitElement {
     });
   }
 
-  private async _childClicked(ev: MouseEvent): Promise<void> {
+  private _childClicked = async (ev: MouseEvent): Promise<void> => {
     const target = ev.currentTarget as any;
     const item: MediaPlayerItem = target.item;
 
@@ -631,7 +694,7 @@ export class HaMediaPlayerBrowse extends LitElement {
     fireEvent(this, "media-browsed", {
       ids: [...this.navigateIds, item],
     });
-  }
+  };
 
   private async _fetchData(
     entityId: string,
@@ -658,55 +721,6 @@ 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");
   }
@@ -841,6 +855,7 @@ export class HaMediaPlayerBrowse extends LitElement {
         .content {
           overflow-y: auto;
           box-sizing: border-box;
+          height: 100%;
         }
 
         /* HEADER */
@@ -926,6 +941,7 @@ export class HaMediaPlayerBrowse extends LitElement {
         .not-shown {
           font-style: italic;
           color: var(--secondary-text-color);
+          padding: 8px 16px 8px;
         }
 
         .grid.not-shown {
@@ -951,7 +967,11 @@ export class HaMediaPlayerBrowse extends LitElement {
           border-bottom-color: var(--divider-color);
         }
 
-        .children {
+        mwc-list-item {
+          width: 100%;
+        }
+
+        div.children {
           display: grid;
           grid-template-columns: repeat(
             auto-fit,
@@ -988,7 +1008,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding-bottom: 100%;
         }
 
-        .portrait.children ha-card .thumbnail {
+        .portrait ha-card .thumbnail {
           padding-bottom: 150%;
         }
 
@@ -1062,10 +1082,6 @@ export class HaMediaPlayerBrowse extends LitElement {
           color: var(--primary-color);
         }
 
-        ha-card:hover .lazythumbnail {
-          opacity: 0.5;
-        }
-
         .child .title {
           font-size: 16px;
           padding-top: 16px;
@@ -1127,7 +1143,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding: 0 24px;
         }
 
-        :host([narrow]) .children {
+        :host([narrow]) div.children {
           grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
         }
 
@@ -1232,6 +1248,16 @@ 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,6 +119,11 @@ 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,6 +10,8 @@ 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;
@@ -76,6 +78,9 @@ 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,6 +114,11 @@ 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,6 +19,8 @@ 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;
@@ -114,8 +116,14 @@ export class HatGraphNode extends LitElement {
         --stroke-clr: var(--hover-clr);
         --icon-clr: var(--default-icon-clr);
       }
-      :host([disabled]) circle {
-        stroke: var(--disabled-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);
       }
       svg {
         width: 100%;

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

@@ -1,7 +1,11 @@
 import {
   mdiAbTesting,
+  mdiAlertOctagon,
+  mdiArrowDecision,
   mdiArrowUp,
   mdiAsterisk,
+  mdiCallMissed,
+  mdiCallReceived,
   mdiCallSplit,
   mdiCheckboxBlankOutline,
   mdiCheckboxMarkedOutline,
@@ -9,10 +13,12 @@ import {
   mdiChevronRight,
   mdiChevronUp,
   mdiClose,
+  mdiCloseOctagon,
   mdiCodeBrackets,
   mdiDevices,
   mdiExclamation,
   mdiRefresh,
+  mdiShuffleDisabled,
   mdiTimerOutline,
   mdiTrafficLight,
 } from "@mdi/js";
@@ -27,6 +33,9 @@ import {
   DelayAction,
   DeviceAction,
   EventAction,
+  IfAction,
+  ManualScriptConfig,
+  ParallelAction,
   RepeatAction,
   SceneAction,
   ServiceAction,
@@ -36,6 +45,8 @@ import {
 import {
   ChooseActionTraceStep,
   ConditionTraceStep,
+  IfActionTraceStep,
+  StopActionTraceStep,
   TraceExtended,
 } from "../../data/trace";
 import "../ha-icon-button";
@@ -85,6 +96,7 @@ 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>
     `;
@@ -101,6 +113,9 @@ 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,
@@ -110,23 +125,37 @@ 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) {
+  private render_action_node(
+    node: Action,
+    path: string,
+    graphStart = false,
+    disabled = 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);
+    return this.typeRenderers[type].bind(this)(
+      node,
+      path,
+      graphStart,
+      disabled
+    );
   }
 
   private render_choose_node(
     config: ChooseAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     const trace = this.trace.trace[path] as ChooseActionTraceStep[] | undefined;
     const trace_path = trace
@@ -143,12 +172,14 @@ 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=${mdiCallSplit}
+          .iconPath=${mdiArrowDecision}
           ?track=${trace !== undefined}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || config.enabled === false}
           slot="head"
           nofocus
         ></hat-graph-node>
@@ -171,12 +202,15 @@ 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}`
+                          `${branch_path}/sequence/${j}`,
+                          false,
+                          disabled || config.enabled === false
                         )
                       )
                     : ""}
@@ -188,7 +222,12 @@ 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}`)
+                this.render_action_node(
+                  action,
+                  `${path}/default/${i}`,
+                  false,
+                  disabled || config.enabled === false
+                )
               )
             : ""}
         </div>
@@ -196,10 +235,88 @@ 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
+    graphStart = false,
+    disabled = false
   ) {
     const trace = this.trace.trace[path] as ConditionTraceStep[] | undefined;
     let track = false;
@@ -225,6 +342,7 @@ 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
       >
@@ -233,6 +351,7 @@ export class HatScriptGraph extends LitElement {
           slot="head"
           ?track=${track}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || node.enabled === false}
           .iconPath=${mdiAbTesting}
           nofocus
         ></hat-graph-node>
@@ -247,6 +366,7 @@ export class HatScriptGraph extends LitElement {
           nofocus
           ?track=${trackFailed}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || node.enabled === false}
         ></hat-graph-node>
       </hat-graph-branch>
     `;
@@ -255,7 +375,8 @@ export class HatScriptGraph extends LitElement {
   private render_delay_node(
     node: DelayAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -264,6 +385,7 @@ 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>
     `;
@@ -272,7 +394,8 @@ export class HatScriptGraph extends LitElement {
   private render_device_node(
     node: DeviceAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -281,6 +404,7 @@ 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>
     `;
@@ -289,7 +413,8 @@ export class HatScriptGraph extends LitElement {
   private render_event_node(
     node: EventAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -298,6 +423,7 @@ 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>
     `;
@@ -306,7 +432,8 @@ export class HatScriptGraph extends LitElement {
   private render_repeat_node(
     node: RepeatAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     const trace: any = this.trace.trace[path];
     const repeats = this.trace?.trace[`${path}/repeat/sequence/0`]?.length;
@@ -316,12 +443,14 @@ 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>
@@ -329,12 +458,18 @@ 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}`)
+            this.render_action_node(
+              action,
+              `${path}/repeat/sequence/${i}`,
+              false,
+              disabled || node.enabled === false
+            )
           )}
         </div>
       </hat-graph-branch>
@@ -344,7 +479,8 @@ export class HatScriptGraph extends LitElement {
   private render_scene_node(
     node: SceneAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -353,6 +489,7 @@ 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>
     `;
@@ -361,7 +498,8 @@ export class HatScriptGraph extends LitElement {
   private render_service_node(
     node: ServiceAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -370,6 +508,7 @@ 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>
     `;
@@ -378,7 +517,8 @@ export class HatScriptGraph extends LitElement {
   private render_wait_node(
     node: WaitAction | WaitForTriggerAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -387,12 +527,87 @@ 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_other_node(node: Action, path: string, graphStart = false) {
+  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
+  ) {
     return html`
       <hat-graph-node
         .graphStart=${graphStart}
@@ -400,6 +615,7 @@ 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>
     `;
   }
@@ -538,6 +754,8 @@ 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,12 +25,17 @@ 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";
@@ -105,7 +110,7 @@ class LogbookRenderer {
   }
 
   get hasNext() {
-    return this.curIndex !== this.logbookEntries.length;
+    return this.curIndex < this.logbookEntries.length;
   }
 
   maybeRenderItem() {
@@ -201,7 +206,7 @@ class ActionRenderer {
   }
 
   get hasNext() {
-    return this.curIndex !== this.keys.length;
+    return this.curIndex < this.keys.length;
   }
 
   renderItem() {
@@ -214,15 +219,31 @@ class ActionRenderer {
 
   private _renderItem(
     index: number,
-    actionType?: ReturnType<typeof getActionType>
+    actionType?: ReturnType<typeof getActionType>,
+    renderAllIterations?: boolean
   ): number {
     const value = this._getItem(index);
 
-    if (isTriggerPath(value[0].path)) {
-      return this._handleTrigger(index, value[0] as TriggerTraceStep);
+    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);
     }
 
-    const timestamp = new Date(value[0].timestamp);
+    const timestamp = new Date(value.timestamp);
 
     // Render all logbook items that are in front of this item.
     while (
@@ -235,7 +256,7 @@ class ActionRenderer {
     this.logbookRenderer.flush();
     this.timeTracker.maybeRenderTime(timestamp);
 
-    const path = value[0].path;
+    const path = value.path;
     let data;
     try {
       data = getDataFromPath(this.trace.config, path);
@@ -263,7 +284,24 @@ class ActionRenderer {
       return this._handleChoose(index);
     }
 
-    this._renderEntry(path, describeAction(this.hass, data, actionType));
+    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
+    );
 
     let i = index + 1;
 
@@ -316,10 +354,16 @@ 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`);
+      this._renderEntry(
+        choosePath,
+        `${name}: Default action executed`,
+        undefined,
+        disabled
+      );
     } else if (chooseTrace.result) {
       const choiceNumeric =
         chooseTrace.result.choice !== "default"
@@ -331,9 +375,19 @@ class ActionRenderer {
       const choiceName = choiceConfig
         ? `${choiceConfig.alias || `Option ${choiceNumeric}`} executed`
         : `Error: ${chooseTrace.error}`;
-      this._renderEntry(choosePath, `${name}: ${choiceName}`);
+      this._renderEntry(
+        choosePath,
+        `${name}: ${choiceName}`,
+        undefined,
+        disabled
+      );
     } else {
-      this._renderEntry(choosePath, `${name}: No action taken`);
+      this._renderEntry(
+        choosePath,
+        `${name}: No action taken`,
+        undefined,
+        disabled
+      );
     }
 
     let i;
@@ -374,14 +428,130 @@ 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
+    icon = mdiRecordCircleOutline,
+    disabled = false
   ) {
     this.entries.push(html`
-      <ha-timeline .icon=${icon} data-path=${path}>
-        ${description}
+      <ha-timeline .icon=${icon} data-path=${path} .notEnabled=${disabled}>
+        ${description}${disabled
+          ? html`<span class="disabled"> (disabled)</span>`
+          : ""}
       </ha-timeline>
     `);
   }

src/data/automation.ts

@@ -8,6 +8,8 @@ import { BlueprintInput } from "./blueprint";
 import { DeviceCondition, DeviceTrigger } from "./device_automation";
 import { Action, MODES } from "./script";
 
+export const AUTOMATION_DEFAULT_MODE: ManualAutomationConfig["mode"] = "single";
+
 export interface AutomationEntity extends HassEntityBase {
   attributes: HassEntityAttributeBase & {
     id?: string;
@@ -63,11 +65,12 @@ export interface BaseTrigger {
   platform: string;
   id?: string;
   variables?: Record<string, unknown>;
+  enabled?: boolean;
 }
 
 export interface StateTrigger extends BaseTrigger {
   platform: "state";
-  entity_id: string;
+  entity_id: string | string[];
   attribute?: string;
   from?: string | number;
   to?: string | string[] | number;
@@ -150,6 +153,12 @@ 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
@@ -164,11 +173,13 @@ export type Trigger =
   | TimeTrigger
   | TemplateTrigger
   | EventTrigger
-  | DeviceTrigger;
+  | DeviceTrigger
+  | CalendarTrigger;
 
 interface BaseCondition {
   condition: string;
   alias?: string;
+  enabled?: boolean;
 }
 
 export interface LogicalCondition extends BaseCondition {
@@ -224,6 +235,24 @@ 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
@@ -235,6 +264,35 @@ 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,6 +11,8 @@ export interface DeviceAutomation {
   type?: string;
   subtype?: string;
   event?: string;
+  enabled?: boolean;
+  metadata?: { secondary: boolean };
 }
 
 export interface DeviceAction extends DeviceAutomation {
@@ -179,3 +181,16 @@ 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,4 +1,9 @@
 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

@@ -0,0 +1,22 @@
+// 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/addon.ts

@@ -21,7 +21,8 @@ export type AddonState = "started" | "stopped" | null;
 export type AddonRepository = "core" | "local" | string;
 
 interface AddonTranslations {
-  [key: string]: Record<string, Record<string, Record<string, string>>>;
+  network?: Record<string, string>;
+  configuration?: Record<string, { name?: string; description?: string }>;
 }
 
 export interface HassioAddonInfo {
@@ -91,7 +92,7 @@ export interface HassioAddonDetails extends HassioAddonInfo {
   slug: string;
   startup: AddonStartup;
   stdin: boolean;
-  translations: AddonTranslations;
+  translations: Record<string, AddonTranslations>;
   watchdog: null | boolean;
   webui: null | string;
 }

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

src/data/script.ts

@@ -13,11 +13,18 @@ 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, Trigger } from "./automation";
+import {
+  Condition,
+  ShorthandAndCondition,
+  ShorthandNotCondition,
+  ShorthandOrCondition,
+  Trigger,
+} from "./automation";
 import { BlueprintInput } from "./blueprint";
 
 export const MODES = ["single", "restart", "queued", "parallel"] as const;
@@ -25,6 +32,7 @@ export const MODES_MAX = ["queued", "parallel"];
 
 export const baseActionStruct = object({
   alias: optional(string()),
+  enabled: optional(boolean()),
 });
 
 const targetStruct = object({
@@ -88,15 +96,18 @@ export interface BlueprintScriptConfig extends ManualScriptConfig {
   use_blueprint: { path: string; input?: BlueprintInput };
 }
 
-export interface EventAction {
+interface BaseAction {
   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 {
-  alias?: string;
+export interface ServiceAction extends BaseAction {
   service?: string;
   service_template?: string;
   entity_id?: string;
@@ -104,55 +115,48 @@ export interface ServiceAction {
   data?: Record<string, unknown>;
 }
 
-export interface DeviceAction {
-  alias?: string;
+export interface DeviceAction extends BaseAction {
   type: string;
   device_id: string;
   domain: string;
   entity_id: string;
 }
 
-export interface DelayActionParts {
+export interface DelayActionParts extends BaseAction {
   milliseconds?: number;
   seconds?: number;
   minutes?: number;
   hours?: number;
   days?: number;
 }
-export interface DelayAction {
-  alias?: string;
+export interface DelayAction extends BaseAction {
   delay: number | Partial<DelayActionParts> | string;
 }
 
-export interface ServiceSceneAction {
-  alias?: string;
+export interface ServiceSceneAction extends BaseAction {
   service: "scene.turn_on";
   target?: { entity_id?: string };
   entity_id?: string;
   metadata: Record<string, unknown>;
 }
-export interface LegacySceneAction {
-  alias?: string;
+export interface LegacySceneAction extends BaseAction {
   scene: string;
 }
 export type SceneAction = ServiceSceneAction | LegacySceneAction;
 
-export interface WaitAction {
-  alias?: string;
+export interface WaitAction extends BaseAction {
   wait_template: string;
   timeout?: number;
   continue_on_timeout?: boolean;
 }
 
-export interface WaitForTriggerAction {
-  alias?: string;
+export interface WaitForTriggerAction extends BaseAction {
   wait_for_trigger: Trigger | Trigger[];
   timeout?: number;
   continue_on_timeout?: boolean;
 }
 
-export interface PlayMediaAction {
-  alias?: string;
+export interface PlayMediaAction extends BaseAction {
   service: "media_player.play_media";
   target?: { entity_id?: string };
   entity_id?: string;
@@ -160,13 +164,11 @@ export interface PlayMediaAction {
   metadata: Record<string, unknown>;
 }
 
-export interface RepeatAction {
-  alias?: string;
-  repeat: CountRepeat | WhileRepeat | UntilRepeat;
+export interface RepeatAction extends BaseAction {
+  repeat: CountRepeat | WhileRepeat | UntilRepeat | ForEachRepeat;
 }
 
-interface BaseRepeat {
-  alias?: string;
+interface BaseRepeat extends BaseAction {
   sequence: Action | Action[];
 }
 
@@ -182,25 +184,40 @@ export interface UntilRepeat extends BaseRepeat {
   until: Condition[];
 }
 
-export interface ChooseActionChoice {
-  alias?: string;
+export interface ForEachRepeat extends BaseRepeat {
+  for_each: string | any[];
+}
+
+export interface ChooseActionChoice extends BaseAction {
   conditions: string | Condition[];
   sequence: Action | Action[];
 }
 
-export interface ChooseAction {
-  alias?: string;
+export interface ChooseAction extends BaseAction {
   choose: ChooseActionChoice | ChooseActionChoice[] | null;
   default?: Action | Action[];
 }
 
-export interface VariablesAction {
-  alias?: string;
+export interface IfAction extends BaseAction {
+  if: string | Condition[];
+  then: Action | Action[];
+  else?: Action | Action[];
+}
+
+export interface VariablesAction extends BaseAction {
   variables: Record<string, unknown>;
 }
 
-interface UnknownAction {
-  alias?: string;
+export interface StopAction extends BaseAction {
+  stop: string;
+  error?: boolean;
+}
+
+export interface ParallelAction extends BaseAction {
+  parallel: ManualScriptConfig | Action | (ManualScriptConfig | Action)[];
+}
+
+interface UnknownAction extends BaseAction {
   [key: string]: unknown;
 }
 
@@ -209,14 +226,20 @@ export type Action =
   | DeviceAction
   | ServiceAction
   | Condition
+  | ShorthandAndCondition
+  | ShorthandOrCondition
+  | ShorthandNotCondition
   | DelayAction
   | SceneAction
   | WaitAction
   | WaitForTriggerAction
   | RepeatAction
   | ChooseAction
+  | IfAction
   | VariablesAction
   | PlayMediaAction
+  | StopAction
+  | ParallelAction
   | UnknownAction;
 
 export interface ActionTypes {
@@ -228,10 +251,13 @@ export interface ActionTypes {
   activate_scene: SceneAction;
   repeat: RepeatAction;
   choose: ChooseAction;
+  if: IfAction;
   wait_for_trigger: WaitForTriggerAction;
   variables: VariablesAction;
   service: ServiceAction;
   play_media: PlayMediaAction;
+  stop: StopAction;
+  parallel: ParallelAction;
   unknown: UnknownAction;
 }
 
@@ -281,7 +307,7 @@ export const getActionType = (action: Action): ActionType => {
   if ("wait_template" in action) {
     return "wait_template";
   }
-  if ("condition" in action) {
+  if (["condition", "and", "or", "not"].some((key) => key in action)) {
     return "check_condition";
   }
   if ("event" in action) {
@@ -299,12 +325,21 @@ export const getActionType = (action: Action): ActionType => {
   if ("choose" in action) {
     return "choose";
   }
+  if ("if" in action) {
+    return "if";
+  }
   if ("wait_for_trigger" in action) {
     return "wait_for_trigger";
   }
   if ("variables" in action) {
     return "variables";
   }
+  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,12 +8,17 @@ import { describeCondition, describeTrigger } from "./automation_i18n";
 import {
   ActionType,
   ActionTypes,
+  ChooseAction,
   DelayAction,
   DeviceAction,
   EventAction,
   getActionType,
+  IfAction,
+  ParallelAction,
   PlayMediaAction,
+  RepeatAction,
   SceneAction,
+  StopAction,
   VariablesAction,
   WaitForTriggerAction,
 } from "./script";
@@ -161,6 +166,81 @@ 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];
@@ -169,5 +249,12 @@ 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/selector.ts

@@ -19,6 +19,7 @@ export type Selector =
   | SelectSelector
   | StringSelector
   | TargetSelector
+  | TemplateSelector
   | ThemeSelector
   | TimeSelector;
 
@@ -213,6 +214,11 @@ export interface TargetSelector {
   };
 }
 
+export interface TemplateSelector {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  template: {};
+}
+
 export interface ThemeSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
   theme: {};

src/data/trace.ts

@@ -44,6 +44,14 @@ 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 };
 }
@@ -177,7 +185,11 @@ export const getDataFromPath = (
     const asNumber = Number(raw);
 
     if (isNaN(asNumber)) {
-      result = result[raw];
+      const tempResult = result[raw];
+      if (!tempResult && raw === "sequence") {
+        continue;
+      }
+      result = tempResult;
       continue;
     }
 

src/data/update.ts

@@ -1,10 +1,17 @@
 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;
@@ -31,8 +38,12 @@ export const updateUsesProgress = (entity: UpdateEntity): boolean =>
   supportsFeature(entity, UPDATE_SUPPORT_PROGRESS) &&
   typeof entity.attributes.in_progress === "number";
 
-export const updateCanInstall = (entity: UpdateEntity): boolean =>
-  entity.state === BINARY_STATE_ON &&
+export const updateCanInstall = (
+  entity: UpdateEntity,
+  showSkipped = false
+): boolean =>
+  (entity.state === BINARY_STATE_ON ||
+    (showSkipped && Boolean(entity.attributes.skipped_version))) &&
   supportsFeature(entity, UPDATE_SUPPORT_INSTALL);
 
 export const updateIsInstalling = (entity: UpdateEntity): boolean =>
@@ -43,3 +54,92 @@ 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"),
+    });
+  }
+};