Turn dir listings into UL, so we can use normal links

app/components/directory-listing/template.hbs

@@ -1,17 +1,11 @@
-<table>
-  <thead>
-    <tr>
-      <td>Name</td>
-      <td>Type</td>
-    </tr>
-  </thead>
-  <tbody>
-    {{#each items as |item|}}
-    <tr>
-      <td class="icon">{{item-icon type=item.type}}</td>
-      <td class="name">{{item.name}}</td>
-      <td class="type">{{item.type}}</td>
-    </tr>
-    {{/each}}
-  </tbody>
-</table>
+<ul class="listing">
+  {{#each items as |item|}}
+  <li>
+    {{#link-to "index"}}
+      <span class="icon">{{item-icon type=item.type}}</span>
+      <span class="name">{{item.name}}</span>
+      <span class="type">{{item.type}}</span>
+    {{/link-to}}
+  </li>
+  {{/each}}
+</ul>

app/components/item-icon/component.js

@@ -2,12 +2,27 @@ import Component from '@ember/component';
 
 export default Component.extend({
 
+  tagName: 'img',
   classNames: ['item-icon'],
+  attributeBindings: ['src:src'],
 
   type: null,
 
   isFolder: function() {
     return this.get('type') === 'folder';
-  }.property('type')
+  }.property('type'),
+
+  src: function() {
+    let prefix = '/img/file-icons/';
+    let filename;
+
+    if (this.get('isFolder')) {
+      filename = 'folder.svg';
+    } else {
+      filename = 'file.svg';
+    }
+
+    return prefix + filename;
+  }.property()
 
 });

app/components/item-icon/template.hbs

@@ -1,5 +0,0 @@
-{{#if isFolder}}
-  <img src="/img/file-icons/folder.svg">
-{{else}}
-  <img src="/img/file-icons/file.svg">
-{{/if}}