Use Sortable to move entities in entities editor

package.json

@@ -79,6 +79,7 @@
     "@polymer/polymer": "3.1.0",
     "@thomasloven/round-slider": "0.5.0",
     "@types/chromecast-caf-sender": "^1.0.3",
+    "@types/sortablejs": "^1.10.6",
     "@vaadin/vaadin-combo-box": "^5.0.10",
     "@vaadin/vaadin-date-picker": "^4.0.7",
     "@vue/web-component-wrapper": "^1.2.0",

src/components/ha-sidebar-sort-styles.ts

@@ -1,77 +1,75 @@
-import { html } from "lit-element";
+import { css } from "lit-element";
 
-export const sortStyles = html`
-  <style>
-    #sortable a:nth-of-type(2n) paper-icon-item {
-      animation-name: keyframes1;
-      animation-iteration-count: infinite;
-      transform-origin: 50% 10%;
-      animation-delay: -0.75s;
-      animation-duration: 0.25s;
-    }
+export const sortableStyles = css`
+  #sortable a:nth-of-type(2n) paper-icon-item {
+    animation-name: keyframes1;
+    animation-iteration-count: infinite;
+    transform-origin: 50% 10%;
+    animation-delay: -0.75s;
+    animation-duration: 0.25s;
+  }
 
-    #sortable a:nth-of-type(2n-1) paper-icon-item {
-      animation-name: keyframes2;
-      animation-iteration-count: infinite;
-      animation-direction: alternate;
-      transform-origin: 30% 5%;
-      animation-delay: -0.5s;
-      animation-duration: 0.33s;
-    }
+  #sortable a:nth-of-type(2n-1) paper-icon-item {
+    animation-name: keyframes2;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    transform-origin: 30% 5%;
+    animation-delay: -0.5s;
+    animation-duration: 0.33s;
+  }
 
-    #sortable {
-      outline: none;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .sortable-ghost {
-      opacity: 0.4;
-    }
+  #sortable {
+    outline: none;
+    display: flex;
+    flex-direction: column;
+  }
 
-    .sortable-fallback {
-      opacity: 0;
-    }
+  .sortable-ghost {
+    opacity: 0.4;
+  }
 
-    @keyframes keyframes1 {
-      0% {
-        transform: rotate(-1deg);
-        animation-timing-function: ease-in;
-      }
+  .sortable-fallback {
+    opacity: 0;
+  }
 
-      50% {
-        transform: rotate(1.5deg);
-        animation-timing-function: ease-out;
-      }
+  @keyframes keyframes1 {
+    0% {
+      transform: rotate(-1deg);
+      animation-timing-function: ease-in;
     }
 
-    @keyframes keyframes2 {
-      0% {
-        transform: rotate(1deg);
-        animation-timing-function: ease-in;
-      }
-
-      50% {
-        transform: rotate(-1.5deg);
-        animation-timing-function: ease-out;
-      }
+    50% {
+      transform: rotate(1.5deg);
+      animation-timing-function: ease-out;
     }
+  }
 
-    .hide-panel {
-      display: none;
-      position: absolute;
-      right: 8px;
+  @keyframes keyframes2 {
+    0% {
+      transform: rotate(1deg);
+      animation-timing-function: ease-in;
     }
 
-    :host([expanded]) .hide-panel {
-      display: inline-flex;
+    50% {
+      transform: rotate(-1.5deg);
+      animation-timing-function: ease-out;
     }
+  }
 
-    paper-icon-item.hidden-panel,
-    paper-icon-item.hidden-panel span,
-    paper-icon-item.hidden-panel ha-icon[slot="item-icon"] {
-      color: var(--secondary-text-color);
-      cursor: pointer;
-    }
-  </style>
+  .hide-panel {
+    display: none;
+    position: absolute;
+    right: 8px;
+  }
+
+  :host([expanded]) .hide-panel {
+    display: inline-flex;
+  }
+
+  paper-icon-item.hidden-panel,
+  paper-icon-item.hidden-panel span,
+  paper-icon-item.hidden-panel ha-icon[slot="item-icon"] {
+    color: var(--secondary-text-color);
+    cursor: pointer;
+  }
 `;

src/components/ha-sidebar.ts

@@ -23,7 +23,7 @@ import {
   LitElement,
   property,
   PropertyValues,
-  TemplateResult,
+  unsafeCSS,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { guard } from "lit-html/directives/guard";
@@ -160,7 +160,7 @@ const computePanels = memoizeOne(
 
 let Sortable;
 
-let sortStyles: TemplateResult;
+let sortStyles: CSSResult;
 
 @customElement("ha-sidebar")
 class HaSidebar extends LitElement {
@@ -228,7 +228,9 @@ class HaSidebar extends LitElement {
     }
 
     return html`
-      ${this._editMode ? sortStyles : ""}
+      <style>
+        ${sortStyles?.cssText}
+      </style>
       <div class="menu">
         ${!this.narrow
           ? html`
@@ -483,7 +485,7 @@ class HaSidebar extends LitElement {
         import("./ha-sidebar-sort-styles"),
       ]);
 
-      sortStyles = sortStylesImport.sortStyles;
+      sortStyles = sortStylesImport.sortableStyles;
 
       Sortable = sortableImport.Sortable;
       Sortable.mount(sortableImport.OnSpill);
@@ -686,7 +688,7 @@ class HaSidebar extends LitElement {
   }
 
   static get styles(): CSSResult[] {
-    return [
+    const styles = [
       haStyleScrollbar,
       css`
         :host {
@@ -962,6 +964,8 @@ class HaSidebar extends LitElement {
         }
       `,
     ];
+
+    return styles;
   }
 }