Finish up config changes (#10710)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

hassio/src/dashboard/hassio-update.ts

@@ -111,7 +111,7 @@ export class HassioUpdate extends LitElement {
         </div>
         <div class="card-actions">
           <a href="/hassio/update-available/${key}">
-            <mwc-button .label=${this.supervisor.localize("common.review")}>
+            <mwc-button .label=${this.supervisor.localize("common.show")}>
             </mwc-button>
           </a>
         </div>

hassio/src/system/hassio-core-info.ts

@@ -71,7 +71,7 @@ class HassioCoreInfo extends LitElement {
                 ? html`
                     <a href="/hassio/update-available/core">
                       <mwc-button
-                        .label=${this.supervisor.localize("common.review")}
+                        .label=${this.supervisor.localize("common.show")}
                       >
                       </mwc-button>
                     </a>

hassio/src/system/hassio-host-info.ts

@@ -110,7 +110,7 @@ class HassioHostInfo extends LitElement {
                 ? html`
                     <a href="/hassio/update-available/os">
                       <mwc-button
-                        .label=${this.supervisor.localize("common.review")}
+                        .label=${this.supervisor.localize("common.show")}
                       >
                       </mwc-button>
                     </a>

hassio/src/system/hassio-supervisor-info.ts

@@ -81,7 +81,7 @@ class HassioSupervisorInfo extends LitElement {
                 ? html`
                     <a href="/hassio/update-available/supervisor">
                       <mwc-button
-                        .label=${this.supervisor.localize("common.review")}
+                        .label=${this.supervisor.localize("common.show")}
                       >
                       </mwc-button>
                     </a>

hassio/src/update-available/update-available-card.ts

@@ -310,13 +310,13 @@ class UpdateAvailableCard extends LitElement {
       let backupArgs: HassioPartialBackupCreateParams;
       if (this._updateType === "addon") {
         backupArgs = {
-          name: `addon_${this._updateType}_${this._addonInfo?.version}`,
+          name: `addon_${this.addonSlug}_${this._version}`,
-          addons: [this._updateType!],
+          addons: [this.addonSlug!],
           homeassistant: false,
         };
       } else {
         backupArgs = {
-          name: `${this._updateType}_${this._addonInfo?.version}`,
+          name: `${this._updateType}_${this._version}`,
           folders: ["homeassistant"],
           homeassistant: true,
         };
@@ -334,7 +334,7 @@ class UpdateAvailableCard extends LitElement {
     this._action = "update";
     try {
       if (this._updateType === "addon") {
-        await updateHassioAddon(this.hass, this._updateType!);
+        await updateHassioAddon(this.hass, this.addonSlug!);
       } else if (this._updateType === "core") {
         await updateCore(this.hass);
       } else if (this._updateType === "os") {

src/common/config/can_show_page.ts

@@ -7,7 +7,13 @@ export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
   !hideAdvancedPage(hass, page);
 
 const isLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
-  !page.component || isComponentLoaded(hass, page.component);
+  page.component
+    ? isComponentLoaded(hass, page.component)
+    : page.components
+    ? page.components.some((integration) =>
+        isComponentLoaded(hass, integration)
+      )
+    : true;
 const isCore = (page: PageNavigation) => page.core;
 const isAdvancedPage = (page: PageNavigation) => page.advancedOnly;
 const userWantsAdvanced = (hass: HomeAssistant) => hass.userData?.showAdvanced;

src/layouts/hass-subpage.ts

@@ -13,6 +13,8 @@ class HassSubpage extends LitElement {
 
   @property({ type: Boolean, attribute: "main-page" }) public mainPage = false;
 
+  @property({ type: String, attribute: "back-path" }) public backPath?: string;
+
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
   @property({ type: Boolean }) public supervisor = false;
@@ -31,6 +33,14 @@ class HassSubpage extends LitElement {
                 .narrow=${this.narrow}
               ></ha-menu-button>
             `
+          : this.backPath
+          ? html`
+              <a href=${this.backPath}>
+                <ha-icon-button-arrow-prev
+                  .hass=${this.hass}
+                ></ha-icon-button-arrow-prev>
+              </a>
+            `
           : html`
               <ha-icon-button-arrow-prev
                 .hass=${this.hass}
@@ -80,6 +90,10 @@ class HassSubpage extends LitElement {
         border-bottom: var(--app-header-border-bottom, none);
         box-sizing: border-box;
       }
+      .toolbar a {
+        color: var(--app-header-text-color);
+        text-decoration: none;
+      }
 
       ha-menu-button,
       ha-icon-button-arrow-prev,

src/layouts/hass-tabs-subpage.ts

@@ -24,6 +24,7 @@ export interface PageNavigation {
   path: string;
   translationKey?: string;
   component?: string;
+  components?: string[];
   name?: string;
   core?: boolean;
   advancedOnly?: boolean;

src/panels/config/areas/ha-config-area-page.ts

@@ -135,7 +135,7 @@ class HaConfigAreaPage extends LitElement {
       <hass-tabs-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .tabs=${configSections.integrations}
+        .tabs=${configSections.devices}
         .route=${this.route}
       >
         ${this.narrow

src/panels/config/areas/ha-config-areas-dashboard.ts

@@ -89,7 +89,7 @@ export class HaConfigAreasDashboard extends LitElement {
         .narrow=${this.narrow}
         .isWide=${this.isWide}
         back-path="/config"
-        .tabs=${configSections.integrations}
+        .tabs=${configSections.devices}
         .route=${this.route}
       >
         <ha-icon-button

src/panels/config/automation/ha-automation-editor.ts

@@ -114,7 +114,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         .narrow=${this.narrow}
         .route=${this.route}
         .backCallback=${this._backTapped}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
       >
         <ha-button-menu
           corner="BOTTOM_START"

src/panels/config/automation/ha-automation-picker.ts

@@ -225,7 +225,7 @@ class HaAutomationPicker extends LitElement {
         back-path="/config"
         id="entity_id"
         .route=${this.route}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
         .activeFilters=${this._activeFilters}
         .columns=${this._columns(this.narrow, this.hass.locale)}
         .data=${this._automations(this.automations, this._filteredAutomations)}

src/panels/config/automation/ha-automation-trace.ts

@@ -112,7 +112,7 @@ export class HaAutomationTrace extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
       >
         ${this.narrow
           ? html`<span slot="header">${title}</span>

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -224,7 +224,7 @@ class HaBlueprintOverview extends LitElement {
         .narrow=${this.narrow}
         back-path="/config"
         .route=${this.route}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
         .columns=${this._columns(this.narrow, this.hass.language)}
         .data=${this._processedBlueprints(this.blueprints)}
         id="entity_id"

src/panels/config/cloud/login/cloud-login.ts

@@ -50,7 +50,7 @@ export class CloudLogin extends LitElement {
         header="Home Assistant Cloud"
       >
         <div class="content">
-          <ha-config-section isWide=${this.isWide}>
+          <ha-config-section .isWide=${this.isWide}>
             <span slot="header">Home Assistant Cloud</span>
             <div slot="introduction">
               <p>

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -15,6 +15,7 @@ import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "./ha-config-navigation";
+import { SupervisorAvailableUpdates } from "../../../data/supervisor/supervisor";
 
 @customElement("ha-config-dashboard")
 class HaConfigDashboard extends LitElement {
@@ -27,74 +28,11 @@ class HaConfigDashboard extends LitElement {
 
   @property() public cloudStatus?: CloudStatus;
 
+  @property() public supervisorUpdates?: SupervisorAvailableUpdates[] | null;
+
   @property() public showAdvanced!: boolean;
 
   protected render(): TemplateResult {
-    const content = html` <ha-config-section
-      .narrow=${this.narrow}
-      .isWide=${this.isWide}
-    >
-      <div slot="header">${this.hass.localize("ui.panel.config.header")}</div>
-
-      <div class="intro" slot="introduction">
-        ${this.hass.localize("ui.panel.config.introduction")}
-      </div>
-
-      ${isComponentLoaded(this.hass, "hassio")
-        ? html`<ha-config-updates
-            .hass=${this.hass}
-            slot="introduction"
-          ></ha-config-updates>`
-        : ""}
-      ${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
-        ? html`
-            <ha-card>
-              <ha-config-navigation
-                .hass=${this.hass}
-                .showAdvanced=${this.showAdvanced}
-                .pages=${[
-                  {
-                    component: "cloud",
-                    path: "/config/cloud",
-                    name: "Home Assistant Cloud",
-                    info: this.cloudStatus,
-                    iconPath: mdiCloudLock,
-                    iconColor: "#3B808E",
-                  },
-                ]}
-              ></ha-config-navigation>
-            </ha-card>
-          `
-        : ""}
-      ${Object.values(configSections).map(
-        (section) => html`
-          <ha-card>
-            <ha-config-navigation
-              .hass=${this.hass}
-              .showAdvanced=${this.showAdvanced}
-              .pages=${section}
-            ></ha-config-navigation>
-          </ha-card>
-        `
-      )}
-      ${!this.showAdvanced
-        ? html`
-            <div class="promo-advanced">
-              ${this.hass.localize("ui.panel.config.advanced_mode.hint_enable")}
-              <a href="/profile"
-                >${this.hass.localize(
-                  "ui.panel.config.advanced_mode.link_profile_page"
-                )}</a
-              >.
-            </div>
-          `
-        : ""}
-    </ha-config-section>`;
-
-    if (!this.narrow && this.hass.dockedSidebar !== "always_hidden") {
-      return content;
-    }
-
     return html`
       <ha-app-layout>
         <app-header fixed slot="header">
@@ -103,10 +41,72 @@ class HaConfigDashboard extends LitElement {
               .hass=${this.hass}
               .narrow=${this.narrow}
             ></ha-menu-button>
+            <div main-title>${this.hass.localize("panel.config")}</div>
           </app-toolbar>
         </app-header>
 
-        ${content}
+        <ha-config-section
+          .narrow=${this.narrow}
+          .isWide=${this.isWide}
+          full-width
+        >
+          ${isComponentLoaded(this.hass, "hassio") &&
+          this.supervisorUpdates === undefined
+            ? html``
+            : html`${this.supervisorUpdates !== null
+                  ? html`<ha-card>
+                      <ha-config-updates
+                        .hass=${this.hass}
+                        .narrow=${this.narrow}
+                        .supervisorUpdates=${this.supervisorUpdates}
+                      ></ha-config-updates>
+                    </ha-card>`
+                  : ""}
+                <ha-card>
+                  ${this.narrow && this.supervisorUpdates !== null
+                    ? html`<div class="title">
+                        ${this.hass.localize("panel.config")}
+                      </div>`
+                    : ""}
+                  ${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
+                    ? html`
+                        <ha-config-navigation
+                          .hass=${this.hass}
+                          .showAdvanced=${this.showAdvanced}
+                          .pages=${[
+                            {
+                              component: "cloud",
+                              path: "/config/cloud",
+                              name: "Home Assistant Cloud",
+                              info: this.cloudStatus,
+                              iconPath: mdiCloudLock,
+                              iconColor: "#3B808E",
+                            },
+                          ]}
+                        ></ha-config-navigation>
+                      `
+                    : ""}
+                  <ha-config-navigation
+                    .hass=${this.hass}
+                    .showAdvanced=${this.showAdvanced}
+                    .pages=${configSections.dashboard}
+                  ></ha-config-navigation>
+                </ha-card>
+                ${!this.showAdvanced
+                  ? html`
+                      <div class="promo-advanced">
+                        ${this.hass.localize(
+                          "ui.panel.config.advanced_mode.hint_enable"
+                        )}
+                        <a href="/profile"
+                          >${this.hass.localize(
+                            "ui.panel.config.advanced_mode.link_profile_page"
+                          )}</a
+                        >.
+                      </div>
+                    `
+                  : ""}`}
+        </ha-config-section>
       </ha-app-layout>
     `;
   }
@@ -116,16 +116,16 @@ class HaConfigDashboard extends LitElement {
       haStyle,
       css`
         app-header {
-          --app-header-background-color: var(--primary-background-color);
+          border-bottom: var(--app-header-border-bottom);
+          --header-height: 55px;
         }
         ha-card:last-child {
           margin-bottom: 24px;
         }
         ha-config-section {
-          margin-top: -12px;
+          margin: auto;
-        }
+          margin-top: -32px;
-        :host([narrow]) ha-config-section {
+          max-width: 600px;
-          margin-top: -20px;
         }
         ha-card {
           overflow: hidden;
@@ -134,6 +134,11 @@ class HaConfigDashboard extends LitElement {
           text-decoration: none;
           color: var(--primary-text-color);
         }
+        .title {
+          font-size: 16px;
+          padding: 16px;
+          padding-bottom: 0;
+        }
         .promo-advanced {
           text-align: center;
           color: var(--secondary-text-color);
@@ -142,8 +147,13 @@ class HaConfigDashboard extends LitElement {
         .promo-advanced a {
           color: var(--secondary-text-color);
         }
-        .intro {
+        :host([narrow]) ha-card {
-          margin-bottom: 24px;
+          background-color: var(--primary-background-color);
+          box-shadow: unset;
+        }
+
+        :host([narrow]) ha-config-section {
+          margin-top: -42px;
         }
       `,
     ];

src/panels/config/dashboard/ha-config-updates.ts

@@ -2,23 +2,13 @@ import "@material/mwc-button/mwc-button";
 import { mdiPackageVariant } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import {
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-alert";
 import "../../../components/ha-logo-svg";
 import "../../../components/ha-svg-icon";
-import { extractApiErrorMessage } from "../../../data/hassio/common";
+import { SupervisorAvailableUpdates } from "../../../data/supervisor/supervisor";
-import {
+import { buttonLinkStyle } from "../../../resources/styles";
-  fetchSupervisorAvailableUpdates,
-  SupervisorAvailableUpdates,
-} from "../../../data/supervisor/supervisor";
 import { HomeAssistant } from "../../../types";
 
 export const SUPERVISOR_UPDATE_NAMES = {
@@ -31,88 +21,117 @@ export const SUPERVISOR_UPDATE_NAMES = {
 class HaConfigUpdates extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private _supervisorUpdates?: SupervisorAvailableUpdates[];
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @state() private _error?: string;
+  @property({ attribute: false })
+  public supervisorUpdates?: SupervisorAvailableUpdates[] | null;
 
-  protected firstUpdated(changedProps: PropertyValues): void {
+  @state() private _showAll = false;
-    super.firstUpdated(changedProps);
-    this._loadSupervisorUpdates();
-  }
 
   protected render(): TemplateResult {
+    if (!this.supervisorUpdates) {
+      return html``;
+    }
+
+    const updates =
+      this._showAll || this.supervisorUpdates.length <= 3
+        ? this.supervisorUpdates
+        : this.supervisorUpdates.slice(0, 2);
+
     return html`
-      ${this._error
+      <div class="title">
-        ? html`<ha-alert
+        ${this.hass.localize("ui.panel.config.updates.title", {
-            .title=${this.hass.localize(
+          count: this.supervisorUpdates.length,
-              "ui.panel.config.updates.unable_to_fetch"
+        })}
-            )}
+      </div>
-            alert-type="error"
+      ${updates.map(
-          >
-            ${this._error}
-          </ha-alert>`
-        : ""}
-      ${this._supervisorUpdates?.map(
         (update) => html`
-          <ha-alert
+          <paper-icon-item>
-            .title=${update.update_type === "addon"
+            <span slot="item-icon" class="icon">
-              ? update.name
-              : SUPERVISOR_UPDATE_NAMES[update.update_type!]}
-          >
-            <span slot="icon" class="icon">
               ${update.update_type === "addon"
                 ? update.icon
                   ? html`<img src="/api/hassio${update.icon}" />`
                   : html`<ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon>`
                 : html`<ha-logo-svg></ha-logo-svg>`}
             </span>
-            ${this.hass.localize("ui.panel.config.updates.version_available", {
+            <paper-item-body two-line>
-              version_available: update.version_latest,
+              ${update.update_type === "addon"
-            })}
+                ? update.name
-            <a href="/hassio${update.panel_path}" slot="action">
+                : SUPERVISOR_UPDATE_NAMES[update.update_type!]}
+              <div secondary>
+                ${this.hass.localize(
+                  "ui.panel.config.updates.version_available",
+                  {
+                    version_available: update.version_latest,
+                  }
+                )}
+              </div>
+            </paper-item-body>
+            <a href="/hassio${update.panel_path}">
               <mwc-button
-                .label=${this.hass.localize("ui.panel.config.updates.review")}
+                .label=${this.hass.localize("ui.panel.config.updates.show")}
               >
               </mwc-button>
             </a>
-          </ha-alert>
+          </paper-icon-item>
         `
       )}
+      ${!this._showAll && !this.narrow ? html`<div class="divider"></div>` : ""}
+      ${!this._showAll && this.supervisorUpdates.length >= 4
+        ? html`
+            <button class="link show-all" @click=${this._showAllClicked}>
+              ${this.hass.localize("ui.panel.config.updates.show_all_updates")}
+            </button>
+          `
+        : ""}
     `;
   }
 
-  private async _loadSupervisorUpdates(): Promise<void> {
+  private _showAllClicked() {
-    try {
+    this._showAll = true;
-      this._supervisorUpdates = await fetchSupervisorAvailableUpdates(
-        this.hass
-      );
-    } catch (err) {
-      this._error = extractApiErrorMessage(err);
-    }
   }
 
-  static get styles(): CSSResultGroup {
+  static get styles(): CSSResultGroup[] {
-    return css`
+    return [
-      a {
+      buttonLinkStyle,
-        text-decoration: none;
+      css`
-        color: var(--primary-text-color);
+        .title {
-      }
+          font-size: 16px;
-      .icon {
+          padding: 16px;
-        display: inline-flex;
+          padding-bottom: 0;
-        height: 100%;
+        }
-        align-items: center;
+        a {
-      }
+          text-decoration: none;
-      img,
+          color: var(--primary-text-color);
-      ha-svg-icon,
+        }
-      ha-logo-svg {
+        .icon {
-        --mdc-icon-size: 32px;
+          display: inline-flex;
-        max-height: 32px;
+          height: 100%;
-        width: 32px;
+          align-items: center;
-      }
+        }
-      ha-logo-svg {
+        img,
-        color: var(--secondary-text-color);
+        ha-svg-icon,
-      }
+        ha-logo-svg {
-    `;
+          --mdc-icon-size: 32px;
+          max-height: 32px;
+          width: 32px;
+        }
+        ha-logo-svg {
+          color: var(--secondary-text-color);
+        }
+        button.show-all {
+          color: var(--primary-color);
+          text-decoration: none;
+          margin: 8px 16px;
+        }
+        .divider::before {
+          content: " ";
+          display: block;
+          height: 1px;
+          background-color: var(--divider-color);
+        }
+      `,
+    ];
   }
 }
 

src/panels/config/devices/ha-config-device-page.ts

@@ -218,7 +218,7 @@ export class HaConfigDevicePage extends LitElement {
       <hass-tabs-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .tabs=${configSections.integrations}
+        .tabs=${configSections.devices}
         .route=${this.route}
       >
         ${

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -375,7 +375,7 @@ export class HaConfigDeviceDashboard extends LitElement {
         .backPath=${this._searchParms.has("historyBack")
           ? undefined
           : "/config"}
-        .tabs=${configSections.integrations}
+        .tabs=${configSections.devices}
         .route=${this.route}
         .activeFilters=${activeFilters}
         .numHidden=${this._numHiddenDevices}

src/panels/config/energy/ha-config-energy.ts

@@ -1,3 +1,4 @@
+import "../../../layouts/hass-error-screen";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import {
@@ -9,11 +10,10 @@ import {
   getEnergyPreferences,
 } from "../../../data/energy";
 import "../../../layouts/hass-loading-screen";
-import "../../../layouts/hass-tabs-subpage";
+import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import "../../../components/ha-alert";
-import { configSections } from "../ha-panel-config";
 import "./components/ha-energy-device-settings";
 import "./components/ha-energy-grid-settings";
 import "./components/ha-energy-solar-settings";
@@ -68,14 +68,13 @@ class HaConfigEnergy extends LitElement {
     }
 
     return html`
-      <hass-tabs-subpage
+      <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
         .backPath=${this._searchParms.has("historyBack")
           ? undefined
           : "/config"}
-        .route=${this.route}
+        .header=${this.hass.localize("ui.panel.config.energy.caption")}
-        .tabs=${configSections.experiences}
       >
         <ha-alert>
           ${this.hass.localize("ui.panel.config.energy.new_device_info")}
@@ -113,7 +112,7 @@ class HaConfigEnergy extends LitElement {
             @value-changed=${this._prefsChanged}
           ></ha-energy-device-settings>
         </div>
-      </hass-tabs-subpage>
+      </hass-subpage>
     `;
   }
 

src/panels/config/entities/ha-config-entities.ts

@@ -478,7 +478,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           ? undefined
           : "/config"}
         .route=${this.route}
-        .tabs=${configSections.integrations}
+        .tabs=${configSections.devices}
         .columns=${this._columns(
           this.narrow,
           this.hass.language,

src/panels/config/ha-config-section.ts

@@ -8,11 +8,15 @@ export class HaConfigSection extends LitElement {
 
   @property({ type: Boolean }) public vertical = false;
 
+  @property({ type: Boolean, attribute: "full-width" })
+  public fullWidth = false;
+
   protected render() {
     return html`
       <div
         class="content ${classMap({
           narrow: !this.isWide,
+          "full-width": this.fullWidth,
         })}"
       >
         <div class="header"><slot name="header"></slot></div>
@@ -111,6 +115,14 @@ export class HaConfigSection extends LitElement {
         margin-right: 0;
         max-width: 500px;
       }
+
+      .full-width {
+        padding: 0;
+      }
+
+      .full-width .layout {
+        flex-direction: column;
+      }
     `;
   }
 }

src/panels/config/ha-panel-config.ts

@@ -1,6 +1,7 @@
 import {
   mdiAccount,
   mdiBadgeAccountHorizontal,
+  mdiCog,
   mdiDevices,
   mdiHomeAssistant,
   mdiInformation,
@@ -27,6 +28,10 @@ import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { listenMediaQuery } from "../../common/dom/media_query";
 import { CloudStatus, fetchCloudStatus } from "../../data/cloud";
+import {
+  fetchSupervisorAvailableUpdates,
+  SupervisorAvailableUpdates,
+} from "../../data/supervisor/supervisor";
 import "../../layouts/hass-loading-screen";
 import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page";
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
@@ -40,7 +45,82 @@ declare global {
 }
 
 export const configSections: { [name: string]: PageNavigation[] } = {
-  integrations: [
+  dashboard: [
+    {
+      path: "/config/integrations",
+      name: "Devices & Services",
+      description: "Integrations, devices, entities and areas",
+      iconPath: mdiDevices,
+      iconColor: "#2D338F",
+      core: true,
+    },
+    {
+      path: "/config/automation",
+      name: "Automations",
+      description: "Automations, bludprints, scenes and scripts",
+      iconPath: mdiRobot,
+      iconColor: "#518C43",
+      components: ["automation", "blueprint", "scene", "script"],
+    },
+    {
+      path: "/config/helpers",
+      name: "Helpers",
+      description: "Elements that help build automations",
+      iconPath: mdiTools,
+      iconColor: "#4D2EA4",
+      core: true,
+    },
+    {
+      path: "/hassio",
+      name: "Add-ons & Backups",
+      description: "Create backups, check logs or reboot your system",
+      iconPath: mdiHomeAssistant,
+      iconColor: "#4084CD",
+      component: "hassio",
+    },
+    {
+      path: "/config/lovelace/dashboards",
+      name: "Dashboards",
+      description: "Create customized sets of cards to control your home",
+      iconPath: mdiViewDashboard,
+      iconColor: "#B1345C",
+      component: "lovelace",
+    },
+    {
+      path: "/config/energy",
+      name: "Energy",
+      description: "Monitor your energy production and consumption",
+      iconPath: mdiLightningBolt,
+      iconColor: "#F1C447",
+      component: "energy",
+    },
+    {
+      path: "/config/tags",
+      name: "Tags",
+      description:
+        "Trigger automations when a NFC tag, QR code, etc. is scanned",
+      iconPath: mdiNfcVariant,
+      iconColor: "#616161",
+      component: "tag",
+    },
+    {
+      path: "/config/person",
+      name: "People & Zones",
+      description: "Manage the people and zones that Home Assistant tracks",
+      iconPath: mdiAccount,
+      iconColor: "#E48629",
+      components: ["person", "zone", "users"],
+    },
+    {
+      path: "/config/core",
+      name: "Settings",
+      description: "Basic settings, server controls, logs and info",
+      iconPath: mdiCog,
+      iconColor: "#4A5963",
+      core: true,
+    },
+  ],
+  devices: [
     {
       component: "integrations",
       path: "/config/integrations",
@@ -74,7 +154,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       core: true,
     },
   ],
-  automation: [
+  automations: [
     {
       component: "blueprint",
       path: "/config/blueprint",
@@ -114,7 +194,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       core: true,
     },
   ],
-  experiences: [
+  tags: [
     {
       component: "tag",
       path: "/config/tags",
@@ -122,6 +202,8 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconPath: mdiNfcVariant,
       iconColor: "#616161",
     },
+  ],
+  energy: [
     {
       component: "energy",
       path: "/config/energy",
@@ -335,6 +417,8 @@ class HaPanelConfig extends HassRouterPage {
 
   @state() private _cloudStatus?: CloudStatus;
 
+  @state() private _supervisorUpdates?: SupervisorAvailableUpdates[] | null;
+
   private _listeners: Array<() => void> = [];
 
   public connectedCallback() {
@@ -364,6 +448,11 @@ class HaPanelConfig extends HassRouterPage {
     if (isComponentLoaded(this.hass, "cloud")) {
       this._updateCloudStatus();
     }
+    if (isComponentLoaded(this.hass, "hassio")) {
+      this._loadSupervisorUpdates();
+    } else {
+      this._supervisorUpdates = null;
+    }
     this.addEventListener("ha-refresh-cloud-status", () =>
       this._updateCloudStatus()
     );
@@ -394,6 +483,7 @@ class HaPanelConfig extends HassRouterPage {
         isWide,
         narrow: this.narrow,
         cloudStatus: this._cloudStatus,
+        supervisorUpdates: this._supervisorUpdates,
       });
     } else {
       el.route = this.routeTail;
@@ -402,6 +492,7 @@ class HaPanelConfig extends HassRouterPage {
       el.isWide = isWide;
       el.narrow = this.narrow;
       el.cloudStatus = this._cloudStatus;
+      el.supervisorUpdates = this._supervisorUpdates;
     }
   }
 
@@ -419,6 +510,16 @@ class HaPanelConfig extends HassRouterPage {
       setTimeout(() => this._updateCloudStatus(), 5000);
     }
   }
+
+  private async _loadSupervisorUpdates(): Promise<void> {
+    try {
+      this._supervisorUpdates = await fetchSupervisorAvailableUpdates(
+        this.hass
+      );
+    } catch (err) {
+      this._supervisorUpdates = null;
+    }
+  }
 }
 
 declare global {

src/panels/config/integrations/ha-config-integrations.ts

@@ -319,7 +319,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
         .narrow=${this.narrow}
         back-path="/config"
         .route=${this.route}
-        .tabs=${configSections.integrations}
+        .tabs=${configSections.devices}
       >
         ${this.narrow
           ? html`

src/panels/config/scene/ha-scene-dashboard.ts

@@ -147,7 +147,7 @@ class HaSceneDashboard extends LitElement {
         .narrow=${this.narrow}
         back-path="/config"
         .route=${this.route}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
         .columns=${this._columns(this.hass.language)}
         id="entity_id"
         .data=${this._scenes(this.scenes, this._filteredScenes)}

src/panels/config/scene/ha-scene-editor.ts

@@ -202,7 +202,7 @@ export class HaSceneEditor extends SubscribeMixin(
         .narrow=${this.narrow}
         .route=${this.route}
         .backCallback=${this._backTapped}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
       >
         <ha-button-menu
           corner="BOTTOM_START"

src/panels/config/script/ha-script-editor.ts

@@ -90,7 +90,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
         .narrow=${this.narrow}
         .route=${this.route}
         .backCallback=${this._backTapped}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
       >
         <ha-button-menu
           corner="BOTTOM_START"

src/panels/config/script/ha-script-picker.ts

@@ -174,7 +174,7 @@ class HaScriptPicker extends LitElement {
         .narrow=${this.narrow}
         back-path="/config"
         .route=${this.route}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
         .columns=${this._columns(this.narrow, this.hass.locale)}
         .data=${this._scripts(this.scripts, this._filteredScripts)}
         .activeFilters=${this._activeFilters}

src/panels/config/script/ha-script-trace.ts

@@ -108,7 +108,7 @@ export class HaScriptTrace extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
       >
         ${this.narrow
           ? html`<span slot="header"> ${title} </span>

src/panels/config/tags/ha-config-tags.ts

@@ -180,7 +180,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         .narrow=${this.narrow}
         back-path="/config"
         .route=${this.route}
-        .tabs=${configSections.experiences}
+        .tabs=${configSections.tags}
         .columns=${this._columns(
           this.narrow,
           this._canWriteTags,

src/translations/en.json

@@ -915,7 +915,6 @@
       },
       "config": {
         "header": "Configure Home Assistant",
-        "introduction": "In this view it is possible to configure your components and Home Assistant. Not everything is possible to configure from the UI yet, but we're working on it.",
         "advanced_mode": {
           "hint_enable": "Missing config options? Enable advanced mode on",
           "link_profile_page": "your profile page"
@@ -927,9 +926,11 @@
           "learn_more": "Learn more"
         },
         "updates": {
+          "title": "{count} {count, plural,\n  one {update}\n  other {updates}\n}",
           "unable_to_fetch": "Unable to fetch available updates",
           "version_available": "Version {version_available} is available",
-          "review": "review"
+          "show_all_updates": "Show all updates",
+          "show": "show"
         },
         "areas": {
           "caption": "Areas",
@@ -4165,7 +4166,7 @@
       "save": "[%key:ui::common::save%]",
       "close": "[%key:ui::common::close%]",
       "menu": "[%key:ui::common::menu%]",
-      "review": "[%key:ui::panel::config::updates::review%]",
+      "show": "[%key:ui::panel::config::updates::show%]",
       "show_more": "Show more information about this",
       "update_available": "{count, plural,\n  one {Update}\n  other {{count} updates}\n} pending",
       "update": "Update",