Finish up config changes (#10710)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
2021-11-26 17:24:30 +01:00 · 2021-11-26 17:24:30 +01:00 · 43011179eb
parent 6177d2b416
commit 43011179eb
31 changed files with 346 additions and 183 deletions
--- a/hassio/src/dashboard/hassio-update.ts
+++ b/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>
--- a/hassio/src/system/hassio-core-info.ts
+++ b/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>
--- a/hassio/src/system/hassio-host-info.ts
+++ b/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>
--- a/hassio/src/system/hassio-supervisor-info.ts
+++ b/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>
--- a/hassio/src/update-available/update-available-card.ts
+++ b/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}`,
-          addons: [this._updateType!],
+          name: `addon_${this.addonSlug}_${this._version}`,
+          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") {
--- a/src/common/config/can_show_page.ts
+++ b/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;
--- a/src/layouts/hass-subpage.ts
+++ b/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,
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/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;
--- a/src/panels/config/areas/ha-config-area-page.ts
+++ b/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
--- a/src/panels/config/areas/ha-config-areas-dashboard.ts
+++ b/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
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/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"
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/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)}
--- a/src/panels/config/automation/ha-automation-trace.ts
+++ b/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>
--- a/src/panels/config/blueprint/ha-blueprint-overview.ts
+++ b/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"
--- a/src/panels/config/cloud/login/cloud-login.ts
+++ b/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>
--- a/src/panels/config/dashboard/ha-config-dashboard.ts
+++ b/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;
-        }
-        :host([narrow]) ha-config-section {
-          margin-top: -20px;
+          margin: auto;
+          margin-top: -32px;
+          max-width: 600px;
        }
        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 {
-          margin-bottom: 24px;
+        :host([narrow]) ha-card {
+          background-color: var(--primary-background-color);
+          box-shadow: unset;
+        }
+
+        :host([narrow]) ha-config-section {
+          margin-top: -42px;
        }
      `,
    ];
--- a/src/panels/config/dashboard/ha-config-updates.ts
+++ b/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 {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
+import { css, CSSResultGroup, html, LitElement, 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 {
-  fetchSupervisorAvailableUpdates,
-  SupervisorAvailableUpdates,
-} from "../../../data/supervisor/supervisor";
+import { SupervisorAvailableUpdates } from "../../../data/supervisor/supervisor";
+import { buttonLinkStyle } from "../../../resources/styles";
 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 {
-    super.firstUpdated(changedProps);
-    this._loadSupervisorUpdates();
-  }
+  @state() private _showAll = false;

  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
-        ? html`<ha-alert
-            .title=${this.hass.localize(
-              "ui.panel.config.updates.unable_to_fetch"
-            )}
-            alert-type="error"
-          >
-            ${this._error}
-          </ha-alert>`
-        : ""}
-      ${this._supervisorUpdates?.map(
+      <div class="title">
+        ${this.hass.localize("ui.panel.config.updates.title", {
+          count: this.supervisorUpdates.length,
+        })}
+      </div>
+      ${updates.map(
        (update) => html`
-          <ha-alert
-            .title=${update.update_type === "addon"
-              ? update.name
-              : SUPERVISOR_UPDATE_NAMES[update.update_type!]}
-          >
-            <span slot="icon" class="icon">
+          <paper-icon-item>
+            <span slot="item-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", {
-              version_available: update.version_latest,
-            })}
-            <a href="/hassio${update.panel_path}" slot="action">
+            <paper-item-body two-line>
+              ${update.update_type === "addon"
+                ? update.name
+                : 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> {
-    try {
-      this._supervisorUpdates = await fetchSupervisorAvailableUpdates(
-        this.hass
-      );
-    } catch (err) {
-      this._error = extractApiErrorMessage(err);
-    }
+  private _showAllClicked() {
+    this._showAll = true;
  }

-  static get styles(): CSSResultGroup {
-    return css`
-      a {
-        text-decoration: none;
-        color: var(--primary-text-color);
-      }
-      .icon {
-        display: inline-flex;
-        height: 100%;
-        align-items: center;
-      }
-      img,
-      ha-svg-icon,
-      ha-logo-svg {
-        --mdc-icon-size: 32px;
-        max-height: 32px;
-        width: 32px;
-      }
-      ha-logo-svg {
-        color: var(--secondary-text-color);
-      }
-    `;
+  static get styles(): CSSResultGroup[] {
+    return [
+      buttonLinkStyle,
+      css`
+        .title {
+          font-size: 16px;
+          padding: 16px;
+          padding-bottom: 0;
+        }
+        a {
+          text-decoration: none;
+          color: var(--primary-text-color);
+        }
+        .icon {
+          display: inline-flex;
+          height: 100%;
+          align-items: center;
+        }
+        img,
+        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);
+        }
+      `,
+    ];
  }
 }

--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/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}
      >
        ${
--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/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}
--- a/src/panels/config/energy/ha-config-energy.ts
+++ b/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}
-        .tabs=${configSections.experiences}
+        .header=${this.hass.localize("ui.panel.config.energy.caption")}
      >
        <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>
    `;
  }

--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/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,
--- a/src/panels/config/ha-config-section.ts
+++ b/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;
+      }
    `;
  }
 }
--- a/src/panels/config/ha-panel-config.ts
+++ b/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 {
--- a/src/panels/config/integrations/ha-config-integrations.ts
+++ b/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`
--- a/src/panels/config/scene/ha-scene-dashboard.ts
+++ b/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)}
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/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"
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/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"
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/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}
--- a/src/panels/config/script/ha-script-trace.ts
+++ b/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>
--- a/src/panels/config/tags/ha-config-tags.ts
+++ b/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,
--- a/src/translations/en.json
+++ b/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",