20240710.0 (#21350)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.devcontainer/devcontainer.json

@@ -8,6 +8,7 @@
   "postCreateCommand": "sudo apt update && sudo apt upgrade -y && sudo apt install -y libpcap-dev",
   "postStartCommand": "script/bootstrap",
   "containerEnv": {
+    "DEV_CONTAINER": "1",
     "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
   },
   "customizations": {

.github/workflows/ci.yaml

@@ -89,7 +89,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.3.3
+        uses: actions/upload-artifact@v4.3.4
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
@@ -113,7 +113,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@v4.3.3
+        uses: actions/upload-artifact@v4.3.4
         with:
           name: supervisor-bundle-stats
           path: build/stats/*.json

.github/workflows/nightly.yaml

@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@v4.3.3
+        uses: actions/upload-artifact@v4.3.4
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@v4.3.3
+        uses: actions/upload-artifact@v4.3.4
         with:
           name: translations
           path: translations.tar.gz

build-scripts/env.cjs

@@ -32,4 +32,7 @@ module.exports = {
     }
     return version[1];
   },
+  isDevContainer() {
+    return process.env.DEV_CONTAINER === "1";
+  },
 };

build-scripts/gulp/translations.js

@@ -244,11 +244,11 @@ const createTranslations = async () => {
   // TODO: This is a naive interpretation of BCP47 that should be improved.
   //       Will be OK for now as long as we don't have anything more complicated
   // than a base translation + region.
-  gulp
+  const masterStream = gulp
     .src(`${workDir}/en.json`)
-    .pipe(new PassThrough({ objectMode: true }))
-    .pipe(hashStream, { end: false });
-  const mergesFinished = [];
+    .pipe(new PassThrough({ objectMode: true }));
+  masterStream.pipe(hashStream, { end: false });
+  const mergesFinished = [finished(masterStream)];
   for (const translationFile of translationFiles) {
     const locale = basename(translationFile, ".json");
     const subtags = locale.split("-");

build-scripts/gulp/webpack.js

@@ -40,8 +40,12 @@ const runDevServer = async ({
   compiler,
   contentBase,
   port,
-  listenHost = "localhost",
+  listenHost = undefined,
 }) => {
+  if (listenHost === undefined) {
+    // For dev container, we need to listen on all hosts
+    listenHost = env.isDevContainer() ? "0.0.0.0" : "localhost";
+  }
   const server = new WebpackDevServer(
     {
       hot: false,

build-scripts/webpack.cjs

@@ -74,6 +74,9 @@ const createWebpackConfig = ({
           resolve: {
             fullySpecified: false,
           },
+          parser: {
+            worker: ["*context.audioWorklet.addModule()", "..."],
+          },
         },
         {
           test: /\.css$/,
@@ -92,11 +95,15 @@ const createWebpackConfig = ({
       moduleIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
       chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
       splitChunks: {
-        // Disable splitting for web workers with ESM output
-        // Imports of external chunks are broken
-        chunks: latestBuild
-          ? (chunk) => !chunk.canBeInitial() && !/^.+-worker$/.test(chunk.name)
-          : undefined,
+        // Disable splitting for web workers and worklets because imports of
+        // external chunks are broken for:
+        // - ESM output: https://github.com/webpack/webpack/issues/17014
+        // - Worklets use `importScripts`: https://github.com/webpack/webpack/issues/11543
+        chunks: (chunk) =>
+          !chunk.canBeInitial() &&
+          !new RegExp(`^.+-work${latestBuild ? "(?:let|er)" : "let"}$`).test(
+            chunk.name
+          ),
       },
     },
     plugins: [

cast/src/html/faq.html.template

@@ -232,17 +232,5 @@ http:
         </p>
       </div>
     </hc-layout>
-
-    <script>
-      var _gaq = [["_setAccount", "UA-57927901-9"], ["_trackPageview"]];
-      (function (d, t) {
-        var g = d.createElement(t),
-          s = d.getElementsByTagName(t)[0];
-        g.src =
-          ("https:" == location.protocol ? "//ssl" : "//www") +
-          ".google-analytics.com/ga.js";
-        s.parentNode.insertBefore(g, s);
-      })(document, "script");
-    </script>
   </body>
 </html>

cast/src/html/media.html.template

@@ -14,12 +14,6 @@
         --background-color: #41bdf5;
       }
     </style>
-    <script>
-      var _gaq=[['_setAccount','UA-57927901-10'],['_trackPageview']];
-      (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
-      g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
-      s.parentNode.insertBefore(g,s)}(document,'script'));
-    </script>
   </head>
   <body>
     <%= renderTemplate("../../../src/html/_js_base.html.template") %>

cast/src/html/receiver.html.template

@@ -11,10 +11,4 @@
       font-size: initial;
     }
   </style>
-  <script>
-  var _gaq=[['_setAccount','UA-57927901-10'],['_trackPageview']];
-  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
-  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
-  s.parentNode.insertBefore(g,s)}(document,'script'));
-  </script>
 </html>

cast/src/launcher/entrypoint.ts

@@ -1,4 +1,3 @@
-import "../../../src/resources/safari-14-attachshadow-patch";
 import "./layout/hc-connect";
 
 import("../../../src/resources/ha-style");

demo/src/configs/sections/entities.ts

@@ -1,7 +1,7 @@
 import { convertEntities } from "../../../../src/fake_data/entity";
 import { DemoConfig } from "../types";
 
-export const demoEntitiesSections: DemoConfig["entities"] = () =>
+export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
   convertEntities({
     "cover.living_room_garden_shutter": {
       entity_id: "cover.living_room_garden_shutter",
@@ -113,11 +113,30 @@ export const demoEntitiesSections: DemoConfig["entities"] = () =>
     },
     "media_player.living_room_nest_mini": {
       entity_id: "media_player.living_room_nest_mini",
-      state: "off",
+      state: "on",
       attributes: {
         device_class: "speaker",
-        friendly_name: "Living room Nest Mini",
-        supported_features: 152461,
+        volume_level: 0.18,
+        is_volume_muted: false,
+        media_content_type: "music",
+        media_duration: 300,
+        media_position: 0,
+        media_position_updated_at: new Date(
+          // 23 seconds in
+          new Date().getTime() - 23000
+        ).toISOString(),
+        media_title: "I Wasn't Born To Follow",
+        media_artist: "The Byrds",
+        media_album_name: "The Notorious Byrd Brothers",
+        source_list: ["It's A Party", "Radio HSL", "Retro 70s and 80s"],
+        shuffle: false,
+        night_sound: false,
+        speech_enhance: false,
+        friendly_name: localize(
+          "ui.panel.page-demo.config.sections.entities.media_player.living_room_nest_mini"
+        ),
+        entity_picture: "/assets/sections/images/media_player_family_room.jpg",
+        supported_features: 64063,
       },
     },
     "cover.kitchen_shutter": {
@@ -168,8 +187,27 @@ export const demoEntitiesSections: DemoConfig["entities"] = () =>
       state: "on",
       attributes: {
         device_class: "speaker",
-        friendly_name: "Kitchen Nest Audio",
-        supported_features: 152461,
+        volume_level: 0.18,
+        is_volume_muted: false,
+        media_content_type: "music",
+        media_duration: 300,
+        media_position: 0,
+        media_position_updated_at: new Date(
+          // 23 seconds in
+          new Date().getTime() - 23000
+        ).toISOString(),
+        media_title: "I Wasn't Born To Follow",
+        media_artist: "The Byrds",
+        media_album_name: "The Notorious Byrd Brothers",
+        source_list: ["It's A Party", "Radio HSL", "Retro 70s and 80s"],
+        shuffle: false,
+        night_sound: false,
+        speech_enhance: false,
+        friendly_name: localize(
+          "ui.panel.page-demo.config.sections.entities.media_player.kitchen_nest_audio"
+        ),
+        entity_picture: "/assets/sections/images/media_player_family_room.jpg",
+        supported_features: 64063,
       },
     },
     "binary_sensor.tesla_wall_connector_vehicle_connected": {
@@ -333,8 +371,28 @@ export const demoEntitiesSections: DemoConfig["entities"] = () =>
       entity_id: "media_player.study_nest_hub",
       state: "off",
       attributes: {
-        friendly_name: "Study Nest Hub",
-        supported_features: 152461,
+        device_class: "speaker",
+        volume_level: 0.18,
+        is_volume_muted: false,
+        media_content_type: "music",
+        media_duration: 300,
+        media_position: 0,
+        media_position_updated_at: new Date(
+          // 23 seconds in
+          new Date().getTime() - 23000
+        ).toISOString(),
+        media_title: "I Wasn't Born To Follow",
+        media_artist: "The Byrds",
+        media_album_name: "The Notorious Byrd Brothers",
+        source_list: ["It's A Party", "Radio HSL", "Retro 70s and 80s"],
+        shuffle: false,
+        night_sound: false,
+        speech_enhance: false,
+        friendly_name: localize(
+          "ui.panel.page-demo.config.sections.entities.media_player.study_nest_hub"
+        ),
+        entity_picture: "/assets/sections/images/media_player_family_room.jpg",
+        supported_features: 64063,
       },
     },
     "sensor.standing_desk_height": {

demo/src/configs/sections/lovelace.ts

@@ -1,40 +1,25 @@
+import { isFrontpageEmbed } from "../../util/is_frontpage";
 import { DemoConfig } from "../types";
 
-export const demoLovelaceSections: DemoConfig["lovelace"] = () => ({
+export const demoLovelaceSections: DemoConfig["lovelace"] = (localize) => ({
   title: "Home Assistant Demo",
   views: [
     {
       type: "sections",
-      title: "Demo",
+      title: isFrontpageEmbed ? "Home Assistant" : "Demo",
       path: "home",
       icon: "mdi:home-assistant",
       sections: [
-        {
-          title: "Welcome 👋",
-          cards: [{ type: "custom:ha-demo-card" }],
-        },
+        ...(isFrontpageEmbed
+          ? []
+          : [
+              {
+                title: `${localize("ui.panel.page-demo.config.sections.titles.welcome")} 👋`,
+                cards: [{ type: "custom:ha-demo-card" }],
+              },
+            ]),
         {
           cards: [
-            {
-              type: "tile",
-              entity: "cover.living_room_garden_shutter",
-              name: "Garden",
-            },
-            {
-              type: "tile",
-              entity: "cover.living_room_graveyard_shutter",
-              name: "Rear",
-            },
-            {
-              type: "tile",
-              entity: "cover.living_room_left_shutter",
-              name: "Left",
-            },
-            {
-              type: "tile",
-              entity: "cover.living_room_right_shutter",
-              name: "Right",
-            },
             {
               type: "tile",
               entity: "light.floor_lamp",
@@ -60,13 +45,17 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = () => ({
               detail: 1,
               name: "Temperature",
             },
+            {
+              type: "tile",
+              entity: "cover.living_room_garden_shutter",
+              name: "Blinds",
+            },
             {
               type: "tile",
               entity: "media_player.living_room_nest_mini",
-              name: "Nest Mini",
             },
           ],
-          title: "🛋️ Living room ",
+          title: `🛋️ ${localize("ui.panel.page-demo.config.sections.titles.living_room")} `,
         },
         {
           type: "grid",
@@ -99,10 +88,9 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = () => ({
             {
               type: "tile",
               entity: "media_player.kitchen_nest_audio",
-              name: "Nest Audio",
             },
           ],
-          title: "👩‍🍳 Kitchen",
+          title: `👩‍🍳 ${localize("ui.panel.page-demo.config.sections.titles.kitchen")}`,
         },
         {
           type: "grid",
@@ -144,7 +132,7 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = () => ({
               color: "dark-grey",
             },
           ],
-          title: "⚡️ Energy",
+          title: `⚡️ ${localize("ui.panel.page-demo.config.sections.titles.energy")}`,
         },
         {
           type: "grid",
@@ -181,7 +169,7 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = () => ({
               state_content: ["preset_mode", "current_temperature"],
             },
           ],
-          title: "🌤️ Climate",
+          title: `🌤️ ${localize("ui.panel.page-demo.config.sections.titles.climate")}`,
         },
         {
           type: "grid",
@@ -199,7 +187,6 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = () => ({
             {
               type: "tile",
               entity: "media_player.study_nest_hub",
-              name: "Nest Hub",
             },
             {
               type: "tile",
@@ -209,7 +196,7 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = () => ({
               icon: "mdi:desk",
             },
           ],
-          title: "🧑‍💻 Study",
+          title: `🧑‍💻 ${localize("ui.panel.page-demo.config.sections.titles.study")}`,
         },
         {
           type: "grid",
@@ -243,7 +230,7 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = () => ({
               name: "Illuminance",
             },
           ],
-          title: "🌳 Outdoor",
+          title: `🌳 ${localize("ui.panel.page-demo.config.sections.titles.outdoor")}`,
         },
         {
           type: "grid",
@@ -273,7 +260,7 @@ export const demoLovelaceSections: DemoConfig["lovelace"] = () => ({
               icon: "mdi:home-assistant",
             },
           ],
-          title: "🎉 Updates",
+          title: `🎉 ${localize("ui.panel.page-demo.config.sections.titles.updates")}`,
         },
       ],
     },

demo/src/entrypoint.ts

@@ -1,4 +1,4 @@
-import "../../src/resources/safari-14-attachshadow-patch";
+import "./util/is_frontpage";
 import "./ha-demo";
 
 import("../../src/resources/ha-style");

demo/src/html/index.html.template

@@ -93,16 +93,5 @@
       }
     </script>
     <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
-    <script>
-      var _gaq = [["_setAccount", "UA-57927901-5"], ["_trackPageview"]];
-      (function (d, t) {
-        var g = d.createElement(t),
-          s = d.getElementsByTagName(t)[0];
-        g.src =
-          ("https:" == location.protocol ? "//ssl" : "//www") +
-          ".google-analytics.com/ga.js";
-        s.parentNode.insertBefore(g, s);
-      })(document, "script");
-    </script>
   </body>
 </html>

demo/src/stubs/entities.ts

@@ -1,5 +1,55 @@
 import { convertEntities } from "../../../src/fake_data/entity";
 
+export const mapEntities = () =>
+  convertEntities({
+    "zone.home": {
+      entity_id: "zone.home",
+      state: "zoning",
+      attributes: {
+        hidden: true,
+        latitude: 52.3631339,
+        longitude: 4.8903147,
+        radius: 200,
+        friendly_name: "Home",
+        icon: "hademo:home",
+      },
+    },
+    "zone.uva": {
+      entity_id: "zone.buckhead",
+      state: "zoning",
+      attributes: {
+        hidden: true,
+        radius: 400,
+        friendly_name: "UvA",
+        icon: "hademo:school",
+        latitude: 52.3558182,
+        longitude: 4.9535376,
+      },
+    },
+    "person.arsaboo": {
+      entity_id: "person.arsaboo",
+      state: "not_home",
+      attributes: {
+        radius: 50,
+        friendly_name: "Arsaboo",
+        latitude: 52.3579946,
+        longitude: 4.8664597,
+        entity_picture: "/assets/arsaboo/images/arsaboo.jpg",
+      },
+    },
+    "person.melody": {
+      entity_id: "person.melody",
+      state: "not_home",
+      attributes: {
+        radius: 50,
+        friendly_name: "Melody",
+        latitude: 52.3408927,
+        longitude: 4.8711073,
+        entity_picture: "/assets/arsaboo/images/melody.jpg",
+      },
+    },
+  });
+
 export const energyEntities = () =>
   convertEntities({
     "sensor.grid_fossil_fuel_percentage": {

demo/src/stubs/lovelace.ts

@@ -7,16 +7,25 @@ import {
 } from "../configs/demo-configs";
 import "../custom-cards/cast-demo-row";
 import "../custom-cards/ha-demo-card";
+import { mapEntities } from "./entities";
 
 export const mockLovelace = (
   hass: MockHomeAssistant,
   localizePromise: Promise<LocalizeFunc>
 ) => {
-  hass.mockWS("lovelace/config", () =>
-    Promise.all([selectedDemoConfig, localizePromise]).then(
+  hass.mockWS("lovelace/config", ({ url_path }) => {
+    if (url_path === "map") {
+      hass.addEntities(mapEntities());
+      return {
+        strategy: {
+          type: "map",
+        },
+      };
+    }
+    return Promise.all([selectedDemoConfig, localizePromise]).then(
       ([config, localize]) => config.lovelace(localize)
-    )
-  );
+    );
+  });
 
   hass.mockWS("lovelace/config/save", () => Promise.resolve());
   hass.mockWS("lovelace/resources", () => Promise.resolve([]));

demo/src/util/is_frontpage.ts

@@ -0,0 +1 @@
+export const isFrontpageEmbed = document.location.search === "?frontpage";

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

@@ -3,13 +3,16 @@ title: When to use remove, delete, add and create
 subtitle: The difference between remove/delete and add/create.
 ---
 
-# Remove vs Delete
+# Removing or deleting content
 
-Remove and Delete are quite similar, but can be frustrating if used inconsistently.
+_Remove_ and _Delete_ are quite similar, but can be frustrating if used inconsistently.
+
+- Remove refers to an action that can be restored or reapplied.
+- Delete refers to a permanent, non-recoverable action.
 
 ## Remove
 
-Take away and set aside, but kept in existence.
+The term _Remove_ should always be used when an item/setting or content is to be removed or disassociated, but the action can be reversed or reapplied.
 
 For example:
 
@@ -22,7 +25,7 @@ For example:
 
 ## Delete
 
-Erase, rendered nonexistent or nonrecoverable.
+The term _Delete_ should always be used to refer to any action that will cause the permanent deletion of an item/setting or content.
 
 For example:
 

gallery/src/pages/misc/entity-state.ts

@@ -140,6 +140,9 @@ const ENTITIES: HassEntity[] = [
   createEntity("climate.auto_preheating", "auto", undefined, {
     hvac_action: "preheating",
   }),
+  createEntity("climate.auto_defrosting", "auto", undefined, {
+    hvac_action: "defrosting",
+  }),
   createEntity("climate.auto_heating", "auto", undefined, {
     hvac_action: "heating",
   }),

hassio/src/components/hassio-filter-addons.ts

@@ -1,6 +1,8 @@
-import Fuse from "fuse.js";
 import type { IFuseOptions } from "fuse.js";
+import Fuse from "fuse.js";
+import { stripDiacritics } from "../../../src/common/string/strip-diacritics";
 import { StoreAddon } from "../../../src/data/supervisor/store";
+import { getStripDiacriticsFn } from "../../../src/util/fuse";
 
 export function filterAndSort(addons: StoreAddon[], filter: string) {
   const options: IFuseOptions<StoreAddon> = {
@@ -8,7 +10,8 @@ export function filterAndSort(addons: StoreAddon[], filter: string) {
     isCaseSensitive: false,
     minMatchCharLength: Math.min(filter.length, 2),
     threshold: 0.2,
+    getFn: getStripDiacriticsFn,
   };
   const fuse = new Fuse(addons, options);
-  return fuse.search(filter).map((result) => result.item);
+  return fuse.search(stripDiacritics(filter)).map((result) => result.item);
 }

hassio/src/entrypoint.ts

@@ -1,6 +1,5 @@
 // Compat needs to be first import
 import "../../src/resources/compatibility";
-import "../../src/resources/safari-14-attachshadow-patch";
 import "./hassio-main";
 
 import("../../src/resources/ha-style");

package.json

@@ -26,14 +26,14 @@
   "type": "module",
   "dependencies": {
     "@babel/runtime": "7.24.7",
-    "@braintree/sanitize-url": "7.0.3",
-    "@codemirror/autocomplete": "6.16.3",
+    "@braintree/sanitize-url": "7.0.4",
+    "@codemirror/autocomplete": "6.17.0",
     "@codemirror/commands": "6.6.0",
     "@codemirror/language": "6.10.2",
     "@codemirror/legacy-modes": "6.4.0",
     "@codemirror/search": "6.5.6",
     "@codemirror/state": "6.4.1",
-    "@codemirror/view": "6.28.2",
+    "@codemirror/view": "6.28.4",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.12.5",
     "@formatjs/intl-displaynames": "6.6.8",
@@ -80,7 +80,7 @@
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "1.5.0",
+    "@material/web": "1.5.1",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@polymer/paper-item": "3.0.1",
@@ -88,8 +88,8 @@
     "@polymer/paper-tabs": "3.1.0",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.4.0",
-    "@vaadin/vaadin-themable-mixin": "24.4.0",
+    "@vaadin/combo-box": "24.4.1",
+    "@vaadin/vaadin-themable-mixin": "24.4.1",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -118,7 +118,7 @@
     "leaflet-draw": "1.0.4",
     "lit": "2.8.0",
     "luxon": "3.4.4",
-    "marked": "12.0.2",
+    "marked": "13.0.2",
     "memoize-one": "6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "0.3.2",
@@ -155,9 +155,9 @@
     "@babel/plugin-transform-runtime": "7.24.7",
     "@babel/preset-env": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
-    "@bundle-stats/plugin-webpack-filter": "4.13.2",
+    "@bundle-stats/plugin-webpack-filter": "4.13.3",
     "@koa/cors": "5.0.0",
-    "@lokalise/node-api": "12.5.0",
+    "@lokalise/node-api": "12.6.0",
     "@octokit/auth-oauth-device": "7.1.1",
     "@octokit/plugin-retry": "7.1.1",
     "@octokit/rest": "21.0.0",
@@ -168,7 +168,7 @@
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.7",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.15",
+    "@types/chromecast-caf-receiver": "6.0.16",
     "@types/chromecast-caf-sender": "1.0.10",
     "@types/color-name": "1.1.4",
     "@types/glob": "8.1.0",
@@ -178,15 +178,15 @@
     "@types/leaflet-draw": "1.0.11",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.4.2",
-    "@types/mocha": "10.0.6",
+    "@types/mocha": "10.0.7",
     "@types/qrcode": "1.5.5",
     "@types/serve-handler": "6.1.4",
     "@types/sortablejs": "1.15.8",
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "7.13.1",
-    "@typescript-eslint/parser": "7.13.1",
+    "@typescript-eslint/eslint-plugin": "7.15.0",
+    "@typescript-eslint/parser": "7.15.0",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.3",
@@ -200,12 +200,12 @@
     "eslint-import-resolver-webpack": "0.13.8",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-lit": "1.14.0",
-    "eslint-plugin-lit-a11y": "4.1.2",
+    "eslint-plugin-lit-a11y": "4.1.3",
     "eslint-plugin-unused-imports": "4.0.0",
     "eslint-plugin-wc": "2.1.0",
     "fancy-log": "2.0.0",
     "fs-extra": "11.2.0",
-    "glob": "10.4.2",
+    "glob": "10.4.3",
     "gulp": "5.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.0.0",
@@ -220,7 +220,7 @@
     "lodash.template": "4.5.0",
     "magic-string": "0.30.10",
     "map-stream": "0.0.7",
-    "mocha": "10.4.0",
+    "mocha": "10.5.0",
     "object-hash": "3.0.0",
     "open": "10.1.0",
     "pinst": "3.0.0",
@@ -237,7 +237,7 @@
     "terser-webpack-plugin": "5.3.10",
     "transform-async-modules-webpack-plugin": "1.1.1",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "5.4.5",
+    "typescript": "5.5.3",
     "webpack": "5.92.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.0.4",

public/static/images/logo_x.svg

@@ -0,0 +1,3 @@
+<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
+</svg>

pyproject.toml

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

src/common/entity/get_states.ts

@@ -125,6 +125,7 @@ const FIXED_DOMAIN_ATTRIBUTE_STATES = {
       "off",
       "idle",
       "preheating",
+      "defrosting",
       "heating",
       "cooling",
       "drying",

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

@@ -1,3 +1,4 @@
+import { stripDiacritics } from "../strip-diacritics";
 import { fuzzyScore } from "./filter";
 
 /**
@@ -19,10 +20,10 @@ export const fuzzySequentialMatch = (
   for (const word of item.strings) {
     const scores = fuzzyScore(
       filter,
-      filter.toLowerCase(),
+      stripDiacritics(filter.toLowerCase()),
       0,
       word,
-      word.toLowerCase(),
+      stripDiacritics(word.toLowerCase()),
       0,
       true
     );

src/common/string/strip-diacritics.ts

@@ -0,0 +1,2 @@
+export const stripDiacritics = (str: string) =>
+  str.normalize("NFD").replace(/[\u0300-\u036F]/g, "");

src/components/data-table/dialog-data-table-settings.ts

@@ -0,0 +1,313 @@
+import "@material/mwc-list";
+import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
+import { haStyleDialog } from "../../resources/styles";
+import { HomeAssistant } from "../../types";
+import { createCloseHeading } from "../ha-dialog";
+import "../ha-list-item";
+import "../ha-sortable";
+import "../ha-button";
+import { DataTableColumnContainer, DataTableColumnData } from "./ha-data-table";
+import { DataTableSettingsDialogParams } from "./show-dialog-data-table-settings";
+import { fireEvent } from "../../common/dom/fire_event";
+
+@customElement("dialog-data-table-settings")
+export class DialogDataTableSettings extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: DataTableSettingsDialogParams;
+
+  @state() private _columnOrder?: string[];
+
+  @state() private _hiddenColumns?: string[];
+
+  public showDialog(params: DataTableSettingsDialogParams) {
+    this._params = params;
+    this._columnOrder = params.columnOrder;
+    this._hiddenColumns = params.hiddenColumns;
+  }
+
+  public closeDialog() {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  private _sortedColumns = memoizeOne(
+    (
+      columns: DataTableColumnContainer,
+      columnOrder: string[] | undefined,
+      hiddenColumns: string[] | undefined
+    ) =>
+      Object.keys(columns)
+        .filter((col) => !columns[col].hidden)
+        .sort((a, b) => {
+          const orderA = columnOrder?.indexOf(a) ?? -1;
+          const orderB = columnOrder?.indexOf(b) ?? -1;
+          const hiddenA =
+            hiddenColumns?.includes(a) ?? Boolean(columns[a].defaultHidden);
+          const hiddenB =
+            hiddenColumns?.includes(b) ?? Boolean(columns[b].defaultHidden);
+          if (hiddenA !== hiddenB) {
+            return hiddenA ? 1 : -1;
+          }
+          if (orderA !== orderB) {
+            if (orderA === -1) {
+              return 1;
+            }
+            if (orderB === -1) {
+              return -1;
+            }
+          }
+          return orderA - orderB;
+        })
+        .reduce(
+          (arr, key) => {
+            arr.push({ key, ...columns[key] });
+            return arr;
+          },
+          [] as (DataTableColumnData & { key: string })[]
+        )
+  );
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    const localize = this._params.localizeFunc || this.hass.localize;
+
+    const columns = this._sortedColumns(
+      this._params.columns,
+      this._columnOrder,
+      this._hiddenColumns
+    );
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass,
+          localize("ui.components.data-table.settings.header")
+        )}
+      >
+        <ha-sortable
+          @item-moved=${this._columnMoved}
+          draggable-selector=".draggable"
+          handle-selector=".handle"
+        >
+          <mwc-list>
+            ${repeat(
+              columns,
+              (col) => col.key,
+              (col, _idx) => {
+                const canMove = !col.main && col.moveable !== false;
+                const canHide = !col.main && col.hideable !== false;
+                const isVisible = !(this._columnOrder &&
+                this._columnOrder.includes(col.key)
+                  ? this._hiddenColumns?.includes(col.key) ?? col.defaultHidden
+                  : col.defaultHidden);
+
+                return html`<ha-list-item
+                  hasMeta
+                  class=${classMap({
+                    hidden: !isVisible,
+                    draggable: canMove && isVisible,
+                  })}
+                  graphic="icon"
+                  noninteractive
+                  >${col.title || col.label || col.key}
+                  ${canMove && isVisible
+                    ? html`<ha-svg-icon
+                        class="handle"
+                        .path=${mdiDrag}
+                        slot="graphic"
+                      ></ha-svg-icon>`
+                    : nothing}
+                  <ha-icon-button
+                    tabindex="0"
+                    class="action"
+                    .disabled=${!canHide}
+                    .hidden=${!isVisible}
+                    .path=${isVisible ? mdiEye : mdiEyeOff}
+                    slot="meta"
+                    .label=${this.hass!.localize(
+                      `ui.components.data-table.settings.${isVisible ? "hide" : "show"}`,
+                      { title: typeof col.title === "string" ? col.title : "" }
+                    )}
+                    .column=${col.key}
+                    @click=${this._toggle}
+                  ></ha-icon-button>
+                </ha-list-item>`;
+              }
+            )}
+          </mwc-list>
+        </ha-sortable>
+        <ha-button slot="secondaryAction" @click=${this._reset}
+          >${localize("ui.components.data-table.settings.restore")}</ha-button
+        >
+        <ha-button slot="primaryAction" @click=${this.closeDialog}>
+          ${localize("ui.components.data-table.settings.done")}
+        </ha-button>
+      </ha-dialog>
+    `;
+  }
+
+  private _columnMoved(ev: CustomEvent): void {
+    ev.stopPropagation();
+    if (!this._params) {
+      return;
+    }
+    const { oldIndex, newIndex } = ev.detail;
+
+    const columns = this._sortedColumns(
+      this._params.columns,
+      this._columnOrder,
+      this._hiddenColumns
+    );
+
+    const columnOrder = columns.map((column) => column.key);
+
+    const option = columnOrder.splice(oldIndex, 1)[0];
+    columnOrder.splice(newIndex, 0, option);
+
+    this._columnOrder = columnOrder;
+
+    this._params!.onUpdate(this._columnOrder, this._hiddenColumns);
+  }
+
+  _toggle(ev) {
+    if (!this._params) {
+      return;
+    }
+    const column = ev.target.column;
+    const wasHidden = ev.target.hidden;
+
+    const hidden = [
+      ...(this._hiddenColumns ??
+        Object.entries(this._params.columns)
+          .filter(([_key, col]) => col.defaultHidden)
+          .map(([key]) => key)),
+    ];
+    if (wasHidden && hidden.includes(column)) {
+      hidden.splice(hidden.indexOf(column), 1);
+    } else if (!wasHidden) {
+      hidden.push(column);
+    }
+
+    const columns = this._sortedColumns(
+      this._params.columns,
+      this._columnOrder,
+      hidden
+    );
+
+    if (!this._columnOrder) {
+      this._columnOrder = columns.map((col) => col.key);
+    } else {
+      const newOrder = this._columnOrder.filter((col) => col !== column);
+
+      // Array.findLastIndex when supported or core-js polyfill
+      const findLastIndex = (
+        arr: Array<any>,
+        fn: (item: any, index: number, arr: Array<any>) => boolean
+      ) => {
+        for (let i = arr.length - 1; i >= 0; i--) {
+          if (fn(arr[i], i, arr)) return i;
+        }
+        return -1;
+      };
+
+      let lastMoveable = findLastIndex(
+        newOrder,
+        (col) =>
+          col !== column &&
+          !hidden.includes(col) &&
+          !this._params!.columns[col].main &&
+          this._params!.columns[col].moveable !== false
+      );
+
+      if (lastMoveable === -1) {
+        lastMoveable = newOrder.length - 1;
+      }
+
+      columns.forEach((col) => {
+        if (!newOrder.includes(col.key)) {
+          if (col.moveable === false) {
+            newOrder.unshift(col.key);
+          } else {
+            newOrder.splice(lastMoveable + 1, 0, col.key);
+          }
+
+          if (col.defaultHidden) {
+            hidden.push(col.key);
+          }
+        }
+      });
+
+      this._columnOrder = newOrder;
+    }
+
+    this._hiddenColumns = hidden;
+
+    this._params!.onUpdate(this._columnOrder, this._hiddenColumns);
+  }
+
+  _reset() {
+    this._columnOrder = undefined;
+    this._hiddenColumns = undefined;
+
+    this._params!.onUpdate(this._columnOrder, this._hiddenColumns);
+    this.closeDialog();
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleDialog,
+      css`
+        ha-dialog {
+          --mdc-dialog-max-width: 500px;
+          --dialog-z-index: 10;
+          --dialog-content-padding: 0 8px;
+        }
+        @media all and (max-width: 451px) {
+          ha-dialog {
+            --vertical-align-dialog: flex-start;
+            --dialog-surface-margin-top: 250px;
+            --ha-dialog-border-radius: 28px 28px 0 0;
+            --mdc-dialog-min-height: calc(100% - 250px);
+            --mdc-dialog-max-height: calc(100% - 250px);
+          }
+        }
+        ha-list-item {
+          --mdc-list-side-padding: 12px;
+          overflow: visible;
+        }
+        .hidden {
+          color: var(--disabled-text-color);
+        }
+        .handle {
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
+        }
+        .actions {
+          display: flex;
+          flex-direction: row;
+        }
+        ha-icon-button {
+          display: block;
+          margin: -12px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-data-table-settings": DialogDataTableSettings;
+  }
+}

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

@@ -34,6 +34,7 @@ import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-svg-icon";
 import "../search-input";
 import { filterData, sortData } from "./sort-filter";
+import { LocalizeFunc } from "../../common/translations/localize";
 
 export interface RowClickedEvent {
   id: string;
@@ -65,6 +66,10 @@ export interface DataTableSortColumnData {
   valueColumn?: string;
   direction?: SortingDirection;
   groupable?: boolean;
+  moveable?: boolean;
+  hideable?: boolean;
+  defaultHidden?: boolean;
+  showNarrow?: boolean;
 }
 
 export interface DataTableColumnData<T = any> extends DataTableSortColumnData {
@@ -79,6 +84,7 @@ export interface DataTableColumnData<T = any> extends DataTableSortColumnData {
     | "overflow-menu"
     | "flex";
   template?: (row: T) => TemplateResult | string | typeof nothing;
+  extraTemplate?: (row: T) => TemplateResult | string | typeof nothing;
   width?: string;
   maxWidth?: string;
   grows?: boolean;
@@ -105,6 +111,10 @@ const UNDEFINED_GROUP_KEY = "zzzzz_undefined";
 export class HaDataTable extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public localizeFunc?: LocalizeFunc;
+
+  @property({ type: Boolean }) public narrow = false;
+
   @property({ type: Object }) public columns: DataTableColumnContainer = {};
 
   @property({ type: Array }) public data: DataTableRowData[] = [];
@@ -145,6 +155,10 @@ export class HaDataTable extends LitElement {
 
   @property({ attribute: false }) public initialCollapsedGroups?: string[];
 
+  @property({ attribute: false }) public hiddenColumns?: string[];
+
+  @property({ attribute: false }) public columnOrder?: string[];
+
   @state() private _filterable = false;
 
   @state() private _filter = "";
@@ -235,6 +249,7 @@ export class HaDataTable extends LitElement {
         (column: ClonedDataTableColumnData) => {
           delete column.title;
           delete column.template;
+          delete column.extraTemplate;
         }
       );
 
@@ -272,12 +287,46 @@ export class HaDataTable extends LitElement {
       this._sortFilterData();
     }
 
-    if (properties.has("selectable")) {
+    if (properties.has("selectable") || properties.has("hiddenColumns")) {
       this._items = [...this._items];
     }
   }
 
+  private _sortedColumns = memoizeOne(
+    (columns: DataTableColumnContainer, columnOrder?: string[]) => {
+      if (!columnOrder || !columnOrder.length) {
+        return columns;
+      }
+
+      return Object.keys(columns)
+        .sort((a, b) => {
+          const orderA = columnOrder!.indexOf(a);
+          const orderB = columnOrder!.indexOf(b);
+          if (orderA !== orderB) {
+            if (orderA === -1) {
+              return 1;
+            }
+            if (orderB === -1) {
+              return -1;
+            }
+          }
+          return orderA - orderB;
+        })
+        .reduce((obj, key) => {
+          obj[key] = columns[key];
+          return obj;
+        }, {}) as DataTableColumnContainer;
+    }
+  );
+
   protected render() {
+    const localize = this.localizeFunc || this.hass.localize;
+
+    const columns = this._sortedColumns(this.columns, this.columnOrder);
+
+    const renderRow = (row: DataTableRowData, index: number) =>
+      this._renderRow(columns, this.narrow, row, index);
+
     return html`
       <div class="mdc-data-table">
         <slot name="header" @slotchange=${this._calcTableHeight}>
@@ -326,9 +375,14 @@ export class HaDataTable extends LitElement {
                     </div>
                   `
                 : ""}
-              ${Object.entries(this.columns).map(([key, column]) => {
-                if (column.hidden) {
-                  return "";
+              ${Object.entries(columns).map(([key, column]) => {
+                if (
+                  column.hidden ||
+                  (this.columnOrder && this.columnOrder.includes(key)
+                    ? this.hiddenColumns?.includes(key) ?? column.defaultHidden
+                    : column.defaultHidden)
+                ) {
+                  return nothing;
                 }
                 const sorted = key === this.sortColumn;
                 const classes = {
@@ -387,7 +441,7 @@ export class HaDataTable extends LitElement {
                   <div class="mdc-data-table__row" role="row">
                     <div class="mdc-data-table__cell grows center" role="cell">
                       ${this.noDataText ||
-                      this.hass.localize("ui.components.data-table.no-data")}
+                      localize("ui.components.data-table.no-data")}
                     </div>
                   </div>
                 </div>
@@ -399,7 +453,7 @@ export class HaDataTable extends LitElement {
                   @scroll=${this._saveScrollPos}
                   .items=${this._items}
                   .keyFunction=${this._keyFunction}
-                  .renderItem=${this._renderRow}
+                  .renderItem=${renderRow}
                 ></lit-virtualizer>
               `}
         </div>
@@ -409,7 +463,12 @@ export class HaDataTable extends LitElement {
 
   private _keyFunction = (row: DataTableRowData) => row?.[this.id] || row;
 
-  private _renderRow = (row: DataTableRowData, index: number) => {
+  private _renderRow = (
+    columns: DataTableColumnContainer,
+    narrow: boolean,
+    row: DataTableRowData,
+    index: number
+  ) => {
     // not sure how this happens...
     if (!row) {
       return nothing;
@@ -454,8 +513,14 @@ export class HaDataTable extends LitElement {
               </div>
             `
           : ""}
-        ${Object.entries(this.columns).map(([key, column]) => {
-          if (column.hidden) {
+        ${Object.entries(columns).map(([key, column]) => {
+          if (
+            (narrow && !column.main && !column.showNarrow) ||
+            column.hidden ||
+            (this.columnOrder && this.columnOrder.includes(key)
+              ? this.hiddenColumns?.includes(key) ?? column.defaultHidden
+              : column.defaultHidden)
+          ) {
             return nothing;
           }
           return html`
@@ -482,7 +547,38 @@ export class HaDataTable extends LitElement {
                   })
                 : ""}
             >
-              ${column.template ? column.template(row) : row[key]}
+              ${column.template
+                ? column.template(row)
+                : narrow && column.main
+                  ? html`<div class="primary">${row[key]}</div>
+                      <div class="secondary">
+                        ${Object.entries(columns)
+                          .filter(
+                            ([key2, column2]) =>
+                              !column2.hidden &&
+                              !column2.main &&
+                              !column2.showNarrow &&
+                              !(this.columnOrder &&
+                              this.columnOrder.includes(key2)
+                                ? this.hiddenColumns?.includes(key2) ??
+                                  column2.defaultHidden
+                                : column2.defaultHidden)
+                          )
+                          .map(
+                            ([key2, column2], i) =>
+                              html`${i !== 0
+                                ? " ⸱ "
+                                : nothing}${column2.template
+                                ? column2.template(row)
+                                : row[key2]}`
+                          )}
+                      </div>
+                      ${column.extraTemplate
+                        ? column.extraTemplate(row)
+                        : nothing}`
+                  : html`${row[key]}${column.extraTemplate
+                      ? column.extraTemplate(row)
+                      : nothing}`}
             </div>
           `;
         })}
@@ -528,6 +624,8 @@ export class HaDataTable extends LitElement {
       return;
     }
 
+    const localize = this.localizeFunc || this.hass.localize;
+
     if (this.appendRow || this.hasFab || this.groupColumn) {
       let items = [...data];
 
@@ -581,7 +679,7 @@ export class HaDataTable extends LitElement {
               >
               </ha-icon-button>
               ${groupName === UNDEFINED_GROUP_KEY
-                ? this.hass.localize("ui.components.data-table.ungrouped")
+                ? localize("ui.components.data-table.ungrouped")
                 : groupName || ""}
             </div>`,
           });
@@ -861,6 +959,7 @@ export class HaDataTable extends LitElement {
           width: 100%;
           border: 0;
           white-space: nowrap;
+          position: relative;
         }
 
         .mdc-data-table__cell {

src/components/data-table/show-dialog-data-table-settings.ts

@@ -0,0 +1,28 @@
+import { fireEvent } from "../../common/dom/fire_event";
+import { LocalizeFunc } from "../../common/translations/localize";
+import { DataTableColumnContainer } from "./ha-data-table";
+
+export interface DataTableSettingsDialogParams {
+  columns: DataTableColumnContainer;
+  onUpdate: (
+    columnOrder: string[] | undefined,
+    hiddenColumns: string[] | undefined
+  ) => void;
+  hiddenColumns?: string[];
+  columnOrder?: string[];
+  localizeFunc?: LocalizeFunc;
+}
+
+export const loadDataTableSettingsDialog = () =>
+  import("./dialog-data-table-settings");
+
+export const showDataTableSettingsDialog = (
+  element: HTMLElement,
+  dialogParams: DataTableSettingsDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-data-table-settings",
+    dialogImport: loadDataTableSettingsDialog,
+    dialogParams,
+  });
+};

src/components/data-table/sort-filter-worker.ts

@@ -1,5 +1,6 @@
 import { expose } from "comlink";
 import { stringCompare } from "../../common/string/compare";
+import { stripDiacritics } from "../../common/string/strip-diacritics";
 import type {
   ClonedDataTableColumnData,
   DataTableRowData,
@@ -12,20 +13,18 @@ const filterData = (
   columns: SortableColumnContainer,
   filter: string
 ) => {
-  filter = filter.toUpperCase();
+  filter = stripDiacritics(filter.toLowerCase());
   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]
-          )
-            .toUpperCase()
-            .includes(filter)
-        ) {
+        const value = String(
+          column.filterKey
+            ? row[column.valueColumn || key][column.filterKey]
+            : row[column.valueColumn || key]
+        );
+
+        if (stripDiacritics(value).toLowerCase().includes(filter)) {
           return true;
         }
       }

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

@@ -90,7 +90,8 @@ class HaAnsiToHtml extends LitElement {
 
   private _parseTextToColoredPre(text) {
     const pre = document.createElement("pre");
-    const re = /\033(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g;
+    // eslint-disable-next-line no-control-regex
+    const re = /\x1b(?:\[(.*?)[@-~]|\].*?(?:\x07|\x1b\\))/g;
     let i = 0;
 
     const state: State = {

src/components/ha-grid-size-picker.ts

@@ -7,9 +7,10 @@ import { mdiRestore } from "@mdi/js";
 import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
+import { conditionalClamp } from "../common/number/clamp";
 
 type GridSizeValue = {
-  rows?: number;
+  rows?: number | "auto";
   columns?: number;
 };
 
@@ -42,6 +43,20 @@ export class HaGridSizeEditor extends LitElement {
   }
 
   protected render() {
+    const disabledColumns =
+      this.columnMin !== undefined && this.columnMin === this.columnMax;
+    const disabledRows =
+      this.rowMin !== undefined && this.rowMin === this.rowMax;
+
+    const autoHeight = this._localValue?.rows === "auto";
+
+    const rowMin = this.rowMin ?? 1;
+    const rowMax = this.rowMax ?? this.rows;
+    const columnMin = this.columnMin ?? 1;
+    const columnMax = this.columnMax ?? this.columns;
+    const rowValue = autoHeight ? rowMin : this._localValue?.rows;
+    const columnValue = this._localValue?.columns;
+
     return html`
       <div class="grid">
         <ha-grid-layout-slider
@@ -49,25 +64,28 @@ export class HaGridSizeEditor extends LitElement {
             "ui.components.grid-size-picker.columns"
           )}
           id="columns"
-          .min=${this.columnMin ?? 1}
-          .max=${this.columnMax ?? this.columns}
+          .min=${columnMin}
+          .max=${columnMax}
           .range=${this.columns}
-          .value=${this.value?.columns}
+          .value=${columnValue}
           @value-changed=${this._valueChanged}
           @slider-moved=${this._sliderMoved}
+          .disabled=${disabledColumns}
         ></ha-grid-layout-slider>
+
         <ha-grid-layout-slider
           aria-label=${this.hass.localize(
             "ui.components.grid-size-picker.rows"
           )}
           id="rows"
-          .min=${this.rowMin ?? 1}
-          .max=${this.rowMax ?? this.rows}
+          .min=${rowMin}
+          .max=${rowMax}
           .range=${this.rows}
           vertical
-          .value=${this.value?.rows}
+          .value=${rowValue}
           @value-changed=${this._valueChanged}
           @slider-moved=${this._sliderMoved}
+          .disabled=${disabledRows}
         ></ha-grid-layout-slider>
         ${!this.isDefault
           ? html`
@@ -90,8 +108,8 @@ export class HaGridSizeEditor extends LitElement {
           style=${styleMap({
             "--total-rows": this.rows,
             "--total-columns": this.columns,
-            "--rows": this._localValue?.rows,
-            "--columns": this._localValue?.columns,
+            "--rows": rowValue,
+            "--columns": columnValue,
           })}
         >
           <div>
@@ -100,17 +118,11 @@ export class HaGridSizeEditor extends LitElement {
               .map((_, index) => {
                 const row = Math.floor(index / this.columns) + 1;
                 const column = (index % this.columns) + 1;
-                const disabled =
-                  (this.rowMin !== undefined && row < this.rowMin) ||
-                  (this.rowMax !== undefined && row > this.rowMax) ||
-                  (this.columnMin !== undefined && column < this.columnMin) ||
-                  (this.columnMax !== undefined && column > this.columnMax);
                 return html`
                   <div
                     class="cell"
                     data-row=${row}
                     data-column=${column}
-                    ?disabled=${disabled}
                     @click=${this._cellClick}
                   ></div>
                 `;
@@ -126,11 +138,16 @@ export class HaGridSizeEditor extends LitElement {
 
   _cellClick(ev) {
     const cell = ev.currentTarget as HTMLElement;
-    if (cell.getAttribute("disabled") !== null) return;
     const rows = Number(cell.getAttribute("data-row"));
     const columns = Number(cell.getAttribute("data-column"));
+    const clampedRow = conditionalClamp(rows, this.rowMin, this.rowMax);
+    const clampedColumn = conditionalClamp(
+      columns,
+      this.columnMin,
+      this.columnMax
+    );
     fireEvent(this, "value-changed", {
-      value: { rows, columns },
+      value: { rows: clampedRow, columns: clampedColumn },
     });
   }
 
@@ -209,10 +226,6 @@ export class HaGridSizeEditor extends LitElement {
         opacity: 0.2;
         cursor: pointer;
       }
-      .preview .cell[disabled] {
-        opacity: 0.05;
-        cursor: initial;
-      }
       .selected {
         pointer-events: none;
       }

src/components/ha-menu-item.ts

@@ -1,9 +1,11 @@
 import { MdMenuItem } from "@material/web/menu/menu-item";
 import { css } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 
 @customElement("ha-menu-item")
 export class HaMenuItem extends MdMenuItem {
+  @property({ attribute: false }) clickAction?: (item?: HTMLElement) => void;
+
   static override styles = [
     ...super.styles,
     css`

src/components/ha-menu.ts

@@ -1,9 +1,30 @@
 import { MdMenu } from "@material/web/menu/menu";
+import type { CloseMenuEvent } from "@material/web/menu/menu";
+import {
+  CloseReason,
+  KeydownCloseKey,
+} from "@material/web/menu/internal/controllers/shared";
 import { css } from "lit";
 import { customElement } from "lit/decorators";
+import type { HaMenuItem } from "./ha-menu-item";
 
 @customElement("ha-menu")
 export class HaMenu extends MdMenu {
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener("close-menu", this._handleCloseMenu);
+  }
+
+  private _handleCloseMenu(ev: CloseMenuEvent) {
+    if (
+      ev.detail.reason.kind === CloseReason.KEYDOWN &&
+      ev.detail.reason.key === KeydownCloseKey.ESCAPE
+    ) {
+      return;
+    }
+    (ev.detail.initiator as HaMenuItem).clickAction?.(ev.detail.initiator);
+  }
+
   static override styles = [
     ...super.styles,
     css`
@@ -18,4 +39,8 @@ declare global {
   interface HTMLElementTagNameMap {
     "ha-menu": HaMenu;
   }
+
+  interface HTMLElementEventMap {
+    "close-menu": CloseMenuEvent;
+  }
 }

src/components/ha-qr-scanner.ts

@@ -1,72 +1,92 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-list/mwc-list-item";
 import { mdiCamera } from "@mdi/js";
-import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { css, html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import type QrScanner from "qr-scanner";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { LocalizeFunc } from "../common/translations/localize";
+import { addExternalBarCodeListener } from "../external_app/external_app_entrypoint";
+import { HomeAssistant } from "../types";
 import "./ha-alert";
 import "./ha-button-menu";
+import "./ha-list-item";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
 @customElement("ha-qr-scanner")
 class HaQrScanner extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ attribute: false }) public localize!: LocalizeFunc;
 
+  @property() public description?: string;
+
+  @property({ attribute: "alternative_option_label" })
+  public alternativeOptionLabel?: string;
+
+  @property() public error?: string;
+
   @state() private _cameras?: QrScanner.Camera[];
 
-  @state() private _error?: string;
+  @state() private _manual = false;
 
   private _qrScanner?: QrScanner;
 
   private _qrNotFoundCount = 0;
 
-  @query("video", true) private _video!: HTMLVideoElement;
+  private _removeListener?: UnsubscribeFunc;
 
-  @query("#canvas-container", true) private _canvasContainer!: HTMLDivElement;
+  @query("video", true) private _video?: HTMLVideoElement;
+
+  @query("#canvas-container", true) private _canvasContainer?: HTMLDivElement;
 
   @query("ha-textfield") private _manualInput?: HaTextField;
 
   public disconnectedCallback(): void {
     super.disconnectedCallback();
     this._qrNotFoundCount = 0;
+    if (this._nativeBarcodeScanner) {
+      this._closeExternalScanner();
+    }
     if (this._qrScanner) {
       this._qrScanner.stop();
       this._qrScanner.destroy();
       this._qrScanner = undefined;
     }
-    while (this._canvasContainer.lastChild) {
+    while (this._canvasContainer?.lastChild) {
       this._canvasContainer.removeChild(this._canvasContainer.lastChild);
     }
   }
 
   public connectedCallback(): void {
     super.connectedCallback();
-    if (this.hasUpdated && navigator.mediaDevices) {
+    if (this.hasUpdated) {
       this._loadQrScanner();
     }
   }
 
   protected firstUpdated() {
-    if (navigator.mediaDevices) {
-      this._loadQrScanner();
-    }
+    this._loadQrScanner();
   }
 
   protected updated(changedProps: PropertyValues) {
-    if (changedProps.has("_error") && this._error) {
-      fireEvent(this, "qr-code-error", { message: this._error });
+    if (changedProps.has("error") && this.error) {
+      alert(`error: ${this.error}`);
+      this._notifyExternalScanner(this.error);
     }
   }
 
-  protected render(): TemplateResult {
-    return html`${this._error
-      ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+  protected render() {
+    if (this._nativeBarcodeScanner && !this._manual) {
+      return nothing;
+    }
+
+    return html`${this.error
+      ? html`<ha-alert alert-type="error">${this.error}</ha-alert>`
       : ""}
-    ${navigator.mediaDevices
+    ${navigator.mediaDevices && !this._manual
       ? html`<video></video>
           <div id="canvas-container">
             ${this._cameras && this._cameras.length > 1
@@ -80,21 +100,26 @@ class HaQrScanner extends LitElement {
                   ></ha-icon-button>
                   ${this._cameras!.map(
                     (camera) => html`
-                      <mwc-list-item
+                      <ha-list-item
                         .value=${camera.id}
                         @click=${this._cameraChanged}
-                        >${camera.label}</mwc-list-item
                       >
+                        ${camera.label}
+                      </ha-list-item>
                     `
                   )}
                 </ha-button-menu>`
-              : ""}
+              : nothing}
           </div>`
-      : html`<ha-alert alert-type="warning">
-            ${!window.isSecureContext
-              ? this.localize("ui.components.qr-scanner.only_https_supported")
-              : this.localize("ui.components.qr-scanner.not_supported")}
-          </ha-alert>
+      : html`${this._manual
+            ? nothing
+            : html`<ha-alert alert-type="warning">
+                ${!window.isSecureContext
+                  ? this.localize(
+                      "ui.components.qr-scanner.only_https_supported"
+                    )
+                  : this.localize("ui.components.qr-scanner.not_supported")}
+              </ha-alert>`}
           <p>${this.localize("ui.components.qr-scanner.manual_input")}</p>
           <div class="row">
             <ha-textfield
@@ -102,33 +127,44 @@ class HaQrScanner extends LitElement {
               @keyup=${this._manualKeyup}
               @paste=${this._manualPaste}
             ></ha-textfield>
-            <mwc-button @click=${this._manualSubmit}
-              >${this.localize("ui.common.submit")}</mwc-button
-            >
+            <mwc-button @click=${this._manualSubmit}>
+              ${this.localize("ui.common.submit")}
+            </mwc-button>
           </div>`}`;
   }
 
+  private get _nativeBarcodeScanner(): boolean {
+    return Boolean(this.hass.auth.external?.config.hasBarCodeScanner);
+  }
+
   private async _loadQrScanner() {
+    if (this._nativeBarcodeScanner) {
+      this._openExternalScanner();
+      return;
+    }
+    if (!navigator.mediaDevices) {
+      return;
+    }
     const QrScanner = (await import("qr-scanner")).default;
     if (!(await QrScanner.hasCamera())) {
-      this._error = "No camera found";
+      this._reportError("No camera found");
       return;
     }
     QrScanner.WORKER_PATH = "/static/js/qr-scanner-worker.min.js";
     this._listCameras(QrScanner);
     this._qrScanner = new QrScanner(
-      this._video,
+      this._video!,
       this._qrCodeScanned,
       this._qrCodeError
     );
     // @ts-ignore
     const canvas = this._qrScanner.$canvas;
-    this._canvasContainer.appendChild(canvas);
+    this._canvasContainer!.appendChild(canvas);
     canvas.style.display = "block";
     try {
       await this._qrScanner.start();
     } catch (err: any) {
-      this._error = err;
+      this._reportError(err);
     }
   }
 
@@ -140,16 +176,16 @@ class HaQrScanner extends LitElement {
     if (err === "No QR code found") {
       this._qrNotFoundCount++;
       if (this._qrNotFoundCount === 250) {
-        this._error = err;
+        this._reportError(err);
       }
       return;
     }
-    this._error = err.message || err;
+    this._reportError(err.message || err);
     // eslint-disable-next-line no-console
     console.log(err);
   };
 
-  private _qrCodeScanned = async (qrCodeString: string): Promise<void> => {
+  private _qrCodeScanned = (qrCodeString: string): void => {
     this._qrNotFoundCount = 0;
     fireEvent(this, "qr-code-scanned", { value: qrCodeString });
   };
@@ -175,6 +211,62 @@ class HaQrScanner extends LitElement {
     this._qrScanner?.setCamera((ev.target as any).value);
   }
 
+  private _openExternalScanner() {
+    this._removeListener = addExternalBarCodeListener((msg) => {
+      if (msg.command === "bar_code/scan_result") {
+        if (msg.payload.format !== "qr_code") {
+          this._notifyExternalScanner(
+            `Wrong barcode scanned! ${msg.payload.format}: ${msg.payload.rawValue}, we need a QR code.`
+          );
+        } else {
+          this._qrCodeScanned(msg.payload.rawValue);
+        }
+      } else if (msg.command === "bar_code/aborted") {
+        this._closeExternalScanner();
+        if (msg.payload.reason === "canceled") {
+          fireEvent(this, "qr-code-closed");
+        } else {
+          this._manual = true;
+        }
+      }
+      return true;
+    });
+    this.hass.auth.external!.fireMessage({
+      type: "bar_code/scan",
+      payload: {
+        title: this.title || "Scan QR code",
+        description: this.description || "Scan a barcode.",
+        alternative_option_label:
+          this.alternativeOptionLabel || "Click to manually enter the barcode",
+      },
+    });
+  }
+
+  private _closeExternalScanner() {
+    this._removeListener?.();
+    this._removeListener = undefined;
+    this.hass.auth.external!.fireMessage({
+      type: "bar_code/close",
+    });
+  }
+
+  private _notifyExternalScanner(message: string) {
+    if (!this.hass.auth.external) {
+      return;
+    }
+    this.hass.auth.external.fireMessage({
+      type: "bar_code/notify",
+      payload: {
+        message,
+      },
+    });
+    this.error = undefined;
+  }
+
+  private _reportError(message: string) {
+    fireEvent(this, "qr-code-error", { message });
+  }
+
   static styles = css`
     canvas {
       width: 100%;
@@ -210,6 +302,7 @@ declare global {
   interface HASSDomEvents {
     "qr-code-scanned": { value: string };
     "qr-code-error": { message: string };
+    "qr-code-closed": undefined;
   }
 
   interface HTMLElementTagNameMap {

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

@@ -35,10 +35,6 @@ export class HaActionSelector extends LitElement {
         display: block;
         margin-bottom: 16px;
       }
-      :host([disabled]) ha-automation-action {
-        opacity: var(--light-disabled-opacity);
-        pointer-events: none;
-      }
       label {
         display: block;
         margin-bottom: 4px;

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

@@ -11,6 +11,7 @@ import {
   fetchEntitySourcesWithCache,
 } from "../../data/entity_sources";
 import type { AreaSelector } from "../../data/selector";
+import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
 import {
   filterSelectorDevices,
   filterSelectorEntities,
@@ -37,6 +38,8 @@ export class HaAreaSelector extends LitElement {
 
   @state() private _entitySources?: EntitySources;
 
+  @state() private _configEntries?: ConfigEntry[];
+
   private _deviceIntegrationLookup = memoizeOne(getDeviceIntegrationLookup);
 
   private _hasIntegration(selector: AreaSelector) {
@@ -72,6 +75,12 @@ export class HaAreaSelector extends LitElement {
         this._entitySources = sources;
       });
     }
+    if (!this._configEntries && this._hasIntegration(this.selector)) {
+      this._configEntries = [];
+      getConfigEntries(this.hass).then((entries) => {
+        this._configEntries = entries;
+      });
+    }
   }
 
   protected render() {
@@ -136,7 +145,9 @@ export class HaAreaSelector extends LitElement {
     const deviceIntegrations = this._entitySources
       ? this._deviceIntegrationLookup(
           this._entitySources,
-          Object.values(this.hass.entities)
+          Object.values(this.hass.entities),
+          Object.values(this.hass.devices),
+          this._configEntries
         )
       : undefined;
 

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

@@ -35,10 +35,6 @@ export class HaConditionSelector extends LitElement {
         display: block;
         margin-bottom: 16px;
       }
-      :host([disabled]) ha-automation-condition {
-        opacity: var(--light-disabled-opacity);
-        pointer-events: none;
-      }
       label {
         display: block;
         margin-bottom: 4px;

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

@@ -11,6 +11,7 @@ import {
   fetchEntitySourcesWithCache,
 } from "../../data/entity_sources";
 import type { DeviceSelector } from "../../data/selector";
+import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
 import {
   filterSelectorDevices,
   filterSelectorEntities,
@@ -27,6 +28,8 @@ export class HaDeviceSelector extends LitElement {
 
   @state() private _entitySources?: EntitySources;
 
+  @state() private _configEntries?: ConfigEntry[];
+
   @property() public value?: any;
 
   @property() public label?: string;
@@ -75,6 +78,12 @@ export class HaDeviceSelector extends LitElement {
         this._entitySources = sources;
       });
     }
+    if (!this._configEntries && this._hasIntegration(this.selector)) {
+      this._configEntries = [];
+      getConfigEntries(this.hass).then((entries) => {
+        this._configEntries = entries;
+      });
+    }
   }
 
   protected render() {
@@ -123,7 +132,9 @@ export class HaDeviceSelector extends LitElement {
     const deviceIntegrations = this._entitySources
       ? this._deviceIntegrationLookup(
           this._entitySources,
-          Object.values(this.hass.entities)
+          Object.values(this.hass.entities),
+          Object.values(this.hass.devices),
+          this._configEntries
         )
       : undefined;
 

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

@@ -11,6 +11,7 @@ import {
   fetchEntitySourcesWithCache,
 } from "../../data/entity_sources";
 import type { FloorSelector } from "../../data/selector";
+import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
 import {
   filterSelectorDevices,
   filterSelectorEntities,
@@ -37,6 +38,8 @@ export class HaFloorSelector extends LitElement {
 
   @state() private _entitySources?: EntitySources;
 
+  @state() private _configEntries?: ConfigEntry[];
+
   private _deviceIntegrationLookup = memoizeOne(getDeviceIntegrationLookup);
 
   private _hasIntegration(selector: FloorSelector) {
@@ -72,6 +75,12 @@ export class HaFloorSelector extends LitElement {
         this._entitySources = sources;
       });
     }
+    if (!this._configEntries && this._hasIntegration(this.selector)) {
+      this._configEntries = [];
+      getConfigEntries(this.hass).then((entries) => {
+        this._configEntries = entries;
+      });
+    }
   }
 
   protected render() {
@@ -136,7 +145,9 @@ export class HaFloorSelector extends LitElement {
     const deviceIntegrations = this._entitySources
       ? this._deviceIntegrationLookup(
           this._entitySources,
-          Object.values(this.hass.entities)
+          Object.values(this.hass.entities),
+          Object.values(this.hass.devices),
+          this._configEntries
         )
       : undefined;
 

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

@@ -35,10 +35,6 @@ export class HaTriggerSelector extends LitElement {
         display: block;
         margin-bottom: 16px;
       }
-      :host([disabled]) ha-automation-trigger {
-        opacity: var(--light-disabled-opacity);
-        pointer-events: none;
-      }
       label {
         display: block;
         margin-bottom: 4px;

src/components/ha-service-control.ts

@@ -65,6 +65,8 @@ interface ExtHassService extends Omit<HassService, "fields"> {
     Omit<HassService["fields"][string], "selector"> & {
       key: string;
       selector?: Selector;
+      fields?: Record<string, Omit<HassService["fields"][string], "selector">>;
+      collapsed?: boolean;
     }
   >;
   hasSelector: string[];
@@ -247,20 +249,7 @@ export class HaServiceControl extends LitElement {
     }
   );
 
-  private _filterFields = memoizeOne(
-    (serviceData: ExtHassService | undefined, value: this["value"]) =>
-      serviceData?.fields?.filter(
-        (field) =>
-          !field.filter ||
-          this._filterField(serviceData.target, field.filter, value)
-      )
-  );
-
-  private _filterField(
-    target: ExtHassService["target"],
-    filter: ExtHassService["fields"][number]["filter"],
-    value: this["value"]
-  ) {
+  private _getTargetedEntities = memoizeOne((target, value) => {
     const targetSelector = target ? { target } : { target: {} };
     const targetEntities =
       ensureArray(
@@ -330,6 +319,13 @@ export class HaServiceControl extends LitElement {
         );
       });
     }
+    return targetEntities;
+  });
+
+  private _filterField(
+    filter: ExtHassService["fields"][number]["filter"],
+    targetEntities: string[]
+  ) {
     if (!targetEntities.length) {
       return false;
     }
@@ -391,7 +387,10 @@ export class HaServiceControl extends LitElement {
         serviceData?.fields.some((field) => showOptionalToggle(field))
     );
 
-    const filteredFields = this._filterFields(serviceData, this._value);
+    const targetEntities = this._getTargetedEntities(
+      serviceData?.target,
+      this._value
+    );
 
     const domain = this._value?.service
       ? computeDomain(this._value.service)
@@ -485,75 +484,115 @@ export class HaServiceControl extends LitElement {
           .defaultValue=${this._value?.data}
           @value-changed=${this._dataChanged}
         ></ha-yaml-editor>`
-      : filteredFields?.map((dataField) => {
-          const selector = dataField?.selector ?? { text: undefined };
-          const type = Object.keys(selector)[0];
-          const enhancedSelector = ["action", "condition", "trigger"].includes(
-            type
-          )
-            ? {
-                [type]: {
-                  ...selector[type],
-                  path: [dataField.key],
-                },
-              }
-            : selector;
-
-          const showOptional = showOptionalToggle(dataField);
-
-          return dataField.selector &&
-            (!dataField.advanced ||
-              this.showAdvanced ||
-              (this._value?.data &&
-                this._value.data[dataField.key] !== undefined))
-            ? html`<ha-settings-row .narrow=${this.narrow}>
-                ${!showOptional
-                  ? hasOptional
-                    ? html`<div slot="prefix" class="checkbox-spacer"></div>`
-                    : ""
-                  : html`<ha-checkbox
-                      .key=${dataField.key}
-                      .checked=${this._checkedKeys.has(dataField.key) ||
-                      (this._value?.data &&
-                        this._value.data[dataField.key] !== undefined)}
-                      .disabled=${this.disabled}
-                      @change=${this._checkboxChanged}
-                      slot="prefix"
-                    ></ha-checkbox>`}
-                <span slot="heading"
-                  >${this.hass.localize(
-                    `component.${domain}.services.${serviceName}.fields.${dataField.key}.name`
-                  ) ||
-                  dataField.name ||
-                  dataField.key}</span
-                >
-                <span slot="description"
-                  >${this.hass.localize(
-                    `component.${domain}.services.${serviceName}.fields.${dataField.key}.description`
-                  ) || dataField?.description}</span
-                >
-                <ha-selector
-                  .disabled=${this.disabled ||
-                  (showOptional &&
-                    !this._checkedKeys.has(dataField.key) &&
-                    (!this._value?.data ||
-                      this._value.data[dataField.key] === undefined))}
-                  .hass=${this.hass}
-                  .selector=${enhancedSelector}
-                  .key=${dataField.key}
-                  @value-changed=${this._serviceDataChanged}
-                  .value=${this._value?.data
-                    ? this._value.data[dataField.key]
-                    : undefined}
-                  .placeholder=${dataField.default}
-                  .localizeValue=${this._localizeValueCallback}
-                  @item-moved=${this._itemMoved}
-                ></ha-selector>
-              </ha-settings-row>`
-            : "";
-        })} `;
+      : serviceData?.fields.map((dataField) =>
+          dataField.fields
+            ? html`<ha-expansion-panel
+                leftChevron
+                .expanded=${!dataField.collapsed}
+                .header=${this.hass.localize(
+                  `component.${domain}.services.${serviceName}.sections.${dataField.key}.name`
+                ) ||
+                dataField.name ||
+                dataField.key}
+              >
+                ${Object.entries(dataField.fields).map(([key, field]) =>
+                  this._renderField(
+                    { key, ...field },
+                    hasOptional,
+                    domain,
+                    serviceName,
+                    targetEntities
+                  )
+                )}
+              </ha-expansion-panel>`
+            : this._renderField(
+                dataField,
+                hasOptional,
+                domain,
+                serviceName,
+                targetEntities
+              )
+        )} `;
   }
 
+  private _renderField = (
+    dataField: ExtHassService["fields"][number],
+    hasOptional: boolean,
+    domain: string | undefined,
+    serviceName: string | undefined,
+    targetEntities: string[]
+  ) => {
+    if (
+      dataField.filter &&
+      !this._filterField(dataField.filter, targetEntities)
+    ) {
+      return nothing;
+    }
+
+    const selector = dataField?.selector ?? { text: undefined };
+    const type = Object.keys(selector)[0];
+    const enhancedSelector = ["action", "condition", "trigger"].includes(type)
+      ? {
+          [type]: {
+            ...selector[type],
+            path: [dataField.key],
+          },
+        }
+      : selector;
+
+    const showOptional = showOptionalToggle(dataField);
+
+    return dataField.selector &&
+      (!dataField.advanced ||
+        this.showAdvanced ||
+        (this._value?.data && this._value.data[dataField.key] !== undefined))
+      ? html`<ha-settings-row .narrow=${this.narrow}>
+          ${!showOptional
+            ? hasOptional
+              ? html`<div slot="prefix" class="checkbox-spacer"></div>`
+              : ""
+            : html`<ha-checkbox
+                .key=${dataField.key}
+                .checked=${this._checkedKeys.has(dataField.key) ||
+                (this._value?.data &&
+                  this._value.data[dataField.key] !== undefined)}
+                .disabled=${this.disabled}
+                @change=${this._checkboxChanged}
+                slot="prefix"
+              ></ha-checkbox>`}
+          <span slot="heading"
+            >${this.hass.localize(
+              `component.${domain}.services.${serviceName}.fields.${dataField.key}.name`
+            ) ||
+            dataField.name ||
+            dataField.key}</span
+          >
+          <span slot="description"
+            >${this.hass.localize(
+              `component.${domain}.services.${serviceName}.fields.${dataField.key}.description`
+            ) || dataField?.description}</span
+          >
+          <ha-selector
+            .disabled=${this.disabled ||
+            (showOptional &&
+              !this._checkedKeys.has(dataField.key) &&
+              (!this._value?.data ||
+                this._value.data[dataField.key] === undefined))}
+            .hass=${this.hass}
+            .selector=${enhancedSelector}
+            .key=${dataField.key}
+            @value-changed=${this._serviceDataChanged}
+            .value=${this._value?.data
+              ? this._value.data[dataField.key]
+              : undefined}
+            .placeholder=${dataField.default}
+            .localizeValue=${this._localizeValueCallback}
+            @item-moved=${this._itemMoved}
+          ></ha-selector>
+        </ha-settings-row>`
+      : "";
+  };
+
   private _localizeValueCallback = (key: string) => {
     if (!this._value?.service) {
       return "";
@@ -839,6 +878,11 @@ export class HaServiceControl extends LitElement {
       .description p {
         direction: ltr;
       }
+      ha-expansion-panel {
+        --ha-card-border-radius: 0;
+        --expansion-panel-summary-padding: 0 16px;
+        --expansion-panel-content-padding: 0;
+      }
     `;
   }
 }

src/data/automation.ts

@@ -352,6 +352,22 @@ export const saveAutomationConfig = (
   config: AutomationConfig
 ) => hass.callApi<void>("POST", `config/automation/config/${id}`, config);
 
+export const normalizeAutomationConfig = <
+  T extends Partial<AutomationConfig> | AutomationConfig,
+>(
+  config: T
+): T => {
+  // Normalize data: ensure trigger, action and condition are lists
+  // Happens when people copy paste their automations into the config
+  for (const key of ["trigger", "condition", "action"]) {
+    const value = config[key];
+    if (value && !Array.isArray(value)) {
+      config[key] = [value];
+    }
+  }
+  return config;
+};
+
 export const showAutomationEditor = (data?: Partial<AutomationConfig>) => {
   initialAutomationEditorData = data;
   navigate("/config/automation/edit/new");

src/data/blueprint.ts

@@ -1,4 +1,6 @@
 import { HomeAssistant } from "../types";
+import { ManualAutomationConfig } from "./automation";
+import { ManualScriptConfig } from "./script";
 import { Selector } from "./selector";
 
 export type BlueprintDomain = "automation" | "script";
@@ -42,6 +44,11 @@ export interface BlueprintImportResult {
   validation_errors: string[] | null;
 }
 
+export interface BlueprintSubstituteResults {
+  automation: { substituted_config: ManualAutomationConfig };
+  script: { substituted_config: ManualScriptConfig };
+}
+
 export const fetchBlueprints = (hass: HomeAssistant, domain: BlueprintDomain) =>
   hass.callWS<Blueprints>({ type: "blueprint/list", domain });
 
@@ -91,3 +98,18 @@ export const getBlueprintSourceType = (
   }
   return "community";
 };
+
+export const substituteBlueprint = <
+  T extends BlueprintDomain = BlueprintDomain,
+>(
+  hass: HomeAssistant,
+  domain: T,
+  path: string,
+  input: Record<string, any>
+) =>
+  hass.callWS<BlueprintSubstituteResults[T]>({
+    type: "blueprint/substitute",
+    domain,
+    path,
+    input,
+  });

src/data/climate.ts

@@ -28,13 +28,14 @@ export type HvacMode = (typeof HVAC_MODES)[number];
 export const CLIMATE_PRESET_NONE = "none";
 
 export type HvacAction =
-  | "off"
-  | "preheating"
-  | "heating"
   | "cooling"
+  | "defrosting"
   | "drying"
+  | "fan"
+  | "heating"
   | "idle"
-  | "fan";
+  | "off"
+  | "preheating";
 
 export type ClimateEntity = HassEntityBase & {
   attributes: HassEntityAttributeBase & {
@@ -89,12 +90,13 @@ export const compareClimateHvacModes = (mode1: HvacMode, mode2: HvacMode) =>
 
 export const CLIMATE_HVAC_ACTION_TO_MODE: Record<HvacAction, HvacMode> = {
   cooling: "cool",
+  defrosting: "heat",
   drying: "dry",
   fan: "fan_only",
-  preheating: "heat",
   heating: "heat",
   idle: "off",
   off: "off",
+  preheating: "heat",
 };
 
 export const CLIMATE_HVAC_MODE_ICONS: Record<HvacMode, string> = {

src/data/device_registry.ts

@@ -5,6 +5,7 @@ import type {
   EntityRegistryDisplayEntry,
   EntityRegistryEntry,
 } from "./entity_registry";
+import { ConfigEntry } from "./config_entries";
 import type { EntitySources } from "./entity_sources";
 
 export {
@@ -142,9 +143,11 @@ export const getDeviceEntityDisplayLookup = (
 
 export const getDeviceIntegrationLookup = (
   entitySources: EntitySources,
-  entities: EntityRegistryDisplayEntry[] | EntityRegistryEntry[]
-): Record<string, string[]> => {
-  const deviceIntegrations: Record<string, string[]> = {};
+  entities: EntityRegistryDisplayEntry[] | EntityRegistryEntry[],
+  devices?: DeviceRegistryEntry[],
+  configEntries?: ConfigEntry[]
+): Record<string, Set<string>> => {
+  const deviceIntegrations: Record<string, Set<string>> = {};
 
   for (const entity of entities) {
     const source = entitySources[entity.entity_id];
@@ -152,10 +155,22 @@ export const getDeviceIntegrationLookup = (
       continue;
     }
 
-    if (!deviceIntegrations[entity.device_id!]) {
-      deviceIntegrations[entity.device_id!] = [];
+    deviceIntegrations[entity.device_id!] =
+      deviceIntegrations[entity.device_id!] || new Set<string>();
+    deviceIntegrations[entity.device_id!].add(source.domain);
+  }
+  // Lookup devices that have no entities
+  if (devices && configEntries) {
+    for (const device of devices) {
+      for (const config_entry_id of device.config_entries) {
+        const entry = configEntries.find((e) => e.entry_id === config_entry_id);
+        if (entry?.domain) {
+          deviceIntegrations[device.id] =
+            deviceIntegrations[device.id] || new Set<string>();
+          deviceIntegrations[device.id].add(entry.domain);
+        }
+      }
     }
-    deviceIntegrations[entity.device_id!].push(source.domain);
   }
   return deviceIntegrations;
 };

src/data/fan.ts

@@ -17,6 +17,8 @@ export const enum FanEntityFeature {
   OSCILLATE = 2,
   DIRECTION = 4,
   PRESET_MODE = 8,
+  TURN_OFF = 16,
+  TURN_ON = 32,
 }
 
 interface FanEntityAttributes extends HassEntityAttributeBase {

src/data/selector.ts

@@ -696,7 +696,7 @@ export const entityMeetsTargetSelector = (
 export const filterSelectorDevices = (
   filterDevice: DeviceSelectorFilter,
   device: DeviceRegistryEntry,
-  deviceIntegrationLookup?: Record<string, string[]> | undefined
+  deviceIntegrationLookup?: Record<string, Set<string>> | undefined
 ): boolean => {
   const {
     manufacturer: filterManufacturer,
@@ -713,7 +713,7 @@ export const filterSelectorDevices = (
   }
 
   if (filterIntegration && deviceIntegrationLookup) {
-    if (!deviceIntegrationLookup?.[device.id]?.includes(filterIntegration)) {
+    if (!deviceIntegrationLookup?.[device.id]?.has(filterIntegration)) {
       return false;
     }
   }

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

@@ -325,7 +325,7 @@ export class MoreInfoDialog extends LitElement {
                       ></ha-icon-button>
                     `
                   : nothing}
-                ${isAdmin
+                ${!__DEMO__ && isAdmin
                   ? html`
                       <ha-icon-button
                         slot="actionItems"

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

@@ -75,11 +75,13 @@ export class MoreInfoHistory extends LitElement {
             <div class="title">
               ${this.hass.localize("ui.dialogs.more_info_control.history")}
             </div>
-            <a href=${this._showMoreHref} @click=${this._close}
-              >${this.hass.localize(
-                "ui.dialogs.more_info_control.show_more"
-              )}</a
-            >
+            ${__DEMO__
+              ? nothing
+              : html`<a href=${this._showMoreHref} @click=${this._close}
+                  >${this.hass.localize(
+                    "ui.dialogs.more_info_control.show_more"
+                  )}</a
+                >`}
           </div>
           ${this._error
             ? html`<div class="errors">${this._error}</div>`

src/entrypoints/authorize.ts

@@ -1,7 +1,6 @@
 // Compat needs to be first import
 import "../resources/compatibility";
 import "../auth/ha-authorize";
-import "../resources/safari-14-attachshadow-patch";
 
 import("../resources/ha-style");
 import("@polymer/polymer/lib/utils/settings").then(

src/entrypoints/core.ts

@@ -25,7 +25,6 @@ import { subscribePanels } from "../data/ws-panels";
 import { subscribeThemes } from "../data/ws-themes";
 import { subscribeUser } from "../data/ws-user";
 import type { ExternalAuth } from "../external_app/external_auth";
-import "../resources/safari-14-attachshadow-patch";
 
 window.name = MAIN_WINDOW_NAME;
 (window as any).frontendVersion = __VERSION__;

src/entrypoints/custom-panel.ts

@@ -1,6 +1,5 @@
 // Compat needs to be first import
 import "../resources/compatibility";
-import "../resources/safari-14-attachshadow-patch";
 
 import { CSSResult } from "lit";
 import { fireEvent } from "../common/dom/fire_event";

src/entrypoints/onboarding.ts

@@ -1,7 +1,6 @@
 // Compat needs to be first import
 import "../resources/compatibility";
 import "../onboarding/ha-onboarding";
-import "../resources/safari-14-attachshadow-patch";
 
 import("../resources/ha-style");
 import("@polymer/polymer/lib/utils/settings").then(

src/fake_data/demo_panels.ts

@@ -66,10 +66,10 @@ export const demoPanels: Panels = {
   //   url_path: "history",
   // },
   map: {
-    component_name: "map",
+    component_name: "lovelace",
     icon: "hass:tooltip-account",
     title: "map",
-    config: null,
+    config: { mode: "storage" },
     url_path: "map",
   },
   energy: {

src/fake_data/entity.ts

@@ -10,6 +10,18 @@ const now = () => new Date().toISOString();
 const randomTime = () =>
   new Date(new Date().getTime() - Math.random() * 80 * 60 * 1000).toISOString();
 
+const CAPABILITY_ATTRIBUTES = [
+  "friendly_name",
+  "unit_of_measurement",
+  "icon",
+  "entity_picture",
+  "supported_features",
+  "hidden",
+  "assumed_state",
+  "device_class",
+  "state_class",
+  "restored",
+];
 export class Entity {
   public domain: string;
 
@@ -29,16 +41,28 @@ export class Entity {
 
   public hass?: any;
 
-  constructor(domain, objectId, state, baseAttributes) {
+  static CAPABILITY_ATTRIBUTES = new Set(CAPABILITY_ATTRIBUTES);
+
+  constructor(domain, objectId, state, attributes) {
     this.domain = domain;
     this.objectId = objectId;
     this.entityId = `${domain}.${objectId}`;
     this.lastChanged = randomTime();
     this.lastUpdated = randomTime();
     this.state = String(state);
+
     // These are the attributes that we always write to the state machine
+    const baseAttributes = {};
+    const capabilityAttributes =
+      TYPES[domain]?.CAPABILITY_ATTRIBUTES || Entity.CAPABILITY_ATTRIBUTES;
+    for (const key of Object.keys(attributes)) {
+      if (capabilityAttributes.has(key)) {
+        baseAttributes[key] = attributes[key];
+      }
+    }
+
     this.baseAttributes = baseAttributes;
-    this.attributes = baseAttributes;
+    this.attributes = attributes;
   }
 
   public async handleService(domain, service, data: Record<string, any>) {
@@ -54,7 +78,7 @@ export class Entity {
     this.lastUpdated = now();
     this.lastChanged =
       state === this.state ? this.lastChanged : this.lastUpdated;
-    this.attributes = { ...this.baseAttributes, ...attributes };
+    this.attributes = { ...this.attributes, ...attributes };
 
     // eslint-disable-next-line
     console.log("update", this.entityId, this);
@@ -68,7 +92,7 @@ export class Entity {
     return {
       entity_id: this.entityId,
       state: this.state,
-      attributes: this.attributes,
+      attributes: this.state === "off" ? this.baseAttributes : this.attributes,
       last_changed: this.lastChanged,
       last_updated: this.lastUpdated,
     };
@@ -76,6 +100,16 @@ export class Entity {
 }
 
 class LightEntity extends Entity {
+  static CAPABILITY_ATTRIBUTES = new Set([
+    ...CAPABILITY_ATTRIBUTES,
+    "min_color_temp_kelvin",
+    "max_color_temp_kelvin",
+    "min_mireds",
+    "max_mireds",
+    "effect_list",
+    "supported_color_modes",
+  ]);
+
   public async handleService(domain, service, data) {
     if (!["homeassistant", this.domain].includes(domain)) {
       return;
@@ -188,6 +222,12 @@ class AlarmControlPanelEntity extends Entity {
 }
 
 class MediaPlayerEntity extends Entity {
+  static CAPABILITY_ATTRIBUTES = new Set([
+    ...CAPABILITY_ATTRIBUTES,
+    "source_list",
+    "sound_mode_list",
+  ]);
+
   public async handleService(
     domain,
     service,
@@ -223,7 +263,11 @@ class CoverEntity extends Entity {
     if (service === "open_cover") {
       this.update("open");
     } else if (service === "close_cover") {
-      this.update("closing");
+      this.update("closed");
+    } else if (service === "set_cover_position") {
+      this.update(data.position > 0 ? "open" : "closed", {
+        current_position: data.position,
+      });
     } else {
       super.handleService(domain, service, data);
     }
@@ -288,6 +332,19 @@ class InputSelectEntity extends Entity {
 }
 
 class ClimateEntity extends Entity {
+  static CAPABILITY_ATTRIBUTES = new Set([
+    ...CAPABILITY_ATTRIBUTES,
+    "hvac_modes",
+    "min_temp",
+    "max_temp",
+    "target_temp_step",
+    "fan_modes",
+    "preset_modes",
+    "swing_modes",
+    "min_humidity",
+    "max_humidity",
+  ]);
+
   public async handleService(domain, service, data) {
     if (domain !== this.domain) {
       return;
@@ -357,6 +414,14 @@ class ClimateEntity extends Entity {
 }
 
 class WaterHeaterEntity extends Entity {
+  static CAPABILITY_ATTRIBUTES = new Set([
+    ...CAPABILITY_ATTRIBUTES,
+    "current_temperature",
+    "min_temp",
+    "max_temp",
+    "operation_list",
+  ]);
+
   public async handleService(domain, service, data) {
     if (domain !== this.domain) {
       return;
@@ -394,6 +459,7 @@ class GroupEntity extends Entity {
 }
 
 const TYPES = {
+  automation: ToggleEntity,
   alarm_control_panel: AlarmControlPanelEntity,
   climate: ClimateEntity,
   cover: CoverEntity,

src/fake_data/entity_component_icons.ts

@@ -907,6 +907,7 @@ export const ENTITY_COMPONENT_ICONS: Record<string, ComponentIcons> = {
             idle: "mdi:clock-outline",
             off: "mdi:power",
             preheating: "mdi:heat-wave",
+            defrosting: "mdi:snowflake-melt",
           },
         },
         preset_mode: {

src/fake_data/provide_hass.ts

@@ -278,6 +278,8 @@ export const provideHass = (
     // @ts-ignore
     async callService(domain, service, data) {
       if (data && "entity_id" in data) {
+        // eslint-disable-next-line
+        console.log("Entity service call", domain, service, data);
         await Promise.all(
           ensureArray(data.entity_id).map((ent) =>
             entities[ent].handleService(domain, service, data)

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

@@ -6,6 +6,7 @@ import {
   mdiArrowDown,
   mdiArrowUp,
   mdiClose,
+  mdiCog,
   mdiFilterVariant,
   mdiFilterVariantRemove,
   mdiFormatListChecks,
@@ -42,6 +43,7 @@ import "../components/search-input-outlined";
 import type { HomeAssistant, Route } from "../types";
 import "./hass-tabs-subpage";
 import type { PageNavigation } from "./hass-tabs-subpage";
+import { showDataTableSettingsDialog } from "../components/data-table/show-dialog-data-table-settings";
 
 @customElement("hass-tabs-subpage-data-table")
 export class HaTabsSubpageDataTable extends LitElement {
@@ -171,6 +173,10 @@ export class HaTabsSubpageDataTable extends LitElement {
 
   @property({ attribute: false }) public groupOrder?: string[];
 
+  @property({ attribute: false }) public columnOrder?: string[];
+
+  @property({ attribute: false }) public hiddenColumns?: string[];
+
   @state() private _sortColumn?: string;
 
   @state() private _sortDirection: SortingDirection = null;
@@ -290,6 +296,14 @@ export class HaTabsSubpageDataTable extends LitElement {
         `
       : nothing;
 
+    const settingsButton = html`<ha-assist-chip
+      class="has-dropdown select-mode-chip"
+      @click=${this._openSettings}
+      .title=${localize("ui.components.subpage-data-table.settings")}
+    >
+      <ha-svg-icon slot="icon" .path=${mdiCog}></ha-svg-icon>
+    </ha-assist-chip>`;
+
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
@@ -416,6 +430,8 @@ export class HaTabsSubpageDataTable extends LitElement {
                 : ""}
               <ha-data-table
                 .hass=${this.hass}
+                .localize=${localize}
+                .narrow=${this.narrow}
                 .columns=${this.columns}
                 .data=${this.data}
                 .noDataText=${this.noDataText}
@@ -430,6 +446,8 @@ export class HaTabsSubpageDataTable extends LitElement {
                 .groupColumn=${this._groupColumn}
                 .groupOrder=${this.groupOrder}
                 .initialCollapsedGroups=${this.initialCollapsedGroups}
+                .columnOrder=${this.columnOrder}
+                .hiddenColumns=${this.hiddenColumns}
               >
                 ${!this.narrow
                   ? html`
@@ -438,7 +456,7 @@ export class HaTabsSubpageDataTable extends LitElement {
                           <div class="table-header">
                             ${this.hasFilters && !this.showFilters
                               ? html`${filterButton}`
-                              : nothing}${selectModeBtn}${searchBar}${groupByMenu}${sortByMenu}
+                              : nothing}${selectModeBtn}${searchBar}${groupByMenu}${sortByMenu}${settingsButton}
                           </div>
                         </slot>
                       </div>
@@ -448,7 +466,7 @@ export class HaTabsSubpageDataTable extends LitElement {
                         ${this.hasFilters && !this.showFilters
                           ? html`${filterButton}`
                           : nothing}
-                        ${selectModeBtn}${groupByMenu}${sortByMenu}
+                        ${selectModeBtn}${groupByMenu}${sortByMenu}${settingsButton}
                       </div>`}
               </ha-data-table>`}
         <div slot="fab"><slot name="fab"></slot></div>
@@ -558,10 +576,9 @@ export class HaTabsSubpageDataTable extends LitElement {
             </div>
             <div slot="primaryAction">
               <ha-button @click=${this._toggleFilters}>
-                ${this.hass.localize(
-                  "ui.components.subpage-data-table.show_results",
-                  { number: this.data.length }
-                )}
+                ${localize("ui.components.subpage-data-table.show_results", {
+                  number: this.data.length,
+                })}
               </ha-button>
             </div>
           </ha-dialog>`
@@ -608,6 +625,23 @@ export class HaTabsSubpageDataTable extends LitElement {
     fireEvent(this, "grouping-changed", { value: columnId });
   }
 
+  private _openSettings() {
+    showDataTableSettingsDialog(this, {
+      columns: this.columns,
+      hiddenColumns: this.hiddenColumns,
+      columnOrder: this.columnOrder,
+      onUpdate: (
+        columnOrder: string[] | undefined,
+        hiddenColumns: string[] | undefined
+      ) => {
+        this.columnOrder = columnOrder;
+        this.hiddenColumns = hiddenColumns;
+        fireEvent(this, "columns-changed", { columnOrder, hiddenColumns });
+      },
+      localizeFunc: this.localizeFunc,
+    });
+  }
+
   private _collapseAllGroups() {
     this._dataTable.collapseAllGroups();
   }
@@ -874,6 +908,10 @@ declare global {
   interface HASSDomEvents {
     "search-changed": { value: string };
     "grouping-changed": { value: string };
+    "columns-changed": {
+      columnOrder: string[] | undefined;
+      hiddenColumns: string[] | undefined;
+    };
     "clear-filter": undefined;
   }
 }

src/onboarding/dialogs/community-dialog.ts

@@ -72,11 +72,11 @@ class DialogCommunity extends LitElement {
         <a
           target="_blank"
           rel="noreferrer noopener"
-          href="https://twitter.com/home_assistant"
+          href="https://x.com/home_assistant"
         >
           <ha-list-item hasMeta graphic="icon">
-            <img src="/static/images/logo_twitter.png" slot="graphic" />
-            ${this.localize("ui.panel.page-onboarding.welcome.twitter")}
+            <img class="x" src="/static/images/logo_x.svg" slot="graphic" />
+            ${this.localize("ui.panel.page-onboarding.welcome.x")}
             <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
           </ha-list-item>
         </a>
@@ -96,6 +96,12 @@ class DialogCommunity extends LitElement {
     a {
       text-decoration: none;
     }
+
+    @media (prefers-color-scheme: light) {
+      img.x {
+        filter: invert(1) hue-rotate(180deg);
+      }
+    }
   `;
 }
 

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

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import { mdiOpenInNew } from "@mdi/js";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
@@ -11,6 +10,7 @@ import "../../../components/ha-combo-box";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-markdown";
 import "../../../components/ha-textfield";
+import "../../../components/ha-button";
 import {
   ApplicationCredential,
   ApplicationCredentialsConfig,
@@ -231,10 +231,10 @@ export class DialogAddApplicationCredential extends LitElement {
               </div>
             `
           : html`
-              <mwc-button slot="primaryAction" @click=${this._abortDialog}>
+              <ha-button slot="secondaryAction" @click=${this._abortDialog}>
                 ${this.hass.localize("ui.common.cancel")}
-              </mwc-button>
-              <mwc-button
+              </ha-button>
+              <ha-button
                 slot="primaryAction"
                 .disabled=${!this._domain ||
                 !this._clientId ||
@@ -244,7 +244,7 @@ export class DialogAddApplicationCredential extends LitElement {
                 ${this.hass.localize(
                   "ui.panel.config.application_credentials.editor.add"
                 )}
-              </mwc-button>
+              </ha-button>
             `}
       </ha-dialog>
     `;

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

@@ -7,10 +7,12 @@ import { LocalizeFunc } from "../../../common/translations/localize";
 import {
   DataTableColumnContainer,
   SelectionChangedEvent,
+  SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-fab";
 import "../../../components/ha-help-tooltip";
 import "../../../components/ha-svg-icon";
+import "../../../components/ha-icon-overflow-menu";
 import {
   ApplicationCredential,
   deleteApplicationCredential,
@@ -26,6 +28,7 @@ import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-
 import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
 import { showAddApplicationCredentialDialog } from "./show-dialog-add-application-credential";
+import { storage } from "../../../common/decorators/storage";
 
 @customElement("ha-config-application-credentials")
 export class HaConfigApplicationCredentials extends LitElement {
@@ -44,14 +47,45 @@ export class HaConfigApplicationCredentials extends LitElement {
   @query("hass-tabs-subpage-data-table", true)
   private _dataTable!: HaTabsSubpageDataTable;
 
+  @storage({
+    key: "application-credentials-table-sort",
+    state: false,
+    subscribe: false,
+  })
+  private _activeSorting?: SortingChangedEvent;
+
+  @storage({
+    key: "application-credentials-table-column-order",
+    state: false,
+    subscribe: false,
+  })
+  private _activeColumnOrder?: string[];
+
+  @storage({
+    key: "application-credentials-table-hidden-columns",
+    state: false,
+    subscribe: false,
+  })
+  private _activeHiddenColumns?: string[];
+
+  @storage({
+    storage: "sessionStorage",
+    key: "application-credentials-table-search",
+    state: true,
+    subscribe: false,
+  })
+  private _filter = "";
+
   private _columns = memoizeOne(
-    (narrow: boolean, localize: LocalizeFunc): DataTableColumnContainer => {
+    (localize: LocalizeFunc): DataTableColumnContainer => {
       const columns: DataTableColumnContainer<ApplicationCredential> = {
         name: {
           title: localize(
             "ui.panel.config.application_credentials.picker.headers.name"
           ),
+          main: true,
           sortable: true,
+          filterable: true,
           direction: "asc",
           grows: true,
         },
@@ -59,17 +93,41 @@ export class HaConfigApplicationCredentials extends LitElement {
           title: localize(
             "ui.panel.config.application_credentials.picker.headers.client_id"
           ),
+          filterable: true,
           width: "30%",
-          hidden: narrow,
         },
         localizedDomain: {
           title: localize(
             "ui.panel.config.application_credentials.picker.headers.application"
           ),
           sortable: true,
+          filterable: true,
           width: "30%",
           direction: "asc",
         },
+        actions: {
+          title: "",
+          width: "64px",
+          type: "overflow-menu",
+          showNarrow: true,
+          hideable: false,
+          moveable: false,
+          template: (credential) => html`
+            <ha-icon-overflow-menu
+              .hass=${this.hass}
+              narrow
+              .items=${[
+                {
+                  path: mdiDelete,
+                  warning: true,
+                  label: this.hass.localize("ui.common.delete"),
+                  action: () => this._deleteCredential(credential),
+                },
+              ]}
+            >
+            </ha-icon-overflow-menu>
+          `,
+        },
       };
 
       return columns;
@@ -98,7 +156,7 @@ export class HaConfigApplicationCredentials extends LitElement {
         .route=${this.route}
         back-path="/config"
         .tabs=${configSections.devices}
-        .columns=${this._columns(this.narrow, this.hass.localize)}
+        .columns=${this._columns(this.hass.localize)}
         .data=${this._getApplicationCredentials(
           this._applicationCredentials,
           this.hass.localize
@@ -107,11 +165,18 @@ export class HaConfigApplicationCredentials extends LitElement {
         selectable
         .selected=${this._selected.length}
         @selection-changed=${this._handleSelectionChanged}
+        .initialSorting=${this._activeSorting}
+        .columnOrder=${this._activeColumnOrder}
+        .hiddenColumns=${this._activeHiddenColumns}
+        @columns-changed=${this._handleColumnsChanged}
+        @sorting-changed=${this._handleSortingChanged}
+        .filter=${this._filter}
+        @search-changed=${this._handleSearchChange}
       >
         <div class="header-btns" slot="selection-bar">
           ${!this.narrow
             ? html`
-                <mwc-button @click=${this._removeSelected} class="warning"
+                <mwc-button @click=${this._deleteSelected} class="warning"
                   >${this.hass.localize(
                     "ui.panel.config.application_credentials.picker.remove_selected.button"
                   )}</mwc-button
@@ -121,7 +186,7 @@ export class HaConfigApplicationCredentials extends LitElement {
                 <ha-icon-button
                   class="warning"
                   id="remove-btn"
-                  @click=${this._removeSelected}
+                  @click=${this._deleteSelected}
                   .path=${mdiDelete}
                   .label=${this.hass.localize("ui.common.remove")}
                 ></ha-icon-button>
@@ -153,7 +218,26 @@ export class HaConfigApplicationCredentials extends LitElement {
     this._selected = ev.detail.value;
   }
 
-  private _removeSelected() {
+  private _deleteCredential = async (credential) => {
+    const confirm = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        `ui.panel.config.application_credentials.picker.remove.confirm_title`
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.application_credentials.picker.remove_selected.confirm_text"
+      ),
+      confirmText: this.hass.localize("ui.common.delete"),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      destructive: true,
+    });
+    if (!confirm) {
+      return;
+    }
+    await deleteApplicationCredential(this.hass, credential.id);
+    await this._fetchApplicationCredentials();
+  };
+
+  private _deleteSelected() {
     showConfirmationDialog(this, {
       title: this.hass.localize(
         `ui.panel.config.application_credentials.picker.remove_selected.confirm_title`,
@@ -162,8 +246,9 @@ export class HaConfigApplicationCredentials extends LitElement {
       text: this.hass.localize(
         "ui.panel.config.application_credentials.picker.remove_selected.confirm_text"
       ),
-      confirmText: this.hass.localize("ui.common.remove"),
+      confirmText: this.hass.localize("ui.common.delete"),
       dismissText: this.hass.localize("ui.common.cancel"),
+      destructive: true,
       confirm: async () => {
         try {
           await Promise.all(
@@ -184,7 +269,7 @@ export class HaConfigApplicationCredentials extends LitElement {
           return;
         }
         this._dataTable.clearSelection();
-        this._fetchApplicationCredentials();
+        await this._fetchApplicationCredentials();
       },
     });
   }
@@ -212,6 +297,19 @@ export class HaConfigApplicationCredentials extends LitElement {
     });
   }
 
+  private _handleSortingChanged(ev: CustomEvent) {
+    this._activeSorting = ev.detail;
+  }
+
+  private _handleColumnsChanged(ev: CustomEvent) {
+    this._activeColumnOrder = ev.detail.columnOrder;
+    this._activeHiddenColumns = ev.detail.hiddenColumns;
+  }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       .table-header {
@@ -261,6 +359,9 @@ export class HaConfigApplicationCredentials extends LitElement {
         margin-inline-start: 8px;
         margin-inline-end: initial;
       }
+      .warning {
+        --mdc-theme-primary: var(--error-color);
+      }
     `;
   }
 }

src/panels/config/automation/add-automation-element-dialog.ts

@@ -18,6 +18,7 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { stringCompare } from "../../../common/string/compare";
+import { stripDiacritics } from "../../../common/string/strip-diacritics";
 import { LocalizeFunc } from "../../../common/translations/localize";
 import { deepEqual } from "../../../common/util/deep-equal";
 import "../../../components/ha-dialog";
@@ -50,6 +51,7 @@ import { TRIGGER_GROUPS, TRIGGER_ICONS } from "../../../data/trigger";
 import { HassDialog } from "../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
+import { getStripDiacriticsFn } from "../../../util/fuse";
 import {
   AddAutomationElementDialogParams,
   PASTE_VALUE,
@@ -208,9 +210,10 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
         isCaseSensitive: false,
         minMatchCharLength: Math.min(filter.length, 2),
         threshold: 0.2,
+        getFn: getStripDiacriticsFn,
       };
       const fuse = new Fuse(items, options);
-      return fuse.search(filter).map((result) => result.item);
+      return fuse.search(stripDiacritics(filter)).map((result) => result.item);
     }
   );
 

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

@@ -3,10 +3,10 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-alert";
+import "../../../components/ha-markdown";
 import { BlueprintAutomationConfig } from "../../../data/automation";
 import { fetchBlueprints } from "../../../data/blueprint";
 import { HaBlueprintGenericEditor } from "../blueprint/blueprint-generic-editor";
-import "../../../components/ha-markdown";
 
 @customElement("blueprint-automation-editor")
 export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
@@ -20,14 +20,6 @@ export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
 
   protected render() {
     return html`
-      ${this.disabled
-        ? html`<ha-alert alert-type="warning">
-            ${this.hass.localize("ui.panel.config.automation.editor.read_only")}
-            <mwc-button slot="action" @click=${this._duplicate}>
-              ${this.hass.localize("ui.panel.config.automation.editor.migrate")}
-            </mwc-button>
-          </ha-alert>`
-        : nothing}
       ${this.stateObj?.state === "off"
         ? html`
             <ha-alert alert-type="info">

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

@@ -6,6 +6,7 @@ import {
   mdiDebugStepOver,
   mdiDelete,
   mdiDotsVertical,
+  mdiFileEdit,
   mdiInformationOutline,
   mdiPlay,
   mdiPlayCircleOutline,
@@ -40,10 +41,12 @@ import "../../../components/ha-yaml-editor";
 import {
   AutomationConfig,
   AutomationEntity,
+  BlueprintAutomationConfig,
   deleteAutomation,
   fetchAutomationFileConfig,
   getAutomationEditorInitData,
   getAutomationStateConfig,
+  normalizeAutomationConfig,
   saveAutomationConfig,
   showAutomationEditor,
   triggerAutomationActions,
@@ -65,6 +68,7 @@ import { showAutomationModeDialog } from "./automation-mode-dialog/show-dialog-a
 import { showAutomationRenameDialog } from "./automation-rename-dialog/show-dialog-automation-rename";
 import "./blueprint-automation-editor";
 import "./manual-automation-editor";
+import { substituteBlueprint } from "../../../data/blueprint";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -77,9 +81,9 @@ declare global {
       unsub?: UnsubscribeFunc;
     };
     "ui-mode-not-available": Error;
-    duplicate: undefined;
     "move-down": undefined;
     "move-up": undefined;
+    duplicate: undefined;
   }
 }
 
@@ -112,6 +116,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
   @state() private _validationErrors?: (string | TemplateResult)[];
 
+  @state() private _blueprintConfig?: BlueprintAutomationConfig;
+
   private _configSubscriptions: Record<
     string,
     (config?: AutomationConfig) => void
@@ -196,7 +202,9 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
           <ha-list-item
             graphic="icon"
             @click=${this._promptAutomationAlias}
-            .disabled=${!this.automationId || this._mode === "yaml"}
+            .disabled=${this._readOnly ||
+            !this.automationId ||
+            this._mode === "yaml"}
           >
             ${this.hass.localize("ui.panel.config.automation.editor.rename")}
             <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
@@ -220,7 +228,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             : nothing}
 
           <ha-list-item
-            .disabled=${!this._readOnly && !this.automationId}
+            .disabled=${this._blueprintConfig ||
+            (!this._readOnly && !this.automationId)}
             graphic="icon"
             @click=${this._duplicate}
           >
@@ -235,6 +244,24 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             ></ha-svg-icon>
           </ha-list-item>
 
+          ${useBlueprint
+            ? html`
+                <ha-list-item
+                  graphic="icon"
+                  @click=${this._takeControl}
+                  .disabled=${this._readOnly}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.editor.take_control"
+                  )}
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiFileEdit}
+                  ></ha-svg-icon>
+                </ha-list-item>
+              `
+            : nothing}
+
           <li divider role="separator"></li>
 
           <ha-list-item graphic="icon" @click=${this._switchUiMode}>
@@ -315,6 +342,32 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                   : nothing}
               </ha-alert>`
             : ""}
+          ${this._blueprintConfig
+            ? html`<ha-alert alert-type="info">
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.confirm_take_control"
+                )}
+                <div slot="action" style="display: flex;">
+                  <mwc-button @click=${this._takeControlSave}
+                    >${this.hass.localize("ui.common.yes")}</mwc-button
+                  >
+                  <mwc-button @click=${this._revertBlueprint}
+                    >${this.hass.localize("ui.common.no")}</mwc-button
+                  >
+                </div>
+              </ha-alert>`
+            : this._readOnly
+              ? html`<ha-alert alert-type="warning" dismissable
+                  >${this.hass.localize(
+                    "ui.panel.config.automation.editor.read_only"
+                  )}
+                  <mwc-button slot="action" @click=${this._duplicate}>
+                    ${this.hass.localize(
+                      "ui.panel.config.automation.editor.migrate"
+                    )}
+                  </mwc-button>
+                </ha-alert>`
+              : nothing}
           ${this._mode === "gui"
             ? html`
                 <div
@@ -332,7 +385,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                           .config=${this._config}
                           .disabled=${Boolean(this._readOnly)}
                           @value-changed=${this._valueChanged}
-                          @duplicate=${this._duplicate}
                         ></blueprint-automation-editor>
                       `
                     : html`
@@ -344,25 +396,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                           .config=${this._config}
                           .disabled=${Boolean(this._readOnly)}
                           @value-changed=${this._valueChanged}
-                          @duplicate=${this._duplicate}
                         ></manual-automation-editor>
                       `}
                 </div>
               `
             : this._mode === "yaml"
-              ? html` ${this._readOnly
-                    ? html`<ha-alert alert-type="warning">
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.editor.read_only"
-                        )}
-                        <mwc-button slot="action" @click=${this._duplicate}>
-                          ${this.hass.localize(
-                            "ui.panel.config.automation.editor.migrate"
-                          )}
-                        </mwc-button>
-                      </ha-alert>`
-                    : nothing}
-                  ${stateObj?.state === "off"
+              ? html`${stateObj?.state === "off"
                     ? html`
                         <ha-alert alert-type="info">
                           ${this.hass.localize(
@@ -387,7 +426,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         </div>
         <ha-fab
           slot="fab"
-          class=${classMap({ dirty: this._dirty })}
+          class=${classMap({ dirty: !this._readOnly && this._dirty })}
           .label=${this.hass.localize("ui.panel.config.automation.editor.save")}
           extended
           @click=${this._saveAutomation}
@@ -432,7 +471,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
       }
       this._config = {
         ...baseConfig,
-        ...initData,
+        ...(initData ? normalizeAutomationConfig(initData) : initData),
       } as AutomationConfig;
       this._entityId = undefined;
       this._readOnly = false;
@@ -441,7 +480,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
     if (changedProps.has("entityId") && this.entityId) {
       getAutomationStateConfig(this.hass, this.entityId).then((c) => {
-        this._config = this._normalizeConfig(c.config);
+        this._config = normalizeAutomationConfig(c.config);
         this._checkValidation();
       });
       this._entityId = this.entityId;
@@ -497,18 +536,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     );
   }
 
-  private _normalizeConfig(config: AutomationConfig): AutomationConfig {
-    // Normalize data: ensure trigger, action and condition are lists
-    // Happens when people copy paste their automations into the config
-    for (const key of ["trigger", "condition", "action"]) {
-      const value = config[key];
-      if (value && !Array.isArray(value)) {
-        config[key] = [value];
-      }
-    }
-    return config;
-  }
-
   private async _loadConfig() {
     try {
       const config = await fetchAutomationFileConfig(
@@ -517,7 +544,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
       );
       this._dirty = false;
       this._readOnly = false;
-      this._config = this._normalizeConfig(config);
+      this._config = normalizeAutomationConfig(config);
       this._checkValidation();
     } catch (err: any) {
       const entityRegistry = await fetchEntityRegistry(this.hass.connection);
@@ -638,6 +665,51 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     }
   };
 
+  private async _takeControl() {
+    const config = this._config as BlueprintAutomationConfig;
+
+    try {
+      const result = await substituteBlueprint(
+        this.hass,
+        "automation",
+        config.use_blueprint.path,
+        config.use_blueprint.input || {}
+      );
+
+      const newConfig = {
+        ...normalizeAutomationConfig(result.substituted_config),
+        id: config.id,
+        alias: config.alias,
+        description: config.description,
+      };
+
+      this._blueprintConfig = config;
+      this._config = newConfig;
+      if (this._mode === "yaml") {
+        this.renderRoot.querySelector("ha-yaml-editor")?.setValue(this._config);
+      }
+      this._readOnly = true;
+      this._errors = undefined;
+    } catch (err: any) {
+      this._errors = err.message;
+    }
+  }
+
+  private _revertBlueprint() {
+    this._config = this._blueprintConfig;
+    if (this._mode === "yaml") {
+      this.renderRoot.querySelector("ha-yaml-editor")?.setValue(this._config);
+    }
+    this._blueprintConfig = undefined;
+    this._readOnly = false;
+  }
+
+  private _takeControlSave() {
+    this._readOnly = false;
+    this._dirty = true;
+    this._blueprintConfig = undefined;
+  }
+
   private async _duplicate() {
     const result = this._readOnly
       ? await showConfirmationDialog(this, {
@@ -770,10 +842,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
           padding-bottom: 0;
         }
         manual-automation-editor,
-        blueprint-automation-editor {
+        blueprint-automation-editor,
+        :not(.yaml-mode) > ha-alert {
           margin: 0 auto;
           max-width: 1040px;
           padding: 28px 20px 0;
+          display: block;
         }
         ha-yaml-editor {
           flex-grow: 1;

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

@@ -68,6 +68,7 @@ import "../../../components/ha-icon-overflow-menu";
 import "../../../components/ha-menu";
 import type { HaMenu } from "../../../components/ha-menu";
 import "../../../components/ha-menu-item";
+import type { HaMenuItem } from "../../../components/ha-menu-item";
 import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import { createAreaRegistryEntry } from "../../../data/area_registry";
@@ -192,6 +193,20 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
   })
   private _activeCollapsed?: string;
 
+  @storage({
+    key: "automation-table-column-order",
+    state: false,
+    subscribe: false,
+  })
+  private _activeColumnOrder?: string[];
+
+  @storage({
+    key: "automation-table-hidden-columns",
+    state: false,
+    subscribe: false,
+  })
+  private _activeHiddenColumns?: string[];
+
   @query("#overflow-menu") private _overflowMenu!: HaMenu;
 
   private _sizeController = new ResizeController(this, {
@@ -251,8 +266,10 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
       const columns: DataTableColumnContainer<AutomationItem> = {
         icon: {
           title: "",
-          label: localize("ui.panel.config.automation.picker.headers.state"),
+          label: localize("ui.panel.config.automation.picker.headers.icon"),
           type: "icon",
+          moveable: false,
+          showNarrow: true,
           template: (automation) =>
             html`<ha-state-icon
               .hass=${this.hass}
@@ -272,30 +289,13 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           filterable: true,
           direction: "asc",
           grows: true,
-          template: (automation) => {
-            const date = new Date(automation.attributes.last_triggered);
-            const now = new Date();
-            const dayDifference = differenceInDays(now, date);
-            return html`
-              <div style="font-size: 14px;">${automation.name}</div>
-              ${narrow
-                ? html`<div class="secondary">
-                    ${this.hass.localize("ui.card.automation.last_triggered")}:
-                    ${automation.attributes.last_triggered
-                      ? dayDifference > 3
-                        ? formatShortDateTime(date, locale, this.hass.config)
-                        : relativeTime(date, locale)
-                      : localize("ui.components.relative_time.never")}
-                  </div>`
-                : nothing}
-              ${automation.labels.length
-                ? html`<ha-data-table-labels
-                    @label-clicked=${this._labelClicked}
-                    .labels=${automation.labels}
-                  ></ha-data-table-labels>`
-                : nothing}
-            `;
-          },
+          extraTemplate: (automation) =>
+            automation.labels.length
+              ? html`<ha-data-table-labels
+                  @label-clicked=${this._labelClicked}
+                  .labels=${automation.labels}
+                ></ha-data-table-labels>`
+              : nothing,
         },
         area: {
           title: localize("ui.panel.config.automation.picker.headers.area"),
@@ -322,7 +322,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           sortable: true,
           width: "130px",
           title: localize("ui.card.automation.last_triggered"),
-          hidden: narrow,
           template: (automation) => {
             if (!automation.last_triggered) {
               return this.hass.localize("ui.components.relative_time.never");
@@ -341,9 +340,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           width: "82px",
           sortable: true,
           groupable: true,
+          hidden: narrow,
           title: "",
           type: "overflow",
-          hidden: narrow,
           label: this.hass.localize("ui.panel.config.automation.picker.state"),
           template: (automation) => html`
             <ha-entity-toggle
@@ -356,6 +355,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           title: "",
           width: "64px",
           type: "icon-button",
+          showNarrow: true,
+          moveable: false,
+          hideable: false,
           template: (automation) => html`
             <ha-icon-button
               .automation=${automation}
@@ -545,6 +547,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         .initialGroupColumn=${this._activeGrouping || "category"}
         .initialCollapsedGroups=${this._activeCollapsed}
         .initialSorting=${this._activeSorting}
+        .columnOrder=${this._activeColumnOrder}
+        .hiddenColumns=${this._activeHiddenColumns}
+        @columns-changed=${this._handleColumnsChanged}
         @sorting-changed=${this._handleSortingChanged}
         @grouping-changed=${this._handleGroupingChanged}
         @collapsed-changed=${this._handleCollapseChanged}
@@ -822,7 +827,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         </ha-fab>
       </hass-tabs-subpage-data-table>
       <ha-menu id="overflow-menu" positioning="fixed">
-        <ha-menu-item @click=${this._showInfo}>
+        <ha-menu-item .clickAction=${this._showInfo}>
           <ha-svg-icon
             .path=${mdiInformationOutline}
             slot="start"
@@ -832,7 +837,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           </div>
         </ha-menu-item>
 
-        <ha-menu-item @click=${this._showSettings}>
+        <ha-menu-item .clickAction=${this._showSettings}>
           <ha-svg-icon .path=${mdiCog} slot="start"></ha-svg-icon>
           <div slot="headline">
             ${this.hass.localize(
@@ -840,7 +845,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
             )}
           </div>
         </ha-menu-item>
-        <ha-menu-item @click=${this._editCategory}>
+        <ha-menu-item .clickAction=${this._editCategory}>
           <ha-svg-icon .path=${mdiTag} slot="start"></ha-svg-icon>
           <div slot="headline">
             ${this.hass.localize(
@@ -848,13 +853,13 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
             )}
           </div>
         </ha-menu-item>
-        <ha-menu-item @click=${this._runActions}>
+        <ha-menu-item .clickAction=${this._runActions}>
           <ha-svg-icon .path=${mdiPlay} slot="start"></ha-svg-icon>
           <div slot="headline">
             ${this.hass.localize("ui.panel.config.automation.editor.run")}
           </div>
         </ha-menu-item>
-        <ha-menu-item @click=${this._showTrace}>
+        <ha-menu-item .clickAction=${this._showTrace}>
           <ha-svg-icon .path=${mdiTransitConnection} slot="start"></ha-svg-icon>
           <div slot="headline">
             ${this.hass.localize(
@@ -863,13 +868,13 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           </div>
         </ha-menu-item>
         <md-divider role="separator" tabindex="-1"></md-divider>
-        <ha-menu-item @click=${this._duplicate}>
+        <ha-menu-item .clickAction=${this._duplicate}>
           <ha-svg-icon .path=${mdiContentDuplicate} slot="start"></ha-svg-icon>
           <div slot="headline">
             ${this.hass.localize("ui.panel.config.automation.picker.duplicate")}
           </div>
         </ha-menu-item>
-        <ha-menu-item @click=${this._toggle}>
+        <ha-menu-item .clickAction=${this._toggle}>
           <ha-svg-icon
             .path=${
               this._overflowAutomation?.state === "off"
@@ -888,7 +893,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
             }
           </div>
         </ha-menu-item>
-        <ha-menu-item @click=${this._deleteConfirm} class="warning">
+        <ha-menu-item .clickAction=${this._deleteConfirm} class="warning">
           <ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
           <div slot="headline">
             ${this.hass.localize("ui.panel.config.automation.picker.delete")}
@@ -1051,28 +1056,32 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     this._applyFilters();
   }
 
-  private _showInfo(ev) {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+  private _showInfo = (item: HaMenuItem) => {
+    const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
+      .automation;
     fireEvent(this, "hass-more-info", { entityId: automation.entity_id });
-  }
+  };
 
-  private _showSettings(ev) {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+  private _showSettings = (item: HaMenuItem) => {
+    const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
+      .automation;
 
     fireEvent(this, "hass-more-info", {
       entityId: automation.entity_id,
       view: "settings",
     });
-  }
+  };
 
-  private _runActions(ev) {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+  private _runActions = (item: HaMenuItem) => {
+    const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
+      .automation;
 
     triggerAutomationActions(this.hass, automation.entity_id);
-  }
+  };
 
-  private _editCategory(ev) {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+  private _editCategory = (item: HaMenuItem) => {
+    const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
+      .automation;
 
     const entityReg = this._entityReg.find(
       (reg) => reg.entity_id === automation.entity_id
@@ -1092,10 +1101,11 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
       scope: "automation",
       entityReg,
     });
-  }
+  };
 
-  private _showTrace(ev) {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+  private _showTrace = (item: HaMenuItem) => {
+    const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
+      .automation;
 
     if (!automation.attributes.id) {
       showAlertDialog(this, {
@@ -1108,19 +1118,21 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     navigate(
       `/config/automation/trace/${encodeURIComponent(automation.attributes.id)}`
     );
-  }
+  };
 
-  private async _toggle(ev): Promise<void> {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+  private _toggle = async (item: HaMenuItem): Promise<void> => {
+    const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
+      .automation;
 
     const service = automation.state === "off" ? "turn_on" : "turn_off";
     await this.hass.callService("automation", service, {
       entity_id: automation.entity_id,
     });
-  }
+  };
 
-  private async _deleteConfirm(ev) {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+  private _deleteConfirm = async (item: HaMenuItem) => {
+    const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
+      .automation;
 
     showConfirmationDialog(this, {
       title: this.hass.localize(
@@ -1135,7 +1147,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
       confirm: () => this._delete(automation),
       destructive: true,
     });
-  }
+  };
 
   private async _delete(automation) {
     try {
@@ -1155,8 +1167,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     }
   }
 
-  private async _duplicate(ev) {
-    const automation = ev.currentTarget.parentElement.anchorElement.automation;
+  private _duplicate = async (item: HaMenuItem) => {
+    const automation = ((item.parentElement as HaMenu)!.anchorElement as any)!
+      .automation;
 
     try {
       const config = await fetchAutomationFileConfig(
@@ -1180,7 +1193,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
         ),
       });
     }
-  }
+  };
 
   private _showHelp() {
     showAlertDialog(this, {
@@ -1415,6 +1428,11 @@ ${rejected
     this._activeCollapsed = ev.detail.value;
   }
 
+  private _handleColumnsChanged(ev: CustomEvent) {
+    this._activeColumnOrder = ev.detail.columnOrder;
+    this._activeHiddenColumns = ev.detail.hiddenColumns;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

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

@@ -38,14 +38,6 @@ export class HaManualAutomationEditor extends LitElement {
 
   protected render() {
     return html`
-      ${this.disabled
-        ? html`<ha-alert alert-type="warning">
-            ${this.hass.localize("ui.panel.config.automation.editor.read_only")}
-            <mwc-button slot="action" @click=${this._duplicate}>
-              ${this.hass.localize("ui.panel.config.automation.editor.migrate")}
-            </mwc-button>
-          </ha-alert>`
-        : nothing}
       ${this.stateObj?.state === "off"
         ? html`
             <ha-alert alert-type="info">
@@ -238,10 +230,6 @@ export class HaManualAutomationEditor extends LitElement {
     });
   }
 
-  private _duplicate() {
-    fireEvent(this, "duplicate");
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -280,12 +268,6 @@ export class HaManualAutomationEditor extends LitElement {
           font-weight: normal;
           line-height: 0;
         }
-        ha-alert.re-order {
-          display: block;
-          margin-bottom: 16px;
-          border-radius: var(--ha-card-border-radius, 12px);
-          overflow: hidden;
-        }
       `,
     ];
   }

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

@@ -60,14 +60,19 @@ class HaConfigBackup extends LitElement {
         sortable: true,
         filterable: true,
         grows: true,
-        template: (backup) =>
-          html`${backup.name}
-            <div class="secondary">${backup.path}</div>`,
+        template: narrow
+          ? undefined
+          : (backup) =>
+              html`${backup.name}
+                <div class="secondary">${backup.path}</div>`,
+      },
+      path: {
+        title: localize("ui.panel.config.backup.path"),
+        hidden: !narrow,
       },
       size: {
         title: localize("ui.panel.config.backup.size"),
         width: "15%",
-        hidden: narrow,
         filterable: true,
         sortable: true,
         template: (backup) => Math.ceil(backup.size * 10) / 10 + " MB",
@@ -76,7 +81,6 @@ class HaConfigBackup extends LitElement {
         title: localize("ui.panel.config.backup.created"),
         width: "15%",
         direction: "desc",
-        hidden: narrow,
         filterable: true,
         sortable: true,
         template: (backup) =>
@@ -87,6 +91,9 @@ class HaConfigBackup extends LitElement {
         title: "",
         width: "15%",
         type: "overflow-menu",
+        showNarrow: true,
+        hideable: false,
+        moveable: false,
         template: (backup) =>
           html`<ha-icon-overflow-menu
             .hass=${this.hass}

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

@@ -3,7 +3,6 @@ import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { nestedArrayMove } from "../../../common/util/array-move";
-import "../../../components/ha-alert";
 import "../../../components/ha-blueprint-picker";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
@@ -126,14 +125,14 @@ export abstract class HaBlueprintGenericEditor extends LitElement {
       );
     const expanded = !section.collapsed || anyRequired;
 
-    return html` <ha-expansion-panel
+    return html`<ha-expansion-panel
       outlined
       .expanded=${expanded}
       .noCollapse=${anyRequired}
     >
       <div slot="header" role="heading" aria-level="3" class="section-header">
         ${section?.icon
-          ? html` <ha-icon
+          ? html`<ha-icon
               class="section-header"
               .icon=${section.icon}
             ></ha-icon>`
@@ -261,10 +260,6 @@ export abstract class HaBlueprintGenericEditor extends LitElement {
     });
   }
 
-  protected _duplicate() {
-    fireEvent(this, "duplicate");
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -318,14 +313,6 @@ export abstract class HaBlueprintGenericEditor extends LitElement {
           margin-left: 8px;
           margin-right: 8px;
         }
-        ha-alert {
-          margin-bottom: 16px;
-          display: block;
-        }
-        ha-alert.re-order {
-          border-radius: var(--ha-card-border-radius, 12px);
-          overflow: hidden;
-        }
         div.section-header {
           display: flex;
           vertical-align: middle;
@@ -333,6 +320,10 @@ export abstract class HaBlueprintGenericEditor extends LitElement {
         ha-icon.section-header {
           padding-right: 10px;
         }
+        ha-alert {
+          display: block;
+          margin-bottom: 16px;
+        }
       `,
     ];
   }

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -107,6 +107,20 @@ class HaBlueprintOverview extends LitElement {
   })
   private _activeCollapsed?: string;
 
+  @storage({
+    key: "blueprint-table-column-order",
+    state: false,
+    subscribe: false,
+  })
+  private _activeColumnOrder?: string[];
+
+  @storage({
+    key: "blueprint-table-hidden-columns",
+    state: false,
+    subscribe: false,
+  })
+  private _activeHiddenColumns?: string[];
+
   @storage({
     storage: "sessionStorage",
     key: "blueprint-table-search",
@@ -154,8 +168,6 @@ class HaBlueprintOverview extends LitElement {
 
   private _columns = memoizeOne(
     (
-      narrow,
-      _language,
       localize: LocalizeFunc
     ): DataTableColumnContainer<BlueprintMetaDataPath> => ({
       name: {
@@ -165,19 +177,12 @@ class HaBlueprintOverview extends LitElement {
         filterable: true,
         direction: "asc",
         grows: true,
-        template: narrow
-          ? (blueprint) => html`
-              ${blueprint.name}<br />
-              <div class="secondary">${blueprint.path}</div>
-            `
-          : undefined,
       },
       translated_type: {
         title: localize("ui.panel.config.blueprint.overview.headers.type"),
         sortable: true,
         filterable: true,
         groupable: true,
-        hidden: narrow,
         direction: "asc",
         width: "10%",
       },
@@ -185,7 +190,6 @@ class HaBlueprintOverview extends LitElement {
         title: localize("ui.panel.config.blueprint.overview.headers.file_name"),
         sortable: true,
         filterable: true,
-        hidden: narrow,
         direction: "asc",
         width: "25%",
       },
@@ -197,6 +201,9 @@ class HaBlueprintOverview extends LitElement {
         title: "",
         width: this.narrow ? undefined : "10%",
         type: "overflow-menu",
+        showNarrow: true,
+        moveable: false,
+        hideable: false,
         template: (blueprint) =>
           blueprint.error
             ? html`<ha-svg-icon
@@ -280,11 +287,7 @@ class HaBlueprintOverview extends LitElement {
         back-path="/config"
         .route=${this.route}
         .tabs=${configSections.automations}
-        .columns=${this._columns(
-          this.narrow,
-          this.hass.language,
-          this.hass.localize
-        )}
+        .columns=${this._columns(this.hass.localize)}
         .data=${this._processedBlueprints(this.blueprints, this.hass.localize)}
         id="fullpath"
         .noDataText=${this.hass.localize(
@@ -313,6 +316,9 @@ class HaBlueprintOverview extends LitElement {
         .initialGroupColumn=${this._activeGrouping}
         .initialCollapsedGroups=${this._activeCollapsed}
         .initialSorting=${this._activeSorting}
+        .columnOrder=${this._activeColumnOrder}
+        .hiddenColumns=${this._activeHiddenColumns}
+        @columns-changed=${this._handleColumnsChanged}
         @sorting-changed=${this._handleSortingChanged}
         @grouping-changed=${this._handleGroupingChanged}
         @collapsed-changed=${this._handleCollapseChanged}
@@ -556,6 +562,11 @@ class HaBlueprintOverview extends LitElement {
     this._filter = ev.detail.value;
   }
 
+  private _handleColumnsChanged(ev: CustomEvent) {
+    this._activeColumnOrder = ev.detail.columnOrder;
+    this._activeHiddenColumns = ev.detail.hiddenColumns;
+  }
+
   static get styles(): CSSResultGroup {
     return haStyle;
   }

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

@@ -61,32 +61,32 @@ const randomTip = (hass: HomeAssistant, narrow: boolean) => {
           href="https://community.home-assistant.io"
           target="_blank"
           rel="noreferrer"
-          >Forums</a
+          >${hass.localize("ui.panel.config.tips.join_forums")}</a
         >`,
         twitter: html`<a
           href=${documentationUrl(hass, `/twitter`)}
           target="_blank"
           rel="noreferrer"
-          >Twitter</a
+          >${hass.localize("ui.panel.config.tips.join_x")}</a
         >`,
         discord: html`<a
           href=${documentationUrl(hass, `/join-chat`)}
           target="_blank"
           rel="noreferrer"
-          >Chat</a
+          >${hass.localize("ui.panel.config.tips.join_chat")}</a
         >`,
         blog: html`<a
           href=${documentationUrl(hass, `/blog`)}
           target="_blank"
           rel="noreferrer"
-          >Blog</a
+          >${hass.localize("ui.panel.config.tips.join_blog")}</a
         >`,
         newsletter: html`<span class="keep-together"
           ><a
             href="https://newsletter.openhomefoundation.org/"
             target="_blank"
             rel="noreferrer"
-            >Newsletter</a
+            >${hass.localize("ui.panel.config.tips.join_newsletter")}</a
           >
         </span>`,
       }),

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

@@ -1,6 +1,5 @@
 import { consume } from "@lit-labs/context";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
-import "@material/mwc-list/mwc-list-item";
 import {
   mdiCog,
   mdiDelete,
@@ -10,8 +9,6 @@ import {
   mdiPencil,
   mdiPlusCircle,
 } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
 import {
   CSSResultGroup,
   LitElement,
@@ -24,7 +21,7 @@ import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
-import { SENSOR_ENTITIES, ASSIST_ENTITIES } from "../../../common/const";
+import { ASSIST_ENTITIES, SENSOR_ENTITIES } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -77,7 +74,6 @@ import type { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import { fileDownload } from "../../../util/file_download";
 import "../../logbook/ha-logbook";
-import "../ha-config-section";
 import "./device-detail/ha-device-entities-card";
 import "./device-detail/ha-device-info-card";
 import "./device-detail/ha-device-via-devices-card";
@@ -665,269 +661,235 @@ export class HaConfigDevicePage extends LitElement {
         `
       : "";
 
-    return html`
-      <hass-subpage
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .header=${deviceName}
-      >
-
-                <ha-icon-button
-                  slot="toolbar-icon"
-                  .path=${mdiPencil}
-                  @click=${this._showSettings}
-                  .label=${this.hass.localize(
-                    "ui.panel.config.devices.edit_settings"
-                  )}
-                ></ha-icon-button>
-        <div class="container">
-          <div class="header fullwidth">
-            ${
-              area
-                ? html`<div class="header-name">
-                    <a href="/config/areas/area/${area.area_id}"
-                      >${this.hass.localize(
-                        "ui.panel.config.integrations.config_entry.area",
-                        { area: area.name || "Unnamed Area" }
-                      )}</a
-                    >
-                  </div>`
-                : ""
-            }
-                <div class="header-right">
-                  ${
-                    battery &&
-                    (batteryDomain === "binary_sensor" ||
-                      !isNaN(battery.state as any))
-                      ? html`
-                          <div class="battery">
-                            ${batteryDomain === "sensor"
-                              ? this.hass.formatEntityState(battery)
-                              : nothing}
-                            <ha-battery-icon
-                              .hass=${this.hass}
-                              .batteryStateObj=${battery}
-                              .batteryChargingStateObj=${batteryChargingState}
-                            ></ha-battery-icon>
-                          </div>
-                        `
-                      : ""
-                  }
-                  ${
-                    integrations.length
-                      ? html`
-                          <img
-                            alt=${domainToName(
-                              this.hass.localize,
-                              integrations[0].domain
-                            )}
-                            src=${brandsUrl({
-                              domain: integrations[0].domain,
-                              type: "logo",
-                              darkOptimized: this.hass.themes?.darkMode,
-                            })}
-                            crossorigin="anonymous"
-                            referrerpolicy="no-referrer"
-                            @load=${this._onImageLoad}
-                            @error=${this._onImageError}
-                          />
-                        `
-                      : ""
-                  }
-
-                </div>
+    return html` <hass-subpage
+      .hass=${this.hass}
+      .narrow=${this.narrow}
+      .header=${deviceName}
+    >
+      <ha-icon-button
+        slot="toolbar-icon"
+        .path=${mdiPencil}
+        @click=${this._showSettings}
+        .label=${this.hass.localize("ui.panel.config.devices.edit_settings")}
+      ></ha-icon-button>
+      <div class="container">
+        <div class="header fullwidth">
+          ${area
+            ? html`<div class="header-name">
+                <a href="/config/areas/area/${area.area_id}"
+                  >${this.hass.localize(
+                    "ui.panel.config.integrations.config_entry.area",
+                    { area: area.name || "Unnamed Area" }
+                  )}</a
+                >
+              </div>`
+            : ""}
+          <div class="header-right">
+            ${battery &&
+            (batteryDomain === "binary_sensor" || !isNaN(battery.state as any))
+              ? html`
+                  <div class="battery">
+                    ${batteryDomain === "sensor"
+                      ? this.hass.formatEntityState(battery)
+                      : nothing}
+                    <ha-battery-icon
+                      .hass=${this.hass}
+                      .batteryStateObj=${battery}
+                      .batteryChargingStateObj=${batteryChargingState}
+                    ></ha-battery-icon>
+                  </div>
+                `
+              : ""}
+            ${integrations.length
+              ? html`
+                  <img
+                    alt=${domainToName(
+                      this.hass.localize,
+                      integrations[0].domain
+                    )}
+                    src=${brandsUrl({
+                      domain: integrations[0].domain,
+                      type: "logo",
+                      darkOptimized: this.hass.themes?.darkMode,
+                    })}
+                    crossorigin="anonymous"
+                    referrerpolicy="no-referrer"
+                    @load=${this._onImageLoad}
+                    @error=${this._onImageError}
+                  />
+                `
+              : ""}
           </div>
-          <div class="column">
-              ${
-                this._deviceAlerts?.length
-                  ? html`
-                      <div>
-                        ${this._deviceAlerts.map(
-                          (alert) => html`
-                            <ha-alert .alertType=${alert.level}>
-                              ${alert.text}
-                            </ha-alert>
-                          `
-                        )}
-                      </div>
+        </div>
+        <div class="column">
+          ${this._deviceAlerts?.length
+            ? html`
+                <div>
+                  ${this._deviceAlerts.map(
+                    (alert) => html`
+                      <ha-alert .alertType=${alert.level}>
+                        ${alert.text}
+                      </ha-alert>
                     `
-                  : ""
-              }
-              <ha-device-info-card
-                .hass=${this.hass}
-                .device=${device}
-              >
-                ${deviceInfo}
-                ${
-                  firstDeviceAction || actions.length
-                    ? html`
-                        <div class="card-actions" slot="actions">
-                          <div>
-                            <a
-                              href=${ifDefined(firstDeviceAction!.href)}
-                              rel=${ifDefined(
-                                firstDeviceAction!.target
-                                  ? "noreferrer"
-                                  : undefined
-                              )}
-                              target=${ifDefined(firstDeviceAction!.target)}
-                            >
-                              <mwc-button
-                                class=${ifDefined(firstDeviceAction!.classes)}
-                                .action=${firstDeviceAction!.action}
+                  )}
+                </div>
+              `
+            : ""}
+          <ha-device-info-card .hass=${this.hass} .device=${device}>
+            ${deviceInfo}
+            ${firstDeviceAction || actions.length
+              ? html`
+                  <div class="card-actions" slot="actions">
+                    <div>
+                      <a
+                        href=${ifDefined(firstDeviceAction!.href)}
+                        rel=${ifDefined(
+                          firstDeviceAction!.target ? "noreferrer" : undefined
+                        )}
+                        target=${ifDefined(firstDeviceAction!.target)}
+                      >
+                        <mwc-button
+                          class=${ifDefined(firstDeviceAction!.classes)}
+                          .action=${firstDeviceAction!.action}
+                          @click=${this._deviceActionClicked}
+                          graphic="icon"
+                        >
+                          ${firstDeviceAction!.label}
+                          ${firstDeviceAction!.icon
+                            ? html`
+                                <ha-svg-icon
+                                  class=${ifDefined(firstDeviceAction!.classes)}
+                                  .path=${firstDeviceAction!.icon}
+                                  slot="graphic"
+                                ></ha-svg-icon>
+                              `
+                            : ""}
+                          ${firstDeviceAction!.trailingIcon
+                            ? html`
+                                <ha-svg-icon
+                                  .path=${firstDeviceAction!.trailingIcon}
+                                  slot="trailingIcon"
+                                ></ha-svg-icon>
+                              `
+                            : ""}
+                        </mwc-button>
+                      </a>
+                    </div>
+
+                    ${actions.length
+                      ? html`
+                          <ha-button-menu>
+                            <ha-icon-button
+                              slot="trigger"
+                              .label=${this.hass.localize("ui.common.menu")}
+                              .path=${mdiDotsVertical}
+                            ></ha-icon-button>
+                            ${actions.map((deviceAction) => {
+                              const listItem = html`<mwc-list-item
+                                class=${ifDefined(deviceAction.classes)}
+                                .action=${deviceAction.action}
                                 @click=${this._deviceActionClicked}
                                 graphic="icon"
+                                .hasMeta=${Boolean(deviceAction.trailingIcon)}
                               >
-                                ${firstDeviceAction!.label}
-                                ${firstDeviceAction!.icon
+                                ${deviceAction.label}
+                                ${deviceAction.icon
                                   ? html`
                                       <ha-svg-icon
-                                        class=${ifDefined(
-                                          firstDeviceAction!.classes
-                                        )}
-                                        .path=${firstDeviceAction!.icon}
+                                        class=${ifDefined(deviceAction.classes)}
+                                        .path=${deviceAction.icon}
                                         slot="graphic"
                                       ></ha-svg-icon>
                                     `
                                   : ""}
-                                ${firstDeviceAction!.trailingIcon
+                                ${deviceAction.trailingIcon
                                   ? html`
                                       <ha-svg-icon
-                                        .path=${firstDeviceAction!.trailingIcon}
-                                        slot="trailingIcon"
+                                        slot="meta"
+                                        .path=${deviceAction.trailingIcon}
                                       ></ha-svg-icon>
                                     `
                                   : ""}
-                              </mwc-button>
-                            </a>
-                          </div>
-
-                          ${actions.length
-                            ? html`
-                                <ha-button-menu>
-                                  <ha-icon-button
-                                    slot="trigger"
-                                    .label=${this.hass.localize(
-                                      "ui.common.menu"
+                              </mwc-list-item>`;
+                              return deviceAction.href
+                                ? html`<a
+                                    href=${deviceAction.href}
+                                    target=${ifDefined(deviceAction.target)}
+                                    rel=${ifDefined(
+                                      deviceAction.target
+                                        ? "noreferrer"
+                                        : undefined
                                     )}
-                                    .path=${mdiDotsVertical}
-                                  ></ha-icon-button>
-                                  ${actions.map((deviceAction) => {
-                                    const listItem = html`<mwc-list-item
-                                      class=${ifDefined(deviceAction.classes)}
-                                      .action=${deviceAction.action}
-                                      @click=${this._deviceActionClicked}
-                                      graphic="icon"
-                                      .hasMeta=${Boolean(
-                                        deviceAction.trailingIcon
-                                      )}
-                                    >
-                                      ${deviceAction.label}
-                                      ${deviceAction.icon
-                                        ? html`
-                                            <ha-svg-icon
-                                              class=${ifDefined(
-                                                deviceAction.classes
-                                              )}
-                                              .path=${deviceAction.icon}
-                                              slot="graphic"
-                                            ></ha-svg-icon>
-                                          `
-                                        : ""}
-                                      ${deviceAction.trailingIcon
-                                        ? html`
-                                            <ha-svg-icon
-                                              slot="meta"
-                                              .path=${deviceAction.trailingIcon}
-                                            ></ha-svg-icon>
-                                          `
-                                        : ""}
-                                    </mwc-list-item>`;
-                                    return deviceAction.href
-                                      ? html`<a
-                                          href=${deviceAction.href}
-                                          target=${ifDefined(
-                                            deviceAction.target
-                                          )}
-                                          rel=${ifDefined(
-                                            deviceAction.target
-                                              ? "noreferrer"
-                                              : undefined
-                                          )}
-                                          >${listItem}
-                                        </a>`
-                                      : listItem;
-                                  })}
-                                </ha-button-menu>
-                              `
-                            : ""}
-                        </div>
-                      `
-                    : ""
-                }
-              </ha-device-info-card>
-            ${!this.narrow ? [automationCard, sceneCard, scriptCard] : ""}
-          </div>
-          <div class="column">
-            ${(
-              [
-                "control",
-                "sensor",
-                "notify",
-                "event",
-                "assist",
-                "config",
-                "diagnostic",
-              ] as const
-            ).map((category) =>
-              // Make sure we render controls if no other cards will be rendered
-              entitiesByCategory[category].length > 0 ||
-              (entities.length === 0 && category === "control")
-                ? html`
-                    <ha-device-entities-card
-                      .hass=${this.hass}
-                      .header=${this.hass.localize(
-                        `ui.panel.config.devices.entities.${category}`
-                      )}
-                      .deviceName=${deviceName}
-                      .entities=${entitiesByCategory[category]}
-                      .showHidden=${device.disabled_by !== null}
-                    >
-                    </ha-device-entities-card>
-                  `
-                : ""
-            )}
-            <ha-device-via-devices-card
-              .hass=${this.hass}
-              .deviceId=${this.deviceId}
-            ></ha-device-via-devices-card>
-          </div>
-          <div class="column">
-            ${this.narrow ? [automationCard, sceneCard, scriptCard] : ""}
-            ${
-              isComponentLoaded(this.hass, "logbook")
-                ? html`
-                    <ha-card outlined>
-                      <h1 class="card-header">
-                        ${this.hass.localize("panel.logbook")}
-                      </h1>
-                      <ha-logbook
-                        .hass=${this.hass}
-                        .time=${this._logbookTime}
-                        .entityIds=${this._entityIds(entities)}
-                        .deviceIds=${this._deviceIdInList(this.deviceId)}
-                        virtualize
-                        narrow
-                        no-icon
-                      ></ha-logbook>
-                    </ha-card>
-                  `
-                : ""
-            }
-            </div>
-          </div>
-        </ha-config-section>
-      </hass-subpage>    `;
+                                    >${listItem}
+                                  </a>`
+                                : listItem;
+                            })}
+                          </ha-button-menu>
+                        `
+                      : ""}
+                  </div>
+                `
+              : ""}
+          </ha-device-info-card>
+          ${!this.narrow ? [automationCard, sceneCard, scriptCard] : ""}
+        </div>
+        <div class="column">
+          ${(
+            [
+              "control",
+              "sensor",
+              "notify",
+              "event",
+              "assist",
+              "config",
+              "diagnostic",
+            ] as const
+          ).map((category) =>
+            // Make sure we render controls if no other cards will be rendered
+            entitiesByCategory[category].length > 0 ||
+            (entities.length === 0 && category === "control")
+              ? html`
+                  <ha-device-entities-card
+                    .hass=${this.hass}
+                    .header=${this.hass.localize(
+                      `ui.panel.config.devices.entities.${category}`
+                    )}
+                    .deviceName=${deviceName}
+                    .entities=${entitiesByCategory[category]}
+                    .showHidden=${device.disabled_by !== null}
+                  >
+                  </ha-device-entities-card>
+                `
+              : ""
+          )}
+          <ha-device-via-devices-card
+            .hass=${this.hass}
+            .deviceId=${this.deviceId}
+          ></ha-device-via-devices-card>
+        </div>
+        <div class="column">
+          ${this.narrow ? [automationCard, sceneCard, scriptCard] : ""}
+          ${isComponentLoaded(this.hass, "logbook")
+            ? html`
+                <ha-card outlined>
+                  <h1 class="card-header">
+                    ${this.hass.localize("panel.logbook")}
+                  </h1>
+                  <ha-logbook
+                    .hass=${this.hass}
+                    .time=${this._logbookTime}
+                    .entityIds=${this._entityIds(entities)}
+                    .deviceIds=${this._deviceIdInList(this.deviceId)}
+                    virtualize
+                    narrow
+                    no-icon
+                  ></ha-logbook>
+                </ha-card>
+              `
+            : ""}
+        </div>
+      </div>
+    </hass-subpage>`;
   }
 
   private async _getDiagnosticButtons(requestId: number): Promise<void> {

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

@@ -154,6 +154,20 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
   @storage({ key: "devices-table-collapsed", state: false, subscribe: false })
   private _activeCollapsed?: string;
 
+  @storage({
+    key: "devices-table-column-order",
+    state: false,
+    subscribe: false,
+  })
+  private _activeColumnOrder?: string[];
+
+  @storage({
+    key: "devices-table-hidden-columns",
+    state: false,
+    subscribe: false,
+  })
+  private _activeHiddenColumns?: string[];
+
   private _sizeController = new ResizeController(this, {
     callback: (entries) => entries[0]?.contentRect.width,
   });
@@ -434,10 +448,13 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
       typeof this._devicesAndFilterDomains
     >["devicesOutput"][number];
 
-    const columns: DataTableColumnContainer<DeviceItem> = {
+    return {
       icon: {
         title: "",
+        label: localize("ui.panel.config.devices.data_table.icon"),
         type: "icon",
+        moveable: false,
+        showNarrow: true,
         template: (device) =>
           device.domains.length
             ? html`<img
@@ -452,19 +469,14 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
               />`
             : "",
       },
-    };
-
-    if (narrow) {
-      columns.name = {
+      name: {
         title: localize("ui.panel.config.devices.data_table.device"),
         main: true,
         sortable: true,
         filterable: true,
         direction: "asc",
         grows: true,
-        template: (device) => html`
-          <div style="font-size: 14px;">${device.name}</div>
-          <div class="secondary">${device.area} | ${device.integration}</div>
+        extraTemplate: (device) => html`
           ${device.label_entries.length
             ? html`
                 <ha-data-table-labels
@@ -473,112 +485,89 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
               `
             : nothing}
         `,
-      };
-    } else {
-      columns.name = {
-        title: localize("ui.panel.config.devices.data_table.device"),
-        main: true,
-        sortable: true,
-        filterable: true,
-        direction: "asc",
-        grows: true,
-        template: (device) => html`
-          <div style="font-size: 14px;">${device.name}</div>
-          ${device.label_entries.length
-            ? html`
-                <ha-data-table-labels
-                  .labels=${device.label_entries}
-                ></ha-data-table-labels>
-              `
-            : nothing}
-        `,
-      };
-    }
-
-    columns.manufacturer = {
-      title: localize("ui.panel.config.devices.data_table.manufacturer"),
-      sortable: true,
-      hidden: narrow,
-      filterable: true,
-      groupable: true,
-      width: "15%",
-    };
-    columns.model = {
-      title: localize("ui.panel.config.devices.data_table.model"),
-      sortable: true,
-      hidden: narrow,
-      filterable: true,
-      width: "15%",
-    };
-    columns.area = {
-      title: localize("ui.panel.config.devices.data_table.area"),
-      sortable: true,
-      hidden: narrow,
-      filterable: true,
-      groupable: true,
-      width: "15%",
-    };
-    columns.integration = {
-      title: localize("ui.panel.config.devices.data_table.integration"),
-      sortable: true,
-      hidden: narrow,
-      filterable: true,
-      groupable: true,
-      width: "15%",
-    };
-    columns.battery_entity = {
-      title: localize("ui.panel.config.devices.data_table.battery"),
-      sortable: true,
-      filterable: true,
-      type: "numeric",
-      width: narrow ? "105px" : "15%",
-      maxWidth: "105px",
-      valueColumn: "battery_level",
-      template: (device) => {
-        const batteryEntityPair = device.battery_entity;
-        const battery =
-          batteryEntityPair && batteryEntityPair[0]
-            ? this.hass.states[batteryEntityPair[0]]
-            : undefined;
-        const batteryDomain = battery ? computeStateDomain(battery) : undefined;
-        const batteryCharging =
-          batteryEntityPair && batteryEntityPair[1]
-            ? this.hass.states[batteryEntityPair[1]]
-            : undefined;
-
-        return battery &&
-          (batteryDomain === "binary_sensor" || !isNaN(battery.state as any))
-          ? html`
-              ${batteryDomain === "sensor"
-                ? this.hass.formatEntityState(battery)
-                : nothing}
-              <ha-battery-icon
-                .hass=${this.hass}
-                .batteryStateObj=${battery}
-                .batteryChargingStateObj=${batteryCharging}
-              ></ha-battery-icon>
-            `
-          : html`—`;
       },
-    };
-    columns.disabled_by = {
-      title: "",
-      label: localize("ui.panel.config.devices.data_table.disabled_by"),
-      hidden: true,
-      template: (device) =>
-        device.disabled_by
-          ? this.hass.localize("ui.panel.config.devices.disabled")
-          : "",
-    };
-    columns.labels = {
-      title: "",
-      hidden: true,
-      filterable: true,
-      template: (device) =>
-        device.label_entries.map((lbl) => lbl.name).join(" "),
-    };
+      manufacturer: {
+        title: localize("ui.panel.config.devices.data_table.manufacturer"),
+        sortable: true,
+        filterable: true,
+        groupable: true,
+        width: "15%",
+      },
+      model: {
+        title: localize("ui.panel.config.devices.data_table.model"),
+        sortable: true,
+        filterable: true,
+        width: "15%",
+      },
+      area: {
+        title: localize("ui.panel.config.devices.data_table.area"),
+        sortable: true,
+        filterable: true,
+        groupable: true,
+        width: "15%",
+      },
+      integration: {
+        title: localize("ui.panel.config.devices.data_table.integration"),
+        sortable: true,
+        filterable: true,
+        groupable: true,
+        width: "15%",
+      },
+      battery_entity: {
+        title: localize("ui.panel.config.devices.data_table.battery"),
+        showNarrow: true,
+        sortable: true,
+        filterable: true,
+        type: "numeric",
+        width: narrow ? "105px" : "15%",
+        maxWidth: "105px",
+        valueColumn: "battery_level",
+        template: (device) => {
+          const batteryEntityPair = device.battery_entity;
+          const battery =
+            batteryEntityPair && batteryEntityPair[0]
+              ? this.hass.states[batteryEntityPair[0]]
+              : undefined;
+          const batteryDomain = battery
+            ? computeStateDomain(battery)
+            : undefined;
+          const batteryCharging =
+            batteryEntityPair && batteryEntityPair[1]
+              ? this.hass.states[batteryEntityPair[1]]
+              : undefined;
 
-    return columns;
+          return battery &&
+            (batteryDomain === "binary_sensor" || !isNaN(battery.state as any))
+            ? html`
+                ${batteryDomain === "sensor"
+                  ? this.hass.formatEntityState(battery)
+                  : nothing}
+                <ha-battery-icon
+                  .hass=${this.hass}
+                  .batteryStateObj=${battery}
+                  .batteryChargingStateObj=${batteryCharging}
+                ></ha-battery-icon>
+              `
+            : html`—`;
+        },
+      },
+      disabled_by: {
+        title: "",
+        label: localize("ui.panel.config.devices.data_table.disabled_by"),
+        hidden: true,
+        template: (device) =>
+          device.disabled_by
+            ? this.hass.localize("ui.panel.config.devices.disabled")
+            : "",
+      },
+      labels: {
+        title: "",
+        hidden: true,
+        filterable: true,
+        template: (device) =>
+          device.label_entries.map((lbl) => lbl.name).join(" "),
+      },
+    } as DataTableColumnContainer<DeviceItem>;
   });
 
   protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
@@ -704,6 +693,9 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
         .initialGroupColumn=${this._activeGrouping}
         .initialCollapsedGroups=${this._activeCollapsed}
         .initialSorting=${this._activeSorting}
+        .columnOrder=${this._activeColumnOrder}
+        .hiddenColumns=${this._activeHiddenColumns}
+        @columns-changed=${this._handleColumnsChanged}
         @clear-filter=${this._clearFilter}
         @search-changed=${this._handleSearchChange}
         @sorting-changed=${this._handleSortingChanged}
@@ -1043,6 +1035,11 @@ ${rejected
     this._activeCollapsed = ev.detail.value;
   }
 
+  private _handleColumnsChanged(ev: CustomEvent) {
+    this._activeColumnOrder = ev.detail.columnOrder;
+    this._activeHiddenColumns = ev.detail.hiddenColumns;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       css`

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

@@ -186,6 +186,20 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
   })
   private _activeCollapsed?: string;
 
+  @storage({
+    key: "entities-table-column-order",
+    state: false,
+    subscribe: false,
+  })
+  private _activeColumnOrder?: string[];
+
+  @storage({
+    key: "entities-table-hidden-columns",
+    state: false,
+    subscribe: false,
+  })
+  private _activeHiddenColumns?: string[];
+
   @query("hass-tabs-subpage-data-table", true)
   private _dataTable!: HaTabsSubpageDataTable;
 
@@ -251,15 +265,13 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
   ]);
 
   private _columns = memoize(
-    (
-      localize: LocalizeFunc,
-      narrow,
-      _language
-    ): DataTableColumnContainer<EntityRow> => ({
+    (localize: LocalizeFunc): DataTableColumnContainer<EntityRow> => ({
       icon: {
         title: "",
         label: localize("ui.panel.config.entities.picker.headers.state_icon"),
         type: "icon",
+        showNarrow: true,
+        moveable: false,
         template: (entry) =>
           entry.icon
             ? html`<ha-icon .icon=${entry.icon}></ha-icon>`
@@ -283,32 +295,23 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         filterable: true,
         direction: "asc",
         grows: true,
-        template: (entry) => html`
-          <div style="font-size: 14px;">${entry.name}</div>
-          ${narrow
-            ? html`<div class="secondary">
-                ${entry.entity_id} | ${entry.localized_platform}
-              </div>`
-            : nothing}
-          ${entry.label_entries.length
+        extraTemplate: (entry) =>
+          entry.label_entries.length
             ? html`
                 <ha-data-table-labels
                   .labels=${entry.label_entries}
                 ></ha-data-table-labels>
               `
-            : nothing}
-        `,
+            : nothing,
       },
       entity_id: {
         title: localize("ui.panel.config.entities.picker.headers.entity_id"),
-        hidden: narrow,
         sortable: true,
         filterable: true,
         width: "25%",
       },
       localized_platform: {
         title: localize("ui.panel.config.entities.picker.headers.integration"),
-        hidden: narrow,
         sortable: true,
         groupable: true,
         filterable: true,
@@ -324,7 +327,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
       area: {
         title: localize("ui.panel.config.entities.picker.headers.area"),
         sortable: true,
-        hidden: narrow,
         filterable: true,
         groupable: true,
         width: "15%",
@@ -343,6 +345,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
       status: {
         title: localize("ui.panel.config.entities.picker.headers.status"),
         type: "icon",
+        showNarrow: true,
         sortable: true,
         filterable: true,
         width: "68px",
@@ -688,11 +691,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         }
         .route=${this.route}
         .tabs=${configSections.devices}
-        .columns=${this._columns(
-          this.hass.localize,
-          this.narrow,
-          this.hass.language
-        )}
+        .columns=${this._columns(this.hass.localize)}
         .data=${filteredEntities}
         .searchLabel=${this.hass.localize(
           "ui.panel.config.entities.picker.search",
@@ -714,6 +713,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         .initialGroupColumn=${this._activeGrouping}
         .initialCollapsedGroups=${this._activeCollapsed}
         .initialSorting=${this._activeSorting}
+        .columnOrder=${this._activeColumnOrder}
+        .hiddenColumns=${this._activeHiddenColumns}
+        @columns-changed=${this._handleColumnsChanged}
         @sorting-changed=${this._handleSortingChanged}
         @grouping-changed=${this._handleGroupingChanged}
         @collapsed-changed=${this._handleCollapseChanged}
@@ -1335,6 +1337,11 @@ ${rejected
     this._activeCollapsed = ev.detail.value;
   }
 
+  private _handleColumnsChanged(ev: CustomEvent) {
+    this._activeColumnOrder = ev.detail.columnOrder;
+    this._activeHiddenColumns = ev.detail.hiddenColumns;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

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

@@ -167,6 +167,20 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
   })
   private _filter = "";
 
+  @storage({
+    key: "helpers-table-column-order",
+    state: false,
+    subscribe: false,
+  })
+  private _activeColumnOrder?: string[];
+
+  @storage({
+    key: "helpers-table-hidden-columns",
+    state: false,
+    subscribe: false,
+  })
+  private _activeHiddenColumns?: string[];
+
   @state() private _stateItems: HassEntity[] = [];
 
   @state() private _entityEntries?: Record<string, EntityRegistryEntry>;
@@ -243,14 +257,13 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
   }
 
   private _columns = memoizeOne(
-    (
-      narrow: boolean,
-      localize: LocalizeFunc
-    ): DataTableColumnContainer<HelperItem> => ({
+    (localize: LocalizeFunc): DataTableColumnContainer<HelperItem> => ({
       icon: {
         title: "",
         label: localize("ui.panel.config.helpers.picker.headers.icon"),
         type: "icon",
+        showNarrow: true,
+        moveable: false,
         template: (helper) =>
           helper.entity
             ? html`<ha-state-icon
@@ -269,23 +282,17 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         filterable: true,
         grows: true,
         direction: "asc",
-        template: (helper) => html`
-          <div style="font-size: 14px;">${helper.name}</div>
-          ${narrow
-            ? html`<div class="secondary">${helper.entity_id}</div> `
-            : nothing}
-          ${helper.label_entries.length
+        extraTemplate: (helper) =>
+          helper.label_entries.length
             ? html`
                 <ha-data-table-labels
                   .labels=${helper.label_entries}
                 ></ha-data-table-labels>
               `
-            : nothing}
-        `,
+            : nothing,
       },
       entity_id: {
         title: localize("ui.panel.config.helpers.picker.headers.entity_id"),
-        hidden: this.narrow,
         sortable: true,
         filterable: true,
         width: "25%",
@@ -313,10 +320,9 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
       },
       editable: {
         title: "",
-        label: this.hass.localize(
-          "ui.panel.config.helpers.picker.headers.editable"
-        ),
+        label: localize("ui.panel.config.helpers.picker.headers.editable"),
         type: "icon",
+        showNarrow: true,
         template: (helper) => html`
           ${!helper.editable
             ? html`
@@ -337,8 +343,12 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
       },
       actions: {
         title: "",
+        label: "Actions",
         width: "64px",
         type: "overflow-menu",
+        hideable: false,
+        moveable: false,
+        showNarrow: true,
         template: (helper) => html`
           <ha-icon-overflow-menu
             .hass=${this.hass}
@@ -556,11 +566,14 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
                 Array.isArray(val) ? val.length : val
               )
         ).length}
-        .columns=${this._columns(this.narrow, this.hass.localize)}
+        .columns=${this._columns(this.hass.localize)}
         .data=${helpers}
         .initialGroupColumn=${this._activeGrouping || "category"}
         .initialCollapsedGroups=${this._activeCollapsed}
         .initialSorting=${this._activeSorting}
+        .columnOrder=${this._activeColumnOrder}
+        .hiddenColumns=${this._activeHiddenColumns}
+        @columns-changed=${this._handleColumnsChanged}
         @sorting-changed=${this._handleSortingChanged}
         @grouping-changed=${this._handleGroupingChanged}
         @collapsed-changed=${this._handleCollapseChanged}
@@ -1084,6 +1097,11 @@ ${rejected
     this._filter = ev.detail.value;
   }
 
+  private _handleColumnsChanged(ev: CustomEvent) {
+    this._activeColumnOrder = ev.detail.columnOrder;
+    this._activeHiddenColumns = ev.detail.hiddenColumns;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/integrations/dialog-add-integration.ts

@@ -55,6 +55,8 @@ import {
   showYamlIntegrationDialog,
 } from "./show-add-integration-dialog";
 import { getConfigEntries } from "../../../data/config_entries";
+import { stripDiacritics } from "../../../common/string/strip-diacritics";
+import { getStripDiacriticsFn } from "../../../util/fuse";
 
 export interface IntegrationListItem {
   name: string;
@@ -255,6 +257,7 @@ class AddIntegrationDialog extends LitElement {
           isCaseSensitive: false,
           minMatchCharLength: Math.min(filter.length, 2),
           threshold: 0.2,
+          getFn: getStripDiacriticsFn,
         };
         const helpers = Object.entries(h).map(([domain, integration]) => ({
           domain,
@@ -264,15 +267,16 @@ class AddIntegrationDialog extends LitElement {
           is_built_in: integration.is_built_in !== false,
           cloud: integration.iot_class?.startsWith("cloud_"),
         }));
+        const normalizedFilter = stripDiacritics(filter);
         return [
           ...new Fuse(integrations, options)
-            .search(filter)
+            .search(normalizedFilter)
             .map((result) => result.item),
           ...new Fuse(yamlIntegrations, options)
-            .search(filter)
+            .search(normalizedFilter)
             .map((result) => result.item),
           ...new Fuse(helpers, options)
-            .search(filter)
+            .search(normalizedFilter)
             .map((result) => result.item),
         ];
       }

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

@@ -1,25 +1,27 @@
 import { ActionDetail } from "@material/mwc-list";
 import { mdiFilterVariant, mdiPlus } from "@mdi/js";
-import Fuse from "fuse.js";
 import type { IFuseOptions } from "fuse.js";
+import Fuse from "fuse.js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
-  nothing,
   PropertyValues,
+  css,
+  html,
+  nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import {
-  protocolIntegrationPicked,
   PROTOCOL_INTEGRATIONS,
+  protocolIntegrationPicked,
 } from "../../../common/integrations/protocolIntegrationPicked";
 import { navigate } from "../../../common/navigate";
+import { caseInsensitiveStringCompare } from "../../../common/string/compare";
+import { stripDiacritics } from "../../../common/string/strip-diacritics";
 import { extractSearchParam } from "../../../common/url/search-params";
 import { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button-menu";
@@ -29,6 +31,7 @@ import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import "../../../components/search-input";
+import "../../../components/search-input-outlined";
 import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
 import { getConfigFlowInProgressCollection } from "../../../data/config_flow";
 import { fetchDiagnosticHandlers } from "../../../data/diagnostics";
@@ -37,11 +40,11 @@ import {
   subscribeEntityRegistry,
 } from "../../../data/entity_registry";
 import {
+  IntegrationLogInfo,
+  IntegrationManifest,
   domainToName,
   fetchIntegrationManifest,
   fetchIntegrationManifests,
-  IntegrationLogInfo,
-  IntegrationManifest,
   subscribeLogInfo,
 } from "../../../data/integration";
 import {
@@ -59,18 +62,17 @@ import "../../../layouts/hass-tabs-subpage";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
+import { getStripDiacriticsFn } from "../../../util/fuse";
 import { configSections } from "../ha-panel-config";
 import { isHelperDomain } from "../helpers/const";
 import "./ha-config-flow-card";
 import { DataEntryFlowProgressExtended } from "./ha-config-integrations";
+import "./ha-disabled-config-entry-card";
 import "./ha-ignored-config-entry-card";
 import "./ha-integration-card";
 import type { HaIntegrationCard } from "./ha-integration-card";
 import "./ha-integration-overflow-menu";
 import { showAddIntegrationDialog } from "./show-add-integration-dialog";
-import "./ha-disabled-config-entry-card";
-import { caseInsensitiveStringCompare } from "../../../common/string/compare";
-import "../../../components/search-input-outlined";
 
 export interface ConfigEntryExtended extends ConfigEntry {
   localized_domain_name?: string;
@@ -208,9 +210,12 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
           isCaseSensitive: false,
           minMatchCharLength: Math.min(filter.length, 2),
           threshold: 0.2,
+          getFn: getStripDiacriticsFn,
         };
         const fuse = new Fuse(configEntriesInProgress, options);
-        filteredEntries = fuse.search(filter).map((result) => result.item);
+        filteredEntries = fuse
+          .search(stripDiacritics(filter))
+          .map((result) => result.item);
       } else {
         filteredEntries = configEntriesInProgress;
       }

src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts

@@ -205,14 +205,13 @@ class DialogZWaveJSAddNode extends LitElement {
                     Search device
                   </mwc-button>`
               : this._status === "qr_scan"
-                ? html`${this._error
-                      ? html`<ha-alert alert-type="error"
-                          >${this._error}</ha-alert
-                        >`
-                      : ""}
-                    <ha-qr-scanner
+                ? html` <ha-qr-scanner
+                      .hass=${this.hass}
                       .localize=${this.hass.localize}
+                      .error=${this._error}
                       @qr-code-scanned=${this._qrCodeScanned}
+                      @qr-code-error=${this._qrCodeError}
+                      @qr-code-closed=${this._startOver}
                     ></ha-qr-scanner>
                     <mwc-button
                       slot="secondaryAction"
@@ -361,7 +360,7 @@ class DialogZWaveJSAddNode extends LitElement {
                                   </p>
                                 </div>
                                 ${this._supportsSmartStart
-                                  ? html` <div class="outline">
+                                  ? html`<div class="outline">
                                       <h2>
                                         ${this.hass.localize(
                                           "ui.panel.config.zwave_js.add_node.qr_code"
@@ -498,9 +497,7 @@ class DialogZWaveJSAddNode extends LitElement {
                                             </ha-alert>`
                                           : ""}
                                         <a
-                                          href=${`/config/devices/device/${
-                                            this._device?.id
-                                          }`}
+                                          href=${`/config/devices/device/${this._device?.id}`}
                                         >
                                           <mwc-button>
                                             ${this.hass.localize(
@@ -599,6 +596,10 @@ class DialogZWaveJSAddNode extends LitElement {
     this._handleQrCodeScanned(ev.detail.value);
   }
 
+  private _qrCodeError(ev: CustomEvent): void {
+    this._error = ev.detail.message;
+  }
+
   private async _handleQrCodeScanned(qrCodeString: string): Promise<void> {
     this._error = undefined;
     if (this._status !== "qr_scan" || this._qrProcessing) {

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

@@ -66,10 +66,26 @@ export class HaConfigLabels extends LitElement {
   })
   private _activeSorting?: SortingChangedEvent;
 
+  @storage({
+    key: "labels-table-column-order",
+    state: false,
+    subscribe: false,
+  })
+  private _activeColumnOrder?: string[];
+
+  @storage({
+    key: "labels-table-hidden-columns",
+    state: false,
+    subscribe: false,
+  })
+  private _activeHiddenColumns?: string[];
+
   private _columns = memoizeOne((localize: LocalizeFunc) => {
     const columns: DataTableColumnContainer<LabelRegistryEntry> = {
       icon: {
         title: "",
+        moveable: false,
+        showNarrow: true,
         label: localize("ui.panel.config.labels.headers.icon"),
         type: "icon",
         template: (label) =>
@@ -77,6 +93,7 @@ export class HaConfigLabels extends LitElement {
       },
       color: {
         title: "",
+        showNarrow: true,
         label: localize("ui.panel.config.labels.headers.color"),
         type: "icon",
         template: (label) =>
@@ -105,6 +122,9 @@ export class HaConfigLabels extends LitElement {
       },
       actions: {
         title: "",
+        showNarrow: true,
+        moveable: false,
+        hideable: false,
         width: "64px",
         type: "overflow-menu",
         template: (label) => html`
@@ -167,6 +187,9 @@ export class HaConfigLabels extends LitElement {
         .noDataText=${this.hass.localize("ui.panel.config.labels.no_labels")}
         hasFab
         .initialSorting=${this._activeSorting}
+        .columnOrder=${this._activeColumnOrder}
+        .hiddenColumns=${this._activeHiddenColumns}
+        @columns-changed=${this._handleColumnsChanged}
         @sorting-changed=${this._handleSortingChanged}
         .filter=${this._filter}
         @search-changed=${this._handleSearchChange}
@@ -297,6 +320,11 @@ export class HaConfigLabels extends LitElement {
   private _handleSearchChange(ev: CustomEvent) {
     this._filter = ev.detail.value;
   }
+
+  private _handleColumnsChanged(ev: CustomEvent) {
+    this._activeColumnOrder = ev.detail.columnOrder;
+    this._activeHiddenColumns = ev.detail.hiddenColumns;
+  }
 }
 
 declare global {

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -85,6 +85,20 @@ export class HaConfigLovelaceDashboards extends LitElement {
   })
   private _activeSorting?: SortingChangedEvent;
 
+  @storage({
+    key: "lovelace-dashboards-table-column-order",
+    state: false,
+    subscribe: false,
+  })
+  private _activeColumnOrder?: string[];
+
+  @storage({
+    key: "lovelace-dashboards-table-hidden-columns",
+    state: false,
+    subscribe: false,
+  })
+  private _activeHiddenColumns?: string[];
+
   public willUpdate() {
     if (!this.hasUpdated) {
       this.hass.loadFragmentTranslation("lovelace");
@@ -101,6 +115,8 @@ export class HaConfigLovelaceDashboards extends LitElement {
       const columns: DataTableColumnContainer<DataTableItem> = {
         icon: {
           title: "",
+          moveable: false,
+          showNarrow: true,
           label: localize(
             "ui.panel.config.lovelace.dashboards.picker.headers.icon"
           ),
@@ -128,87 +144,75 @@ export class HaConfigLovelaceDashboards extends LitElement {
           sortable: true,
           filterable: true,
           grows: true,
-          template: (dashboard) => {
-            const titleTemplate = html`
-              ${dashboard.title}
-              ${dashboard.default
-                ? html`
-                    <ha-svg-icon
-                      style="padding-left: 10px; padding-inline-start: 10px; direction: var(--direction);"
-                      .path=${mdiCheckCircleOutline}
-                    ></ha-svg-icon>
-                    <simple-tooltip animation-delay="0">
-                      ${this.hass.localize(
-                        `ui.panel.config.lovelace.dashboards.default_dashboard`
-                      )}
-                    </simple-tooltip>
-                  `
-                : ""}
-            `;
-            return narrow
-              ? html`
-                  ${titleTemplate}
-                  <div class="secondary">
-                    ${this.hass.localize(
-                      `ui.panel.config.lovelace.dashboards.conf_mode.${dashboard.mode}`
-                    )}${dashboard.filename
-                      ? html` – ${dashboard.filename} `
-                      : ""}
-                  </div>
-                `
-              : titleTemplate;
-          },
+          template: narrow
+            ? undefined
+            : (dashboard) => html`
+                ${dashboard.title}
+                ${dashboard.default
+                  ? html`
+                      <ha-svg-icon
+                        style="padding-left: 10px; padding-inline-start: 10px; direction: var(--direction);"
+                        .path=${mdiCheckCircleOutline}
+                      ></ha-svg-icon>
+                      <simple-tooltip animation-delay="0">
+                        ${this.hass.localize(
+                          `ui.panel.config.lovelace.dashboards.default_dashboard`
+                        )}
+                      </simple-tooltip>
+                    `
+                  : ""}
+              `,
         },
       };
 
-      if (!narrow) {
-        columns.mode = {
+      columns.mode = {
+        title: localize(
+          "ui.panel.config.lovelace.dashboards.picker.headers.conf_mode"
+        ),
+        sortable: true,
+        filterable: true,
+        width: "20%",
+        template: (dashboard) => html`
+          ${this.hass.localize(
+            `ui.panel.config.lovelace.dashboards.conf_mode.${dashboard.mode}`
+          ) || dashboard.mode}
+        `,
+      };
+      if (dashboards.some((dashboard) => dashboard.filename)) {
+        columns.filename = {
           title: localize(
-            "ui.panel.config.lovelace.dashboards.picker.headers.conf_mode"
+            "ui.panel.config.lovelace.dashboards.picker.headers.filename"
           ),
+          width: "15%",
           sortable: true,
           filterable: true,
-          width: "20%",
-          template: (dashboard) => html`
-            ${this.hass.localize(
-              `ui.panel.config.lovelace.dashboards.conf_mode.${dashboard.mode}`
-            ) || dashboard.mode}
-          `,
-        };
-        if (dashboards.some((dashboard) => dashboard.filename)) {
-          columns.filename = {
-            title: localize(
-              "ui.panel.config.lovelace.dashboards.picker.headers.filename"
-            ),
-            width: "15%",
-            sortable: true,
-            filterable: true,
-          };
-        }
-        columns.require_admin = {
-          title: localize(
-            "ui.panel.config.lovelace.dashboards.picker.headers.require_admin"
-          ),
-          sortable: true,
-          type: "icon",
-          width: "100px",
-          template: (dashboard) =>
-            dashboard.require_admin
-              ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`
-              : html`—`,
-        };
-        columns.show_in_sidebar = {
-          title: localize(
-            "ui.panel.config.lovelace.dashboards.picker.headers.sidebar"
-          ),
-          type: "icon",
-          width: "121px",
-          template: (dashboard) =>
-            dashboard.show_in_sidebar
-              ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`
-              : html`—`,
         };
       }
+      columns.require_admin = {
+        title: localize(
+          "ui.panel.config.lovelace.dashboards.picker.headers.require_admin"
+        ),
+        sortable: true,
+        type: "icon",
+        hidden: narrow,
+        width: "100px",
+        template: (dashboard) =>
+          dashboard.require_admin
+            ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`
+            : html`—`,
+      };
+      columns.show_in_sidebar = {
+        title: localize(
+          "ui.panel.config.lovelace.dashboards.picker.headers.sidebar"
+        ),
+        type: "icon",
+        hidden: narrow,
+        width: "121px",
+        template: (dashboard) =>
+          dashboard.show_in_sidebar
+            ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`
+            : html`—`,
+      };
 
       columns.url_path = {
         title: "",
@@ -216,6 +220,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           "ui.panel.config.lovelace.dashboards.picker.headers.url"
         ),
         filterable: true,
+        showNarrow: true,
         width: "100px",
         template: (dashboard) =>
           narrow
@@ -311,6 +316,9 @@ export class HaConfigLovelaceDashboards extends LitElement {
         )}
         .data=${this._getItems(this._dashboards)}
         .initialSorting=${this._activeSorting}
+        .columnOrder=${this._activeColumnOrder}
+        .hiddenColumns=${this._activeHiddenColumns}
+        @columns-changed=${this._handleColumnsChanged}
         @sorting-changed=${this._handleSortingChanged}
         .filter=${this._filter}
         @search-changed=${this._handleSearchChange}
@@ -467,6 +475,11 @@ export class HaConfigLovelaceDashboards extends LitElement {
   private _handleSearchChange(ev: CustomEvent) {
     this._filter = ev.detail.value;
   }
+
+  private _handleColumnsChanged(ev: CustomEvent) {
+    this._activeColumnOrder = ev.detail.columnOrder;
+    this._activeHiddenColumns = ev.detail.hiddenColumns;
+  }
 }
 
 declare global {

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -67,12 +67,27 @@ export class HaConfigLovelaceRescources extends LitElement {
   })
   private _activeSorting?: SortingChangedEvent;
 
+  @storage({
+    key: "lovelace-resources-table-column-order",
+    state: false,
+    subscribe: false,
+  })
+  private _activeColumnOrder?: string[];
+
+  @storage({
+    key: "lovelace-resources-table-hidden-columns",
+    state: false,
+    subscribe: false,
+  })
+  private _activeHiddenColumns?: string[];
+
   private _columns = memoize(
     (
       _language,
       localize: LocalizeFunc
     ): DataTableColumnContainer<LovelaceResource> => ({
       url: {
+        main: true,
         title: localize(
           "ui.panel.config.lovelace.resources.picker.headers.url"
         ),
@@ -145,6 +160,9 @@ export class HaConfigLovelaceRescources extends LitElement {
           "ui.panel.config.lovelace.resources.picker.no_resources"
         )}
         .initialSorting=${this._activeSorting}
+        .columnOrder=${this._activeColumnOrder}
+        .hiddenColumns=${this._activeHiddenColumns}
+        @columns-changed=${this._handleColumnsChanged}
         @sorting-changed=${this._handleSortingChanged}
         .filter=${this._filter}
         @search-changed=${this._handleSearchChange}
@@ -266,6 +284,11 @@ export class HaConfigLovelaceRescources extends LitElement {
     this._filter = ev.detail.value;
   }
 
+  private _handleColumnsChanged(ev: CustomEvent) {
+    this._activeColumnOrder = ev.detail.columnOrder;
+    this._activeHiddenColumns = ev.detail.hiddenColumns;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/person/dialog-person-detail.ts

@@ -1,12 +1,15 @@
-import "@material/mwc-button";
+import { mdiPencil } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import "../../../components/entity/ha-entities-picker";
+import "../../../components/ha-button";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-formfield";
+import "../../../components/ha-icon-button";
 import "../../../components/ha-picture-upload";
 import type { HaPictureUpload } from "../../../components/ha-picture-upload";
+import "../../../components/ha-settings-row";
 import "../../../components/ha-textfield";
 import { adminChangeUsername } from "../../../data/auth";
 import { PersonMutableParams } from "../../../data/person";
@@ -137,11 +140,17 @@ class DialogPersonDetail extends LitElement {
               @change=${this._pictureChanged}
             ></ha-picture-upload>
 
-            <ha-formfield
-              .label=${`${this.hass!.localize(
-                "ui.panel.config.person.detail.allow_login"
-              )}${this._user ? ` (${this._user.username})` : ""}`}
-            >
+            <ha-settings-row>
+              <span slot="heading">
+                ${this.hass!.localize(
+                  "ui.panel.config.person.detail.allow_login"
+                )}
+              </span>
+              <span slot="description">
+                ${this.hass!.localize(
+                  "ui.panel.config.person.detail.allow_login_description"
+                )}
+              </span>
               <ha-switch
                 @change=${this._allowLoginChanged}
                 .disabled=${this._user &&
@@ -150,34 +159,9 @@ class DialogPersonDetail extends LitElement {
                   this._user.is_owner)}
                 .checked=${this._userId}
               ></ha-switch>
-            </ha-formfield>
+            </ha-settings-row>
 
-            ${this._user
-              ? html`<ha-formfield
-                    .label=${this.hass.localize(
-                      "ui.panel.config.person.detail.local_only"
-                    )}
-                  >
-                    <ha-switch
-                      .checked=${this._localOnly}
-                      @change=${this._localOnlyChanged}
-                    >
-                    </ha-switch>
-                  </ha-formfield>
-                  <ha-formfield
-                    .label=${this.hass.localize(
-                      "ui.panel.config.person.detail.admin"
-                    )}
-                  >
-                    <ha-switch
-                      .disabled=${this._user.system_generated ||
-                      this._user.is_owner}
-                      .checked=${this._isAdmin}
-                      @change=${this._adminChanged}
-                    >
-                    </ha-switch>
-                  </ha-formfield>`
-              : ""}
+            ${this._renderUserFields()}
             ${this._deviceTrackersAvailable(this.hass)
               ? html`
                   <p>
@@ -235,7 +219,7 @@ class DialogPersonDetail extends LitElement {
         </div>
         ${this._params.entry
           ? html`
-              <mwc-button
+              <ha-button
                 slot="secondaryAction"
                 class="warning"
                 @click=${this._deleteEntry}
@@ -243,28 +227,10 @@ class DialogPersonDetail extends LitElement {
                 this._submitting}
               >
                 ${this.hass!.localize("ui.panel.config.person.detail.delete")}
-              </mwc-button>
-              ${this._user && this.hass.user?.is_owner
-                ? html`<mwc-button
-                      slot="secondaryAction"
-                      @click=${this._changeUsername}
-                    >
-                      ${this.hass.localize(
-                        "ui.panel.config.users.editor.change_username"
-                      )}
-                    </mwc-button>
-                    <mwc-button
-                      slot="secondaryAction"
-                      @click=${this._changePassword}
-                    >
-                      ${this.hass.localize(
-                        "ui.panel.config.users.editor.change_password"
-                      )}
-                    </mwc-button>`
-                : ""}
+              </ha-button>
             `
           : nothing}
-        <mwc-button
+        <ha-button
           slot="primaryAction"
           @click=${this._updateEntry}
           .disabled=${nameInvalid || this._submitting}
@@ -272,11 +238,96 @@ class DialogPersonDetail extends LitElement {
           ${this._params.entry
             ? this.hass!.localize("ui.panel.config.person.detail.update")
             : this.hass!.localize("ui.panel.config.person.detail.create")}
-        </mwc-button>
+        </ha-button>
       </ha-dialog>
     `;
   }
 
+  private _renderUserFields() {
+    const user = this._user;
+    if (!user) return nothing;
+    return html`
+      ${!user.system_generated
+        ? html`
+            <ha-settings-row>
+              <span slot="heading">
+                ${this.hass.localize("ui.panel.config.person.detail.username")}
+              </span>
+              <span slot="description">${user.username}</span>
+              ${this.hass.user?.is_owner
+                ? html`
+                    <ha-icon-button
+                      .path=${mdiPencil}
+                      @click=${this._changeUsername}
+                      .label=${this.hass.localize(
+                        "ui.panel.config.person.detail.change_username"
+                      )}
+                    >
+                    </ha-icon-button>
+                  `
+                : nothing}
+            </ha-settings-row>
+          `
+        : nothing}
+      ${!user.system_generated && this.hass.user?.is_owner
+        ? html`
+            <ha-settings-row>
+              <span slot="heading">
+                ${this.hass.localize("ui.panel.config.person.detail.password")}
+              </span>
+              <span slot="description">************</span>
+              ${this.hass.user?.is_owner
+                ? html`
+                    <ha-icon-button
+                      .path=${mdiPencil}
+                      @click=${this._changePassword}
+                      .label=${this.hass.localize(
+                        "ui.panel.config.person.detail.change_password"
+                      )}
+                    >
+                    </ha-icon-button>
+                  `
+                : nothing}
+            </ha-settings-row>
+          `
+        : nothing}
+      <ha-settings-row>
+        <span slot="heading">
+          ${this.hass.localize(
+            "ui.panel.config.person.detail.local_access_only"
+          )}
+        </span>
+        <span slot="description">
+          ${this.hass.localize(
+            "ui.panel.config.person.detail.local_access_only_description"
+          )}
+        </span>
+        <ha-switch
+          .disabled=${user.system_generated}
+          .checked=${this._localOnly}
+          @change=${this._localOnlyChanged}
+        >
+        </ha-switch>
+      </ha-settings-row>
+      <ha-settings-row>
+        <span slot="heading">
+          ${this.hass.localize("ui.panel.config.person.detail.admin")}
+        </span>
+        <span slot="description">
+          ${this.hass.localize(
+            "ui.panel.config.person.detail.admin_description"
+          )}
+        </span>
+        <ha-switch
+          .disabled=${user.system_generated || user.is_owner}
+          .checked=${this._isAdmin}
+          @change=${this._adminChanged}
+        >
+        </ha-switch>
+      </ha-settings-row>
+    `;
+  }
+
   private _closeDialog() {
     this._params = undefined;
   }
@@ -317,14 +368,16 @@ class DialogPersonDetail extends LitElement {
     } else if (this._userId) {
       if (
         !(await showConfirmationDialog(this, {
+          title: this.hass!.localize(
+            "ui.panel.config.person.detail.confirm_delete_user_title"
+          ),
           text: this.hass!.localize(
-            "ui.panel.config.person.detail.confirm_delete_user",
+            "ui.panel.config.person.detail.confirm_delete_user_text",
             { name: this._name }
           ),
-          confirmText: this.hass!.localize(
-            "ui.panel.config.person.detail.delete"
-          ),
+          confirmText: this.hass!.localize("ui.common.delete"),
           dismissText: this.hass!.localize("ui.common.cancel"),
+          destructive: true,
         }))
       ) {
         target.checked = true;
@@ -488,9 +541,8 @@ class DialogPersonDetail extends LitElement {
           margin-bottom: 16px;
           --file-upload-image-border-radius: 50%;
         }
-        ha-formfield {
-          display: block;
-          padding: 16px 0;
+        ha-settings-row {
+          padding: 0;
         }
         a {
           color: var(--primary-color);

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

@@ -180,6 +180,20 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
   })
   private _activeCollapsed?: string;
 
+  @storage({
+    key: "scene-table-column-order",
+    state: false,
+    subscribe: false,
+  })
+  private _activeColumnOrder?: string[];
+
+  @storage({
+    key: "scene-table-hidden-columns",
+    state: false,
+    subscribe: false,
+  })
+  private _activeHiddenColumns?: string[];
+
   private _sizeController = new ResizeController(this, {
     callback: (entries) => entries[0]?.contentRect.width,
   });
@@ -225,11 +239,13 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
   );
 
   private _columns = memoizeOne(
-    (narrow, localize: LocalizeFunc): DataTableColumnContainer => {
+    (localize: LocalizeFunc): DataTableColumnContainer => {
       const columns: DataTableColumnContainer<SceneItem> = {
         icon: {
           title: "",
-          label: localize("ui.panel.config.scene.picker.headers.state"),
+          label: localize("ui.panel.config.scene.picker.headers.icon"),
+          moveable: false,
+          showNarrow: true,
           type: "icon",
           template: (scene) => html`
             <ha-state-icon
@@ -245,15 +261,13 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
           filterable: true,
           direction: "asc",
           grows: true,
-          template: (scene) => html`
-            <div style="font-size: 14px;">${scene.name}</div>
-            ${scene.labels.length
+          extraTemplate: (scene) =>
+            scene.labels.length
               ? html`<ha-data-table-labels
                   @label-clicked=${this._labelClicked}
                   .labels=${scene.labels}
                 ></ha-data-table-labels>`
-              : nothing}
-          `,
+              : nothing,
         },
         area: {
           title: localize("ui.panel.config.scene.picker.headers.area"),
@@ -281,7 +295,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
           ),
           sortable: true,
           width: "30%",
-          hidden: narrow,
           template: (scene) => {
             const lastActivated = scene.state;
             if (!lastActivated || isUnavailableState(lastActivated)) {
@@ -300,6 +313,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
         only_editable: {
           title: "",
           width: "56px",
+          showNarrow: true,
           template: (scene) =>
             !scene.attributes.id
               ? html`
@@ -319,6 +333,9 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
           title: "",
           width: "64px",
           type: "overflow-menu",
+          showNarrow: true,
+          moveable: false,
+          hideable: false,
           template: (scene) => html`
             <ha-icon-overflow-menu
               .hass=${this.hass}
@@ -536,11 +553,14 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
                 Array.isArray(val) ? val.length : val
               )
         ).length}
-        .columns=${this._columns(this.narrow, this.hass.localize)}
+        .columns=${this._columns(this.hass.localize)}
         id="entity_id"
         .initialGroupColumn=${this._activeGrouping || "category"}
         .initialCollapsedGroups=${this._activeCollapsed}
         .initialSorting=${this._activeSorting}
+        .columnOrder=${this._activeColumnOrder}
+        .hiddenColumns=${this._activeHiddenColumns}
+        @columns-changed=${this._handleColumnsChanged}
         @sorting-changed=${this._handleSortingChanged}
         @grouping-changed=${this._handleGroupingChanged}
         @collapsed-changed=${this._handleCollapseChanged}
@@ -1155,6 +1175,11 @@ ${rejected
     this._filter = ev.detail.value;
   }
 
+  private _handleColumnsChanged(ev: CustomEvent) {
+    this._activeColumnOrder = ev.detail.columnOrder;
+    this._activeHiddenColumns = ev.detail.hiddenColumns;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

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

@@ -1,11 +1,10 @@
 import "@material/mwc-button/mwc-button";
 import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../components/ha-alert";
-import { BlueprintScriptConfig } from "../../../data/script";
-import { fetchBlueprints } from "../../../data/blueprint";
-import { HaBlueprintGenericEditor } from "../blueprint/blueprint-generic-editor";
 import "../../../components/ha-markdown";
+import { fetchBlueprints } from "../../../data/blueprint";
+import { BlueprintScriptConfig } from "../../../data/script";
+import { HaBlueprintGenericEditor } from "../blueprint/blueprint-generic-editor";
 
 @customElement("blueprint-script-editor")
 export class HaBlueprintScriptEditor extends HaBlueprintGenericEditor {
@@ -17,14 +16,6 @@ export class HaBlueprintScriptEditor extends HaBlueprintGenericEditor {
 
   protected render() {
     return html`
-      ${this.disabled
-        ? html`<ha-alert alert-type="warning">
-            ${this.hass.localize("ui.panel.config.script.editor.read_only")}
-            <mwc-button slot="action" @click=${this._duplicate}>
-              ${this.hass.localize("ui.panel.config.script.editor.migrate")}
-            </mwc-button>
-          </ha-alert>`
-        : nothing}
       ${this.config.description
         ? html`<ha-markdown
             class="description"

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

@@ -6,6 +6,7 @@ import {
   mdiDebugStepOver,
   mdiDelete,
   mdiDotsVertical,
+  mdiFileEdit,
   mdiFormTextbox,
   mdiInformationOutline,
   mdiPlay,
@@ -40,6 +41,7 @@ import { validateConfig } from "../../../data/config";
 import { UNAVAILABLE } from "../../../data/entity";
 import { EntityRegistryEntry } from "../../../data/entity_registry";
 import {
+  BlueprintScriptConfig,
   ScriptConfig,
   deleteScript,
   fetchScriptFileConfig,
@@ -61,6 +63,7 @@ import { showAutomationRenameDialog } from "../automation/automation-rename-dial
 import "./blueprint-script-editor";
 import "./manual-script-editor";
 import type { HaManualScriptEditor } from "./manual-script-editor";
+import { substituteBlueprint } from "../../../data/blueprint";
 
 export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -96,6 +99,8 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
 
   @state() private _validationErrors?: (string | TemplateResult)[];
 
+  @state() private _blueprintConfig?: BlueprintScriptConfig;
+
   protected render(): TemplateResult | typeof nothing {
     if (!this._config) {
       return nothing;
@@ -213,7 +218,8 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
             : nothing}
 
           <ha-list-item
-            .disabled=${!this._readOnly && !this.scriptId}
+            .disabled=${this._blueprintConfig ||
+            (!this._readOnly && !this.scriptId)}
             graphic="icon"
             @click=${this._duplicate}
           >
@@ -228,6 +234,24 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
             ></ha-svg-icon>
           </ha-list-item>
 
+          ${useBlueprint
+            ? html`
+                <ha-list-item
+                  graphic="icon"
+                  @click=${this._takeControl}
+                  .disabled=${this._readOnly}
+                >
+                  ${this.hass.localize(
+                    "ui.panel.config.script.editor.take_control"
+                  )}
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiFileEdit}
+                  ></ha-svg-icon>
+                </ha-list-item>
+              `
+            : nothing}
+
           <li divider role="separator"></li>
 
           <ha-list-item graphic="icon" @click=${this._switchUiMode}>
@@ -291,6 +315,32 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                   : nothing}
               </ha-alert>`
             : ""}
+          ${this._blueprintConfig
+            ? html`<ha-alert alert-type="info">
+                ${this.hass.localize(
+                  "ui.panel.config.script.editor.confirm_take_control"
+                )}
+                <div slot="action" style="display: flex;">
+                  <mwc-button @click=${this._takeControlSave}
+                    >${this.hass.localize("ui.common.yes")}</mwc-button
+                  >
+                  <mwc-button @click=${this._revertBlueprint}
+                    >${this.hass.localize("ui.common.no")}</mwc-button
+                  >
+                </div>
+              </ha-alert>`
+            : this._readOnly
+              ? html`<ha-alert alert-type="warning" dismissable
+                  >${this.hass.localize(
+                    "ui.panel.config.script.editor.read_only"
+                  )}
+                  <mwc-button slot="action" @click=${this._duplicate}>
+                    ${this.hass.localize(
+                      "ui.panel.config.script.editor.migrate"
+                    )}
+                  </mwc-button>
+                </ha-alert>`
+              : nothing}
           ${this._mode === "gui"
             ? html`
                 <div
@@ -307,7 +357,6 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                           .config=${this._config}
                           .disabled=${this._readOnly}
                           @value-changed=${this._valueChanged}
-                          @duplicate=${this._duplicate}
                         ></blueprint-script-editor>
                       `
                     : html`
@@ -318,31 +367,18 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                           .config=${this._config}
                           .disabled=${this._readOnly}
                           @value-changed=${this._valueChanged}
-                          @duplicate=${this._duplicate}
                         ></manual-script-editor>
                       `}
                 </div>
               `
             : this._mode === "yaml"
-              ? html` ${this._readOnly
-                    ? html`<ha-alert alert-type="warning">
-                        ${this.hass.localize(
-                          "ui.panel.config.script.editor.read_only"
-                        )}
-                        <mwc-button slot="action" @click=${this._duplicate}>
-                          ${this.hass.localize(
-                            "ui.panel.config.script.editor.migrate"
-                          )}
-                        </mwc-button>
-                      </ha-alert>`
-                    : nothing}
-                  <ha-yaml-editor
-                    copyClipboard
-                    .hass=${this.hass}
-                    .defaultValue=${this._preprocessYaml()}
-                    .readOnly=${this._readOnly}
-                    @value-changed=${this._yamlChanged}
-                  ></ha-yaml-editor>`
+              ? html`<ha-yaml-editor
+                  copyClipboard
+                  .hass=${this.hass}
+                  .defaultValue=${this._preprocessYaml()}
+                  .readOnly=${this._readOnly}
+                  @value-changed=${this._yamlChanged}
+                ></ha-yaml-editor>`
               : nothing}
         </div>
         <ha-fab
@@ -601,6 +637,50 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     }
   };
 
+  private async _takeControl() {
+    const config = this._config as BlueprintScriptConfig;
+
+    try {
+      const result = await substituteBlueprint(
+        this.hass,
+        "script",
+        config.use_blueprint.path,
+        config.use_blueprint.input || {}
+      );
+
+      const newConfig = {
+        ...this._normalizeConfig(result.substituted_config),
+        alias: config.alias,
+        description: config.description,
+      };
+
+      this._blueprintConfig = config;
+      this._config = newConfig;
+      if (this._mode === "yaml") {
+        this.renderRoot.querySelector("ha-yaml-editor")?.setValue(this._config);
+      }
+      this._readOnly = true;
+      this._errors = undefined;
+    } catch (err: any) {
+      this._errors = err.message;
+    }
+  }
+
+  private _revertBlueprint() {
+    this._config = this._blueprintConfig;
+    if (this._mode === "yaml") {
+      this.renderRoot.querySelector("ha-yaml-editor")?.setValue(this._config);
+    }
+    this._blueprintConfig = undefined;
+    this._readOnly = false;
+  }
+
+  private _takeControlSave() {
+    this._readOnly = false;
+    this._dirty = true;
+    this._blueprintConfig = undefined;
+  }
+
   private async _duplicate() {
     const result = this._readOnly
       ? await showConfirmationDialog(this, {
@@ -752,10 +832,12 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
         }
         .config-container,
         manual-script-editor,
-        blueprint-script-editor {
+        blueprint-script-editor,
+        :not(.yaml-mode) > ha-alert {
           margin: 0 auto;
           max-width: 1040px;
           padding: 28px 20px 0;
+          display: block;
         }
         .config-container ha-alert {
           margin-bottom: 16px;

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

@@ -184,6 +184,20 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
   })
   private _activeCollapsed?: string;
 
+  @storage({
+    key: "script-table-column-order",
+    state: false,
+    subscribe: false,
+  })
+  private _activeColumnOrder?: string[];
+
+  @storage({
+    key: "script-table-hidden-columns",
+    state: false,
+    subscribe: false,
+  })
+  private _activeHiddenColumns?: string[];
+
   private _sizeController = new ResizeController(this, {
     callback: (entries) => entries[0]?.contentRect.width,
   });
@@ -232,15 +246,13 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
   );
 
   private _columns = memoizeOne(
-    (
-      narrow,
-      localize: LocalizeFunc,
-      locale: HomeAssistant["locale"]
-    ): DataTableColumnContainer<ScriptItem> => {
+    (localize: LocalizeFunc): DataTableColumnContainer<ScriptItem> => {
       const columns: DataTableColumnContainer = {
         icon: {
           title: "",
-          label: localize("ui.panel.config.script.picker.headers.state"),
+          showNarrow: true,
+          moveable: false,
+          label: localize("ui.panel.config.script.picker.headers.icon"),
           type: "icon",
           template: (script) =>
             html`<ha-state-icon
@@ -259,30 +271,13 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           filterable: true,
           direction: "asc",
           grows: true,
-          template: (script) => {
-            const date = new Date(script.last_triggered);
-            const now = new Date();
-            const dayDifference = differenceInDays(now, date);
-            return html`
-              <div style="font-size: 14px;">${script.name}</div>
-              ${narrow
-                ? html`<div class="secondary">
-                    ${this.hass.localize("ui.card.automation.last_triggered")}:
-                    ${script.attributes.last_triggered
-                      ? dayDifference > 3
-                        ? formatShortDateTime(date, locale, this.hass.config)
-                        : relativeTime(date, locale)
-                      : localize("ui.components.relative_time.never")}
-                  </div>`
-                : nothing}
-              ${script.labels.length
-                ? html`<ha-data-table-labels
-                    @label-clicked=${this._labelClicked}
-                    .labels=${script.labels}
-                  ></ha-data-table-labels>`
-                : nothing}
-            `;
-          },
+          extraTemplate: (script) =>
+            script.labels.length
+              ? html`<ha-data-table-labels
+                  @label-clicked=${this._labelClicked}
+                  .labels=${script.labels}
+                ></ha-data-table-labels>`
+              : nothing,
         },
         area: {
           title: localize("ui.panel.config.script.picker.headers.area"),
@@ -305,7 +300,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           template: (script) => script.labels.map((lbl) => lbl.name).join(" "),
         },
         last_triggered: {
-          hidden: narrow,
           sortable: true,
           width: "40%",
           title: localize("ui.card.automation.last_triggered"),
@@ -330,6 +324,9 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
           title: "",
           width: "64px",
           type: "overflow-menu",
+          showNarrow: true,
+          moveable: false,
+          hideable: false,
           template: (script) => html`
             <ha-icon-overflow-menu
               .hass=${this.hass}
@@ -539,6 +536,9 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
         .initialGroupColumn=${this._activeGrouping || "category"}
         .initialCollapsedGroups=${this._activeCollapsed}
         .initialSorting=${this._activeSorting}
+        .columnOrder=${this._activeColumnOrder}
+        .hiddenColumns=${this._activeHiddenColumns}
+        @columns-changed=${this._handleColumnsChanged}
         @sorting-changed=${this._handleSortingChanged}
         @grouping-changed=${this._handleGroupingChanged}
         @collapsed-changed=${this._handleCollapseChanged}
@@ -553,11 +553,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
                 Array.isArray(val) ? val.length : val
               )
         ).length}
-        .columns=${this._columns(
-          this.narrow,
-          this.hass.localize,
-          this.hass.locale
-        )}
+        .columns=${this._columns(this.hass.localize)}
         .data=${scripts}
         .empty=${!this.scripts.length}
         .activeFilters=${this._activeFilters}
@@ -1270,6 +1266,11 @@ ${rejected
     this._activeCollapsed = ev.detail.value;
   }
 
+  private _handleColumnsChanged(ev: CustomEvent) {
+    this._activeColumnOrder = ev.detail.columnOrder;
+    this._activeHiddenColumns = ev.detail.hiddenColumns;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

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

@@ -60,14 +60,6 @@ export class HaManualScriptEditor extends LitElement {
 
   protected render() {
     return html`
-      ${this.disabled
-        ? html`<ha-alert alert-type="warning">
-            ${this.hass.localize("ui.panel.config.script.editor.read_only")}
-            <mwc-button slot="action" @click=${this._duplicate}>
-              ${this.hass.localize("ui.panel.config.script.editor.migrate")}
-            </mwc-button>
-          </ha-alert>`
-        : nothing}
       ${this.config.description
         ? html`<ha-markdown
             class="description"
@@ -170,10 +162,6 @@ export class HaManualScriptEditor extends LitElement {
     });
   }
 
-  private _duplicate() {
-    fireEvent(this, "duplicate");
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -205,12 +193,6 @@ export class HaManualScriptEditor extends LitElement {
         .header a {
           color: var(--secondary-text-color);
         }
-        ha-alert.re-order {
-          display: block;
-          margin-bottom: 16px;
-          border-radius: var(--ha-card-border-radius, 12px);
-          overflow: hidden;
-        }
       `,
     ];
   }

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

@@ -66,93 +66,82 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
   })
   private _filter = "";
 
-  private _columns = memoizeOne(
-    (narrow: boolean, _language, localize: LocalizeFunc) => {
-      const columns: DataTableColumnContainer<TagRowData> = {
-        icon: {
-          title: "",
-          label: localize("ui.panel.config.tag.headers.icon"),
-          type: "icon",
-          template: (tag) => html`<tag-image .tag=${tag}></tag-image>`,
-        },
-        display_name: {
-          title: localize("ui.panel.config.tag.headers.name"),
-          main: true,
-          sortable: true,
-          filterable: true,
-          grows: true,
-          template: (tag) =>
-            html`${tag.display_name}
-            ${narrow
-              ? html`<div class="secondary">
-                  ${tag.last_scanned_datetime
-                    ? html`<ha-relative-time
-                        .hass=${this.hass}
-                        .datetime=${tag.last_scanned_datetime}
-                        capitalize
-                      ></ha-relative-time>`
-                    : this.hass.localize("ui.panel.config.tag.never_scanned")}
-                </div>`
-              : ""}`,
-        },
-        last_scanned_datetime: {
-          title: localize("ui.panel.config.tag.headers.last_scanned"),
-          sortable: true,
-          hidden: narrow,
-          direction: "desc",
-          width: "20%",
-          template: (tag) => html`
-            ${tag.last_scanned_datetime
-              ? html`<ha-relative-time
-                  .hass=${this.hass}
-                  .datetime=${tag.last_scanned_datetime}
-                  capitalize
-                ></ha-relative-time>`
-              : this.hass.localize("ui.panel.config.tag.never_scanned")}
-          `,
-        },
-      };
-      if (this._canWriteTags) {
-        columns.write = {
-          title: "",
-          label: localize("ui.panel.config.tag.headers.write"),
-          type: "icon-button",
-          template: (tag) =>
-            html` <ha-icon-button
-              .tag=${tag}
-              @click=${this._handleWriteClick}
-              .label=${this.hass.localize("ui.panel.config.tag.write")}
-              .path=${mdiContentDuplicate}
-            ></ha-icon-button>`,
-        };
-      }
-      columns.automation = {
+  private _columns = memoizeOne((localize: LocalizeFunc) => {
+    const columns: DataTableColumnContainer<TagRowData> = {
+      icon: {
         title: "",
+        moveable: false,
+        showNarrow: true,
+        label: localize("ui.panel.config.tag.headers.icon"),
+        type: "icon",
+        template: (tag) => html`<tag-image .tag=${tag}></tag-image>`,
+      },
+      display_name: {
+        title: localize("ui.panel.config.tag.headers.name"),
+        main: true,
+        sortable: true,
+        filterable: true,
+        grows: true,
+      },
+      last_scanned_datetime: {
+        title: localize("ui.panel.config.tag.headers.last_scanned"),
+        sortable: true,
+        direction: "desc",
+        width: "20%",
+        template: (tag) => html`
+          ${tag.last_scanned_datetime
+            ? html`<ha-relative-time
+                .hass=${this.hass}
+                .datetime=${tag.last_scanned_datetime}
+                capitalize
+              ></ha-relative-time>`
+            : this.hass.localize("ui.panel.config.tag.never_scanned")}
+        `,
+      },
+    };
+    if (this._canWriteTags) {
+      columns.write = {
+        title: "",
+        label: localize("ui.panel.config.tag.headers.write"),
         type: "icon-button",
+        showNarrow: true,
         template: (tag) =>
-          html` <ha-icon-button
+          html`<ha-icon-button
             .tag=${tag}
-            @click=${this._handleAutomationClick}
-            .label=${this.hass.localize(
-              "ui.panel.config.tag.create_automation"
-            )}
-            .path=${mdiRobot}
+            @click=${this._handleWriteClick}
+            .label=${this.hass.localize("ui.panel.config.tag.write")}
+            .path=${mdiContentDuplicate}
           ></ha-icon-button>`,
       };
-      columns.edit = {
-        title: "",
-        type: "icon-button",
-        template: (tag) =>
-          html` <ha-icon-button
-            .tag=${tag}
-            @click=${this._handleEditClick}
-            .label=${this.hass.localize("ui.panel.config.tag.edit")}
-            .path=${mdiCog}
-          ></ha-icon-button>`,
-      };
-      return columns;
     }
-  );
+    columns.automation = {
+      title: "",
+      type: "icon-button",
+      showNarrow: true,
+      template: (tag) =>
+        html`<ha-icon-button
+          .tag=${tag}
+          @click=${this._handleAutomationClick}
+          .label=${this.hass.localize("ui.panel.config.tag.create_automation")}
+          .path=${mdiRobot}
+        ></ha-icon-button>`,
+    };
+    columns.edit = {
+      title: "",
+      type: "icon-button",
+      showNarrow: true,
+      hideable: false,
+      moveable: false,
+      template: (tag) =>
+        html`<ha-icon-button
+          .tag=${tag}
+          @click=${this._handleEditClick}
+          .label=${this.hass.localize("ui.panel.config.tag.edit")}
+          .path=${mdiCog}
+        ></ha-icon-button>`,
+    };
+    return columns;
+  });
 
   private _data = memoizeOne((tags: Tag[]): TagRowData[] =>
     tags.map((tag) => ({
@@ -191,11 +180,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         back-path="/config"
         .route=${this.route}
         .tabs=${configSections.tags}
-        .columns=${this._columns(
-          this.narrow,
-          this.hass.language,
-          this.hass.localize
-        )}
+        .columns=${this._columns(this.hass.localize)}
         .data=${this._data(this._tags)}
         .noDataText=${this.hass.localize("ui.panel.config.tag.no_tags")}
         .filter=${this._filter}
@@ -316,12 +301,13 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
   private async _removeTag(selectedTag: Tag) {
     if (
       !(await showConfirmationDialog(this, {
-        title: this.hass!.localize("ui.panel.config.tag.confirm_remove_title"),
-        text: this.hass.localize("ui.panel.config.tag.confirm_remove", {
+        title: this.hass!.localize("ui.panel.config.tag.confirm_delete_title"),
+        text: this.hass.localize("ui.panel.config.tag.confirm_delete", {
           tag: selectedTag.name || selectedTag.id,
         }),
         dismissText: this.hass!.localize("ui.common.cancel"),
-        confirmText: this.hass!.localize("ui.common.remove"),
+        confirmText: this.hass!.localize("ui.common.delete"),
+        destructive: true,
       }))
     ) {
       return false;

src/panels/config/users/dialog-add-user.ts

@@ -1,31 +1,34 @@
-import "@material/mwc-button";
 import {
-  css,
   CSSResultGroup,
-  html,
   LitElement,
   PropertyValues,
+  css,
+  html,
   nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import "../../../components/ha-alert";
+import "../../../components/ha-button";
 import "../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-formfield";
+import "../../../components/ha-icon-button";
+import "../../../components/ha-settings-row";
 import "../../../components/ha-switch";
 import type { HaSwitch } from "../../../components/ha-switch";
+import "../../../components/ha-textfield";
+import type { HaTextField } from "../../../components/ha-textfield";
 import { createAuthForUser } from "../../../data/auth";
 import {
-  createUser,
-  deleteUser,
   SYSTEM_GROUP_ID_ADMIN,
   SYSTEM_GROUP_ID_USER,
   User,
+  createUser,
+  deleteUser,
 } from "../../../data/user";
-import { ValueChangedEvent, HomeAssistant } from "../../../types";
 import { haStyleDialog } from "../../../resources/styles";
+import { HomeAssistant, ValueChangedEvent } from "../../../types";
 import { AddUserDialogParams } from "./show-dialog-add-user";
-import "../../../components/ha-textfield";
-import type { HaTextField } from "../../../components/ha-textfield";
 
 @customElement("dialog-add-user")
 export class DialogAddUser extends LitElement {
@@ -155,38 +158,44 @@ export class DialogAddUser extends LitElement {
               "ui.panel.config.users.add_user.password_not_match"
             )}
           ></ha-textfield>
-          <div class="row">
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.config.users.editor.local_only"
+          <ha-settings-row>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.config.users.editor.local_access_only"
               )}
+            </span>
+            <span slot="description">
+              ${this.hass.localize(
+                "ui.panel.config.users.editor.local_access_only_description"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._localOnly}
+              @change=${this._localOnlyChanged}
             >
-              <ha-switch
-                .checked=${this._localOnly}
-                @change=${this._localOnlyChanged}
-              >
-              </ha-switch>
-            </ha-formfield>
-          </div>
-          <div class="row">
-            <ha-formfield
-              .label=${this.hass.localize("ui.panel.config.users.editor.admin")}
-            >
-              <ha-switch
-                .checked=${this._isAdmin}
-                @change=${this._adminChanged}
-              >
-              </ha-switch>
-            </ha-formfield>
-          </div>
+            </ha-switch>
+          </ha-settings-row>
+          <ha-settings-row>
+            <span slot="heading">
+              ${this.hass.localize("ui.panel.config.users.editor.admin")}
+            </span>
+            <span slot="description">
+              ${this.hass.localize(
+                "ui.panel.config.users.editor.admin_description"
+              )}
+            </span>
+            <ha-switch .checked=${this._isAdmin} @change=${this._adminChanged}>
+            </ha-switch>
+          </ha-settings-row>
           ${!this._isAdmin
             ? html`
-                <br />
-                ${this.hass.localize(
-                  "ui.panel.config.users.users_privileges_note"
-                )}
+                <ha-alert alert-type="info">
+                  ${this.hass.localize(
+                    "ui.panel.config.users.users_privileges_note"
+                  )}
+                </ha-alert>
               `
-            : ""}
+            : nothing}
         </div>
         ${this._loading
           ? html`
@@ -195,7 +204,7 @@ export class DialogAddUser extends LitElement {
               </div>
             `
           : html`
-              <mwc-button
+              <ha-button
                 slot="primaryAction"
                 .disabled=${!this._name ||
                 !this._username ||
@@ -204,7 +213,7 @@ export class DialogAddUser extends LitElement {
                 @click=${this._createUser}
               >
                 ${this.hass.localize("ui.panel.config.users.add_user.create")}
-              </mwc-button>
+              </ha-button>
             `}
       </ha-dialog>
     `;
@@ -281,6 +290,11 @@ export class DialogAddUser extends LitElement {
     }
 
     user.username = this._username;
+    user.credentials = [
+      {
+        type: "homeassistant",
+      },
+    ];
     this._params!.userAddedCallback(user);
     this._close();
   }
@@ -299,7 +313,10 @@ export class DialogAddUser extends LitElement {
         }
         ha-textfield {
           display: block;
-          margin-bottom: 16px;
+          margin-bottom: 8px;
+        }
+        ha-settings-row {
+          padding: 0;
         }
       `,
     ];

src/panels/config/users/dialog-admin-change-password.ts

@@ -132,7 +132,7 @@ class DialogAdminChangePassword extends LitElement {
                 @value-changed=${this._valueChanged}
                 .disabled=${this._submitting}
               ></ha-form>
-              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+              <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
                 ${this.hass.localize("ui.common.cancel")}
               </mwc-button>
               <mwc-button

src/panels/config/users/dialog-user-detail.ts

@@ -1,12 +1,13 @@
-import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
-import "@material/mwc-button";
+import { mdiPencil } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-
+import "../../../components/ha-alert";
+import "../../../components/ha-button";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-formfield";
-import "../../../components/ha-help-tooltip";
+import "../../../components/ha-icon-button";
 import "../../../components/ha-label";
+import "../../../components/ha-settings-row";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-switch";
 import "../../../components/ha-textfield";
@@ -68,15 +69,15 @@ class DialogUserDetail extends LitElement {
         .heading=${createCloseHeading(this.hass, user.name)}
       >
         <div>
-          ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
+          ${this._error
+            ? html`<div class="error">${this._error}</div>`
+            : nothing}
           <div class="secondary">
             ${this.hass.localize("ui.panel.config.users.editor.id")}:
             ${user.id}<br />
-            ${this.hass.localize("ui.panel.config.users.editor.username")}:
-            ${user.username}
           </div>
           ${badges.length === 0
-            ? ""
+            ? nothing
             : html`
                 <div class="badge-container">
                   ${badges.map(
@@ -90,74 +91,136 @@ class DialogUserDetail extends LitElement {
                 </div>
               `}
           <div class="form">
-            <ha-textfield
-              dialogInitialFocus
-              .value=${this._name}
-              .disabled=${user.system_generated}
-              @input=${this._nameChanged}
-              .label=${this.hass!.localize("ui.panel.config.users.editor.name")}
-            ></ha-textfield>
-            <div class="row">
-              <ha-formfield
-                .label=${this.hass.localize(
-                  "ui.panel.config.users.editor.local_only"
-                )}
-              >
-                <ha-switch
-                  .disabled=${user.system_generated}
-                  .checked=${this._localOnly}
-                  @change=${this._localOnlyChanged}
-                >
-                </ha-switch>
-              </ha-formfield>
-            </div>
-            <div class="row">
-              <ha-formfield
-                .label=${this.hass.localize(
-                  "ui.panel.config.users.editor.admin"
-                )}
-              >
-                <ha-switch
-                  .disabled=${user.system_generated || user.is_owner}
-                  .checked=${this._isAdmin}
-                  @change=${this._adminChanged}
-                >
-                </ha-switch>
-              </ha-formfield>
-            </div>
-            ${!this._isAdmin
+            ${!user.system_generated
               ? html`
-                  <br />
-                  ${this.hass.localize(
-                    "ui.panel.config.users.users_privileges_note"
-                  )}
+                  <ha-textfield
+                    dialogInitialFocus
+                    .value=${this._name}
+                    @input=${this._nameChanged}
+                    .label=${this.hass!.localize(
+                      "ui.panel.config.users.editor.name"
+                    )}
+                  ></ha-textfield>
+                  <ha-settings-row>
+                    <span slot="heading">
+                      ${this.hass.localize(
+                        "ui.panel.config.users.editor.username"
+                      )}
+                    </span>
+                    <span slot="description">${user.username}</span>
+                    ${this.hass.user?.is_owner
+                      ? html`
+                          <ha-icon-button
+                            .path=${mdiPencil}
+                            @click=${this._changeUsername}
+                            .label=${this.hass.localize(
+                              "ui.panel.config.users.editor.change_username"
+                            )}
+                          >
+                          </ha-icon-button>
+                        `
+                      : nothing}
+                  </ha-settings-row>
                 `
-              : ""}
-            <div class="row">
-              <ha-formfield
-                .label=${this.hass.localize(
-                  "ui.panel.config.users.editor.active"
+              : nothing}
+            ${!user.system_generated && this.hass.user?.is_owner
+              ? html`
+                  <ha-settings-row>
+                    <span slot="heading">
+                      ${this.hass.localize(
+                        "ui.panel.config.users.editor.password"
+                      )}
+                    </span>
+                    <span slot="description">************</span>
+                    ${this.hass.user?.is_owner
+                      ? html`
+                          <ha-icon-button
+                            .path=${mdiPencil}
+                            @click=${this._changePassword}
+                            .label=${this.hass.localize(
+                              "ui.panel.config.users.editor.change_password"
+                            )}
+                          >
+                          </ha-icon-button>
+                        `
+                      : nothing}
+                  </ha-settings-row>
+                `
+              : nothing}
+
+            <ha-settings-row>
+              <span slot="heading">
+                ${this.hass.localize("ui.panel.config.users.editor.active")}
+              </span>
+              <span slot="description">
+                ${this.hass.localize(
+                  "ui.panel.config.users.editor.active_description"
                 )}
+              </span>
+              <ha-switch
+                .disabled=${user.system_generated || user.is_owner}
+                .checked=${this._isActive}
+                @change=${this._activeChanged}
               >
-                <ha-switch
-                  .disabled=${user.system_generated || user.is_owner}
-                  .checked=${this._isActive}
-                  @change=${this._activeChanged}
-                >
-                </ha-switch>
-              </ha-formfield>
-              <ha-help-tooltip
-                .label=${this.hass.localize(
-                  "ui.panel.config.users.editor.active_tooltip"
+              </ha-switch>
+            </ha-settings-row>
+            <ha-settings-row>
+              <span slot="heading">
+                ${this.hass.localize(
+                  "ui.panel.config.users.editor.local_access_only"
                 )}
+              </span>
+              <span slot="description">
+                ${this.hass.localize(
+                  "ui.panel.config.users.editor.local_access_only_description"
+                )}
+              </span>
+              <ha-switch
+                .disabled=${user.system_generated}
+                .checked=${this._localOnly}
+                @change=${this._localOnlyChanged}
               >
-              </ha-help-tooltip>
-            </div>
+              </ha-switch>
+            </ha-settings-row>
+            <ha-settings-row>
+              <span slot="heading">
+                ${this.hass.localize("ui.panel.config.users.editor.admin")}
+              </span>
+              <span slot="description">
+                ${this.hass.localize(
+                  "ui.panel.config.users.editor.admin_description"
+                )}
+              </span>
+              <ha-switch
+                .disabled=${user.system_generated || user.is_owner}
+                .checked=${this._isAdmin}
+                @change=${this._adminChanged}
+              >
+              </ha-switch>
+            </ha-settings-row>
+            ${!this._isAdmin && !user.system_generated
+              ? html`
+                  <ha-alert alert-type="info">
+                    ${this.hass.localize(
+                      "ui.panel.config.users.users_privileges_note"
+                    )}
+                  </ha-alert>
+                `
+              : nothing}
           </div>
+          ${user.system_generated
+            ? html`
+                <ha-alert alert-type="info">
+                  ${this.hass.localize(
+                    "ui.panel.config.users.editor.system_generated_read_only_users"
+                  )}
+                </ha-alert>
+              `
+            : nothing}
         </div>
 
         <div slot="secondaryAction">
-          <mwc-button
+          <ha-button
             class="warning"
             @click=${this._deleteEntry}
             .disabled=${this._submitting ||
@@ -165,47 +228,18 @@ class DialogUserDetail extends LitElement {
             user.is_owner}
           >
             ${this.hass!.localize("ui.panel.config.users.editor.delete_user")}
-          </mwc-button>
-          ${user.system_generated
-            ? html`
-                <simple-tooltip animation-delay="0" position="right">
-                  ${this.hass.localize(
-                    "ui.panel.config.users.editor.system_generated_users_not_removable"
-                  )}
-                </simple-tooltip>
-              `
-            : ""}
-          ${!user.system_generated && this.hass.user?.is_owner
-            ? html`<mwc-button @click=${this._changeUsername}>
-                  ${this.hass.localize(
-                    "ui.panel.config.users.editor.change_username"
-                  )} </mwc-button
-                ><mwc-button @click=${this._changePassword}>
-                  ${this.hass.localize(
-                    "ui.panel.config.users.editor.change_password"
-                  )}
-                </mwc-button>`
-            : ""}
+          </ha-button>
         </div>
 
         <div slot="primaryAction">
-          <mwc-button
+          <ha-button
             @click=${this._updateEntry}
             .disabled=${!this._name ||
             this._submitting ||
             user.system_generated}
           >
             ${this.hass!.localize("ui.panel.config.users.editor.update_user")}
-          </mwc-button>
-          ${user.system_generated
-            ? html`
-                <simple-tooltip animation-delay="0" position="left">
-                  ${this.hass.localize(
-                    "ui.panel.config.users.editor.system_generated_users_not_editable"
-                  )}
-                </simple-tooltip>
-              `
-            : ""}
+          </ha-button>
         </div>
       </ha-dialog>
     `;
@@ -353,27 +387,8 @@ class DialogUserDetail extends LitElement {
           margin-inline-end: 4px;
           margin-inline-start: 0;
         }
-        .state {
-          background-color: rgba(var(--rgb-primary-text-color), 0.15);
-          border-radius: 16px;
-          padding: 4px 8px;
-          margin-top: 8px;
-          display: inline-block;
-        }
-        .state:not(:first-child) {
-          margin-left: 8px;
-          margin-inline-start: 8px;
-          margin-inline-end: initial;
-        }
-        .row {
-          display: flex;
-          padding: 8px 0;
-        }
-        ha-help-tooltip {
-          margin-left: 4px;
-          margin-inline-start: 4px;
-          margin-inline-end: initial;
-          position: relative;
+        ha-settings-row {
+          padding: 0;
         }
       `,
     ];

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

@@ -46,6 +46,20 @@ export class HaConfigUsers extends LitElement {
   @storage({ key: "users-table-grouping", state: false, subscribe: false })
   private _activeGrouping?: string;
 
+  @storage({
+    key: "users-table-column-order",
+    state: false,
+    subscribe: false,
+  })
+  private _activeColumnOrder?: string[];
+
+  @storage({
+    key: "users-table-hidden-columns",
+    state: false,
+    subscribe: false,
+  })
+  private _activeHiddenColumns?: string[];
+
   @storage({
     storage: "sessionStorage",
     key: "users-table-search",
@@ -72,17 +86,6 @@ export class HaConfigUsers extends LitElement {
           width: "25%",
           direction: "asc",
           grows: true,
-          template: (user) =>
-            narrow
-              ? html` ${user.name}<br />
-                  <div class="secondary">
-                    ${user.username ? `${user.username} |` : ""}
-                    ${localize(`groups.${user.group_ids[0]}`)}
-                  </div>`
-              : html` ${user.name ||
-                this.hass!.localize(
-                  "ui.panel.config.users.editor.unnamed_user"
-                )}`,
         },
         username: {
           title: localize("ui.panel.config.users.picker.headers.username"),
@@ -90,7 +93,6 @@ export class HaConfigUsers extends LitElement {
           filterable: true,
           width: "20%",
           direction: "asc",
-          hidden: narrow,
           template: (user) => html`${user.username || "—"}`,
         },
         group: {
@@ -100,7 +102,6 @@ export class HaConfigUsers extends LitElement {
           groupable: true,
           width: "20%",
           direction: "asc",
-          hidden: narrow,
         },
         is_active: {
           title: this.hass.localize(
@@ -154,6 +155,7 @@ export class HaConfigUsers extends LitElement {
           filterable: false,
           width: "104px",
           hidden: !narrow,
+          showNarrow: true,
           template: (user) => {
             const badges = computeUserBadges(this.hass, user, false);
             return html`${badges.map(
@@ -186,6 +188,9 @@ export class HaConfigUsers extends LitElement {
         .tabs=${configSections.persons}
         .columns=${this._columns(this.narrow, this.hass.localize)}
         .data=${this._userData(this._users, this.hass.localize)}
+        .columnOrder=${this._activeColumnOrder}
+        .hiddenColumns=${this._activeHiddenColumns}
+        @columns-changed=${this._handleColumnsChanged}
         .initialGroupColumn=${this._activeGrouping}
         .initialCollapsedGroups=${this._activeCollapsed}
         .initialSorting=${this._activeSorting}
@@ -213,6 +218,7 @@ export class HaConfigUsers extends LitElement {
   private _userData = memoizeOne((users: User[], localize: LocalizeFunc) =>
     users.map((user) => ({
       ...user,
+      name: user.name || localize("ui.panel.config.users.editor.unnamed_user"),
       group: localize(`groups.${user.group_ids[0]}`),
     }))
   );
@@ -302,6 +308,11 @@ export class HaConfigUsers extends LitElement {
   private _handleSearchChange(ev: CustomEvent) {
     this._filter = ev.detail.value;
   }
+
+  private _handleColumnsChanged(ev: CustomEvent) {
+    this._activeColumnOrder = ev.detail.columnOrder;
+    this._activeHiddenColumns = ev.detail.hiddenColumns;
+  }
 }
 
 declare global {

src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts

@@ -118,6 +118,20 @@ export class VoiceAssistantsExpose extends LitElement {
   })
   private _activeCollapsed?: string;
 
+  @storage({
+    key: "voice-expose-table-column-order",
+    state: false,
+    subscribe: false,
+  })
+  private _activeColumnOrder?: string[];
+
+  @storage({
+    key: "voice-expose-table-hidden-columns",
+    state: false,
+    subscribe: false,
+  })
+  private _activeHiddenColumns?: string[];
+
   @query("hass-tabs-subpage-data-table", true)
   private _dataTable!: HaTabsSubpageDataTable;
 
@@ -137,6 +151,7 @@ export class VoiceAssistantsExpose extends LitElement {
       icon: {
         title: "",
         type: "icon",
+        moveable: false,
         hidden: narrow,
         template: (entry) => html`
           <ha-state-icon
@@ -153,10 +168,20 @@ export class VoiceAssistantsExpose extends LitElement {
         filterable: true,
         direction: "asc",
         grows: true,
-        template: (entry) => html`
-          ${entry.name}<br />
-          <div class="secondary">${entry.entity_id}</div>
-        `,
+        template: narrow
+          ? undefined
+          : (entry) => html`
+              ${entry.name}<br />
+              <div class="secondary">${entry.entity_id}</div>
+            `,
+      },
+      // For search & narrow
+      entity_id: {
+        title: localize(
+          "ui.panel.config.voice_assistants.expose.headers.entity_id"
+        ),
+        hidden: !narrow,
+        filterable: true,
       },
       domain: {
         title: localize(
@@ -171,7 +196,6 @@ export class VoiceAssistantsExpose extends LitElement {
         title: localize("ui.panel.config.voice_assistants.expose.headers.area"),
         sortable: true,
         groupable: true,
-        hidden: narrow,
         filterable: true,
         width: "15%",
       },
@@ -179,6 +203,7 @@ export class VoiceAssistantsExpose extends LitElement {
         title: localize(
           "ui.panel.config.voice_assistants.expose.headers.assistants"
         ),
+        showNarrow: true,
         sortable: true,
         filterable: true,
         width: "160px",
@@ -208,7 +233,6 @@ export class VoiceAssistantsExpose extends LitElement {
         ),
         sortable: true,
         filterable: true,
-        hidden: narrow,
         width: "15%",
         template: (entry) =>
           entry.aliases.length === 0
@@ -230,12 +254,6 @@ export class VoiceAssistantsExpose extends LitElement {
             .path=${mdiCloseCircleOutline}
           ></ha-icon-button>`,
       },
-      // For search
-      entity_id: {
-        title: "",
-        hidden: true,
-        filterable: true,
-      },
     })
   );
 
@@ -552,6 +570,9 @@ export class VoiceAssistantsExpose extends LitElement {
         .initialSorting=${this._activeSorting}
         .initialGroupColumn=${this._activeGrouping}
         .initialCollapsedGroups=${this._activeCollapsed}
+        .columnOrder=${this._activeColumnOrder}
+        .hiddenColumns=${this._activeHiddenColumns}
+        @columns-changed=${this._handleColumnsChanged}
         @sorting-changed=${this._handleSortingChanged}
         @selection-changed=${this._handleSelectionChanged}
         @grouping-changed=${this._handleGroupingChanged}
@@ -757,6 +778,11 @@ export class VoiceAssistantsExpose extends LitElement {
     this._activeCollapsed = ev.detail.value;
   }
 
+  private _handleColumnsChanged(ev: CustomEvent) {
+    this._activeColumnOrder = ev.detail.columnOrder;
+    this._activeHiddenColumns = ev.detail.hiddenColumns;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/logbook/ha-logbook.ts

@@ -139,7 +139,7 @@ export class HaLogbook extends LitElement {
     this._throttleGetLogbookEntries.cancel();
     this._updateTraceContexts.cancel();
     this._updateUsers.cancel();
-    await this._unsubscribeSetLoading();
+    this._unsubscribeSetLoading();
 
     if (force) {
       this._getLogBookData();
@@ -206,18 +206,9 @@ export class HaLogbook extends LitElement {
     );
   }
 
-  private async _unsubscribe(): Promise<void> {
+  private _unsubscribe() {
     if (this._subscribed) {
-      const unsub = await this._subscribed;
-      if (unsub) {
-        try {
-          await unsub();
-        } catch (e) {
-          // The backend will cancel the subscription if
-          // we subscribe to entities that will all be
-          // filtered away
-        }
-      }
+      this._subscribed.then((unsub) => unsub?.());
       this._subscribed = undefined;
     }
   }
@@ -239,8 +230,8 @@ export class HaLogbook extends LitElement {
    * Setting this._logbookEntries to undefined
    * will put the page in a loading state.
    */
-  private async _unsubscribeSetLoading() {
-    await this._unsubscribe();
+  private _unsubscribeSetLoading() {
+    this._unsubscribe();
     this._logbookEntries = undefined;
     this._pendingStreamMessages = [];
   }
@@ -249,8 +240,8 @@ export class HaLogbook extends LitElement {
    * Setting this._logbookEntries to an empty
    * list will show a no results message.
    */
-  private async _unsubscribeNoResults() {
-    await this._unsubscribe();
+  private _unsubscribeNoResults() {
+    this._unsubscribe();
     this._logbookEntries = [];
     this._pendingStreamMessages = [];
   }

src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts

@@ -1,17 +1,17 @@
 import {
-  html,
-  LitElement,
-  nothing,
-  css,
   CSSResultGroup,
+  LitElement,
   PropertyValues,
+  css,
+  html,
+  nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { HomeAssistant } from "../../../../types";
-import "../../components/hui-energy-period-selector";
-import { LovelaceCard } from "../../types";
-import { EnergyCardBaseConfig } from "../types";
 import { hasConfigChanged } from "../../common/has-changed";
+import "../../components/hui-energy-period-selector";
+import { LovelaceCard, LovelaceLayoutOptions } from "../../types";
+import { EnergyCardBaseConfig } from "../types";
 
 @customElement("hui-energy-date-selection-card")
 export class HuiEnergyDateSelectionCard
@@ -26,6 +26,13 @@ export class HuiEnergyDateSelectionCard
     return 1;
   }
 
+  public getLayoutOptions(): LovelaceLayoutOptions {
+    return {
+      grid_rows: 1,
+      grid_columns: 4,
+    };
+  }
+
   public setConfig(config: EnergyCardBaseConfig): void {
     this._config = config;
   }
@@ -57,6 +64,13 @@ export class HuiEnergyDateSelectionCard
 
   static get styles(): CSSResultGroup {
     return css`
+    :host {
+      ha-card {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
       .padded {
         padding-left: 16px !important;
         padding-inline-start: 16px !important;

src/panels/lovelace/cards/hui-area-card.ts

@@ -55,7 +55,11 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../types";
 import "../components/hui-image";
 import "../components/hui-warning";
-import { LovelaceCard, LovelaceCardEditor } from "../types";
+import {
+  LovelaceCard,
+  LovelaceCardEditor,
+  LovelaceLayoutOptions,
+} from "../types";
 import { AreaCardConfig } from "./types";
 
 export const DEFAULT_ASPECT_RATIO = "16:9";
@@ -102,6 +106,9 @@ export class HuiAreaCard
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false })
+  public layout?: string;
+
   @state() private _config?: AreaCardConfig;
 
   @state() private _entities?: EntityRegistryEntry[];
@@ -407,13 +414,17 @@ export class HuiAreaCard
     }
 
     const imageClass = area.picture || cameraEntityId;
+
+    const ignoreAspectRatio = this.layout === "grid";
+
     return html`
       <ha-card
         class=${imageClass ? "image" : ""}
         style=${styleMap({
-          paddingBottom: imageClass
-            ? "0"
-            : `${((100 * this._ratio!.h) / this._ratio!.w).toFixed(2)}%`,
+          paddingBottom:
+            ignoreAspectRatio || imageClass
+              ? "0"
+              : `${((100 * this._ratio!.h) / this._ratio!.w).toFixed(2)}%`,
         })}
       >
         ${area.picture || cameraEntityId
@@ -424,8 +435,10 @@ export class HuiAreaCard
                 .image=${area.picture ? area.picture : undefined}
                 .cameraImage=${cameraEntityId}
                 .cameraView=${this._config.camera_view}
-                .aspectRatio=${this._config.aspect_ratio ||
-                DEFAULT_ASPECT_RATIO}
+                .aspectRatio=${ignoreAspectRatio
+                  ? undefined
+                  : this._config.aspect_ratio || DEFAULT_ASPECT_RATIO}
+                fitMode="cover"
               ></hui-image>
             `
           : area.icon
@@ -534,12 +547,20 @@ export class HuiAreaCard
     forwardHaptic("light");
   }
 
+  getLayoutOptions(): LovelaceLayoutOptions {
+    return {
+      grid_columns: 4,
+      grid_rows: 3,
+    };
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       ha-card {
         overflow: hidden;
         position: relative;
         background-size: cover;
+        height: 100%;
       }
 
       .container {
@@ -567,6 +588,10 @@ export class HuiAreaCard
         opacity: 0.12;
       }
 
+      .image hui-image {
+        height: 100%;
+      }
+
       .icon-container {
         position: absolute;
         top: 0;