Add entities filtering and reordering for areas strategy dashboard (#24677)

* Add entities editor

* Save entities per domain and area

* Use hidden and reorder logic in dashboard

* Add overview hidden logic

* Don't use icon for nav

* Remove overview hidden

* Change default text

* Fix icons

* Rename config properties

src/components/ha-items-display-editor.ts

@@ -1,22 +1,26 @@
 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js";
+import type { TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
+import { until } from "lit/directives/until";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
+import { orderCompare } from "../common/string/compare";
 import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-icon-button";
-import "./ha-icon-button-next";
+import "./ha-icon-next";
 import "./ha-md-list";
 import "./ha-md-list-item";
 import "./ha-sortable";
 import "./ha-svg-icon";
 
 export interface DisplayItem {
-  icon?: string;
+  icon?: string | Promise<string | undefined>;
   iconPath?: string;
   value: string;
   label: string;
@@ -52,6 +56,10 @@ export class HaItemDisplayEditor extends LitElement {
     hidden: [],
   };
 
+  @property({ attribute: false }) public actionsRenderer?: (
+    item: DisplayItem
+  ) => TemplateResult<1> | typeof nothing;
+
   private _showIcon = new ResizeController(this, {
     callback: (entries) => entries[0]?.contentRect.width > 450,
   });
@@ -70,7 +78,11 @@ export class HaItemDisplayEditor extends LitElement {
       newHidden.push(value);
     }
 
-    const newVisibleItems = this._visibleItems(this.items, newHidden);
+    const newVisibleItems = this._visibleItems(
+      this.items,
+      newHidden,
+      this.value.order
+    );
     const newOrder = newVisibleItems.map((a) => a.value);
 
     this.value = {
@@ -84,7 +96,11 @@ export class HaItemDisplayEditor extends LitElement {
     ev.stopPropagation();
     const { oldIndex, newIndex } = ev.detail;
 
-    const visibleItems = this._visibleItems(this.items, this.value.hidden);
+    const visibleItems = this._visibleItems(
+      this.items,
+      this.value.hidden,
+      this.value.order
+    );
     const newOrder = visibleItems.map((item) => item.value);
 
     const movedItem = newOrder.splice(oldIndex, 1)[0];
@@ -103,8 +119,21 @@ export class HaItemDisplayEditor extends LitElement {
     ev.stopPropagation();
   }
 
-  private _visibleItems = memoizeOne((items: DisplayItem[], hidden: string[]) =>
-    items.filter((item) => !hidden.includes(item.value))
+  private _visibleItems = memoizeOne(
+    (items: DisplayItem[], hidden: string[], order: string[]) => {
+      const compare = orderCompare(order);
+      return items
+        .filter((item) => !hidden.includes(item.value))
+        .sort((a, b) => compare(a.value, b.value));
+    }
+  );
+
+  private _allItems = memoizeOne(
+    (items: DisplayItem[], hidden: string[], order: string[]) => {
+      const visibleItems = this._visibleItems(items, hidden, order);
+      const hiddenItems = this._hiddenItems(items, hidden);
+      return [...visibleItems, ...hiddenItems];
+    }
   );
 
   private _hiddenItems = memoizeOne((items: DisplayItem[], hidden: string[]) =>
@@ -112,10 +141,11 @@ export class HaItemDisplayEditor extends LitElement {
   );
 
   protected render() {
-    const allItems = [
-      ...this._visibleItems(this.items, this.value.hidden),
-      ...this._hiddenItems(this.items, this.value.hidden),
-    ];
+    const allItems = this._allItems(
+      this.items,
+      this.value.hidden,
+      this.value.order
+    );
 
     const showIcon = this._showIcon.value;
     return html`
@@ -128,11 +158,18 @@ export class HaItemDisplayEditor extends LitElement {
           ${repeat(
             allItems,
             (item) => item.value,
-            (item, _idx) => {
+            (item: DisplayItem, _idx) => {
               const isVisible = !this.value.hidden.includes(item.value);
               const { label, value, description, icon, iconPath } = item;
               return html`
                 <ha-md-list-item
+                  type=${ifDefined(
+                    this.showNavigationButton ? "button" : undefined
+                  )}
+                  @click=${this.showNavigationButton
+                    ? this._navigate
+                    : undefined}
+                  .value=${value}
                   class=${classMap({
                     hidden: !isVisible,
                     draggable: isVisible,
@@ -157,7 +194,7 @@ export class HaItemDisplayEditor extends LitElement {
                       ? html`
                           <ha-icon
                             class="icon"
-                            .icon=${icon}
+                            .icon=${until(icon, "")}
                             slot="start"
                           ></ha-icon>
                         `
@@ -170,6 +207,11 @@ export class HaItemDisplayEditor extends LitElement {
                             ></ha-svg-icon>
                           `
                         : nothing}
+                  ${this.actionsRenderer
+                    ? html`
+                        <span slot="end"> ${this.actionsRenderer(item)} </span>
+                      `
+                    : nothing}
                   <ha-icon-button
                     .path=${isVisible ? mdiEye : mdiEyeOff}
                     slot="end"
@@ -183,13 +225,7 @@ export class HaItemDisplayEditor extends LitElement {
                     @click=${this._toggle}
                   ></ha-icon-button>
                   ${this.showNavigationButton
-                    ? html`
-                        <ha-icon-button-next
-                          slot="end"
-                          .value=${value}
-                          @click=${this._navigate}
-                        ></ha-icon-button-next>
-                      `
+                    ? html` <ha-icon-next slot="end"></ha-icon-next> `
                     : nothing}
                 </ha-md-list-item>
               `;