From 1863389e4639881189dbd0d948c9253732303d82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <joasoe@gmail.com>
Date: Sun, 21 Nov 2021 19:39:51 +0100
Subject: [PATCH] Remove hacs-section-navigation (#540)

---
 .../dialogs/hacs-repository-info-dialog.ts    |  81 +++++------
 src/components/hacs-section-navigation.ts     | 126 ------------------
 src/panels/hacs-entry-panel.ts                |   8 +-
 src/panels/hacs-sections.ts                   |   6 +-
 4 files changed, 45 insertions(+), 176 deletions(-)
 delete mode 100644 src/components/hacs-section-navigation.ts

diff --git a/src/components/dialogs/hacs-repository-info-dialog.ts b/src/components/dialogs/hacs-repository-info-dialog.ts
index 46a183c1..a7240b86 100644
--- a/src/components/dialogs/hacs-repository-info-dialog.ts
+++ b/src/components/dialogs/hacs-repository-info-dialog.ts
@@ -48,7 +48,6 @@ export class HacsRepositoryDialog extends HacsDialogBase {
         this._repository = this._getRepository(this.hacs.repositories, this.repository!);
       }
     });
-    console.log(changedProperties);
     return (
       changedProperties.has("sidebarDocked") ||
       changedProperties.has("narrow") ||
@@ -85,49 +84,43 @@ export class HacsRepositoryDialog extends HacsDialogBase {
         maxWidth
       >
         <div class="content">
-          ${!this.narrow
-            ? html`
-                <div class="chips">
-                  ${this._repository.installed
-                    ? html`
-                        <ha-chip
-                          title="${this.hacs.localize("dialog_info.version_installed")}"
-                          hasIcon
-                        >
-                          <ha-svg-icon slot="icon" .path=${mdiCube}></ha-svg-icon>
-                          ${this._repository.installed_version}
-                        </ha-chip>
-                      `
-                    : ""}
-                  ${authors
-                    ? authors.map(
-                        (author) => html`<hacs-link .url="https://github.com/${author}">
-                          <ha-chip title="${this.hacs.localize("dialog_info.author")}" hasIcon>
-                            <ha-svg-icon slot="icon" .path=${mdiAccount}></ha-svg-icon>
-                            @${author}
-                          </ha-chip>
-                        </hacs-link>`
-                      )
-                    : ""}
-                  ${this._repository.downloads
-                    ? html` <ha-chip hasIcon title="${this.hacs.localize("dialog_info.downloads")}">
-                        <ha-svg-icon slot="icon" .path=${mdiArrowDownBold}></ha-svg-icon>
-                        ${this._repository.downloads}
-                      </ha-chip>`
-                    : ""}
-                  <ha-chip title="${this.hacs.localize("dialog_info.stars")}" hasIcon>
-                    <ha-svg-icon slot="icon" .path=${mdiStar}></ha-svg-icon>
-                    ${this._repository.stars}
+          <div class="chips">
+            ${this._repository.installed
+              ? html`
+                  <ha-chip title="${this.hacs.localize("dialog_info.version_installed")}" hasIcon>
+                    <ha-svg-icon slot="icon" .path=${mdiCube}></ha-svg-icon>
+                    ${this._repository.installed_version}
                   </ha-chip>
-                  <hacs-link .url="https://github.com/${this._repository.full_name}/issues">
-                    <ha-chip title="${this.hacs.localize("dialog_info.open_issues")}" hasIcon>
-                      <ha-svg-icon slot="icon" .path=${mdiExclamationThick}></ha-svg-icon>
-                      ${this._repository.issues}
+                `
+              : ""}
+            ${authors
+              ? authors.map(
+                  (author) => html`<hacs-link .url="https://github.com/${author}">
+                    <ha-chip title="${this.hacs.localize("dialog_info.author")}" hasIcon>
+                      <ha-svg-icon slot="icon" .path=${mdiAccount}></ha-svg-icon>
+                      @${author}
                     </ha-chip>
-                  </hacs-link>
-                </div>
-              `
-            : ""}
+                  </hacs-link>`
+                )
+              : ""}
+            ${this._repository.downloads
+              ? html` <ha-chip hasIcon title="${this.hacs.localize("dialog_info.downloads")}">
+                  <ha-svg-icon slot="icon" .path=${mdiArrowDownBold}></ha-svg-icon>
+                  ${this._repository.downloads}
+                </ha-chip>`
+              : ""}
+            <ha-chip title="${this.hacs.localize("dialog_info.stars")}" hasIcon>
+              <ha-svg-icon slot="icon" .path=${mdiStar}></ha-svg-icon>
+              ${this._repository.stars}
+            </ha-chip>
+            <hacs-link .url="https://github.com/${this._repository.full_name}/issues">
+              <ha-chip title="${this.hacs.localize("dialog_info.open_issues")}" hasIcon>
+                <ha-svg-icon slot="icon" .path=${mdiExclamationThick}></ha-svg-icon>
+                ${this._repository.issues}
+              </ha-chip>
+            </hacs-link>
+          </div>
+
           ${this._repository.updated_info
             ? markdown.html(
                 this._repository.additional_info || this.hacs.localize("dialog_info.no_info"),
@@ -160,9 +153,6 @@ export class HacsRepositoryDialog extends HacsDialogBase {
     return [
       HacsStyles,
       css`
-        ha-chip {
-          --ha-chip-icon-color: var(--hacs-chip-color, var(--primary-color));
-        }
         img {
           max-width: 100%;
         }
@@ -174,6 +164,7 @@ export class HacsRepositoryDialog extends HacsDialogBase {
         }
         .chips {
           display: flex;
+          flex-wrap: wrap;
           padding-bottom: 8px;
           gap: 4px;
         }
diff --git a/src/components/hacs-section-navigation.ts b/src/components/hacs-section-navigation.ts
deleted file mode 100644
index db4bcba2..00000000
--- a/src/components/hacs-section-navigation.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-item/paper-item-body";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../homeassistant-frontend/src/components/ha-card";
-import "../../homeassistant-frontend/src/components/ha-icon-next";
-import "../../homeassistant-frontend/src/components/ha-svg-icon";
-import { HomeAssistant } from "../../homeassistant-frontend/src/types";
-import { HacsPageNavigation } from "../data/common";
-import "./hacs-link";
-
-@customElement("hacs-section-navigation")
-class HacsSectionNavigation extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-  @property({ attribute: false }) public pages!: HacsPageNavigation[];
-  @property() public header: string;
-  @property({ type: Boolean, attribute: "no-next" }) public noNext: boolean = false;
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-card>
-        ${this.header ? html`<div class="card-header">${this.header}</div>` : ""}
-        ${this.pages.map(
-          (page) =>
-            html`
-              <hacs-link .url=${page.path}>
-                <paper-icon-item
-                  @tap=${() => {
-                    page.name === "Unexpected frontend version"
-                      ? this._clearCache()
-                      : this._openDialog(page);
-                  }}
-                >
-                  <ha-svg-icon
-                    .path=${page.iconPath}
-                    slot="item-icon"
-                    class="${page.class || ""}"
-                  ></ha-svg-icon>
-                  <paper-item-body two-line>
-                    ${page.name} ${page.secondary ? ` (${page.secondary})` : ""}
-                    <div secondary>${page.info ? page.info : ""}</div>
-                  </paper-item-body>
-                  ${!this.noNext ? html`<ha-icon-next></ha-icon-next>` : ""}
-                </paper-icon-item>
-              </hacs-link>
-            `
-        )}
-      </ha-card>
-    `;
-  }
-
-  private _openDialog(page: HacsPageNavigation) {
-    if (!page.dialog) {
-      return;
-    }
-    this.dispatchEvent(
-      new CustomEvent("hacs-dialog", {
-        detail: {
-          type: page.dialog,
-          repository: page.repository,
-        },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  private _clearCache() {
-    window.parent.location.href = window.location.href;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      hacs-link {
-        text-decoration: none;
-        --hcv-text-color-link: var(--primary-text-color);
-        position: relative;
-        display: block;
-        outline: 0;
-      }
-      ha-svg-icon,
-      ha-icon-next {
-        color: var(--secondary-text-color);
-      }
-      .iron-selected paper-item::before,
-      a:not(.iron-selected):focus::before {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        pointer-events: none;
-        content: "";
-        transition: opacity 15ms linear;
-        will-change: opacity;
-      }
-      a:not(.iron-selected):focus::before {
-        background-color: currentColor;
-        opacity: var(--dark-divider-opacity);
-      }
-      .iron-selected paper-item:focus::before,
-      .iron-selected:focus paper-item::before {
-        opacity: 0.2;
-      }
-      div[secondary] {
-        white-space: normal;
-      }
-      ha-svg-icon.warning {
-        color: var(--hcv-color-warning);
-      }
-      ha-svg-icon.error {
-        color: var(--hcv-color-error);
-      }
-
-      .card-header {
-        color: var(--ha-card-header-color, --primary-text-color);
-        font-family: var(--ha-card-header-font-family, inherit);
-        font-size: var(--ha-card-header-font-size, 24px);
-        letter-spacing: -0.012em;
-        line-height: 32px;
-        display: block;
-        padding: 8px 16px 0;
-      }
-    `;
-  }
-}
diff --git a/src/panels/hacs-entry-panel.ts b/src/panels/hacs-entry-panel.ts
index b5e9f004..105b754d 100644
--- a/src/panels/hacs-entry-panel.ts
+++ b/src/panels/hacs-entry-panel.ts
@@ -1,3 +1,4 @@
+import "../../homeassistant-frontend/src/panels/config/dashboard/ha-config-navigation";
 import { mdiAlertCircle, mdiHomeAssistant, mdiInformation, mdiOpenInNew } from "@mdi/js";
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
@@ -17,7 +18,6 @@ import "../../homeassistant-frontend/src/panels/config/ha-config-section";
 import { haStyle } from "../../homeassistant-frontend/src/resources/styles";
 import { HomeAssistant, Route } from "../../homeassistant-frontend/src/types";
 import { showDialogAbout } from "../components/dialogs/hacs-about-dialog";
-import "../components/hacs-section-navigation";
 import { Message, Repository, sortRepositoriesByName } from "../data/common";
 import { Hacs } from "../data/hacs";
 import { HacsStyles } from "../styles/hacs-common-style";
@@ -125,7 +125,11 @@ export class HacsEntryPanel extends LitElement {
                 )}
               </ha-card>`
             : ""}
-          <hacs-section-navigation .pages=${this.hacs.sections}></hacs-section-navigation>
+
+          <ha-card>
+            <ha-config-navigation .hass=${this.hass} .pages=${this.hacs.sections}>
+            </ha-config-navigation>
+          </ha-card>
 
           <ha-card>
             ${isComponentLoaded(this.hass, "hassio")
diff --git a/src/panels/hacs-sections.ts b/src/panels/hacs-sections.ts
index 33840e60..7c194a32 100644
--- a/src/panels/hacs-sections.ts
+++ b/src/panels/hacs-sections.ts
@@ -15,7 +15,7 @@ export const sections = (language: string) => ({
         categories: ["integration"],
         iconPath: mdiPuzzle,
         id: "integrations",
-        info: localize(language, "sections.integrations.description"),
+        description: localize(language, "sections.integrations.description"),
         name: localize(language, "sections.integrations.title"),
         path: "/hacs/integrations",
         core: true,
@@ -24,7 +24,7 @@ export const sections = (language: string) => ({
         categories: ["plugin", "theme"],
         iconPath: mdiPalette,
         id: "frontend",
-        info: localize(language, "sections.frontend.description"),
+        description: localize(language, "sections.frontend.description"),
         name: localize(language, "sections.frontend.title"),
         path: "/hacs/frontend",
         core: true,
@@ -33,7 +33,7 @@ export const sections = (language: string) => ({
         categories: ["python_script", "appdaemon", "netdaemon"],
         iconPath: mdiRobot,
         id: "automation",
-        info: localize(language, "sections.automation.description"),
+        description: localize(language, "sections.automation.description"),
         name: localize(language, "sections.automation.title"),
         path: "/hacs/automation",
         core: true,