Add option to disable the tray icon

app/index.js

@@ -294,3 +294,28 @@ app.on('will-quit', () => {
     global.IPFS_PROCESS.kill()
   }
 })
+
+app.on('window-all-closed', () => {
+  // On MacOS this is already the expected behavior, no need to alert the user/close the app
+  if (process.platform === 'darwin') return
+
+  const systemTrayNotification = Settings.getSync('systemTrayNotification')
+
+  if (systemTrayNotification === undefined) {
+    const options = {
+      type: 'info',
+      title: 'The app will now run in the background',
+      message: 'Quit or open the app from the system tray! \n\nYou can change this behavior in the settings window.',
+      buttons: ['Got it!']
+    }
+    dialog.showMessageBox(options)
+    Settings.set('systemTrayNotification', true)
+  }
+
+  const runInBackground = Settings.getSync('runInBackground')
+
+  // if it's undefined or true don't quit
+  if (runInBackground === false) {
+    app.quit()
+  }
+})

app/windows/Settings/Components/ConnectivityPanel.jsx

@@ -9,21 +9,17 @@ const GatewayEnum = {
   LOCAL: 'http://localhost:8080'
 }
 
+const isMac = process.platform === 'darwin'
+
 /**
  * Connectivity Panel
  */
 @observer
 class ConnectivityPanel extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      gateway: GatewayEnum.SIDERUS,
-      skipGatewayQuery: true
-    }
-
-    this._handleGatewayChange = this._handleGatewayChange.bind(this)
-    this._handleSkipGatewayQueryChange = this._handleSkipGatewayQueryChange.bind(this)
+  state = {
+    gateway: GatewayEnum.SIDERUS,
+    skipGatewayQuery: true,
+    runInBackground: true
   }
 
   componentWillMount () {
@@ -32,35 +28,38 @@ class ConnectivityPanel extends React.Component {
      */
     Promise.all([
       Settings.get('gatewayURL'),
-      Settings.get('skipGatewayQuery')
+      Settings.get('skipGatewayQuery'),
+      Settings.get('runInBackground')
     ])
       // .then(console.log)
       .then(values => this.setState({
         gateway: values[0],
-        skipGatewayQuery: values[1] || false
+        skipGatewayQuery: values[1] || false,
+        // the default (undefined) is considered true
+        runInBackground: typeof values[2] !== 'boolean' ? true : values[2]
       }))
   }
 
-  _handleSkipGatewayQueryChange (event) {
-    const value = !this.state.skipGatewayQuery
+  _handleSkipGatewayQueryChange = (event) => {
+    const nextValue = !this.state.skipGatewayQuery
     /**
      * Save setting persistently
      */
-    Settings.set('skipGatewayQuery', value)
+    Settings.setSync('skipGatewayQuery', nextValue)
     /**
      * Update component's state
      */
     this.setState({
-      skipGatewayQuery: value
+      skipGatewayQuery: nextValue
     })
   }
 
-  _handleGatewayChange (event) {
+  _handleGatewayChange = (event) => {
     const { value } = event.target
     /**
      * Save setting persistently
      */
-    Settings.set('gatewayURL', value)
+    Settings.setSync('gatewayURL', value)
     /**
      * Update component's state
      */
@@ -69,8 +68,18 @@ class ConnectivityPanel extends React.Component {
     })
   }
 
-  _handelOnSubit (event) {
-
+  _handleRunInBackgroundChange = (event) => {
+    const nextValue = !this.state.runInBackground
+    /**
+     * Save setting persistently
+     */
+    Settings.setSync('runInBackground', nextValue)
+    /**
+     * Update component's state
+     */
+    this.setState({
+      runInBackground: nextValue
+    })
   }
 
   render () {
@@ -82,46 +91,46 @@ class ConnectivityPanel extends React.Component {
     // const peers = data.peers.map(peer => peer.addr.toString()).join("   ")
     return (
       <Pane className="settings">
-        <form onSubmit={this._handelOnSubit.bind(this)}>
-
-          <Input
-            label="Your peer ID"
-            type="text"
-            value={data.peer.id || '...'}
-            placeholder="Hey girl..." readOnly
-          />
-
-          <Input
-            label="Number of peers connected"
-            type="text"
-            value={data.peers.length || 0}
-            placeholder="Hey girl..." readOnly
-          />
-
-          <div className='form-group'>
-            <label>IPFS Gateway</label>
-            <select
-              className="form-control"
-              onChange={this._handleGatewayChange}
-              value={this.state.gateway}
-            >
-              <option value={GatewayEnum.SIDERUS}>Siderus.io</option>
-              <option value={GatewayEnum.LOCAL}>Local HTTP Gateway</option>
-            </select>
-          </div>
-
+        <Input
+          label="Your peer ID"
+          type="text"
+          value={data.peer.id || '...'}
+          placeholder="Hey girl..." readOnly
+        />
+
+        <Input
+          label="Number of peers connected"
+          type="text"
+          value={data.peers.length || 0}
+          placeholder="Hey girl..." readOnly
+        />
+
+        <div className='form-group'>
+          <label>IPFS Gateway</label>
+          <select
+            className="form-control"
+            onChange={this._handleGatewayChange}
+            value={this.state.gateway}
+          >
+            <option value={GatewayEnum.SIDERUS}>Siderus.io</option>
+            <option value={GatewayEnum.LOCAL}>Local HTTP Gateway</option>
+          </select>
+        </div>
+
+        <CheckBox
+          label="Skip querying gateways after adding a file"
+          checked={this.state.skipGatewayQuery}
+          onChange={this._handleSkipGatewayQueryChange}
+        />
+
+        {
+          !isMac &&
           <CheckBox
-            label="Skip querying gateways after adding a file"
-            checked={this.state.skipGatewayQuery}
-            onChange={this._handleSkipGatewayQueryChange}
+            label="Let the app run in background"
+            checked={this.state.runInBackground}
+            onChange={this._handleRunInBackgroundChange}
           />
-
-          {/* <TextArea
-            label="Peers connected"
-            value={peers}
-            placeholder="Hey girl..." readOnly>
-          </TextArea> */}
-        </form>
+        }
       </Pane>
     )
   }

app/windows/Settings/Components/Sidebar.jsx

@@ -9,17 +9,17 @@ import { Pane, NavGroup, NavTitle, NavGroupItem } from 'react-photonkit'
 
 @observer
 class Sidebar extends React.Component {
-  _handleSelect (selected) {
+  _handleSelect = (selected) => {
     this.props.navigationStore.selected = selected
   }
 
   render () {
     return (
       <Pane sidebar ptSize="sm">
-        <NavGroup onSelect={this._handleSelect.bind(this)}>
-          <NavTitle>Settings and Info</NavTitle>
-          <NavGroupItem glyph="rss" text="Connectivity" eventKey={0} />
-          <NavGroupItem glyph="database" text="Repository" eventKey={1} />
+        <NavGroup onSelect={this._handleSelect}>
+          <NavTitle key='title'>Settings and Info</NavTitle>
+          <NavGroupItem key='con' glyph="rss" text="Connectivity" eventKey={0} />
+          <NavGroupItem key= 'rep' glyph="database" text="Repository" eventKey={1} />
         </NavGroup>
       </Pane>
     )