Fix divider issue, restore arrow down/up behavior, enter key clicks item

src/components/ha-divider-list-item.ts

@@ -1,25 +0,0 @@
-import { ListItem } from "@material/mwc-list/mwc-list-item";
-import { css, CSSResult, customElement } from "lit-element";
-
-@customElement("ha-divider-list-item")
-export class HaDividerListItem extends ListItem {
-  noninteractive = true;
-
-  static get styles(): CSSResult[] {
-    return [
-      super.styles,
-      css`
-        :host {
-          height: var(--ha-divider-height, 48px);
-          border: 1px solid black;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-divider-list-item": HaDividerListItem;
-  }
-}

src/components/ha-sidebar-panel-list.ts

@@ -1,4 +1,3 @@
-import "./ha-divider-list-item";
 import "./ha-clickable-list-item";
 import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-list/mwc-list";
@@ -168,6 +167,8 @@ class HaSidebarPanelList extends LitElement {
 
   private _recentKeydownActiveUntil = 0;
 
+  private _sortable?;
+
   // @ts-ignore
   @LocalStorage("sidebarPanelOrder", true, {
     attribute: false,
@@ -180,8 +181,6 @@ class HaSidebarPanelList extends LitElement {
   })
   private _hiddenPanels: string[] = [];
 
-  private _sortable?;
-
   protected render() {
     if (!this.hass) {
       return html``;
@@ -293,7 +292,7 @@ class HaSidebarPanelList extends LitElement {
           ? this._renderPanelsEdit(beforeSpacer)
           : this._renderPanels(beforeSpacer)}
 
-        <ha-divider-list-item></ha-divider-list-item>
+        
 
         
       </mwc-list>
@@ -632,9 +631,9 @@ class HaSidebarPanelList extends LitElement {
       haStyleScrollbar,
       css`
         :host {
-          height: calc(100% + var(--header-height));
+          height: calc(100% - var(--header-height) - 132px);
-          /* position: absolute; */
+          justify-content: space-between;
-          position: relative;
+          flex-direction: column;
           display: block;
           overflow: hidden;
           -ms-user-select: none;
@@ -643,10 +642,6 @@ class HaSidebarPanelList extends LitElement {
           border-right: 1px solid var(--divider-color);
           background-color: var(--sidebar-background-color);
           width: 64px;
-          /* height: calc(100% - var(--header-height) - 132px);
-          height: calc(
-            100% - var(--header-height) - 132px - env(safe-area-inset-bottom)
-          ); */
         }
         :host([expanded]) {
           width: 256px;
@@ -701,12 +696,8 @@ class HaSidebarPanelList extends LitElement {
           position: relative;
         }
 
-        ha-divider-list-item {
-          /* --ha-divider-height: calc(100vh - var(--header-height)); */
-        }
-
         mwc-list.ha-scrollbar {
-          height: 100%;
+          height: calc(100% - var(--header-height) - 42px);
           --mdc-list-vertical-padding: 4px 0;
           padding: 4px 0;
           display: flex;
@@ -717,12 +708,6 @@ class HaSidebarPanelList extends LitElement {
           margin-left: env(safe-area-inset-left);
         }
 
-        mwc-list.utility-panels {
-          position: absolute;
-          bottom: 0px;
-          width: 100%;
-        }
-
         :host([rtl]) mwc-list {
           margin-left: initial;
           margin-right: env(safe-area-inset-right);

src/components/ha-sidebar.ts

@@ -96,7 +96,8 @@ class HaSidebar extends LitElement {
         @scroll=${this._listboxScroll}
         @keydown=${this._listboxKeydown}
       >
-        ${this._renderNotifications()} ${this._renderUserItem()}
+        ${this._renderNotifications()} 
+        ${this._renderUserItem()}
       </mwc-list>
       ${this._renderSpacer()}
       <div class="tooltip"></div>
@@ -446,7 +447,8 @@ class HaSidebar extends LitElement {
       haStyleScrollbar,
       css`
         :host {
-          height: calc(100% - var(--header-height));
+          /* height: calc(100% - var(--header-height)); */
+          height: 100%;
           display: block;
           overflow: hidden;
           -ms-user-select: none;

src/layouts/home-assistant-main.ts

@@ -1,3 +1,4 @@
+import "../components/ha-sidebar-combined";
 import "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 import type { AppDrawerLayoutElement } from "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 import "@polymer/app-layout/app-drawer/app-drawer";
@@ -85,13 +86,13 @@ class HomeAssistantMain extends LitElement {
           .persistent=${!this.narrow &&
           this.hass.dockedSidebar !== "always_hidden"}
         >
-          <ha-sidebar
+          <ha-sidebar-combined
             .hass=${hass}
             .narrow=${sidebarNarrow}
             .editMode=${this._sidebarEditMode}
             .alwaysExpand=${sidebarNarrow ||
             this.hass.dockedSidebar === "docked"}
-          ></ha-sidebar>
+          ></ha-sidebar-combined>
         </app-drawer>
 
         <partial-panel-resolver

src/resources/ha-sortable-style-ha-clickable.ts

@@ -91,8 +91,7 @@ export const sortableStyles = css`
   }
 
   ha-clickable-list-item.hidden-panel,
-  ha-clickable-list-item.hidden-panel span,
+  ha-clickable-list-item.hidden-panel span {
-  ha-clickable-list-item.hidden-panel ha-icon[slot="item-icon"] {
     color: var(--secondary-text-color);
     cursor: pointer;
   }