Show listings of a path

app/components/categories-nav/template.hbs

@@ -2,7 +2,7 @@
   <nav>
     <ul>
       {{#each categories as |category|}}
-        <li><a>{{category}}</a></li>
+      <li>{{#link-to "index" (query-params path=category)}}{{category}}{{/link-to}}</li>
       {{/each}}
     </ul>
   </nav>

app/components/item-icon/component.js

@@ -6,4 +6,8 @@ export default Component.extend({
 
   type: null,
 
+  isFolder: function() {
+    return this.get('type') === 'folder';
+  }.property('type')
+
 });

app/components/item-icon/template.hbs

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

app/controllers/index.js

@@ -2,6 +2,7 @@ import Controller from '@ember/controller';
 import EmberObject from '@ember/object';
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
+import { isPresent } from '@ember/utils';
 
 export default Controller.extend({
 
@@ -11,18 +12,24 @@ export default Controller.extend({
   connected: alias('storage.connected'),
   categories: alias('storage.categories'),
 
+  queryParams: ['path'],
+
   currentListing: function() {
+    if (isPresent(this.get('model'))) {
+      return this.get('model');
+    }
+
     if (!this.get('categories')) { return null; }
     const listing = [];
 
     this.get('categories').forEach(categoryName => {
-      listing.pushObject(EmberObject.create({
+      listing.push(EmberObject.create({
         name: categoryName,
         type: 'folder'
       }));
     });
 
     return listing;
-  }.property('categories.[]')
+  }.property('categories.[]', 'model.[]')
 
 });

app/routes/index.js

@@ -1,8 +1,39 @@
 import Route from '@ember/routing/route';
+import EmberObject from '@ember/object';
 import { inject as service } from '@ember/service';
+import { isEmpty } from '@ember/utils';
 
 export default Route.extend({
 
-  storage: service()
+  storage: service(),
+
+  queryParams: {
+    path: {
+      refreshModel: true
+    }
+  },
+
+  model(params) {
+    let path = params.path;
+    let items = [];
+
+    if (isEmpty(params.path)) { return null; }
+
+    if (path.substr(-1) !== '/') { path += '/'; }
+
+    return this.get('storage.client').getListing(path).then(listing => {
+      Object.keys(listing).forEach(name => {
+        let item = listing[name];
+
+        items.push(EmberObject.create({
+          name: name,
+          type: item['Content-Type'] || 'folder',
+          size: item['Content-Length'] || null
+        }));
+      });
+
+      return items;
+    });
+  }
 
 });

app/styles/_colors.scss

@@ -10,6 +10,9 @@ $light-grey-1: #b5c3d1;
     a {
       color: $light-grey-1;
       text-decoration: none;
+      &:hover {
+        color: #fff;
+      }
     }
   }
 

app/styles/_layout.scss

@@ -24,21 +24,6 @@
     flex: 0 0 16rem;
     overflow: auto;
     padding: 2rem;
-
-    nav {
-      margin-top: 6rem;
-      margin-bottom: 6rem;
-
-      ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-      }
-      a {
-        display: block;
-        padding: 0.2rem 0;
-      }
-    }
   }
 
   > main {

app/styles/app.scss

@@ -11,5 +11,6 @@ body {
   padding: 0;
 }
 
+@import "components/categories-nav";
 @import "components/directory-listing";
 @import "components/item-icon";

app/styles/components/_categories-nav.scss

@@ -0,0 +1,18 @@
+#app-container {
+  > aside {
+    nav {
+      margin-top: 6rem;
+      margin-bottom: 6rem;
+
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      a {
+        display: block;
+        padding: 0.2rem 0;
+      }
+    }
+  }
+}

app/styles/components/_directory-listing.scss

@@ -11,9 +11,17 @@
     tbody {
       tr {
         border-bottom: 1px solid #ececec;
-      }
-      tr:first-of-type {
-        border-top: 1px solid #ececec;
+
+        &:first-of-type {
+          border-top: 1px solid #ececec;
+        }
+
+        &:hover {
+          td {
+            opacity: 0.7;
+            cursor: pointer;
+          }
+        }
       }
       td {
         padding: 1rem 1.5rem;

app/styles/components/_item-icon.scss

@@ -1,4 +1,5 @@
 .item-icon {
+  text-align: center;
 
   img {
     height: 1.2rem;