Restructure/reorder configuration dashboard

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

@@ -0,0 +1,167 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  CSSResultArray,
+  css,
+  customElement,
+  property,
+} from "lit-element";
+import "@polymer/app-layout/app-header-layout/app-header-layout";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+
+import "../../../components/ha-menu-button";
+
+import { haStyle } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+import { CloudStatusLoggedIn } from "../../../data/cloud";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+
+import "../../../components/ha-card";
+
+import "../ha-config-section";
+import "./ha-config-navigation";
+
+@customElement("ha-config-dashboard")
+class HaConfigDashboard extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public narrow!: boolean;
+  @property() public isWide!: boolean;
+  @property() public cloudStatus!: CloudStatusLoggedIn;
+  @property() public showAdvanced!: boolean;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <app-header-layout has-scrolling-region>
+        <app-header fixed slot="header">
+          <app-toolbar>
+            <ha-menu-button
+              .hass=${this.hass}
+              .narrow=${this.narrow}
+            ></ha-menu-button>
+            <div main-title>${this.hass.localize("panel.config")}</div>
+          </app-toolbar>
+        </app-header>
+
+        <div class="content">
+          <ha-config-section .is-wide=${!this.narrow}>
+            <div slot="header">
+              ${this.hass.localize("ui.panel.config.header")}
+            </div>
+            <div slot="introduction">
+              ${this.hass.localize("ui.panel.config.introduction")}
+            </div>
+
+            ${isComponentLoaded(this.hass, "cloud")
+              ? html`
+          <ha-card>
+            <a href='/config/cloud' tabindex="-1">
+              <paper-item>
+                <paper-item-body two-line="">
+                ${this.hass.localize("ui.panel.config.cloud.caption")}
+                  ${
+                    this.cloudStatus.logged_in
+                      ? html`
+                          <div secondary="">
+                            ${this.hass.localize(
+                              "ui.panel.config.cloud.description_login",
+                              "email",
+                              this.cloudStatus.email
+                            )}
+                          </div>
+                        `
+                      : html`
+                          <div secondary="">
+                            ${this.hass.localize(
+                              "ui.panel.config.cloud.description_features"
+                            )}
+                          </div>
+                        `
+                  }
+                </paper-item-body>
+                <ha-icon-next></ha-icon-next>
+              </paper-item>
+            </ha-card>
+          </a>
+        `
+              : ""}
+
+            <ha-config-navigation
+              .hass=${this.hass}
+              .show-advanced=${this.showAdvanced}
+              .pages=${[
+                { page: "integrations", postpath: "/dashboard", core: true },
+                { page: "devices", postpath: "/dashboard", core: true },
+                { page: "script" },
+                { page: "scene" },
+              ]}
+            ></ha-config-navigation>
+
+            <ha-config-navigation
+              .hass=${this.hass}
+              .show-advanced=${this.showAdvanced}
+              .pages=${[
+                { page: "core", core: true },
+                { page: "server_control", core: true },
+                { page: "entity_registry", core: true },
+                { page: "area_registry", core: true },
+                { page: "person" },
+                { page: "users", core: true },
+                { page: "zha" },
+                { page: "zwave" },
+                { page: "customize", core: true, advanced: true },
+              ]}
+            ></ha-config-navigation>
+
+            ${!this.showAdvanced
+              ? html`
+                  <div class="promo-advanced">
+                    ${this.hass.localize(
+                      "ui.panel.profile.advanced_mode.hint_enable"
+                    )}
+                    <a href="/profile"
+                      >${this.hass.localize(
+                        "ui.panel.profile.advanced_mode.link_profile_page"
+                      )}</a
+                    >.
+                  </div>
+                `
+              : ""}
+          </ha-config-section>
+        </div>
+      </app-header-layout>
+    `;
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      haStyle,
+      css`
+        ha-card {
+          overflow: hidden;
+        }
+        .content {
+          padding-bottom: 32px;
+        }
+        ha-card a {
+          text-decoration: none;
+          color: var(--primary-text-color);
+        }
+        .promo-advanced {
+          text-align: center;
+          color: var(--secondary-text-color);
+        }
+        .promo-advanced a {
+          color: var(--secondary-text-color);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-dashboard": HaConfigDashboard;
+  }
+}

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

@@ -16,34 +16,20 @@ import {
   css,
 } from "lit-element";
 import { HomeAssistant } from "../../../types";
-
-const PAGES: Array<{
-  page: string;
-  core?: boolean;
-  advanced?: boolean;
-}> = [
-  { page: "core", core: true },
-  { page: "server_control", core: true },
-  { page: "person" },
-  { page: "entity_registry", core: true },
-  { page: "area_registry", core: true },
-  { page: "automation" },
-  { page: "script" },
-  { page: "scene" },
-  { page: "zha" },
-  { page: "zwave" },
-  { page: "customize", core: true, advanced: true },
-];
-
 @customElement("ha-config-navigation")
 class HaConfigNavigation extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public showAdvanced!: boolean;
+  @property() public pages!: Array<{
+    page: string;
+    core?: boolean;
+    advanced?: boolean;
+  }>;
 
   protected render(): TemplateResult | void {
     return html`
       <ha-card>
-        ${PAGES.map(({ page, core, advanced }) =>
+        ${this.pages.map(({ page, core, advanced }) =>
           (core || isComponentLoaded(this.hass, page)) &&
           (!advanced || this.showAdvanced)
             ? html`