Render directory items in index

app/components/directory-listing/component.js

@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+
+  classNames: ['directory-listing'],
+
+  items: null
+
+
+});

app/components/directory-listing/template.hbs

@@ -0,0 +1,16 @@
+<table>
+  <thead>
+    <tr>
+      <td>Name</td>
+      <td>Type</td>
+    </tr>
+  </thead>
+  <tbody>
+    {{#each items as |item|}}
+    <tr>
+      <td class="name">{{item.name}}</td>
+      <td class="type">{{item.type}}</td>
+    </tr>
+    {{/each}}
+  </tbody>
+</table>

app/controllers/application.js

@@ -9,21 +9,10 @@ export default Controller.extend({
 
   connecting: alias('storage.connecting'),
   connected: alias('storage.connected'),
-
-  categories: null,
+  categories: alias('storage.categories'),
 
   handleConnected: observer('connected', function() {
-    this.fetchCategories();
-  }),
-
-  fetchCategories() {
-    const client = this.get('storage.client');
-
-    client.getListing('').then(listing => {
-      let dirnames = Object.keys(listing);
-      let categories = dirnames.map(i => i.replace('/', '')).sort();
-      this.set('categories', categories);
-    });
-  }
+    this.get('storage').fetchCategories();
+  })
 
 });

app/controllers/index.js

@@ -1,4 +1,5 @@
 import Controller from '@ember/controller';
+import EmberObject from '@ember/object';
 import { inject as service } from '@ember/service';
 import { alias } from '@ember/object/computed';
 
@@ -7,6 +8,21 @@ export default Controller.extend({
   storage: service(),
 
   connecting: alias('storage.connecting'),
-  connected: alias('storage.connected')
+  connected: alias('storage.connected'),
+  categories: alias('storage.categories'),
+
+  currentListing: function() {
+    if (!this.get('categories')) { return null; }
+    const listing = [];
+
+    this.get('categories').forEach(categoryName => {
+      listing.pushObject(EmberObject.create({
+        name: categoryName,
+        type: 'folder'
+      }));
+    });
+
+    return listing;
+  }.property('categories.[]')
 
 });

app/services/storage.js

@@ -9,6 +9,7 @@ export default Service.extend({
   connecting: true,
   connected: false,
   client: null,
+  categories: null,
 
   setup: function() {
     const rs = new RemoteStorage({
@@ -67,6 +68,16 @@ export default Service.extend({
     this.set('rs', rs);
     this.set('widget', widget);
     this.set('client', rs.scope('/'));
-  }.on('init')
+  }.on('init'),
+
+  fetchCategories() {
+    const client = this.get('client');
+
+    client.getListing('').then(listing => {
+      let dirnames = Object.keys(listing);
+      let categories = dirnames.map(i => i.replace('/', '')).sort();
+      this.set('categories', categories);
+    });
+  }
 
 });

app/styles/_layout.scss

@@ -26,6 +26,9 @@
     padding: 2rem;
 
     nav {
+      margin-top: 6rem;
+      margin-bottom: 6rem;
+
       ul {
         list-style: none;
         margin: 0;
@@ -42,5 +45,9 @@
     flex: 1;
     overflow: auto;
     padding: 2rem;
+
+    > header {
+      height: 6em;
+    }
   }
 }

app/styles/app.scss

@@ -10,3 +10,5 @@ body {
   margin: 0;
   padding: 0;
 }
+
+@import "components/directory_listing";

app/styles/components/_directory_listing.scss

@@ -0,0 +1,28 @@
+.directory-listing {
+
+  table {
+    width: 100%;
+    margin-bottom: 6rem;
+    border-collapse: collapse;
+
+    thead {
+      display: none;
+    }
+    tbody {
+      tr {
+        border-bottom: 1px solid #ececec;
+      }
+      tr:first-of-type {
+        border-top: 1px solid #ececec;
+      }
+      td {
+        padding: 1rem 1.5rem;
+
+        &.type {
+          color: #aaa;
+        }
+      }
+    }
+  }
+
+}

app/templates/index.hbs

@@ -1,9 +1,13 @@
-{{#if connecting}}
-  Connecting...
-{{else}}
-  {{#if connected}}
-    Connected.
+<header>
+  {{#if connecting}}
+  <!-- Connecting... -->
   {{else}}
-    Not connected.
+    {{#unless connected}}
+      Not connected.
+    {{/unless}}
   {{/if}}
+</header>
+
+{{#if currentListing}}
+  {{directory-listing items=currentListing}}
 {{/if}}