show some ugly data in main playlist

src/app.coffee

@@ -9,6 +9,7 @@ Handlebars.registerHelper 'hash', (context, options) ->
 
 render = ->
   $("#nowplaying").html Handlebars.templates.playback(context)
+  $("#queue").html Handlebars.templates.playlist(context)
 
   $library = $("#library")
   $library.html Handlebars.templates.library(context)
@@ -38,6 +39,11 @@ $(document).ready ->
       context.artist_table[artist] = obj
     render()
 
+    mpd.getPlaylist (playlist) ->
+      context.playlist = playlist
+      render()
+
+
   $("#line").keydown (event) ->
     if event.keyCode == 13
       line = $("#line").val()

src/mpd.coffee

@@ -78,6 +78,14 @@ class Mpd
 
   doNothing = ->
 
+  formatPlaylistMsg = (msg) ->
+    results = []
+    for line in msg.split("\n")
+      if $.trim(line)
+        [track, file] = line.split(":file: ")
+        results.push {track: track, file: file}
+    return results
+
   onMessage: (msg) ->
     [cmd, handler] = @expectStack.pop()
     cb handler(msg) for cb in @callbacks[cmd]
@@ -104,3 +112,6 @@ class Mpd
 
   queueTrack: (file) ->
     @pushSend "add \"#{file}\"", doNothing, doNothing
+
+  getPlaylist: (callback) ->
+    @pushSend "playlist", formatPlaylistMsg, callback

views/library.handlebars

@@ -1,7 +1,9 @@
-<input type="text" id="filter">
-<select id="organize">
+<div>
+  <input type="text" id="lib-filter" placeholder="filter">
+  <select id="organize">
     <option selected="selected">Artist / Album / Song</option>
-</select>
+  </select>
+</div>
 {{#if artists}}
   <ul>
     {{#artists}}

views/playlist.handlebars

@@ -0,0 +1,14 @@
+<div>
+  <a href="#">Clear</a>
+  <a href="#">Save</a>
+  <input type="text" id="pl-filter" placeholder="filter">
+  <a href="#">Random Mix</a>
+  <a href="#">Repopulate</a>
+</div>
+<ul>
+  {{#playlist}}
+    <li>
+      {{track}}. {{file}}
+    </li>
+  {{/playlist}}
+</ul>