From a6312f4279bd2c97cb0606d869acaa792fb4ee00 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 27 Jul 2021 00:11:34 +0200
Subject: [PATCH] Fix sidebar view edit mode (#9615)

---
 src/panels/lovelace/views/hui-sidebar-view.ts | 71 ++++++++++---------
 1 file changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/panels/lovelace/views/hui-sidebar-view.ts b/src/panels/lovelace/views/hui-sidebar-view.ts
index 0b8bd652c5..79f57c2ea2 100644
--- a/src/panels/lovelace/views/hui-sidebar-view.ts
+++ b/src/panels/lovelace/views/hui-sidebar-view.ts
@@ -17,10 +17,9 @@ import type {
 } from "../../../data/lovelace";
 import type { HomeAssistant } from "../../../types";
 import { HuiErrorCard } from "../cards/hui-error-card";
+import { HuiCardOptions } from "../components/hui-card-options";
 import type { Lovelace, LovelaceCard } from "../types";
 
-let editCodeLoaded = false;
-
 export class SideBarView extends LitElement implements LovelaceViewElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
@@ -43,8 +42,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
   public willUpdate(changedProperties: PropertyValues): void {
     super.willUpdate(changedProperties);
 
-    if (this.lovelace?.editMode && !editCodeLoaded) {
-      editCodeLoaded = true;
+    if (this.lovelace?.editMode) {
       import("./default-view-editable");
     }
 
@@ -71,7 +69,8 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
 
   protected render(): TemplateResult {
     return html`
-      ${this.lovelace?.editMode && this.cards.length === 0
+      <div class="container"></div>
+      ${this.lovelace?.editMode
         ? html`
             <ha-fab
               .label=${this.hass!.localize(
@@ -103,43 +102,41 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
     if (this.hasUpdated) {
       const oldMain = this.renderRoot.querySelector("#main");
       const oldSidebar = this.renderRoot.querySelector("#sidebar");
+      const container = this.renderRoot.querySelector(".container")!;
       if (oldMain) {
-        this.renderRoot.removeChild(oldMain);
+        container.removeChild(oldMain);
       }
       if (oldSidebar) {
-        this.renderRoot.removeChild(oldSidebar);
+        container.removeChild(oldSidebar);
       }
-      this.renderRoot.appendChild(mainDiv);
-      this.renderRoot.appendChild(sidebarDiv);
+      container.appendChild(mainDiv);
+      container.appendChild(sidebarDiv);
     } else {
       this.updateComplete.then(() => {
-        this.renderRoot.appendChild(mainDiv);
-        this.renderRoot.appendChild(sidebarDiv);
+        const container = this.renderRoot.querySelector(".container")!;
+        container.appendChild(mainDiv);
+        container.appendChild(sidebarDiv);
       });
     }
 
     this.cards.forEach((card: LovelaceCard, idx) => {
       const cardConfig = this._config?.cards?.[idx];
+      let element: LovelaceCard | HuiCardOptions;
       if (this.isStrategy || !this.lovelace?.editMode) {
         card.editMode = false;
-        if (cardConfig?.view_layout?.position !== "sidebar") {
-          mainDiv.appendChild(card);
-        } else {
-          sidebarDiv.appendChild(card);
-        }
-        return;
-      }
-
-      const wrapper = document.createElement("hui-card-options");
-      wrapper.hass = this.hass;
-      wrapper.lovelace = this.lovelace;
-      wrapper.path = [this.index!, 0];
-      card.editMode = true;
-      wrapper.appendChild(card);
-      if (cardConfig?.view_layout?.position !== "sidebar") {
-        mainDiv.appendChild(card);
+        element = card;
       } else {
-        sidebarDiv.appendChild(card);
+        element = document.createElement("hui-card-options");
+        element.hass = this.hass;
+        element.lovelace = this.lovelace;
+        element.path = [this.index!, idx];
+        card.editMode = true;
+        element.appendChild(card);
+      }
+      if (cardConfig?.view_layout?.position !== "sidebar") {
+        mainDiv.appendChild(element);
+      } else {
+        sidebarDiv.appendChild(element);
       }
     });
   }
@@ -147,13 +144,17 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
   static get styles(): CSSResultGroup {
     return css`
       :host {
-        display: flex;
+        display: block;
         padding-top: 4px;
-        margin-left: 4px;
-        margin-right: 4px;
         height: 100%;
         box-sizing: border-box;
+      }
+
+      .container {
+        display: flex;
         justify-content: center;
+        margin-left: 4px;
+        margin-right: 4px;
       }
 
       #main {
@@ -166,18 +167,18 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
         max-width: 380px;
       }
 
-      :host > div {
+      .container > div {
         min-width: 0;
         box-sizing: border-box;
       }
 
-      :host > div > * {
+      .container > div > * {
         display: block;
         margin: var(--masonry-view-card-margin, 4px 4px 8px);
       }
 
       @media (max-width: 760px) {
-        :host {
+        .container {
           flex-direction: column;
         }
         #sidebar {
@@ -186,7 +187,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
       }
 
       @media (max-width: 500px) {
-        :host > div > * {
+        .container > div > * {
           margin-left: 0;
           margin-right: 0;
         }