💄 move advanced mode toggle

src/panels/profile/ha-advanced-mode-row.ts

@@ -0,0 +1,67 @@
+import {
+  LitElement,
+  property,
+  TemplateResult,
+  html,
+  customElement,
+  CSSResult,
+  css,
+} from "lit-element";
+
+import "../../components/ha-card";
+
+import { HomeAssistant } from "../../types";
+import {
+  CoreFrontendUserData,
+  getOptimisticFrontendUserDataCollection,
+} from "../../data/frontend";
+
+@customElement("ha-advanced-mode-row")
+class AdvancedModeRow extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public narrow!: boolean;
+  @property() public coreUserData?: CoreFrontendUserData;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <ha-settings-row .narrow=${this.narrow}>
+        <span slot="heading">
+          ${this.hass.localize("ui.panel.profile.advanced_mode.title")}
+        </span>
+        <span slot="description">
+          ${this.hass.localize("ui.panel.profile.advanced_mode.description")}
+          <a
+            href="https://www.home-assistant.io/blog/2019/07/17/release-96/#advanced-mode"
+            target="_blank"
+            >${this.hass.localize("ui.panel.profile.advanced_mode.link_promo")}
+          </a>
+        </span>
+        <ha-switch
+          .checked=${this.coreUserData && this.coreUserData.showAdvanced}
+          .disabled=${this.coreUserData === undefined}
+          @change=${this._advancedToggled}
+        ></ha-switch>
+      </ha-settings-row>
+    `;
+  }
+
+  private async _advancedToggled(ev) {
+    getOptimisticFrontendUserDataCollection(this.hass.connection, "core").save({
+      showAdvanced: ev.currentTarget.checked,
+    });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      a {
+        color: var(--primary-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-advanced-mode-row": AdvancedModeRow;
+  }
+}

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

@@ -1,38 +1,36 @@
+import {
+  LitElement,
+  TemplateResult,
+  html,
+  CSSResultArray,
+  css,
+  property,
+} from "lit-element";
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
 import "@material/mwc-button";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 
-import "../../components/ha-card";
-import "../../components/ha-menu-button";
-import "../../resources/ha-style";
-
-import {
-  getOptimisticFrontendUserDataCollection,
-  CoreFrontendUserData,
-} from "../../data/frontend";
-
 import "./ha-change-password-card";
 import "./ha-mfa-modules-card";
-import "./ha-advanced-mode-card";
 import "./ha-refresh-tokens-card";
 import "./ha-long-lived-access-tokens-card";
-
+import "./ha-advanced-mode-row";
 import "./ha-pick-language-row";
 import "./ha-pick-theme-row";
 import "./ha-push-notifications-row";
 import "./ha-force-narrow-row";
 import "./ha-set-vibrate-row";
+import "../../components/ha-card";
+import "../../components/ha-menu-button";
+import "../../resources/ha-style";
+
 import {
-  LitElement,
-  TemplateResult,
-  html,
-  CSSResultArray,
-  css,
-  property,
-} from "lit-element";
+  getOptimisticFrontendUserDataCollection,
+  CoreFrontendUserData,
+} from "../../data/frontend";
 import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -119,6 +117,15 @@ class HaPanelProfile extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-push-notifications-row>
+            ${this.hass.user!.is_admin
+              ? html`
+                  <ha-advanced-mode-row
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                    .coreUserData=${this._coreUserData}
+                  ></ha-advanced-mode-row>
+                `
+              : ""}
 
             <div class="card-actions">
               <mwc-button class="warning" @click=${this._handleLogOut}>
@@ -142,15 +149,6 @@ class HaPanelProfile extends LitElement {
             .mfaModules=${this.hass.user!.mfa_modules}
           ></ha-mfa-modules-card>
 
-          ${this.hass.user!.is_admin
-            ? html`
-                <ha-advanced-mode-card
-                  .hass=${this.hass}
-                  .coreUserData=${this._coreUserData}
-                ></ha-advanced-mode-card>
-              `
-            : ""}
-
           <ha-refresh-tokens-card
             .hass=${this.hass}
             .refreshTokens=${this._refreshTokens}

src/translations/en.json

@@ -1942,9 +1942,10 @@
         },
         "advanced_mode": {
           "title": "Advanced Mode",
-          "description": "Home Assistant hides advanced features and options by default. You can make these features accessible by checking this toggle. This is a user-specific setting and does not impact other users using Home Assistant.",
+          "description": "Unlocks advanced features.",
           "hint_enable": "Missing config options? Enable advanced mode on",
-          "link_profile_page": "your profile page"
+          "link_profile_page": "your profile page",
+          "link_promo": "Learn more"
         },
         "refresh_tokens": {
           "header": "Refresh Tokens",