Update sidebar

src/components/ha-sidebar-edit-panels.ts

@@ -0,0 +1,187 @@
+import { mdiClose, mdiPlus } from "@mdi/js";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import type { SortableInstance } from "../resources/sortable";
+import { HomeAssistant } from "../types";
+import "./ha-icon";
+import "./ha-icon-button";
+import "./ha-svg-icon";
+
+const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    padding: 0 12px;
+  }
+  .panel {
+    --rgb-text: var(--rgb-sidebar-text-color);
+    background-color: transparent;
+    color: rgb(var(--rgb-text));
+    font-family: inherit;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    border-radius: var(--sidebar-item-radius, 25px);
+    height: 50px;
+  }
+  .panel > .icon {
+    display: flex;
+    width: 36px;
+    text-align: left;
+  }
+  .panel > ha-icon-button {
+    margin-left: auto;
+    margin-right: -12px;
+    margin-inline: auto -12px;
+  }
+  .panel:hover {
+    color: rgb(var(--rgb-text));
+    background-color: rgba(var(--rgb-text), 0.08);
+  }
+  .panel:focus-visible,
+  .panel:active {
+    color: rgb(var(--rgb-text));
+    background-color: rgba(var(--rgb-text), 0.12);
+  }
+  #sortable {
+    overflow: visible;
+  }
+  #sortable .panel {
+    cursor: grab;
+  }
+  .sortable-fallback {
+    display: none;
+  }
+  .sortable-ghost {
+    opacity: 0.4;
+  }
+  #sortable .panel:nth-child(even) {
+    animation: keyframes1 infinite 0.37s;
+    transform-origin: 50% 10%;
+  }
+  #sortable .panel:nth-child(odd) {
+    animation: keyframes2 infinite alternate 0.5s 0.15s;
+    transform-origin: 30% 5%;
+  }
+  @keyframes keyframes1 {
+    0% {
+      transform: rotate(-1deg);
+      animation-timing-function: ease-in;
+    }
+
+    50% {
+      transform: rotate(1.5deg);
+      animation-timing-function: ease-out;
+    }
+  }
+
+  @keyframes keyframes2 {
+    0% {
+      transform: rotate(1deg);
+      animation-timing-function: ease-in;
+    }
+
+    50% {
+      transform: rotate(-1.5deg);
+      animation-timing-function: ease-out;
+    }
+  }
+`;
+
+@customElement("ha-sidebar-edit-panels")
+class HaSidebarEditPanels extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public panels: any[] = [];
+
+  @property() public hiddenPanels: any[] = [];
+
+  private _sortable?: SortableInstance;
+
+  protected render() {
+    const renderPanel = (panel) =>
+      html`<div class="panel" data-panel=${panel.url_path}>
+        <span class="icon">
+          ${panel.icon
+            ? html`<ha-icon .icon=${panel.icon}></ha-icon>`
+            : html`<ha-svg-icon .path=${panel.iconPath}></ha-svg-icon>`}
+        </span>
+        ${panel.name}
+        <ha-icon-button
+          .label=${this.hass.localize("ui.sidebar.hide_panel")}
+          .path=${mdiClose}
+          @click=${this._hidePanel}
+        ></ha-icon-button>
+      </div>`;
+    const renderHiddenPanel = (panel) =>
+      html`<button
+        class="panel"
+        data-panel=${panel.url_path}
+        title=${this.hass.localize("ui.sidebar.show_panel")}
+        @click=${this._showPanel}
+      >
+        <span class="icon">
+          ${panel.icon
+            ? html`<ha-icon .icon=${panel.icon}></ha-icon>`
+            : html`<ha-svg-icon .path=${panel.iconPath}></ha-svg-icon>`}
+        </span>
+        ${panel.name}
+        <ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
+      </button>`;
+    return html`<div id="sortable">${this.panels.map(renderPanel)}</div>
+      ${this.hiddenPanels.map(renderHiddenPanel)}`;
+  }
+
+  protected async firstUpdated() {
+    const { default: Sortable } = await import("../resources/sortable");
+    this._sortable = new Sortable(
+      this.shadowRoot!.getElementById("sortable")!,
+      {
+        animation: 150,
+        dataIdAttr: "data-panel",
+        handle: "div",
+        onSort: () => {
+          fireEvent(this, "panel-reorder", this._sortable!.toArray());
+        },
+      }
+    );
+  }
+
+  private _hidePanel(ev: CustomEvent) {
+    const panel = (ev.target as HTMLElement)
+      .closest("[data-panel]")
+      ?.getAttribute("data-panel");
+    if (!panel) return;
+    fireEvent(this, "panel-hide", panel);
+  }
+
+  private _showPanel(ev: CustomEvent) {
+    const panel = (ev.target as HTMLElement)
+      .closest("[data-panel]")
+      ?.getAttribute("data-panel");
+    if (!panel) return;
+    fireEvent(this, "panel-show", panel);
+  }
+
+  static styles = styles;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-sidebar-edit-panels": HaSidebarEditPanels;
+  }
+  interface HASSDomEvents {
+    "panel-reorder": string[];
+    "panel-hide": string;
+    "panel-show": string;
+  }
+}

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

@@ -0,0 +1,90 @@
+import "@material/mwc-button/mwc-button";
+import { mdiCog } from "@mdi/js";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { css, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { throttle } from "../common/util/throttle";
+import { subscribeRepairsIssueRegistry } from "../data/repairs";
+import { updateCanInstall, UpdateEntity } from "../data/update";
+import { haStyleSidebarItem } from "../resources/styles";
+import { HomeAssistant } from "../types";
+import "./ha-svg-icon";
+import { keydown, keyup } from "../resources/button-handlers";
+
+const styles = css`
+  .item.expanded {
+    width: 100%;
+  }
+`;
+
+@customElement("ha-sidebar-panel-config")
+class HaSidebarPanelConfig extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public name = "";
+
+  @property({ type: Boolean }) public expanded = false;
+
+  @property({ type: Boolean }) public selected = false;
+
+  @state() private _updatesCount = 0;
+
+  @state() private _issuesCount = 0;
+
+  protected render() {
+    const notices = this._updatesCount + this._issuesCount;
+    return html`<a
+      href="/config"
+      aria-label=${this.name}
+      aria-current=${this.selected ? "page" : "false"}
+      class="item ${this.expanded ? "expanded" : ""}"
+      @keydown=${keydown}
+      @keyup=${keyup}
+    >
+      <div class="target"></div>
+      <span class="icon">
+        <ha-svg-icon .path=${mdiCog}></ha-svg-icon>
+        ${!this.expanded && notices > 0
+          ? html`<span class="badge">${notices}</span>`
+          : ""}
+      </span>
+      <span class="name">${this.name}</span>
+      ${this.expanded && notices > 0
+        ? html`<span class="count">${notices}</span>`
+        : ""}
+    </a>`;
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    this._checkUpdates();
+  }
+
+  private _checkUpdates = throttle(() => {
+    this._updatesCount = Object.keys(this.hass.states).filter(
+      (e) =>
+        e.startsWith("update.") &&
+        updateCanInstall(this.hass.states[e] as UpdateEntity)
+    ).length;
+  }, 5000);
+
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return this.hass.user?.is_admin
+      ? [
+          subscribeRepairsIssueRegistry(this.hass.connection!, (repairs) => {
+            this._issuesCount = repairs.issues.filter(
+              (issue) => !issue.ignored
+            ).length;
+          }),
+        ]
+      : [];
+  }
+
+  static styles = [haStyleSidebarItem, styles];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-sidebar-panel-config": HaSidebarPanelConfig;
+  }
+}

src/components/ha-sidebar-panel-ext-config.ts

@@ -0,0 +1,51 @@
+import "@material/mwc-button/mwc-button";
+import { mdiCellphoneCog } from "@mdi/js";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { haStyleSidebarItem } from "../resources/styles";
+import "./ha-icon";
+import "./ha-svg-icon";
+import { HomeAssistant } from "../types";
+
+const styles = css`
+  .item {
+    width: 100%;
+  }
+`;
+
+@customElement("ha-sidebar-panel-ext-config")
+class HaSidebarPanelExtConfig extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public name = "";
+
+  @property({ type: Boolean }) public expanded = false;
+
+  protected render() {
+    return html`<button
+      class="item ${this.expanded ? "expanded" : ""}"
+      aria-label=${this.name}
+      @click=${this._showConfig}
+    >
+      <div class="target"></div>
+      <span class="icon">
+        <ha-svg-icon .path=${mdiCellphoneCog}></ha-svg-icon>
+      </span>
+      <span class="name">${this.name}</span>
+    </button>`;
+  }
+
+  private _showConfig() {
+    this.hass.auth.external!.fireMessage({
+      type: "config_screen/show",
+    });
+  }
+
+  static styles = [haStyleSidebarItem, styles];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-sidebar-panel-ext-config": HaSidebarPanelExtConfig;
+  }
+}