Merge pull request #3311 from home-assistant/dev

20190627.0

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20190626.0",
+    version="20190627.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/cards/ha-media_player-card.js

@@ -188,6 +188,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
       <div class="controls layout horizontal justified">
         <paper-icon-button
+          aria-label="Turn off"
           icon="hass:power"
           on-click="handleTogglePower"
           invisible$="[[computeHidePowerButton(playerObj)]]"
@@ -196,12 +197,14 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
         <div class="playback-controls">
           <paper-icon-button
+            aria-label="Previous track"
             icon="hass:skip-previous"
             invisible$="[[!playerObj.supportsPreviousTrack]]"
             disabled="[[playerObj.isOff]]"
             on-click="handlePrevious"
           ></paper-icon-button>
           <paper-icon-button
+            aria-label="Play or Pause"
             class="primary"
             icon="[[computePlaybackControlIcon(playerObj)]]"
             invisible$="[[!computePlaybackControlIcon(playerObj)]]"
@@ -209,6 +212,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
             on-click="handlePlaybackControl"
           ></paper-icon-button>
           <paper-icon-button
+            aria-label="Next track"
             icon="hass:skip-next"
             invisible$="[[!playerObj.supportsNextTrack]]"
             disabled="[[playerObj.isOff]]"
@@ -217,6 +221,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         </div>
 
         <paper-icon-button
+          aria-label="More information."
           icon="hass:dots-vertical"
           on-click="handleOpenMoreInfo"
           class="self-center secondary"

src/common/entity/domain_icon.ts

@@ -7,6 +7,7 @@ import { DEFAULT_DOMAIN_ICON } from "../const";
 
 const fixedIcons = {
   alert: "hass:alert",
+  alexa: "hass:amazon-alexa",
   automation: "hass:playlist-play",
   calendar: "hass:calendar",
   camera: "hass:video",
@@ -15,6 +16,7 @@ const fixedIcons = {
   conversation: "hass:text-to-speech",
   device_tracker: "hass:account",
   fan: "hass:fan",
+  google_assistant: "hass:google-assistant",
   group: "hass:google-circles-communities",
   history_graph: "hass:chart-line",
   homeassistant: "hass:home-assistant",

src/components/entity/ha-entity-toggle.ts

@@ -15,6 +15,7 @@ import {
 import { HomeAssistant } from "../../types";
 import { HassEntity } from "home-assistant-js-websocket";
 import { forwardHaptic } from "../../data/haptics";
+import computeStateName from "../../common/entity/compute_state_name";
 
 const isOn = (stateObj?: HassEntity) =>
   stateObj !== undefined && !STATES_OFF.includes(stateObj.state);
@@ -35,11 +36,13 @@ class HaEntityToggle extends LitElement {
     if (this.stateObj.attributes.assumed_state) {
       return html`
         <paper-icon-button
+          aria-label=${`Turn ${computeStateName(this.stateObj)} off`}
           icon="hass:flash-off"
           @click=${this._turnOff}
           ?state-active=${!this._isOn}
         ></paper-icon-button>
         <paper-icon-button
+          aria-label=${`Turn ${computeStateName(this.stateObj)} on`}
           icon="hass:flash"
           @click=${this._turnOn}
           ?state-active=${this._isOn}
@@ -49,6 +52,9 @@ class HaEntityToggle extends LitElement {
 
     return html`
       <paper-toggle-button
+        aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
+          this._isOn ? "off" : "on"
+        }`}
         .checked=${this._isOn}
         @change=${this._toggleChanged}
       ></paper-toggle-button>

src/components/ha-camera-stream.ts

@@ -55,7 +55,9 @@ class HaCameraStream extends LitElement {
               .src=${__DEMO__
                 ? `/api/camera_proxy_stream/${this.stateObj.entity_id}`
                 : computeMJPEGStreamUrl(this.stateObj)}
-              .alt=${computeStateName(this.stateObj)}
+              .alt=${`Preview of the ${computeStateName(
+                this.stateObj
+              )} camera.`}
             />
           `
         : html`

src/components/ha-sidebar.ts

@@ -66,11 +66,29 @@ const computePanels = (hass: HomeAssistant) => {
   return result;
 };
 
+const renderPanel = (hass, panel) => html`
+  <a
+    aria-role="option"
+    href="${computeUrl(panel.url_path)}"
+    data-panel="${panel.url_path}"
+    tabindex="-1"
+  >
+    <paper-icon-item>
+      <ha-icon slot="item-icon" .icon="${panel.icon}"></ha-icon>
+      <span class="item-text">
+        ${hass.localize(`panel.${panel.title}`) || panel.title}
+      </span>
+    </paper-icon-item>
+  </a>
+`;
+
 /*
  * @appliesMixin LocalizeMixin
  */
 class HaSidebar extends LitElement {
   @property() public hass?: HomeAssistant;
+  @property({ type: Boolean }) public alwaysExpand = false;
+  @property({ type: Boolean, reflect: true }) public expanded = false;
   @property() public _defaultPage?: string =
     localStorage.defaultPage || DEFAULT_PANEL;
   @property() private _externalConfig?: ExternalConfig;
@@ -82,20 +100,33 @@ class HaSidebar extends LitElement {
       return html``;
     }
 
+    const panels = computePanels(hass);
+    const configPanelIdx = panels.findIndex(
+      (panel) => panel.component_name === "config"
+    );
+    const configPanel =
+      configPanelIdx === -1 ? undefined : panels.splice(configPanelIdx, 1)[0];
+
     return html`
+      ${this.expanded
+        ? html`
             <app-toolbar>
               <div main-title>Home Assistant</div>
-        ${hass.user
-          ? html`
-              <a href="/profile">
-                <ha-user-badge .user=${hass.user}></ha-user-badge>
-              </a>
-            `
-          : ""}
             </app-toolbar>
+          `
+        : html`
+            <div class="logo">
+              <img
+                id="logo"
+                src="/static/icons/favicon-192x192.png"
+                alt="Home Assistant logo"
+              />
+            </div>
+          `}
 
       <paper-listbox attr-for-selected="data-panel" .selected=${hass.panelUrl}>
         <a
+          aria-role="option"
           href="${computeUrl(this._defaultPage)}"
           data-panel=${this._defaultPage}
           tabindex="-1"
@@ -106,66 +137,19 @@ class HaSidebar extends LitElement {
           </paper-icon-item>
         </a>
 
-        ${computePanels(hass).map(
+        ${panels.map((panel) => renderPanel(hass, panel))}
-          (panel) => html`
-            <a
-              href="${computeUrl(panel.url_path)}"
-              data-panel="${panel.url_path}"
-              tabindex="-1"
-            >
-              <paper-icon-item>
-                <ha-icon slot="item-icon" .icon="${panel.icon}"></ha-icon>
-                <span class="item-text"
-                  >${hass.localize(`panel.${panel.title}`) || panel.title}</span
-                >
-              </paper-icon-item>
-            </a>
-          `
-        )}
-        ${this._externalConfig && this._externalConfig.hasSettingsScreen
-          ? html`
-              <a
-                aria-label="App Configuration"
-                href="#external-app-configuration"
-                tabindex="-1"
-                @click=${this._handleExternalAppConfiguration}
-              >
-                <paper-icon-item>
-                  <ha-icon
-                    slot="item-icon"
-                    icon="hass:cellphone-settings-variant"
-                  ></ha-icon>
-                  <span class="item-text"
-                    >${hass.localize(
-                      "ui.sidebar.external_app_configuration"
-                    )}</span
-                  >
-                </paper-icon-item>
-              </a>
-            `
-          : ""}
-        ${!hass.user
-          ? html`
-              <paper-icon-item @click=${this._handleLogOut} class="logout">
-                <ha-icon slot="item-icon" icon="hass:exit-to-app"></ha-icon>
-                <span class="item-text"
-                  >${hass.localize("ui.sidebar.log_out")}</span
-                >
-              </paper-icon-item>
-            `
-          : html``}
-      </paper-listbox>
 
-      ${hass.user && hass.user.is_admin
+        <div class="spacer" disabled></div>
-        ? html`
-            <div>
-              <div class="divider"></div>
 
-              <div class="subheader">
+        ${this.expanded && hass.user && hass.user.is_admin
+          ? html`
+              <div class="divider" disabled></div>
+
+              <div class="subheader" disabled>
                 ${hass.localize("ui.sidebar.developer_tools")}
               </div>
 
-              <div class="dev-tools">
+              <div class="dev-tools" disabled>
                 <a href="/dev-service" tabindex="-1">
                   <paper-icon-button
                     icon="hass:remote"
@@ -213,14 +197,76 @@ class HaSidebar extends LitElement {
                   ></paper-icon-button>
                 </a>
               </div>
-            </div>
+              <div class="divider" disabled></div>
             `
           : ""}
+        ${this._externalConfig && this._externalConfig.hasSettingsScreen
+          ? html`
+              <a
+                aria-role="option"
+                aria-label="App Configuration"
+                href="#external-app-configuration"
+                tabindex="-1"
+                @click=${this._handleExternalAppConfiguration}
+              >
+                <paper-icon-item>
+                  <ha-icon
+                    slot="item-icon"
+                    icon="hass:cellphone-settings-variant"
+                  ></ha-icon>
+                  <span class="item-text"
+                    >${hass.localize(
+                      "ui.sidebar.external_app_configuration"
+                    )}</span
+                  >
+                </paper-icon-item>
+              </a>
+            `
+          : ""}
+        ${configPanel ? renderPanel(hass, configPanel) : ""}
+        ${hass.user
+          ? html`
+              <a
+                href="/profile"
+                data-panel="panel"
+                tabindex="-1"
+                aria-role="option"
+                aria-label=${hass.localize("panel.profile")}
+              >
+                <paper-icon-item class="profile">
+                  <ha-user-badge
+                    slot="item-icon"
+                    .user=${hass.user}
+                  ></ha-user-badge>
+
+                  <span class="item-text">
+                    ${hass.user.name}
+                  </span>
+                </paper-icon-item>
+              </a>
+            `
+          : html`
+              <paper-icon-item
+                @click=${this._handleLogOut}
+                class="logout"
+                aria-role="option"
+              >
+                <ha-icon slot="item-icon" icon="hass:exit-to-app"></ha-icon>
+                <span class="item-text"
+                  >${hass.localize("ui.sidebar.log_out")}</span
+                >
+              </paper-icon-item>
+            `}
+      </paper-listbox>
     `;
   }
 
   protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.has("_externalConfig")) {
+    if (
+      changedProps.has("_externalConfig") ||
+      changedProps.has("expanded") ||
+      changedProps.has("alwaysExpand")
+    ) {
       return true;
     }
     if (!this.hass || !changedProps.has("hass")) {
@@ -247,6 +293,26 @@ class HaSidebar extends LitElement {
         this._externalConfig = conf;
       });
     }
+    this.shadowRoot!.querySelector("paper-listbox")!.addEventListener(
+      "mouseenter",
+      () => {
+        this.expanded = true;
+      }
+    );
+    this.addEventListener("mouseleave", () => {
+      this._contract();
+    });
+  }
+
+  protected updated(changedProps) {
+    super.updated(changedProps);
+    if (changedProps.has("alwaysExpand")) {
+      this.expanded = this.alwaysExpand;
+    }
+  }
+
+  private _contract() {
+    this.expanded = this.alwaysExpand || false;
   }
 
   private _handleLogOut() {
@@ -265,7 +331,7 @@ class HaSidebar extends LitElement {
       :host {
         height: 100%;
         display: block;
-        overflow: auto;
+        overflow: hidden auto;
         -ms-user-select: none;
         -webkit-user-select: none;
         -moz-user-select: none;
@@ -274,9 +340,27 @@ class HaSidebar extends LitElement {
           --sidebar-background-color,
           var(--primary-background-color)
         );
+        width: 64px;
+        transition: width 0.2s ease-in;
+        will-change: width;
+        contain: strict;
+      }
+      :host([expanded]) {
+        width: 256px;
+      }
+
+      .logo {
+        height: 65px;
+        box-sizing: border-box;
+        padding: 8px;
+        border-bottom: 1px solid transparent;
+      }
+      .logo img {
+        width: 48px;
       }
 
       app-toolbar {
+        white-space: nowrap;
         font-weight: 400;
         color: var(--primary-text-color);
         border-bottom: 1px solid var(--divider-color);
@@ -288,7 +372,11 @@ class HaSidebar extends LitElement {
       }
 
       paper-listbox {
-        padding: 0;
+        padding: 4px 0;
+        height: calc(100% - 65px);
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
       }
 
       paper-listbox > a {
@@ -299,10 +387,15 @@ class HaSidebar extends LitElement {
       }
 
       paper-icon-item {
-        margin: 8px;
+        box-sizing: border-box;
-        padding-left: 9px;
+        margin: 4px 8px;
+        padding-left: 12px;
         border-radius: 4px;
         --paper-item-min-height: 40px;
+        width: 48px;
+      }
+      :host([expanded]) paper-icon-item {
+        width: 240px;
       }
 
       ha-icon[slot="item-icon"] {
@@ -342,10 +435,29 @@ class HaSidebar extends LitElement {
         color: var(--sidebar-selected-text-color);
       }
 
+      a .item-text {
+        display: none;
+      }
+      :host([expanded]) a .item-text {
+        display: block;
+      }
+
       paper-icon-item.logout {
         margin-top: 16px;
       }
 
+      paper-icon-item.profile {
+        padding-left: 4px;
+      }
+      .profile .item-text {
+        margin-left: 8px;
+      }
+
+      .spacer {
+        flex: 1;
+        pointer-events: none;
+      }
+
       .divider {
         height: 1px;
         background-color: var(--divider-color);
@@ -357,6 +469,7 @@ class HaSidebar extends LitElement {
         font-weight: 500;
         font-size: 14px;
         padding: 16px;
+        white-space: nowrap;
       }
 
       .dev-tools {
@@ -364,6 +477,8 @@ class HaSidebar extends LitElement {
         flex-direction: row;
         justify-content: space-between;
         padding: 0 8px;
+        width: 256px;
+        box-sizing: border-box;
       }
 
       .dev-tools a {

src/components/ha-start-voice-button.js

@@ -14,6 +14,7 @@ class HaStartVoiceButton extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
       <paper-icon-button
+        aria-label="Start conversation"
         icon="hass:microphone"
         hidden$="[[!canListen]]"
         on-click="handleListenClick"

src/components/user/ha-user-badge.ts

@@ -7,7 +7,6 @@ import {
   property,
   customElement,
 } from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
 import { User } from "../../data/user";
 import { CurrentUser } from "../../types";
 
@@ -33,24 +32,23 @@ class StateBadge extends LitElement {
 
   protected render(): TemplateResult | void {
     const user = this.user;
-
     const initials = user ? computeInitials(user.name) : "?";
-
     return html`
-      <div
-        class="${classMap({
-          "profile-badge": true,
-          long: initials.length > 2,
-        })}"
-      >
       ${initials}
-      </div>
     `;
   }
 
+  protected updated(changedProps) {
+    super.updated(changedProps);
+    this.toggleAttribute(
+      "long",
+      (this.user ? computeInitials(this.user.name) : "?").length > 2
+    );
+  }
+
   static get styles(): CSSResult {
     return css`
-      .profile-badge {
+      :host {
         display: inline-block;
         box-sizing: border-box;
         width: 40px;
@@ -63,7 +61,7 @@ class StateBadge extends LitElement {
         overflow: hidden;
       }
 
-      .profile-badge.long {
+      :host([long]) {
         font-size: 80%;
       }
     `;

src/data/collection.ts

@@ -0,0 +1,74 @@
+import {
+  Collection,
+  Connection,
+  getCollection,
+  UnsubscribeFunc,
+} from "home-assistant-js-websocket";
+import { Store } from "home-assistant-js-websocket/dist/store";
+
+interface OptimisticCollection<T> extends Collection<T> {
+  save(data: T): Promise<unknown>;
+}
+
+/**
+ * Create an optimistic collection that includes a save function.
+ * When the collection is saved, the collection is optimistically updated.
+ * The update is reversed when the update failed.
+ */
+
+export const getOptimisticCollection = <StateType>(
+  saveCollection: (conn: Connection, data: StateType) => Promise<unknown>,
+  conn: Connection,
+  key: string,
+  fetchCollection: (conn: Connection) => Promise<StateType>,
+  subscribeUpdates?: (
+    conn: Connection,
+    store: Store<StateType>
+  ) => Promise<UnsubscribeFunc>
+): OptimisticCollection<StateType> => {
+  const updateKey = `${key}-optimistic`;
+
+  const collection = getCollection<StateType>(
+    conn,
+    key,
+    fetchCollection,
+    async (_conn, store) => {
+      // Subscribe to original updates
+      const subUpResult = subscribeUpdates
+        ? subscribeUpdates(conn, store)
+        : undefined;
+      // Store the store
+      conn[updateKey] = store;
+
+      // Unsub function to undo both
+      return () => {
+        if (subUpResult) {
+          subUpResult.then((unsub) => unsub());
+        }
+        conn[updateKey] = undefined;
+      };
+    }
+  );
+  return {
+    ...collection,
+    async save(data: StateType) {
+      const store: Store<StateType> | undefined = conn[updateKey];
+      let current;
+
+      // Can be undefined if currently no subscribers
+      if (store) {
+        current = store.state;
+        store.setState(data, true);
+      }
+
+      try {
+        return await saveCollection(conn, data);
+      } catch (err) {
+        if (store) {
+          store.setState(current as any, true);
+        }
+        throw err;
+      }
+    },
+  };
+};

src/data/frontend.ts

@@ -1,8 +1,14 @@
-import { HomeAssistant } from "../types";
+import { Connection } from "home-assistant-js-websocket";
+import { getOptimisticCollection } from "./collection";
+
+export interface CoreFrontendUserData {
+  showAdvanced?: boolean;
+}
 
 declare global {
-  // tslint:disable-next-line
+  interface FrontendUserData {
-  interface FrontendUserData {}
+    core: CoreFrontendUserData;
+  }
 }
 
 export type ValidUserDataKey = keyof FrontendUserData;
@@ -10,10 +16,10 @@ export type ValidUserDataKey = keyof FrontendUserData;
 export const fetchFrontendUserData = async <
   UserDataKey extends ValidUserDataKey
 >(
-  hass: HomeAssistant,
+  conn: Connection,
   key: UserDataKey
 ): Promise<FrontendUserData[UserDataKey] | null> => {
-  const result = await hass.callWS<{
+  const result = await conn.sendMessagePromise<{
     value: FrontendUserData[UserDataKey] | null;
   }>({
     type: "frontend/get_user_data",
@@ -25,12 +31,31 @@ export const fetchFrontendUserData = async <
 export const saveFrontendUserData = async <
   UserDataKey extends ValidUserDataKey
 >(
-  hass: HomeAssistant,
+  conn: Connection,
   key: UserDataKey,
   value: FrontendUserData[UserDataKey]
 ): Promise<void> =>
-  hass.callWS<void>({
+  conn.sendMessagePromise<void>({
     type: "frontend/set_user_data",
     key,
     value,
   });
+
+export const getOptimisticFrontendUserDataCollection = <
+  UserDataKey extends ValidUserDataKey
+>(
+  conn: Connection,
+  userDataKey: UserDataKey
+) =>
+  getOptimisticCollection(
+    (_conn, data) =>
+      saveFrontendUserData(
+        conn,
+        userDataKey,
+        // @ts-ignore
+        data
+      ),
+    conn,
+    `_frontendUserData-${userDataKey}`,
+    () => fetchFrontendUserData(conn, userDataKey)
+  );

src/data/translation.ts

@@ -12,12 +12,12 @@ declare global {
 }
 
 export const fetchTranslationPreferences = (hass: HomeAssistant) =>
-  fetchFrontendUserData(hass, "language");
+  fetchFrontendUserData(hass.connection, "language");
 
 export const saveTranslationPreferences = (
   hass: HomeAssistant,
   data: FrontendTranslationData
-) => saveFrontendUserData(hass, "language", data);
+) => saveFrontendUserData(hass.connection, "language", data);
 
 export const getHassTranslations = async (
   hass: HomeAssistant,

src/layouts/home-assistant-main.ts

@@ -18,6 +18,8 @@ import "./partial-panel-resolver";
 import { HomeAssistant, Route } from "../types";
 import { fireEvent } from "../common/dom/fire_event";
 import { PolymerChangedEvent } from "../polymer-types";
+// tslint:disable-next-line: no-duplicate-imports
+import { AppDrawerLayoutElement } from "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 
 const NON_SWIPABLE_PANELS = ["kiosk", "map"];
 
@@ -29,9 +31,9 @@ declare global {
 }
 
 class HomeAssistantMain extends LitElement {
-  @property() public hass?: HomeAssistant;
+  @property() public hass!: HomeAssistant;
   @property() public route?: Route;
-  @property() private _narrow?: boolean;
+  @property({ type: Boolean }) private narrow?: boolean;
 
   protected render(): TemplateResult | void {
     const hass = this.hass;
@@ -40,7 +42,8 @@ class HomeAssistantMain extends LitElement {
       return;
     }
 
-    const disableSwipe = NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1;
+    const disableSwipe =
+      !this.narrow || NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1;
 
     return html`
       <iron-media-query
@@ -50,7 +53,7 @@ class HomeAssistantMain extends LitElement {
 
       <app-drawer-layout
         fullbleed
-        .forceNarrow=${this._narrow || !hass.dockedSidebar}
+        .forceNarrow=${this.narrow}
         responsive-width="0"
       >
         <app-drawer
@@ -59,13 +62,16 @@ class HomeAssistantMain extends LitElement {
           slot="drawer"
           .disableSwipe=${disableSwipe}
           .swipeOpen=${!disableSwipe}
-          .persistent=${hass.dockedSidebar}
+          .persistent=${!this.narrow}
         >
-          <ha-sidebar .hass=${hass}></ha-sidebar>
+          <ha-sidebar
+            .hass=${hass}
+            .alwaysExpand=${this.narrow || hass.dockedSidebar}
+          ></ha-sidebar>
         </app-drawer>
 
         <partial-panel-resolver
-          .narrow=${this._narrow}
+          .narrow=${this.narrow}
           .hass=${hass}
           .route=${this.route}
         ></partial-panel-resolver>
@@ -77,19 +83,17 @@ class HomeAssistantMain extends LitElement {
     import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar");
 
     this.addEventListener("hass-toggle-menu", () => {
-      const shouldOpen = !this.drawer.opened;
+      if (this.narrow) {
-
+        if (this.drawer.opened) {
-      if (shouldOpen) {
-        if (this._narrow) {
-          this.drawer.open();
-        } else {
-          fireEvent(this, "hass-dock-sidebar", { dock: true });
-        }
-      } else {
           this.drawer.close();
-        if (this.hass!.dockedSidebar) {
+        } else {
-          fireEvent(this, "hass-dock-sidebar", { dock: false });
+          this.drawer.open();
         }
+      } else {
+        fireEvent(this, "hass-dock-sidebar", {
+          dock: !this.hass.dockedSidebar,
+        });
+        setTimeout(() => this.appLayout.resetLayout());
       }
     });
   }
@@ -97,7 +101,9 @@ class HomeAssistantMain extends LitElement {
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
 
-    if (changedProps.has("route") && this._narrow) {
+    this.toggleAttribute("expanded", this.narrow || this.hass.dockedSidebar);
+
+    if (changedProps.has("route") && this.narrow) {
       this.drawer.close();
     }
 
@@ -110,19 +116,27 @@ class HomeAssistantMain extends LitElement {
   }
 
   private _narrowChanged(ev: PolymerChangedEvent<boolean>) {
-    this._narrow = ev.detail.value;
+    this.narrow = ev.detail.value;
   }
 
   private get drawer(): AppDrawerElement {
     return this.shadowRoot!.querySelector("app-drawer")!;
   }
 
+  private get appLayout(): AppDrawerLayoutElement {
+    return this.shadowRoot!.querySelector("app-drawer-layout")!;
+  }
+
   static get styles(): CSSResult {
     return css`
       :host {
         color: var(--primary-text-color);
         /* remove the grey tap highlights in iOS on the fullscreen touch targets */
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        --app-drawer-width: 64px;
+      }
+      :host([expanded]) {
+        --app-drawer-width: 256px;
       }
       partial-panel-resolver,
       ha-sidebar {

src/panels/config/core/ha-config-core.js

@@ -37,6 +37,7 @@ class HaConfigCore extends LocalizeMixin(PolymerElement) {
         <div class$="[[computeClasses(isWide)]]">
           <ha-config-section-core
             is-wide="[[isWide]]"
+            show-advanced="[[showAdvanced]]"
             hass="[[hass]]"
           ></ha-config-section-core>
         </div>
@@ -48,6 +49,7 @@ class HaConfigCore extends LocalizeMixin(PolymerElement) {
     return {
       hass: Object,
       isWide: Boolean,
+      showAdvanced: Boolean,
     };
   }
 

src/panels/config/core/ha-config-section-core.js

@@ -63,6 +63,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
         <ha-config-name-form hass="[[hass]]"></ha-config-name-form>
         <ha-config-core-form hass="[[hass]]"></ha-config-core-form>
 
+        <template is="dom-if" if="[[showAdvanced]]">
           <ha-card
             header="[[localize('ui.panel.config.core.section.core.validation.heading')]]"
           >
@@ -135,7 +136,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
               </ha-call-service-button>
             </div>
           </ha-card>
-
+        </template>
         <ha-card
           header="[[localize('ui.panel.config.core.section.core.server_management.heading')]]"
         >
@@ -188,6 +189,8 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
         type: String,
         value: "",
       },
+
+      showAdvanced: Boolean,
     };
   }
 

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

@@ -31,10 +31,17 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
       .content {
         padding-bottom: 32px;
       }
-      a {
+      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);
+      }
     </style>
 
     <app-header-layout has-scrolling-region="">
@@ -99,7 +106,16 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
             </a>
           </ha-card>
 
-          <ha-config-navigation hass="[[hass]]"></ha-config-navigation>
+          <ha-config-navigation
+            hass="[[hass]]"
+            show-advanced="[[showAdvanced]]"
+          ></ha-config-navigation>
+
+          <template is='dom-if' if='[[!showAdvanced]]'>
+            <div class='promo-advanced'>
+              Missing config options? Enable advanced mode on <a href="/profile">your profile page.</a>
+            </div>
+          </template>
         </ha-config-section>
       </div>
     </app-header-layout>
@@ -111,6 +127,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
       hass: Object,
       isWide: Boolean,
       cloudStatus: Object,
+      showAdvanced: Boolean,
     };
   }
 

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

@@ -1,87 +0,0 @@
-import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-item/paper-item";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import NavigateMixin from "../../../mixins/navigate-mixin";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-import isComponentLoaded from "../../../common/config/is_component_loaded";
-
-import "../../../components/ha-card";
-import "../../../components/ha-icon-next";
-
-const CORE_PAGES = ["core", "customize", "entity_registry", "area_registry"];
-/*
- * @appliesMixin LocalizeMixin
- * @appliesMixin NavigateMixin
- */
-class HaConfigNavigation extends LocalizeMixin(NavigateMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style include="iron-flex">
-        ha-card {
-          overflow: hidden;
-        }
-        paper-item {
-          cursor: pointer;
-        }
-      </style>
-      <ha-card>
-        <template is="dom-repeat" items="[[pages]]">
-          <template is="dom-if" if="[[_computeLoaded(hass, item)]]">
-            <paper-item on-click="_navigate">
-              <paper-item-body two-line="">
-                [[_computeCaption(item, localize)]]
-                <div secondary="">[[_computeDescription(item, localize)]]</div>
-              </paper-item-body>
-              <ha-icon-next></ha-icon-next>
-            </paper-item>
-          </template>
-        </template>
-      </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
-
-      pages: {
-        type: Array,
-        value: [
-          "core",
-          "person",
-          "entity_registry",
-          "area_registry",
-          "automation",
-          "script",
-          "zha",
-          "zwave",
-          "customize",
-        ],
-      },
-    };
-  }
-
-  _computeLoaded(hass, page) {
-    return CORE_PAGES.includes(page) || isComponentLoaded(hass, page);
-  }
-
-  _computeCaption(page, localize) {
-    return localize(`ui.panel.config.${page}.caption`);
-  }
-
-  _computeDescription(page, localize) {
-    return localize(`ui.panel.config.${page}.description`);
-  }
-
-  _navigate(ev) {
-    this.navigate("/config/" + ev.model.item);
-  }
-}
-
-customElements.define("ha-config-navigation", HaConfigNavigation);

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

@@ -0,0 +1,82 @@
+import "@polymer/iron-icon/iron-icon";
+import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-item/paper-item";
+
+import isComponentLoaded from "../../../common/config/is_component_loaded";
+
+import "../../../components/ha-card";
+import "../../../components/ha-icon-next";
+import {
+  LitElement,
+  html,
+  TemplateResult,
+  property,
+  customElement,
+  CSSResult,
+  css,
+} from "lit-element";
+import { HomeAssistant } from "../../../types";
+
+const PAGES: Array<{
+  page: string;
+  core?: boolean;
+  advanced?: boolean;
+}> = [
+  { page: "core", core: true },
+  { page: "person" },
+  { page: "entity_registry", core: true },
+  { page: "area_registry", core: true },
+  { page: "automation" },
+  { page: "script" },
+  { 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;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <ha-card>
+        ${PAGES.map(({ page, core, advanced }) =>
+          (core || isComponentLoaded(this.hass, page)) &&
+          (!advanced || this.showAdvanced)
+            ? html`
+                <a href=${`/config/${page}`}>
+                  <paper-item>
+                    <paper-item-body two-line="">
+                      ${this.hass.localize(`ui.panel.config.${page}.caption`)}
+                      <div secondary>
+                        ${this.hass.localize(
+                          `ui.panel.config.${page}.description`
+                        )}
+                      </div>
+                    </paper-item-body>
+                    <ha-icon-next></ha-icon-next>
+                  </paper-item>
+                </a>
+              `
+            : ""
+        )}
+      </ha-card>
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      a {
+        text-decoration: none;
+        color: var(--primary-text-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-navigation": HaConfigNavigation;
+  }
+}

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

@@ -5,6 +5,10 @@ import { HomeAssistant } from "../../types";
 import { CloudStatus, fetchCloudStatus } from "../../data/cloud";
 import { listenMediaQuery } from "../../common/dom/media_query";
 import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page";
+import {
+  CoreFrontendUserData,
+  getOptimisticFrontendUserDataCollection,
+} from "../../data/frontend";
 
 declare global {
   // for fire event
@@ -17,8 +21,6 @@ declare global {
 class HaPanelConfig extends HassRouterPage {
   @property() public hass!: HomeAssistant;
   @property() public narrow!: boolean;
-  @property() public _wideSidebar: boolean = false;
-  @property() public _wide: boolean = false;
 
   protected routerOptions: RouterOptions = {
     defaultPage: "dashboard",
@@ -93,6 +95,9 @@ class HaPanelConfig extends HassRouterPage {
     },
   };
 
+  @property() private _wideSidebar: boolean = false;
+  @property() private _wide: boolean = false;
+  @property() private _coreUserData?: CoreFrontendUserData;
   @property() private _cloudStatus?: CloudStatus;
 
   private _listeners: Array<() => void> = [];
@@ -109,6 +114,14 @@ class HaPanelConfig extends HassRouterPage {
         this._wideSidebar = matches;
       })
     );
+    this._listeners.push(
+      getOptimisticFrontendUserDataCollection(
+        this.hass.connection,
+        "core"
+      ).subscribe((coreUserData) => {
+        this._coreUserData = coreUserData || {};
+      })
+    );
   }
 
   public disconnectedCallback() {
@@ -131,6 +144,7 @@ class HaPanelConfig extends HassRouterPage {
   protected updatePageEl(el) {
     el.route = this.routeTail;
     el.hass = this.hass;
+    el.showAdvanced = !!(this._coreUserData && this._coreUserData.showAdvanced);
     el.isWide = this.hass.dockedSidebar ? this._wideSidebar : this._wide;
     el.narrow = this.narrow;
     el.cloudStatus = this._cloudStatus;

src/panels/dev-info/ha-panel-dev-info.ts

@@ -64,9 +64,14 @@ class HaPanelDevInfo extends LitElement {
         <div class="content">
           <div class="about">
             <p class="version">
-              <a href="https://www.home-assistant.io" target="_blank"
+              <a href="https://www.home-assistant.io" target="_blank">
-                ><img src="/static/icons/favicon-192x192.png" height="192"/></a
+                <img
-              ><br />
+                  src="/static/icons/favicon-192x192.png"
+                  height="192"
+                  alt="Home Assistant logo"
+                />
+              </a>
+              <br />
               Home Assistant<br />
               ${hass.config.version}
             </p>

src/panels/lovelace/components/hui-entities-toggle.ts

@@ -41,6 +41,7 @@ class HuiEntitiesToggle extends LitElement {
 
     return html`
       <paper-toggle-button
+        aria-label="Toggle entities."
         ?checked="${this._toggleEntities!.some((entityId) => {
           const stateObj = this.hass!.states[entityId];
           return stateObj && stateObj.state === "on";

src/panels/lovelace/components/notifications/hui-notifications-button.ts

@@ -23,6 +23,7 @@ class HuiNotificationsButton extends LitElement {
   protected render(): TemplateResult | void {
     return html`
       <paper-icon-button
+        aria-label="Show Notifications"
         icon="hass:bell"
         @click="${this._clicked}"
       ></paper-icon-button>

src/panels/lovelace/hui-root.ts

@@ -144,6 +144,7 @@ class HUIRoot extends LitElement {
                     horizontal-offset="-5"
                   >
                     <paper-icon-button
+                      aria-label="Open Lovelace menu"
                       icon="hass:dots-vertical"
                       slot="dropdown-trigger"
                     ></paper-icon-button>

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

@@ -0,0 +1,65 @@
+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-card")
+class AdvancedModeCard extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public coreUserData?: CoreFrontendUserData;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <ha-card>
+        <div class="card-header">
+          <div class="title">Advanced mode</div>
+          <paper-toggle-button
+            .checked=${this.coreUserData && this.coreUserData.showAdvanced}
+            .disabled=${this.coreUserData === undefined}
+            @change=${this._advancedToggled}
+          ></paper-toggle-button>
+        </div>
+        <div class="card-content">
+          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.
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private async _advancedToggled(ev) {
+    getOptimisticFrontendUserDataCollection(this.hass.connection, "core").save({
+      showAdvanced: ev.currentTarget.checked,
+    });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .card-header {
+        display: flex;
+      }
+      .title {
+        flex: 1;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-advanced-mode-card": AdvancedModeCard;
+  }
+}

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

@@ -11,11 +11,14 @@ import "../../components/ha-card";
 import "../../components/ha-menu-button";
 import "../../resources/ha-style";
 
+import { getOptimisticFrontendUserDataCollection } from "../../data/frontend";
+
 import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
 
 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";
 
@@ -98,6 +101,11 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
             mfa-modules="[[hass.user.mfa_modules]]"
           ></ha-mfa-modules-card>
 
+          <ha-advanced-mode-card
+            hass="[[hass]]"
+            core-user-data="[[_coreUserData]]"
+          ></ha-mfa-modules-card>
+
           <ha-refresh-tokens-card
             hass="[[hass]]"
             refresh-tokens="[[_refreshTokens]]"
@@ -119,12 +127,27 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
       hass: Object,
       narrow: Boolean,
       _refreshTokens: Array,
+      _coreUserData: Object,
     };
   }
 
   connectedCallback() {
     super.connectedCallback();
     this._refreshRefreshTokens();
+    this._unsubCoreData = getOptimisticFrontendUserDataCollection(
+      this.hass.connection,
+      "core"
+    ).subscribe((coreUserData) => {
+      this._coreUserData = coreUserData;
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._unsubCoreData) {
+      this._unsubCoreData();
+      this._unsubCoreData = undefined;
+    }
   }
 
   async _refreshRefreshTokens() {

src/state/connection-mixin.ts

@@ -44,7 +44,7 @@ export const connectionMixin = (
         localize: () => "",
 
         translationMetadata,
-        dockedSidebar: false,
+        dockedSidebar: true,
         moreInfoEntityId: null,
         callService: async (domain, service, serviceData = {}) => {
           if (__DEV__) {

src/state/translations-mixin.ts

@@ -9,9 +9,11 @@ import { HassBaseEl } from "./hass-base-mixin";
 import { computeLocalize } from "../common/translations/localize";
 import { computeRTL } from "../common/util/compute_rtl";
 import { HomeAssistant } from "../types";
-import { saveFrontendUserData } from "../data/frontend";
 import { storeState } from "../util/ha-pref-storage";
-import { getHassTranslations } from "../data/translation";
+import {
+  getHassTranslations,
+  saveTranslationPreferences,
+} from "../data/translation";
 
 /*
  * superClass needs to contain `this.hass` and `this._updateHass`.
@@ -65,7 +67,7 @@ export default (superClass: Constructor<LitElement & HassBaseEl>) =>
       this._updateHass({ language, selectedLanguage: language });
       storeState(this.hass);
       if (saveToBackend) {
-        saveFrontendUserData(this.hass, "language", { language });
+        saveTranslationPreferences(this.hass, { language });
       }
 
       this._applyTranslations(this.hass);

src/util/hass-translation.ts

@@ -1,6 +1,6 @@
 import { translationMetadata } from "../resources/translations-metadata";
-import { fetchFrontendUserData } from "../data/frontend";
 import { HomeAssistant } from "../types";
+import { fetchTranslationPreferences } from "../data/translation";
 
 const STORAGE = window.localStorage || {};
 
@@ -43,7 +43,7 @@ function findAvailableLanguage(language: string) {
  * Get user selected language from backend
  */
 export async function getUserLanguage(hass: HomeAssistant) {
-  const result = await fetchFrontendUserData(hass, "language");
+  const result = await fetchTranslationPreferences(hass);
   const language = result ? result.language : null;
   if (language) {
     const availableLanguage = findAvailableLanguage(language);

translations/ca.json

@@ -338,7 +338,7 @@
                             "validation": {
                                 "heading": "Validació de la configuració",
                                 "introduction": "Valida la configuració si recentment has fet algun canvi a la configuració i vols assegurar-te de que no té problemes.",
-                                "check_config": "Comprovar la configuració",
+                                "check_config": "Comprova la configuració",
                                 "valid": "La configuració és vàlida!",
                                 "invalid": "La configuració és invàlida"
                             },
@@ -353,8 +353,8 @@
                             "server_management": {
                                 "heading": "Gestió del servidor",
                                 "introduction": "Controla el servidor de Home Assistant... des de Home Assistant.",
-                                "restart": "Reiniciar",
+                                "restart": "Reinicia",
-                                "stop": "Aturar"
+                                "stop": "Atura"
                             },
                             "core_config": {
                                 "edit_requires_storage": "L'editor està desactivat ja que la configuració es troba a configuration.yaml.",

translations/is.json

@@ -3,13 +3,14 @@
         "config": "Stillingar",
         "states": "Yfirlit",
         "map": "Kort",
-        "logbook": "Logbók",
+        "logbook": "Breytingarsaga",
         "history": "Saga",
         "mailbox": "Pósthólf",
         "shopping_list": "Innkaupalisti",
         "dev-services": "Þjónustur",
         "dev-states": "Stöður",
         "dev-events": "Viðburðir",
+        "dev-templates": "Skapalón",
         "dev-mqtt": "MQTT",
         "dev-info": "Upplýsingar",
         "calendar": "Dagatal",
@@ -75,6 +76,10 @@
                 "off": "Aftengdur",
                 "on": "Tengdur"
             },
+            "cold": {
+                "off": "Venjulegt",
+                "on": "Kalt"
+            },
             "door": {
                 "off": "Lokuð",
                 "on": "Opin"
@@ -83,6 +88,10 @@
                 "off": "Lokuð",
                 "on": "Opin"
             },
+            "heat": {
+                "off": "Venjulegt",
+                "on": "Heitt"
+            },
             "window": {
                 "off": "Loka",
                 "on": "Opna"
@@ -301,6 +310,7 @@
                                 "stop": "Stöðva"
                             },
                             "core_config": {
+                                "edit_requires_storage": "Ritill er óvirkur af því að stillingar eru vistaðar í configuration.yaml.",
                                 "location_name": "Nafnið á Home Assistant uppsetningunni",
                                 "latitude": "Breiddargráða",
                                 "longitude": "Lengdargráða",
@@ -475,7 +485,9 @@
                                 }
                             },
                             "learn_more": "Læra meira um aðgerðir"
-                        }
+                        },
+                        "load_error_not_editable": "Eingöngu er hægt að breyta sjálfvirkni í automations.yaml",
+                        "load_error_unknown": "Villa kom upp við að hlaða inn sjálfvirkni  ({err_no})."
                     }
                 },
                 "script": {
@@ -537,6 +549,7 @@
                     },
                     "config_flow": {
                         "external_step": {
+                            "description": "Þetta skref krefst þess að þú heimsækir ytri vefsíðu svo hægt sé að ljúka þessu skrefi.",
                             "open_site": "Opna vefsíðu"
                         }
                     }
@@ -785,6 +798,7 @@
                     "finish": "Ljúka"
                 },
                 "core-config": {
+                    "intro": "Hæ {name}, velkomin(n) í Home Assistant. Hvað á heimilið þitt að heita?",
                     "location_name_default": "Heima",
                     "button_detect": "Uppgötva",
                     "finish": "Næsta"
@@ -869,12 +883,14 @@
                 "cards": {
                     "demo": {
                         "demo_by": "eftir {name}",
+                        "next_demo": "Næsta sýnidæmi",
                         "learn_more": "Læra meira um Home Assistant"
                     }
                 },
                 "config": {
                     "arsaboo": {
                         "names": {
+                            "family_room": "Fjölskyldurými",
                             "kitchen": "Eldhús",
                             "left": "Vinstri",
                             "right": "Hægri",
@@ -885,7 +901,10 @@
                             "information": "Upplýsingar",
                             "entertainment": "Skemmtun",
                             "activity": "Virkni",
+                            "hdmi_input": "HDMI inntak",
+                            "hdmi_switcher": "HDMI rofi",
                             "volume": "Hljóðstyrkur",
+                            "total_tv_time": "Heildar sjónvarpstími",
                             "turn_tv_off": "Slökkva á sjónvarpi"
                         },
                         "unit": {
@@ -985,6 +1004,7 @@
                 "currently": "Er núna",
                 "on_off": "Kveikt \/ slökkt",
                 "operation": "Aðgerð",
+                "fan_mode": "Viftuhamur",
                 "swing_mode": "Sveifluhamur"
             },
             "lock": {
@@ -1104,6 +1124,7 @@
         "updater": "Uppfærsluálfur",
         "weblink": "Vefslóð",
         "zwave": "Z-Wave",
+        "vacuum": "Ryksuga",
         "zha": "ZHA",
         "hassio": "Hass.io",
         "homeassistant": "Home Assistant",

translations/pl.json

@@ -849,7 +849,7 @@
                                     "data": {
                                         "code": "Kod uwierzytelniania dwuskładnikowego"
                                     },
-                                    "description": "Otwórz **{mfa_module_name}** na swoim urządzeniu by zobaczyć kod dwuskładnikowego uwierzytelniania i zweryfikować swoją toższamość:"
+                                    "description": "Otwórz **{mfa_module_name}** na swoim urządzeniu by zobaczyć kod dwuskładnikowego uwierzytelniania i zweryfikować swoją tożsamość:"
                                 }
                             },
                             "error": {