From 4029f16e9701f7b29e660dd969333d629a32eb75 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sat, 16 Jul 2016 23:19:49 -0700
Subject: [PATCH] Reorg into panels (#75)

---
 .eslintrc                                     |   3 +
 .gitignore                                    |   1 +
 home-assistant-js                             |   2 +-
 package.json                                  |   9 +-
 .../dev-event}/events-list.html               |   2 +-
 .../dev-event/ha-panel-dev-event.html         |   9 +-
 .../dev-info/ha-panel-dev-info.html           |   9 +-
 .../dev-service/ha-panel-dev-service.html     |   9 +-
 .../dev-service}/services-list.html           |   2 +-
 .../dev-state}/entity-list.html               |   2 +-
 .../dev-state/ha-panel-dev-state.html         |   9 +-
 .../dev-template/ha-panel-dev-template.html   |   8 +-
 panels/history/ha-panel-history.html          | 131 ++++++++++++++++++
 panels/iframe/ha-panel-iframe.html            |  38 +++++
 .../logbook}/ha-logbook.html                  |  10 +-
 panels/logbook/ha-panel-logbook.html          | 125 +++++++++++++++++
 .../logbook}/logbook-entry.html               |  19 +++
 .../map}/ha-entity-marker.html                |   2 +
 .../map/ha-panel-map.html                     |   9 +-
 rollup/core.js                                |   2 +-
 rollup/demo.js                                |   2 +-
 rollup/ui.js                                  |   2 +-
 script/sw-precache.js                         |  75 ++++++----
 script/vulcanize.js                           |  70 +++++-----
 src/components/display-time.html              |  20 ++-
 src/components/display-time.js                |  17 ---
 src/components/domain-icon.html               |  22 +++
 src/components/domain-icon.js                 |  23 ---
 src/components/ha-sidebar.html                |  97 +++++++++----
 src/components/logbook-entry.js               |  19 ---
 src/dialogs/more-info-dialog.html             |  16 +--
 src/dialogs/more-info-dialog.js               |   4 +
 src/entry-points/dev-tools.html               |   5 -
 src/entry-points/home-assistant-main.html     | 127 +++++++++++++----
 src/entry-points/home-assistant-main.js       | 122 ----------------
 src/home-assistant.html                       |   6 +-
 src/{entry-points => layouts}/login-form.html |   2 +-
 src/layouts/partial-cards.html                |   7 +-
 src/layouts/partial-history.html              |  46 ------
 src/layouts/partial-history.js                |  75 ----------
 src/layouts/partial-logbook.html              |  41 ------
 src/layouts/partial-logbook.js                |  78 -----------
 src/layouts/partial-panel-resolver.html       |  68 +++++++++
 src/resources/panel-imports.html              |   9 ++
 src/util/domain-icon.js                       |   6 +-
 45 files changed, 755 insertions(+), 605 deletions(-)
 rename {src/components => panels/dev-event}/events-list.html (93%)
 rename src/layouts/partial-dev-fire-event.html => panels/dev-event/ha-panel-dev-event.html (95%)
 rename src/layouts/partial-dev-info.html => panels/dev-info/ha-panel-dev-info.html (96%)
 rename src/layouts/partial-dev-call-service.html => panels/dev-service/ha-panel-dev-service.html (96%)
 rename {src/components => panels/dev-service}/services-list.html (94%)
 rename {src/components => panels/dev-state}/entity-list.html (92%)
 rename src/layouts/partial-dev-set-state.html => panels/dev-state/ha-panel-dev-state.html (96%)
 rename src/layouts/partial-dev-template.html => panels/dev-template/ha-panel-dev-template.html (97%)
 create mode 100644 panels/history/ha-panel-history.html
 create mode 100644 panels/iframe/ha-panel-iframe.html
 rename {src/components => panels/logbook}/ha-logbook.html (76%)
 create mode 100644 panels/logbook/ha-panel-logbook.html
 rename {src/components => panels/logbook}/logbook-entry.html (84%)
 rename {src/components/entity => panels/map}/ha-entity-marker.html (99%)
 rename src/layouts/partial-map.html => panels/map/ha-panel-map.html (97%)
 delete mode 100644 src/components/display-time.js
 delete mode 100644 src/components/domain-icon.js
 delete mode 100644 src/components/logbook-entry.js
 delete mode 100644 src/entry-points/dev-tools.html
 rename src/{entry-points => layouts}/login-form.html (98%)
 delete mode 100644 src/layouts/partial-history.html
 delete mode 100644 src/layouts/partial-history.js
 delete mode 100644 src/layouts/partial-logbook.html
 delete mode 100644 src/layouts/partial-logbook.js
 create mode 100644 src/layouts/partial-panel-resolver.html
 create mode 100644 src/resources/panel-imports.html

diff --git a/.eslintrc b/.eslintrc
index e53662fda9..0ed0aa0651 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -4,6 +4,9 @@
     "__DEV__": false,
     "Polymer": true
   },
+  "env": {
+    "browser": true
+  },
   "rules": {
     "new-cap": 0,
     "prefer-template": 0,
diff --git a/.gitignore b/.gitignore
index 1cbd9d7a58..c9c5fd4d5d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 build/*
+build-temp/*
 node_modules/*
 bower_components/*
 npm-debug.log
diff --git a/home-assistant-js b/home-assistant-js
index 8ad1b80dac..0209bcdd0b 160000
--- a/home-assistant-js
+++ b/home-assistant-js
@@ -1 +1 @@
-Subproject commit 8ad1b80dac98aeefba73fb1081f51b9fb1cb6952
+Subproject commit 0209bcdd0b7491d539f05887347d66a63e0da42c
diff --git a/package.json b/package.json
index 614c05d6d4..050b846f76 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
   },
   "scripts": {
     "setup_js_dev": "git submodule init && git submodule update && cd home-assistant-js && npm install",
-    "js_dev": "watch_ru_all",
+    "clean": "rm -rf build/* build-temp/*",
+    "js_dev": "npm run watch_ru_all",
     "js_dev_demo": "BUILD_DEMO=1 npm run watch_ru_all",
     "js_prod": "BUILD_DEV=0 npm run ru_all",
     "js_demo": "BUILD_DEV=0 BUILD_DEMO=1 npm run ru_all",
@@ -36,9 +37,9 @@
   },
   "devDependencies": {
     "bower": "^1.7.9",
-    "eslint": "^3.0.1",
-    "eslint-config-airbnb-base": "^4.0.0",
-    "eslint-plugin-import": "^1.10.2",
+    "eslint": "^3.1.0",
+    "eslint-config-airbnb-base": "^4.0.2",
+    "eslint-plugin-import": "^1.10.3",
     "html-minifier": "^3.0.1",
     "rollup": "^0.34.1",
     "rollup-plugin-babel": "^2.6.1",
diff --git a/src/components/events-list.html b/panels/dev-event/events-list.html
similarity index 93%
rename from src/components/events-list.html
rename to panels/dev-event/events-list.html
index b7b3378037..6d5fd19633 100644
--- a/src/components/events-list.html
+++ b/panels/dev-event/events-list.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<!-- <link rel="import" href="../../bower_components/polymer/polymer.html"> -->
 
 <dom-module id="events-list">
   <style>
diff --git a/src/layouts/partial-dev-fire-event.html b/panels/dev-event/ha-panel-dev-event.html
similarity index 95%
rename from src/layouts/partial-dev-fire-event.html
rename to panels/dev-event/ha-panel-dev-event.html
index 278829c35d..a03a3c1a11 100644
--- a/src/layouts/partial-dev-fire-event.html
+++ b/panels/dev-event/ha-panel-dev-event.html
@@ -1,3 +1,4 @@
+<!--
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
@@ -5,10 +6,10 @@
 <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
 
 <link rel="import" href="./partial-base.html">
+-->
+<link rel="import" href="./events-list.html">
 
-<link rel="import" href="../components/events-list.html">
-
-<dom-module id="partial-dev-fire-event">
+<dom-module id="ha-panel-dev-event">
   <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
     .content {
@@ -59,7 +60,7 @@
 
 <script>
 Polymer({
-  is: 'partial-dev-fire-event',
+  is: 'ha-panel-dev-event',
 
   properties: {
     hass: {
diff --git a/src/layouts/partial-dev-info.html b/panels/dev-info/ha-panel-dev-info.html
similarity index 96%
rename from src/layouts/partial-dev-info.html
rename to panels/dev-info/ha-panel-dev-info.html
index ad93e52444..ab926bf3a3 100644
--- a/src/layouts/partial-dev-info.html
+++ b/panels/dev-info/ha-panel-dev-info.html
@@ -1,10 +1,11 @@
+<!--
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 
 <link rel="import" href="./partial-base.html">
-
-<dom-module id="partial-dev-info">
+-->
+<dom-module id="ha-panel-dev-info">
   <style is="custom-style" include="iron-positioning"></style>
   <style>
     .content {
@@ -56,7 +57,7 @@
       <div class='content fit'>
         <div class='about'>
           <p class='version'>
-            <a href='https://home-assistant.io'><img src="/static/favicon-192x192.png" height="192" /></a><br />
+            <a href='https://home-assistant.io'><img src="/static/icons/favicon-192x192.png" height="192" /></a><br />
             Home Assistant<br />
             [[hassVersion]]
           </p>
@@ -92,7 +93,7 @@
 
 <script>
 Polymer({
-  is: 'partial-dev-info',
+  is: 'ha-panel-dev-info',
 
   behaviors: [window.hassBehavior],
 
diff --git a/src/layouts/partial-dev-call-service.html b/panels/dev-service/ha-panel-dev-service.html
similarity index 96%
rename from src/layouts/partial-dev-call-service.html
rename to panels/dev-service/ha-panel-dev-service.html
index 17c29c64f7..cb288360ef 100644
--- a/src/layouts/partial-dev-call-service.html
+++ b/panels/dev-service/ha-panel-dev-service.html
@@ -1,3 +1,4 @@
+<!--
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
@@ -5,10 +6,10 @@
 <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
 
 <link rel="import" href="./partial-base.html">
+-->
+<link rel="import" href="./services-list.html">
 
-<link rel="import" href="../components/services-list.html">
-
-<dom-module id="partial-dev-call-service">
+<dom-module id="ha-panel-dev-service">
   <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
     .content {
@@ -64,7 +65,7 @@
 
 <script>
 Polymer({
-  is: 'partial-dev-call-service',
+  is: 'ha-panel-dev-service',
 
   properties: {
     hass: {
diff --git a/src/components/services-list.html b/panels/dev-service/services-list.html
similarity index 94%
rename from src/components/services-list.html
rename to panels/dev-service/services-list.html
index 9a9047742e..617efee806 100644
--- a/src/components/services-list.html
+++ b/panels/dev-service/services-list.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<!-- <link rel="import" href="../../bower_components/polymer/polymer.html"> -->
 
 <dom-module id="services-list">
   <style>
diff --git a/src/components/entity-list.html b/panels/dev-state/entity-list.html
similarity index 92%
rename from src/components/entity-list.html
rename to panels/dev-state/entity-list.html
index 40d1653c25..553945b37f 100644
--- a/src/components/entity-list.html
+++ b/panels/dev-state/entity-list.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<!-- <link rel="import" href="../../bower_components/polymer/polymer.html"> -->
 
 <dom-module id="entity-list">
   <style>
diff --git a/src/layouts/partial-dev-set-state.html b/panels/dev-state/ha-panel-dev-state.html
similarity index 96%
rename from src/layouts/partial-dev-set-state.html
rename to panels/dev-state/ha-panel-dev-state.html
index 243f21b7e2..3c78db1d12 100644
--- a/src/layouts/partial-dev-set-state.html
+++ b/panels/dev-state/ha-panel-dev-state.html
@@ -1,3 +1,4 @@
+<!--
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
@@ -5,10 +6,10 @@
 <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
 
 <link rel="import" href="./partial-base.html">
+-->
+<link rel="import" href="./entity-list.html">
 
-<link rel="import" href="../components/entity-list.html">
-
-<dom-module id="partial-dev-set-state">
+<dom-module id="ha-panel-dev-state">
   <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
     .content {
@@ -60,7 +61,7 @@
 
 <script>
 Polymer({
-  is: 'partial-dev-set-state',
+  is: 'ha-panel-dev-state',
 
   properties: {
     hass: {
diff --git a/src/layouts/partial-dev-template.html b/panels/dev-template/ha-panel-dev-template.html
similarity index 97%
rename from src/layouts/partial-dev-template.html
rename to panels/dev-template/ha-panel-dev-template.html
index eee8961e9d..7297baa5ea 100644
--- a/src/layouts/partial-dev-template.html
+++ b/panels/dev-template/ha-panel-dev-template.html
@@ -1,13 +1,13 @@
+<!--
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
 <link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
 
 <link rel="import" href="./partial-base.html">
+-->
 
-<link rel="import" href="../components/services-list.html">
-
-<dom-module id="partial-dev-template">
+<dom-module id="ha-panel-dev-template">
   <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
     .content {
@@ -80,7 +80,7 @@
 
 <script>
 Polymer({
-  is: 'partial-dev-template',
+  is: 'ha-panel-dev-template',
 
   behaviors: [window.hassBehavior],
 
diff --git a/panels/history/ha-panel-history.html b/panels/history/ha-panel-history.html
new file mode 100644
index 0000000000..7d063b713e
--- /dev/null
+++ b/panels/history/ha-panel-history.html
@@ -0,0 +1,131 @@
+<!--
+<link rel="import" href="../../bower_components/polymer/polymer.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="./partial-base.html">
+
+<link rel="import" href="../components/state-history-charts.html">
+-->
+
+<link rel="import" href="../../src/resources/pikaday-js.html">
+
+<dom-module id="ha-panel-history">
+  <style is="custom-style" include="iron-flex"></style>
+  <style>
+    .content {
+      background-color: white;
+    }
+
+    .content.wide {
+      padding: 8px;
+    }
+
+    paper-input {
+      max-width: 200px;
+    }
+
+    .narrow paper-input {
+      margin-left: 8px;
+    }
+  </style>
+  <template>
+    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
+      <span header-title>History</span>
+
+      <paper-icon-button icon="mdi:refresh" header-buttons
+        on-tap="handleRefreshClick"></paper-icon-button>
+
+      <div class$="[[computeContentClasses(narrow)]]">
+        <paper-input label='Showing entries for' id='datePicker'
+          value='[[selectedDate]]'></paper-input>
+
+        <state-history-charts state-history="[[stateHistory]]"
+          is-loading-data="[[isLoadingData]]"></state-history-charts>
+      </div>
+    </partial-base>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-panel-history',
+
+  behaviors: [window.hassBehavior],
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    narrow: {
+      type: Boolean,
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+
+    isDataLoaded: {
+      type: Boolean,
+      bindNuclear: function (hass) {
+        return hass.entityHistoryGetters.hasDataForCurrentDate;
+      },
+      observer: 'isDataLoadedChanged',
+    },
+
+    stateHistory: {
+      type: Object,
+      bindNuclear: function (hass) {
+        return hass.entityHistoryGetters.entityHistoryForCurrentDate;
+      },
+    },
+
+    isLoadingData: {
+      type: Boolean,
+      bindNuclear: function (hass) {
+        return hass.entityHistoryGetters.isLoadingEntityHistory;
+      },
+    },
+
+    selectedDate: {
+      type: String,
+      value: null,
+      bindNuclear: function (hass) {
+        return hass.entityHistoryGetters.currentDate;
+      },
+    },
+  },
+
+  isDataLoadedChanged: function (newVal) {
+    if (!newVal) {
+      this.async(function () {
+        this.hass.entityHistoryActions.fetchSelectedDate();
+      }.bind(this), 1);
+    }
+  },
+
+  handleRefreshClick: function () {
+    this.hass.entityHistoryActions.fetchSelectedDate();
+  },
+
+  datepickerFocus: function () {
+    this.datePicker.adjustPosition();
+  },
+
+  attached: function () {
+    this.datePicker = new window.Pikaday({
+      field: this.$.datePicker.inputElement,
+      onSelect: this.hass.entityHistoryActions.changeCurrentDate,
+    });
+  },
+
+  detached: function () {
+    this.datePicker.destroy();
+  },
+
+  computeContentClasses: function (narrow) {
+    return narrow ? 'flex content narrow' : 'flex content wide';
+  },
+});
+</script>
diff --git a/panels/iframe/ha-panel-iframe.html b/panels/iframe/ha-panel-iframe.html
new file mode 100644
index 0000000000..7ff7e4a7f4
--- /dev/null
+++ b/panels/iframe/ha-panel-iframe.html
@@ -0,0 +1,38 @@
+<dom-module id='ha-panel-iframe'>
+  <style>
+    iframe {
+      border: 0;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+  <template>
+    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
+      <span header-title>[[panel.title]]</span>
+
+    <iframe
+      src='[[panel.config.url]]'
+      sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts"
+    ></iframe>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-panel-iframe',
+
+  properties: {
+    panel: {
+      type: Object,
+    },
+
+    narrow: {
+      type: Boolean,
+    },
+
+    showMenu: {
+      type: Boolean,
+    },
+  },
+});
+</script>
diff --git a/src/components/ha-logbook.html b/panels/logbook/ha-logbook.html
similarity index 76%
rename from src/components/ha-logbook.html
rename to panels/logbook/ha-logbook.html
index 4408fe155f..d494a923b2 100644
--- a/src/components/ha-logbook.html
+++ b/panels/logbook/ha-logbook.html
@@ -1,6 +1,8 @@
+<!--
 <link rel="import" href="../../bower_components/polymer/polymer.html">
+-->
 
-<link rel="import" href="../components/logbook-entry.html">
+<link rel="import" href="./logbook-entry.html">
 
 <dom-module id="ha-logbook">
   <style>
@@ -10,7 +12,7 @@
     }
   </style>
   <template>
-    <template is='dom-if' if='[[noEntries(entries)]]'>
+    <template is='dom-if' if='[[!entries.length]]'>
       No logbook entries found.
     </template>
     <template is='dom-repeat' items="[[entries]]">
@@ -33,9 +35,5 @@ Polymer({
       value: [],
     },
   },
-
-  noEntries: function (entries) {
-    return !entries.length;
-  },
 });
 </script>
diff --git a/panels/logbook/ha-panel-logbook.html b/panels/logbook/ha-panel-logbook.html
new file mode 100644
index 0000000000..f6a8239ea8
--- /dev/null
+++ b/panels/logbook/ha-panel-logbook.html
@@ -0,0 +1,125 @@
+<!--
+<link rel="import" href="../../bower_components/polymer/polymer.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="./partial-base.html">
+
+<link rel="import" href="../components/loading-box.html">
+-->
+
+<link rel="import" href="./ha-logbook.html">
+
+<link rel="import" href="../../src/resources/pikaday-js.html">
+
+<dom-module id="ha-panel-logbook">
+  <style>
+  .selected-date-container {
+    padding: 0 16px;
+  }
+
+  paper-input {
+    max-width: 200px;
+  }
+  </style>
+  <template>
+    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
+      <span header-title>Logbook</span>
+
+      <paper-icon-button icon="mdi:refresh" header-buttons
+        on-tap="handleRefresh"></paper-icon-button>
+
+      <div>
+        <div class='selected-date-container'>
+          <paper-input label='Showing entries for' id='datePicker'
+            value='[[selectedDate]]' on-focus='datepickerFocus'></paper-input>
+
+          <loading-box hidden$='[[!isLoading]]'>Loading logbook entries</loading-box>
+        </div>
+        <ha-logbook hass='[[hass]]' entries="[[entries]]" hidden$='[[isLoading]]'></ha-logbook>
+      </div>
+    </partial-base>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-panel-logbook',
+
+  behaviors: [window.hassBehavior],
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    narrow: {
+      type: Boolean,
+      value: false,
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+
+    selectedDate: {
+      type: String,
+      bindNuclear: function (hass) { return hass.logbookGetters.currentDate; },
+    },
+
+    isLoading: {
+      type: Boolean,
+      bindNuclear: function (hass) { return hass.logbookGetters.isLoadingEntries; },
+    },
+
+    isStale: {
+      type: Boolean,
+      bindNuclear: function (hass) { return hass.logbookGetters.isCurrentStale; },
+      observer: 'isStaleChanged',
+    },
+
+    entries: {
+      type: Array,
+      bindNuclear: function (hass) {
+        return [
+          hass.logbookGetters.currentEntries,
+          function (entries) { return entries.reverse().toArray(); },
+        ];
+      },
+    },
+
+    datePicker: {
+      type: Object,
+    },
+  },
+
+  isStaleChanged: function (newVal) {
+    if (newVal) {
+      this.async(function () {
+        this.hass.logbookActions.fetchDate(this.selectedDate);
+      }.bind(this), 1);
+    }
+  },
+
+  handleRefresh: function () {
+    this.hass.logbookActions.fetchDate(this.selectedDate);
+  },
+
+  datepickerFocus: function () {
+    this.datePicker.adjustPosition();
+  },
+
+  attached: function () {
+    this.datePicker = new window.Pikaday({
+      field: this.$.datePicker.inputElement,
+      onSelect: this.hass.logbookActions.changeCurrentDate,
+    });
+  },
+
+  detached: function () {
+    this.datePicker.destroy();
+  },
+});
+</script>
diff --git a/src/components/logbook-entry.html b/panels/logbook/logbook-entry.html
similarity index 84%
rename from src/components/logbook-entry.html
rename to panels/logbook/logbook-entry.html
index 14c8212460..787db644d7 100644
--- a/src/components/logbook-entry.html
+++ b/panels/logbook/logbook-entry.html
@@ -1,8 +1,10 @@
+<!--
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <link rel="import" href="domain-icon.html">
 <link rel="import" href="display-time.html">
 <link rel="import" href="relative-ha-datetime.html">
+-->
 
 <dom-module id="logbook-entry">
   <style is="custom-style" include="iron-flex"></style>
@@ -54,3 +56,20 @@
     </div>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'logbook-entry',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+  },
+
+  entityClicked: function (ev) {
+    ev.preventDefault();
+    this.hass.moreInfoActions.selectEntity(this.entryObj.entityId);
+  },
+});
+</script>
diff --git a/src/components/entity/ha-entity-marker.html b/panels/map/ha-entity-marker.html
similarity index 99%
rename from src/components/entity/ha-entity-marker.html
rename to panels/map/ha-entity-marker.html
index 8a980ec7a8..97f4293d28 100644
--- a/src/components/entity/ha-entity-marker.html
+++ b/panels/map/ha-entity-marker.html
@@ -1,6 +1,8 @@
+<!--
 <link rel='import' href='../../../bower_components/polymer/polymer.html'>
 <link rel='import' href='../../../bower_components/iron-image/iron-image.html'>
 <link rel='import' href='../../../bower_components/iron-icon/iron-icon.html'>
+-->
 
 <dom-module id='ha-entity-marker'>
   <style is="custom-style" include="iron-positioning"></style>
diff --git a/src/layouts/partial-map.html b/panels/map/ha-panel-map.html
similarity index 97%
rename from src/layouts/partial-map.html
rename to panels/map/ha-panel-map.html
index 3b67e740b3..07049ea437 100644
--- a/src/layouts/partial-map.html
+++ b/panels/map/ha-panel-map.html
@@ -1,14 +1,15 @@
+<!--
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel='import' href='../../bower_components/paper-toolbar/paper-toolbar.html'>
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
-
+-->
 <link rel="import" href="../../bower_components/leaflet-map/leaflet-map.html">
 
 <!-- temp work around -->
 <link rel="stylesheet" href="../../bower_components/leaflet/dist/leaflet.css" />
 
-<link rel="import" href="../components/entity/ha-entity-marker.html">
+<link rel="import" href="./ha-entity-marker.html">
 
 <style>
   /* Otherwise they go through overlays. */
@@ -21,7 +22,7 @@
   }
 </style>
 
-<dom-module id="partial-map">
+<dom-module id="ha-panel-map">
   <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
     .map {
@@ -87,7 +88,7 @@
 window.L.Icon.Default.imagePath = '/static/images/leaflet';
 
 Polymer({
-  is: 'partial-map',
+  is: 'ha-panel-map',
 
   behaviors: [window.hassBehavior],
 
diff --git a/rollup/core.js b/rollup/core.js
index 6e132759c8..6def4ef2e5 100644
--- a/rollup/core.js
+++ b/rollup/core.js
@@ -3,6 +3,6 @@ import config from './base-config';
 export default Object.assign({}, config, {
   entry: 'src/entry-points/app-core.js',
   targets: [
-    { dest: 'build/_core_compiled.js', format: 'iife' },
+    { dest: 'build/core.js', format: 'iife' },
   ],
 });
diff --git a/rollup/demo.js b/rollup/demo.js
index 57d7c14407..94574b6ffb 100644
--- a/rollup/demo.js
+++ b/rollup/demo.js
@@ -3,6 +3,6 @@ import config from './base-config';
 export default Object.assign({}, config, {
   entry: 'home-assistant-js/demo_data/expose_window.js',
   targets: [
-    { dest: 'build/_demo_data_compiled.js', format: 'iife' },
+    { dest: 'build-temp/demo_data.js', format: 'iife' },
   ],
 });
diff --git a/rollup/ui.js b/rollup/ui.js
index f65d37f80b..10aea3865e 100644
--- a/rollup/ui.js
+++ b/rollup/ui.js
@@ -3,6 +3,6 @@ import config from './base-config';
 export default Object.assign({}, config, {
   entry: 'src/entry-points/home-assistant-main.js',
   targets: [
-    { dest: 'build/_ui_compiled.js', format: 'iife' },
+    { dest: 'build-temp/ui.js', format: 'iife' },
   ],
 });
diff --git a/script/sw-precache.js b/script/sw-precache.js
index fc408ab880..178906fc6e 100644
--- a/script/sw-precache.js
+++ b/script/sw-precache.js
@@ -11,53 +11,55 @@ var crypto = require('crypto');
 var fs = require('fs');
 var path = require('path');
 var swPrecache = require('sw-precache');
+var uglifyJS = require('uglify-js');
 
 var rootDir = '..';
+var panelDir = rootDir + '/panels';
+// var panels = fs.readdirSync(panelDir);
+
+var dynamicUrlToDependencies = {
+  '/': [rootDir + '/frontend.html', rootDir + '/core.js'],
+};
+
+var staticFingerprinted = [
+  'frontend.html',
+  'mdi.html',
+  'core.js',
+];
+
+// The panels that will always be loaded
+var panelsFingerprinted = [
+  'map', 'dev-event', 'dev-info', 'dev-service', 'dev-state', 'dev-template',
+];
 
 function md5(filename) {
   return crypto.createHash('md5')
     .update(fs.readFileSync(filename)).digest('hex');
 }
 
-var appPaths = {
-  '/': [],
-  '/states': [],
-  '/logbook': [],
-  '/history': [],
-  '/map': ['/partial-map.html'],
-  '/devService': ['/dev-tools.html'],
-  '/devState': ['/dev-tools.html'],
-  '/devEvent': ['/dev-tools.html'],
-  '/devInfo': ['/dev-tools.html'],
-  '/devTemplate': ['/dev-tools.html'],
-};
-
-var fingerprinted = ['frontend.html', 'mdi.html', 'core.js', 'partial-map.html',
-                     'dev-tools.html'];
-
-var dynamicUrlToDependencies = {};
-
-// Have all app paths be refreshed based on if their dependencies changed
-Object.keys(appPaths).forEach(ap => {
-  dynamicUrlToDependencies[ap] = [
-    rootDir + '/frontend.html', rootDir + '/core.js',
-  ].concat(appPaths[ap].map(val => rootDir + val));
-});
-
 // Create fingerprinted versions of our dependencies.
-fingerprinted.forEach(fn => {
+staticFingerprinted.forEach(fn => {
   var parts = path.parse(fn);
-
   var hash = md5(rootDir + '/' + parts.name + parts.ext);
   var url = '/static/' + parts.name + '-' + hash + parts.ext;
   var fpath = rootDir + '/' + parts.name + parts.ext;
   dynamicUrlToDependencies[url] = [fpath];
 });
 
-swPrecache.write(path.join('build', 'service_worker.js'), {
+panelsFingerprinted.forEach(panel => {
+  var fpath = panelDir + '/ha-panel-' + panel + '.html';
+  var hash = md5(fpath);
+  var url = '/frontend/panels/' + panel + '-' + hash + '.html';
+  dynamicUrlToDependencies[url] = [fpath];
+});
+
+var options = {
+  navigateFallback: '/',
+  navigateFallbackWhitelist: [/^((?!(static|api)).)*$/],
   dynamicUrlToDependencies: dynamicUrlToDependencies,
   staticFileGlobs: [
-    rootDir + '/favicon-192x192.png',
+    rootDir + '/icons/favicon.ico',
+    rootDir + '/icons/favicon-192x192.png',
     rootDir + '/webcomponents-lite.min.js',
     rootDir + '/fonts/roboto/Roboto-Light.ttf',
     rootDir + '/fonts/roboto/Roboto-Medium.ttf',
@@ -67,4 +69,17 @@ swPrecache.write(path.join('build', 'service_worker.js'), {
   ],
   stripPrefix: '..',
   replacePrefix: 'static',
-}).catch(err => console.error(err));
+  verbose: true,
+};
+
+var genPromise = swPrecache.generate(options);
+
+if (true) {
+  genPromise = genPromise.then(
+    swString => uglifyJS.minify(swString, { fromString: true }).code);
+}
+
+genPromise.then(
+  swString =>
+    fs.writeFileSync(path.join('build', 'service_worker.js'), swString)
+).catch(err => console.error(err));
diff --git a/script/vulcanize.js b/script/vulcanize.js
index 8e770c5d44..9328f55691 100755
--- a/script/vulcanize.js
+++ b/script/vulcanize.js
@@ -4,6 +4,13 @@ var Vulcanize = require('vulcanize');
 var minify = require('html-minifier');
 var fs = require('fs');
 
+if (!fs.existsSync('build')) {
+  fs.mkdirSync('build');
+}
+if (!fs.existsSync('build/panels')) {
+  fs.mkdirSync('build/panels');
+}
+
 function minifyHTML(html) {
   return minify.minify(html, {
     customAttrAssign: [/\$=/],
@@ -25,6 +32,16 @@ const baseVulcanOptions = {
   stripComments: true,
 };
 
+const vulcan = new Vulcanize({
+  inlineScripts: true,
+  inlineCss: true,
+  implicitStrip: true,
+  stripComments: true,
+  stripExcludes: [
+    'bower_components/polymer/polymer.html',
+  ],
+});
+
 const toProcess = [
   {
     source: 'src/home-assistant.html',
@@ -35,41 +52,32 @@ const toProcess = [
       ],
     })),
   },
-  {
-    source: 'src/layouts/partial-map.html',
-    output: 'partial-map.html',
-    vulcan: new Vulcanize(Object.assign({}, baseVulcanOptions, {
-      stripExcludes: [
-        'bower_components/polymer/polymer.html',
-        'bower_components/paper-toolbar/paper-toolbar.html',
-        'bower_components/paper-icon-button/paper-icon-button.html',
-        'bower_components/iron-icon/iron-icon.html',
-        'bower_components/iron-image/iron-image.html',
-      ],
-    })),
-  },
-  {
-    source: 'src/entry-points/dev-tools.html',
-    output: 'dev-tools.html',
-    vulcan: new Vulcanize(Object.assign({}, baseVulcanOptions, {
-      stripExcludes: [
-        'bower_components/polymer/polymer.html',
-        'bower_components/paper-button/paper-button.html',
-        'bower_components/paper-input/paper-input.html',
-        'bower_components/paper-spinner/paper-spinner.html',
-        'src/layouts/partial-base.html',
-      ],
-    })),
-  },
 ];
 
-toProcess.forEach(info => {
-  info.vulcan.process(info.source, (err, inlinedHtml) => {
+fs.readdirSync('./panels').forEach(panel => {
+  toProcess.push({
+    source: `panels/${panel}/ha-panel-${panel}.html`,
+    output: `panels/ha-panel-${panel}.html`,
+  });
+});
+
+function process(entry) {
+  console.log('Processing', entry.source);
+  const vulc = entry.vulcan || vulcan;
+  vulc.process(entry.source, (err, inlinedHtml) => {
     if (err !== null) {
-      console.error(info.source, err);
+      console.error(entry.source, err);
       return;
     }
 
-    fs.writeFileSync('build/' + info.output, minifyHTML(inlinedHtml));
+    const out = 'build/' + entry.output;
+    console.log('Writing', out);
+    fs.writeFileSync(out, minifyHTML(inlinedHtml));
+
+    if (toProcess.length) {
+      process(toProcess.pop());
+    }
   });
-});
+}
+
+process(toProcess.pop());
diff --git a/src/components/display-time.html b/src/components/display-time.html
index 4c31e6bdfe..099ba2c9a5 100644
--- a/src/components/display-time.html
+++ b/src/components/display-time.html
@@ -1,5 +1,19 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
-<dom-module id="display-time">
-  <template>[[computeTime(dateObj)]]</template>
-</dom-module>
+<script>
+Polymer({
+  is: 'display-time',
+
+  properties: {
+    dateObj: {
+      type: Object,
+      observer: 'timeChanged',
+    },
+  },
+
+  timeChanged: function (dateObj) {
+    var root = Polymer.dom(this);
+    root.innerHTML = window.moment(dateObj).format('LT');
+  },
+});
+</script>
diff --git a/src/components/display-time.js b/src/components/display-time.js
deleted file mode 100644
index 03f229f85a..0000000000
--- a/src/components/display-time.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Polymer from '../polymer';
-
-import formatTime from '../util/format-time';
-
-export default new Polymer({
-  is: 'display-time',
-
-  properties: {
-    dateObj: {
-      type: Object,
-    },
-  },
-
-  computeTime(dateObj) {
-    return dateObj ? formatTime(dateObj) : '';
-  },
-});
diff --git a/src/components/domain-icon.html b/src/components/domain-icon.html
index ab8fc047db..aa88c1fb8c 100644
--- a/src/components/domain-icon.html
+++ b/src/components/domain-icon.html
@@ -7,3 +7,25 @@
     <iron-icon icon="[[computeIcon(domain, state)]]"></iron-icon>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'domain-icon',
+
+  properties: {
+    domain: {
+      type: String,
+      value: '',
+    },
+
+    state: {
+      type: String,
+      value: '',
+    },
+  },
+
+  computeIcon: function (domain, state) {
+    return window.domainIcon(domain, state);
+  },
+});
+</script>
diff --git a/src/components/domain-icon.js b/src/components/domain-icon.js
deleted file mode 100644
index d6ccb3e42e..0000000000
--- a/src/components/domain-icon.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Polymer from '../polymer';
-
-import domainIcon from '../util/domain-icon';
-
-export default new Polymer({
-  is: 'domain-icon',
-
-  properties: {
-    domain: {
-      type: String,
-      value: '',
-    },
-
-    state: {
-      type: String,
-      value: '',
-    },
-  },
-
-  computeIcon(domain, state) {
-    return domainIcon(domain, state);
-  },
-});
diff --git a/src/components/ha-sidebar.html b/src/components/ha-sidebar.html
index a6c61a2874..fe52ba1c46 100644
--- a/src/components/ha-sidebar.html
+++ b/src/components/ha-sidebar.html
@@ -104,28 +104,17 @@
         <div class="title">Home Assistant</div>
         <paper-icon-button icon='mdi:chevron-left' hidden$='[[narrow]]' on-tap='toggleMenu'></paper-icon-button>
       </paper-toolbar>
+
       <paper-menu attr-for-selected='data-panel' selected='[[selected]]' on-iron-select='menuSelect'>
         <paper-icon-item on-tap='menuClicked' data-panel='states'>
           <iron-icon item-icon icon='mdi:apps'></iron-icon>
           <span class='item-text'>States</span>
         </paper-icon-item>
 
-        <paper-icon-item on-tap='menuClicked' data-panel='map'>
-          <iron-icon item-icon icon='mdi:account-location'></iron-icon>
-          <span class='item-text'>Map</span>
-        </paper-icon-item>
-
-        <template is='dom-if' if='[[hasHistoryComponent]]'>
-          <paper-icon-item on-tap='menuClicked' data-panel='history'>
-            <iron-icon item-icon icon='mdi:poll-box'></iron-icon>
-            <span class='item-text'>History</span>
-          </paper-icon-item>
-        </template>
-
-        <template is='dom-if' if='[[hasLogbookComponent]]'>
-          <paper-icon-item on-tap='menuClicked' data-panel='logbook'>
-            <iron-icon item-icon icon='mdi:format-list-bulleted-type'></iron-icon>
-            <span class='item-text'>Logbook</span>
+        <template is='dom-repeat' items='[[computePanels(panels)]]'>
+          <paper-icon-item on-tap='menuClicked' data-panel$='[[item.url_name]]'>
+            <iron-icon item-icon icon='[[item.icon]]'></iron-icon>
+            <span class='item-text'>[[item.title]]</span>
           </paper-icon-item>
         </template>
 
@@ -149,19 +138,19 @@
 
         <div class='dev-tools layout horizontal justified'>
           <paper-icon-button
-            icon='mdi:remote' data-panel='devService'
+            icon='mdi:remote' data-panel='dev-service'
             on-tap='menuClicked'></paper-icon-button>
           <paper-icon-button
-            icon='mdi:code-tags' data-panel='devState'
+            icon='mdi:code-tags' data-panel='dev-state'
             on-tap='menuClicked'></paper-icon-button>
           <paper-icon-button
-            icon='mdi:radio-tower' data-panel='devEvent'
+            icon='mdi:radio-tower' data-panel='dev-event'
             on-tap='menuClicked'></paper-icon-button>
           <paper-icon-button
-            icon='mdi:file-xml' data-panel='devTemplate'
+            icon='mdi:file-xml' data-panel='dev-template'
             on-tap='menuClicked'></paper-icon-button>
           <paper-icon-button
-            icon='mdi:information-outline' data-panel='devInfo'
+            icon='mdi:information-outline' data-panel='dev-info'
             on-tap='menuClicked'></paper-icon-button>
         </div>
       </div>
@@ -195,17 +184,33 @@ Polymer({
 
     selected: {
       type: String,
-      bindNuclear: function (hass) { return hass.navigationGetters.activePane; },
+      bindNuclear: function (hass) {
+        return hass.navigationGetters.activePane;
+      },
     },
 
     hasHistoryComponent: {
       type: Boolean,
-      bindNuclear: function (hass) { return hass.configGetters.isComponentLoaded('history'); },
+      bindNuclear: function (hass) {
+        return hass.configGetters.isComponentLoaded('history');
+      },
     },
 
     hasLogbookComponent: {
       type: Boolean,
-      bindNuclear: function (hass) { return hass.configGetters.isComponentLoaded('logbook'); },
+      bindNuclear: function (hass) {
+        return hass.configGetters.isComponentLoaded('logbook');
+      },
+    },
+
+    panels: {
+      type: Array,
+      bindNuclear: function (hass) {
+        return [
+          hass.panelGetters.panels,
+          function (res) { return res.toJS(); },
+        ];
+      },
     },
   },
 
@@ -213,6 +218,44 @@ Polymer({
     this._boundUpdateStyles = this.updateStyles.bind(this);
   },
 
+  computePanels: function (panels) {
+    var sortValue = {
+      map: 1,
+      logbook: 2,
+      history: 3,
+    };
+    var result = [];
+
+    Object.keys(panels).forEach(function (key) {
+      if (panels[key].title) {
+        result.push(panels[key]);
+      }
+    });
+
+    result.sort(function (a, b) {
+      var aBuiltIn = (a.component_name in sortValue);
+      var bBuiltIn = (b.component_name in sortValue);
+
+      if (aBuiltIn && bBuiltIn) {
+        return sortValue[a.component_name] - sortValue[b.component_name];
+      } else if (aBuiltIn) {
+        return -1;
+      } else if (bBuiltIn) {
+        return 1;
+      }
+      // both not built in, sort by title
+      if (a.title > b.title) {
+        return 1;
+      }
+      if (a.title < b.title) {
+        return -1;
+      }
+      return 0;
+    });
+
+    return result;
+  },
+
   menuSelect: function () {
     this.debounce('updateStyles', this._boundUpdateStyles, 1);
   },
@@ -220,15 +263,17 @@ Polymer({
   menuClicked: function (ev) {
     var target = ev.target;
     var checks = 5;
+    var attr = target.getAttribute('data-panel');
 
     // find panel to select
-    while (checks && !target.getAttribute('data-panel')) {
+    while (checks && !attr) {
       target = target.parentElement;
+      attr = target.getAttribute('data-panel');
       checks--;
     }
 
     if (checks) {
-      this.selectPanel(target.getAttribute('data-panel'));
+      this.selectPanel(attr);
     }
   },
 
diff --git a/src/components/logbook-entry.js b/src/components/logbook-entry.js
deleted file mode 100644
index 839920febf..0000000000
--- a/src/components/logbook-entry.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Polymer from '../polymer';
-
-import './domain-icon';
-import './display-time';
-
-export default new Polymer({
-  is: 'logbook-entry',
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-  },
-
-  entityClicked(ev) {
-    ev.preventDefault();
-    this.hass.moreInfoActions.selectEntity(this.entryObj.entityId);
-  },
-});
diff --git a/src/dialogs/more-info-dialog.html b/src/dialogs/more-info-dialog.html
index fdcf087e79..20fb280760 100644
--- a/src/dialogs/more-info-dialog.html
+++ b/src/dialogs/more-info-dialog.html
@@ -15,12 +15,6 @@
       font-size: 14px;
     }
 
-    paper-dialog-scrollable {
-      --paper-dialog-scrollable: {
-        padding: 0;
-      };
-    }
-
     state-history-charts {
       position: relative;
       z-index: 1;
@@ -53,16 +47,14 @@
           state-obj="[[stateObj]]"
           hass='[[hass]]' in-dialog></state-card-content>
       </h2>
-      <div>
+      <paper-dialog-scrollable id='scrollable'>
         <template is='dom-if' if="[[showHistoryComponent]]">
           <state-history-charts state-history="[[stateHistory]]"
             is-loading-data="[[isLoadingHistoryData]]"></state-history-charts>
         </template>
-        <paper-dialog-scrollable id='scrollable'>
-          <more-info-content
-            state-obj="[[stateObj]]" hass='[[hass]]'></more-info-content>
-        </paper-dialog-scrollable>
-      </div>
+        <more-info-content
+          state-obj="[[stateObj]]" hass='[[hass]]'></more-info-content>
+      </paper-dialog-scrollable>
     </paper-dialog>
   </template>
 </dom-module>
diff --git a/src/dialogs/more-info-dialog.js b/src/dialogs/more-info-dialog.js
index 5800141fb8..8f20d4ba5c 100644
--- a/src/dialogs/more-info-dialog.js
+++ b/src/dialogs/more-info-dialog.js
@@ -12,6 +12,10 @@ export default new Polymer({
   behaviors: [window.hassBehavior],
 
   properties: {
+    hass: {
+      type: Object,
+    },
+
     stateObj: {
       type: Object,
       bindNuclear: hass => hass.moreInfoGetters.currentEntity,
diff --git a/src/entry-points/dev-tools.html b/src/entry-points/dev-tools.html
deleted file mode 100644
index 394df6cdfd..0000000000
--- a/src/entry-points/dev-tools.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<link rel='import' href='../layouts/partial-dev-call-service.html'>
-<link rel='import' href='../layouts/partial-dev-fire-event.html'>
-<link rel='import' href='../layouts/partial-dev-set-state.html'>
-<link rel='import' href='../layouts/partial-dev-template.html'>
-<link rel='import' href='../layouts/partial-dev-info.html'>
diff --git a/src/entry-points/home-assistant-main.html b/src/entry-points/home-assistant-main.html
index 876458ed0a..b5de397fce 100644
--- a/src/entry-points/home-assistant-main.html
+++ b/src/entry-points/home-assistant-main.html
@@ -1,9 +1,10 @@
 <link rel='import' href='../../bower_components/polymer/polymer.html'>
 <link rel='import' href='../../bower_components/paper-drawer-panel/paper-drawer-panel.html'>
 <link rel='import' href='../../bower_components/iron-media-query/iron-media-query.html'>
+<link rel='import' href='../../bower_components/iron-pages/iron-pages.html'>
+
 <link rel='import' href='../layouts/partial-cards.html'>
-<link rel='import' href='../layouts/partial-logbook.html'>
-<link rel='import' href='../layouts/partial-history.html'>
+<link rel='import' href='../layouts/partial-panel-resolver.html'>
 <link rel='import' href='../managers/notification-manager.html'>
 <link rel="import" href="../dialogs/more-info-dialog.html">
 <link rel="import" href="../dialogs/ha-voice-command-dialog.html">
@@ -24,34 +25,102 @@
       disable-edge-swipe='[[isSelectedMap]]'>
       <ha-sidebar drawer narrow='[[narrow]]' hass='[[hass]]'></ha-sidebar>
 
-      <template is='dom-if' if='[[isSelectedStates]]'>
-        <partial-cards main narrow='[[narrow]]' hass='[[hass]]' show-menu='[[showSidebar]]'></partial-cards>
-      </template>
-      <template is='dom-if' if='[[isSelectedLogbook]]'>
-        <partial-logbook main narrow='[[narrow]]' hass='[[hass]]' show-menu='[[showSidebar]]'></partial-logbook>
-      </template>
-      <template is='dom-if' if='[[isSelectedHistory]]'>
-        <partial-history main narrow='[[narrow]]' hass='[[hass]]' show-menu='[[showSidebar]]'></partial-history>
-      </template>
-      <template is='dom-if' if='[[isSelectedMap]]'>
-        <partial-map main narrow='[[narrow]]' hass='[[hass]]' show-menu='[[showSidebar]]'></partial-map>
-      </template>
-      <template is='dom-if' if='[[isSelectedDevService]]'>
-        <partial-dev-call-service main narrow='[[narrow]]' hass='[[hass]]' show-menu='[[showSidebar]]'></partial-dev-call-service>
-      </template>
-      <template is='dom-if' if='[[isSelectedDevEvent]]'>
-        <partial-dev-fire-event main narrow='[[narrow]]' hass='[[hass]]' show-menu='[[showSidebar]]'></partial-dev-fire-event>
-      </template>
-      <template is='dom-if' if='[[isSelectedDevState]]'>
-        <partial-dev-set-state main narrow='[[narrow]]' hass='[[hass]]' show-menu='[[showSidebar]]'></partial-dev-set-state>
-      </template>
-      <template is='dom-if' if='[[isSelectedDevTemplate]]'>
-        <partial-dev-template main narrow='[[narrow]]' hass='[[hass]]' show-menu='[[showSidebar]]'></partial-dev-template>
-      </template>
-      <template is='dom-if' if='[[isSelectedDevInfo]]'>
-        <partial-dev-info main narrow='[[narrow]]' hass='[[hass]]' show-menu='[[showSidebar]]'></partial-dev-info>
-      </template>
+      <iron-pages
+        main
+        attr-for-selected='id'
+        fallback-selection='panel-resolver'
+        selected='[[activePane]]'
+      >
+        <partial-cards
+          id='states'
+          narrow='[[narrow]]'
+          hass='[[hass]]'
+          show-menu='[[showSidebar]]'
+        ></partial-cards>
+
+        <partial-panel-resolver
+          id='panel-resolver'
+          narrow='[[narrow]]'
+          hass='[[hass]]'
+          show-menu='[[showSidebar]]'
+        ></partial-panel-resolver>
+
+      </iron-pages>
     </paper-drawer-panel>
 
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'home-assistant-main',
+
+  behaviors: [window.hassBehavior],
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    narrow: {
+      type: Boolean,
+      value: true,
+    },
+
+    activePane: {
+      type: String,
+      bindNuclear: function (hass) {
+        return hass.navigationGetters.activePane;
+      },
+      observer: 'activePaneChanged',
+    },
+
+    showSidebar: {
+      type: Boolean,
+      value: false,
+      bindNuclear: function (hass) {
+        return hass.navigationGetters.showSidebar;
+      },
+    },
+  },
+
+  listeners: {
+    'open-menu': 'openMenu',
+    'close-menu': 'closeMenu',
+  },
+
+  openMenu: function () {
+    if (this.narrow) {
+      this.$.drawer.openDrawer();
+    } else {
+      this.hass.navigationActions.showSidebar(true);
+    }
+  },
+
+  closeMenu: function () {
+    this.$.drawer.closeDrawer();
+    if (this.showSidebar) {
+      this.hass.navigationActions.showSidebar(false);
+    }
+  },
+
+  activePaneChanged: function () {
+    if (this.narrow) {
+      this.$.drawer.closeDrawer();
+    }
+  },
+
+  attached: function () {
+    window.removeInitMsg();
+    this.hass.startUrlSync();
+  },
+
+  computeForceNarrow: function (narrow, showSidebar) {
+    return narrow || !showSidebar;
+  },
+
+  detached: function () {
+    this.hass.stopUrlSync();
+  },
+});
+</script>
diff --git a/src/entry-points/home-assistant-main.js b/src/entry-points/home-assistant-main.js
index 080e5d3468..03042a16e4 100644
--- a/src/entry-points/home-assistant-main.js
+++ b/src/entry-points/home-assistant-main.js
@@ -1,126 +1,4 @@
-import Polymer from '../polymer';
-
 import '../layouts/partial-cards';
-import '../layouts/partial-logbook';
-import '../layouts/partial-history';
 import '../managers/notification-manager';
 import '../dialogs/more-info-dialog';
 import '../dialogs/ha-voice-command-dialog';
-
-Polymer({
-  is: 'home-assistant-main',
-
-  behaviors: [window.hassBehavior],
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    narrow: {
-      type: Boolean,
-      value: true,
-    },
-
-    activePane: {
-      type: String,
-      bindNuclear: hass => hass.navigationGetters.activePane,
-      observer: 'activePaneChanged',
-    },
-
-    isSelectedStates: {
-      type: Boolean,
-      bindNuclear: hass => hass.navigationGetters.isActivePane('states'),
-    },
-
-    isSelectedHistory: {
-      type: Boolean,
-      bindNuclear: hass => hass.navigationGetters.isActivePane('history'),
-    },
-
-    isSelectedMap: {
-      type: Boolean,
-      bindNuclear: hass => hass.navigationGetters.isActivePane('map'),
-    },
-
-    isSelectedLogbook: {
-      type: Boolean,
-      bindNuclear: hass => hass.navigationGetters.isActivePane('logbook'),
-    },
-
-    isSelectedDevEvent: {
-      type: Boolean,
-      bindNuclear: hass => hass.navigationGetters.isActivePane('devEvent'),
-    },
-
-    isSelectedDevState: {
-      type: Boolean,
-      bindNuclear: hass => hass.navigationGetters.isActivePane('devState'),
-    },
-
-    isSelectedDevTemplate: {
-      type: Boolean,
-      bindNuclear: hass => hass.navigationGetters.isActivePane('devTemplate'),
-    },
-
-    isSelectedDevService: {
-      type: Boolean,
-      bindNuclear: hass => hass.navigationGetters.isActivePane('devService'),
-    },
-
-    isSelectedDevInfo: {
-      type: Boolean,
-      bindNuclear: hass => hass.navigationGetters.isActivePane('devInfo'),
-    },
-
-    showSidebar: {
-      type: Boolean,
-      value: false,
-      bindNuclear: hass => hass.navigationGetters.showSidebar,
-    },
-  },
-
-  listeners: {
-    'open-menu': 'openMenu',
-    'close-menu': 'closeMenu',
-  },
-
-  openMenu() {
-    if (this.narrow) {
-      this.$.drawer.openDrawer();
-    } else {
-      this.hass.navigationActions.showSidebar(true);
-    }
-  },
-
-  closeMenu() {
-    this.$.drawer.closeDrawer();
-    if (this.showSidebar) {
-      this.hass.navigationActions.showSidebar(false);
-    }
-  },
-
-  activePaneChanged(newValue) {
-    if (this.narrow) {
-      this.$.drawer.closeDrawer();
-    }
-    const key = newValue.substr(0, 3) === 'dev' ? 'dev' : newValue;
-    if (window.deferredLoading[key]) {
-      this.importHref(window.deferredLoading[key]);
-      window.deferredLoading[key] = false;
-    }
-  },
-
-  attached() {
-    window.removeInitMsg();
-    this.hass.startUrlSync();
-  },
-
-  computeForceNarrow(narrow, showSidebar) {
-    return narrow || !showSidebar;
-  },
-
-  detached() {
-    this.hass.stopUrlSync();
-  },
-});
diff --git a/src/home-assistant.html b/src/home-assistant.html
index 2a9277b74d..440c9e9a0d 100644
--- a/src/home-assistant.html
+++ b/src/home-assistant.html
@@ -8,9 +8,10 @@
 <link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
 
 <link rel='import' href='./util/hass-behavior.html'>
-<link rel='import' href='./entry-points/login-form.html'>
+<link rel='import' href='./layouts/login-form.html'>
 <link rel='import' href='./entry-points/home-assistant-main.html'>
 <link rel='import' href='./resources/home-assistant-style.html'>
+<link rel='import' href='./resources/panel-imports.html'>
 
 <dom-module id='home-assistant'>
   <style>
@@ -102,5 +103,4 @@ Polymer({
 });
 </script>
 
-<script src='../build/_ui_compiled.js'></script>
-<!-- <script src='../build/ui_rollup.js'></script> -->
+<script src='../build-temp/ui.js'></script>
diff --git a/src/entry-points/login-form.html b/src/layouts/login-form.html
similarity index 98%
rename from src/entry-points/login-form.html
rename to src/layouts/login-form.html
index cbfc806728..290ab48e78 100644
--- a/src/entry-points/login-form.html
+++ b/src/layouts/login-form.html
@@ -43,7 +43,7 @@
 
   <template>
     <div class="layout vertical center center-center fit">
-      <img src="/static/favicon-192x192.png" height="192" />
+      <img src="/static/icons/favicon-192x192.png" height="192" />
       <a href="#" id="hideKeyboardOnFocus"></a>
       <div class='interact'>
         <div id='loginform' hidden$="[[showLoading]]">
diff --git a/src/layouts/partial-cards.html b/src/layouts/partial-cards.html
index 985648dd3f..0627350fc5 100644
--- a/src/layouts/partial-cards.html
+++ b/src/layouts/partial-cards.html
@@ -11,12 +11,17 @@
   <style>
     :host {
       display: block;
-      background-color: #E5E5E5;
       -ms-user-select: none;
       -webkit-user-select: none;
       -moz-user-select: none;
     }
 
+    paper-scroll-header-panel {
+      --paper-scroll-header-panel-container: {
+        background-color: #E5E5E5;
+      };
+    }
+
     paper-scroll-header-panel[has-views] paper-toolbar {
       height: 104px;
     }
diff --git a/src/layouts/partial-history.html b/src/layouts/partial-history.html
deleted file mode 100644
index 4a60a3e123..0000000000
--- a/src/layouts/partial-history.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.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="./partial-base.html">
-
-<link rel="import" href="../components/state-history-charts.html">
-
-<link rel="import" href="../resources/pikaday-js.html">
-
-<dom-module id="partial-history">
-  <style is="custom-style" include="iron-flex"></style>
-  <style>
-    .content {
-      background-color: white;
-    }
-
-    .content.wide {
-      padding: 8px;
-    }
-
-    paper-input {
-      max-width: 200px;
-    }
-
-    .narrow paper-input {
-      margin-left: 8px;
-    }
-  </style>
-  <template>
-    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
-      <span header-title>History</span>
-
-      <paper-icon-button icon="mdi:refresh" header-buttons
-        on-tap="handleRefreshClick"></paper-icon-button>
-
-      <div class$="[[computeContentClasses(narrow)]]">
-        <paper-input label='Showing entries for' id='datePicker'
-          value='[[selectedDate]]'></paper-input>
-
-        <state-history-charts state-history="[[stateHistory]]"
-          is-loading-data="[[isLoadingData]]"></state-history-charts>
-      </div>
-    </partial-base>
-  </template>
-</dom-module>
diff --git a/src/layouts/partial-history.js b/src/layouts/partial-history.js
deleted file mode 100644
index 5fc9e2cb6c..0000000000
--- a/src/layouts/partial-history.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import Polymer from '../polymer';
-
-import '../components/state-history-charts';
-
-export default new Polymer({
-  is: 'partial-history',
-
-  behaviors: [window.hassBehavior],
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    narrow: {
-      type: Boolean,
-    },
-
-    showMenu: {
-      type: Boolean,
-      value: false,
-    },
-
-    isDataLoaded: {
-      type: Boolean,
-      bindNuclear: hass => hass.entityHistoryGetters.hasDataForCurrentDate,
-      observer: 'isDataLoadedChanged',
-    },
-
-    stateHistory: {
-      type: Object,
-      bindNuclear: hass => hass.entityHistoryGetters.entityHistoryForCurrentDate,
-    },
-
-    isLoadingData: {
-      type: Boolean,
-      bindNuclear: hass => hass.entityHistoryGetters.isLoadingEntityHistory,
-    },
-
-    selectedDate: {
-      type: String,
-      value: null,
-      bindNuclear: hass => hass.entityHistoryGetters.currentDate,
-    },
-  },
-
-  isDataLoadedChanged(newVal) {
-    if (!newVal) {
-      this.async(() => this.hass.entityHistoryActions.fetchSelectedDate(), 1);
-    }
-  },
-
-  handleRefreshClick() {
-    this.hass.entityHistoryActions.fetchSelectedDate();
-  },
-
-  datepickerFocus() {
-    this.datePicker.adjustPosition();
-  },
-
-  attached() {
-    this.datePicker = new window.Pikaday({
-      field: this.$.datePicker.inputElement,
-      onSelect: this.hass.entityHistoryActions.changeCurrentDate,
-    });
-  },
-
-  detached() {
-    this.datePicker.destroy();
-  },
-
-  computeContentClasses(narrow) {
-    return `flex content ${narrow ? 'narrow' : 'wide'}`;
-  },
-});
diff --git a/src/layouts/partial-logbook.html b/src/layouts/partial-logbook.html
deleted file mode 100644
index 828c2f0734..0000000000
--- a/src/layouts/partial-logbook.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.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="./partial-base.html">
-
-<link rel="import" href="../components/ha-logbook.html">
-<link rel="import" href="../components/loading-box.html">
-
-<link rel="import" href="../resources/pikaday-js.html">
-
-<dom-module id="partial-logbook">
-  <style>
-  .selected-date-container {
-    padding: 0 16px;
-  }
-
-  paper-input {
-    max-width: 200px;
-  }
-  </style>
-  <template>
-    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
-      <span header-title>Logbook</span>
-
-      <paper-icon-button icon="mdi:refresh" header-buttons
-        on-tap="handleRefresh"></paper-icon-button>
-
-      <div>
-        <div class='selected-date-container'>
-          <paper-input label='Showing entries for' id='datePicker'
-            value='[[selectedDate]]' on-focus='datepickerFocus'></paper-input>
-
-          <loading-box hidden$='[[!isLoading]]'>Loading logbook entries</loading-box>
-        </div>
-        <ha-logbook hass='[[hass]]' entries="[[entries]]" hidden$='[[isLoading]]'></ha-logbook>
-      </div>
-    </partial-base>
-  </template>
-</dom-module>
diff --git a/src/layouts/partial-logbook.js b/src/layouts/partial-logbook.js
deleted file mode 100644
index cffc0ab497..0000000000
--- a/src/layouts/partial-logbook.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import Polymer from '../polymer';
-
-import '../components/logbook-entry';
-
-export default new Polymer({
-  is: 'partial-logbook',
-
-  behaviors: [window.hassBehavior],
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    narrow: {
-      type: Boolean,
-      value: false,
-    },
-
-    showMenu: {
-      type: Boolean,
-      value: false,
-    },
-
-    selectedDate: {
-      type: String,
-      bindNuclear: hass => hass.logbookGetters.currentDate,
-    },
-
-    isLoading: {
-      type: Boolean,
-      bindNuclear: hass => hass.logbookGetters.isLoadingEntries,
-    },
-
-    isStale: {
-      type: Boolean,
-      bindNuclear: hass => hass.logbookGetters.isCurrentStale,
-      observer: 'isStaleChanged',
-    },
-
-    entries: {
-      type: Array,
-      bindNuclear: hass => [
-        hass.logbookGetters.currentEntries,
-        (entries) => entries.reverse().toArray(),
-      ],
-    },
-
-    datePicker: {
-      type: Object,
-    },
-  },
-
-  isStaleChanged(newVal) {
-    if (newVal) {
-      this.async(() => this.hass.logbookActions.fetchDate(this.selectedDate), 1);
-    }
-  },
-
-  handleRefresh() {
-    this.hass.logbookActions.fetchDate(this.selectedDate);
-  },
-
-  datepickerFocus() {
-    this.datePicker.adjustPosition();
-  },
-
-  attached() {
-    this.datePicker = new window.Pikaday({
-      field: this.$.datePicker.inputElement,
-      onSelect: this.hass.logbookActions.changeCurrentDate,
-    });
-  },
-
-  detached() {
-    this.datePicker.destroy();
-  },
-});
diff --git a/src/layouts/partial-panel-resolver.html b/src/layouts/partial-panel-resolver.html
new file mode 100644
index 0000000000..a0bc993aaf
--- /dev/null
+++ b/src/layouts/partial-panel-resolver.html
@@ -0,0 +1,68 @@
+<script>
+Polymer({
+  is: 'partial-panel-resolver',
+
+  behaviors: [window.hassBehavior],
+
+  properties: {
+    hass: {
+      type: Object,
+      observer: 'updateAttributes',
+    },
+
+    narrow: {
+      type: Boolean,
+      value: false,
+      observer: 'updateAttributes',
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+      observer: 'updateAttributes',
+    },
+
+    panel: {
+      type: Object,
+      bindNuclear: function (hass) {
+        return hass.panelGetters.activePanel;
+      },
+      observer: 'panelChanged',
+    },
+  },
+
+  panelChanged: function (panel) {
+    if (!panel) {
+      // while (rootEl.lastChild) {
+      //   rootEl.removeChild(rootEl.lastChild);
+      // }
+      return;
+    }
+
+    const rootEl = Polymer.dom(this);
+    const tag = 'ha-panel-' + panel.get('component_name');
+
+    this.importHref(panel.get('url'));
+
+    while (rootEl.lastChild) {
+      rootEl.removeChild(rootEl.lastChild);
+    }
+
+    const customEl = document.createElement(tag);
+
+    customEl.hass = this.hass;
+    customEl.narrow = this.narrow;
+    customEl.showMenu = this.showMenu;
+    customEl.panel = panel.toJS();
+    rootEl.appendChild(customEl);
+  },
+
+  updateAttributes: function () {
+    const customEl = Polymer.dom(this).lastChild;
+    if (!customEl) return;
+    customEl.hass = this.hass;
+    customEl.narrow = this.narrow;
+    customEl.showMenu = this.showMenu;
+  },
+});
+</script>
diff --git a/src/resources/panel-imports.html b/src/resources/panel-imports.html
new file mode 100644
index 0000000000..3891df1a96
--- /dev/null
+++ b/src/resources/panel-imports.html
@@ -0,0 +1,9 @@
+<!--
+  Components that are used by panels.
+
+  Temporary while we figure imports out.
+-->
+<link rel="import" href="../layouts/partial-base.html">
+<link rel="import" href="../components/display-time.html">
+<link rel="import" href="../components/domain-icon.html">
+<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
diff --git a/src/util/domain-icon.js b/src/util/domain-icon.js
index 8c904f6666..947bf15d81 100644
--- a/src/util/domain-icon.js
+++ b/src/util/domain-icon.js
@@ -1,6 +1,6 @@
 import defaultIcon from './default-icon';
 
-export default function domainIcon(domain, state) {
+window.domainIcon = function (domain, state) {
   switch (domain) {
     case 'alarm_control_panel':
       return state && state === 'disarmed' ? 'mdi:bell-outline' : 'mdi:bell';
@@ -98,4 +98,6 @@ export default function domainIcon(domain, state) {
       }
       return defaultIcon;
   }
-}
+};
+
+export default window.domainIcon;