Folder widget and recommended images.

src/ContainerDetails.react.js

@@ -425,7 +425,7 @@ var ContainerDetails = React.createClass({
     } else {
       if (this.state.page === this.PAGE_HOME) {
         body = (
-          <ContainerHome ports={this.state.ports} defaultPort={this.state.defaultPort} logs={logs} />
+          <ContainerHome ports={this.state.ports} defaultPort={this.state.defaultPort} logs={logs} container={this.props.container} />
         );
       } else if (this.state.page === this.PAGE_LOGS) {
         body = (

src/ContainerHome.react.js

@@ -1,5 +1,8 @@
+var _ = require('underscore');
 var $ = require('jquery');
 var React = require('react/addons');
+var RetinaImage = require('react-retina-image');
+var path = require('path');
 
 var ContainerHome = React.createClass({
   handleResize: function () {
@@ -42,6 +45,21 @@ var ContainerHome = React.createClass({
         </div>
       );
     }
+    console.log(this.props.container.Volumes);
+    var folders = _.map(this.props.container.Volumes, function (val, key) {
+      var firstFolder = key.split(path.sep)[1];
+      if (!val || val.indexOf(process.env.HOME) === -1) {
+        return;
+      } else {
+        return (
+          <div key={key} className="folder">
+            <RetinaImage src="folder.png" />
+            <div className="text">{firstFolder}</div>
+          </div>
+        );
+      }
+
+    });
     return (
       <div className="details-panel home">
         <div className="content">
@@ -58,7 +76,7 @@ var ContainerHome = React.createClass({
             <div className="folders">
               <h4>Edit Files</h4>
               <div className="widget">
-                <p>Buncha folders</p>
+                {folders}
               </div>
             </div>
           </div>

src/ContainerStore.js

@@ -316,18 +316,19 @@ var ContainerStore = assign(EventEmitter.prototype, {
      return;
    }
     $.ajax({
-      url: 'https://kitematic.com/recommended.json',
+      url: 'https://kitematic.com/recommended/recommended.json',
       cache: false,
       dataType: 'json',
       success: function (res) {
         var recommended = res.recommended;
-        async.map(recommended, function (repository, callback) {
+        async.map(recommended, function (rec, callback) {
-          $.get('https://registry.hub.docker.com/v1/search?q=' + repository, function (data) {
+          $.get('https://registry.hub.docker.com/v1/search?q=' + rec.repo, function (data) {
             console.log(data);
             var results = data.results;
-            callback(null, _.find(results, function (r) {
+            var result = _.find(results, function (r) {
-              return r.name === repository;
+              return r.name === rec.repo;
-            }));
+            });
+            callback(null, _.extend(result, rec));
           });
         }, function (err, results) {
           _recommended = results.filter(function(r) { return !!r; });

src/NewContainer.react.js

@@ -118,6 +118,7 @@ var NewContainer = React.createClass({
         return (
           <div key={r.name} className="image-item">
             <div className="logo">
+              <RetinaImage src={'https://kitematic.com/recommended/img/' + r.img}/>
             </div>
             <div className="card">
               <div className="name">

styles/containers.less

@@ -672,9 +672,21 @@
               }
               .folders {
                 .widget {
+                  padding: 20px 10px;
                   background-color: white;
                   border-radius: 4px;
                   border: 1px solid @gray-lightest;
+                  display: flex;
+                  .folder {
+                    width: 100px;
+                    img {
+                      display: block;
+                      margin: 0 auto;
+                    }
+                    .text {
+                      text-align: center;
+                    }
+                  }
                 }
               }
             }