First round of improvements

README.md

@@ -36,6 +36,10 @@ $ npm i
 $ npm start
 ```
 
+This launches the app and runs it in your menu bar. Click the IPFS icon to open a console. For example (in OSX):
+
+![](https://ipfs.io/ipfs/QmU5AghSAezpYFNyuYZ7gX1zcHCheQndPtBMj1MHr5QpWL/cap.png)
+
 # packaging
 
 will be written to ./dist

app/init.js

@@ -163,5 +163,3 @@ var altMenu = require('./controls/alt-menu')
 require('./controls/open-browser')
 require('./controls/open-console')
 require('./controls/open-settings')
-
-

app/js/alt-menubar.jsx

@@ -130,10 +130,11 @@ var Menu = React.createClass({
               {(_.map(self.state.stats, function (value, name) {
                 return (
                   <tr key={name}>
-                  <td>{name}</td>
-                  <td className='value'>{value}</td>
+                    <td>{name}</td>
+                    <td className='value'>{value}</td>
                   </tr>
-                )}))}
+                )
+              }))}
             </table>
           </div>
         </div>

app/js/components/files.jsx

@@ -0,0 +1,44 @@
+var React = require('react')
+var _ = require('lodash')
+
+module.exports = React.createClass({
+  displayName: 'Files',
+
+  propTypes: {
+    values: React.PropTypes.object
+  },
+
+  getDefaultProps: function () {
+    return {
+      values: []
+    }
+  },
+
+  _renderFile (value, name) {
+    if (value.uploaded) {
+      var nameTrimmed = value.Name.slice(0, 10) + '...'
+      var hashTrimmed = value.Hash.slice(0, 6) + '...'
+      return (
+        <h5>{nameTrimmed} + {hashTrimmed}</h5>
+      )
+    }
+
+    return (
+      <div className='progress'>
+        <div className='progress-bar progress-bar-striped active' role='progressbar' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100' style={{width: '100%'}}>
+          <span className='sr-only'>Uploading {value.Name}</span>
+        </div>
+      </div>
+    )
+  },
+
+  render () {
+    var self = this
+
+    return (
+      <div className='row'>
+        {_.map(self.props.values, self._renderFile)}
+      </div>
+    )
+  }
+})

app/js/components/open-links.jsx

@@ -0,0 +1,38 @@
+var React = require('react')
+
+module.exports = React.createClass({
+  displayName: 'OpenLinks',
+
+  propTypes: {
+    onConsoleClick: React.PropTypes.func,
+    onBrowserClick: React.PropTypes.func
+  },
+
+  getDefaultProps: function () {
+    return {
+      onConsoleClick: function () {},
+      onBrowserClick: function () {}
+    }
+  },
+
+  render () {
+    var self = this
+
+    return (
+      <div className='row panel panel-default'>
+        <div className='list-group'>
+          <a href='#'
+            className='list-group-item'
+            onClick={self.props.onConsoleClick}>
+            Open Console
+          </a>
+          <a href='#'
+            className='list-group-item'
+            onClick={self.props.onBrowserClick}>
+            Open in Browser
+          </a>
+        </div>
+      </div>
+    )
+  }
+})

app/js/components/quit.jsx

@@ -0,0 +1,30 @@
+var React = require('react')
+
+module.exports = React.createClass({
+  displayName: 'Quit',
+
+  propTypes: {
+    onClick: React.PropTypes.func
+  },
+
+  getDefaultProps: function () {
+    return {
+      onClick: function () {}
+    }
+  },
+
+  render () {
+    var self = this
+
+    return (
+      <div className='row'>
+        <div className='panel panel-default version'>
+          <a href='#'
+            onClick={self.props.onClick}>
+            Quit
+          </a>
+        </div>
+      </div>
+    )
+  }
+})

app/js/components/settings.jsx

@@ -0,0 +1,30 @@
+var React = require('react')
+
+module.exports = React.createClass({
+  displayName: 'Settings',
+
+  propTypes: {
+    onClick: React.PropTypes.func
+  },
+
+  getDefaultProps: function () {
+    return {
+      onClick: function () {}
+    }
+  },
+
+  render () {
+    var self = this
+
+    return (
+      <div className='row'>
+        <div className='panel panel-default version'>
+          <a href='#'
+            onClick={self.props.onClick}>
+            Settings
+          </a>
+        </div>
+      </div>
+    )
+  }
+})

app/js/components/stats.jsx

@@ -0,0 +1,41 @@
+var React = require('react')
+var _ = require('lodash')
+
+module.exports = React.createClass({
+  displayName: 'Stats',
+
+  propTypes: {
+    values: React.PropTypes.object
+  },
+
+  getDefaultProps: function () {
+    return {
+      values: []
+    }
+  },
+
+  _renderStat (value, name) {
+    return (
+      <tr key={name}>
+        <td>{name}</td>
+        <td className='value'>{value}</td>
+      </tr>
+    )
+  },
+
+  render () {
+    var self = this
+
+    return (
+      <div className='row stats'>
+        <div className='panel panel-default'>
+          <div className='panel-body'>
+            <table className='table nomarginbottom'>
+              {_.map(self.props.values, self._renderStat)}
+            </table>
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

app/js/components/status.jsx

@@ -0,0 +1,25 @@
+var React = require('react')
+
+module.exports = React.createClass({
+  displayName: 'Status',
+
+  propTypes: {
+    status: React.PropTypes.string
+  },
+
+  getDefaultProps: function () {
+    return {
+      state: ''
+    }
+  },
+
+  render () {
+    var self = this
+
+    return (
+      <div className='row status'>
+        { self.props.status }
+      </div>
+    )
+  }
+})

app/js/components/version.jsx

@@ -0,0 +1,27 @@
+var React = require('react')
+
+module.exports = React.createClass({
+  displayName: 'Version',
+
+  propTypes: {
+    value: React.PropTypes.string
+  },
+
+  getDefaultProps: function () {
+    return {
+      value: ''
+    }
+  },
+
+  render () {
+    var self = this
+
+    return (
+      <div className='row'>
+        <div className='panel panel-default version'>
+          {self.props.value}
+        </div>
+      </div>
+    )
+  }
+})

app/js/help.js

@@ -2,9 +2,9 @@
 
 var ipc = require('ipc')
 
-function initialize () {
-  ipc.emit('initialize-node')
-}
+// function initialize () {
+//   ipc.emit('initialize-node')
+// }
 
 ipc.on('err', function (err) {
   if (err) {

app/js/menubar-toggle.jsx

@@ -2,7 +2,7 @@
 
 var React = require('react')
 var $ = require('jquery-bf')
-var bf = require('bootstrap-toggle-bf')
+require('bootstrap-toggle-bf')
 
 var Toggle = React.createClass({
   // -- Initialize
@@ -17,7 +17,7 @@ var Toggle = React.createClass({
     var input = $(React.findDOMNode(this)).find('input')
 
     input.bootstrapToggle()
-    
+
     input.change(function () {
       self.props.toggle($(this).prop('checked'))
     })