From 75f18aa69b84aea49588eebcd659ab294814dbfa Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 30 Nov 2023 14:37:10 +0100
Subject: [PATCH] =?UTF-8?q?Move=20disabled=20items=20always=20to=20the=20b?=
 =?UTF-8?q?ottom,=20only=20change=20color=20of=20text,=20=E2=80=A6=20(#188?=
 =?UTF-8?q?14)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Move disabled items always to the bottom, only change color of text, dont drag disabled items

* Don't allow to drag hidden items

---------

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
---
 src/dialogs/area-filter/area-filter-dialog.ts | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/dialogs/area-filter/area-filter-dialog.ts b/src/dialogs/area-filter/area-filter-dialog.ts
index b2b813b3eb..e3da498425 100644
--- a/src/dialogs/area-filter/area-filter-dialog.ts
+++ b/src/dialogs/area-filter/area-filter-dialog.ts
@@ -73,6 +73,7 @@ export class DialogAreaFilter
       animation: 150,
       fallbackClass: "sortable-fallback",
       handle: ".handle",
+      draggable: ".draggable",
       onChoose: (evt: SortableEvent) => {
         (evt.item as any).placeholder =
           document.createComment("sort-placeholder");
@@ -98,9 +99,11 @@ export class DialogAreaFilter
     if (ev.oldIndex === ev.newIndex) return;
 
     const areas = this._areas.concat();
+    const nonHiddenAreas = areas.filter((ar) => !this._hidden.includes(ar));
+    const newIndex = Math.min(ev.newIndex!, nonHiddenAreas.length - 1);
 
     const option = areas.splice(ev.oldIndex!, 1)[0];
-    areas.splice(ev.newIndex!, 0, option);
+    areas.splice(newIndex, 0, option);
 
     this._areas = areas;
   }
@@ -128,16 +131,21 @@ export class DialogAreaFilter
               const name = this.hass!.areas[area]?.name || area;
               return html`
                 <ha-list-item
-                  class=${classMap({ hidden: !isVisible })}
+                  class=${classMap({
+                    hidden: !isVisible,
+                    draggable: isVisible,
+                  })}
                   hasMeta
                   graphic="icon"
                   noninteractive
                 >
-                  <ha-svg-icon
-                    class="handle"
-                    .path=${mdiDrag}
-                    slot="graphic"
-                  ></ha-svg-icon>
+                  ${isVisible
+                    ? html`<ha-svg-icon
+                        class="handle"
+                        .path=${mdiDrag}
+                        slot="graphic"
+                      ></ha-svg-icon>`
+                    : nothing}
                   ${name}
                   <ha-icon-button
                     tabindex="0"
@@ -177,6 +185,11 @@ export class DialogAreaFilter
       hidden.push(area);
     }
     this._hidden = hidden;
+    const nonHiddenAreas = this._areas.filter(
+      (ar) => !this._hidden.includes(ar)
+    );
+    const hiddenAreas = this._areas.filter((ar) => this._hidden.includes(ar));
+    this._areas = [...nonHiddenAreas, ...hiddenAreas];
   }
 
   static get styles(): CSSResultGroup {
@@ -193,7 +206,7 @@ export class DialogAreaFilter
           overflow: visible;
         }
         .hidden {
-          opacity: 0.3;
+          color: var(--disabled-text-color);
         }
         .handle {
           cursor: grab;