Edit sidebar in a dialog (#25532)

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

@@ -25,6 +25,7 @@ export interface DisplayItem {
   value: string;
   label: string;
   description?: string;
+  disableSorting?: boolean;
 }
 
 export interface DisplayValue {
@@ -50,6 +51,9 @@ export class HaItemDisplayEditor extends LitElement {
   @property({ type: Boolean, attribute: "show-navigation-button" })
   public showNavigationButton = false;
 
+  @property({ type: Boolean, attribute: "dont-sort-visible" })
+  public dontSortVisible = false;
+
   @property({ attribute: false })
   public value: DisplayValue = {
     order: [],
@@ -122,9 +126,15 @@ export class HaItemDisplayEditor extends LitElement {
   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));
+
+      const visibleItems = items.filter((item) => !hidden.includes(item.value));
+      if (this.dontSortVisible) {
+        return visibleItems;
+      }
+
+      return items.sort((a, b) =>
+        a.disableSorting && !b.disableSorting ? -1 : compare(a.value, b.value)
+      );
     }
   );
 
@@ -160,7 +170,14 @@ export class HaItemDisplayEditor extends LitElement {
             (item) => item.value,
             (item: DisplayItem, _idx) => {
               const isVisible = !this.value.hidden.includes(item.value);
-              const { label, value, description, icon, iconPath } = item;
+              const {
+                label,
+                value,
+                description,
+                icon,
+                iconPath,
+                disableSorting,
+              } = item;
               return html`
                 <ha-md-list-item
                   type=${ifDefined(
@@ -172,14 +189,14 @@ export class HaItemDisplayEditor extends LitElement {
                   .value=${value}
                   class=${classMap({
                     hidden: !isVisible,
-                    draggable: isVisible,
+                    draggable: isVisible && !disableSorting,
                   })}
                 >
                   <span slot="headline">${label}</span>
                   ${description
                     ? html`<span slot="supporting-text">${description}</span>`
                     : nothing}
-                  ${isVisible
+                  ${isVisible && !disableSorting
                     ? html`
                         <ha-svg-icon
                           class="handle"