Add Redirect for Server Controls

.github/ISSUE_TEMPLATE.md

@@ -51,7 +51,7 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 <!--
   Provide details about the versions you are using, which helps us reproducing
   and finding the issue quicker. Version information is found in the
-  Home Assistant frontend: Settings -> About.
+  Home Assistant frontend: Configuration -> Info.
 
   Browser version and operating system is important! Please try to replicate
   your issue in a different browser and be sure to include your findings.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,4 +1,4 @@
-name: Report a bug with the UI / Dashboards
+name: Report a bug with the UI, Frontend or Lovelace
 description: Report an issue related to the Home Assistant frontend.
 labels: bug
 body:
@@ -9,7 +9,7 @@ body:
 
         If you have a feature or enhancement request for the frontend, please [start an discussion][fr] instead of creating an issue.
 
-        **Please not not report issues for custom cards.**
+        **Please not not report issues for custom Lovelace cards.**
 
         [fr]: https://github.com/home-assistant/frontend/discussions
         [releases]: https://github.com/home-assistant/home-assistant/releases
@@ -64,7 +64,7 @@ body:
       label: What version of Home Assistant Core has the issue?
       placeholder: core-
       description: >
-        Can be found in: [Settings -> About](https://my.home-assistant.io/redirect/info/).
+        Can be found in the Configuration panel -> Info.
   - type: input
     attributes:
       label: What was the last working version of Home Assistant Core?

.github/ISSUE_TEMPLATE/config.yml

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

build-scripts/env.js

@@ -26,8 +26,8 @@ module.exports = {
   },
   version() {
     const version = fs
-      .readFileSync(path.resolve(paths.polymer_dir, "pyproject.toml"), "utf8")
-      .match(/version\W+=\W"(\d{8}\.\d)"/);
+      .readFileSync(path.resolve(paths.polymer_dir, "setup.cfg"), "utf8")
+      .match(/version\W+=\W(\d{8}\.\d)/);
     if (!version) {
       throw Error("Version not found");
     }

demo/src/configs/jimpower/lovelace.ts

@@ -194,7 +194,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
                     type: "state-icon",
                     tap_action: {
                       action: "call-service",
-                      data: {
+                      service_data: {
                         entity_id: "group.downstairs_lights",
                       },
                       service: "homeassistant.toggle",

demo/src/configs/teachingbirds/lovelace.ts

@@ -377,7 +377,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC bed",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.air_cleaner_quiet",
                 },
                 service: "script.turn_on",
@@ -390,7 +390,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC bed",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.air_cleaner_auto",
                 },
                 service: "script.turn_on",
@@ -403,7 +403,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC bed",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.air_cleaner_turbo",
                 },
                 service: "script.turn_on",
@@ -416,7 +416,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.ac_off",
                 },
                 service: "script.turn_on",
@@ -429,7 +429,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
               name: "AC",
               tap_action: {
                 action: "call-service",
-                data: {
+                service_data: {
                   entity_id: "script.ac_on",
                 },
                 service: "script.turn_on",
@@ -629,7 +629,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "scene.morning_lights",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "scene.morning_lights",
                     },
                     service: "scene.turn_on",
@@ -641,7 +641,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "scene.movie_time",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "scene.movie_time",
                     },
                     service: "scene.turn_on",
@@ -702,7 +702,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "light.downstairs_lights",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "light.downstairs_lights",
                     },
                     service: "light.toggle",
@@ -714,7 +714,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
                   entity: "light.upstairs_lights",
                   tap_action: {
                     action: "call-service",
-                    data: {
+                    service_data: {
                       entity_id: "light.upstairs_lights",
                     },
                     service: "light.toggle",

demo/src/stubs/energy.ts

@@ -1,4 +1,4 @@
-import { format, startOfToday, startOfTomorrow } from "date-fns/esm";
+import { format, startOfToday, startOfTomorrow } from "date-fns";
 import { EnergySolarForecasts } from "../../../src/data/energy";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 

demo/src/stubs/history.ts

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

gallery/src/data/traces/basic_trace.ts

@@ -119,7 +119,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              data: {},
+              service_data: {},
               target: {
                 entity_id: ["input_boolean.toggle_4"],
               },
@@ -164,7 +164,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              data: {},
+              service_data: {},
               target: {
                 entity_id: ["input_boolean.toggle_2"],
               },
@@ -182,7 +182,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              data: {},
+              service_data: {},
               target: {
                 entity_id: ["input_boolean.toggle_3"],
               },
@@ -200,7 +200,7 @@ export const basicTrace: DemoTrace = {
             params: {
               domain: "input_boolean",
               service: "toggle",
-              data: {},
+              service_data: {},
               target: {
                 entity_id: ["input_boolean.toggle_4"],
               },
@@ -298,11 +298,11 @@ export const basicTrace: DemoTrace = {
       source: "state of input_boolean.toggle_1",
       entity_id: "automation.toggle_toggles",
       context_id: "6cfcae368e7b3686fad6c59e83ae76c9",
-      when: 1616647011.240832,
+      when: "2021-03-25T04:36:51.240832+00:00",
       domain: "automation",
     },
     {
-      when: 1616647011.249828,
+      when: "2021-03-25T04:36:51.249828+00:00",
       name: "Toggle 4",
       state: "on",
       entity_id: "input_boolean.toggle_4",
@@ -313,7 +313,7 @@ export const basicTrace: DemoTrace = {
       context_name: "Ensure Party mode",
     },
     {
-      when: 1616647011.258947,
+      when: "2021-03-25T04:36:51.258947+00:00",
       name: "Toggle 2",
       state: "on",
       entity_id: "input_boolean.toggle_2",
@@ -324,7 +324,7 @@ export const basicTrace: DemoTrace = {
       context_name: "Ensure Party mode",
     },
     {
-      when: 1616647011.261806,
+      when: "2021-03-25T04:36:51.261806+00:00",
       name: "Toggle 3",
       state: "off",
       entity_id: "input_boolean.toggle_3",
@@ -335,7 +335,7 @@ export const basicTrace: DemoTrace = {
       context_name: "Ensure Party mode",
     },
     {
-      when: 1616647011.265246,
+      when: "2021-03-25T04:36:51.265246+00:00",
       name: "Toggle 4",
       state: "off",
       entity_id: "input_boolean.toggle_4",

gallery/src/data/traces/motion-light-trace.ts

@@ -185,11 +185,11 @@ export const motionLightTrace: DemoTrace = {
         "has been triggered by state of binary_sensor.pauluss_macbook_pro_camera_in_use",
       source: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
       entity_id: "automation.auto_elgato",
-      when: 1615702021.768492,
+      when: "2021-03-14T06:07:01.768492+00:00",
       domain: "automation",
     },
     {
-      when: 1615702021.872187,
+      when: "2021-03-14T06:07:01.872187+00:00",
       name: "Elgato Key Light Air",
       state: "on",
       entity_id: "light.elgato_key_light_air",
@@ -200,7 +200,7 @@ export const motionLightTrace: DemoTrace = {
       context_name: "Auto Elgato",
     },
     {
-      when: 1615702073.284505,
+      when: "2021-03-14T06:07:53.284505+00:00",
       name: "Elgato Key Light Air",
       state: "off",
       entity_id: "light.elgato_key_light_air",

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

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

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

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

gallery/src/pages/lovelace/entities-card.ts

@@ -249,7 +249,7 @@ const CONFIGS = [
       name: Bed light
       action_name: Toggle light
       service: light.toggle
-      data:
+      service_data:
         entity_id: light.bed_light
     - type: section
       label: Links

gallery/src/pages/lovelace/glance-card.ts

@@ -199,7 +199,7 @@ const CONFIGS = [
       tap_action:
         action: call-service
         service: light.turn_on
-        data:
+        service_data:
           entity_id: light.ceiling_lights
     - entity: sun.sun
       name: Regular

gallery/src/pages/lovelace/picture-elements-card.ts

@@ -40,7 +40,7 @@ const CONFIGS = [
         left: 90%
         padding: 0px
       service: light.turn_off
-      data:
+      service_data:
         entity_id: group.all_lights
     - type: icon
       icon: mdi:cctv
@@ -88,7 +88,7 @@ const CONFIGS = [
         left: 90%
         padding: 0px
       service: light.turn_off
-      data:
+      service_data:
         entity_id: group.all_lights
     - type: icon
       icon: mdi:cctv

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

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

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

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

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

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

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

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

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

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

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

@@ -17,12 +17,7 @@ import {
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import {
-  fetchHassioSupervisorInfo,
-  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";
@@ -171,44 +166,6 @@ class HassioAddonDashboard extends LitElement {
   protected async firstUpdated(): Promise<void> {
     if (this.route.path === "") {
       const requestedAddon = extractSearchParam("addon");
-      const requestedAddonRepository = extractSearchParam("repository_url");
-      if (requestedAddonRepository) {
-        const supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
-        if (
-          !supervisorInfo.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: [
-                ...supervisorInfo.addons_repositories,
-                requestedAddonRepository,
-              ],
-            });
-          } catch (err: any) {
-            this._error = extractApiErrorMessage(err);
-          }
-        }
-      }
-
       if (requestedAddon) {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
         const validAddon = addonsInfo.addons.some(

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

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

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

@@ -34,7 +34,7 @@ class HassioAddonLogs extends LitElement {
   protected render(): TemplateResult {
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card outlined>
+      <ha-card>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}

hassio/src/dashboard/hassio-addons.ts

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

hassio/src/dashboard/hassio-update.ts

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

hassio/src/hassio-main.ts

@@ -74,11 +74,7 @@ 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;
-      }
+    document.body.addEventListener("keydown", (ev) => {
       // @ts-ignore
       fireEvent(mainWindow, "hass-quick-bar-trigger", ev, {
         bubbles: false,

hassio/src/hassio-my-redirect.ts

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

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

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

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

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

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

@@ -57,7 +57,7 @@ class HassioSupervisorInfo extends LitElement {
       },
     ];
     return html`
-      <ha-card header="Supervisor" outlined>
+      <ha-card header="Supervisor">
         <div class="card-content">
           <div>
             <ha-settings-row>

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

@@ -65,7 +65,7 @@ class HassioSupervisorLog extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      <ha-card outlined>
+      <ha-card>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}

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

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

package.json

@@ -72,8 +72,8 @@
     "@material/mwc-textfield": "0.25.3",
     "@material/mwc-top-app-bar-fixed": "^0.25.3",
     "@material/top-app-bar": "14.0.0-canary.261f2db59.0",
-    "@mdi/js": "6.7.96",
-    "@mdi/svg": "6.7.96",
+    "@mdi/js": "6.6.95",
+    "@mdi/svg": "6.6.95",
     "@polymer/app-layout": "^3.1.0",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
@@ -106,6 +106,7 @@
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.0.0",
+    "fuzzysort": "^1.2.1",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^1.1.5",
     "home-assistant-js-websocket": "^7.0.3",

pyproject.toml

@@ -1,30 +1,3 @@
 [build-system]
-requires = ["setuptools~=62.3", "wheel~=0.37.1"]
+requires = ["setuptools~=60.5", "wheel~=0.37.1"]
 build-backend = "setuptools.build_meta"
-
-[project]
-name         = "home-assistant-frontend"
-version      = "20220525.0"
-license      = {text = "Apache-2.0"}
-description  = "The Home Assistant frontend"
-readme       = "README.md"
-authors      = [
-    {name = "The Home Assistant Authors", email = "hello@home-assistant.io"}
-]
-requires-python = ">=3.4.0"
-
-[project.urls]
-"Homepage" = "https://github.com/home-assistant/frontend"
-
-[tool.setuptools]
-platforms = ["any"]
-zip-safe  = false
-include-package-data = true
-
-[tool.setuptools.packages.find]
-include = ["hass_frontend*"]
-
-[tool.mypy]
-python_version = 3.4
-show_error_codes = true
-strict = true

script/version_bump.js

@@ -50,14 +50,14 @@ async function main(args) {
     return;
   }
 
-  const setup = fs.readFileSync("pyproject.toml", "utf8");
-  const version = setup.match(/version\W+=\W"(\d{8}\.\d)"/)[1];
+  const setup = fs.readFileSync("setup.cfg", "utf8");
+  const version = setup.match(/\d{8}\.\d+/)[0];
   const newVersion = method(version);
 
   console.log("Current version:", version);
   console.log("New version:", newVersion);
 
-  fs.writeFileSync("pyproject.toml", setup.replace(version, newVersion), "utf-8");
+  fs.writeFileSync("setup.cfg", setup.replace(version, newVersion), "utf-8");
 
   if (!commit) {
     return;

setup.cfg

@@ -0,0 +1,26 @@
+[metadata]
+name         = home-assistant-frontend
+version      = 20220427.0
+author       = The Home Assistant Authors
+author_email = hello@home-assistant.io
+license      = Apache-2.0
+platforms    = any
+description  = The Home Assistant frontend
+long_description = file: README.md
+long_description_content_type = text/markdown
+url          = https://github.com/home-assistant/frontend
+
+[options]
+packages = find:
+zip_safe = False
+include_package_data = True
+python_requires = >= 3.4.0
+
+[options.packages.find]
+include =
+    hass_frontend*
+
+[mypy]
+python_version = 3.4
+show_error_codes = True
+strict = True

src/common/dom/ancestors-with-property.ts

@@ -1,41 +0,0 @@
-const DEFAULT_OWN = true;
-
-// Finds the closest ancestor of an element that has a specific optionally owned property,
-// traversing slot and shadow root boundaries until the body element is reached
-export const closestWithProperty = (
-  element: Element | null,
-  property: string | symbol,
-  own = DEFAULT_OWN
-) => {
-  if (!element || element === document.body) return null;
-
-  element = element.assignedSlot ?? element;
-  if (element.parentElement) {
-    element = element.parentElement;
-  } else {
-    const root = element.getRootNode();
-    element = root instanceof ShadowRoot ? root.host : null;
-  }
-
-  if (
-    own
-      ? Object.prototype.hasOwnProperty.call(element, property)
-      : element && property in element
-  )
-    return element;
-  return closestWithProperty(element, property, own);
-};
-
-// Finds the set of all such ancestors and includes starting element as first in the set
-export const ancestorsWithProperty = (
-  element: Element | null,
-  property: string | symbol,
-  own = DEFAULT_OWN
-) => {
-  const ancestors: Set<Element> = new Set();
-  while (element) {
-    ancestors.add(element);
-    element = closestWithProperty(element, property, own);
-  }
-  return ancestors;
-};

src/common/entity/compute_active_state.ts

@@ -1,11 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { UNAVAILABLE_STATES } from "../../data/entity";
 
 export const computeActiveState = (stateObj: HassEntity): string => {
-  if (UNAVAILABLE_STATES.includes(stateObj.state)) {
-    return stateObj.state;
-  }
-
   const domain = stateObj.entity_id.split(".")[0];
   let state = stateObj.state;
 

src/common/entity/compute_state_display.ts

@@ -2,74 +2,67 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { FrontendLocaleData } from "../../data/translation";
 import {
+  updateIsInstalling,
+  UpdateEntity,
   UPDATE_SUPPORT_PROGRESS,
-  updateIsInstallingFromAttributes,
 } from "../../data/update";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
-import { formatNumber, isNumericFromAttributes } from "../number/format_number";
+import { formatNumber, isNumericState } from "../number/format_number";
 import { LocalizeFunc } from "../translations/localize";
-import { supportsFeatureFromAttributes } from "./supports-feature";
+import { computeStateDomain } from "./compute_state_domain";
+import { supportsFeature } from "./supports-feature";
 import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
-import { computeDomain } from "./compute_domain";
 
 export const computeStateDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
   locale: FrontendLocaleData,
   state?: string
-): string =>
-  computeStateDisplayFromEntityAttributes(
-    localize,
-    locale,
-    stateObj.entity_id,
-    stateObj.attributes,
-    state !== undefined ? state : stateObj.state
-  );
-
-export const computeStateDisplayFromEntityAttributes = (
-  localize: LocalizeFunc,
-  locale: FrontendLocaleData,
-  entityId: string,
-  attributes: any,
-  state: string
 ): string => {
-  if (state === UNKNOWN || state === UNAVAILABLE) {
-    return localize(`state.default.${state}`);
+  const compareState = state !== undefined ? state : stateObj.state;
+
+  if (compareState === UNKNOWN || compareState === UNAVAILABLE) {
+    return localize(`state.default.${compareState}`);
   }
 
   // Entities with a `unit_of_measurement` or `state_class` are numeric values and should use `formatNumber`
-  if (isNumericFromAttributes(attributes)) {
+  if (isNumericState(stateObj)) {
     // state is duration
     if (
-      attributes.device_class === "duration" &&
-      attributes.unit_of_measurement &&
-      UNIT_TO_SECOND_CONVERT[attributes.unit_of_measurement]
+      stateObj.attributes.device_class === "duration" &&
+      stateObj.attributes.unit_of_measurement &&
+      UNIT_TO_SECOND_CONVERT[stateObj.attributes.unit_of_measurement]
     ) {
       try {
-        return formatDuration(state, attributes.unit_of_measurement);
+        return formatDuration(
+          compareState,
+          stateObj.attributes.unit_of_measurement
+        );
       } catch (_err) {
         // fallback to default
       }
     }
-    if (attributes.device_class === "monetary") {
+    if (stateObj.attributes.device_class === "monetary") {
       try {
-        return formatNumber(state, locale, {
+        return formatNumber(compareState, locale, {
           style: "currency",
-          currency: attributes.unit_of_measurement,
+          currency: stateObj.attributes.unit_of_measurement,
           minimumFractionDigits: 2,
         });
       } catch (_err) {
         // fallback to default
       }
     }
-    return `${formatNumber(state, locale)}${
-      attributes.unit_of_measurement ? " " + attributes.unit_of_measurement : ""
+    return `${formatNumber(compareState, locale)}${
+      stateObj.attributes.unit_of_measurement
+        ? " " + stateObj.attributes.unit_of_measurement
+        : ""
     }`;
   }
 
-  const domain = computeDomain(entityId);
+  const domain = computeStateDomain(stateObj);
 
   if (domain === "input_datetime") {
     if (state !== undefined) {
@@ -104,32 +97,36 @@ export const computeStateDisplayFromEntityAttributes = (
     } else {
       // If not trying to display an explicit state, create `Date` object from `stateObj`'s attributes then format.
       let date: Date;
-      if (attributes.has_date && attributes.has_time) {
+      if (stateObj.attributes.has_date && stateObj.attributes.has_time) {
         date = new Date(
-          attributes.year,
-          attributes.month - 1,
-          attributes.day,
-          attributes.hour,
-          attributes.minute
+          stateObj.attributes.year,
+          stateObj.attributes.month - 1,
+          stateObj.attributes.day,
+          stateObj.attributes.hour,
+          stateObj.attributes.minute
         );
         return formatDateTime(date, locale);
       }
-      if (attributes.has_date) {
-        date = new Date(attributes.year, attributes.month - 1, attributes.day);
+      if (stateObj.attributes.has_date) {
+        date = new Date(
+          stateObj.attributes.year,
+          stateObj.attributes.month - 1,
+          stateObj.attributes.day
+        );
         return formatDate(date, locale);
       }
-      if (attributes.has_time) {
+      if (stateObj.attributes.has_time) {
         date = new Date();
-        date.setHours(attributes.hour, attributes.minute);
+        date.setHours(stateObj.attributes.hour, stateObj.attributes.minute);
         return formatTime(date, locale);
       }
-      return state;
+      return stateObj.state;
     }
   }
 
   if (domain === "humidifier") {
-    if (state === "on" && attributes.humidity) {
-      return `${attributes.humidity} %`;
+    if (compareState === "on" && stateObj.attributes.humidity) {
+      return `${stateObj.attributes.humidity} %`;
     }
   }
 
@@ -139,7 +136,7 @@ export const computeStateDisplayFromEntityAttributes = (
     domain === "number" ||
     domain === "input_number"
   ) {
-    return formatNumber(state, locale);
+    return formatNumber(compareState, locale);
   }
 
   // state of button is a timestamp
@@ -147,12 +144,12 @@ export const computeStateDisplayFromEntityAttributes = (
     domain === "button" ||
     domain === "input_button" ||
     domain === "scene" ||
-    (domain === "sensor" && attributes.device_class === "timestamp")
+    (domain === "sensor" && stateObj.attributes.device_class === "timestamp")
   ) {
     try {
-      return formatDateTime(new Date(state), locale);
+      return formatDateTime(new Date(compareState), locale);
     } catch (_err) {
-      return state;
+      return compareState;
     }
   }
 
@@ -163,28 +160,30 @@ export const computeStateDisplayFromEntityAttributes = (
     // When the latest version is skipped, show the latest version
     // When update is not available, show "Up-to-date"
     // When update is not available and there is no latest_version show "Unavailable"
-    return state === "on"
-      ? updateIsInstallingFromAttributes(attributes)
-        ? supportsFeatureFromAttributes(attributes, UPDATE_SUPPORT_PROGRESS)
+    return compareState === "on"
+      ? updateIsInstalling(stateObj as UpdateEntity)
+        ? supportsFeature(stateObj, UPDATE_SUPPORT_PROGRESS)
           ? localize("ui.card.update.installing_with_progress", {
-              progress: attributes.in_progress,
+              progress: stateObj.attributes.in_progress,
             })
           : localize("ui.card.update.installing")
-        : attributes.latest_version
-      : attributes.skipped_version === attributes.latest_version
-      ? attributes.latest_version ?? localize("state.default.unavailable")
+        : stateObj.attributes.latest_version
+      : stateObj.attributes.skipped_version ===
+        stateObj.attributes.latest_version
+      ? stateObj.attributes.latest_version ??
+        localize("state.default.unavailable")
       : localize("ui.card.update.up_to_date");
   }
 
   return (
     // Return device class translation
-    (attributes.device_class &&
+    (stateObj.attributes.device_class &&
       localize(
-        `component.${domain}.state.${attributes.device_class}.${state}`
+        `component.${domain}.state.${stateObj.attributes.device_class}.${compareState}`
       )) ||
     // Return default translation
-    localize(`component.${domain}.state._.${state}`) ||
+    localize(`component.${domain}.state._.${compareState}`) ||
     // We don't know! Return the raw state.
-    state
+    compareState
   );
 };

src/common/entity/compute_state_name.ts

@@ -1,13 +1,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { computeObjectId } from "./compute_object_id";
 
-export const computeStateNameFromEntityAttributes = (
-  entityId: string,
-  attributes: { [key: string]: any }
-): string =>
-  attributes.friendly_name === undefined
-    ? computeObjectId(entityId).replace(/_/g, " ")
-    : attributes.friendly_name || "";
-
 export const computeStateName = (stateObj: HassEntity): string =>
-  computeStateNameFromEntityAttributes(stateObj.entity_id, stateObj.attributes);
+  stateObj.attributes.friendly_name === undefined
+    ? computeObjectId(stateObj.entity_id).replace(/_/g, " ")
+    : stateObj.attributes.friendly_name || "";

src/common/entity/domain_icon.ts

@@ -29,8 +29,7 @@ import {
   mdiWeatherNight,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { UpdateEntity, updateIsInstalling } from "../../data/update";
-import { weatherIcon } from "../../data/weather";
+import { updateIsInstalling, UpdateEntity } from "../../data/update";
 /**
  * Return the icon to be used for a domain.
  *
@@ -47,20 +46,6 @@ export const domainIcon = (
   stateObj?: HassEntity,
   state?: string
 ): string => {
-  const icon = domainIconWithoutDefault(domain, stateObj, state);
-  if (icon) {
-    return icon;
-  }
-  // eslint-disable-next-line
-  console.warn(`Unable to find icon for domain ${domain}`);
-  return DEFAULT_DOMAIN_ICON;
-};
-
-export const domainIconWithoutDefault = (
-  domain: string,
-  stateObj?: HassEntity,
-  state?: string
-): string | undefined => {
   const compareState = state !== undefined ? state : stateObj?.state;
 
   switch (domain) {
@@ -102,15 +87,6 @@ export const domainIconWithoutDefault = (
         ? mdiCheckCircleOutline
         : mdiCloseCircleOutline;
 
-    case "input_datetime":
-      if (!stateObj?.attributes.has_date) {
-        return mdiClock;
-      }
-      if (!stateObj.attributes.has_time) {
-        return mdiCalendar;
-      }
-      break;
-
     case "lock":
       switch (compareState) {
         case "unlocked":
@@ -148,6 +124,15 @@ export const domainIconWithoutDefault = (
       break;
     }
 
+    case "input_datetime":
+      if (!stateObj?.attributes.has_date) {
+        return mdiClock;
+      }
+      if (!stateObj.attributes.has_time) {
+        return mdiCalendar;
+      }
+      break;
+
     case "sun":
       return stateObj?.state === "above_horizon"
         ? FIXED_DOMAIN_ICONS[domain]
@@ -159,14 +144,13 @@ export const domainIconWithoutDefault = (
           ? mdiPackageDown
           : mdiPackageUp
         : mdiPackage;
-
-    case "weather":
-      return weatherIcon(stateObj?.state);
   }
 
   if (domain in FIXED_DOMAIN_ICONS) {
     return FIXED_DOMAIN_ICONS[domain];
   }
 
-  return undefined;
+  // eslint-disable-next-line
+  console.warn(`Unable to find icon for domain ${domain}`);
+  return DEFAULT_DOMAIN_ICON;
 };

src/common/entity/supports-feature.ts

@@ -3,13 +3,6 @@ import { HassEntity } from "home-assistant-js-websocket";
 export const supportsFeature = (
   stateObj: HassEntity,
   feature: number
-): boolean => supportsFeatureFromAttributes(stateObj.attributes, feature);
-
-export const supportsFeatureFromAttributes = (
-  attributes: {
-    [key: string]: any;
-  },
-  feature: number
 ): boolean =>
   // eslint-disable-next-line no-bitwise
-  (attributes.supported_features! & feature) !== 0;
+  (stateObj.attributes.supported_features! & feature) !== 0;

src/common/number/format_number.ts

@@ -7,11 +7,8 @@ import { round } from "./round";
  * @param stateObj The entity state object
  */
 export const isNumericState = (stateObj: HassEntity): boolean =>
-  isNumericFromAttributes(stateObj.attributes);
-
-export const isNumericFromAttributes = (attributes: {
-  [key: string]: any;
-}): boolean => !!attributes.unit_of_measurement || !!attributes.state_class;
+  !!stateObj.attributes.unit_of_measurement ||
+  !!stateObj.attributes.state_class;
 
 export const numberFormatToLocale = (
   localeOptions: FrontendLocaleData

src/common/string/filter/char-code.ts

@@ -1,244 +0,0 @@
-// MIT License
-
-// Copyright (c) 2015 - present Microsoft Corporation
-
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-// Names from https://blog.codinghorror.com/ascii-pronunciation-rules-for-programmers/
-
-/**
- * An inlined enum containing useful character codes (to be used with String.charCodeAt).
- * Please leave the const keyword such that it gets inlined when compiled to JavaScript!
- */
-export enum CharCode {
-  Null = 0,
-  /**
-   * The `\b` character.
-   */
-  Backspace = 8,
-  /**
-   * The `\t` character.
-   */
-  Tab = 9,
-  /**
-   * The `\n` character.
-   */
-  LineFeed = 10,
-  /**
-   * The `\r` character.
-   */
-  CarriageReturn = 13,
-  Space = 32,
-  /**
-   * The `!` character.
-   */
-  ExclamationMark = 33,
-  /**
-   * The `"` character.
-   */
-  DoubleQuote = 34,
-  /**
-   * The `#` character.
-   */
-  Hash = 35,
-  /**
-   * The `$` character.
-   */
-  DollarSign = 36,
-  /**
-   * The `%` character.
-   */
-  PercentSign = 37,
-  /**
-   * The `&` character.
-   */
-  Ampersand = 38,
-  /**
-   * The `'` character.
-   */
-  SingleQuote = 39,
-  /**
-   * The `(` character.
-   */
-  OpenParen = 40,
-  /**
-   * The `)` character.
-   */
-  CloseParen = 41,
-  /**
-   * The `*` character.
-   */
-  Asterisk = 42,
-  /**
-   * The `+` character.
-   */
-  Plus = 43,
-  /**
-   * The `,` character.
-   */
-  Comma = 44,
-  /**
-   * The `-` character.
-   */
-  Dash = 45,
-  /**
-   * The `.` character.
-   */
-  Period = 46,
-  /**
-   * The `/` character.
-   */
-  Slash = 47,
-
-  Digit0 = 48,
-  Digit1 = 49,
-  Digit2 = 50,
-  Digit3 = 51,
-  Digit4 = 52,
-  Digit5 = 53,
-  Digit6 = 54,
-  Digit7 = 55,
-  Digit8 = 56,
-  Digit9 = 57,
-
-  /**
-   * The `:` character.
-   */
-  Colon = 58,
-  /**
-   * The `;` character.
-   */
-  Semicolon = 59,
-  /**
-   * The `<` character.
-   */
-  LessThan = 60,
-  /**
-   * The `=` character.
-   */
-  Equals = 61,
-  /**
-   * The `>` character.
-   */
-  GreaterThan = 62,
-  /**
-   * The `?` character.
-   */
-  QuestionMark = 63,
-  /**
-   * The `@` character.
-   */
-  AtSign = 64,
-
-  A = 65,
-  B = 66,
-  C = 67,
-  D = 68,
-  E = 69,
-  F = 70,
-  G = 71,
-  H = 72,
-  I = 73,
-  J = 74,
-  K = 75,
-  L = 76,
-  M = 77,
-  N = 78,
-  O = 79,
-  P = 80,
-  Q = 81,
-  R = 82,
-  S = 83,
-  T = 84,
-  U = 85,
-  V = 86,
-  W = 87,
-  X = 88,
-  Y = 89,
-  Z = 90,
-
-  /**
-   * The `[` character.
-   */
-  OpenSquareBracket = 91,
-  /**
-   * The `\` character.
-   */
-  Backslash = 92,
-  /**
-   * The `]` character.
-   */
-  CloseSquareBracket = 93,
-  /**
-   * The `^` character.
-   */
-  Caret = 94,
-  /**
-   * The `_` character.
-   */
-  Underline = 95,
-  /**
-   * The ``(`)`` character.
-   */
-  BackTick = 96,
-
-  a = 97,
-  b = 98,
-  c = 99,
-  d = 100,
-  e = 101,
-  f = 102,
-  g = 103,
-  h = 104,
-  i = 105,
-  j = 106,
-  k = 107,
-  l = 108,
-  m = 109,
-  n = 110,
-  o = 111,
-  p = 112,
-  q = 113,
-  r = 114,
-  s = 115,
-  t = 116,
-  u = 117,
-  v = 118,
-  w = 119,
-  x = 120,
-  y = 121,
-  z = 122,
-
-  /**
-   * The `{` character.
-   */
-  OpenCurlyBrace = 123,
-  /**
-   * The `|` character.
-   */
-  Pipe = 124,
-  /**
-   * The `}` character.
-   */
-  CloseCurlyBrace = 125,
-  /**
-   * The `~` character.
-   */
-  Tilde = 126,
-}

src/common/string/filter/filter.ts

@@ -1,551 +0,0 @@
-/* eslint-disable no-console */
-// MIT License
-
-// Copyright (c) 2015 - present Microsoft Corporation
-
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-import { CharCode } from "./char-code";
-
-const _debug = false;
-
-export interface Match {
-  start: number;
-  end: number;
-}
-
-const _maxLen = 128;
-
-function initTable() {
-  const table: number[][] = [];
-  const row: number[] = [];
-  for (let i = 0; i <= _maxLen; i++) {
-    row[i] = 0;
-  }
-  for (let i = 0; i <= _maxLen; i++) {
-    table.push(row.slice(0));
-  }
-  return table;
-}
-
-function isSeparatorAtPos(value: string, index: number): boolean {
-  if (index < 0 || index >= value.length) {
-    return false;
-  }
-  const code = value.codePointAt(index);
-  switch (code) {
-    case CharCode.Underline:
-    case CharCode.Dash:
-    case CharCode.Period:
-    case CharCode.Space:
-    case CharCode.Slash:
-    case CharCode.Backslash:
-    case CharCode.SingleQuote:
-    case CharCode.DoubleQuote:
-    case CharCode.Colon:
-    case CharCode.DollarSign:
-    case CharCode.LessThan:
-    case CharCode.OpenParen:
-    case CharCode.OpenSquareBracket:
-      return true;
-    case undefined:
-      return false;
-    default:
-      if (isEmojiImprecise(code)) {
-        return true;
-      }
-      return false;
-  }
-}
-
-function isWhitespaceAtPos(value: string, index: number): boolean {
-  if (index < 0 || index >= value.length) {
-    return false;
-  }
-  const code = value.charCodeAt(index);
-  switch (code) {
-    case CharCode.Space:
-    case CharCode.Tab:
-      return true;
-    default:
-      return false;
-  }
-}
-
-function isUpperCaseAtPos(pos: number, word: string, wordLow: string): boolean {
-  return word[pos] !== wordLow[pos];
-}
-
-export function isPatternInWord(
-  patternLow: string,
-  patternPos: number,
-  patternLen: number,
-  wordLow: string,
-  wordPos: number,
-  wordLen: number,
-  fillMinWordPosArr = false
-): boolean {
-  while (patternPos < patternLen && wordPos < wordLen) {
-    if (patternLow[patternPos] === wordLow[wordPos]) {
-      if (fillMinWordPosArr) {
-        // Remember the min word position for each pattern position
-        _minWordMatchPos[patternPos] = wordPos;
-      }
-      patternPos += 1;
-    }
-    wordPos += 1;
-  }
-  return patternPos === patternLen; // pattern must be exhausted
-}
-
-enum Arrow {
-  Diag = 1,
-  Left = 2,
-  LeftLeft = 3,
-}
-
-/**
- * An array representing a fuzzy match.
- *
- * 0. the score
- * 1. the offset at which matching started
- * 2. `<match_pos_N>`
- * 3. `<match_pos_1>`
- * 4. `<match_pos_0>` etc
- */
-// export type FuzzyScore = [score: number, wordStart: number, ...matches: number[]];// [number, number, number];
-export type FuzzyScore = Array<number>;
-
-export function fuzzyScore(
-  pattern: string,
-  patternLow: string,
-  patternStart: number,
-  word: string,
-  wordLow: string,
-  wordStart: number,
-  firstMatchCanBeWeak: boolean
-): FuzzyScore | undefined {
-  const patternLen = pattern.length > _maxLen ? _maxLen : pattern.length;
-  const wordLen = word.length > _maxLen ? _maxLen : word.length;
-
-  if (
-    patternStart >= patternLen ||
-    wordStart >= wordLen ||
-    patternLen - patternStart > wordLen - wordStart
-  ) {
-    return undefined;
-  }
-
-  // Run a simple check if the characters of pattern occur
-  // (in order) at all in word. If that isn't the case we
-  // stop because no match will be possible
-  if (
-    !isPatternInWord(
-      patternLow,
-      patternStart,
-      patternLen,
-      wordLow,
-      wordStart,
-      wordLen,
-      true
-    )
-  ) {
-    return undefined;
-  }
-
-  // Find the max matching word position for each pattern position
-  // NOTE: the min matching word position was filled in above, in the `isPatternInWord` call
-  _fillInMaxWordMatchPos(
-    patternLen,
-    wordLen,
-    patternStart,
-    wordStart,
-    patternLow,
-    wordLow
-  );
-
-  let row: number;
-  let column = 1;
-  let patternPos: number;
-  let wordPos: number;
-
-  const hasStrongFirstMatch = [false];
-
-  // There will be a match, fill in tables
-  for (
-    row = 1, patternPos = patternStart;
-    patternPos < patternLen;
-    row++, patternPos++
-  ) {
-    // Reduce search space to possible matching word positions and to possible access from next row
-    const minWordMatchPos = _minWordMatchPos[patternPos];
-    const maxWordMatchPos = _maxWordMatchPos[patternPos];
-    const nextMaxWordMatchPos =
-      patternPos + 1 < patternLen ? _maxWordMatchPos[patternPos + 1] : wordLen;
-
-    for (
-      column = minWordMatchPos - wordStart + 1, wordPos = minWordMatchPos;
-      wordPos < nextMaxWordMatchPos;
-      column++, wordPos++
-    ) {
-      let score = Number.MIN_SAFE_INTEGER;
-      let canComeDiag = false;
-
-      if (wordPos <= maxWordMatchPos) {
-        score = _doScore(
-          pattern,
-          patternLow,
-          patternPos,
-          patternStart,
-          word,
-          wordLow,
-          wordPos,
-          wordLen,
-          wordStart,
-          _diag[row - 1][column - 1] === 0,
-          hasStrongFirstMatch
-        );
-      }
-
-      let diagScore = 0;
-      if (score !== Number.MAX_SAFE_INTEGER) {
-        canComeDiag = true;
-        diagScore = score + _table[row - 1][column - 1];
-      }
-
-      const canComeLeft = wordPos > minWordMatchPos;
-      const leftScore = canComeLeft
-        ? _table[row][column - 1] + (_diag[row][column - 1] > 0 ? -5 : 0)
-        : 0; // penalty for a gap start
-
-      const canComeLeftLeft =
-        wordPos > minWordMatchPos + 1 && _diag[row][column - 1] > 0;
-      const leftLeftScore = canComeLeftLeft
-        ? _table[row][column - 2] + (_diag[row][column - 2] > 0 ? -5 : 0)
-        : 0; // penalty for a gap start
-
-      if (
-        canComeLeftLeft &&
-        (!canComeLeft || leftLeftScore >= leftScore) &&
-        (!canComeDiag || leftLeftScore >= diagScore)
-      ) {
-        // always prefer choosing left left to jump over a diagonal because that means a match is earlier in the word
-        _table[row][column] = leftLeftScore;
-        _arrows[row][column] = Arrow.LeftLeft;
-        _diag[row][column] = 0;
-      } else if (canComeLeft && (!canComeDiag || leftScore >= diagScore)) {
-        // always prefer choosing left since that means a match is earlier in the word
-        _table[row][column] = leftScore;
-        _arrows[row][column] = Arrow.Left;
-        _diag[row][column] = 0;
-      } else if (canComeDiag) {
-        _table[row][column] = diagScore;
-        _arrows[row][column] = Arrow.Diag;
-        _diag[row][column] = _diag[row - 1][column - 1] + 1;
-      } else {
-        throw new Error(`not possible`);
-      }
-    }
-  }
-
-  if (_debug) {
-    printTables(pattern, patternStart, word, wordStart);
-  }
-
-  if (!hasStrongFirstMatch[0] && !firstMatchCanBeWeak) {
-    return undefined;
-  }
-
-  row--;
-  column--;
-
-  const result: FuzzyScore = [_table[row][column], wordStart];
-
-  let backwardsDiagLength = 0;
-  let maxMatchColumn = 0;
-
-  while (row >= 1) {
-    // Find the column where we go diagonally up
-    let diagColumn = column;
-    do {
-      const arrow = _arrows[row][diagColumn];
-      if (arrow === Arrow.LeftLeft) {
-        diagColumn -= 2;
-      } else if (arrow === Arrow.Left) {
-        diagColumn -= 1;
-      } else {
-        // found the diagonal
-        break;
-      }
-    } while (diagColumn >= 1);
-
-    // Overturn the "forwards" decision if keeping the "backwards" diagonal would give a better match
-    if (
-      backwardsDiagLength > 1 && // only if we would have a contiguous match of 3 characters
-      patternLow[patternStart + row - 1] === wordLow[wordStart + column - 1] && // only if we can do a contiguous match diagonally
-      !isUpperCaseAtPos(diagColumn + wordStart - 1, word, wordLow) && // only if the forwards chose diagonal is not an uppercase
-      backwardsDiagLength + 1 > _diag[row][diagColumn] // only if our contiguous match would be longer than the "forwards" contiguous match
-    ) {
-      diagColumn = column;
-    }
-
-    if (diagColumn === column) {
-      // this is a contiguous match
-      backwardsDiagLength++;
-    } else {
-      backwardsDiagLength = 1;
-    }
-
-    if (!maxMatchColumn) {
-      // remember the last matched column
-      maxMatchColumn = diagColumn;
-    }
-
-    row--;
-    column = diagColumn - 1;
-    result.push(column);
-  }
-
-  if (wordLen === patternLen) {
-    // the word matches the pattern with all characters!
-    // giving the score a total match boost (to come up ahead other words)
-    result[0] += 2;
-  }
-
-  // Add 1 penalty for each skipped character in the word
-  const skippedCharsCount = maxMatchColumn - patternLen;
-  result[0] -= skippedCharsCount;
-
-  return result;
-}
-
-function _doScore(
-  pattern: string,
-  patternLow: string,
-  patternPos: number,
-  patternStart: number,
-  word: string,
-  wordLow: string,
-  wordPos: number,
-  wordLen: number,
-  wordStart: number,
-  newMatchStart: boolean,
-  outFirstMatchStrong: boolean[]
-): number {
-  if (patternLow[patternPos] !== wordLow[wordPos]) {
-    return Number.MIN_SAFE_INTEGER;
-  }
-
-  let score = 1;
-  let isGapLocation = false;
-  if (wordPos === patternPos - patternStart) {
-    // common prefix: `foobar <-> foobaz`
-    //                            ^^^^^
-    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
-  } else if (
-    isUpperCaseAtPos(wordPos, word, wordLow) &&
-    (wordPos === 0 || !isUpperCaseAtPos(wordPos - 1, word, wordLow))
-  ) {
-    // hitting upper-case: `foo <-> forOthers`
-    //                              ^^ ^
-    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
-    isGapLocation = true;
-  } else if (
-    isSeparatorAtPos(wordLow, wordPos) &&
-    (wordPos === 0 || !isSeparatorAtPos(wordLow, wordPos - 1))
-  ) {
-    // hitting a separator: `. <-> foo.bar`
-    //                                ^
-    score = 5;
-  } else if (
-    isSeparatorAtPos(wordLow, wordPos - 1) ||
-    isWhitespaceAtPos(wordLow, wordPos - 1)
-  ) {
-    // post separator: `foo <-> bar_foo`
-    //                              ^^^
-    score = 5;
-    isGapLocation = true;
-  }
-
-  if (score > 1 && patternPos === patternStart) {
-    outFirstMatchStrong[0] = true;
-  }
-
-  if (!isGapLocation) {
-    isGapLocation =
-      isUpperCaseAtPos(wordPos, word, wordLow) ||
-      isSeparatorAtPos(wordLow, wordPos - 1) ||
-      isWhitespaceAtPos(wordLow, wordPos - 1);
-  }
-
-  //
-  if (patternPos === patternStart) {
-    // first character in pattern
-    if (wordPos > wordStart) {
-      // the first pattern character would match a word character that is not at the word start
-      // so introduce a penalty to account for the gap preceding this match
-      score -= isGapLocation ? 3 : 5;
-    }
-  } else if (newMatchStart) {
-    // this would be the beginning of a new match (i.e. there would be a gap before this location)
-    score += isGapLocation ? 2 : 0;
-  } else {
-    // this is part of a contiguous match, so give it a slight bonus, but do so only if it would not be a prefered gap location
-    score += isGapLocation ? 0 : 1;
-  }
-
-  if (wordPos + 1 === wordLen) {
-    // we always penalize gaps, but this gives unfair advantages to a match that would match the last character in the word
-    // so pretend there is a gap after the last character in the word to normalize things
-    score -= isGapLocation ? 3 : 5;
-  }
-
-  return score;
-}
-
-function printTable(
-  table: number[][],
-  pattern: string,
-  patternLen: number,
-  word: string,
-  wordLen: number
-): string {
-  function pad(s: string, n: number, _pad = " ") {
-    while (s.length < n) {
-      s = _pad + s;
-    }
-    return s;
-  }
-  let ret = ` |   |${word
-    .split("")
-    .map((c) => pad(c, 3))
-    .join("|")}\n`;
-
-  for (let i = 0; i <= patternLen; i++) {
-    if (i === 0) {
-      ret += " |";
-    } else {
-      ret += `${pattern[i - 1]}|`;
-    }
-    ret +=
-      table[i]
-        .slice(0, wordLen + 1)
-        .map((n) => pad(n.toString(), 3))
-        .join("|") + "\n";
-  }
-  return ret;
-}
-
-function printTables(
-  pattern: string,
-  patternStart: number,
-  word: string,
-  wordStart: number
-): void {
-  pattern = pattern.substr(patternStart);
-  word = word.substr(wordStart);
-  console.log(printTable(_table, pattern, pattern.length, word, word.length));
-  console.log(printTable(_arrows, pattern, pattern.length, word, word.length));
-  console.log(printTable(_diag, pattern, pattern.length, word, word.length));
-}
-
-const _minWordMatchPos = initArr(2 * _maxLen); // min word position for a certain pattern position
-const _maxWordMatchPos = initArr(2 * _maxLen); // max word position for a certain pattern position
-const _diag = initTable(); // the length of a contiguous diagonal match
-const _table = initTable();
-const _arrows = <Arrow[][]>initTable();
-
-function initArr(maxLen: number) {
-  const row: number[] = [];
-  for (let i = 0; i <= maxLen; i++) {
-    row[i] = 0;
-  }
-  return row;
-}
-
-function _fillInMaxWordMatchPos(
-  patternLen: number,
-  wordLen: number,
-  patternStart: number,
-  wordStart: number,
-  patternLow: string,
-  wordLow: string
-) {
-  let patternPos = patternLen - 1;
-  let wordPos = wordLen - 1;
-  while (patternPos >= patternStart && wordPos >= wordStart) {
-    if (patternLow[patternPos] === wordLow[wordPos]) {
-      _maxWordMatchPos[patternPos] = wordPos;
-      patternPos--;
-    }
-    wordPos--;
-  }
-}
-
-export interface FuzzyScorer {
-  (
-    pattern: string,
-    lowPattern: string,
-    patternPos: number,
-    word: string,
-    lowWord: string,
-    wordPos: number,
-    firstMatchCanBeWeak: boolean
-  ): FuzzyScore | undefined;
-}
-
-export function createMatches(score: undefined | FuzzyScore): Match[] {
-  if (typeof score === "undefined") {
-    return [];
-  }
-  const res: Match[] = [];
-  const wordPos = score[1];
-  for (let i = score.length - 1; i > 1; i--) {
-    const pos = score[i] + wordPos;
-    const last = res[res.length - 1];
-    if (last && last.end === pos) {
-      last.end = pos + 1;
-    } else {
-      res.push({ start: pos, end: pos + 1 });
-    }
-  }
-  return res;
-}
-
-/**
- * A fast function (therefore imprecise) to check if code points are emojis.
- * Generated using https://github.com/alexdima/unicode-utils/blob/master/generate-emoji-test.js
- */
-export function isEmojiImprecise(x: number): boolean {
-  return (
-    (x >= 0x1f1e6 && x <= 0x1f1ff) ||
-    x === 8986 ||
-    x === 8987 ||
-    x === 9200 ||
-    x === 9203 ||
-    (x >= 9728 && x <= 10175) ||
-    x === 11088 ||
-    x === 11093 ||
-    (x >= 127744 && x <= 128591) ||
-    (x >= 128640 && x <= 128764) ||
-    (x >= 128992 && x <= 129003) ||
-    (x >= 129280 && x <= 129535) ||
-    (x >= 129648 && x <= 129750)
-  );
-}

src/common/string/filter/sequence-matching.ts

@@ -1,52 +1,4 @@
-import { fuzzyScore } from "./filter";
-
-/**
- * Determine whether a sequence of letters exists in another string,
- *   in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
- *
- * @param {string} filter - Sequence of letters to check for
- * @param {ScorableTextItem} item - Item against whose strings will be checked
- *
- * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
- */
-
-export const fuzzySequentialMatch = (
-  filter: string,
-  item: ScorableTextItem
-) => {
-  let topScore = Number.NEGATIVE_INFINITY;
-
-  for (const word of item.strings) {
-    const scores = fuzzyScore(
-      filter,
-      filter.toLowerCase(),
-      0,
-      word,
-      word.toLowerCase(),
-      0,
-      true
-    );
-
-    if (!scores) {
-      continue;
-    }
-
-    // The VS Code implementation of filter returns a 0 for a weak match.
-    // But if .filter() sees a "0", it considers that a failed match and will remove it.
-    // So, we set score to 1 in these cases so the match will be included, and mostly respect correct ordering.
-    const score = scores[0] === 0 ? 1 : scores[0];
-
-    if (score > topScore) {
-      topScore = score;
-    }
-  }
-
-  if (topScore === Number.NEGATIVE_INFINITY) {
-    return undefined;
-  }
-
-  return topScore;
-};
+import fuzzysort from "fuzzysort";
 
 /**
  * An interface that objects must extend in order to use the fuzzy sequence matcher
@@ -66,18 +18,48 @@ export interface ScorableTextItem {
   strings: string[];
 }
 
-type FuzzyFilterSort = <T extends ScorableTextItem>(
+export type FuzzyFilterSort = <T extends ScorableTextItem>(
   filter: string,
   items: T[]
 ) => T[];
 
-export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) =>
-  items
+export function fuzzyMatcher(search: string | null): (string) => boolean {
+  const scorer = fuzzyScorer(search);
+  return (value: string) => scorer([value]) !== Number.NEGATIVE_INFINITY;
+}
+
+export function fuzzyScorer(
+  search: string | null
+): (values: string[]) => number {
+  const searchTerms = (search || "").match(/("[^"]+"|[^"\s]+)/g);
+  if (!searchTerms) {
+    return () => 0;
+  }
+  return (values) =>
+    searchTerms
+      .map((term) => {
+        const resultsForTerm = fuzzysort.go(term, values, {
+          allowTypo: true,
+        });
+        if (resultsForTerm.length > 0) {
+          return Math.max(...resultsForTerm.map((result) => result.score));
+        }
+        return Number.NEGATIVE_INFINITY;
+      })
+      .reduce((partial, current) => partial + current, 0);
+}
+
+export const fuzzySortFilterSort: FuzzyFilterSort = (filter, items) => {
+  const scorer = fuzzyScorer(filter);
+  return items
     .map((item) => {
-      item.score = fuzzySequentialMatch(filter, item);
+      item.score = scorer(item.strings);
       return item;
     })
-    .filter((item) => item.score !== undefined)
+    .filter((item) => item.score !== undefined && item.score > -100000)
     .sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) =>
       scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0
     );
+};
+
+export const defaultFuzzyFilterSort = fuzzySortFilterSort;

src/common/util/throttle.ts

@@ -13,7 +13,7 @@ export const throttle = <T extends any[]>(
 ) => {
   let timeout: number | undefined;
   let previous = 0;
-  const throttledFunc = (...args: T): void => {
+  return (...args: T): void => {
     const later = () => {
       previous = leading === false ? 0 : Date.now();
       timeout = undefined;
@@ -35,10 +35,4 @@ export const throttle = <T extends any[]>(
       timeout = window.setTimeout(later, remaining);
     }
   };
-  throttledFunc.cancel = () => {
-    clearTimeout(timeout);
-    timeout = undefined;
-    previous = 0;
-  };
-  return throttledFunc;
 };

src/components/chart/chart-date-adapter.ts

@@ -34,7 +34,7 @@ import {
   endOfMonth,
   endOfQuarter,
   endOfYear,
-} from "date-fns/esm";
+} from "date-fns";
 import {
   formatDate,
   formatDateMonth,

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

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

src/components/data-table/sort_filter_worker.ts

@@ -7,25 +7,26 @@ import type {
   SortableColumnContainer,
   SortingDirection,
 } from "./ha-data-table";
+import { fuzzyMatcher } from "../../common/string/filter/sequence-matching";
 
 const filterData = (
   data: DataTableRowData[],
   columns: SortableColumnContainer,
   filter: string
 ) => {
-  filter = filter.toUpperCase();
+  const matcher = fuzzyMatcher(filter);
   return data.filter((row) =>
     Object.entries(columns).some((columnEntry) => {
       const [key, column] = columnEntry;
       if (column.filterable) {
         if (
-          String(
-            column.filterKey
-              ? row[column.valueColumn || key][column.filterKey]
-              : row[column.valueColumn || key]
+          matcher(
+            String(
+              column.filterKey
+                ? row[column.valueColumn || key][column.filterKey]
+                : row[column.valueColumn || key]
+            )
           )
-            .toUpperCase()
-            .includes(filter)
         ) {
           return true;
         }

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

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

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

@@ -15,12 +15,13 @@ import type { HaComboBox } from "../ha-combo-box";
 import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./state-badge";
+import { defaultFuzzyFilterSort } from "../../common/string/filter/sequence-matching";
 
 interface HassEntityWithCachedName extends HassEntity {
   friendly_name: string;
 }
 
-export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;
+export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
 // eslint-disable-next-line lit/prefer-static-styles
 const rowRenderer: ComboBoxLitRenderer<HassEntityWithCachedName> = (item) =>
@@ -336,11 +337,18 @@ export class HaEntityPicker extends LitElement {
   }
 
   private _filterChanged(ev: CustomEvent): void {
-    const filterString = ev.detail.value.toLowerCase();
-    (this.comboBox as any).filteredItems = this._states.filter(
-      (entityState) =>
-        entityState.entity_id.toLowerCase().includes(filterString) ||
-        computeStateName(entityState).toLowerCase().includes(filterString)
+    const filterString = ev.detail.value;
+
+    const sortableEntityStates = this._states.map((entityState) => ({
+      strings: [entityState.entity_id, computeStateName(entityState)],
+      entityState: entityState,
+    }));
+    const sortedEntityStates = defaultFuzzyFilterSort(
+      filterString,
+      sortableEntityStates
+    );
+    (this.comboBox as any).filteredItems = sortedEntityStates.map(
+      (sortableItem) => sortableItem.entityState
     );
   }
 

src/components/ha-button-menu.ts

@@ -1,22 +1,17 @@
-import type { Button } from "@material/mwc-button";
 import "@material/mwc-menu";
 import type { Corner, Menu, MenuCorner } from "@material/mwc-menu";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
-import type { HaIconButton } from "./ha-icon-button";
 
 @customElement("ha-button-menu")
 export class HaButtonMenu extends LitElement {
-  protected readonly [FOCUS_TARGET];
-
   @property() public corner: Corner = "TOP_START";
 
   @property() public menuCorner: MenuCorner = "START";
 
-  @property({ type: Number }) public x: number | null = null;
+  @property({ type: Number }) public x?: number;
 
-  @property({ type: Number }) public y: number | null = null;
+  @property({ type: Number }) public y?: number;
 
   @property({ type: Boolean }) public multi = false;
 
@@ -36,18 +31,10 @@ export class HaButtonMenu extends LitElement {
     return this._menu?.selected;
   }
 
-  public override focus() {
-    if (this._menu?.open) {
-      this._menu.focusItemAtIndex(0);
-    } else {
-      this._triggerButton?.focus();
-    }
-  }
-
   protected render(): TemplateResult {
     return html`
       <div @click=${this._handleClick}>
-        <slot name="trigger" @slotchange=${this._setTriggerAria}></slot>
+        <slot name="trigger"></slot>
       </div>
       <mwc-menu
         .corner=${this.corner}
@@ -63,21 +50,6 @@ export class HaButtonMenu extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps): void {
-    super.firstUpdated(changedProps);
-
-    if (document.dir === "rtl") {
-      this.updateComplete.then(() => {
-        this.querySelectorAll("mwc-list-item").forEach((item) => {
-          const style = document.createElement("style");
-          style.innerHTML =
-            "span.material-icons:first-of-type { margin-left: var(--mdc-list-item-graphic-margin, 32px) !important; margin-right: 0px !important;}";
-          item!.shadowRoot!.appendChild(style);
-        });
-      });
-    }
-  }
-
   private _handleClick(): void {
     if (this.disabled) {
       return;
@@ -86,18 +58,6 @@ export class HaButtonMenu extends LitElement {
     this._menu!.show();
   }
 
-  private get _triggerButton() {
-    return this.querySelector(
-      'ha-icon-button[slot="trigger"], mwc-button[slot="trigger"]'
-    ) as HaIconButton | Button | null;
-  }
-
-  private _setTriggerAria() {
-    if (this._triggerButton) {
-      this._triggerButton.ariaHasPopup = "menu";
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       :host {

src/components/ha-chip.ts

@@ -66,13 +66,9 @@ export class HaChip extends LitElement {
         line-height: 14px;
         color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
       }
-      .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,
       .mdc-chip.no-text
         .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
         margin-right: -4px;
-        margin-inline-start: -4px;
-        margin-inline-end: 4px;
-        direction: var(--direction);
       }
 
       span[role="gridcell"] {

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

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

src/components/ha-climate-state.ts

@@ -3,7 +3,6 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { formatNumber } from "../common/number/format_number";
 import { CLIMATE_PRESET_NONE } from "../data/climate";
-import { UNAVAILABLE_STATES } from "../data/entity";
 import type { HomeAssistant } from "../types";
 
 @customElement("ha-climate-state")
@@ -16,22 +15,22 @@ class HaClimateState extends LitElement {
     const currentStatus = this._computeCurrentStatus();
 
     return html`<div class="target">
-        ${!UNAVAILABLE_STATES.includes(this.stateObj.state)
+        ${this.stateObj.state !== "unknown"
           ? html`<span class="state-label">
-                ${this._localizeState()}
-                ${this.stateObj.attributes.preset_mode &&
-                this.stateObj.attributes.preset_mode !== CLIMATE_PRESET_NONE
-                  ? html`-
-                    ${this.hass.localize(
-                      `state_attributes.climate.preset_mode.${this.stateObj.attributes.preset_mode}`
-                    ) || this.stateObj.attributes.preset_mode}`
-                  : ""}
-              </span>
-              <div class="unit">${this._computeTarget()}</div>`
-          : this._localizeState()}
+              ${this._localizeState()}
+              ${this.stateObj.attributes.preset_mode &&
+              this.stateObj.attributes.preset_mode !== CLIMATE_PRESET_NONE
+                ? html`-
+                  ${this.hass.localize(
+                    `state_attributes.climate.preset_mode.${this.stateObj.attributes.preset_mode}`
+                  ) || this.stateObj.attributes.preset_mode}`
+                : ""}
+            </span>`
+          : ""}
+        <div class="unit">${this._computeTarget()}</div>
       </div>
 
-      ${currentStatus && !UNAVAILABLE_STATES.includes(this.stateObj.state)
+      ${currentStatus
         ? html`<div class="current">
             ${this.hass.localize("ui.card.climate.currently")}:
             <div class="unit">${currentStatus}</div>
@@ -109,10 +108,6 @@ class HaClimateState extends LitElement {
   }
 
   private _localizeState(): string {
-    if (UNAVAILABLE_STATES.includes(this.stateObj.state)) {
-      return this.hass.localize(`state.default.${this.stateObj.state}`);
-    }
-
     const stateString = this.hass.localize(
       `component.climate.state._.${this.stateObj.state}`
     );

src/components/ha-combo-box.ts

@@ -241,9 +241,6 @@ export class HaComboBox extends LitElement {
       .toggle-button {
         right: 12px;
         top: -10px;
-        inset-inline-start: initial;
-        inset-inline-end: 12px;
-        direction: var(--direction);
       }
       :host([opened]) .toggle-button {
         color: var(--primary-color);
@@ -252,9 +249,18 @@ export class HaComboBox extends LitElement {
         --mdc-icon-size: 20px;
         top: -7px;
         right: 36px;
-        inset-inline-start: initial;
-        inset-inline-end: 36px;
-        direction: var(--direction);
+      }
+
+      :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-date-range-picker.ts

@@ -140,9 +140,6 @@ export class HaDateRangePicker extends LitElement {
     return css`
       ha-svg-icon {
         margin-right: 8px;
-        margin-inline-end: 8px;
-        margin-inline-start: initial;
-        direction: var(--direction);
       }
 
       .date-range-inputs {
@@ -169,9 +166,6 @@ export class HaDateRangePicker extends LitElement {
 
       ha-textfield:last-child {
         margin-left: 8px;
-        margin-inline-start: 8px;
-        margin-inline-end: initial;
-        direction: var(--direction);
       }
 
       @media only screen and (max-width: 800px) {

src/components/ha-dialog.ts

@@ -3,8 +3,8 @@ import { styles } from "@material/mwc-dialog/mwc-dialog.css";
 import { mdiClose } from "@mdi/js";
 import { css, html, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
+import { computeRTLDirection } from "../common/util/compute_rtl";
 import type { HomeAssistant } from "../types";
-import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
 import "./ha-icon-button";
 
 export const createCloseHeading = (
@@ -17,13 +17,12 @@ export const createCloseHeading = (
     .path=${mdiClose}
     dialogAction="close"
     class="header_button"
+    dir=${computeRTLDirection(hass)}
   ></ha-icon-button>
 `;
 
 @customElement("ha-dialog")
 export class HaDialog extends DialogBase {
-  protected readonly [FOCUS_TARGET];
-
   public scrollToPos(x: number, y: number) {
     this.contentElement?.scrollTo(x, y);
   }
@@ -90,18 +89,18 @@ export class HaDialog extends DialogBase {
       }
       .header_title {
         margin-right: 40px;
-        margin-inline-end: 40px;
-        direction: var(--direction);
       }
-      .header_button {
-        inset-inline-start: initial;
-        inset-inline-end: 16px;
-        direction: var(--direction);
+      [dir="rtl"].header_button {
+        right: auto;
+        left: 16px;
       }
-      .dialog-actions {
-        inset-inline-start: initial !important;
-        inset-inline-end: 0px !important;
-        direction: var(--direction);
+      [dir="rtl"].header_title {
+        margin-left: 40px;
+        margin-right: 0px;
+      }
+      :host-context([style*="direction: rtl;"]) .dialog-actions {
+        left: 0px !important;
+        right: auto !important;
       }
     `,
   ];

src/components/ha-expansion-panel.ts

@@ -133,9 +133,6 @@ class HaExpansionPanel extends LitElement {
       .summary-icon {
         transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
         margin-left: auto;
-        margin-inline-start: auto;
-        margin-inline-end: initial;
-        direction: var(--direction);
       }
 
       .summary-icon.expanded {

src/components/ha-fab.ts

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

src/components/ha-file-upload.ts

@@ -175,23 +175,24 @@ export class HaFileUpload extends LitElement {
         }
         .mdc-text-field__icon--leading {
           margin-bottom: 12px;
-          inset-inline-start: initial;
-          inset-inline-end: 0px;
-          direction: var(--direction);
+        }
+        :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;
         }
-        .mdc-floating-label {
-          inset-inline-start: 16px !important;
-          inset-inline-end: initial !important;
-          direction: var(--direction);
+        :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+          left: initial;
+          right: 16px;
         }
-        .mdc-text-field--filled .mdc-floating-label {
-          inset-inline-start: 48px !important;
-          inset-inline-end: initial !important;
-          direction: var(--direction);
+        :host-context([style*="direction: rtl;"])
+          .mdc-text-field--filled
+          .mdc-floating-label {
+          left: initial;
+          right: 48px;
         }
         .dragged:before {
           position: var(--layout-fit_-_position);

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

@@ -132,12 +132,6 @@ export class HaFormString extends LitElement implements HaFormElement {
         --mdc-icon-button-size: 24px;
         color: var(--secondary-text-color);
       }
-
-      ha-icon-button {
-        inset-inline-start: initial;
-        inset-inline-end: 12px;
-        direction: var(--direction);
-      }
     `;
   }
 }

src/components/ha-icon-button.ts

@@ -1,8 +1,6 @@
 import "@material/mwc-icon-button";
-import type { IconButton } from "@material/mwc-icon-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
+import { customElement, property } from "lit/decorators";
 import "./ha-svg-icon";
 
 @customElement("ha-icon-button")
@@ -13,32 +11,21 @@ export class HaIconButton extends LitElement {
   @property({ type: String }) path?: string;
 
   // Label that is used for ARIA support and as tooltip
-  @property({ type: String }) label?: string;
-
-  // These should always be set as properties, not attributes,
-  // so that only the <button> element gets the attribute
-  @property({ type: String, attribute: "aria-haspopup" })
-  override ariaHasPopup!: IconButton["ariaHasPopup"];
+  @property({ type: String }) label = "";
 
   @property({ type: Boolean }) hideTitle = false;
 
-  @query("mwc-icon-button", true) private _button?: IconButton;
-
-  public override focus() {
-    this._button?.focus();
-  }
-
   static shadowRootOptions: ShadowRootInit = {
     mode: "open",
     delegatesFocus: true,
   };
 
   protected render(): TemplateResult {
+    // Note: `ariaLabel` required despite the `mwc-icon-button` docs saying `label` should be enough
     return html`
       <mwc-icon-button
-        aria-label=${ifDefined(this.label)}
-        title=${ifDefined(this.hideTitle ? undefined : this.label)}
-        aria-haspopup=${ifDefined(this.ariaHasPopup)}
+        .ariaLabel=${this.label}
+        .title=${this.hideTitle ? "" : this.label}
         .disabled=${this.disabled}
       >
         ${this.path

src/components/ha-navigation-list.ts

@@ -59,6 +59,13 @@ class HaNavigationList extends LitElement {
     :host {
       --mdc-list-vertical-padding: 0;
     }
+    a {
+      text-decoration: none;
+      color: var(--primary-text-color);
+      position: relative;
+      display: block;
+      outline: 0;
+    }
     ha-svg-icon,
     ha-icon-next {
       color: var(--secondary-text-color);

src/components/ha-select.ts

@@ -47,18 +47,9 @@ export class HaSelect extends SelectBase {
       .mdc-select__anchor {
         width: var(--ha-select-min-width, 200px);
       }
-      .mdc-select--filled .mdc-floating-label {
-        inset-inline-start: 12px;
-        inset-inline-end: initial;
-        direction: var(--direction);
-      }
-      .mdc-select .mdc-select__anchor {
-        padding-inline-start: 12px;
-        padding-inline-end: 0px;
-        direction: var(--direction);
-      }
-      .mdc-select__anchor .mdc-floating-label--float-above {
-        transform-origin: var(--float-start);
+      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+        right: 16px !important;
+        left: initial !important;
       }
     `,
   ];

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

@@ -1,24 +1,15 @@
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
+import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
 import { DeviceRegistryEntry } from "../../data/device_registry";
-import {
-  EntityRegistryEntry,
-  subscribeEntityRegistry,
-} from "../../data/entity_registry";
-import {
-  EntitySources,
-  fetchEntitySourcesWithCache,
-} from "../../data/entity_sources";
+import { EntityRegistryEntry } from "../../data/entity_registry";
 import { AreaSelector } from "../../data/selector";
-import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../types";
 import "../ha-area-picker";
 import "../ha-areas-picker";
 
 @customElement("ha-selector-area")
-export class HaAreaSelector extends SubscribeMixin(LitElement) {
+export class HaAreaSelector extends LitElement {
   @property() public hass!: HomeAssistant;
 
   @property() public selector!: AreaSelector;
@@ -29,44 +20,29 @@ export class HaAreaSelector extends SubscribeMixin(LitElement) {
 
   @property() public helper?: string;
 
-  @state() private _entitySources?: EntitySources;
-
-  @state() private _entities?: EntityRegistryEntry[];
+  @state() public _configEntries?: ConfigEntry[];
 
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
 
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeEntityRegistry(this.hass.connection!, (entities) => {
-        this._entities = entities.filter((entity) => entity.device_id !== null);
-      }),
-    ];
-  }
-
   protected updated(changedProperties) {
-    if (
-      changedProperties.has("selector") &&
-      (this.selector.area.device?.integration ||
-        this.selector.area.entity?.integration) &&
-      !this._entitySources
-    ) {
-      fetchEntitySourcesWithCache(this.hass).then((sources) => {
-        this._entitySources = sources;
-      });
+    if (changedProperties.has("selector")) {
+      const oldSelector = changedProperties.get("selector");
+      if (
+        oldSelector !== this.selector &&
+        this.selector.area.device?.integration
+      ) {
+        getConfigEntries(this.hass, {
+          domain: this.selector.area.device.integration,
+        }).then((entries) => {
+          this._configEntries = entries;
+        });
+      }
     }
   }
 
   protected render() {
-    if (
-      (this.selector.area.device?.integration ||
-        this.selector.area.entity?.integration) &&
-      !this._entitySources
-    ) {
-      return html``;
-    }
-
     if (!this.selector.area.multiple) {
       return html`
         <ha-area-picker
@@ -111,62 +87,39 @@ export class HaAreaSelector extends SubscribeMixin(LitElement) {
   }
 
   private _filterEntities = (entity: EntityRegistryEntry): boolean => {
-    const filterIntegration = this.selector.area.entity?.integration;
-    if (
-      filterIntegration &&
-      this._entitySources?.[entity.entity_id]?.domain !== filterIntegration
-    ) {
-      return false;
-    }
-    return true;
-  };
-
-  private _filterDevices = (device: DeviceRegistryEntry): boolean => {
-    if (!this.selector.area.device) {
-      return true;
-    }
-
-    const {
-      manufacturer: filterManufacturer,
-      model: filterModel,
-      integration: filterIntegration,
-    } = this.selector.area.device;
-
-    if (filterManufacturer && device.manufacturer !== filterManufacturer) {
-      return false;
-    }
-    if (filterModel && device.model !== filterModel) {
-      return false;
-    }
-    if (filterIntegration && this._entitySources && this._entities) {
-      const deviceIntegrations = this._deviceIntegrations(
-        this._entitySources,
-        this._entities
-      );
-      if (!deviceIntegrations?.[device.id]?.includes(filterIntegration)) {
+    if (this.selector.area.entity?.integration) {
+      if (entity.platform !== this.selector.area.entity.integration) {
         return false;
       }
     }
     return true;
   };
 
-  private _deviceIntegrations = memoizeOne(
-    (entitySources: EntitySources, entities: EntityRegistryEntry[]) => {
-      const deviceIntegrations: Record<string, string[]> = {};
-
-      for (const entity of entities) {
-        const source = entitySources[entity.entity_id];
-        if (!source?.domain) {
-          continue;
-        }
-        if (!deviceIntegrations[entity.device_id!]) {
-          deviceIntegrations[entity.device_id!] = [];
-        }
-        deviceIntegrations[entity.device_id!].push(source.domain);
-      }
-      return deviceIntegrations;
+  private _filterDevices = (device: DeviceRegistryEntry): boolean => {
+    if (
+      this.selector.area.device?.manufacturer &&
+      device.manufacturer !== this.selector.area.device.manufacturer
+    ) {
+      return false;
     }
-  );
+    if (
+      this.selector.area.device?.model &&
+      device.model !== this.selector.area.device.model
+    ) {
+      return false;
+    }
+    if (this.selector.area.device?.integration) {
+      if (
+        this._configEntries &&
+        !this._configEntries.some((entry) =>
+          device.config_entries.includes(entry.entry_id)
+        )
+      ) {
+        return false;
+      }
+    }
+    return true;
+  };
 }
 
 declare global {

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

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

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

@@ -1,33 +1,18 @@
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { ConfigEntry } from "../../data/config_entries";
+import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
 import type { DeviceRegistryEntry } from "../../data/device_registry";
-import {
-  EntityRegistryEntry,
-  subscribeEntityRegistry,
-} from "../../data/entity_registry";
-import {
-  EntitySources,
-  fetchEntitySourcesWithCache,
-} from "../../data/entity_sources";
 import type { DeviceSelector } from "../../data/selector";
-import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../types";
 import "../device/ha-device-picker";
 import "../device/ha-devices-picker";
 
 @customElement("ha-selector-device")
-export class HaDeviceSelector extends SubscribeMixin(LitElement) {
+export class HaDeviceSelector extends LitElement {
   @property() public hass!: HomeAssistant;
 
   @property() public selector!: DeviceSelector;
 
-  @state() private _entitySources?: EntitySources;
-
-  @state() private _entities?: EntityRegistryEntry[];
-
   @property() public value?: any;
 
   @property() public label?: string;
@@ -40,32 +25,20 @@ export class HaDeviceSelector extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public required = true;
 
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeEntityRegistry(this.hass.connection!, (entities) => {
-        this._entities = entities.filter((entity) => entity.device_id !== null);
-      }),
-    ];
-  }
-
-  protected updated(changedProperties): void {
-    super.updated(changedProperties);
-    if (
-      changedProperties.has("selector") &&
-      this.selector.device.integration &&
-      !this._entitySources
-    ) {
-      fetchEntitySourcesWithCache(this.hass).then((sources) => {
-        this._entitySources = sources;
-      });
+  protected updated(changedProperties) {
+    if (changedProperties.has("selector")) {
+      const oldSelector = changedProperties.get("selector");
+      if (oldSelector !== this.selector && this.selector.device?.integration) {
+        getConfigEntries(this.hass, {
+          domain: this.selector.device.integration,
+        }).then((entries) => {
+          this._configEntries = entries;
+        });
+      }
     }
   }
 
   protected render() {
-    if (this.selector.device.integration && !this._entitySources) {
-      return html``;
-    }
-
     if (!this.selector.device.multiple) {
       return html`
         <ha-device-picker
@@ -107,48 +80,30 @@ export class HaDeviceSelector extends SubscribeMixin(LitElement) {
   }
 
   private _filterDevices = (device: DeviceRegistryEntry): boolean => {
-    const {
-      manufacturer: filterManufacturer,
-      model: filterModel,
-      integration: filterIntegration,
-    } = this.selector.device;
-
-    if (filterManufacturer && device.manufacturer !== filterManufacturer) {
+    if (
+      this.selector.device?.manufacturer &&
+      device.manufacturer !== this.selector.device.manufacturer
+    ) {
       return false;
     }
-    if (filterModel && device.model !== filterModel) {
+    if (
+      this.selector.device?.model &&
+      device.model !== this.selector.device.model
+    ) {
       return false;
     }
-    if (filterIntegration && this._entitySources && this._entities) {
-      const deviceIntegrations = this._deviceIntegrations(
-        this._entitySources,
-        this._entities
-      );
-      if (!deviceIntegrations?.[device.id]?.includes(filterIntegration)) {
+    if (this.selector.device?.integration) {
+      if (
+        this._configEntries &&
+        !this._configEntries.some((entry) =>
+          device.config_entries.includes(entry.entry_id)
+        )
+      ) {
         return false;
       }
     }
     return true;
   };
-
-  private _deviceIntegrations = memoizeOne(
-    (entitySources: EntitySources, entities: EntityRegistryEntry[]) => {
-      const deviceIntegrations: Record<string, string[]> = {};
-
-      for (const entity of entities) {
-        const source = entitySources[entity.entity_id];
-        if (!source?.domain) {
-          continue;
-        }
-
-        if (!deviceIntegrations[entity.device_id!]) {
-          deviceIntegrations[entity.device_id!] = [];
-        }
-        deviceIntegrations[entity.device_id!].push(source.domain);
-      }
-      return deviceIntegrations;
-    }
-  );
 }
 
 declare global {

src/components/ha-service-control.ts

@@ -287,7 +287,9 @@ export class HaServiceControl extends LitElement {
       ${shouldRenderServiceDataYaml
         ? html`<ha-yaml-editor
             .hass=${this.hass}
-            .label=${this.hass.localize("ui.components.service-control.data")}
+            .label=${this.hass.localize(
+              "ui.components.service-control.service_data"
+            )}
             .name=${"data"}
             .defaultValue=${this._value?.data}
             @value-changed=${this._dataChanged}

src/components/ha-target-picker.ts

@@ -569,9 +569,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         height: 16px;
         --mdc-icon-size: 14px;
         color: var(--secondary-text-color);
-        margin-inline-start: 4px !important;
-        margin-inline-end: -4px !important;
-        direction: var(--direction);
       }
       .mdc-chip__icon--leading {
         display: flex;
@@ -581,9 +578,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         border-radius: 50%;
         padding: 6px;
         margin-left: -14px !important;
-        margin-inline-start: -14px !important;
-        margin-inline-end: 4px !important;
-        direction: var(--direction);
       }
       .expand-btn {
         margin-right: 0;
@@ -622,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

@@ -57,9 +57,6 @@ export class HaTextField extends TextFieldBase {
       .mdc-text-field__affix--suffix {
         padding-left: var(--text-field-suffix-padding-left, 12px);
         padding-right: var(--text-field-suffix-padding-right, 0px);
-        padding-inline-start: var(--text-field-suffix-padding-left, 12px);
-        padding-inline-end: var(--text-field-suffix-padding-right, 0px);
-        direction: var(--direction);
       }
 
       .mdc-text-field:not(.mdc-text-field--disabled)
@@ -95,19 +92,17 @@ export class HaTextField extends TextFieldBase {
         overflow: var(--text-field-overflow);
       }
 
-      .mdc-floating-label {
-        inset-inline-start: 16px !important;
-        inset-inline-end: initial !important;
-        transform-origin: var(--float-start);
-        direction: var(--direction);
+      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
+        right: 10px !important;
+        left: initial !important;
       }
 
-      .mdc-text-field--with-leading-icon.mdc-text-field--filled
+      :host-context([style*="direction: rtl;"])
+        .mdc-text-field--with-leading-icon.mdc-text-field--filled
         .mdc-floating-label {
         max-width: calc(100% - 48px);
-        inset-inline-start: 48px !important;
-        inset-inline-end: initial !important;
-        direction: var(--direction);
+        right: 48px !important;
+        left: initial !important;
       }
     `,
   ];

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

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

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

@@ -152,7 +152,6 @@ class DialogMediaPlayerBrowse extends LitElement {
         ha-media-player-browse {
           --media-browser-max-height: calc(100vh - 65px);
           height: calc(100vh - 65px);
-          direction: ltr;
         }
 
         @media (min-width: 800px) {

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

@@ -59,12 +59,6 @@ class MediaManageButton extends LitElement {
     ha-circular-progress[slot="icon"] {
       vertical-align: middle;
     }
-
-    ha-svg-icon[slot="icon"] {
-      margin-inline-start: 0px;
-      margin-inline-end: 8px;
-      direction: var(--direction);
-    }
   `;
 }
 

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

@@ -1,11 +1,10 @@
-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";
 import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
+import { grid } from "@lit-labs/virtualizer/layouts/grid";
+import "@lit-labs/virtualizer";
 import {
   css,
   CSSResultGroup,
@@ -22,12 +21,10 @@ import {
   state,
 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-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";
-import { getSignedPath } from "../../data/auth";
 import type { MediaPlayerItem } from "../../data/media-player";
 import {
   browseMediaPlayer,
@@ -42,7 +39,6 @@ import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
-import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 import { documentationUrl } from "../../util/documentation-url";
 import "../entity/ha-entity-picker";
 import "../ha-button-menu";
@@ -53,6 +49,8 @@ import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./ha-browse-media-tts";
 import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
+import { getSignedPath } from "../../data/auth";
+import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 
 declare global {
   interface HASSDomEvents {
@@ -102,10 +100,6 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @query(".content") private _content?: HTMLDivElement;
 
-  @query("lit-virtualizer") private _virtualizer?: LitVirtualizer;
-
-  private _observed = false;
-
   private _headerOffsetHeight = 0;
 
   private _resizeObserver?: ResizeObserver;
@@ -286,19 +280,6 @@ export class HaMediaPlayerBrowse extends LitElement {
       this._animateHeaderHeight();
     } else if (changedProps.has("_currentItem")) {
       this._setHeaderHeight();
-
-      // This fixes a race condition for resizing of the cards using the grid layout
-      if (this._observed) {
-        return;
-      }
-
-      // @ts-ignore
-      const virtualizer = this._virtualizer?._virtualizer;
-
-      if (virtualizer) {
-        this._observed = true;
-        setTimeout(() => virtualizer._observeMutations(), 0);
-      }
     }
   }
 
@@ -496,9 +477,6 @@ export class HaMediaPlayerBrowse extends LitElement {
                       <lit-virtualizer
                         scroller
                         .items=${children}
-                        style=${styleMap({
-                          height: `${children.length * 72 + 26}px`,
-                        })}
                         .renderItem=${this._renderListItem}
                       ></lit-virtualizer>
                       ${currentItem.not_shown
@@ -628,6 +606,7 @@ export class HaMediaPlayerBrowse extends LitElement {
         </div>
         <span class="title">${child.title}</span>
       </mwc-list-item>
+      <li divider role="separator"></li>
     `;
   };
 

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

@@ -119,12 +119,6 @@ class MediaUploadButton extends LitElement {
     ha-circular-progress[slot="icon"] {
       vertical-align: middle;
     }
-
-    ha-svg-icon[slot="icon"] {
-      margin-inline-start: 0px;
-      margin-inline-end: 8px;
-      direction: var(--direction);
-    }
   `;
 }
 

src/components/trace/ha-timeline.ts

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

src/components/trace/ha-trace-logbook.ts

@@ -3,7 +3,7 @@ import { customElement, property } from "lit/decorators";
 import { LogbookEntry } from "../../data/logbook";
 import { HomeAssistant } from "../../types";
 import "./hat-logbook-note";
-import "../../panels/logbook/ha-logbook-renderer";
+import "../../panels/logbook/ha-logbook";
 import { TraceExtended } from "../../data/trace";
 
 @customElement("ha-trace-logbook")
@@ -19,12 +19,12 @@ export class HaTraceLogbook extends LitElement {
   protected render(): TemplateResult {
     return this.logbookEntries.length
       ? html`
-          <ha-logbook-renderer
+          <ha-logbook
             relative-time
             .hass=${this.hass}
             .entries=${this.logbookEntries}
             .narrow=${this.narrow}
-          ></ha-logbook-renderer>
+          ></ha-logbook>
           <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
         `
       : html`<div class="padded-box">

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

@@ -13,7 +13,7 @@ import {
   getDataFromPath,
   TraceExtended,
 } from "../../data/trace";
-import "../../panels/logbook/ha-logbook-renderer";
+import "../../panels/logbook/ha-logbook";
 import { traceTabStyles } from "./trace-tab-styles";
 import { HomeAssistant } from "../../types";
 import type { NodeInfo } from "./hat-script-graph";
@@ -114,11 +114,6 @@ export class HaTracePathDetails extends LitElement {
           const { path, timestamp, result, error, changed_variables, ...rest } =
             trace as any;
 
-          if (result?.enabled === false) {
-            return html`This node was disabled and skipped during execution so
-            no further trace information is available.`;
-          }
-
           return html`
             ${curPath === this.selected.path
               ? ""
@@ -194,7 +189,7 @@ export class HaTracePathDetails extends LitElement {
       // it's the last entry. Find all logbook entries after start.
       const startTime = new Date(startTrace[0].timestamp);
       const idx = this.logbookEntries.findIndex(
-        (entry) => new Date(entry.when * 1000) >= startTime
+        (entry) => new Date(entry.when) >= startTime
       );
       if (idx === -1) {
         entries = [];
@@ -210,7 +205,7 @@ export class HaTracePathDetails extends LitElement {
       entries = [];
 
       for (const entry of this.logbookEntries || []) {
-        const entryDate = new Date(entry.when * 1000);
+        const entryDate = new Date(entry.when);
         if (entryDate >= startTime) {
           if (entryDate < endTime) {
             entries.push(entry);
@@ -224,12 +219,12 @@ export class HaTracePathDetails extends LitElement {
 
     return entries.length
       ? html`
-          <ha-logbook-renderer
+          <ha-logbook
             relative-time
             .hass=${this.hass}
             .entries=${entries}
             .narrow=${this.narrow}
-          ></ha-logbook-renderer>
+          ></ha-logbook>
           <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
         `
       : html`<div class="padded-box">

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

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

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

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

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

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

src/data/application_credential.ts

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

src/data/automation.ts

@@ -65,7 +65,6 @@ export interface BaseTrigger {
   platform: string;
   id?: string;
   variables?: Record<string, unknown>;
-  enabled?: boolean;
 }
 
 export interface StateTrigger extends BaseTrigger {
@@ -157,7 +156,6 @@ export interface CalendarTrigger extends BaseTrigger {
   platform: "calendar";
   event: "start" | "end";
   entity_id: string;
-  offset: string;
 }
 
 export type Trigger =
@@ -180,7 +178,6 @@ export type Trigger =
 interface BaseCondition {
   condition: string;
   alias?: string;
-  enabled?: boolean;
 }
 
 export interface LogicalCondition extends BaseCondition {
@@ -238,10 +235,6 @@ export interface TriggerCondition extends BaseCondition {
 
 type ShorthandBaseCondition = Omit<BaseCondition, "condition">;
 
-export interface ShorthandAndConditionList extends ShorthandBaseCondition {
-  condition: Condition[];
-}
-
 export interface ShorthandAndCondition extends ShorthandBaseCondition {
   and: Condition[];
 }
@@ -267,33 +260,10 @@ export type Condition =
 
 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/cached-history.ts

@@ -1,13 +1,13 @@
+import { HassEntity } from "home-assistant-js-websocket";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
 import {
   computeHistory,
-  HistoryStates,
+  fetchRecent,
   HistoryResult,
   LineChartUnit,
   TimelineEntity,
   entityIdHistoryNeedsAttributes,
-  fetchRecentWS,
 } from "./history";
 
 export interface CacheConfig {
@@ -34,7 +34,7 @@ const RECENT_THRESHOLD = 60000; // 1 minute
 const RECENT_CACHE: { [cacheKey: string]: RecentCacheResults } = {};
 const stateHistoryCache: { [cacheKey: string]: CachedResults } = {};
 
-// Cached type 1 function. Without cache config.
+// Cached type 1 unction. Without cache config.
 export const getRecent = (
   hass: HomeAssistant,
   entityId: string,
@@ -55,7 +55,7 @@ export const getRecent = (
   }
 
   const noAttributes = !entityIdHistoryNeedsAttributes(hass, entityId);
-  const prom = fetchRecentWS(
+  const prom = fetchRecent(
     hass,
     entityId,
     startTime,
@@ -103,14 +103,13 @@ export const getRecentWithCache = (
   language: string
 ) => {
   const cacheKey = cacheConfig.cacheKey;
-  const fullCacheKey = cacheKey + `_${cacheConfig.hoursToShow}`;
   const endTime = new Date();
   const startTime = new Date(endTime);
   startTime.setHours(startTime.getHours() - cacheConfig.hoursToShow);
   let toFetchStartTime = startTime;
   let appendingToCache = false;
 
-  let cache = stateHistoryCache[fullCacheKey];
+  let cache = stateHistoryCache[cacheKey + `_${cacheConfig.hoursToShow}`];
   if (
     cache &&
     toFetchStartTime >= cache.startTime &&
@@ -124,7 +123,7 @@ export const getRecentWithCache = (
       return cache.prom;
     }
   } else {
-    cache = stateHistoryCache[fullCacheKey] = getEmptyCache(
+    cache = stateHistoryCache[cacheKey] = getEmptyCache(
       language,
       startTime,
       endTime
@@ -135,12 +134,12 @@ export const getRecentWithCache = (
   const noAttributes = !entityIdHistoryNeedsAttributes(hass, entityId);
 
   const genProm = async () => {
-    let fetchedHistory: HistoryStates;
+    let fetchedHistory: HassEntity[][];
 
     try {
       const results = await Promise.all([
         curCacheProm,
-        fetchRecentWS(
+        fetchRecent(
           hass,
           entityId,
           toFetchStartTime,
@@ -153,7 +152,7 @@ export const getRecentWithCache = (
       ]);
       fetchedHistory = results[1];
     } catch (err: any) {
-      delete stateHistoryCache[fullCacheKey];
+      delete stateHistoryCache[cacheKey];
       throw err;
     }
     const stateHistory = computeHistory(hass, fetchedHistory, localize);

src/data/device_automation.ts

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

src/data/energy.ts

@@ -1,14 +1,11 @@
 import {
-  addDays,
   addHours,
-  addMilliseconds,
-  addMonths,
   differenceInDays,
   endOfToday,
   endOfYesterday,
   startOfToday,
   startOfYesterday,
-} from "date-fns/esm";
+} from "date-fns";
 import { Collection, getCollection } from "home-assistant-js-websocket";
 import { groupBy } from "../common/util/group-by";
 import { subscribeOne } from "../common/util/subscribe-one";
@@ -17,9 +14,9 @@ import { ConfigEntry, getConfigEntries } from "./config_entries";
 import { subscribeEntityRegistry } from "./entity_registry";
 import {
   fetchStatistics,
-  getStatisticMetadata,
   Statistics,
   StatisticsMetaData,
+  getStatisticMetadata,
 } from "./history";
 
 const energyCollectionKeys: (string | undefined)[] = [];
@@ -235,24 +232,19 @@ export const energySourcesByType = (prefs: EnergyPreferences) =>
 export interface EnergyData {
   start: Date;
   end?: Date;
-  startCompare?: Date;
-  endCompare?: Date;
   prefs: EnergyPreferences;
   info: EnergyInfo;
   stats: Statistics;
-  statsCompare: Statistics;
   co2SignalConfigEntry?: ConfigEntry;
   co2SignalEntity?: string;
   fossilEnergyConsumption?: FossilEnergyConsumption;
-  fossilEnergyConsumptionCompare?: FossilEnergyConsumption;
 }
 
 const getEnergyData = async (
   hass: HomeAssistant,
   prefs: EnergyPreferences,
   start: Date,
-  end?: Date,
-  compare?: boolean
+  end?: Date
 ): Promise<EnergyData> => {
   const [configEntries, entityRegistryEntries, info] = await Promise.all([
     getConfigEntries(hass, { domain: "co2signal" }),
@@ -358,8 +350,6 @@ const getEnergyData = async (
   }
 
   const dayDifference = differenceInDays(end || new Date(), start);
-  const period =
-    dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour";
 
   // Subtract 1 hour from start to get starting point data
   const startMinHour = addHours(start, -1);
@@ -369,34 +359,10 @@ const getEnergyData = async (
     startMinHour,
     end,
     statIDs,
-    period
+    dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour"
   );
 
-  let statsCompare;
-  let startCompare;
-  let endCompare;
-  if (compare) {
-    if (dayDifference > 27 && dayDifference < 32) {
-      // When comparing a month, we want to start at the begining of the month
-      startCompare = addMonths(start, -1);
-    } else {
-      startCompare = addDays(start, (dayDifference + 1) * -1);
-    }
-
-    const compareStartMinHour = addHours(startCompare, -1);
-    endCompare = addMilliseconds(start, -1);
-
-    statsCompare = await fetchStatistics(
-      hass!,
-      compareStartMinHour,
-      endCompare,
-      statIDs,
-      period
-    );
-  }
-
   let fossilEnergyConsumption: FossilEnergyConsumption | undefined;
-  let fossilEnergyConsumptionCompare: FossilEnergyConsumption | undefined;
 
   if (co2SignalEntity !== undefined) {
     fossilEnergyConsumption = await getFossilEnergyConsumption(
@@ -407,16 +373,6 @@ const getEnergyData = async (
       end,
       dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour"
     );
-    if (compare) {
-      fossilEnergyConsumptionCompare = await getFossilEnergyConsumption(
-        hass!,
-        startCompare,
-        consumptionStatIDs,
-        co2SignalEntity,
-        endCompare,
-        dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour"
-      );
-    }
   }
 
   Object.values(stats).forEach((stat) => {
@@ -432,19 +388,15 @@ const getEnergyData = async (
     }
   });
 
-  const data: EnergyData = {
+  const data = {
     start,
     end,
-    startCompare,
-    endCompare,
     info,
     prefs,
     stats,
-    statsCompare,
     co2SignalConfigEntry,
     co2SignalEntity,
     fossilEnergyConsumption,
-    fossilEnergyConsumptionCompare,
   };
 
   return data;
@@ -453,11 +405,9 @@ const getEnergyData = async (
 export interface EnergyCollection extends Collection<EnergyData> {
   start: Date;
   end?: Date;
-  compare?: boolean;
   prefs?: EnergyPreferences;
   clearPrefs(): void;
   setPeriod(newStart: Date, newEnd?: Date): void;
-  setCompare(compare: boolean): void;
   _refreshTimeout?: number;
   _updatePeriodTimeout?: number;
   _active: number;
@@ -528,8 +478,7 @@ export const getEnergyDataCollection = (
         hass,
         collection.prefs,
         collection.start,
-        collection.end,
-        collection.compare
+        collection.end
       );
     }
   ) as EnergyCollection;
@@ -585,9 +534,6 @@ export const getEnergyDataCollection = (
       collection._updatePeriodTimeout = undefined;
     }
   };
-  collection.setCompare = (compare: boolean) => {
-    collection.compare = compare;
-  };
   return collection;
 };
 

src/data/hardware.ts

@@ -1,39 +0,0 @@
-// Keep in sync with https://github.com/home-assistant/analytics.home-assistant.io/blob/dev/site/src/analytics-os-boards.ts#L6-L24
-export const BOARD_NAMES: Record<string, string> = {
-  "odroid-n2": "Home Assistant Blue / ODROID-N2",
-  "odroid-xu4": "ODROID-XU4",
-  "odroid-c2": "ODROID-C2",
-  "odroid-c4": "ODROID-C4",
-  rpi: "Raspberry Pi",
-  rpi0: "Raspberry Pi Zero",
-  "rpi0-w": "Raspberry Pi Zero W",
-  rpi2: "Raspberry Pi 2",
-  rpi3: "Raspberry Pi 3 (32-bit)",
-  "rpi3-64": "Raspberry Pi 3",
-  rpi4: "Raspberry Pi 4 (32-bit)",
-  "rpi4-64": "Raspberry Pi 4",
-  tinker: "ASUS Tinker Board",
-  "khadas-vim3": "Khadas VIM3",
-  "generic-aarch64": "Generic AArch64",
-  ova: "Virtual Machine",
-  "generic-x86-64": "Generic x86-64",
-  "intel-nuc": "Intel NUC",
-  yellow: "Home Assistant Yellow",
-};
-
-export interface HardwareInfo {
-  hardware: HardwareInfoEntry[];
-}
-
-export interface HardwareInfoEntry {
-  board: HardwareInfoBoardInfo;
-  name: string;
-  url?: string;
-}
-
-export interface HardwareInfoBoardInfo {
-  manufacturer: string;
-  model?: string;
-  revision?: string;
-  hassio_board_id?: 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 } from "./addon";
+import { HassioAddonInfo, HassioAddonRepository } from "./addon";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
 export type HassioHomeAssistantInfo = {
@@ -23,7 +23,7 @@ export type HassioHomeAssistantInfo = {
 
 export type HassioSupervisorInfo = {
   addons: HassioAddonInfo[];
-  addons_repositories: string[];
+  addons_repositories: HassioAddonRepository[];
   arch: SupervisorArch;
   channel: string;
   debug: boolean;
@@ -179,10 +179,7 @@ export const fetchHassioInfo = async (
 };
 
 export const fetchHassioLogs = async (hass: HomeAssistant, provider: string) =>
-  hass.callApi<string>(
-    "GET",
-    `hassio/${provider.includes("_") ? `addons/${provider}` : provider}/logs`
-  );
+  hass.callApi<string>("GET", `hassio/${provider}/logs`);
 
 export const setSupervisorOption = async (
   hass: HomeAssistant,

src/data/history.ts

@@ -1,7 +1,8 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
-import { computeStateDisplayFromEntityAttributes } from "../common/entity/compute_state_display";
-import { computeStateNameFromEntityAttributes } from "../common/entity/compute_state_name";
+import { computeStateDisplay } from "../common/entity/compute_state_display";
+import { computeStateDomain } from "../common/entity/compute_state_domain";
+import { computeStateName } from "../common/entity/compute_state_name";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
 import { FrontendLocaleData } from "./translation";
@@ -26,7 +27,7 @@ const LINE_ATTRIBUTES_TO_KEEP = [
 
 export interface LineChartState {
   state: string;
-  last_changed: number;
+  last_changed: string;
   attributes?: Record<string, any>;
 }
 
@@ -46,7 +47,7 @@ export interface LineChartUnit {
 export interface TimelineState {
   state_localize: string;
   state: string;
-  last_changed: number;
+  last_changed: string;
 }
 
 export interface TimelineEntity {
@@ -140,21 +141,6 @@ export interface StatisticsValidationResults {
   [statisticId: string]: StatisticsValidationResult[];
 }
 
-export interface HistoryStates {
-  [entityId: string]: EntityHistoryState[];
-}
-
-interface EntityHistoryState {
-  /** state */
-  s: string;
-  /** attributes */
-  a: { [key: string]: any };
-  /** last_changed; if set, also applies to lu */
-  lc: number;
-  /** last_updated */
-  lu: number;
-}
-
 export const entityIdHistoryNeedsAttributes = (
   hass: HomeAssistant,
   entityId: string
@@ -195,27 +181,6 @@ export const fetchRecent = (
   return hass.callApi("GET", url);
 };
 
-export const fetchRecentWS = (
-  hass: HomeAssistant,
-  entityId: string, // This may be CSV
-  startTime: Date,
-  endTime: Date,
-  skipInitialState = false,
-  significantChangesOnly?: boolean,
-  minimalResponse = true,
-  noAttributes?: boolean
-) =>
-  hass.callWS<HistoryStates>({
-    type: "history/history_during_period",
-    start_time: startTime.toISOString(),
-    end_time: endTime.toISOString(),
-    significant_changes_only: significantChangesOnly || false,
-    include_start_time_state: !skipInitialState,
-    minimal_response: minimalResponse,
-    no_attributes: noAttributes || false,
-    entity_ids: entityId.split(","),
-  });
-
 export const fetchDate = (
   hass: HomeAssistant,
   startTime: Date,
@@ -233,27 +198,6 @@ export const fetchDate = (
     }`
   );
 
-export const fetchDateWS = (
-  hass: HomeAssistant,
-  startTime: Date,
-  endTime: Date,
-  entityId?: string
-) => {
-  const params = {
-    type: "history/history_during_period",
-    start_time: startTime.toISOString(),
-    end_time: endTime.toISOString(),
-    minimal_response: true,
-    no_attributes: !!(
-      entityId && !entityIdHistoryNeedsAttributes(hass, entityId)
-    ),
-  };
-  if (entityId) {
-    return hass.callWS<HistoryStates>({ ...params, entity_ids: [entityId] });
-  }
-  return hass.callWS<HistoryStates>(params);
-};
-
 const equalState = (obj1: LineChartState, obj2: LineChartState) =>
   obj1.state === obj2.state &&
   // Only compare attributes if both states have an attributes object.
@@ -268,47 +212,46 @@ const equalState = (obj1: LineChartState, obj2: LineChartState) =>
 const processTimelineEntity = (
   localize: LocalizeFunc,
   language: FrontendLocaleData,
-  entityId: string,
-  states: EntityHistoryState[]
+  states: HassEntity[]
 ): TimelineEntity => {
   const data: TimelineState[] = [];
-  const first: EntityHistoryState = states[0];
+  const last_element = states.length - 1;
+
   for (const state of states) {
-    if (data.length > 0 && state.s === data[data.length - 1].state) {
+    if (data.length > 0 && state.state === data[data.length - 1].state) {
       continue;
     }
+
+    // Copy the data from the last element as its the newest
+    // and is only needed to localize the data
+    if (!state.entity_id) {
+      state.attributes = states[last_element].attributes;
+      state.entity_id = states[last_element].entity_id;
+    }
+
     data.push({
-      state_localize: computeStateDisplayFromEntityAttributes(
-        localize,
-        language,
-        entityId,
-        state.a || first.a,
-        state.s
-      ),
-      state: state.s,
-      // lc (last_changed) may be omitted if its the same
-      // as lu (last_updated).
-      last_changed: (state.lc ? state.lc : state.lu) * 1000,
+      state_localize: computeStateDisplay(localize, state, language),
+      state: state.state,
+      last_changed: state.last_changed,
     });
   }
 
   return {
-    name: computeStateNameFromEntityAttributes(entityId, states[0].a),
-    entity_id: entityId,
+    name: computeStateName(states[0]),
+    entity_id: states[0].entity_id,
     data,
   };
 };
 
 const processLineChartEntities = (
   unit,
-  entities: HistoryStates
+  entities: HassEntity[][]
 ): LineChartUnit => {
   const data: LineChartEntity[] = [];
 
-  Object.keys(entities).forEach((entityId) => {
-    const states = entities[entityId];
-    const first: EntityHistoryState = states[0];
-    const domain = computeDomain(entityId);
+  for (const states of entities) {
+    const last: HassEntity = states[states.length - 1];
+    const domain = computeStateDomain(last);
     const processedStates: LineChartState[] = [];
 
     for (const state of states) {
@@ -316,24 +259,18 @@ const processLineChartEntities = (
 
       if (DOMAINS_USE_LAST_UPDATED.includes(domain)) {
         processedState = {
-          state: state.s,
-          last_changed: state.lu * 1000,
+          state: state.state,
+          last_changed: state.last_updated,
           attributes: {},
         };
 
         for (const attr of LINE_ATTRIBUTES_TO_KEEP) {
-          if (attr in state.a) {
-            processedState.attributes![attr] = state.a[attr];
+          if (attr in state.attributes) {
+            processedState.attributes![attr] = state.attributes[attr];
           }
         }
       } else {
-        processedState = {
-          state: state.s,
-          // lc (last_changed) may be omitted if its the same
-          // as lu (last_updated).
-          last_changed: (state.lc ? state.lc : state.lu) * 1000,
-          attributes: {},
-        };
+        processedState = state;
       }
 
       if (
@@ -352,53 +289,52 @@ const processLineChartEntities = (
 
     data.push({
       domain,
-      name: computeStateNameFromEntityAttributes(entityId, first.a),
-      entity_id: entityId,
+      name: computeStateName(last),
+      entity_id: last.entity_id,
       states: processedStates,
     });
-  });
+  }
 
   return {
     unit,
-    identifier: Object.keys(entities).join(""),
+    identifier: entities.map((states) => states[0].entity_id).join(""),
     data,
   };
 };
 
 const stateUsesUnits = (state: HassEntity) =>
-  attributesHaveUnits(state.attributes);
-
-const attributesHaveUnits = (attributes: { [key: string]: any }) =>
-  "unit_of_measurement" in attributes || "state_class" in attributes;
+  "unit_of_measurement" in state.attributes ||
+  "state_class" in state.attributes;
 
 export const computeHistory = (
   hass: HomeAssistant,
-  stateHistory: HistoryStates,
+  stateHistory: HassEntity[][],
   localize: LocalizeFunc
 ): HistoryResult => {
-  const lineChartDevices: { [unit: string]: HistoryStates } = {};
+  const lineChartDevices: { [unit: string]: HassEntity[][] } = {};
   const timelineDevices: TimelineEntity[] = [];
   if (!stateHistory) {
     return { line: [], timeline: [] };
   }
-  Object.keys(stateHistory).forEach((entityId) => {
-    const stateInfo = stateHistory[entityId];
+
+  stateHistory.forEach((stateInfo) => {
     if (stateInfo.length === 0) {
       return;
     }
 
+    const entityId = stateInfo[0].entity_id;
     const currentState =
       entityId in hass.states ? hass.states[entityId] : undefined;
     const stateWithUnitorStateClass =
       !currentState &&
-      stateInfo.find((state) => state.a && attributesHaveUnits(state.a));
+      stateInfo.find((state) => state.attributes && stateUsesUnits(state));
 
     let unit: string | undefined;
 
     if (currentState && stateUsesUnits(currentState)) {
       unit = currentState.attributes.unit_of_measurement || " ";
     } else if (stateWithUnitorStateClass) {
-      unit = stateWithUnitorStateClass.a.unit_of_measurement || " ";
+      unit = stateWithUnitorStateClass.attributes.unit_of_measurement || " ";
     } else {
       unit = {
         climate: hass.config.unit_system.temperature,
@@ -412,15 +348,12 @@ export const computeHistory = (
 
     if (!unit) {
       timelineDevices.push(
-        processTimelineEntity(localize, hass.locale, entityId, stateInfo)
+        processTimelineEntity(localize, hass.locale, stateInfo)
       );
-    } else if (unit in lineChartDevices && entityId in lineChartDevices[unit]) {
-      lineChartDevices[unit][entityId].push(...stateInfo);
+    } else if (unit in lineChartDevices) {
+      lineChartDevices[unit].push(stateInfo);
     } else {
-      if (!(unit in lineChartDevices)) {
-        lineChartDevices[unit] = {};
-      }
-      lineChartDevices[unit][entityId] = stateInfo;
+      lineChartDevices[unit] = [stateInfo];
     }
   });
 

src/data/integration.ts

@@ -42,18 +42,8 @@ export const domainToName = (
   manifest?: IntegrationManifest
 ) => localize(`component.${domain}.title`) || manifest?.name || domain;
 
-export const fetchIntegrationManifests = (
-  hass: HomeAssistant,
-  integrations?: string[]
-) => {
-  const params: any = {
-    type: "manifest/list",
-  };
-  if (integrations) {
-    params.integrations = integrations;
-  }
-  return hass.callWS<IntegrationManifest[]>(params);
-};
+export const fetchIntegrationManifests = (hass: HomeAssistant) =>
+  hass.callWS<IntegrationManifest[]>({ type: "manifest/list" });
 
 export const fetchIntegrationManifest = (
   hass: HomeAssistant,

src/data/logbook.ts

@@ -1,9 +1,5 @@
-import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  BINARY_STATE_OFF,
-  BINARY_STATE_ON,
-  DOMAINS_WITH_DYNAMIC_PICTURE,
-} from "../common/const";
+import { HassEntity } from "home-assistant-js-websocket";
+import { BINARY_STATE_OFF, BINARY_STATE_ON } from "../common/const";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDisplay } from "../common/entity/compute_state_display";
 import { LocalizeFunc } from "../common/translations/localize";
@@ -13,51 +9,25 @@ import { UNAVAILABLE_STATES } from "./entity";
 const LOGBOOK_LOCALIZE_PATH = "ui.components.logbook.messages";
 export const CONTINUOUS_DOMAINS = ["proximity", "sensor"];
 
-export interface LogbookStreamMessage {
-  events: LogbookEntry[];
-  start_time?: number; // Start time of this historical chunk
-  end_time?: number; // End time of this historical chunk
-  partial?: boolean; // Indiciates more historical chunks are coming
-}
-
 export interface LogbookEntry {
-  // Base data
-  when: number; // Python timestamp. Do *1000 to get JS timestamp.
+  when: string;
   name: string;
   message?: string;
   entity_id?: string;
   icon?: string;
-  source?: string; // The trigger source
+  source?: string;
   domain?: string;
-  state?: string; // The state of the entity
-  // Context data
   context_id?: string;
   context_user_id?: string;
   context_event_type?: string;
   context_domain?: string;
-  context_service?: string; // Service calls only
+  context_service?: string;
   context_entity_id?: string;
-  context_entity_id_name?: string; // Legacy, not longer sent
+  context_entity_id_name?: string;
   context_name?: string;
-  context_state?: string; // The state of the entity
-  context_source?: string; // The trigger source
-  context_message?: string;
+  state?: string;
 }
 
-//
-// Localization mapping for all the triggers in core
-// in homeassistant.components.homeassistant.triggers
-//
-const triggerPhrases = {
-  "numeric state of": "triggered_by_numeric_state_of", // number state trigger
-  "state of": "triggered_by_state_of", // state trigger
-  event: "triggered_by_event", // event trigger
-  time: "triggered_by_time", // time trigger
-  "time pattern": "triggered_by_time_pattern", // time trigger
-  "Home Assistant stopping": "triggered_by_homeassistant_stopping", // stop event
-  "Home Assistant starting": "triggered_by_homeassistant_starting", // start event
-};
-
 const DATA_CACHE: {
   [cacheKey: string]: { [entityId: string]: Promise<LogbookEntry[]> };
 } = {};
@@ -67,13 +37,18 @@ export const getLogbookDataForContext = async (
   startDate: string,
   contextId?: string
 ): Promise<LogbookEntry[]> => {
-  await hass.loadBackendTranslation("device_class");
-  return getLogbookDataFromServer(
+  const localize = await hass.loadBackendTranslation("device_class");
+  return addLogbookMessage(
     hass,
-    startDate,
-    undefined,
-    undefined,
-    contextId
+    localize,
+    await getLogbookDataFromServer(
+      hass,
+      startDate,
+      undefined,
+      undefined,
+      undefined,
+      contextId
+    )
   );
 };
 
@@ -81,123 +56,107 @@ export const getLogbookData = async (
   hass: HomeAssistant,
   startDate: string,
   endDate: string,
-  entityIds?: string[],
-  deviceIds?: string[]
+  entityId?: string,
+  entity_matches_only?: boolean
 ): Promise<LogbookEntry[]> => {
-  await hass.loadBackendTranslation("device_class");
-  return deviceIds?.length
-    ? getLogbookDataFromServer(
-        hass,
-        startDate,
-        endDate,
-        entityIds,
-        undefined,
-        deviceIds
-      )
-    : getLogbookDataCache(hass, startDate, endDate, entityIds);
+  const localize = await hass.loadBackendTranslation("device_class");
+  return addLogbookMessage(
+    hass,
+    localize,
+    await getLogbookDataCache(
+      hass,
+      startDate,
+      endDate,
+      entityId,
+      entity_matches_only
+    )
+  );
 };
 
-const getLogbookDataCache = async (
+export const addLogbookMessage = (
+  hass: HomeAssistant,
+  localize: LocalizeFunc,
+  logbookData: LogbookEntry[]
+): LogbookEntry[] => {
+  for (const entry of logbookData) {
+    const stateObj = hass!.states[entry.entity_id!];
+    if (entry.state && stateObj) {
+      entry.message = getLogbookMessage(
+        hass,
+        localize,
+        entry.state,
+        stateObj,
+        computeDomain(entry.entity_id!)
+      );
+    }
+  }
+  return logbookData;
+};
+
+export const getLogbookDataCache = async (
   hass: HomeAssistant,
   startDate: string,
   endDate: string,
-  entityId?: string[]
+  entityId?: string,
+  entity_matches_only?: boolean
 ) => {
   const ALL_ENTITIES = "*";
 
-  const entityIdKey = entityId ? entityId.toString() : ALL_ENTITIES;
+  if (!entityId) {
+    entityId = ALL_ENTITIES;
+  }
+
   const cacheKey = `${startDate}${endDate}`;
 
   if (!DATA_CACHE[cacheKey]) {
     DATA_CACHE[cacheKey] = {};
   }
 
-  if (entityIdKey in DATA_CACHE[cacheKey]) {
-    return DATA_CACHE[cacheKey][entityIdKey];
+  if (entityId in DATA_CACHE[cacheKey]) {
+    return DATA_CACHE[cacheKey][entityId];
   }
 
-  if (entityId && DATA_CACHE[cacheKey][ALL_ENTITIES]) {
+  if (entityId !== ALL_ENTITIES && DATA_CACHE[cacheKey][ALL_ENTITIES]) {
     const entities = await DATA_CACHE[cacheKey][ALL_ENTITIES];
-    return entities.filter(
-      (entity) => entity.entity_id && entityId.includes(entity.entity_id)
-    );
+    return entities.filter((entity) => entity.entity_id === entityId);
   }
 
-  DATA_CACHE[cacheKey][entityIdKey] = getLogbookDataFromServer(
+  DATA_CACHE[cacheKey][entityId] = getLogbookDataFromServer(
     hass,
     startDate,
     endDate,
-    entityId
-  );
-  return DATA_CACHE[cacheKey][entityIdKey];
+    entityId !== ALL_ENTITIES ? entityId : undefined,
+    entity_matches_only
+  ).then((entries) => entries.reverse());
+  return DATA_CACHE[cacheKey][entityId];
 };
 
-const getLogbookDataFromServer = (
+const getLogbookDataFromServer = async (
   hass: HomeAssistant,
   startDate: string,
   endDate?: string,
-  entityIds?: string[],
-  contextId?: string,
-  deviceIds?: string[]
-): Promise<LogbookEntry[]> => {
-  // If all specified filters are empty lists, we can return an empty list.
-  if (
-    (entityIds || deviceIds) &&
-    (!entityIds || entityIds.length === 0) &&
-    (!deviceIds || deviceIds.length === 0)
-  ) {
-    return Promise.resolve([]);
-  }
+  entityId?: string,
+  entitymatchesOnly?: boolean,
+  contextId?: string
+) => {
+  const params = new URLSearchParams();
 
-  const params: any = {
-    type: "logbook/get_events",
-    start_time: startDate,
-  };
   if (endDate) {
-    params.end_time = endDate;
+    params.append("end_time", endDate);
   }
-  if (entityIds?.length) {
-    params.entity_ids = entityIds;
+  if (entityId) {
+    params.append("entity", entityId);
   }
-  if (deviceIds?.length) {
-    params.device_ids = deviceIds;
+  if (entitymatchesOnly) {
+    params.append("entity_matches_only", "");
   }
   if (contextId) {
-    params.context_id = contextId;
+    params.append("context_id", contextId);
   }
-  return hass.callWS<LogbookEntry[]>(params);
-};
 
-export const subscribeLogbook = (
-  hass: HomeAssistant,
-  callbackFunction: (message: LogbookStreamMessage) => void,
-  startDate: string,
-  endDate: string,
-  entityIds?: string[],
-  deviceIds?: string[]
-): Promise<UnsubscribeFunc> => {
-  // If all specified filters are empty lists, we can return an empty list.
-  if (
-    (entityIds || deviceIds) &&
-    (!entityIds || entityIds.length === 0) &&
-    (!deviceIds || deviceIds.length === 0)
-  ) {
-    return Promise.reject("No entities or devices");
-  }
-  const params: any = {
-    type: "logbook/event_stream",
-    start_time: startDate,
-    end_time: endDate,
-  };
-  if (entityIds?.length) {
-    params.entity_ids = entityIds;
-  }
-  if (deviceIds?.length) {
-    params.device_ids = deviceIds;
-  }
-  return hass.connection.subscribeMessage<LogbookStreamMessage>(
-    (message) => callbackFunction(message),
-    params
+  return hass.callApi<LogbookEntry[]>(
+    "GET",
+    `logbook/${startDate}?${params.toString()}`
   );
 };
 
@@ -205,49 +164,7 @@ export const clearLogbookCache = (startDate: string, endDate: string) => {
   DATA_CACHE[`${startDate}${endDate}`] = {};
 };
 
-export const createHistoricState = (
-  currentStateObj: HassEntity,
-  state?: string
-): HassEntity => <HassEntity>(<unknown>{
-    entity_id: currentStateObj.entity_id,
-    state: state,
-    attributes: {
-      // Rebuild the historical state by copying static attributes only
-      device_class: currentStateObj?.attributes.device_class,
-      source_type: currentStateObj?.attributes.source_type,
-      has_date: currentStateObj?.attributes.has_date,
-      has_time: currentStateObj?.attributes.has_time,
-      // We do not want to use dynamic entity pictures (e.g., from media player) for the log book rendering,
-      // as they would present a false state in the log (played media right now vs actual historic data).
-      entity_picture_local: DOMAINS_WITH_DYNAMIC_PICTURE.has(
-        computeDomain(currentStateObj.entity_id)
-      )
-        ? undefined
-        : currentStateObj?.attributes.entity_picture_local,
-      entity_picture: DOMAINS_WITH_DYNAMIC_PICTURE.has(
-        computeDomain(currentStateObj.entity_id)
-      )
-        ? undefined
-        : currentStateObj?.attributes.entity_picture,
-    },
-  });
-
-export const localizeTriggerSource = (
-  localize: LocalizeFunc,
-  source: string
-) => {
-  for (const triggerPhrase in triggerPhrases) {
-    if (source.startsWith(triggerPhrase)) {
-      return source.replace(
-        triggerPhrase,
-        `${localize(`ui.components.logbook.${triggerPhrases[triggerPhrase]}`)}`
-      );
-    }
-  }
-  return source;
-};
-
-export const localizeStateMessage = (
+export const getLogbookMessage = (
   hass: HomeAssistant,
   localize: LocalizeFunc,
   state: string,

src/data/lovelace.ts

@@ -131,9 +131,9 @@ export interface CallServiceActionConfig extends BaseActionConfig {
   action: "call-service";
   service: string;
   target?: HassServiceTarget;
-  // "service_data" is kept for backwards compatibility. Replaced by "data".
-  service_data?: Record<string, unknown>;
-  data?: Record<string, unknown>;
+  service_data?: {
+    [key: string]: any;
+  };
 }
 
 export interface NavigateActionConfig extends BaseActionConfig {

src/data/scene.ts

@@ -47,17 +47,12 @@ export interface SceneConfig {
   name: string;
   icon?: string;
   entities: SceneEntities;
-  metadata?: SceneMetaData;
 }
 
 export interface SceneEntities {
   [entityId: string]: string | { state: string; [key: string]: any };
 }
 
-export interface SceneMetaData {
-  [entityId: string]: { entity_only?: boolean | undefined };
-}
-
 export const activateScene = (
   hass: HomeAssistant,
   entityId: string

src/data/script.ts

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

src/data/script_i18n.ts

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

src/data/trace.ts

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

src/data/translation.ts

@@ -52,7 +52,7 @@ export const getHassTranslations = async (
   hass: HomeAssistant,
   language: string,
   category: TranslationCategory,
-  integration?: string | string[],
+  integration?: string,
   config_flow?: boolean
 ): Promise<Record<string, unknown>> => {
   const result = await hass.callWS<{ resources: Record<string, unknown> }>({

src/data/update.ts

@@ -2,15 +2,10 @@ import type {
   HassEntities,
   HassEntityAttributeBase,
   HassEntityBase,
-  HassEvent,
 } from "home-assistant-js-websocket";
 import { BINARY_STATE_ON } from "../common/const";
-import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
-import {
-  supportsFeature,
-  supportsFeatureFromAttributes,
-} from "../common/entity/supports-feature";
+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";
@@ -38,13 +33,8 @@ export interface UpdateEntity extends HassEntityBase {
 }
 
 export const updateUsesProgress = (entity: UpdateEntity): boolean =>
-  updateUsesProgressFromAttributes(entity.attributes);
-
-export const updateUsesProgressFromAttributes = (attributes: {
-  [key: string]: any;
-}): boolean =>
-  supportsFeatureFromAttributes(attributes, UPDATE_SUPPORT_PROGRESS) &&
-  typeof attributes.in_progress === "number";
+  supportsFeature(entity, UPDATE_SUPPORT_PROGRESS) &&
+  typeof entity.attributes.in_progress === "number";
 
 export const updateCanInstall = (
   entity: UpdateEntity,
@@ -57,11 +47,6 @@ export const updateCanInstall = (
 export const updateIsInstalling = (entity: UpdateEntity): boolean =>
   updateUsesProgress(entity) || !!entity.attributes.in_progress;
 
-export const updateIsInstallingFromAttributes = (attributes: {
-  [key: string]: any;
-}): boolean =>
-  updateUsesProgressFromAttributes(attributes) || !!attributes.in_progress;
-
 export const updateReleaseNotes = (hass: HomeAssistant, entityId: string) =>
   hass.callWS<string | null>({
     type: "update/release_notes",
@@ -125,32 +110,15 @@ export const checkForEntityUpdates = async (
     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) {
+  if (filterUpdateEntitiesWithInstall(hass.states).length) {
+    showToast(element, {
+      message: hass.localize("ui.panel.config.updates.updates_refreshed"),
+    });
+  } else {
     showToast(element, {
       message: hass.localize("ui.panel.config.updates.no_new_updates"),
     });