From b34c2a6f924e660796eba10ebb979fe8e9c73ba7 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 6 Aug 2017 09:22:15 -0700
Subject: [PATCH] Consolidate config (#377)

* Move automation panel to config

* Hide Hass menu button from error screen

* No longer store undefined in local storage

* Move Z-Wave panel into config panel

* Move Z-Wave node options from core to Z-Wave config

* Remove panel entries in polymer.json

* Lint
---
 panels/automation/ha-automation-picker.html   | 141 --------------
 .../automation/ha-automation-editor.html      |  35 ++--
 .../automation/ha-automation-picker.html      | 146 +++++++++++++++
 .../automation/ha-config-automation.html}     |  27 +--
 panels/config/core/ha-config-core.html        | 106 +++++++++++
 .../config/core/ha-config-section-core.html   |   6 -
 .../ha-config-section-group.html              |   0
 .../ha-config-section-hassbian.html           |   0
 .../ha-config-section-themes.html             |   0
 .../config/{group => core}/ha-form-group.html |   0
 .../config/dashboard/ha-config-dashboard.html |  81 ++++++++
 .../dashboard/ha-config-navigation.html       |  99 ++++++++++
 panels/config/ha-entity-config.html           |   1 +
 panels/config/ha-panel-config.html            | 165 +++++++---------
 .../zwave/ha-config-zwave.html}               | 144 +++++++++-----
 .../ha-form-zwave-device.html                 |   0
 panels/{ => config}/zwave/zwave-groups.html   |  12 +-
 panels/{ => config}/zwave/zwave-log.html      |   6 +-
 panels/config/zwave/zwave-network.html        | 177 ++++++++++++++++++
 .../{ => config}/zwave/zwave-node-config.html |  14 +-
 .../zwave/zwave-node-information.html         |   4 +-
 .../zwave-node-options.html}                  |   4 +-
 .../{ => config}/zwave/zwave-usercodes.html   |  14 +-
 panels/{ => config}/zwave/zwave-values.html   |  12 +-
 panels/zwave/zwave-network.html               | 111 -----------
 polymer.json                                  |   4 +-
 .../buttons/ha-call-service-button.html       |  16 --
 src/components/ha-service-description.html    |  27 +++
 src/layouts/hass-error-screen.html            |  11 --
 src/resources/ha-style.html                   |   3 +-
 src/util/ha-pref-storage.html                 |   3 +-
 31 files changed, 865 insertions(+), 504 deletions(-)
 delete mode 100644 panels/automation/ha-automation-picker.html
 rename panels/{ => config}/automation/ha-automation-editor.html (79%)
 create mode 100644 panels/config/automation/ha-automation-picker.html
 rename panels/{automation/ha-panel-automation.html => config/automation/ha-config-automation.html} (78%)
 create mode 100644 panels/config/core/ha-config-core.html
 rename panels/config/{group => core}/ha-config-section-group.html (100%)
 rename panels/config/{hassbian => core}/ha-config-section-hassbian.html (100%)
 rename panels/config/{themes => core}/ha-config-section-themes.html (100%)
 rename panels/config/{group => core}/ha-form-group.html (100%)
 create mode 100644 panels/config/dashboard/ha-config-dashboard.html
 create mode 100644 panels/config/dashboard/ha-config-navigation.html
 rename panels/{zwave/ha-panel-zwave.html => config/zwave/ha-config-zwave.html} (77%)
 rename panels/config/{z-wave => zwave}/ha-form-zwave-device.html (100%)
 rename panels/{ => config}/zwave/zwave-groups.html (92%)
 rename panels/{ => config}/zwave/zwave-log.html (78%)
 create mode 100644 panels/config/zwave/zwave-network.html
 rename panels/{ => config}/zwave/zwave-node-config.html (94%)
 rename panels/{ => config}/zwave/zwave-node-information.html (91%)
 rename panels/config/{z-wave/ha-config-section-zwave.html => zwave/zwave-node-options.html} (96%)
 rename panels/{ => config}/zwave/zwave-usercodes.html (88%)
 rename panels/{ => config}/zwave/zwave-values.html (87%)
 delete mode 100644 panels/zwave/zwave-network.html
 create mode 100644 src/components/ha-service-description.html

diff --git a/panels/automation/ha-automation-picker.html b/panels/automation/ha-automation-picker.html
deleted file mode 100644
index fb44a2dcfb..0000000000
--- a/panels/automation/ha-automation-picker.html
+++ /dev/null
@@ -1,141 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../bower_components/paper-item/paper-item.html">
-<link rel="import" href="../../bower_components/paper-item/paper-item-body.html">
-<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
-
-<dom-module id="ha-automation-picker">
-  <template>
-    <style include="ha-style">
-      :host {
-        display: block;
-      }
-
-      paper-card {
-        display: block;
-        max-width: 600px;
-        margin: 0 auto;
-      }
-
-      .content {
-        padding: 16px;
-      }
-
-      paper-item {
-        cursor: pointer;
-      }
-
-      paper-fab {
-        position: fixed;
-        bottom: 16px;
-        right: 16px;
-        z-index: 1;
-      }
-
-      paper-fab[is-wide] {
-        bottom: 24px;
-        right: 24px;
-      }
-
-      a {
-        color: var(--primary-color);
-      }
-    </style>
-
-    <app-header-layout has-scrolling-region>
-      <app-header slot="header" fixed>
-        <app-toolbar>
-          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-          <div main-title>Automations Editor</div>
-        </app-toolbar>
-      </app-header>
-
-      <div class='content'>
-        <paper-card heading='Pick automation to edit'>
-            <div class='card-content'>
-              The automation editor allows you to create and edit automations.
-              Please read <a href='https://home-assistant.io/docs/automation/editor/' target='_blank'>the instructions</a>
-              to make sure that you have configured Home Assistant correctly.
-              <template is='dom-if' if='[[!automations.length]]'>
-                <p>We couldn't find any editable automations.</p>
-              </template>
-            </div>
-          <template is='dom-repeat' items='[[automations]]' as='automation'>
-            <paper-item>
-              <paper-item-body two-line on-tap='automationTapped'>
-                <div>[[computeName(automation)]]</div>
-                <div secondary>[[computeDescription(automation)]]</div>
-              </paper-item-body>
-              [[computeStatus(automation)]]
-            </paper-item>
-          </template>
-        </paper-card>
-
-        <paper-fab
-          is-wide$='[[isWide]]'
-          icon='mdi:plus'
-          title='Add Automation'
-          on-tap='addAutomation'
-        ></paper-fab>
-      </div>
-    </app-header-layout>
-
-  </template>
-</dom-module>
-
-<script>
-Polymer({
-  is: 'ha-automation-picker',
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    narrow: {
-      type: Boolean,
-    },
-
-    showMenu: {
-      type: Boolean,
-      value: false,
-    },
-
-    automations: {
-      type: Array,
-    },
-
-    isWide: {
-      type: Boolean,
-    },
-  },
-
-  automationTapped: function (ev) {
-    history.pushState(
-      null, null, '/automation/edit/' + this.automations[ev.model.index].attributes.id);
-    this.fire('location-changed');
-  },
-
-  addAutomation: function () {
-    history.pushState(null, null, '/automation/new');
-    this.fire('location-changed');
-  },
-
-  computeName: function (automation) {
-    return window.hassUtil.computeStateName(automation);
-  },
-
-  // Still thinking of something to add here.
-  // eslint-disable-next-line
-  computeDescription: function (automation) {
-    return '';
-  },
-
-  computeStatus: function (automation) {
-    return automation.state;
-  },
-});
-</script>
diff --git a/panels/automation/ha-automation-editor.html b/panels/config/automation/ha-automation-editor.html
similarity index 79%
rename from panels/automation/ha-automation-editor.html
rename to panels/config/automation/ha-automation-editor.html
index 12ac0ba440..daf911e700 100644
--- a/panels/automation/ha-automation-editor.html
+++ b/panels/config/automation/ha-automation-editor.html
@@ -1,21 +1,21 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../bower_components/paper-item/paper-item.html">
-<link rel="import" href="../../bower_components/paper-item/paper-item-body.html">
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../bower_components/paper-input/paper-input.html">
-<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu-light.html">
-<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
-<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">
-<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
-<link rel="import" href="../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
+<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu-light.html">
+<link rel="import" href="../../../bower_components/paper-listbox/paper-listbox.html">
+<link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html">
+<link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
+<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
 
-<link rel="import" href="../config/ha-config-section.html">
+<link rel="import" href="../ha-config-section.html">
 
-<script src='../../build-temp/editor.js'></script>
+<script src='../../../build-temp/editor.js'></script>
 
 <dom-module id="ha-automation-editor">
   <template>
@@ -231,8 +231,7 @@ Polymer({
         !confirm('You have unsaved changes. Are you sure you want to leave?')) {
       return;
     }
-    history.pushState(null, null, '/automation');
-    this.fire('location-changed');
+    history.back();
   },
 
   _updateComponent: function () {
diff --git a/panels/config/automation/ha-automation-picker.html b/panels/config/automation/ha-automation-picker.html
new file mode 100644
index 0000000000..c1e9dd1cd1
--- /dev/null
+++ b/panels/config/automation/ha-automation-picker.html
@@ -0,0 +1,146 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
+<link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
+<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+
+<link rel="import" href="../ha-config-section.html">
+
+<dom-module id="ha-automation-picker">
+  <template>
+    <style include="ha-style">
+      :host {
+        display: block;
+      }
+
+/*      .content {
+        padding: 16px;
+      }
+*/
+      paper-item {
+        cursor: pointer;
+      }
+
+      paper-fab {
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        z-index: 1;
+      }
+
+      paper-fab[is-wide] {
+        bottom: 24px;
+        right: 24px;
+      }
+
+      a {
+        color: var(--primary-color);
+      }
+    </style>
+
+    <app-header-layout has-scrolling-region>
+      <app-header slot="header" fixed>
+        <app-toolbar>
+          <paper-icon-button
+            icon='mdi:arrow-left'
+            on-tap='_backTapped'
+          ></paper-icon-button>
+          <div main-title>Automations</div>
+        </app-toolbar>
+      </app-header>
+
+      <ha-config-section
+        is-wide='[[isWide]]'
+      >
+        <div slot='header'>Automation editor</div>
+        <div slot='introduction'>
+          The automation editor allows you to create and edit automations.
+          Please read <a href='https://home-assistant.io/docs/automation/editor/' target='_blank'>the instructions</a> to make sure that you have configured Home Assistant correctly.
+        </div>
+
+        <paper-card heading='Pick automation to edit'>
+          <template is='dom-if' if='[[!automations.length]]'>
+            <div class='card-content'>
+              <p>We couldn't find any editable automations.</p>
+            </div>
+          </template>
+          <template is='dom-repeat' items='[[automations]]' as='automation'>
+            <paper-item>
+              <paper-item-body two-line on-tap='automationTapped'>
+                <div>[[computeName(automation)]]</div>
+                <div secondary>[[computeDescription(automation)]]</div>
+              </paper-item-body>
+              <iron-icon icon='mdi:chevron-right'></iron-icon>
+            </paper-item>
+          </template>
+        </paper-card>
+      </ha-config-section>
+
+      <paper-fab
+        is-wide$='[[isWide]]'
+        icon='mdi:plus'
+        title='Add Automation'
+        on-tap='addAutomation'
+      ></paper-fab>
+    </app-header-layout>
+
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-automation-picker',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    narrow: {
+      type: Boolean,
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+
+    automations: {
+      type: Array,
+    },
+
+    isWide: {
+      type: Boolean,
+    },
+  },
+
+  automationTapped: function (ev) {
+    history.pushState(
+      null, null, '/config/automation/edit/' + this.automations[ev.model.index].attributes.id);
+    this.fire('location-changed');
+  },
+
+  addAutomation: function () {
+    history.pushState(null, null, '/config/automation/new');
+    this.fire('location-changed');
+  },
+
+  computeName: function (automation) {
+    return window.hassUtil.computeStateName(automation);
+  },
+
+  // Still thinking of something to add here.
+  // eslint-disable-next-line
+  computeDescription: function (automation) {
+    return '';
+  },
+
+  _backTapped: function () {
+    history.back();
+  },
+});
+</script>
diff --git a/panels/automation/ha-panel-automation.html b/panels/config/automation/ha-config-automation.html
similarity index 78%
rename from panels/automation/ha-panel-automation.html
rename to panels/config/automation/ha-config-automation.html
index cb0e13399d..247767a6f1 100644
--- a/panels/automation/ha-panel-automation.html
+++ b/panels/config/automation/ha-config-automation.html
@@ -1,11 +1,10 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel='import' href='../../bower_components/iron-media-query/iron-media-query.html'>
-<link rel='import' href='../../bower_components/app-route/app-route.html'>
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel='import' href='../../../bower_components/app-route/app-route.html'>
 
 <link rel="import" href="./ha-automation-picker.html">
 <link rel="import" href="./ha-automation-editor.html">
 
-<dom-module id="ha-panel-automation">
+<dom-module id="ha-config-automation">
   <template>
     <style>
       ha-automation-picker,
@@ -25,11 +24,6 @@
       active="{{_creatingNew}}"
     ></app-route>
 
-    <iron-media-query query="(min-width: 1040px)" query-matches="{{wide}}">
-    </iron-media-query>
-    <iron-media-query query="(min-width: 1296px)" query-matches="{{wideSidebar}}">
-    </iron-media-query>
-
     <template is='dom-if' if='[[!showEditor]]'>
       <ha-automation-picker
         narrow='[[narrow]]'
@@ -52,13 +46,14 @@
 
 <script>
 Polymer({
-  is: 'ha-panel-automation',
+  is: 'ha-config-automation',
 
   properties: {
     hass: Object,
     narrow: Boolean,
     showMenu: Boolean,
     route: Object,
+    isWide: Boolean,
     _routeData: Object,
     _routeMatches: Boolean,
     _creatingNew: Boolean,
@@ -74,24 +69,12 @@ Polymer({
       computed: 'computeAutomation(automations, _edittingAddon, _routeData)',
     },
 
-    wide: Boolean,
-    wideSidebar: Boolean,
-
-    isWide: {
-      type: Boolean,
-      computed: 'computeIsWide(showMenu, wideSidebar, wide)'
-    },
-
     showEditor: {
       type: Boolean,
       computed: 'computeShowEditor(_edittingAddon, _creatingNew)',
     }
   },
 
-  computeIsWide: function (showMenu, wideSidebar, wide) {
-    return showMenu ? wideSidebar : wide;
-  },
-
   computeAutomation: function (automations, edittingAddon, routeData) {
     if (!automations || !edittingAddon) {
       return null;
diff --git a/panels/config/core/ha-config-core.html b/panels/config/core/ha-config-core.html
new file mode 100644
index 0000000000..49de2c8018
--- /dev/null
+++ b/panels/config/core/ha-config-core.html
@@ -0,0 +1,106 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+
+<link rel="import" href="./ha-config-section-core.html">
+<!-- <link rel="import" href="./ha-config-section-group.html"> -->
+<link rel="import" href="./ha-config-section-hassbian.html">
+<link rel="import" href="./ha-config-section-themes.html">
+
+<dom-module id="ha-config-core">
+  <template>
+    <style include="iron-flex ha-style">
+      .content {
+        padding-bottom: 32px;
+      }
+
+      .border {
+        margin: 32px auto 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+        max-width: 1040px;
+      }
+
+      .narrow .border {
+        max-width: 640px;
+      }
+    </style>
+
+    <app-header-layout has-scrolling-region>
+      <app-header slot="header" fixed>
+        <app-toolbar>
+          <paper-icon-button
+            icon='mdi:arrow-left'
+            on-tap='_backTapped'
+          ></paper-icon-button>
+          <div main-title>Core</div>
+        </app-toolbar>
+      </app-header>
+
+      <div class$='[[computeClasses(isWide)]]'>
+        <!--
+          Sortable.js doesn't work in Polymer 2 making this panel useless.
+          Disabling for now.
+        <ha-config-section-group
+          is-wide='[[isWide]]'
+          hass='[[hass]]'
+        ></ha-config-section-group>
+        -->
+
+        <ha-config-section-core
+          is-wide='[[isWide]]'
+          hass='[[hass]]'
+        ></ha-config-section-core>
+
+        <template is='dom-if' if='[[computeIsThemesLoaded(hass)]]'>
+          <div class='border'></div>
+          <ha-config-section-themes
+            is-wide='[[isWide]]'
+            hass='[[hass]]'
+          ></ha-config-section-themes>
+        </template>
+
+        <template is='dom-if' if='[[computeIsHassbianLoaded(hass)]]'>
+          <div class='border'></div>
+          <ha-config-section-hassbian
+            is-wide='[[isWide]]'
+            hass='[[hass]]'
+          ></ha-config-section-hassbian>
+        </template>
+      </div>
+    </app-header-layout>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-config-core',
+
+  properties: {
+    hass: Object,
+    isWide: Boolean,
+  },
+
+  computeClasses: function (isWide) {
+    return isWide ? 'content' : 'content narrow';
+  },
+
+  computeIsHassbianLoaded: function (hass) {
+    return window.hassUtil.isComponentLoaded(hass, 'config.hassbian');
+  },
+
+  computeIsZwaveLoaded: function (hass) {
+    return window.hassUtil.isComponentLoaded(hass, 'config.zwave');
+  },
+
+  computeIsThemesLoaded: function (hass) {
+    return hass.themes && hass.themes.themes &&
+      Object.keys(hass.themes.themes).length;
+  },
+
+  _backTapped: function () {
+    history.back();
+  },
+});
+</script>
diff --git a/panels/config/core/ha-config-section-core.html b/panels/config/core/ha-config-section-core.html
index 4c0e477bd8..d26a1ed93e 100644
--- a/panels/config/core/ha-config-section-core.html
+++ b/panels/config/core/ha-config-section-core.html
@@ -1,15 +1,9 @@
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
-<link rel='import' href='../../../bower_components/iron-media-query/iron-media-query.html'>
 <link rel="import" href="../../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../../bower_components/paper-input/paper-input.html">
 <link rel="import" href="../../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../../bower_components/paper-card/paper-card.html">
 
-<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-
-<link rel="import" href="../../../src/components/ha-menu-button.html">
 <link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
 <link rel="import" href="../../../src/resources/ha-style.html">
 
diff --git a/panels/config/group/ha-config-section-group.html b/panels/config/core/ha-config-section-group.html
similarity index 100%
rename from panels/config/group/ha-config-section-group.html
rename to panels/config/core/ha-config-section-group.html
diff --git a/panels/config/hassbian/ha-config-section-hassbian.html b/panels/config/core/ha-config-section-hassbian.html
similarity index 100%
rename from panels/config/hassbian/ha-config-section-hassbian.html
rename to panels/config/core/ha-config-section-hassbian.html
diff --git a/panels/config/themes/ha-config-section-themes.html b/panels/config/core/ha-config-section-themes.html
similarity index 100%
rename from panels/config/themes/ha-config-section-themes.html
rename to panels/config/core/ha-config-section-themes.html
diff --git a/panels/config/group/ha-form-group.html b/panels/config/core/ha-form-group.html
similarity index 100%
rename from panels/config/group/ha-form-group.html
rename to panels/config/core/ha-form-group.html
diff --git a/panels/config/dashboard/ha-config-dashboard.html b/panels/config/dashboard/ha-config-dashboard.html
new file mode 100644
index 0000000000..1725137d50
--- /dev/null
+++ b/panels/config/dashboard/ha-config-dashboard.html
@@ -0,0 +1,81 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+
+<link rel="import" href="../../../src/components/ha-menu-button.html">
+
+<link rel="import" href="./ha-config-navigation.html">
+
+<dom-module id="ha-config-dashboard">
+  <template>
+    <style include="iron-flex ha-style">
+      .content {
+        padding-bottom: 32px;
+      }
+
+      .border {
+        margin: 32px auto 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+        max-width: 1040px;
+      }
+
+      .narrow .border {
+        max-width: 640px;
+      }
+    </style>
+
+    <app-header-layout has-scrolling-region>
+      <app-header slot="header" fixed>
+        <app-toolbar>
+          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
+          <div main-title>Configuration</div>
+        </app-toolbar>
+      </app-header>
+
+      <div class$='[[computeClasses(isWide)]]'>
+        <!--
+          Sortable.js doesn't work in Polymer 2 making this panel useless.
+          Disabling for now.
+        <ha-config-section-group
+          is-wide='[[isWide]]'
+          hass='[[hass]]'
+        ></ha-config-section-group>
+        -->
+
+        <ha-config-navigation
+          is-wide='[[isWide]]'
+          hass='[[hass]]'
+        ></ha-config-navigation>
+
+        <!-- <template is='dom-if' if='[[computeIsZwaveLoaded(hass)]]'>
+          <div class='border'></div>
+          <ha-config-section-zwave
+            is-wide='[[isWide]]'
+            hass='[[hass]]'
+          ></ha-config-section-zwave>
+        </template> -->
+      </div>
+    </app-header-layout>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-config-dashboard',
+
+  properties: {
+    hass: Object,
+    isWide: Boolean,
+  },
+
+  computeClasses: function (isWide) {
+    return isWide ? 'content' : 'content narrow';
+  },
+
+  computeIsThemesLoaded: function (hass) {
+    return hass.themes && hass.themes.themes &&
+      Object.keys(hass.themes.themes).length;
+  },
+});
+</script>
diff --git a/panels/config/dashboard/ha-config-navigation.html b/panels/config/dashboard/ha-config-navigation.html
new file mode 100644
index 0000000000..ecdd373ac3
--- /dev/null
+++ b/panels/config/dashboard/ha-config-navigation.html
@@ -0,0 +1,99 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
+<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
+
+<link rel="import" href="../../../src/resources/ha-style.html">
+
+<link rel="import" href="../ha-config-section.html">
+
+<dom-module id="ha-config-navigation">
+  <template>
+    <style include="iron-flex ha-style">
+      paper-item {
+        cursor: pointer;
+      }
+    </style>
+    <ha-config-section
+      is-wide='[[isWide]]'
+    >
+      <span slot='header'>Configure Home Assistant</span>
+      <span slot='introduction'>
+        Here 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.
+      </span>
+
+      <paper-card>
+        <template is='dom-repeat' items='[[pages]]'>
+          <template is='dom-if' if='[[_computeLoaded(hass, item)]]'>
+            <paper-item on-tap='_navigate'>
+              <paper-item-body two-line>
+                [[_computeCaption(item)]]
+                <div secondary>[[_computeDescription(item)]]</div>
+              </paper-item-body>
+              <iron-icon icon='mdi:chevron-right'></iron-icon>
+            </paper-item>
+          </template>
+        </template>
+      </paper-card>
+    </ha-config-section>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-config-navigation',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    isWide: {
+      type: Boolean,
+      value: false,
+    },
+
+    pages: {
+      type: Array,
+      value: [
+        {
+          domain: 'automation',
+          caption: 'Automation',
+          description: 'Create and edit automations.',
+        },
+        {
+          domain: 'core',
+          caption: 'Configuration.yaml',
+          description: 'Manage your configuration file and the server.',
+          loaded: true,
+        },
+        {
+          domain: 'zwave',
+          caption: 'Z-Wave',
+          description: 'Manage your Z-Wave network.',
+        }
+      ],
+    }
+  },
+
+  _computeLoaded: function (hass, component) {
+    return component.loaded || window.hassUtil.isComponentLoaded(
+      hass, component.domain);
+  },
+
+  _computeCaption: function (component) {
+    return component.caption;
+  },
+
+  _computeDescription: function (component) {
+    return component.description;
+  },
+
+  _navigate: function (ev) {
+    history.pushState(
+      null, null, '/config/' + ev.model.item.domain);
+    this.fire('location-changed');
+  },
+});
+</script>
diff --git a/panels/config/ha-entity-config.html b/panels/config/ha-entity-config.html
index 2ed361f1cf..6e22426a96 100644
--- a/panels/config/ha-entity-config.html
+++ b/panels/config/ha-entity-config.html
@@ -186,6 +186,7 @@ Polymer({
   entityChanged: function (index) {
     if (!this.entities || !this.formEl) return;
     var entity = this.entities[index];
+    if (!entity) return;
 
     this.formState = 'loading';
     var el = this;
diff --git a/panels/config/ha-panel-config.html b/panels/config/ha-panel-config.html
index 1b76377fd9..3a413a4937 100644
--- a/panels/config/ha-panel-config.html
+++ b/panels/config/ha-panel-config.html
@@ -1,84 +1,71 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../src/components/ha-menu-button.html">
 <link rel='import' href='../../bower_components/iron-media-query/iron-media-query.html'>
-<link rel="import" href="./core/ha-config-section-core.html">
-<!-- <link rel="import" href="./group/ha-config-section-group.html"> -->
-<link rel="import" href="./hassbian/ha-config-section-hassbian.html">
-<link rel="import" href="./z-wave/ha-config-section-zwave.html">
-<link rel="import" href="themes/ha-config-section-themes.html">
+<link rel='import' href='../../bower_components/app-route/app-route.html'>
+<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
+
+<link rel="import" href="../../src/layouts/hass-error-screen.html">
+
+<link rel="import" href="./dashboard/ha-config-dashboard.html">
+<link rel="import" href="./core/ha-config-core.html">
+<link rel="import" href="./automation/ha-config-automation.html">
+<link rel="import" href="./zwave/ha-config-zwave.html">
 
 <dom-module id="ha-panel-config">
   <template>
-    <style include="iron-flex ha-style">
-      .content {
-        padding-bottom: 32px;
-      }
-
-      .border {
-        margin: 32px auto 0;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-        max-width: 1040px;
-      }
-
-      .narrow .border {
-        max-width: 640px;
+    <style>
+      iron-pages {
+        height: 100%;
       }
     </style>
+    <app-route
+      route='[[route]]'
+      pattern='/:page'
+      data="{{_routeData}}"
+      tail="{{_routeTail}}"
+    ></app-route>
+
     <iron-media-query query="(min-width: 1040px)" query-matches="{{wide}}">
     </iron-media-query>
     <iron-media-query query="(min-width: 1296px)" query-matches="{{wideSidebar}}">
     </iron-media-query>
-    <app-header-layout has-scrolling-region>
-      <app-header slot="header" fixed>
-        <app-toolbar>
-          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-          <div main-title>Configuration</div>
-        </app-toolbar>
-      </app-header>
 
-      <div class$='[[computeClasses(isWide)]]'>
-        <!--
-          Sortable.js doesn't work in Polymer 2 making this panel useless.
-          Disabling for now.
-        <ha-config-section-group
-          is-wide='[[isWide]]'
-          hass='[[hass]]'
-        ></ha-config-section-group>
-        -->
+    <iron-pages
+      selected='[[_routeData.page]]'
+      attr-for-selected='page-name'
+      fallback-selection='not-found'
+      selected-attribute='visible'
+    >
+      <ha-config-dashboard
+        page-name='dashboard'
+        hass='[[hass]]'
+        is-wide='[[isWide]]'
+      ></ha-config-dashboard>
 
-        <ha-config-section-core
-          is-wide='[[isWide]]'
-          hass='[[hass]]'
-        ></ha-config-section-core>
+      <ha-config-automation
+        page-name='automation'
+        route='[[_routeTail]]'
+        hass='[[hass]]'
+        is-wide='[[isWide]]'
+      ></ha-config-automation>
 
-        <template is='dom-if' if='[[computeIsThemesLoaded(hass)]]'>
-          <div class='border'></div>
-          <ha-config-section-themes
-            is-wide='[[isWide]]'
-            hass='[[hass]]'
-          ></ha-config-section-themes>
-        </template>
+      <ha-config-zwave
+        page-name='zwave'
+        hass='[[hass]]'
+        is-wide='[[isWide]]'
+      ></ha-config-zwave>
 
-        <template is='dom-if' if='[[computeIsHassbianLoaded(hass)]]'>
-          <div class='border'></div>
-          <ha-config-section-hassbian
-            is-wide='[[isWide]]'
-            hass='[[hass]]'
-          ></ha-config-section-hassbian>
-        </template>
+      <ha-config-core
+        page-name='core'
+        hass='[[hass]]'
+        is-wide='[[isWide]]'
+      ></ha-config-core>
 
-        <template is='dom-if' if='[[computeIsZwaveLoaded(hass)]]'>
-          <div class='border'></div>
-          <ha-config-section-zwave
-            is-wide='[[isWide]]'
-            hass='[[hass]]'
-          ></ha-config-section-zwave>
-        </template>
-      </div>
-    </app-header-layout>
+      <hass-error-screen
+        page-name='not-found'
+        error='Page not found.'
+        title='Configuration'
+      ></hass-error-screen>
+    </iron-pages>
   </template>
 </dom-module>
 
@@ -87,26 +74,20 @@ Polymer({
   is: 'ha-panel-config',
 
   properties: {
-    hass: {
+    hass: Object,
+    narrow: Boolean,
+    showMenu: Boolean,
+
+    route: {
       type: Object,
+      observer: '_routeChanged',
     },
 
-    narrow: {
-      type: Boolean,
-    },
+    _routeData: Object,
+    _routeTail: Object,
 
-    showMenu: {
-      type: Boolean,
-      value: false,
-    },
-
-    wide: {
-      type: Boolean,
-    },
-
-    wideSidebar: {
-      type: Boolean,
-    },
+    wide: Boolean,
+    wideSidebar: Boolean,
 
     isWide: {
       type: Boolean,
@@ -118,21 +99,11 @@ Polymer({
     return showMenu ? wideSidebar : wide;
   },
 
-  computeClasses: function (isWide) {
-    return isWide ? 'content' : 'content narrow';
-  },
-
-  computeIsHassbianLoaded: function (hass) {
-    return window.hassUtil.isComponentLoaded(hass, 'config.hassbian');
-  },
-
-  computeIsZwaveLoaded: function (hass) {
-    return window.hassUtil.isComponentLoaded(hass, 'config.zwave');
-  },
-
-  computeIsThemesLoaded: function (hass) {
-    return hass.themes && hass.themes.themes &&
-      Object.keys(hass.themes.themes).length;
-  },
+  _routeChanged: function (route) {
+    if (route.path === '' && route.prefix === '/config') {
+      history.replaceState(null, null, '/config/dashboard');
+      this.fire('location-changed');
+    }
+  }
 });
 </script>
diff --git a/panels/zwave/ha-panel-zwave.html b/panels/config/zwave/ha-config-zwave.html
similarity index 77%
rename from panels/zwave/ha-panel-zwave.html
rename to panels/config/zwave/ha-config-zwave.html
index f17e2a6692..2e943ae78b 100644
--- a/panels/zwave/ha-panel-zwave.html
+++ b/panels/config/zwave/ha-config-zwave.html
@@ -1,17 +1,18 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../src/components/ha-menu-button.html">
-<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
-<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
-<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
-<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
-<link rel='import' href="../../bower_components/paper-listbox/paper-listbox.html">
-<link rel='import' href="../../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../../src/components/ha-menu-button.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
+<link rel='import' href="../../../bower_components/paper-listbox/paper-listbox.html">
+<link rel='import' href="../../../bower_components/paper-input/paper-input.html">
 
-<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
-<link rel="import" href="../../src/resources/ha-style.html">
+<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
+<link rel="import" href="../../../src/components/ha-service-description.html">
+<link rel="import" href="../../../src/resources/ha-style.html">
 <link rel="import" href="./zwave-log.html">
 <link rel="import" href="./zwave-network.html">
 <link rel="import" href="./zwave-node-information.html">
@@ -19,8 +20,9 @@
 <link rel="import" href="./zwave-groups.html">
 <link rel="import" href="./zwave-node-config.html">
 <link rel="import" href="./zwave-usercodes.html">
+<link rel="import" href="./zwave-node-options.html">
 
-<dom-module id="ha-panel-zwave">
+<dom-module id="ha-config-zwave">
   <template>
     <style include="iron-flex ha-style">
       .content {
@@ -48,16 +50,40 @@
         padding-left: 24px;
         padding-right: 24px;
         padding-bottom: 24px;
-        }
+      }
+
+      ha-service-description {
+        display: block;
+        color: grey;
+      }
+
+      [hidden] {
+        display: none;
+      }
+
+      .toggle-help-icon {
+        position: absolute;
+        top: 6px;
+        right: 0;
+        color: var(--primary-color);
+      }
     </style>
     <app-header-layout has-scrolling-region>
       <app-header slot="header" fixed>
         <app-toolbar>
-          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
+          <paper-icon-button
+            icon='mdi:arrow-left'
+            on-tap='_backTapped'
+          ></paper-icon-button>
           <div main-title>Z-Wave Manager</div>
         </app-toolbar>
       </app-header>
 
+      <zwave-node-options
+        is-wide='[[isWide]]'
+        hass='[[hass]]'
+      ></zwave-node-options>
+
       <div class='content'>
         <zwave-network
           id='zwave-network'
@@ -67,10 +93,12 @@
 <!--Node card-->
       <div class='content'>
         <paper-card heading='Z-Wave Node Management'>
-          <iron-icon on-tap='toggleHelp' style='padding: 14px 0 14px 12px' icon='mdi:help-circle'></iron-icon>
-          <div style='display:inline-block' class='card-content'>
-            Z-Wave Node controls.
-          </div>
+          <paper-icon-button
+            class='toggle-help-icon'
+            on-tap='toggleHelp'
+            icon='mdi:help-circle'
+          ></paper-icon-button>
+
           <div class='device-picker'>
             <paper-dropdown-menu label="Nodes" class="flex">
               <paper-listbox
@@ -91,33 +119,57 @@
           <template is='dom-if' if='[[computeIsNodeSelected(selectedNode)]]'>
           <div class='card-actions'>
             <ha-call-service-button
-                hass='[[hass]]'
-                domain='zwave'
-                service='refresh_node'
-                service-data=[[computeNodeServiceData(selectedNode)]]
-                show-description=[[showHelp]]
-              >Refresh Node</ha-call-service-button>
+              hass='[[hass]]'
+              domain='zwave'
+              service='refresh_node'
+              service-data=[[computeNodeServiceData(selectedNode)]]
+            >Refresh Node</ha-call-service-button>
+            <ha-service-description
+              hass='[[hass]]'
+              domain='zwave'
+              service='refresh_node'
+              hidden$='[[!showHelp]]'
+            ></ha-service-description>
+
             <ha-call-service-button
               hass='[[hass]]'
               domain='zwave'
               service='remove_failed_node'
               service-data=[[computeNodeServiceData(selectedNode)]]
-              show-description=[[showHelp]]
             >Remove Failed Node</ha-call-service-button>
+            <ha-service-description
+              hass='[[hass]]'
+              domain='zwave'
+              service='remove_failed_node'
+              hidden$='[[!showHelp]]'
+            ></ha-service-description>
+
             <ha-call-service-button
               hass='[[hass]]'
               domain='zwave'
               service='replace_failed_node'
               service-data=[[computeNodeServiceData(selectedNode)]]
-              show-description=[[showHelp]]
             >Replace Failed Node</ha-call-service-button>
+            <ha-service-description
+              hass='[[hass]]'
+              domain='zwave'
+              service='replace_failed_node'
+              hidden$='[[!showHelp]]'
+            ></ha-service-description>
+
             <ha-call-service-button
               hass='[[hass]]'
               domain='zwave'
               service='print_node'
               service-data=[[computeNodeServiceData(selectedNode)]]
-              show-description=[[showHelp]]
             >Print Node</ha-call-service-button>
+            <ha-service-description
+              hass='[[hass]]'
+              domain='zwave'
+              service='print_node'
+              hidden$='[[!showHelp]]'
+            ></ha-service-description>
+
           </div>
           <div class='card-actions'>
             <paper-input
@@ -131,8 +183,13 @@
               domain='zwave'
               service='rename_node'
               service-data=[[computeNodeNameServiceData(newNodeNameInput)]]
-              show-description=[[showHelp]]
             >Rename Node</ha-call-service-button>
+            <ha-service-description
+              hass='[[hass]]'
+              domain='zwave'
+              service='rename_node'
+              hidden$='[[!showHelp]]'
+            ></ha-service-description>
            </div>
 
            <div class='device-picker'>
@@ -153,8 +210,13 @@
               domain='zwave'
               service='refresh_entity'
               service-data=[[computeRefreshEntityServiceData(selectedEntity)]]
-              show-description=[[showHelp]]
             >Refresh Entity</ha-call-service-button>
+            <ha-service-description
+              hass='[[hass]]'
+              domain='zwave'
+              service='refresh_entity'
+              hidden$='[[!showHelp]]'
+            ></ha-service-description>
            </div>
            <div class='content'>
              <div class='card-actions'>
@@ -232,21 +294,11 @@
 
 <script>
 Polymer({
-  is: 'ha-panel-zwave',
+  is: 'ha-config-zwave',
 
   properties: {
-    hass: {
-      type: Object,
-    },
-
-    narrow: {
-      type: Boolean,
-    },
-
-    showMenu: {
-      type: Boolean,
-      value: false,
-    },
+    hass: Object,
+    isWide: Boolean,
 
     nodes: {
       type: Array,
@@ -441,5 +493,9 @@ Polymer({
     });
     return array;
   },
+
+  _backTapped: function () {
+    history.back();
+  },
 });
 </script>
diff --git a/panels/config/z-wave/ha-form-zwave-device.html b/panels/config/zwave/ha-form-zwave-device.html
similarity index 100%
rename from panels/config/z-wave/ha-form-zwave-device.html
rename to panels/config/zwave/ha-form-zwave-device.html
diff --git a/panels/zwave/zwave-groups.html b/panels/config/zwave/zwave-groups.html
similarity index 92%
rename from panels/zwave/zwave-groups.html
rename to panels/config/zwave/zwave-groups.html
index 5a6dbdf3e9..02deb5fe7e 100644
--- a/panels/zwave/zwave-groups.html
+++ b/panels/config/zwave/zwave-groups.html
@@ -1,10 +1,10 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
-<link rel='import' href="../../bower_components/paper-listbox/paper-listbox.html">
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
+<link rel='import' href="../../../bower_components/paper-listbox/paper-listbox.html">
 
-<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
+<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
 
 <dom-module id='zwave-groups'>
   <template>
diff --git a/panels/zwave/zwave-log.html b/panels/config/zwave/zwave-log.html
similarity index 78%
rename from panels/zwave/zwave-log.html
rename to panels/config/zwave/zwave-log.html
index 909360cee3..0487765cd2 100644
--- a/panels/zwave/zwave-log.html
+++ b/panels/config/zwave/zwave-log.html
@@ -1,6 +1,6 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
 
 <dom-module id='ozw-log'>
   <template>
diff --git a/panels/config/zwave/zwave-network.html b/panels/config/zwave/zwave-network.html
new file mode 100644
index 0000000000..73be3d928b
--- /dev/null
+++ b/panels/config/zwave/zwave-network.html
@@ -0,0 +1,177 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
+<link rel="import" href="../../../src/components/ha-service-description.html">
+
+<dom-module id='zwave-network'>
+  <template>
+    <style include="iron-flex ha-style">
+      .content {
+        margin-top: 24px;
+      }
+
+      paper-card {
+        display: block;
+        margin: 0 auto;
+        max-width: 600px;
+      }
+
+      .card-actions.warning ha-call-service-button {
+        color: var(--google-red-500);
+      }
+
+      .toggle-help-icon {
+        position: absolute;
+        top: 6px;
+        right: 0;
+        color: var(--primary-color);
+      }
+
+      ha-service-description {
+        display: block;
+        color: grey;
+      }
+
+      [hidden] {
+        display: none;
+      }
+    </style>
+    <paper-card heading='Z-Wave Network Management'>
+      <paper-icon-button
+        class="toggle-help-icon"
+        on-tap='helpTap'
+        icon='mdi:help-circle'
+      ></paper-icon-button>
+      <div class='card-actions'>
+        <ha-call-service-button
+          hass='[[hass]]'
+          domain='zwave'
+          service='add_node_secure'
+        >Add Node Secure</ha-call-service-button>
+        <ha-service-description
+          hass='[[hass]]'
+          domain='zwave'
+          service='add_node_secure'
+          hidden$='[[!showDescription]]'
+        ></ha-service-description>
+
+        <ha-call-service-button
+          hass='[[hass]]'
+          domain='zwave'
+          service='add_node'
+        >Add Node</ha-call-service-button>
+        <ha-service-description
+          hass='[[hass]]'
+          domain='zwave'
+          service='add_node'
+          hidden$='[[!showDescription]]'
+        ></ha-service-description>
+
+        <ha-call-service-button
+          hass='[[hass]]'
+          domain='zwave'
+          service='remove_node'
+        >Remove Node</ha-call-service-button>
+        <ha-service-description
+          hass='[[hass]]'
+          domain='zwave'
+          service='remove_node'
+          hidden$='[[!showDescription]]'
+        ></ha-service-description>
+
+      </div>
+      <div class='card-actions warning'>
+        <ha-call-service-button
+          hass='[[hass]]'
+          domain='zwave'
+          service='cancel_command'
+        >Cancel Command</ha-call-service-button>
+        <ha-service-description
+          hass='[[hass]]'
+          domain='zwave'
+          service='cancel_command'
+          hidden$='[[!showDescription]]'
+        ></ha-service-description>
+
+      </div>
+      <div class='card-actions'>
+        <ha-call-service-button
+          hass='[[hass]]'
+          domain='zwave'
+          service='heal_network'
+        >Heal Network</ha-call-service-button>
+
+        <ha-call-service-button
+          hass='[[hass]]'
+          domain='zwave'
+          service='start_network'
+        >Start Network</ha-call-service-button>
+        <ha-service-description
+          hass='[[hass]]'
+          domain='zwave'
+          service='start_network'
+          hidden$='[[!showDescription]]'
+        ></ha-service-description>
+
+        <ha-call-service-button
+          hass='[[hass]]'
+          domain='zwave'
+          service='stop_network'
+        >Stop Network</ha-call-service-button>
+        <ha-service-description
+          hass='[[hass]]'
+          domain='zwave'
+          service='stop_network'
+          hidden$='[[!showDescription]]'
+        ></ha-service-description>
+
+        <ha-call-service-button
+          hass='[[hass]]'
+          domain='zwave'
+          service='soft_reset'
+        >Soft Reset</ha-call-service-button>
+        <ha-service-description
+          hass='[[hass]]'
+          domain='zwave'
+          service='soft_reset'
+          hidden$='[[!showDescription]]'
+        ></ha-service-description>
+
+        <ha-call-service-button
+          hass='[[hass]]'
+          domain='zwave'
+          service='test_network'
+        >Test Network</ha-call-service-button>
+        <ha-service-description
+          hass='[[hass]]'
+          domain='zwave'
+          service='test_network'
+          hidden$='[[!showDescription]]'
+        ></ha-service-description>
+
+      </div>
+    </paper-card>
+  </template>
+</dom-module>
+<script>
+
+Polymer({
+  is: 'zwave-network',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    showDescription: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  helpTap: function () {
+    this.showDescription = !this.showDescription;
+  }
+});
+</script>
diff --git a/panels/zwave/zwave-node-config.html b/panels/config/zwave/zwave-node-config.html
similarity index 94%
rename from panels/zwave/zwave-node-config.html
rename to panels/config/zwave/zwave-node-config.html
index d50b66613f..606fba25ce 100644
--- a/panels/zwave/zwave-node-config.html
+++ b/panels/config/zwave/zwave-node-config.html
@@ -1,11 +1,11 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
-<link rel='import' href="../../bower_components/paper-listbox/paper-listbox.html">
-<link rel='import' href="../../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
+<link rel='import' href="../../../bower_components/paper-listbox/paper-listbox.html">
+<link rel='import' href="../../../bower_components/paper-input/paper-input.html">
 
-<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
+<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
 
 <dom-module id='zwave-node-config'>
   <template>
diff --git a/panels/zwave/zwave-node-information.html b/panels/config/zwave/zwave-node-information.html
similarity index 91%
rename from panels/zwave/zwave-node-information.html
rename to panels/config/zwave/zwave-node-information.html
index 5bab298bb0..6a7f38a288 100644
--- a/panels/zwave/zwave-node-information.html
+++ b/panels/config/zwave/zwave-node-information.html
@@ -1,5 +1,5 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
 
 <dom-module id='zwave-node-information'>
   <template>
diff --git a/panels/config/z-wave/ha-config-section-zwave.html b/panels/config/zwave/zwave-node-options.html
similarity index 96%
rename from panels/config/z-wave/ha-config-section-zwave.html
rename to panels/config/zwave/zwave-node-options.html
index 0b12ad7262..103a1a25a3 100644
--- a/panels/config/z-wave/ha-config-section-zwave.html
+++ b/panels/config/zwave/zwave-node-options.html
@@ -14,7 +14,7 @@
 <link rel="import" href="../ha-entity-config.html">
 <link rel="import" href="./ha-form-zwave-device.html">
 
-<dom-module id="ha-config-section-zwave">
+<dom-module id="zwave-node-options">
   <template>
     <ha-config-section is-wide='[[isWide]]'>
       <span slot='header'>Z-Wave</span>
@@ -33,7 +33,7 @@
 
 <script>
 Polymer({
-  is: 'ha-config-section-zwave',
+  is: 'zwave-node-options',
 
   properties: {
     hass: {
diff --git a/panels/zwave/zwave-usercodes.html b/panels/config/zwave/zwave-usercodes.html
similarity index 88%
rename from panels/zwave/zwave-usercodes.html
rename to panels/config/zwave/zwave-usercodes.html
index d5ab68a901..e424545a0f 100644
--- a/panels/zwave/zwave-usercodes.html
+++ b/panels/config/zwave/zwave-usercodes.html
@@ -1,11 +1,11 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
-<link rel='import' href="../../bower_components/paper-listbox/paper-listbox.html">
-<link rel='import' href="../../bower_components/paper-input/paper-input.html">
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
+<link rel='import' href="../../../bower_components/paper-listbox/paper-listbox.html">
+<link rel='import' href="../../../bower_components/paper-input/paper-input.html">
 
-<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
+<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
 
 <dom-module id='zwave-usercodes'>
   <template>
diff --git a/panels/zwave/zwave-values.html b/panels/config/zwave/zwave-values.html
similarity index 87%
rename from panels/zwave/zwave-values.html
rename to panels/config/zwave/zwave-values.html
index 2168a9fad9..6ae198a3f6 100644
--- a/panels/zwave/zwave-values.html
+++ b/panels/config/zwave/zwave-values.html
@@ -1,10 +1,10 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
-<link rel='import' href="../../bower_components/paper-listbox/paper-listbox.html">
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
+<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
+<link rel='import' href="../../../bower_components/paper-listbox/paper-listbox.html">
 
-<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
+<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
 
 <dom-module id='zwave-values'>
   <template>
diff --git a/panels/zwave/zwave-network.html b/panels/zwave/zwave-network.html
deleted file mode 100644
index 18bbc44843..0000000000
--- a/panels/zwave/zwave-network.html
+++ /dev/null
@@ -1,111 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-card/paper-card.html">
-<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
-<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
-
-<dom-module id='zwave-network'>
-  <template>
-    <style include="iron-flex ha-style">
-      .content {
-        margin-top: 24px;
-      }
-
-      paper-card {
-        display: block;
-        margin: 0 auto;
-        max-width: 600px;
-      }
-
-      .card-actions.warning ha-call-service-button {
-        color: var(--google-red-500);
-      }
-    </style>
-    <paper-card heading='Z-Wave Network Management'>
-      <iron-icon on-tap='helpTap' style='padding: 14px 0 14px 12px' icon='mdi:help-circle'></iron-icon>
-      <div style='display:inline-block' class='card-content'>
-        Z-Wave Network controls.
-      </div>
-      <div class='card-actions'>
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='add_node_secure'
-          show-description=[[showDescription]]
-        >Add Node Secure</ha-call-service-button>
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='add_node'
-          show-description=[[showDescription]]
-        >Add Node</ha-call-service-button>
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='remove_node'
-          show-description=[[showDescription]]
-        >Remove Node</ha-call-service-button>
-      </div>
-      <div class='card-actions warning'>
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='cancel_command'
-          show-description=[[showDescription]]
-        >Cancel Command</ha-call-service-button>
-      </div>
-      <div class='card-actions'>
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='heal_network'
-          show-description=[[showDescription]]
-        >Heal Network</ha-call-service-button>
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='start_network'
-          show-description=[[showDescription]]
-        >Start Network</ha-call-service-button>
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='stop_network'
-          show-description=[[showDescription]]
-        >Stop Network</ha-call-service-button>
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='soft_reset'
-          show-description=[[showDescription]]
-        >Soft Reset</ha-call-service-button>
-        <ha-call-service-button
-          hass='[[hass]]'
-          domain='zwave'
-          service='test_network'
-          show-description=[[showDescription]]
-        >Test Network</ha-call-service-button>
-      </div>
-    </paper-card>
-  </template>
-</dom-module>
-<script>
-
-Polymer({
-  is: 'zwave-network',
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    showDescription: {
-      type: Boolean,
-      value: false,
-    },
-  },
-
-  helpTap: function () {
-    this.showDescription = !this.showDescription;
-  }
-});
-</script>
diff --git a/polymer.json b/polymer.json
index f702ffb7dc..5b7685d008 100644
--- a/polymer.json
+++ b/polymer.json
@@ -2,7 +2,6 @@
   "entrypoint": "src/entrypoint.html",
   "shell": "src/home-assistant.html",
   "fragments": [
-    "panels/automation/ha-panel-automation.html",
     "panels/config/ha-panel-config.html",
     "panels/dev-event/ha-panel-dev-event.html",
     "panels/dev-info/ha-panel-dev-info.html",
@@ -16,8 +15,7 @@
     "panels/kiosk/ha-panel-kiosk.html",
     "panels/logbook/ha-panel-logbook.html",
     "panels/map/ha-panel-map.html",
-    "panels/shopping-list/ha-panel-shopping-list.html",
-    "panels/zwave/ha-panel-zwave.html"
+    "panels/shopping-list/ha-panel-shopping-list.html"
   ],
   "sources": [
     "src/**/*",
diff --git a/src/components/buttons/ha-call-service-button.html b/src/components/buttons/ha-call-service-button.html
index 983841bc05..3df2f30ba4 100644
--- a/src/components/buttons/ha-call-service-button.html
+++ b/src/components/buttons/ha-call-service-button.html
@@ -8,9 +8,6 @@
       progress='[[progress]]'
       on-tap='buttonTapped'
     ><slot></slot></ha-progress-button>
-  <template is='dom-if' if='[[showDescription]]'>
-    <div style="color: grey">[[getDescription(hass, domain, service)]]</div>
-  </template>
   </template>
 </dom-module>
 
@@ -40,11 +37,6 @@ Polymer({
       type: Object,
       value: {},
     },
-
-    showDescription: {
-      type: Boolean,
-      value: false,
-    },
   },
 
   buttonTapped: function () {
@@ -69,13 +61,5 @@ Polymer({
         el.fire('hass-service-called', eventData);
       });
   },
-
-  getDescription: function (hass, domain, service) {
-    var domainServices = hass.config.services[domain];
-    if (!domainServices) return '';
-    var serviceObject = domainServices[service];
-    if (!serviceObject) return '';
-    return serviceObject.description;
-  },
 });
 </script>
diff --git a/src/components/ha-service-description.html b/src/components/ha-service-description.html
new file mode 100644
index 0000000000..af3f6c9a2c
--- /dev/null
+++ b/src/components/ha-service-description.html
@@ -0,0 +1,27 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+
+<dom-module id='ha-service-description'>
+  <template>
+    [[_getDescription(hass, domain, service)]]
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-service-description',
+
+  properties: {
+    hass: Object,
+    domain: String,
+    service: String,
+  },
+
+  _getDescription: function (hass, domain, service) {
+    var domainServices = hass.config.services[domain];
+    if (!domainServices) return '';
+    var serviceObject = domainServices[service];
+    if (!serviceObject) return '';
+    return serviceObject.description;
+  },
+});
+</script>
diff --git a/src/layouts/hass-error-screen.html b/src/layouts/hass-error-screen.html
index 480fb2f237..5f8726a5e5 100644
--- a/src/layouts/hass-error-screen.html
+++ b/src/layouts/hass-error-screen.html
@@ -23,7 +23,6 @@
 
     <div class='placeholder'>
       <app-toolbar>
-        <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
         <div main-title>[[title]]</div>
       </app-toolbar>
       <div class='layout vertical center-center'>
@@ -39,16 +38,6 @@ Polymer({
   is: 'hass-error-screen',
 
   properties: {
-    narrow: {
-      type: Boolean,
-      value: false,
-    },
-
-    showMenu: {
-      type: Boolean,
-      value: false,
-    },
-
     title: {
       type: String,
       value: 'Home Assistant',
diff --git a/src/resources/ha-style.html b/src/resources/ha-style.html
index 8f710147e4..9049d3af90 100644
--- a/src/resources/ha-style.html
+++ b/src/resources/ha-style.html
@@ -94,7 +94,8 @@
         color: white;
       }
 
-      app-toolbar ha-menu-button + [main-title] {
+      app-toolbar ha-menu-button + [main-title],
+      app-toolbar paper-icon-button + [main-title] {
         margin-left: 24px;
       }
 
diff --git a/src/util/ha-pref-storage.html b/src/util/ha-pref-storage.html
index f4eb2c289e..7530690cfe 100644
--- a/src/util/ha-pref-storage.html
+++ b/src/util/ha-pref-storage.html
@@ -25,7 +25,8 @@
       try {
         for (var i = 0; i < STORED_STATE.length; i++) {
           var key = STORED_STATE[i];
-          this.storage[key] = JSON.stringify(this.hass[key]);
+          var value = this.hass[key];
+          this.storage[key] = JSON.stringify(value === undefined ? null : value);
         }
       } catch (err) {
         // Safari throws exception in private mode