From dd64d88afe41d562139ea16c0b7e1f228e997b42 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Wed, 29 Jan 2025 12:04:09 +0100
Subject: [PATCH] Use handle icon for drag and drop in energy devices settings
 (#23933)

* Use handle icon for drag and drop in energy devices settings

* Remove import
---
 .../components/ha-energy-device-settings.ts   | 65 ++++++++-----------
 1 file changed, 28 insertions(+), 37 deletions(-)

diff --git a/src/panels/config/energy/components/ha-energy-device-settings.ts b/src/panels/config/energy/components/ha-energy-device-settings.ts
index bcb63979a6..ae09836423 100644
--- a/src/panels/config/energy/components/ha-energy-device-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-device-settings.ts
@@ -1,5 +1,5 @@
 import "@material/mwc-button/mwc-button";
-import { mdiDelete, mdiDevices, mdiPencil } from "@mdi/js";
+import { mdiDelete, mdiDevices, mdiDrag, mdiPencil } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { repeat } from "lit/directives/repeat";
@@ -7,7 +7,6 @@ import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon-button";
-import "../../../../components/ha-state-icon";
 import "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import type {
@@ -82,45 +81,37 @@ export class EnergyDeviceSettings extends LitElement {
               "ui.panel.config.energy.device_consumption.devices"
             )}
           </h3>
-          <ha-sortable
-            handle-selector=".row"
-            @item-moved=${this._itemMoved}
-            filter="ha-icon-button"
-          >
+          <ha-sortable handle-selector=".handle" @item-moved=${this._itemMoved}>
             <div class="devices">
               ${repeat(
                 this.preferences.device_consumption,
                 (device) => device.stat_consumption,
-                (device) => {
-                  const entityState = this.hass.states[device.stat_consumption];
-                  return html`
-                    <div class="row" .device=${device}>
-                      <ha-state-icon
-                        .hass=${this.hass}
-                        .stateObj=${entityState}
-                      ></ha-state-icon>
-                      <span class="content"
-                        >${device.name ||
-                        getStatisticLabel(
-                          this.hass,
-                          device.stat_consumption,
-                          this.statsMetadata?.[device.stat_consumption]
-                        )}</span
-                      >
-                      <ha-icon-button
-                        .label=${this.hass.localize("ui.common.edit")}
-                        @click=${this._editDevice}
-                        .path=${mdiPencil}
-                      ></ha-icon-button>
-                      <ha-icon-button
-                        .label=${this.hass.localize("ui.common.delete")}
-                        @click=${this._deleteDevice}
-                        .device=${device}
-                        .path=${mdiDelete}
-                      ></ha-icon-button>
+                (device) => html`
+                  <div class="row" .device=${device}>
+                    <div class="handle">
+                      <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                     </div>
-                  `;
-                }
+                    <span class="content"
+                      >${device.name ||
+                      getStatisticLabel(
+                        this.hass,
+                        device.stat_consumption,
+                        this.statsMetadata?.[device.stat_consumption]
+                      )}</span
+                    >
+                    <ha-icon-button
+                      .label=${this.hass.localize("ui.common.edit")}
+                      @click=${this._editDevice}
+                      .path=${mdiPencil}
+                    ></ha-icon-button>
+                    <ha-icon-button
+                      .label=${this.hass.localize("ui.common.delete")}
+                      @click=${this._deleteDevice}
+                      .device=${device}
+                      .path=${mdiDelete}
+                    ></ha-icon-button>
+                  </div>
+                `
               )}
             </div>
           </ha-sortable>
@@ -218,7 +209,7 @@ export class EnergyDeviceSettings extends LitElement {
       haStyle,
       energyCardStyles,
       css`
-        .row {
+        .handle {
           cursor: move; /* fallback if grab cursor is unsupported */
           cursor: grab;
         }