From 666b25cf742e1860d5996f85390d6673cc2f4ecf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20Dupr=C3=A9?= <hello@jonathandupre.com>
Date: Sun, 31 Dec 2017 17:09:51 -0500
Subject: [PATCH 1/4] add playlist toolbar

---
 src/components/player.component.js         |  2 +-
 src/components/playlist-group.component.js |  2 +-
 src/components/upload-modal.component.js   |  8 +++--
 src/elements/navbar.el.js                  |  2 +-
 src/elements/player.el.js                  |  2 +-
 src/elements/toolbar.el.js                 | 36 +++++++++++++++++++---
 src/style/_helpers.sss                     |  6 ++++
 src/style/_layout.sss                      |  2 +-
 8 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/components/player.component.js b/src/components/player.component.js
index f30cc4c..4c9f4c2 100644
--- a/src/components/player.component.js
+++ b/src/components/player.component.js
@@ -23,7 +23,7 @@ class PlayerComponent extends Component {
     if (!this.track) return html`<nav></nav>`
     var { metadata } = this.track
     return html`
-      <nav class="z-1 flex items-center w-100 h3 justify-between fixed bottom-0 bg-black ph3">
+      <nav class="bw1 ba b--pure-black z-1 flex items-center w-100 h3 justify-between fixed bottom-0 bg-black ph3">
 
         <div class="flex items-center w-30 ">
 
diff --git a/src/components/playlist-group.component.js b/src/components/playlist-group.component.js
index d52b7f7..4d1131f 100644
--- a/src/components/playlist-group.component.js
+++ b/src/components/playlist-group.component.js
@@ -64,7 +64,7 @@ PlaylistGroup.prototype.createElement = function (state, emit) {
 
   function toggleIcon (toggled) {
     return html`
-      <button class="w1 h1 mr2 bg-none" onclick=${e => this.toggleOpen()}>
+      <button class="w1 h1 mr2 bg-none scale" onclick=${e => this.toggleOpen()}>
         ${toggled
           ? html`<svg class="ic-white w1 h1" viewBox="0 0 8 8">
                   <use xlink:href="icons/openiconic.svg#si-open-chevron-bottom"></use>
diff --git a/src/components/upload-modal.component.js b/src/components/upload-modal.component.js
index 2efa8f7..ac5676e 100644
--- a/src/components/upload-modal.component.js
+++ b/src/components/upload-modal.component.js
@@ -73,9 +73,13 @@ class UploadModal extends Component {
 
         this.rerender()
 
-        var uploaded = await fileUpload.result
+        try {
+          var uploaded = await fileUpload.result
 
-        this.emit('track:create', uploaded)
+          this.emit('track:create', uploaded)
+        } catch (err) {
+          console.error(err)
+        }
       })
     }
   }
diff --git a/src/elements/navbar.el.js b/src/elements/navbar.el.js
index 947d441..9cb2bab 100644
--- a/src/elements/navbar.el.js
+++ b/src/elements/navbar.el.js
@@ -4,7 +4,7 @@ var UploadModal = require('../components/upload-modal.component')
 
 module.exports = function navbar (state, emit) {
   return html`
-    <nav id="navbar" class="fixed z-3 top-0 left-0 flex ph3 w-100 justify-between content-around bg-black">
+    <nav id="navbar" class="shadow1 bw1 bb b--pure-black fixed z-3 top-0 left-0 flex ph3 w-100 justify-between content-around bg-black">
 
       <div class="flex1 flex justify-start items-center">
 
diff --git a/src/elements/player.el.js b/src/elements/player.el.js
index 4fde6d9..9c22787 100644
--- a/src/elements/player.el.js
+++ b/src/elements/player.el.js
@@ -7,7 +7,7 @@ module.exports = function playerElement (state, emit) {
   var { metadata } = player.track
 
   return html`
-    <nav id="player" class="z-1 flex items-center w-100 h3 justify-between fixed bottom-0 bg-black ph3">
+    <nav id="player" class="bt bw1 b--pure-black z-1 flex items-center w-100 h3 justify-between fixed bottom-0 bg-black ph3">
 
       <div class="flex items-center w-30 ">
 
diff --git a/src/elements/toolbar.el.js b/src/elements/toolbar.el.js
index fc7e998..15c756b 100644
--- a/src/elements/toolbar.el.js
+++ b/src/elements/toolbar.el.js
@@ -2,18 +2,46 @@ var html = require('choo/html')
 
 module.exports = function toolbar (state, emit) {
   return html`
-    <nav id="toolbar" class="h3 flex justify-between ph3 bg-near-black">
-      <div>
-
+    <nav id="toolbar" class="h3 flex justify-between ph4 bg-near-black items-center">
+      <div class="flex flex-row items-center">
+        <span class="fw6 f6 mr2">Playlist:</span>
+        <input 
+          type="text"
+          placeholder="Playlist name"
+          class="fw6 bg-black white pv2 ph3 f6 br2 mh2"
+          value="My First Radio Show" />
+        <button class="relative ph3 pv1 bg-none ba bw1 b--white white fw6 f6 flex flex-row  mh2">
+          3 Filters
+          ${caret()}
+          <div class="shadow1 bw1 ba b--black mt4 z-2 absolute top-0 left-0 pa1 bg-near-black flex items-start flex-column" style="width: 25rem">
+            <div class="mb2 flex flex-column">
+              <div class="flex flex-row mv2">
+                <button class="scale bg-none white fw6">×</button>
+                <div class="flex flex-row">
+                  <div class="h2 fw6 bg-black white pv1 ph3 f7 br2 mh2 flex flex-row justify-start items-center dim">Genre${caret()}</div>
+                  <div class="h2 fw6 bg-black white pv1 ph3 f7 br2 mh2 flex flex-row justify-start items-center dim">contains${caret()}</div>
+                  <input class="h2 fw6 bg-black white pv1 ph3 f7 br2 mh2 w-100" type="text" value="future bass">
+                </div>
+              </div>
+            </div>
+            <button class="bg-none blue fw6 mv2 pointer">+ Add Filter</button>
+          </div>
+        </button>
       </div>
 
       <div>
       </div>
 
       <div class="flex items-center">
+        <p class="fw6 f6">1 tracks</p>
       </div>
     </nav>
   `
 }
 
-      
\ No newline at end of file
+function caret () {
+  return html`
+    <svg class="ic-white w1 h1 ml2" style="width: 0.5rem">
+      <use xlink:href="icons/openiconic.svg#si-open-caret-bottom" />
+    </svg>`
+}
diff --git a/src/style/_helpers.sss b/src/style/_helpers.sss
index d01a79b..931dc31 100644
--- a/src/style/_helpers.sss
+++ b/src/style/_helpers.sss
@@ -27,6 +27,10 @@
 
 .b--blue
   border-color: $blue
+.b--black
+  border-color: $black
+.b--pure-black
+  border-color: color($pure-black a(0.3))
 
 .hidden
   display: none
@@ -105,4 +109,6 @@
   transform: scale3d(0.9, 0.9, 1)   
   transition: 0.2s 
 
+.shadow1
+  box-shadow: 0.5rem 0.5rem color($pure-black a(0.5))
 
diff --git a/src/style/_layout.sss b/src/style/_layout.sss
index ee32333..eedde86 100644
--- a/src/style/_layout.sss
+++ b/src/style/_layout.sss
@@ -5,7 +5,7 @@ $left-panel-width: 16rem
   background-color: $black
 
 #page.left-panel-visible
-  #main-view
+  #main-view, #toolbar
     margin-left: $left-panel-width
 
 #player 

From 308992fc76d32ddfe476f15e676ca7a0bbf4dcc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20Dupr=C3=A9?= <hello@jonathandupre.com>
Date: Mon, 1 Jan 2018 19:27:38 -0500
Subject: [PATCH 2/4] playlist toolbar + dropdown component

---
 src/components/dropdown.component.js          | 107 +++++++++++
 .../playlist-filter-popover.component.js      | 168 ++++++++++++++++++
 src/components/playlist-group.component.js    |   6 +-
 src/elements/caret.el.js                      |   8 +
 src/elements/left-panel.el.js                 |  42 ++---
 src/elements/navbar.el.js                     |   2 +-
 src/elements/player.el.js                     |   2 +-
 src/elements/toolbar.el.js                    |  49 ++---
 src/lib/nanoclass.js                          |   9 +
 src/style/_components.sss                     |  22 +++
 src/style/_defaults.sss                       |   1 +
 src/style/_helpers.sss                        |  20 ++-
 src/style/_layout.sss                         |   3 +-
 src/style/_variables.sss                      |   1 +
 14 files changed, 380 insertions(+), 60 deletions(-)
 create mode 100644 src/components/dropdown.component.js
 create mode 100644 src/components/playlist-filter-popover.component.js
 create mode 100644 src/elements/caret.el.js
 create mode 100644 src/lib/nanoclass.js

diff --git a/src/components/dropdown.component.js b/src/components/dropdown.component.js
new file mode 100644
index 0000000..7f61726
--- /dev/null
+++ b/src/components/dropdown.component.js
@@ -0,0 +1,107 @@
+var html = require('choo/html')
+var Component = require('Nanocomponent')
+var caret = require('../elements/caret.el')
+var nanobus = require('nanobus')
+
+function Dropdown () {
+  if (!(this instanceof Dropdown)) return new Dropdown()
+  Component.call(this)
+  this.bus = nanobus()
+  this.on = this.bus.on.bind(this.bus)
+  this.visible = false
+  this.selected = null
+  this.dropdownEl = null
+
+  this.open = this.open.bind(this)
+  this.close = this.close.bind(this)
+  this._handleClick = this._handleClick.bind(this)
+}
+
+Dropdown.prototype = Object.create(Component.prototype)
+
+Dropdown.prototype.createElement = function dropdownElement (state, emit) {
+  this.emit = emit
+
+  var { options, selected } = state
+
+  this.options = options
+  this.selected = this.selected || selected
+
+  if (!this.dropdownEl) {
+    this.dropdownEl = dropdown.call(this, this.options)
+  }
+
+  return html`
+    <div
+      onclick=${e => this.visible ? this.close(e) : this.open(e.currentTarget)}
+      class="us-none hover-b--black h2 fw6 bg-black white pv1 ph3 f7 br2 mh2 flex flex-row justify-start items-center">
+      <span>${this.selected.label}</span> 
+      ${caret()}
+      ${this.dropdownEl}
+    </div>`
+}
+
+function dropdown (options) {
+  return html`
+    <div
+      id="dropdown"
+      class="dropdown mt4 z-2 fixed top-0 left-0 pa1 black flex items-start flex-column">
+      <div class="flex flex-column w-100">
+        ${options.map(option => html`
+          <div class="dropdown-item" onclick=${e => this.selectItem(option)}>
+            ${option.label}
+          </div>
+        `)}
+      </div>
+    </div>
+  `
+}
+
+Dropdown.prototype.selectItem = function (option) {
+  this.selected = option
+  this.rerender()
+}
+
+Dropdown.prototype.open = function (selectEl) {
+  var rect = selectEl.getBoundingClientRect()
+
+  this.width = selectEl.offsetWidth
+  this.left = rect.left
+  this.top = rect.top
+  this.visible = true
+  this.dropdownEl.style = `left: ${this.left}px; top: ${this.top}px; width: ${this.width}px;`
+
+  if (this.dropdownEl.classList.contains('hidden')) {
+    this.dropdownEl.classList.remove('hidden')
+  }
+
+  document.body.addEventListener('mousedown', this._handleClick)
+
+  this.rerender()
+}
+
+Dropdown.prototype.close = function (e) {
+  e.preventDefault()
+
+  this.visible = false
+
+  if (!this.dropdownEl.classList.contains('hidden')) {
+    this.dropdownEl.classList.add('hidden')
+  }
+
+  document.body.removeEventListener('mousedown', this._handleClick)
+  this.rerender()
+}
+
+Dropdown.prototype._handleClick = function (e) {
+  if (!this.dropdownEl.contains(e.target)) {
+    this.close(e)
+    document.body.removeEventListener('click', this.handleClick)
+  }
+}
+
+Dropdown.prototype.update = function () {
+  return false
+}
+
+module.exports = Dropdown
diff --git a/src/components/playlist-filter-popover.component.js b/src/components/playlist-filter-popover.component.js
new file mode 100644
index 0000000..d3646bf
--- /dev/null
+++ b/src/components/playlist-filter-popover.component.js
@@ -0,0 +1,168 @@
+var html = require('choo/html')
+var assert = require('assert')
+var Component = require('Nanocomponent')
+var Dropdown = require('./dropdown.component')
+var nanoclass = require('../lib/nanoclass')
+
+var fieldTypes = [{
+  name: 'text',
+  operators: [ 'is empty', 'is not empty' ]
+}]
+
+var fields = [{
+  label: 'Genre',
+  name: 'genre',
+  type: 'text'
+}, {
+  label: 'Artist',
+  name: 'artist',
+  type: 'text'
+}, {
+  label: 'Title',
+  name: 'title',
+  type: 'text'
+}, {
+  label: 'BPM',
+  name: 'bpm',
+  type: 'number'
+}]
+
+var operators = [{
+  label: 'contains',
+  name: 'contains'
+}, {
+  label: 'does not contain',
+  name: 'doesNotContain'
+}, {
+  label: 'is empty',
+  name: 'isEmpty'
+}, {
+  label: 'is not empty',
+  name: 'isNotEmpty'
+}]
+
+function PlaylistFiltersPopover () {
+  if (!(this instanceof PlaylistFiltersPopover)) return new PlaylistFiltersPopover()
+  Component.call(this)
+
+  this.visible = false
+  this.left = 0
+  this.top = 0
+  this.filters = [PlaylistFilterItem()]
+  this.toggleVisibility = this.toggleVisibility.bind(this)
+  this.addFilter = this.addFilter.bind(this)
+  this.removeFilter = this.removeFilter.bind(this)
+  this.close = this.close.bind(this)
+}
+
+PlaylistFiltersPopover.prototype = Object.create(Component.prototype)
+
+PlaylistFiltersPopover.prototype.createElement = function (state, emit) {
+  this.emit = emit
+
+  var nc = nanoclass({
+    'hidden': !this.visible
+  })
+
+  var style = `left: ${this.left}px; top: ${this.top}px;`
+
+  return html`
+    <div style=${style} class="${nc} shadow1 bw1 ba b--black mt4 z-2 fixed top-0 left-0 pa1 bg-near-black flex items-start flex-column" 
+      style="min-width: 25rem">
+      <div class="mb2 flex flex-column">
+        ${this.filters.map(playlistFilterItem => playlistFilterItem.render())}
+      </div>
+      <button class="hover-b--blue bg-none blue f6 fw6 mv2 mh1 ph3 pv2"
+        onclick=${this.addFilter}>
+        + Add Filter
+      </button>
+    </div>`
+}
+
+PlaylistFiltersPopover.prototype.update = function () {
+  return false
+}
+
+PlaylistFiltersPopover.prototype.toggleVisibility = function (e) {
+  assert.ok(e && e instanceof window.Event, 'toggleVisibility expects an Event as an argument')
+  this.visible = !this.visible
+
+  if (this.visible) {
+    var rect = e.currentTarget.getBoundingClientRect()
+
+    this.left = rect.left
+    this.top = rect.top
+  }
+
+  this.rerender()
+}
+
+PlaylistFiltersPopover.prototype.addFilter = function () {
+  var playlistFilter = PlaylistFilterItem()
+
+  playlistFilter.remove = () => this.removeFilter(playlistFilter)
+
+  this.filters.push(playlistFilter)
+  this.rerender()
+
+  // REPLACE emit render with an emit that changes the current playlist, which
+  // will then emit a render
+  this.emit('render')
+}
+
+PlaylistFiltersPopover.prototype.removeFilter = function (filter) {
+  var idx = this.filters.findIndex(f => f === filter)
+  this.filters.splice(idx, 1)
+  this.rerender()
+
+  // REPLACE emit render with an emit that changes the current playlist, which
+  // will then emit a render
+  this.emit('render')
+}
+
+PlaylistFiltersPopover.prototype.close = function () {
+  this.visible = false
+  this.rerender()
+}
+
+module.exports = PlaylistFiltersPopover
+
+function PlaylistFilterItem () {
+  if (!(this instanceof PlaylistFilterItem)) return new PlaylistFilterItem()
+  Component.call(this)
+
+  this.remove = function () {}
+
+  this.field = {
+    label: 'Genre',
+    name: 'genre',
+    type: 'text'
+  }
+  this.operator = 'contains'
+  this.value = ''
+}
+
+PlaylistFilterItem.prototype = Object.create(Component.prototype)
+
+PlaylistFilterItem.prototype.createElement = function playlistFilterItemElement () {
+  this.fieldEl = Dropdown()
+  this.operatorEl = Dropdown()
+  this.valueEl = Dropdown()
+
+  return html`
+    <div class="flex flex-row mv2">
+      <button class="scale bg-none white fw6" onclick=${e => this.remove()}>
+        ×
+      </button>
+      <div class="flex flex-row">
+        ${this.fieldEl.render({ options: fields, selected: this.field })}
+        ${this.operatorEl.render({ options: operators, selected: this.operator })}
+        <input class="h2 fw6 bg-black white pv1 ph3 f7 br2 mh2" type="text" 
+          value=${this.value}>
+      </div>
+    </div>`
+}
+
+PlaylistFilterItem.prototype.update = function () {
+  return false
+}
diff --git a/src/components/playlist-group.component.js b/src/components/playlist-group.component.js
index 4d1131f..7c8f8a7 100644
--- a/src/components/playlist-group.component.js
+++ b/src/components/playlist-group.component.js
@@ -28,6 +28,8 @@ PlaylistGroup.prototype.createElement = function (state, emit) {
 
   return html`
     <div class="playlist-group w-100">
+
+
       ${html`
           <div tabindex="0" class="${!this.parent ? 'hidden' : ''} playlist-group-item flex flex-row ph1 pv2 w-100">
             ${paddingBlocks(this.parent)}
@@ -39,7 +41,7 @@ PlaylistGroup.prototype.createElement = function (state, emit) {
         ${this.subgroups.map((group, i) => group.render(this._subgroups[i], emit))}
         ${this.playlists.map(p => html`
           <div tabindex=0 class="playlist-group-item playlist-item flex flex-row pa1 w-100">
-            ${paddingBlocks(this.parent, 1)}
+            ${paddingBlocks(this.parent, this.parent ? 1 : 0)}
             ${playlistIcon()}
             ${p.name}
           </div>
@@ -78,7 +80,7 @@ PlaylistGroup.prototype.createElement = function (state, emit) {
 
   function playlistIcon () {
     return html`
-      <div class="playlist-group-icon w1 h1 mr2">
+      <div class="playlist-group-icon w1 h1 mh2">
         <svg class="ic-white w1 h1" viewBox="0 0 8 8">
           <use xlink:href="icons/openiconic.svg#si-open-excerpt"></use>
         </svg>
diff --git a/src/elements/caret.el.js b/src/elements/caret.el.js
new file mode 100644
index 0000000..76c39d4
--- /dev/null
+++ b/src/elements/caret.el.js
@@ -0,0 +1,8 @@
+var html = require('choo/html')
+
+module.exports = function caret () {
+  return html`
+    <svg class="ic-white w1 h1 ml2" style="width: 0.5rem">
+      <use xlink:href="icons/openiconic.svg#si-open-caret-bottom" />
+    </svg>`
+}
diff --git a/src/elements/left-panel.el.js b/src/elements/left-panel.el.js
index 14d3d8d..672cc1c 100644
--- a/src/elements/left-panel.el.js
+++ b/src/elements/left-panel.el.js
@@ -1,26 +1,19 @@
 var html = require('choo/html')
 var PlaylistGroup = require('../components/playlist-group.component')
 
-var playlistGroup = PlaylistGroup()
+var defaultPlaylists = PlaylistGroup()
+var userPlaylists = PlaylistGroup()
+
+var defaultPlaylistsGroups = {
+  playlists: [
+    { name: 'All Tracks' }
+  ],
+  subgroups: []
+}
+
 var groups = {
-  name: null,
-  subgroups: [{
-    name: 'Radio Shows',
-    subgroups: [{
-      name: 'Headphone Groove',
-      subgroups: [],
-      playlists: [{ name: 'January 2017' }, { name: 'February 2017' }]
-    }, {
-      name: 'Chill',
-      subgroups: []
-    }]
-  }, {
-    name: 'Gigs',
-    subgroups: []
-  }, {
-    name: 'Other',
-    subgroups: []
-  }]
+  subgroups: [],
+  playlists: [{ name: 'My First Radio Show' }]
 }
 
 module.exports = function leftPanel (state, emit) {
@@ -35,7 +28,16 @@ module.exports = function leftPanel (state, emit) {
 
       <div class="flex flex-column mv4">
 
-        ${playlistGroup.render(groups, emit)}
+        <button tabindex="0" class="hover-b--blue flex flex-row ph1 pv2 w-100 bg-none">
+
+          <div class="w-100 tl mh1 blue">New Playlist</div>
+
+          <span class="blue mh2">+</span>
+
+        </button>
+
+        ${defaultPlaylists.render(defaultPlaylistsGroups, emit)}
+        ${userPlaylists.render(groups, emit)}
         <div class="block" style="height: 500px;">
 
       </div>
diff --git a/src/elements/navbar.el.js b/src/elements/navbar.el.js
index 9cb2bab..512f164 100644
--- a/src/elements/navbar.el.js
+++ b/src/elements/navbar.el.js
@@ -4,7 +4,7 @@ var UploadModal = require('../components/upload-modal.component')
 
 module.exports = function navbar (state, emit) {
   return html`
-    <nav id="navbar" class="shadow1 bw1 bb b--pure-black fixed z-3 top-0 left-0 flex ph3 w-100 justify-between content-around bg-black">
+    <nav id="navbar" class="bw1 bb b--pure-black fixed z-3 top-0 left-0 flex ph3 w-100 justify-between content-around bg-black">
 
       <div class="flex1 flex justify-start items-center">
 
diff --git a/src/elements/player.el.js b/src/elements/player.el.js
index 9c22787..3fa151b 100644
--- a/src/elements/player.el.js
+++ b/src/elements/player.el.js
@@ -7,7 +7,7 @@ module.exports = function playerElement (state, emit) {
   var { metadata } = player.track
 
   return html`
-    <nav id="player" class="bt bw1 b--pure-black z-1 flex items-center w-100 h3 justify-between fixed bottom-0 bg-black ph3">
+    <nav id="player" class="z-1 flex items-center w-100 h3 justify-between fixed bottom-0 bg-near-black ph3">
 
       <div class="flex items-center w-30 ">
 
diff --git a/src/elements/toolbar.el.js b/src/elements/toolbar.el.js
index 15c756b..8635991 100644
--- a/src/elements/toolbar.el.js
+++ b/src/elements/toolbar.el.js
@@ -1,32 +1,26 @@
 var html = require('choo/html')
+var PlaylistFiltersPopover = require('../components/playlist-filter-popover.component')
+var caret = require('./caret.el')
+var popover = PlaylistFiltersPopover()
+
+module.exports = function toolbarEl (state, emit) {
+  var buttonEl = html`
+    <button onclick=${e => popover.toggleVisibility(e)} 
+      class="hover-b--blue ph3 pv2 bg-none ba bw1 b--white white fw6 f6 flex flex-row  mh2">
+      ${popover.filters.length} Filters
+      ${caret()}
+    </button>
+  `
 
-module.exports = function toolbar (state, emit) {
   return html`
     <nav id="toolbar" class="h3 flex justify-between ph4 bg-near-black items-center">
       <div class="flex flex-row items-center">
-        <span class="fw6 f6 mr2">Playlist:</span>
-        <input 
-          type="text"
-          placeholder="Playlist name"
-          class="fw6 bg-black white pv2 ph3 f6 br2 mh2"
-          value="My First Radio Show" />
-        <button class="relative ph3 pv1 bg-none ba bw1 b--white white fw6 f6 flex flex-row  mh2">
-          3 Filters
-          ${caret()}
-          <div class="shadow1 bw1 ba b--black mt4 z-2 absolute top-0 left-0 pa1 bg-near-black flex items-start flex-column" style="width: 25rem">
-            <div class="mb2 flex flex-column">
-              <div class="flex flex-row mv2">
-                <button class="scale bg-none white fw6">×</button>
-                <div class="flex flex-row">
-                  <div class="h2 fw6 bg-black white pv1 ph3 f7 br2 mh2 flex flex-row justify-start items-center dim">Genre${caret()}</div>
-                  <div class="h2 fw6 bg-black white pv1 ph3 f7 br2 mh2 flex flex-row justify-start items-center dim">contains${caret()}</div>
-                  <input class="h2 fw6 bg-black white pv1 ph3 f7 br2 mh2 w-100" type="text" value="future bass">
-                </div>
-              </div>
-            </div>
-            <button class="bg-none blue fw6 mv2 pointer">+ Add Filter</button>
-          </div>
-        </button>
+        <span class="fw6 f6">Playlist:</span>
+        <p class="fw4 white pv2 ph3 f6 mr2"/>
+          My First Radio Show
+        </p>
+        ${buttonEl}
+        ${popover.render({}, emit)}
       </div>
 
       <div>
@@ -38,10 +32,3 @@ module.exports = function toolbar (state, emit) {
     </nav>
   `
 }
-
-function caret () {
-  return html`
-    <svg class="ic-white w1 h1 ml2" style="width: 0.5rem">
-      <use xlink:href="icons/openiconic.svg#si-open-caret-bottom" />
-    </svg>`
-}
diff --git a/src/lib/nanoclass.js b/src/lib/nanoclass.js
new file mode 100644
index 0000000..bbb7474
--- /dev/null
+++ b/src/lib/nanoclass.js
@@ -0,0 +1,9 @@
+module.exports = function nanoclass (obj) {
+  var list = []
+  for (var key in obj) {
+    if (obj.hasOwnProperty(key) && obj[key]) {
+      list.push(key)
+    }
+  }
+  return list.join(' ')
+}
diff --git a/src/style/_components.sss b/src/style/_components.sss
index 28e9d8a..a77c533 100644
--- a/src/style/_components.sss
+++ b/src/style/_components.sss
@@ -98,3 +98,25 @@
   outline: none
   background-color: $dark-blue
   color: $pure-white
+
+$dropdown-item-height: 2rem
+
+.dropdown
+  max-height: calc($dropdown-item-height * 5)
+  min-width: 8rem
+  border: 1px solid $near-black
+  background-color: $lighter-grey
+  overflow-y: scroll 
+  padding: 0
+
+.dropdown-item
+  height: $dropdown-item-height
+  display: flex
+  flex-direction: row
+  justify-content: start 
+  align-items: center
+  padding: 0.25rem 0.5rem
+  width: 100%
+  font-weight: 500
+  &:hover
+    background-color: color($light-grey a(0.25))
diff --git a/src/style/_defaults.sss b/src/style/_defaults.sss
index 9b747fe..e9f8a39 100644
--- a/src/style/_defaults.sss
+++ b/src/style/_defaults.sss
@@ -44,6 +44,7 @@ hr
 button 
   border: none
   border-radius: 1px
+  font-family: $font
 
   &:active, &:focus
     outline: none !important
diff --git a/src/style/_helpers.sss b/src/style/_helpers.sss
index 931dc31..aa900c7 100644
--- a/src/style/_helpers.sss
+++ b/src/style/_helpers.sss
@@ -19,6 +19,8 @@
   fill: $white
 .ic-black
   fill: $black
+.ic-blue
+  fill: $blue
 
 .pure-white
   color: $pure-white  
@@ -30,7 +32,7 @@
 .b--black
   border-color: $black
 .b--pure-black
-  border-color: color($pure-black a(0.3))
+  border-color: color($pure-black a(0.2))
 
 .hidden
   display: none
@@ -110,5 +112,17 @@
   transition: 0.2s 
 
 .shadow1
-  box-shadow: 0.5rem 0.5rem color($pure-black a(0.5))
-
+  box-shadow: 0.5rem 0.5rem color($pure-black a(0.25))
+
+.hover-b--blue
+  border: 1px solid transparent
+  &:hover
+    border-color: $blue
+.hover-b--black
+  border: 1px solid transparent
+  &:hover
+    border-color: $black
+.hover-b--pure-black
+  border: 1px solid transparent
+  &:hover
+    border-color: $pure-black
diff --git a/src/style/_layout.sss b/src/style/_layout.sss
index eedde86..769f664 100644
--- a/src/style/_layout.sss
+++ b/src/style/_layout.sss
@@ -5,8 +5,7 @@ $left-panel-width: 16rem
   background-color: $black
 
 #page.left-panel-visible
-  #main-view, #toolbar
-    margin-left: $left-panel-width
+  padding-left: $left-panel-width
 
 #player 
   z-index: 2
diff --git a/src/style/_variables.sss b/src/style/_variables.sss
index 380d02f..119c409 100644
--- a/src/style/_variables.sss
+++ b/src/style/_variables.sss
@@ -3,6 +3,7 @@ $font: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ox
 $pure-white: #fff
 $white: #E8EFFA
 
+$lighter-grey: #B8C2D1
 $light-grey: #7F8B9D
 $grey: #5F6979
 $dark-grey: #2B3039

From 64e42666c3582f86d8e0aaf819c5103f85a74393 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20Dupr=C3=A9?= <hello@jonathandupre.com>
Date: Wed, 3 Jan 2018 22:21:13 -0500
Subject: [PATCH 3/4] playlist-group -> tree

---
 package-lock.json                             | 341 ++++++++++++------
 package.json                                  |   2 +-
 ...t-group.component.js => tree.component.js} |  33 +-
 src/elements/left-panel.el.js                 |  30 +-
 4 files changed, 265 insertions(+), 141 deletions(-)
 rename src/components/{playlist-group.component.js => tree.component.js} (75%)

diff --git a/package-lock.json b/package-lock.json
index e907daa..f83d13c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1942,13 +1942,15 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
+          "integrity": "sha1-0FVMIlZjbi9W58LlrRg/hZQo2B8=",
           "dev": true,
           "optional": true
         },
         "ajv": {
           "version": "4.11.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
+          "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -1958,18 +1960,21 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "dev": true
         },
         "aproba": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.1.1.tgz",
+          "integrity": "sha1-ldNgDwdxCqDpKYxyatXs8urLq6s=",
           "dev": true,
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
+          "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -1979,42 +1984,49 @@
         },
         "asn1": {
           "version": "0.2.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
+          "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=",
           "dev": true,
           "optional": true
         },
         "assert-plus": {
           "version": "0.2.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
+          "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
           "dev": true,
           "optional": true
         },
         "asynckit": {
           "version": "0.4.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+          "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
           "dev": true,
           "optional": true
         },
         "aws-sign2": {
           "version": "0.6.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
+          "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
           "dev": true,
           "optional": true
         },
         "aws4": {
           "version": "1.6.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
+          "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
           "dev": true,
           "optional": true
         },
         "balanced-match": {
           "version": "0.4.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
+          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
           "dev": true
         },
         "bcrypt-pbkdf": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
+          "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2023,7 +2035,8 @@
         },
         "block-stream": {
           "version": "0.0.9",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+          "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
           "dev": true,
           "requires": {
             "inherits": "2.0.3"
@@ -2031,7 +2044,8 @@
         },
         "boom": {
           "version": "2.10.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
+          "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
           "dev": true,
           "requires": {
             "hoek": "2.16.3"
@@ -2039,7 +2053,8 @@
         },
         "brace-expansion": {
           "version": "1.1.7",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.7.tgz",
+          "integrity": "sha1-Pv/DxQ4ABTH7cg6v+A8K6O8jz1k=",
           "dev": true,
           "requires": {
             "balanced-match": "0.4.2",
@@ -2048,29 +2063,34 @@
         },
         "buffer-shims": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz",
+          "integrity": "sha1-mXjOMXOIxkmth5MCjDR37wRKi1E=",
           "dev": true
         },
         "caseless": {
           "version": "0.12.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+          "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
           "dev": true,
           "optional": true
         },
         "co": {
           "version": "4.6.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+          "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
           "dev": true,
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
           "dev": true
         },
         "combined-stream": {
           "version": "1.0.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
+          "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
           "dev": true,
           "requires": {
             "delayed-stream": "1.0.0"
@@ -2078,22 +2098,26 @@
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
           "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
           "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "dev": true
         },
         "cryptiles": {
           "version": "2.0.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
+          "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2102,7 +2126,8 @@
         },
         "dashdash": {
           "version": "1.14.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+          "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2111,7 +2136,8 @@
           "dependencies": {
             "assert-plus": {
               "version": "1.0.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+              "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
               "dev": true,
               "optional": true
             }
@@ -2119,7 +2145,8 @@
         },
         "debug": {
           "version": "2.6.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz",
+          "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2128,24 +2155,28 @@
         },
         "deep-extend": {
           "version": "0.4.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz",
+          "integrity": "sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=",
           "dev": true,
           "optional": true
         },
         "delayed-stream": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+          "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
           "dev": true
         },
         "delegates": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "dev": true,
           "optional": true
         },
         "ecc-jsbn": {
           "version": "0.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
+          "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2154,24 +2185,28 @@
         },
         "extend": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz",
+          "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=",
           "dev": true,
           "optional": true
         },
         "extsprintf": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz",
+          "integrity": "sha1-4QgOBljjALBilJkMxw4VAiNf1VA=",
           "dev": true
         },
         "forever-agent": {
           "version": "0.6.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+          "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
           "dev": true,
           "optional": true
         },
         "form-data": {
           "version": "2.1.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
+          "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2182,12 +2217,14 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "dev": true
         },
         "fstream": {
           "version": "1.0.11",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
+          "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
           "dev": true,
           "requires": {
             "graceful-fs": "4.1.11",
@@ -2198,7 +2235,8 @@
         },
         "fstream-ignore": {
           "version": "1.0.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.5.tgz",
+          "integrity": "sha1-nDHa40dnAY/h0kmyTa2mfQktoQU=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2209,7 +2247,8 @@
         },
         "gauge": {
           "version": "2.7.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2225,7 +2264,8 @@
         },
         "getpass": {
           "version": "0.1.7",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+          "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2234,7 +2274,8 @@
           "dependencies": {
             "assert-plus": {
               "version": "1.0.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+              "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
               "dev": true,
               "optional": true
             }
@@ -2242,7 +2283,8 @@
         },
         "glob": {
           "version": "7.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
           "dev": true,
           "requires": {
             "fs.realpath": "1.0.0",
@@ -2255,18 +2297,21 @@
         },
         "graceful-fs": {
           "version": "4.1.11",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
           "dev": true
         },
         "har-schema": {
           "version": "1.0.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz",
+          "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=",
           "dev": true,
           "optional": true
         },
         "har-validator": {
           "version": "4.2.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz",
+          "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2276,13 +2321,15 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "dev": true,
           "optional": true
         },
         "hawk": {
           "version": "3.1.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
+          "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2294,12 +2341,14 @@
         },
         "hoek": {
           "version": "2.16.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
+          "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
           "dev": true
         },
         "http-signature": {
           "version": "1.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
+          "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2310,7 +2359,8 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "dev": true,
           "requires": {
             "once": "1.4.0",
@@ -2319,18 +2369,21 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
           "dev": true
         },
         "ini": {
           "version": "1.3.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
+          "integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4=",
           "dev": true,
           "optional": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
           "requires": {
             "number-is-nan": "1.0.1"
@@ -2338,24 +2391,28 @@
         },
         "is-typedarray": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+          "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
           "dev": true,
           "optional": true
         },
         "isarray": {
           "version": "1.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "dev": true
         },
         "isstream": {
           "version": "0.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+          "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
           "dev": true,
           "optional": true
         },
         "jodid25519": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/jodid25519/-/jodid25519-1.0.2.tgz",
+          "integrity": "sha1-BtSRIlUJNBlHfUJWM2BuDpB4KWc=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2364,19 +2421,22 @@
         },
         "jsbn": {
           "version": "0.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+          "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
           "dev": true,
           "optional": true
         },
         "json-schema": {
           "version": "0.2.3",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+          "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
           "dev": true,
           "optional": true
         },
         "json-stable-stringify": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
+          "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2385,19 +2445,22 @@
         },
         "json-stringify-safe": {
           "version": "5.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+          "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
           "dev": true,
           "optional": true
         },
         "jsonify": {
           "version": "0.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
+          "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
           "dev": true,
           "optional": true
         },
         "jsprim": {
           "version": "1.4.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.0.tgz",
+          "integrity": "sha1-o7h+QCmNjDgFUtjMdiigu5WiKRg=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2409,7 +2472,8 @@
           "dependencies": {
             "assert-plus": {
               "version": "1.0.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+              "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
               "dev": true,
               "optional": true
             }
@@ -2417,12 +2481,14 @@
         },
         "mime-db": {
           "version": "1.27.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.27.0.tgz",
+          "integrity": "sha1-gg9XIpa70g7CXtVeW13oaeVDbrE=",
           "dev": true
         },
         "mime-types": {
           "version": "2.1.15",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.15.tgz",
+          "integrity": "sha1-pOv1BkCUVpI3uM9wBGd20J/JKu0=",
           "dev": true,
           "requires": {
             "mime-db": "1.27.0"
@@ -2430,7 +2496,8 @@
         },
         "minimatch": {
           "version": "3.0.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
           "requires": {
             "brace-expansion": "1.1.7"
@@ -2438,12 +2505,14 @@
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         },
         "mkdirp": {
           "version": "0.5.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
           "requires": {
             "minimist": "0.0.8"
@@ -2451,13 +2520,15 @@
         },
         "ms": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true,
           "optional": true
         },
         "node-pre-gyp": {
           "version": "0.6.36",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.6.36.tgz",
+          "integrity": "sha1-22BBEst04NR3VU6bUFsXq936t4Y=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2474,7 +2545,8 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2484,7 +2556,8 @@
         },
         "npmlog": {
           "version": "4.1.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.0.tgz",
+          "integrity": "sha512-ocolIkZYZt8UveuiDS0yAkkIjid1o7lPG8cYm05yNYzBn8ykQtaiPMEGp8fY9tKdDgm8okpdKzkvu1y9hUYugA==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2496,24 +2569,28 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
           "dev": true
         },
         "oauth-sign": {
           "version": "0.8.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
+          "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=",
           "dev": true,
           "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "dev": true,
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
           "requires": {
             "wrappy": "1.0.2"
@@ -2521,19 +2598,22 @@
         },
         "os-homedir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "dev": true,
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "dev": true,
           "optional": true
         },
         "osenv": {
           "version": "0.1.4",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.4.tgz",
+          "integrity": "sha1-Qv5tWVPfBsgGS+bxdsPQWqqjRkQ=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2543,35 +2623,41 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "dev": true
         },
         "performance-now": {
           "version": "0.2.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
+          "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=",
           "dev": true,
           "optional": true
         },
         "process-nextick-args": {
           "version": "1.0.7",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
+          "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=",
           "dev": true
         },
         "punycode": {
           "version": "1.4.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
           "dev": true,
           "optional": true
         },
         "qs": {
           "version": "6.4.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz",
+          "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=",
           "dev": true,
           "optional": true
         },
         "rc": {
           "version": "1.2.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.1.tgz",
+          "integrity": "sha1-LgPo5C7kULjLPc5lvhv4l04d/ZU=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2583,7 +2669,8 @@
           "dependencies": {
             "minimist": {
               "version": "1.2.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
               "dev": true,
               "optional": true
             }
@@ -2591,7 +2678,8 @@
         },
         "readable-stream": {
           "version": "2.2.9",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.9.tgz",
+          "integrity": "sha1-z3jsb0ptHrQ9JkiMrJfwQudLf8g=",
           "dev": true,
           "requires": {
             "buffer-shims": "1.0.0",
@@ -2605,7 +2693,8 @@
         },
         "request": {
           "version": "2.81.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz",
+          "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2635,7 +2724,8 @@
         },
         "rimraf": {
           "version": "2.6.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz",
+          "integrity": "sha1-wjOOxkPfeht/5cVPqG9XQopV8z0=",
           "dev": true,
           "requires": {
             "glob": "7.1.2"
@@ -2643,30 +2733,35 @@
         },
         "safe-buffer": {
           "version": "5.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.0.1.tgz",
+          "integrity": "sha1-0mPKVGls2KMGtcplUekt5XkY++c=",
           "dev": true
         },
         "semver": {
           "version": "5.3.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
           "dev": true,
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "dev": true,
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "dev": true,
           "optional": true
         },
         "sntp": {
           "version": "1.0.9",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
+          "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2675,7 +2770,8 @@
         },
         "sshpk": {
           "version": "1.13.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.0.tgz",
+          "integrity": "sha1-/yo+T9BEl1Vf7Zezmg/YL6+zozw=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2692,7 +2788,8 @@
           "dependencies": {
             "assert-plus": {
               "version": "1.0.0",
-              "bundled": true,
+              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+              "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
               "dev": true,
               "optional": true
             }
@@ -2700,7 +2797,8 @@
         },
         "string-width": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
           "requires": {
             "code-point-at": "1.1.0",
@@ -2710,7 +2808,8 @@
         },
         "string_decoder": {
           "version": "1.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz",
+          "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=",
           "dev": true,
           "requires": {
             "safe-buffer": "5.0.1"
@@ -2718,13 +2817,15 @@
         },
         "stringstream": {
           "version": "0.0.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
+          "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=",
           "dev": true,
           "optional": true
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
             "ansi-regex": "2.1.1"
@@ -2732,13 +2833,15 @@
         },
         "strip-json-comments": {
           "version": "2.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "dev": true,
           "optional": true
         },
         "tar": {
           "version": "2.2.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+          "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
           "dev": true,
           "requires": {
             "block-stream": "0.0.9",
@@ -2748,7 +2851,8 @@
         },
         "tar-pack": {
           "version": "3.4.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/tar-pack/-/tar-pack-3.4.0.tgz",
+          "integrity": "sha1-I74tf2cagzk3bL2wuP4/3r8xeYQ=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2764,7 +2868,8 @@
         },
         "tough-cookie": {
           "version": "2.3.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz",
+          "integrity": "sha1-8IH3bkyFcg5sN6X6ztc3FQ2EByo=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2773,7 +2878,8 @@
         },
         "tunnel-agent": {
           "version": "0.6.0",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+          "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2782,30 +2888,35 @@
         },
         "tweetnacl": {
           "version": "0.14.5",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+          "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
           "dev": true,
           "optional": true
         },
         "uid-number": {
           "version": "0.0.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz",
+          "integrity": "sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=",
           "dev": true,
           "optional": true
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "dev": true
         },
         "uuid": {
           "version": "3.0.1",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz",
+          "integrity": "sha1-ZUS7ot/ajBzxfmKaOjBeK7H+5sE=",
           "dev": true,
           "optional": true
         },
         "verror": {
           "version": "1.3.6",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz",
+          "integrity": "sha1-z/XfEpRtKX0rqu+qJoniW+AcAFw=",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2814,7 +2925,8 @@
         },
         "wide-align": {
           "version": "1.1.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
+          "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -2823,7 +2935,8 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
+          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
           "dev": true
         }
       }
@@ -5949,7 +6062,7 @@
       "integrity": "sha1-2Ca4n3SQcy+rwMDtaT7Uddyynr8="
     },
     "vibedrive-sdk": {
-      "version": "file:../../modules/vibedrive-sdk",
+      "version": "file:../sdk",
       "requires": {
         "pouchdb": "6.4.1",
         "request": "2.83.0",
diff --git a/package.json b/package.json
index a5070c2..5a86bf8 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "nanoanimation": "^2.0.1",
     "nanocomponent": "^6.4.2",
     "nanostate": "^1.0.3",
-    "vibedrive-sdk": "file:../../modules/vibedrive-sdk",
+    "vibedrive-sdk": "file:../sdk",
     "xhr": "^2.4.0"
   }
 }
diff --git a/src/components/playlist-group.component.js b/src/components/tree.component.js
similarity index 75%
rename from src/components/playlist-group.component.js
rename to src/components/tree.component.js
index 7c8f8a7..c9c5c6f 100644
--- a/src/components/playlist-group.component.js
+++ b/src/components/tree.component.js
@@ -1,8 +1,8 @@
 var html = require('choo/html')
 var Component = require('nanocomponent')
 
-function PlaylistGroup (parent) {
-  if (!(this instanceof PlaylistGroup)) return new PlaylistGroup(parent)
+function Tree (parent) {
+  if (!(this instanceof Tree)) return new Tree(parent)
 
   Component.call(this)
 
@@ -14,9 +14,9 @@ function PlaylistGroup (parent) {
   this.toggleOpen = this.toggleOpen.bind(this)
 }
 
-PlaylistGroup.prototype = Object.create(Component.prototype)
+Tree.prototype = Object.create(Component.prototype)
 
-PlaylistGroup.prototype.createElement = function (state, emit) {
+Tree.prototype.createElement = function (state, emit) {
   var { name, subgroups, playlists } = state
 
   this.emit = emit
@@ -24,18 +24,16 @@ PlaylistGroup.prototype.createElement = function (state, emit) {
   this.playlists = playlists || []
 
   this._subgroups = subgroups
-  this.subgroups = subgroups.map(subgroup => PlaylistGroup(this))
+  this.subgroups = subgroups.map(subgroup => Tree(this))
 
   return html`
     <div class="playlist-group w-100">
-
-
       ${html`
-          <div tabindex="0" class="${!this.parent ? 'hidden' : ''} playlist-group-item flex flex-row ph1 pv2 w-100">
-            ${paddingBlocks(this.parent)}
-            ${toggleIcon.call(this, this.open)}
-            <div class="w-100 tl mh1">${this.name}</div>
-          </div>`
+        <div tabindex="0" class="${!this.parent ? 'hidden' : ''} playlist-group-item flex flex-row ph1 pv2 w-100">
+          ${paddingBlocks(this.parent)}
+          ${toggleIcon.call(this, this.open)}
+          <div class="w-100 tl mh1">${this.name}</div>
+        </div>`
       }
       <div class="playlist-group-children ${this.open ? '' : 'hidden'}">
         ${this.subgroups.map((group, i) => group.render(this._subgroups[i], emit))}
@@ -88,13 +86,18 @@ PlaylistGroup.prototype.createElement = function (state, emit) {
   }
 }
 
-PlaylistGroup.prototype.update = function (state, emit) {
+Tree.prototype.update = function (state, emit) {
   return state.subgroups !== this._subgroups
 }
 
-PlaylistGroup.prototype.toggleOpen = function () {
+Tree.prototype.toggleOpen = function () {
   this.open = !this.open
   this.rerender()
 }
 
-module.exports = PlaylistGroup
+Tree.prototype.addPlaylist = function (playlist) {
+  this.playlists.push(playlist)
+  this.rerender()
+}
+
+module.exports = Tree
diff --git a/src/elements/left-panel.el.js b/src/elements/left-panel.el.js
index 672cc1c..cf0fc95 100644
--- a/src/elements/left-panel.el.js
+++ b/src/elements/left-panel.el.js
@@ -1,17 +1,17 @@
 var html = require('choo/html')
-var PlaylistGroup = require('../components/playlist-group.component')
+var Tree = require('../components/tree.component')
 
-var defaultPlaylists = PlaylistGroup()
-var userPlaylists = PlaylistGroup()
+var defaultPlaylistTree = Tree()
+var userPlaylistTree = Tree()
 
-var defaultPlaylistsGroups = {
+var defaultPlaylists = {
   playlists: [
     { name: 'All Tracks' }
   ],
   subgroups: []
 }
 
-var groups = {
+var userPlaylists = {
   subgroups: [],
   playlists: [{ name: 'My First Radio Show' }]
 }
@@ -28,19 +28,27 @@ module.exports = function leftPanel (state, emit) {
 
       <div class="flex flex-column mv4">
 
-        <button tabindex="0" class="hover-b--blue flex flex-row ph1 pv2 w-100 bg-none">
-
+        <button 
+          onclick=${createPlaylist} 
+          tabindex="0" 
+          class="hover-b--blue flex flex-row ph1 pv2 w-100 bg-none">
           <div class="w-100 tl mh1 blue">New Playlist</div>
-
           <span class="blue mh2">+</span>
-
         </button>
 
-        ${defaultPlaylists.render(defaultPlaylistsGroups, emit)}
-        ${userPlaylists.render(groups, emit)}
+        ${defaultPlaylistTree.render(defaultPlaylists, emit)}
+        ${userPlaylistTree.render(userPlaylists, emit)}
         <div class="block" style="height: 500px;">
 
       </div>
 
     </div>`
+
+  function createPlaylist () {
+    var playlist = {
+      name: 'Untitled'
+    }
+
+    userPlaylists.addPlaylist(playlist)
+  }
 }

From 94ceb51511c5c364e975425b4586165450e102ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20Dupr=C3=A9?= <hello@jonathandupre.com>
Date: Mon, 26 Feb 2018 21:30:35 -0500
Subject: [PATCH 4/4] tree component changes + remove login

this commit is two things:
1. remnants of old changes I forgot about - I think it was about
   making some of the tree component properties more generic, but
   I'm not sure.
2. I removed the login, but it's not relevent with the new
   architecture.
---
 src/components/tree-leaf.component.js | 77 +++++++++++++++++++++++++++
 src/components/tree.component.js      | 25 +++++----
 src/elements/account-dropdown.el.js   |  6 +--
 src/elements/left-panel.el.js         |  2 +-
 src/elements/navbar.el.js             |  2 +-
 src/layout.js                         | 15 ++++--
 src/pages/account.page.js             | 31 ++++++-----
 7 files changed, 125 insertions(+), 33 deletions(-)
 create mode 100644 src/components/tree-leaf.component.js

diff --git a/src/components/tree-leaf.component.js b/src/components/tree-leaf.component.js
new file mode 100644
index 0000000..45d71c4
--- /dev/null
+++ b/src/components/tree-leaf.component.js
@@ -0,0 +1,77 @@
+var html = require('choo/html')
+var Component = require('nanocomponent')
+
+function TreeLeaf (parent) {
+  if (!(this instanceof TreeLeaf)) return new TreeLeaf(parent)
+
+  Component.call(this)
+}
+
+TreeLeaf.prototype = Object.create(Component.prototype)
+
+TreeLeaf.prototype.createElement = function (state, emit) {
+  return html`
+    <div class="playlist-group w-100">
+      ${html`
+        <div tabindex="0" class="${!this.parent ? 'hidden' : ''} playlist-group-item flex flex-row ph1 pv2 w-100">
+          ${paddingBlocks(this.parent)}
+          ${toggleIcon.call(this, this.open)}
+          <div class="w-100 tl mh1">${this.name}</div>
+        </div>`
+      }
+      <div class="playlist-group-children ${this.open ? '' : 'hidden'}">
+        ${this.subgroups.map((group, i) => group.render(this._subgroups[i], emit))}
+        ${this.playlists.map(p => html`
+          <div tabindex=0 class="playlist-group-item playlist-item flex flex-row pa1 w-100">
+            ${paddingBlocks(this.parent, this.parent ? 1 : 0)}
+            ${playlistIcon()}
+            ${p.name}
+          </div>
+        `)} 
+      </div>
+    </div>`
+
+  function paddingBlocks (parent, extra = 0) {
+    var n = numberOfParentsRecursive(parent, extra)
+
+    return html`
+      <div class="flex flex-row">
+        ${Array(n).fill(0).map(x => html`<div class="w1 h1 mh1"></div>`)}
+      </div>`
+  }
+
+  function numberOfParentsRecursive (parent = {}, i = 0) {
+    return parent.parent
+      ? numberOfParentsRecursive(parent.parent, i + 1)
+      : i
+  }
+
+  function toggleIcon (toggled) {
+    return html`
+      <button class="w1 h1 mr2 bg-none scale" onclick=${e => this.toggle()}>
+        ${toggled
+          ? html`<svg class="ic-white w1 h1" viewBox="0 0 8 8">
+                  <use xlink:href="icons/openiconic.svg#si-open-chevron-bottom"></use>
+                </svg>`
+          : html`<svg class="ic-white w1 h1" viewBox="0 0 8 8">
+                  <use xlink:href="icons/openiconic.svg#si-open-chevron-right"></use>
+                </svg>`
+        }
+      </button>`
+  }
+
+  function playlistIcon () {
+    return html`
+      <div class="playlist-group-icon w1 h1 mh2">
+        <svg class="ic-white w1 h1" viewBox="0 0 8 8">
+          <use xlink:href="icons/openiconic.svg#si-open-excerpt"></use>
+        </svg>
+      </div>`
+  }
+}
+
+TreeLeaf.prototype.update = function (state, emit) {
+  return state.subgroups !== this._subgroups
+}
+
+module.exports = TreeLeaf
diff --git a/src/components/tree.component.js b/src/components/tree.component.js
index c9c5c6f..dd6405c 100644
--- a/src/components/tree.component.js
+++ b/src/components/tree.component.js
@@ -1,5 +1,8 @@
 var html = require('choo/html')
 var Component = require('nanocomponent')
+var TreeLeaf = require('./tree-leaf.component')
+
+module.exports = Tree
 
 function Tree (parent) {
   if (!(this instanceof Tree)) return new Tree(parent)
@@ -11,7 +14,9 @@ function Tree (parent) {
   this.subgroups = []
   this._subgroups = null
   this.playlists = []
-  this.toggleOpen = this.toggleOpen.bind(this)
+  this.toggle = this.toggle.bind(this)
+
+  this.children = []
 }
 
 Tree.prototype = Object.create(Component.prototype)
@@ -56,15 +61,9 @@ Tree.prototype.createElement = function (state, emit) {
       </div>`
   }
 
-  function numberOfParentsRecursive (parent = {}, i = 0) {
-    return parent.parent
-      ? numberOfParentsRecursive(parent.parent, i + 1)
-      : i
-  }
-
   function toggleIcon (toggled) {
     return html`
-      <button class="w1 h1 mr2 bg-none scale" onclick=${e => this.toggleOpen()}>
+      <button class="w1 h1 mr2 bg-none scale" onclick=${e => this.toggle()}>
         ${toggled
           ? html`<svg class="ic-white w1 h1" viewBox="0 0 8 8">
                   <use xlink:href="icons/openiconic.svg#si-open-chevron-bottom"></use>
@@ -90,14 +89,18 @@ Tree.prototype.update = function (state, emit) {
   return state.subgroups !== this._subgroups
 }
 
-Tree.prototype.toggleOpen = function () {
+Tree.prototype.toggle = function () {
   this.open = !this.open
   this.rerender()
 }
 
-Tree.prototype.addPlaylist = function (playlist) {
+Tree.prototype.addLeaf = function (playlist) {
   this.playlists.push(playlist)
   this.rerender()
 }
 
-module.exports = Tree
+function numberOfParentsRecursive (parent = {}, i = 0) {
+  return parent.parent
+    ? numberOfParentsRecursive(parent.parent, i + 1)
+    : i
+}
diff --git a/src/elements/account-dropdown.el.js b/src/elements/account-dropdown.el.js
index a1c167a..67b89fb 100644
--- a/src/elements/account-dropdown.el.js
+++ b/src/elements/account-dropdown.el.js
@@ -1,13 +1,13 @@
 const html = require('choo/html')
 
 module.exports = function accountDropdown (state, emit) {
-  return !state.ui.accountDropdown 
+  return !state.ui.accountDropdown
     ? html`<div class="hidden"></div>`
     : html`
         <div class="block fixed left-0 right-0 top-0 bottom-0">
 
           <div id="account-dropdown" class="absolute right-0 z-3 br1 mt5 bg-black pv3 ph3">
-            <div class="pv2 ph2 f6 fw5 gray">${state.user.email}</div>
+            <div class="pv2 ph2 f6 fw5 gray">${state.user ? state.user.email : 'Anonymous'}</div>
 
             <div class="menu mv3">
               <div class="pv2 ph2 pointer menu-item" 
@@ -36,4 +36,4 @@ module.exports = function accountDropdown (state, emit) {
     emit('ui:toggle-account-dropdown')
     emit(state.events.PUSHSTATE, route)
   }
-}
\ No newline at end of file
+}
diff --git a/src/elements/left-panel.el.js b/src/elements/left-panel.el.js
index cf0fc95..4588fab 100644
--- a/src/elements/left-panel.el.js
+++ b/src/elements/left-panel.el.js
@@ -49,6 +49,6 @@ module.exports = function leftPanel (state, emit) {
       name: 'Untitled'
     }
 
-    userPlaylists.addPlaylist(playlist)
+    userPlaylistTree.addLeaf(playlist)
   }
 }
diff --git a/src/elements/navbar.el.js b/src/elements/navbar.el.js
index 512f164..6705f94 100644
--- a/src/elements/navbar.el.js
+++ b/src/elements/navbar.el.js
@@ -33,7 +33,7 @@ module.exports = function navbar (state, emit) {
         </a>
 
         <a class="mh2 pointer" onclick=${e => emit('ui:toggle-account-dropdown')}>
-          <svg class="ic-white w1 h1"  title="${state.user.email}">
+          <svg class="ic-white w1 h1"  title="${state.user ? state.user.email : 'anonymous'}">
             <use xlink:href="icons/openiconic.svg#si-open-person" />
           </svg>
         </a>
diff --git a/src/layout.js b/src/layout.js
index a78dfea..7cf9f5c 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -6,12 +6,17 @@ var player = require('./elements/player.el')
 var UploadModal = require('./components/upload-modal.component')
 
 module.exports = function (view) {
+  // return function (state, emit) {
+  //   return state.initializing
+  //     ? initializing()
+  //     : state.user
+  //       ? layout(view, state, emit)
+  //       : login(state, emit)
+  // }
   return function (state, emit) {
-    return state.initializing 
+    return state.initializing
       ? initializing()
-      : state.user
-        ? layout(view, state, emit)
-        : login(state, emit)
+      : layout(view, state, emit)
   }
 }
 
@@ -22,7 +27,7 @@ function initializing () {
         <div class="spinner mh3"> </div>
         <div class="">Loading... </div>
       </div>
-    </body>` 
+    </body>`
 }
 
 function layout (view, state, emit) {
diff --git a/src/pages/account.page.js b/src/pages/account.page.js
index dbd481b..0ac892c 100644
--- a/src/pages/account.page.js
+++ b/src/pages/account.page.js
@@ -4,11 +4,18 @@ var empty = 'bw1 b--white bt br bb bl'
 var half = empty + ' half-waffle-square'
 var wrows = Array(10).fill(0)
 var wcols = Array(10).fill(0)
+var defaultUser = {
+  email: 'Anonymous',
+  joined_on: (new Date()).toISOString(),
+  usage: { used: 0 }
+}
 
 module.exports = function accountPage (state, emit) {
-  var used = state.user.usage.used
-  var total = 30 * 1000 * 1000 * 1000
-  var percent = (used/total * 100)
+  var user = state.user || defaultUser
+
+  var bytesUsed = user.usage.used // bytes
+  var totalStorage = 30 * 1000 * 1000 * 1000 // gigabytes
+  var percentUsed = (bytesUsed / totalStorage * 100)
 
   return html`
     <div class="flex flex-row  flex-auto justify-center bg-dark-grey">
@@ -26,9 +33,9 @@ module.exports = function accountPage (state, emit) {
 
             <div class="w-70 flex justify-start pt3  ph3">
               <div>
-                <p class="mt0 fw7">${state.user.email}</p>
+                <p class="mt0 fw7">${user.email}</p>
 
-                <p>Joined on: ${new Date(state.user.joined_on).toDateString()}</p>
+                <p>Joined on: ${new Date(user.joined_on).toDateString()}</p>
               </div>
             </div>
 
@@ -46,18 +53,18 @@ module.exports = function accountPage (state, emit) {
                 
                 <div class="">
                   <div class="bg-none">
-                    ${waffleChart(percent)}
+                    ${waffleChart(percentUsed)}
                   </div>
                 </div>
                 
                 <div class="flex flex-row mv3 ">
                   <div class="flex-auto">
-                    <p class="f3 fw6 ma0">${bytesToGB(used).toFixed(2)} GB</p>
-                    <p class="ma0">${percent.toFixed(2)}% used</p>
+                    <p class="f3 fw6 ma0">${bytesToGB(bytesUsed).toFixed(2)} GB</p>
+                    <p class="ma0">${percentUsed.toFixed(2)}% used</p>
                   </div>
                   <div class="mh3 bw1 b--white br"></div>
                   <div class="flex-auto">
-                    <p class="f3 fw6 ma0">${bytesToGB(total).toFixed(0)} GB</p>
+                    <p class="f3 fw6 ma0">${bytesToGB(totalStorage).toFixed(0)} GB</p>
                     <p class="ma0">total storage</p>
                   </div>
                 </div>
@@ -72,8 +79,8 @@ module.exports = function accountPage (state, emit) {
     </div>`
 }
 
-function waffleChart (percent) {
-  var rounded = Math.round(percent)
+function waffleChart (percentUsed) {
+  var rounded = Math.round(percentUsed)
 
   return html`
     <div class="flex items-start flex-column-reverse">
@@ -92,4 +99,4 @@ function waffleChart (percent) {
 
 function bytesToGB (b) {
   return b / (1 * 1000 * 1000 * 1000)
-}
\ No newline at end of file
+}