Remove hacs-section-navigation (#540)

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;
  }

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")

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,