From edca8f60b6026241acbacd3e3a46a9b046b37a40 Mon Sep 17 00:00:00 2001
From: Ezinwa Okpoechi <brainmaestro@outlook.com>
Date: Thu, 9 Mar 2017 14:19:06 +0100
Subject: [PATCH 01/16] Add settings support for plugins

---
 app/lib/plugins/index.js            |  1 +
 app/lib/plugins/settings.js         | 48 +++++++++++++++++++++++++++++
 app/main/plugins/externalPlugins.js |  3 +-
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 app/lib/plugins/settings.js

diff --git a/app/lib/plugins/index.js b/app/lib/plugins/index.js
index 4cc42f2c..571f4713 100644
--- a/app/lib/plugins/index.js
+++ b/app/lib/plugins/index.js
@@ -32,3 +32,4 @@ export const ensureFiles = () => {
 }
 
 export const client = npm(pluginsPath)
+export { default as addSettings } from './settings' 
diff --git a/app/lib/plugins/settings.js b/app/lib/plugins/settings.js
new file mode 100644
index 00000000..d80b326e
--- /dev/null
+++ b/app/lib/plugins/settings.js
@@ -0,0 +1,48 @@
+import config from 'lib/config'
+import { isEqual } from 'lodash'
+
+const VALID_TYPES = new Set([
+  'array',
+  'string',
+  'number',
+  'bool',
+  'option',
+])
+
+const isValidSetting = setting => {
+  const { type, options } = setting
+  if (!type || !VALID_TYPES.has(type)) {
+    return false
+  }
+
+  if (type == 'option') {
+    return Array.isArray(options) && options.length
+  }
+
+  return true
+}
+
+export default ({ settings }, base) => {
+  if (! settings) return
+
+  const externalSettings = config.get('external') || {}
+  const pluginSettings = externalSettings[base] || {}
+
+  Object.keys(settings).forEach(key => {
+    const setting = settings[key]
+    if (! isValidSetting(setting)) {
+      console.log(`Invalid setting '${key}'`)
+      return
+    }
+
+    const { value, ...pluginSetting } = pluginSettings[key] || {}
+
+    if (!isEqual(setting, pluginSetting)) {
+      const { description, type, defaultValue, multi, options } = setting
+      pluginSettings[key] = { description, type, defaultValue, multi, options }
+    }
+  })
+
+  externalSettings[base] = pluginSettings
+  config.set('external', externalSettings)
+}
diff --git a/app/main/plugins/externalPlugins.js b/app/main/plugins/externalPlugins.js
index 4beaf87f..0fed9095 100644
--- a/app/main/plugins/externalPlugins.js
+++ b/app/main/plugins/externalPlugins.js
@@ -1,7 +1,7 @@
 import debounce from 'lodash/debounce'
 import chokidar from 'chokidar'
 import path from 'path'
-import { modulesDirectory, ensureFiles } from 'lib/plugins'
+import { modulesDirectory, ensureFiles, addSettings } from 'lib/plugins'
 
 const requirePlugin = (pluginPath) => {
   try {
@@ -55,6 +55,7 @@ pluginsWatcher.on('addDir', (pluginPath) => {
       console.groupEnd()
       return
     }
+    addSettings(plugin, base);
     console.log('Loaded.')
     const requirePath = window.require.resolve(pluginPath)
     const watcher = chokidar.watch(requirePath, { depth: 0 })

From c2baf0bedbca94a0855678291d6ca5655dde1d2b Mon Sep 17 00:00:00 2001
From: Ezinwa Okpoechi <brainmaestro@outlook.com>
Date: Fri, 10 Mar 2017 10:48:09 +0100
Subject: [PATCH 02/16] Render plugin settings

---
 .../settings/Settings/components/checkbox.js  | 18 +++++
 .../settings/Settings/components/index.js     |  4 +
 .../settings/Settings/components/input.js     | 19 +++++
 .../settings/Settings/components/option.js    | 19 +++++
 .../settings/Settings/components/select.js    | 18 +++++
 .../settings/Settings/external-settings.js    | 81 +++++++++++++++++++
 .../core/cerebro/settings/Settings/index.js   | 10 ++-
 .../core/cerebro/settings/Settings/styles.css | 13 +++
 8 files changed, 180 insertions(+), 2 deletions(-)
 create mode 100644 app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
 create mode 100644 app/main/plugins/core/cerebro/settings/Settings/components/index.js
 create mode 100644 app/main/plugins/core/cerebro/settings/Settings/components/input.js
 create mode 100644 app/main/plugins/core/cerebro/settings/Settings/components/option.js
 create mode 100644 app/main/plugins/core/cerebro/settings/Settings/components/select.js
 create mode 100644 app/main/plugins/core/cerebro/settings/Settings/external-settings.js

diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js b/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
new file mode 100644
index 00000000..b598db5f
--- /dev/null
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import styles from '../styles.css'
+
+export default (props) => (
+  <div className={styles.item}>
+    <div className={styles.itemValueWithoutLabel}>
+      <label>
+        <input
+          type="checkbox"
+          checked={props.value}
+          onChange={props.onChange}
+          className={styles.checkbox}
+        />
+        {props.description}
+      </label>
+    </div>
+  </div>
+)
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/index.js b/app/main/plugins/core/cerebro/settings/Settings/components/index.js
new file mode 100644
index 00000000..fe718154
--- /dev/null
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/index.js
@@ -0,0 +1,4 @@
+export { default as Checkbox } from './checkbox'
+export { default as Input } from './input'
+export { default as Select } from './select'
+export { default as Option } from './option'
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/input.js b/app/main/plugins/core/cerebro/settings/Settings/components/input.js
new file mode 100644
index 00000000..9732cef9
--- /dev/null
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/input.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import styles from '../styles.css'
+import hotkeyStyles from '../Hotkey/styles.css'
+
+export default (props) => (
+  <div className={styles.item}>
+    <label className={styles.label}>{props.label}:</label>
+    <div className={styles.itemValue}>
+      <input
+        type={props.inputType}
+        value={props.value}
+        className={hotkeyStyles.hotkeyInput}
+      />
+      {props.description
+        ? <div className={styles.itemNotice}>{props.description}</div>
+        : ''}
+    </div>
+  </div>
+)
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/option.js b/app/main/plugins/core/cerebro/settings/Settings/components/option.js
new file mode 100644
index 00000000..9e76284f
--- /dev/null
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/option.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import Select, { Creatable } from 'react-select'
+import styles from '../styles.css'
+
+export default (props) => (
+  <div className={styles.item}>
+    <div className={styles.itemValue}>
+      <Creatable
+        multi={props.multi}
+        value={props.value}
+        placeholder={props.label}
+        options={props.options}
+      />
+      {props.description
+        ? <div className={styles.itemNotice}>{props.description}</div>
+        : ''}
+    </div>
+  </div>
+)
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/select.js b/app/main/plugins/core/cerebro/settings/Settings/components/select.js
new file mode 100644
index 00000000..d3c5f03a
--- /dev/null
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/select.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import Select, { Creatable } from 'react-select'
+import styles from '../styles.css'
+
+export default (props) => (
+  <div className={styles.item}>
+    <div className={styles.itemValue}>
+      <Creatable
+        multi={true}
+        value={props.value}
+        placeholder={props.label}
+      />
+      {props.description
+        ? <div className={styles.itemNotice}>{props.description}</div>
+        : ''}
+    </div>
+  </div>
+)
diff --git a/app/main/plugins/core/cerebro/settings/Settings/external-settings.js b/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
new file mode 100644
index 00000000..0d04dfb8
--- /dev/null
+++ b/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
@@ -0,0 +1,81 @@
+import React, { PropTypes, Component } from 'react'
+import loadThemes from 'lib/loadThemes'
+import styles from './styles.css'
+import hotkeyStyles from './Hotkey/styles.css'
+import { Checkbox, Input, Select, Option } from './components'
+
+export default class ExternalSettings extends Component {
+  static propTypes = {
+    settings: PropTypes.object.isRequired,
+  }
+
+  renderSetting(label, setting, plugin) {
+    const { type, value, description } = setting
+
+    if (type == 'bool') {
+      return (
+        <Checkbox
+          key={label}
+          value={value}
+          description={description}
+        />
+      )
+    }
+
+    if (type == 'array') {
+      return (
+        <Select
+          key={label}
+          label={label}
+          description={description}
+        />
+      )
+    }
+
+    if (type == 'option') {
+      const { multi } = setting
+      const options = setting.options.map(option => ({ label: option, value: option }))
+
+      return (
+        <Option
+          key={label}
+          label={label}
+          description={description}
+          options={options}
+          multi={multi}
+        />
+      )
+    }
+
+    return (
+      <Input
+        key={label}
+        label={label}
+        inputType={type}
+        value={value}
+        description={description}
+      />
+    )
+  }
+
+  render() {
+    const { settings } = this.props
+
+    return (
+      <div>
+        {Object.keys(settings).map(plugin => {
+          return (
+            <div key={plugin} className={styles.settingItem}>
+              <label className={styles.header}>{plugin}</label>
+
+              {Object.keys(settings[plugin]).map(label => {
+                const setting = settings[plugin][label]
+                return this.renderSetting(label, setting, plugin)
+              })}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+}
diff --git a/app/main/plugins/core/cerebro/settings/Settings/index.js b/app/main/plugins/core/cerebro/settings/Settings/index.js
index 1df849af..1a67bcbb 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/index.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/index.js
@@ -4,6 +4,7 @@ import CountrySelect from './CountrySelect'
 import Select from 'react-select'
 import loadThemes from 'lib/loadThemes'
 import styles from './styles.css'
+import ExternalSettings from './external-settings'
 
 class Settings extends Component {
   constructor(props) {
@@ -15,7 +16,8 @@ class Settings extends Component {
       country: get('country'),
       theme: get('theme'),
       developerMode: get('developerMode'),
-      cleanOnHide: get('cleanOnHide')
+      cleanOnHide: get('cleanOnHide'),
+      externalSettings: get('external'),
     }
     this.changeConfig = this.changeConfig.bind(this)
   }
@@ -27,7 +29,7 @@ class Settings extends Component {
   }
   render() {
     const {
-      hotkey, showInTray, country, theme, developerMode, cleanOnHide
+      hotkey, showInTray, country, theme, developerMode, cleanOnHide, externalSettings
     } = this.state
     return (
       <div className={styles.settings}>
@@ -110,6 +112,10 @@ class Settings extends Component {
             </label>
           </div>
         </div>
+
+        <ExternalSettings
+          settings={externalSettings}
+        />
       </div>
     )
   }
diff --git a/app/main/plugins/core/cerebro/settings/Settings/styles.css b/app/main/plugins/core/cerebro/settings/Settings/styles.css
index 04b9741b..a1d01ce9 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/styles.css
+++ b/app/main/plugins/core/cerebro/settings/Settings/styles.css
@@ -41,3 +41,16 @@
 .checkbox {
   margin-right: 5px;
 }
+
+.settingItem {
+  padding: 20px;
+  box-sizing: border-box;
+  width: 100%;
+  border-color: #d9d9d9 #ccc #b3b3b3;
+  border-top: 1px solid #ccc;
+  margin-top: 16px;
+}
+
+.header {
+  font-weight: bold;
+}

From 715831c60c0b167a6b63f87c89fb27a1bd5055fa Mon Sep 17 00:00:00 2001
From: Ezinwa Okpoechi <brainmaestro@outlook.com>
Date: Fri, 10 Mar 2017 12:02:57 +0100
Subject: [PATCH 03/16] Save changed external settings

---
 .../settings/Settings/components/checkbox.js  |  2 +-
 .../settings/Settings/components/index.js     |  2 +-
 .../settings/Settings/components/input.js     |  1 +
 .../components/{option.js => options.js}      |  1 +
 .../settings/Settings/components/select.js    |  1 +
 .../settings/Settings/external-settings.js    | 41 ++++++++++++-------
 .../core/cerebro/settings/Settings/index.js   |  7 ++--
 7 files changed, 36 insertions(+), 19 deletions(-)
 rename app/main/plugins/core/cerebro/settings/Settings/components/{option.js => options.js} (93%)

diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js b/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
index b598db5f..ed2d0658 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
@@ -7,7 +7,7 @@ export default (props) => (
       <label>
         <input
           type="checkbox"
-          checked={props.value}
+          checked={!!props.value}
           onChange={props.onChange}
           className={styles.checkbox}
         />
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/index.js b/app/main/plugins/core/cerebro/settings/Settings/components/index.js
index fe718154..2de0eb5c 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/index.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/index.js
@@ -1,4 +1,4 @@
 export { default as Checkbox } from './checkbox'
 export { default as Input } from './input'
 export { default as Select } from './select'
-export { default as Option } from './option'
+export { default as Options } from './options'
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/input.js b/app/main/plugins/core/cerebro/settings/Settings/components/input.js
index 9732cef9..e233faf1 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/input.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/input.js
@@ -10,6 +10,7 @@ export default (props) => (
         type={props.inputType}
         value={props.value}
         className={hotkeyStyles.hotkeyInput}
+        onChange={props.onChange}
       />
       {props.description
         ? <div className={styles.itemNotice}>{props.description}</div>
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/option.js b/app/main/plugins/core/cerebro/settings/Settings/components/options.js
similarity index 93%
rename from app/main/plugins/core/cerebro/settings/Settings/components/option.js
rename to app/main/plugins/core/cerebro/settings/Settings/components/options.js
index 9e76284f..a6b56e61 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/option.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/options.js
@@ -10,6 +10,7 @@ export default (props) => (
         value={props.value}
         placeholder={props.label}
         options={props.options}
+        onChange={props.onChange}
       />
       {props.description
         ? <div className={styles.itemNotice}>{props.description}</div>
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/select.js b/app/main/plugins/core/cerebro/settings/Settings/components/select.js
index d3c5f03a..7c5c69b5 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/select.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/select.js
@@ -9,6 +9,7 @@ export default (props) => (
         multi={true}
         value={props.value}
         placeholder={props.label}
+        onChange={props.onChange}
       />
       {props.description
         ? <div className={styles.itemNotice}>{props.description}</div>
diff --git a/app/main/plugins/core/cerebro/settings/Settings/external-settings.js b/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
index 0d04dfb8..9e0b6f76 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
@@ -2,11 +2,17 @@ import React, { PropTypes, Component } from 'react'
 import loadThemes from 'lib/loadThemes'
 import styles from './styles.css'
 import hotkeyStyles from './Hotkey/styles.css'
-import { Checkbox, Input, Select, Option } from './components'
+import { Checkbox, Input, Select, Options } from './components'
 
 export default class ExternalSettings extends Component {
   static propTypes = {
     settings: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  changeSetting(plugin, label, value) {
+    this.props.settings[plugin][label].value = value
+    this.props.onChange(this.props.settings)
   }
 
   renderSetting(label, setting, plugin) {
@@ -17,6 +23,7 @@ export default class ExternalSettings extends Component {
         <Checkbox
           key={label}
           value={value}
+          onChange={({ target }) => this.changeSetting(plugin, label, target.checked)}
           description={description}
         />
       )
@@ -27,6 +34,8 @@ export default class ExternalSettings extends Component {
         <Select
           key={label}
           label={label}
+          value={value || []}
+          onChange={newValue => this.changeSetting(plugin, label, newValue)}
           description={description}
         />
       )
@@ -37,9 +46,14 @@ export default class ExternalSettings extends Component {
       const options = setting.options.map(option => ({ label: option, value: option }))
 
       return (
-        <Option
+        <Options
           key={label}
           label={label}
+          value={value}
+          onChange={newValue => {
+            const value = multi ? newValue.map(val => val.value) : newValue.value
+            this.changeSetting(plugin, label, value)
+          }}
           description={description}
           options={options}
           multi={multi}
@@ -51,8 +65,9 @@ export default class ExternalSettings extends Component {
       <Input
         key={label}
         label={label}
-        inputType={type}
         value={value}
+        onChange={({ target }) => this.changeSetting(plugin, label, target.value)}
+        inputType={type}
         description={description}
       />
     )
@@ -63,18 +78,16 @@ export default class ExternalSettings extends Component {
 
     return (
       <div>
-        {Object.keys(settings).map(plugin => {
-          return (
-            <div key={plugin} className={styles.settingItem}>
-              <label className={styles.header}>{plugin}</label>
+        {Object.keys(settings).map(plugin => (
+          <div key={plugin} className={styles.settingItem}>
+            <label className={styles.header}>{plugin}</label>
 
-              {Object.keys(settings[plugin]).map(label => {
-                const setting = settings[plugin][label]
-                return this.renderSetting(label, setting, plugin)
-              })}
-            </div>
-          )
-        })}
+            {Object.keys(settings[plugin]).map(label => {
+              const setting = settings[plugin][label]
+              return this.renderSetting(label, setting, plugin)
+            })}
+          </div>
+        ))}
       </div>
     )
   }
diff --git a/app/main/plugins/core/cerebro/settings/Settings/index.js b/app/main/plugins/core/cerebro/settings/Settings/index.js
index 1a67bcbb..b4f94cec 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/index.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/index.js
@@ -17,7 +17,7 @@ class Settings extends Component {
       theme: get('theme'),
       developerMode: get('developerMode'),
       cleanOnHide: get('cleanOnHide'),
-      externalSettings: get('external'),
+      external: get('external'),
     }
     this.changeConfig = this.changeConfig.bind(this)
   }
@@ -29,7 +29,7 @@ class Settings extends Component {
   }
   render() {
     const {
-      hotkey, showInTray, country, theme, developerMode, cleanOnHide, externalSettings
+      hotkey, showInTray, country, theme, developerMode, cleanOnHide, external
     } = this.state
     return (
       <div className={styles.settings}>
@@ -114,7 +114,8 @@ class Settings extends Component {
         </div>
 
         <ExternalSettings
-          settings={externalSettings}
+          settings={external}
+          onChange={settings => this.changeConfig('external', settings)}
         />
       </div>
     )

From 9cb7453b8d3298fecebc5d354d6352ed7eeaaf84 Mon Sep 17 00:00:00 2001
From: Ezinwa Okpoechi <brainmaestro@outlook.com>
Date: Fri, 10 Mar 2017 18:26:24 +0100
Subject: [PATCH 04/16] Make plugin settings available to the plugin

---
 app/main/actions/search.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/main/actions/search.js b/app/main/actions/search.js
index e9b685c7..40589d6b 100644
--- a/app/main/actions/search.js
+++ b/app/main/actions/search.js
@@ -36,15 +36,22 @@ const DEFAULT_SCOPE = {
  * @param {Function} callback Callback function that receives used search term and found results
  */
 const eachPlugin = (term, display) => {
+  const externalSettings = config.get('external') || {}
   // TODO: order results by frequency?
   Object.keys(plugins).forEach(name => {
+    const settings = externalSettings[name]
+    if (settings) {
+      Object.keys(settings).forEach(key => settings[key] = settings[key].value)
+    }
+
     try {
       plugins[name].fn({
         ...DEFAULT_SCOPE,
         term,
         hide: (id) => store.dispatch(hideElement(`${name}-${id}`)),
         update: (id, result) => store.dispatch(updateElement(`${name}-${id}`, result)),
-        display: (payload) => display(name, payload)
+        display: (payload) => display(name, payload),
+        settings,
       })
     } catch (error) {
       // Do not fail on plugin errors, just log them to console

From f9b427761bedb4d5aef9d20547169a9d804677d2 Mon Sep 17 00:00:00 2001
From: Ezinwa Okpoechi <brainmaestro@outlook.com>
Date: Fri, 10 Mar 2017 18:29:07 +0100
Subject: [PATCH 05/16] Show default value if value is not present

---
 .../core/cerebro/settings/Settings/external-settings.js        | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/main/plugins/core/cerebro/settings/Settings/external-settings.js b/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
index 9e0b6f76..ccae4914 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
@@ -16,7 +16,8 @@ export default class ExternalSettings extends Component {
   }
 
   renderSetting(label, setting, plugin) {
-    const { type, value, description } = setting
+    const { type, description } = setting
+    const value = setting.value || setting.defaultValue
 
     if (type == 'bool') {
       return (

From 1734b0f630a0e39690e18ba9b6198e453f24704c Mon Sep 17 00:00:00 2001
From: Ezinwa Okpoechi <brainmaestro@outlook.com>
Date: Fri, 10 Mar 2017 18:48:55 +0100
Subject: [PATCH 06/16] Fix lint errors

---
 app/lib/plugins/index.js                        |  2 +-
 app/lib/plugins/settings.js                     |  3 ++-
 app/main/actions/search.js                      |  4 +++-
 .../settings/Settings/components/checkbox.js    | 12 ++++++++++--
 .../settings/Settings/components/input.js       | 14 ++++++++++++--
 .../settings/Settings/components/options.js     | 17 ++++++++++++++---
 .../settings/Settings/components/select.js      | 17 +++++++++++++----
 .../settings/Settings/external-settings.js      | 12 +++++-------
 app/main/plugins/externalPlugins.js             |  2 +-
 9 files changed, 61 insertions(+), 22 deletions(-)

diff --git a/app/lib/plugins/index.js b/app/lib/plugins/index.js
index 571f4713..d170b0f4 100644
--- a/app/lib/plugins/index.js
+++ b/app/lib/plugins/index.js
@@ -32,4 +32,4 @@ export const ensureFiles = () => {
 }
 
 export const client = npm(pluginsPath)
-export { default as addSettings } from './settings' 
+export { default as addSettings } from './settings'
diff --git a/app/lib/plugins/settings.js b/app/lib/plugins/settings.js
index d80b326e..973c3535 100644
--- a/app/lib/plugins/settings.js
+++ b/app/lib/plugins/settings.js
@@ -15,7 +15,7 @@ const isValidSetting = setting => {
     return false
   }
 
-  if (type == 'option') {
+  if (type === 'option') {
     return Array.isArray(options) && options.length
   }
 
@@ -35,6 +35,7 @@ export default ({ settings }, base) => {
       return
     }
 
+    // eslint-disable-next-line no-unused-vars
     const { value, ...pluginSetting } = pluginSettings[key] || {}
 
     if (!isEqual(setting, pluginSetting)) {
diff --git a/app/main/actions/search.js b/app/main/actions/search.js
index 40589d6b..acfa80ef 100644
--- a/app/main/actions/search.js
+++ b/app/main/actions/search.js
@@ -41,7 +41,9 @@ const eachPlugin = (term, display) => {
   Object.keys(plugins).forEach(name => {
     const settings = externalSettings[name]
     if (settings) {
-      Object.keys(settings).forEach(key => settings[key] = settings[key].value)
+      Object.keys(settings).forEach(key => {
+        settings[key] = settings[key].value
+      })
     }
 
     try {
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js b/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
index ed2d0658..b408169d 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { PropTypes } from 'react'
 import styles from '../styles.css'
 
-export default (props) => (
+const Checkbox = (props) => (
   <div className={styles.item}>
     <div className={styles.itemValueWithoutLabel}>
       <label>
@@ -16,3 +16,11 @@ export default (props) => (
     </div>
   </div>
 )
+
+Checkbox.propTypes = {
+  value: PropTypes.any,
+  onChange: PropTypes.func.isRequired,
+  description: PropTypes.string,
+}
+
+export default Checkbox
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/input.js b/app/main/plugins/core/cerebro/settings/Settings/components/input.js
index e233faf1..1a5d50f0 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/input.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/input.js
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { PropTypes } from 'react'
 import styles from '../styles.css'
 import hotkeyStyles from '../Hotkey/styles.css'
 
-export default (props) => (
+const Input = (props) => (
   <div className={styles.item}>
     <label className={styles.label}>{props.label}:</label>
     <div className={styles.itemValue}>
@@ -18,3 +18,13 @@ export default (props) => (
     </div>
   </div>
 )
+
+Input.propTypes = {
+  inputType: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  value: PropTypes.any,
+  onChange: PropTypes.func.isRequired,
+  description: PropTypes.string,
+}
+
+export default Input
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/options.js b/app/main/plugins/core/cerebro/settings/Settings/components/options.js
index a6b56e61..59de0e1c 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/options.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/options.js
@@ -1,8 +1,8 @@
-import React from 'react'
-import Select, { Creatable } from 'react-select'
+import React, { PropTypes } from 'react'
+import { Creatable } from 'react-select'
 import styles from '../styles.css'
 
-export default (props) => (
+const Options = (props) => (
   <div className={styles.item}>
     <div className={styles.itemValue}>
       <Creatable
@@ -18,3 +18,14 @@ export default (props) => (
     </div>
   </div>
 )
+
+Options.propTypes = {
+  options: PropTypes.array.isRequired,
+  label: PropTypes.string,
+  value: PropTypes.any,
+  onChange: PropTypes.func.isRequired,
+  description: PropTypes.string,
+  multi: PropTypes.bool.isRequired,
+}
+
+export default Options
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/select.js b/app/main/plugins/core/cerebro/settings/Settings/components/select.js
index 7c5c69b5..b205b533 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/select.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/select.js
@@ -1,12 +1,12 @@
-import React from 'react'
-import Select, { Creatable } from 'react-select'
+import React, { PropTypes } from 'react'
+import { Creatable } from 'react-select'
 import styles from '../styles.css'
 
-export default (props) => (
+const Select = (props) => (
   <div className={styles.item}>
     <div className={styles.itemValue}>
       <Creatable
-        multi={true}
+        multi
         value={props.value}
         placeholder={props.label}
         onChange={props.onChange}
@@ -17,3 +17,12 @@ export default (props) => (
     </div>
   </div>
 )
+
+Select.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.any,
+  onChange: PropTypes.func.isRequired,
+  description: PropTypes.string,
+}
+
+export default Select
diff --git a/app/main/plugins/core/cerebro/settings/Settings/external-settings.js b/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
index ccae4914..9b5963ff 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
@@ -1,7 +1,5 @@
 import React, { PropTypes, Component } from 'react'
-import loadThemes from 'lib/loadThemes'
 import styles from './styles.css'
-import hotkeyStyles from './Hotkey/styles.css'
 import { Checkbox, Input, Select, Options } from './components'
 
 export default class ExternalSettings extends Component {
@@ -19,7 +17,7 @@ export default class ExternalSettings extends Component {
     const { type, description } = setting
     const value = setting.value || setting.defaultValue
 
-    if (type == 'bool') {
+    if (type === 'bool') {
       return (
         <Checkbox
           key={label}
@@ -30,7 +28,7 @@ export default class ExternalSettings extends Component {
       )
     }
 
-    if (type == 'array') {
+    if (type === 'array') {
       return (
         <Select
           key={label}
@@ -42,7 +40,7 @@ export default class ExternalSettings extends Component {
       )
     }
 
-    if (type == 'option') {
+    if (type === 'option') {
       const { multi } = setting
       const options = setting.options.map(option => ({ label: option, value: option }))
 
@@ -52,8 +50,8 @@ export default class ExternalSettings extends Component {
           label={label}
           value={value}
           onChange={newValue => {
-            const value = multi ? newValue.map(val => val.value) : newValue.value
-            this.changeSetting(plugin, label, value)
+            const changedValue = multi ? newValue.map(val => val.value) : newValue.value
+            this.changeSetting(plugin, label, changedValue)
           }}
           description={description}
           options={options}
diff --git a/app/main/plugins/externalPlugins.js b/app/main/plugins/externalPlugins.js
index 0fed9095..0c9026a6 100644
--- a/app/main/plugins/externalPlugins.js
+++ b/app/main/plugins/externalPlugins.js
@@ -55,7 +55,7 @@ pluginsWatcher.on('addDir', (pluginPath) => {
       console.groupEnd()
       return
     }
-    addSettings(plugin, base);
+    addSettings(plugin, base)
     console.log('Loaded.')
     const requirePath = window.require.resolve(pluginPath)
     const watcher = chokidar.watch(requirePath, { depth: 0 })

From e1350c7213182bcd5aeeb1a12676efc27278121d Mon Sep 17 00:00:00 2001
From: Ezinwa Okpoechi <brainmaestro@outlook.com>
Date: Tue, 14 Mar 2017 12:12:23 +0100
Subject: [PATCH 07/16] Simplify external settings components rendering

---
 app/lib/config.js                             |  3 +-
 .../settings/Settings/components/checkbox.js  | 19 +++---
 .../{Hotkey/index.js => components/hotkey.js} |  0
 .../settings/Settings/components/index.js     | 30 +++++++--
 .../settings/Settings/components/input.js     | 31 ++++-----
 .../settings/Settings/components/options.js   | 39 ++++++-----
 .../settings/Settings/components/select.js    | 20 +++---
 .../{Hotkey => components}/styles.css         |  0
 .../settings/Settings/external-settings.js    | 67 +++----------------
 .../core/cerebro/settings/Settings/index.js   |  2 +-
 10 files changed, 97 insertions(+), 114 deletions(-)
 rename app/main/plugins/core/cerebro/settings/Settings/{Hotkey/index.js => components/hotkey.js} (100%)
 rename app/main/plugins/core/cerebro/settings/Settings/{Hotkey => components}/styles.css (100%)

diff --git a/app/lib/config.js b/app/lib/config.js
index 1261bea0..c3d5e577 100644
--- a/app/lib/config.js
+++ b/app/lib/config.js
@@ -23,7 +23,8 @@ const defaultSettings = memoize(() => {
     developerMode: false,
     cleanOnHide: true,
     skipDonateDialog: false,
-    lastShownDonateDialog: null
+    lastShownDonateDialog: null,
+    external: {},
   }
 })
 
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js b/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
index b408169d..6f55de34 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
@@ -1,24 +1,25 @@
 import React, { PropTypes } from 'react'
-import styles from '../styles.css'
+import settingsStyles from '../styles.css'
 
-const Checkbox = (props) => (
-  <div className={styles.item}>
-    <div className={styles.itemValueWithoutLabel}>
+const Checkbox = ({ label, value, onChange, description }) => (
+  <div className={settingsStyles.item}>
+    <div className={settingsStyles.itemValueWithoutLabel}>
       <label>
         <input
           type="checkbox"
-          checked={!!props.value}
-          onChange={props.onChange}
-          className={styles.checkbox}
+          checked={value}
+          onChange={({ target }) => onChange(target.checked)}
+          className={settingsStyles.checkbox}
         />
-        {props.description}
+      {description}
       </label>
     </div>
   </div>
 )
 
 Checkbox.propTypes = {
-  value: PropTypes.any,
+  label: PropTypes.string,
+  value: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
   description: PropTypes.string,
 }
diff --git a/app/main/plugins/core/cerebro/settings/Settings/Hotkey/index.js b/app/main/plugins/core/cerebro/settings/Settings/components/hotkey.js
similarity index 100%
rename from app/main/plugins/core/cerebro/settings/Settings/Hotkey/index.js
rename to app/main/plugins/core/cerebro/settings/Settings/components/hotkey.js
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/index.js b/app/main/plugins/core/cerebro/settings/Settings/components/index.js
index 2de0eb5c..dcb8aa95 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/index.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/index.js
@@ -1,4 +1,26 @@
-export { default as Checkbox } from './checkbox'
-export { default as Input } from './input'
-export { default as Select } from './select'
-export { default as Options } from './options'
+import React, { PropTypes } from 'react'
+import Checkbox from './checkbox'
+import Input from './input'
+import Select from './select'
+import Options from './options'
+
+const components = {
+  bool: Checkbox,
+  option: Options,
+  array: Select,
+}
+
+const SettingsComponent = ({ type, ...props }) => {
+  const Component = components[type] || Input
+
+  return (
+    <Component type={type} {...props} />
+  )
+}
+
+SettingsComponent.propTypes = {
+  value: PropTypes.any.isRequired,
+  type: PropTypes.string.isRequired,
+}
+
+export default SettingsComponent
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/input.js b/app/main/plugins/core/cerebro/settings/Settings/components/input.js
index 1a5d50f0..c225739b 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/input.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/input.js
@@ -1,30 +1,31 @@
 import React, { PropTypes } from 'react'
-import styles from '../styles.css'
-import hotkeyStyles from '../Hotkey/styles.css'
+import settingsStyles from '../styles.css'
+import styles from './styles.css'
 
-const Input = (props) => (
-  <div className={styles.item}>
-    <label className={styles.label}>{props.label}:</label>
-    <div className={styles.itemValue}>
+const Input = ({ label, value, onChange, description, type }) => (
+  <div className={settingsStyles.item}>
+    <label className={settingsStyles.label}>{label}:</label>
+    <div className={settingsStyles.itemValue}>
       <input
-        type={props.inputType}
-        value={props.value}
-        className={hotkeyStyles.hotkeyInput}
-        onChange={props.onChange}
+        type={type}
+        value={value}
+        className={styles.hotkeyInput}
+        onChange={({ target }) => onChange(target.value)}
       />
-      {props.description
-        ? <div className={styles.itemNotice}>{props.description}</div>
-        : ''}
+      <div className={settingsStyles.itemNotice}>{description}</div>
     </div>
   </div>
 )
 
 Input.propTypes = {
-  inputType: PropTypes.string.isRequired,
   label: PropTypes.string,
-  value: PropTypes.any,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
   onChange: PropTypes.func.isRequired,
   description: PropTypes.string,
+  type: PropTypes.string.isRequired,
 }
 
 export default Input
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/options.js b/app/main/plugins/core/cerebro/settings/Settings/components/options.js
index 59de0e1c..241f9240 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/options.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/options.js
@@ -1,31 +1,36 @@
 import React, { PropTypes } from 'react'
-import { Creatable } from 'react-select'
-import styles from '../styles.css'
+import Select from 'react-select'
+import settingsStyles from '../styles.css'
 
-const Options = (props) => (
-  <div className={styles.item}>
-    <div className={styles.itemValue}>
-      <Creatable
-        multi={props.multi}
-        value={props.value}
-        placeholder={props.label}
-        options={props.options}
-        onChange={props.onChange}
+const Options = ({ label, value, onChange, description, options, multi }) => (
+  <div className={settingsStyles.item}>
+    <div className={settingsStyles.itemValue}>
+      <Select
+        multi={multi}
+        value={value}
+        placeholder={label}
+        options={options.map(option => ({ label: option, value: option }))}
+        onChange={newValue => {
+          const changedValue = multi ? newValue.map(val => val.value) : newValue.value
+          onChange(changedValue)
+        }}
       />
-      {props.description
-        ? <div className={styles.itemNotice}>{props.description}</div>
-        : ''}
+      <div className={settingsStyles.itemNotice}>{description}</div>
     </div>
   </div>
 )
 
 Options.propTypes = {
-  options: PropTypes.array.isRequired,
   label: PropTypes.string,
-  value: PropTypes.any,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.array,
+  ]),
   onChange: PropTypes.func.isRequired,
   description: PropTypes.string,
-  multi: PropTypes.bool.isRequired,
+  options: PropTypes.array.isRequired,
+  multi: PropTypes.bool,
 }
 
 export default Options
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/select.js b/app/main/plugins/core/cerebro/settings/Settings/components/select.js
index b205b533..0b60f1b8 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/select.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/select.js
@@ -1,26 +1,24 @@
 import React, { PropTypes } from 'react'
 import { Creatable } from 'react-select'
-import styles from '../styles.css'
+import settingsStyles from '../styles.css'
 
-const Select = (props) => (
-  <div className={styles.item}>
-    <div className={styles.itemValue}>
+const Select = ({ label, value, onChange, description }) => (
+  <div className={settingsStyles.item}>
+    <div className={settingsStyles.itemValue}>
       <Creatable
         multi
-        value={props.value}
-        placeholder={props.label}
-        onChange={props.onChange}
+        value={value.map(val => ({ value: val, label: val }))}
+        placeholder={label}
+        onChange={newValue => onChange(newValue.map(val => val.value))}
       />
-      {props.description
-        ? <div className={styles.itemNotice}>{props.description}</div>
-        : ''}
+      <div className={settingsStyles.itemNotice}>{description}</div>
     </div>
   </div>
 )
 
 Select.propTypes = {
   label: PropTypes.string,
-  value: PropTypes.any,
+  value: PropTypes.arary,
   onChange: PropTypes.func.isRequired,
   description: PropTypes.string,
 }
diff --git a/app/main/plugins/core/cerebro/settings/Settings/Hotkey/styles.css b/app/main/plugins/core/cerebro/settings/Settings/components/styles.css
similarity index 100%
rename from app/main/plugins/core/cerebro/settings/Settings/Hotkey/styles.css
rename to app/main/plugins/core/cerebro/settings/Settings/components/styles.css
diff --git a/app/main/plugins/core/cerebro/settings/Settings/external-settings.js b/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
index 9b5963ff..caf2b571 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
@@ -1,73 +1,23 @@
 import React, { PropTypes, Component } from 'react'
 import styles from './styles.css'
-import { Checkbox, Input, Select, Options } from './components'
+import SettingsComponent from './components'
 
 export default class ExternalSettings extends Component {
-  static propTypes = {
-    settings: PropTypes.object.isRequired,
-    onChange: PropTypes.func.isRequired,
-  }
-
   changeSetting(plugin, label, value) {
     this.props.settings[plugin][label].value = value
     this.props.onChange(this.props.settings)
   }
 
   renderSetting(label, setting, plugin) {
-    const { type, description } = setting
-    const value = setting.value || setting.defaultValue
-
-    if (type === 'bool') {
-      return (
-        <Checkbox
-          key={label}
-          value={value}
-          onChange={({ target }) => this.changeSetting(plugin, label, target.checked)}
-          description={description}
-        />
-      )
-    }
-
-    if (type === 'array') {
-      return (
-        <Select
-          key={label}
-          label={label}
-          value={value || []}
-          onChange={newValue => this.changeSetting(plugin, label, newValue)}
-          description={description}
-        />
-      )
-    }
-
-    if (type === 'option') {
-      const { multi } = setting
-      const options = setting.options.map(option => ({ label: option, value: option }))
-
-      return (
-        <Options
-          key={label}
-          label={label}
-          value={value}
-          onChange={newValue => {
-            const changedValue = multi ? newValue.map(val => val.value) : newValue.value
-            this.changeSetting(plugin, label, changedValue)
-          }}
-          description={description}
-          options={options}
-          multi={multi}
-        />
-      )
-    }
+    const { value, defaultValue, ...restProps } = setting
 
     return (
-      <Input
+      <SettingsComponent
         key={label}
         label={label}
-        value={value}
-        onChange={({ target }) => this.changeSetting(plugin, label, target.value)}
-        inputType={type}
-        description={description}
+        value={value || defaultValue}
+        onChange={newValue => this.changeSetting(plugin, label, newValue)}
+        {...restProps}
       />
     )
   }
@@ -91,3 +41,8 @@ export default class ExternalSettings extends Component {
     )
   }
 }
+
+ExternalSettings.propTypes = {
+  settings: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+}
diff --git a/app/main/plugins/core/cerebro/settings/Settings/index.js b/app/main/plugins/core/cerebro/settings/Settings/index.js
index b4f94cec..8226b272 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/index.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/index.js
@@ -1,5 +1,5 @@
 import React, { PropTypes, Component } from 'react'
-import Hotkey from './Hotkey'
+import Hotkey from './components/hotkey'
 import CountrySelect from './CountrySelect'
 import Select from 'react-select'
 import loadThemes from 'lib/loadThemes'

From 3558225442dca5179d119104b60abfd3f0834eae Mon Sep 17 00:00:00 2001
From: Ezinwa Okpoechi <brainmaestro@outlook.com>
Date: Tue, 14 Mar 2017 12:50:02 +0100
Subject: [PATCH 08/16] Move styles to settings stylesheet

---
 .../settings/Settings/components/checkbox.js     |  8 ++++----
 .../settings/Settings/components/hotkey.js       |  4 ++--
 .../settings/Settings/components/input.js        | 13 ++++++-------
 .../settings/Settings/components/options.js      |  8 ++++----
 .../settings/Settings/components/select.js       |  8 ++++----
 .../settings/Settings/components/styles.css      | 14 --------------
 .../core/cerebro/settings/Settings/styles.css    | 16 ++++++++++++++++
 7 files changed, 36 insertions(+), 35 deletions(-)
 delete mode 100644 app/main/plugins/core/cerebro/settings/Settings/components/styles.css

diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js b/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
index 6f55de34..0eba641f 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
@@ -1,15 +1,15 @@
 import React, { PropTypes } from 'react'
-import settingsStyles from '../styles.css'
+import styles from '../styles.css'
 
 const Checkbox = ({ label, value, onChange, description }) => (
-  <div className={settingsStyles.item}>
-    <div className={settingsStyles.itemValueWithoutLabel}>
+  <div className={styles.item}>
+    <div className={styles.itemValueWithoutLabel}>
       <label>
         <input
           type="checkbox"
           checked={value}
           onChange={({ target }) => onChange(target.checked)}
-          className={settingsStyles.checkbox}
+          className={styles.checkbox}
         />
       {description}
       </label>
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/hotkey.js b/app/main/plugins/core/cerebro/settings/Settings/components/hotkey.js
index e5bff564..8719ca66 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/hotkey.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/hotkey.js
@@ -1,5 +1,5 @@
 import React, { PropTypes, Component } from 'react'
-import styles from './styles.css'
+import styles from '../styles.css'
 
 const ASCII = {
   188: '44',
@@ -126,7 +126,7 @@ class Hotkey extends Component {
     return (
       <div className={styles.hotkey}>
         <input
-          className={styles.hotkeyInput}
+          className={styles.input}
           type="text"
           value={keys}
           onKeyDown={this.onKeyDown.bind(this)}
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/input.js b/app/main/plugins/core/cerebro/settings/Settings/components/input.js
index c225739b..8797fa2a 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/input.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/input.js
@@ -1,18 +1,17 @@
 import React, { PropTypes } from 'react'
-import settingsStyles from '../styles.css'
-import styles from './styles.css'
+import styles from '../styles.css'
 
 const Input = ({ label, value, onChange, description, type }) => (
-  <div className={settingsStyles.item}>
-    <label className={settingsStyles.label}>{label}:</label>
-    <div className={settingsStyles.itemValue}>
+  <div className={styles.item}>
+    <label className={styles.label}>{label}:</label>
+    <div className={styles.itemValue}>
       <input
         type={type}
         value={value}
-        className={styles.hotkeyInput}
+        className={styles.input}
         onChange={({ target }) => onChange(target.value)}
       />
-      <div className={settingsStyles.itemNotice}>{description}</div>
+      <div className={styles.itemNotice}>{description}</div>
     </div>
   </div>
 )
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/options.js b/app/main/plugins/core/cerebro/settings/Settings/components/options.js
index 241f9240..7f1188ea 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/options.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/options.js
@@ -1,10 +1,10 @@
 import React, { PropTypes } from 'react'
 import Select from 'react-select'
-import settingsStyles from '../styles.css'
+import styles from '../styles.css'
 
 const Options = ({ label, value, onChange, description, options, multi }) => (
-  <div className={settingsStyles.item}>
-    <div className={settingsStyles.itemValue}>
+  <div className={styles.item}>
+    <div className={styles.itemValue}>
       <Select
         multi={multi}
         value={value}
@@ -15,7 +15,7 @@ const Options = ({ label, value, onChange, description, options, multi }) => (
           onChange(changedValue)
         }}
       />
-      <div className={settingsStyles.itemNotice}>{description}</div>
+      <div className={styles.itemNotice}>{description}</div>
     </div>
   </div>
 )
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/select.js b/app/main/plugins/core/cerebro/settings/Settings/components/select.js
index 0b60f1b8..f32c1f69 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/select.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/select.js
@@ -1,17 +1,17 @@
 import React, { PropTypes } from 'react'
 import { Creatable } from 'react-select'
-import settingsStyles from '../styles.css'
+import styles from '../styles.css'
 
 const Select = ({ label, value, onChange, description }) => (
-  <div className={settingsStyles.item}>
-    <div className={settingsStyles.itemValue}>
+  <div className={styles.item}>
+    <div className={styles.itemValue}>
       <Creatable
         multi
         value={value.map(val => ({ value: val, label: val }))}
         placeholder={label}
         onChange={newValue => onChange(newValue.map(val => val.value))}
       />
-      <div className={settingsStyles.itemNotice}>{description}</div>
+      <div className={styles.itemNotice}>{description}</div>
     </div>
   </div>
 )
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/styles.css b/app/main/plugins/core/cerebro/settings/Settings/components/styles.css
deleted file mode 100644
index 4052e36d..00000000
--- a/app/main/plugins/core/cerebro/settings/Settings/components/styles.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.hotkey {
-
-}
-
-.hotkeyInput {
-  font-size: 16px;
-  line-height: 34px;
-  padding: 0 10px;
-  box-sizing: border-box;
-  width: 100%;
-  border-color: #d9d9d9 #ccc #b3b3b3;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-}
diff --git a/app/main/plugins/core/cerebro/settings/Settings/styles.css b/app/main/plugins/core/cerebro/settings/Settings/styles.css
index a1d01ce9..dd6bd0e0 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/styles.css
+++ b/app/main/plugins/core/cerebro/settings/Settings/styles.css
@@ -20,6 +20,7 @@
   flex-direction: column;
   flex-grow: 2;
 }
+
 .itemValueWithoutLabel {
   composes: itemValue;
   margin-left: 75px;
@@ -54,3 +55,18 @@
 .header {
   font-weight: bold;
 }
+
+.hotkey {
+
+}
+
+.input {
+  font-size: 16px;
+  line-height: 34px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  width: 100%;
+  border-color: #d9d9d9 #ccc #b3b3b3;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}

From 7daf78507e801bb17cdec14a79a7efd736985239 Mon Sep 17 00:00:00 2001
From: Ezinwa Okpoechi <brainmaestro@outlook.com>
Date: Tue, 14 Mar 2017 12:51:40 +0100
Subject: [PATCH 09/16] Make description required

---
 app/lib/plugins/settings.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/lib/plugins/settings.js b/app/lib/plugins/settings.js
index 973c3535..03aaad53 100644
--- a/app/lib/plugins/settings.js
+++ b/app/lib/plugins/settings.js
@@ -10,8 +10,8 @@ const VALID_TYPES = new Set([
 ])
 
 const isValidSetting = setting => {
-  const { type, options } = setting
-  if (!type || !VALID_TYPES.has(type)) {
+  const { type, description, options } = setting
+  if (!type || !VALID_TYPES.has(type) || !description) {
     return false
   }
 

From a17562af74c88d01e92cf9113d5385263acfc3ba Mon Sep 17 00:00:00 2001
From: Alexandr Subbotin <kelionweb@gmail.com>
Date: Fri, 17 Mar 2017 08:55:31 +0100
Subject: [PATCH 10/16] Changes in plugin settings (#1)

Do not store settings structure in config, always get it from plugin object
---
 app/lib/config.js                             |  2 +-
 app/lib/plugins/index.js                      |  2 +-
 app/lib/plugins/settings.js                   | 49 ---------------
 app/lib/plugins/settings/get.js               |  3 +
 app/lib/plugins/settings/index.js             |  4 ++
 app/lib/plugins/settings/validate.js          | 24 ++++++++
 app/main/actions/search.js                    | 11 +---
 .../settings/Settings/PluginSettings.js       | 60 +++++++++++++++++++
 .../settings/Settings/components/index.js     |  2 +-
 .../settings/Settings/external-settings.js    | 48 ---------------
 .../core/cerebro/settings/Settings/index.js   | 41 ++++++++++---
 app/main/plugins/externalPlugins.js           |  9 ++-
 12 files changed, 137 insertions(+), 118 deletions(-)
 delete mode 100644 app/lib/plugins/settings.js
 create mode 100644 app/lib/plugins/settings/get.js
 create mode 100644 app/lib/plugins/settings/index.js
 create mode 100644 app/lib/plugins/settings/validate.js
 create mode 100644 app/main/plugins/core/cerebro/settings/Settings/PluginSettings.js
 delete mode 100644 app/main/plugins/core/cerebro/settings/Settings/external-settings.js

diff --git a/app/lib/config.js b/app/lib/config.js
index c3d5e577..0933ae44 100644
--- a/app/lib/config.js
+++ b/app/lib/config.js
@@ -24,7 +24,7 @@ const defaultSettings = memoize(() => {
     cleanOnHide: true,
     skipDonateDialog: false,
     lastShownDonateDialog: null,
-    external: {},
+    plugins: {},
   }
 })
 
diff --git a/app/lib/plugins/index.js b/app/lib/plugins/index.js
index d170b0f4..38b1a2cd 100644
--- a/app/lib/plugins/index.js
+++ b/app/lib/plugins/index.js
@@ -32,4 +32,4 @@ export const ensureFiles = () => {
 }
 
 export const client = npm(pluginsPath)
-export { default as addSettings } from './settings'
+export { default as settings } from './settings'
diff --git a/app/lib/plugins/settings.js b/app/lib/plugins/settings.js
deleted file mode 100644
index 03aaad53..00000000
--- a/app/lib/plugins/settings.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import config from 'lib/config'
-import { isEqual } from 'lodash'
-
-const VALID_TYPES = new Set([
-  'array',
-  'string',
-  'number',
-  'bool',
-  'option',
-])
-
-const isValidSetting = setting => {
-  const { type, description, options } = setting
-  if (!type || !VALID_TYPES.has(type) || !description) {
-    return false
-  }
-
-  if (type === 'option') {
-    return Array.isArray(options) && options.length
-  }
-
-  return true
-}
-
-export default ({ settings }, base) => {
-  if (! settings) return
-
-  const externalSettings = config.get('external') || {}
-  const pluginSettings = externalSettings[base] || {}
-
-  Object.keys(settings).forEach(key => {
-    const setting = settings[key]
-    if (! isValidSetting(setting)) {
-      console.log(`Invalid setting '${key}'`)
-      return
-    }
-
-    // eslint-disable-next-line no-unused-vars
-    const { value, ...pluginSetting } = pluginSettings[key] || {}
-
-    if (!isEqual(setting, pluginSetting)) {
-      const { description, type, defaultValue, multi, options } = setting
-      pluginSettings[key] = { description, type, defaultValue, multi, options }
-    }
-  })
-
-  externalSettings[base] = pluginSettings
-  config.set('external', externalSettings)
-}
diff --git a/app/lib/plugins/settings/get.js b/app/lib/plugins/settings/get.js
new file mode 100644
index 00000000..d1210774
--- /dev/null
+++ b/app/lib/plugins/settings/get.js
@@ -0,0 +1,3 @@
+import config from 'lib/config'
+
+export default (pluginName) => config.get('plugins')[pluginName]
diff --git a/app/lib/plugins/settings/index.js b/app/lib/plugins/settings/index.js
new file mode 100644
index 00000000..e89c363d
--- /dev/null
+++ b/app/lib/plugins/settings/index.js
@@ -0,0 +1,4 @@
+import get from './get'
+import validate from './validate'
+
+export default { get, validate }
diff --git a/app/lib/plugins/settings/validate.js b/app/lib/plugins/settings/validate.js
new file mode 100644
index 00000000..c58eaadd
--- /dev/null
+++ b/app/lib/plugins/settings/validate.js
@@ -0,0 +1,24 @@
+import { every } from 'lodash/fp'
+
+const VALID_TYPES = new Set([
+  'array',
+  'string',
+  'number',
+  'bool',
+  'option',
+])
+
+const validSetting = ({ type, options }) => {
+  // General validation of settings
+  if (!type || !VALID_TYPES.has(type)) return false
+
+  // Type-specific validations
+  if (type === 'option') return Array.isArray(options) && options.length
+
+  return true
+}
+
+export default ({ settings }) => {
+  if (!settings) return true
+  return every(validSetting)(settings)
+}
diff --git a/app/main/actions/search.js b/app/main/actions/search.js
index acfa80ef..31c21e47 100644
--- a/app/main/actions/search.js
+++ b/app/main/actions/search.js
@@ -2,6 +2,7 @@ import plugins from '../plugins/'
 import config from 'lib/config'
 import { shell, clipboard, remote } from 'electron'
 import store from '../store'
+import { settings as pluginSettings } from 'lib/plugins'
 
 import {
  UPDATE_TERM,
@@ -36,16 +37,8 @@ const DEFAULT_SCOPE = {
  * @param {Function} callback Callback function that receives used search term and found results
  */
 const eachPlugin = (term, display) => {
-  const externalSettings = config.get('external') || {}
   // TODO: order results by frequency?
   Object.keys(plugins).forEach(name => {
-    const settings = externalSettings[name]
-    if (settings) {
-      Object.keys(settings).forEach(key => {
-        settings[key] = settings[key].value
-      })
-    }
-
     try {
       plugins[name].fn({
         ...DEFAULT_SCOPE,
@@ -53,7 +46,7 @@ const eachPlugin = (term, display) => {
         hide: (id) => store.dispatch(hideElement(`${name}-${id}`)),
         update: (id, result) => store.dispatch(updateElement(`${name}-${id}`, result)),
         display: (payload) => display(name, payload),
-        settings,
+        settings: pluginSettings.get(name),
       })
     } catch (error) {
       // Do not fail on plugin errors, just log them to console
diff --git a/app/main/plugins/core/cerebro/settings/Settings/PluginSettings.js b/app/main/plugins/core/cerebro/settings/Settings/PluginSettings.js
new file mode 100644
index 00000000..3ae74e42
--- /dev/null
+++ b/app/main/plugins/core/cerebro/settings/Settings/PluginSettings.js
@@ -0,0 +1,60 @@
+import React, { PropTypes, Component } from 'react'
+import config from 'lib/config'
+import styles from './styles.css'
+import SettingsComponent from './components'
+
+export default class PluginSettings extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      values: config.get('plugins')[props.name],
+    }
+    this.renderSetting = this.renderSetting.bind(this)
+    this.changeSetting = this.changeSetting.bind(this)
+  }
+
+  changeSetting(plugin, label, value) {
+    const values = {
+      ...this.state.values,
+      [label]: value,
+    }
+
+    this.setState({ values })
+    config.set('plugins', {
+      ...config.get('plugins'),
+      [this.props.name]: values,
+    })
+  }
+
+  renderSetting(key) {
+    const setting = this.props.settings[key]
+    const { defaultValue, label, ...restProps } = setting
+    const value = key in this.state.values ? this.state.values[key] : defaultValue
+
+    return (
+      <SettingsComponent
+        key={key}
+        label={label || key}
+        value={value}
+        onChange={newValue => this.changeSetting(this.props.name, key, newValue)}
+        {...restProps}
+      />
+    )
+  }
+
+  render() {
+    return (
+      <div className={styles.settingItem}>
+        <label className={styles.header}>Settings</label>
+        {Object
+            .keys(this.props.settings)
+            .map(this.renderSetting)}
+      </div>
+    )
+  }
+}
+
+PluginSettings.propTypes = {
+  name: PropTypes.string.isRequired,
+  settings: PropTypes.object.isRequired,
+}
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/index.js b/app/main/plugins/core/cerebro/settings/Settings/components/index.js
index dcb8aa95..3ecb20a7 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/index.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/index.js
@@ -19,7 +19,7 @@ const SettingsComponent = ({ type, ...props }) => {
 }
 
 SettingsComponent.propTypes = {
-  value: PropTypes.any.isRequired,
+  value: PropTypes.any,
   type: PropTypes.string.isRequired,
 }
 
diff --git a/app/main/plugins/core/cerebro/settings/Settings/external-settings.js b/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
deleted file mode 100644
index caf2b571..00000000
--- a/app/main/plugins/core/cerebro/settings/Settings/external-settings.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { PropTypes, Component } from 'react'
-import styles from './styles.css'
-import SettingsComponent from './components'
-
-export default class ExternalSettings extends Component {
-  changeSetting(plugin, label, value) {
-    this.props.settings[plugin][label].value = value
-    this.props.onChange(this.props.settings)
-  }
-
-  renderSetting(label, setting, plugin) {
-    const { value, defaultValue, ...restProps } = setting
-
-    return (
-      <SettingsComponent
-        key={label}
-        label={label}
-        value={value || defaultValue}
-        onChange={newValue => this.changeSetting(plugin, label, newValue)}
-        {...restProps}
-      />
-    )
-  }
-
-  render() {
-    const { settings } = this.props
-
-    return (
-      <div>
-        {Object.keys(settings).map(plugin => (
-          <div key={plugin} className={styles.settingItem}>
-            <label className={styles.header}>{plugin}</label>
-
-            {Object.keys(settings[plugin]).map(label => {
-              const setting = settings[plugin][label]
-              return this.renderSetting(label, setting, plugin)
-            })}
-          </div>
-        ))}
-      </div>
-    )
-  }
-}
-
-ExternalSettings.propTypes = {
-  settings: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired,
-}
diff --git a/app/main/plugins/core/cerebro/settings/Settings/index.js b/app/main/plugins/core/cerebro/settings/Settings/index.js
index 8226b272..1199f9ec 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/index.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/index.js
@@ -4,7 +4,10 @@ import CountrySelect from './CountrySelect'
 import Select from 'react-select'
 import loadThemes from 'lib/loadThemes'
 import styles from './styles.css'
-import ExternalSettings from './external-settings'
+import PluginSettings from './PluginSettings'
+import plugins from 'main/plugins'
+
+import { pickBy } from 'lodash'
 
 class Settings extends Component {
   constructor(props) {
@@ -17,20 +20,47 @@ class Settings extends Component {
       theme: get('theme'),
       developerMode: get('developerMode'),
       cleanOnHide: get('cleanOnHide'),
-      external: get('external'),
+      pluginsSettings: get('plugins'),
     }
     this.changeConfig = this.changeConfig.bind(this)
   }
+  pluginChangeSettings(name) {
+    return updateSettings => {
+      const { pluginsSettings } = this.state
+      const newPluginsSettings = {
+        ...pluginsSettings,
+        [name]: updateSettings
+      }
+      this.setState({ pluginsSettings: newPluginsSettings })
+      this.changeConfig('plugins', newPluginsSettings)
+    }
+  }
   changeConfig(key, value) {
     this.props.set(key, value)
     this.setState({
       [key]: value
     })
   }
+  renderPluginsSettings() {
+    const { pluginsSettings } = this.state
+    const pluginsWithSettings = pickBy(plugins, p => p.settings)
+    return Object.keys(pluginsWithSettings).map(name => {
+      const { settings } = pluginsWithSettings[name]
+      return (
+        <PluginSettings
+          values={pluginsSettings[name] || {}}
+          settings={settings}
+          onChange={this.pluginChangeSettings(name)}
+        />
+      )
+    })
+  }
   render() {
     const {
-      hotkey, showInTray, country, theme, developerMode, cleanOnHide, external
+      hotkey, showInTray, country, theme, developerMode, cleanOnHide
     } = this.state
+
+
     return (
       <div className={styles.settings}>
         <div className={styles.item}>
@@ -113,10 +143,7 @@ class Settings extends Component {
           </div>
         </div>
 
-        <ExternalSettings
-          settings={external}
-          onChange={settings => this.changeConfig('external', settings)}
-        />
+        {this.renderPluginsSettings()}
       </div>
     )
   }
diff --git a/app/main/plugins/externalPlugins.js b/app/main/plugins/externalPlugins.js
index 0c9026a6..94513301 100644
--- a/app/main/plugins/externalPlugins.js
+++ b/app/main/plugins/externalPlugins.js
@@ -1,7 +1,7 @@
 import debounce from 'lodash/debounce'
 import chokidar from 'chokidar'
 import path from 'path'
-import { modulesDirectory, ensureFiles, addSettings } from 'lib/plugins'
+import { modulesDirectory, ensureFiles, settings } from 'lib/plugins'
 
 const requirePlugin = (pluginPath) => {
   try {
@@ -55,7 +55,12 @@ pluginsWatcher.on('addDir', (pluginPath) => {
       console.groupEnd()
       return
     }
-    addSettings(plugin, base)
+    if (!settings.validate(plugin)) {
+      console.log('Invalid plugins settings')
+      console.groupEnd()
+      return
+    }
+
     console.log('Loaded.')
     const requirePath = window.require.resolve(pluginPath)
     const watcher = chokidar.watch(requirePath, { depth: 0 })

From 6dd1f56d6b1feea6917813b5b9ff2d33a0484561 Mon Sep 17 00:00:00 2001
From: Ezinwa Okpoechi <brainmaestro@outlook.com>
Date: Mon, 20 Mar 2017 11:24:00 +0100
Subject: [PATCH 11/16] Save settings to config

---
 app/lib/plugins/settings/add.js               | 21 +++++++++++++++++++
 app/lib/plugins/settings/index.js             |  3 ++-
 .../settings/Settings/PluginSettings.js       |  6 ++++--
 .../settings/Settings/components/input.js     |  2 +-
 .../settings/Settings/components/select.js    |  4 ++--
 .../core/cerebro/settings/Settings/index.js   |  2 ++
 app/main/plugins/externalPlugins.js           |  3 +++
 7 files changed, 35 insertions(+), 6 deletions(-)
 create mode 100644 app/lib/plugins/settings/add.js

diff --git a/app/lib/plugins/settings/add.js b/app/lib/plugins/settings/add.js
new file mode 100644
index 00000000..b81f4403
--- /dev/null
+++ b/app/lib/plugins/settings/add.js
@@ -0,0 +1,21 @@
+import config from 'lib/config'
+
+export default (pluginName, { settings = {} }) => {
+  const pluginSettings = config.get('plugins')[pluginName] || {}
+  Object
+    .keys(settings)
+    .filter(key => !pluginSettings.hasOwnProperty(key))
+    .forEach(key => {
+      pluginSettings[key] = settings[key].defaultValue || null
+    })
+
+  Object
+    .keys(pluginSettings)
+    .filter(key => !settings.hasOwnProperty(key))
+    .forEach(key => delete pluginSettings[key])
+
+  config.set('plugins', {
+    ...config.get('plugins'),
+    [pluginName]: pluginSettings,
+  })
+}
diff --git a/app/lib/plugins/settings/index.js b/app/lib/plugins/settings/index.js
index e89c363d..18355b28 100644
--- a/app/lib/plugins/settings/index.js
+++ b/app/lib/plugins/settings/index.js
@@ -1,4 +1,5 @@
 import get from './get'
 import validate from './validate'
+import add from './add'
 
-export default { get, validate }
+export default { get, validate, add }
diff --git a/app/main/plugins/core/cerebro/settings/Settings/PluginSettings.js b/app/main/plugins/core/cerebro/settings/Settings/PluginSettings.js
index 3ae74e42..f064cdc1 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/PluginSettings.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/PluginSettings.js
@@ -46,9 +46,11 @@ export default class PluginSettings extends Component {
     return (
       <div className={styles.settingItem}>
         <label className={styles.header}>Settings</label>
-        {Object
+        {
+          Object
             .keys(this.props.settings)
-            .map(this.renderSetting)}
+            .map(this.renderSetting)
+        }
       </div>
     )
   }
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/input.js b/app/main/plugins/core/cerebro/settings/Settings/components/input.js
index 8797fa2a..ff52d1a7 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/input.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/input.js
@@ -7,7 +7,7 @@ const Input = ({ label, value, onChange, description, type }) => (
     <div className={styles.itemValue}>
       <input
         type={type}
-        value={value}
+        value={value || ''}
         className={styles.input}
         onChange={({ target }) => onChange(target.value)}
       />
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/select.js b/app/main/plugins/core/cerebro/settings/Settings/components/select.js
index f32c1f69..24a7dfc1 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/select.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/components/select.js
@@ -7,7 +7,7 @@ const Select = ({ label, value, onChange, description }) => (
     <div className={styles.itemValue}>
       <Creatable
         multi
-        value={value.map(val => ({ value: val, label: val }))}
+        value={(value || []).map(val => ({ value: val, label: val }))}
         placeholder={label}
         onChange={newValue => onChange(newValue.map(val => val.value))}
       />
@@ -18,7 +18,7 @@ const Select = ({ label, value, onChange, description }) => (
 
 Select.propTypes = {
   label: PropTypes.string,
-  value: PropTypes.arary,
+  value: PropTypes.array,
   onChange: PropTypes.func.isRequired,
   description: PropTypes.string,
 }
diff --git a/app/main/plugins/core/cerebro/settings/Settings/index.js b/app/main/plugins/core/cerebro/settings/Settings/index.js
index 1199f9ec..40a8f51f 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/index.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/index.js
@@ -48,6 +48,8 @@ class Settings extends Component {
       const { settings } = pluginsWithSettings[name]
       return (
         <PluginSettings
+          key={name}
+          name={name}
           values={pluginsSettings[name] || {}}
           settings={settings}
           onChange={this.pluginChangeSettings(name)}
diff --git a/app/main/plugins/externalPlugins.js b/app/main/plugins/externalPlugins.js
index 94513301..7e0a2004 100644
--- a/app/main/plugins/externalPlugins.js
+++ b/app/main/plugins/externalPlugins.js
@@ -61,6 +61,8 @@ pluginsWatcher.on('addDir', (pluginPath) => {
       return
     }
 
+    settings.add(base, plugin)
+
     console.log('Loaded.')
     const requirePath = window.require.resolve(pluginPath)
     const watcher = chokidar.watch(requirePath, { depth: 0 })
@@ -68,6 +70,7 @@ pluginsWatcher.on('addDir', (pluginPath) => {
       console.log(`[${base}] Update plugin`)
       delete window.require.cache[requirePath]
       plugins[base] = window.require(pluginPath)
+      settings.add(base, plugins[base])
       console.log(`[${base}] Plugin updated`)
     }, 1000))
     console.groupEnd()

From 3235a707f862f102353866ada164991b3fc67d5a Mon Sep 17 00:00:00 2001
From: Ezinwa Okpoechi <brainmaestro@outlook.com>
Date: Tue, 21 Mar 2017 10:42:13 +0100
Subject: [PATCH 12/16] Move plugin settings to plugins component preview

---
 .../core/cerebro/plugins/Preview/index.js     | 17 ++++++++++
 .../core/cerebro/settings/Settings/index.js   | 33 -------------------
 2 files changed, 17 insertions(+), 33 deletions(-)

diff --git a/app/main/plugins/core/cerebro/plugins/Preview/index.js b/app/main/plugins/core/cerebro/plugins/Preview/index.js
index 10a85cdb..52edb81c 100644
--- a/app/main/plugins/core/cerebro/plugins/Preview/index.js
+++ b/app/main/plugins/core/cerebro/plugins/Preview/index.js
@@ -3,12 +3,14 @@ import Preload from 'main/components/Preload'
 import KeyboardNav from 'main/components/KeyboardNav'
 import KeyboardNavItem from 'main/components/KeyboardNavItem'
 import ActionButton from './ActionButton.js'
+import PluginSettings from '../../settings/Settings/PluginSettings'
 import getReadme from '../getReadme'
 import ReactMarkdown from 'react-markdown'
 import styles from './styles.css'
 import trackEvent from 'lib/trackEvent'
 import * as format from '../format'
 import { client } from 'lib/plugins'
+import plugins from 'main/plugins'
 
 const isRelative = (src) => !src.match(/^(https?:|data:)/)
 const urlTransform = (repo, src) => {
@@ -22,8 +24,10 @@ class Preview extends Component {
   constructor(props) {
     super(props)
     this.onComplete = this.onComplete.bind(this)
+    const plugin = plugins[props.name] || {}
     this.state = {
       showDescription: false,
+      settings: plugin.settings,
     }
   }
 
@@ -60,6 +64,18 @@ class Preview extends Component {
     )
   }
 
+  renderPluginSettings() {
+    const { settings } = this.state
+    if (! settings) return ''
+
+    return (
+      <PluginSettings
+        name={this.props.name}
+        settings={settings}
+      />
+    )
+  }
+
   render() {
     const {
       name,
@@ -76,6 +92,7 @@ class Preview extends Component {
       <div className={styles.preview} key={name}>
         <h2>{format.name(name)} ({version})</h2>
         <p>{format.description(description)}</p>
+        {this.renderPluginSettings()}
         <KeyboardNav>
           <div className={styles.header}>
             {
diff --git a/app/main/plugins/core/cerebro/settings/Settings/index.js b/app/main/plugins/core/cerebro/settings/Settings/index.js
index 40a8f51f..afc291cb 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/index.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/index.js
@@ -4,10 +4,6 @@ import CountrySelect from './CountrySelect'
 import Select from 'react-select'
 import loadThemes from 'lib/loadThemes'
 import styles from './styles.css'
-import PluginSettings from './PluginSettings'
-import plugins from 'main/plugins'
-
-import { pickBy } from 'lodash'
 
 class Settings extends Component {
   constructor(props) {
@@ -24,39 +20,12 @@ class Settings extends Component {
     }
     this.changeConfig = this.changeConfig.bind(this)
   }
-  pluginChangeSettings(name) {
-    return updateSettings => {
-      const { pluginsSettings } = this.state
-      const newPluginsSettings = {
-        ...pluginsSettings,
-        [name]: updateSettings
-      }
-      this.setState({ pluginsSettings: newPluginsSettings })
-      this.changeConfig('plugins', newPluginsSettings)
-    }
-  }
   changeConfig(key, value) {
     this.props.set(key, value)
     this.setState({
       [key]: value
     })
   }
-  renderPluginsSettings() {
-    const { pluginsSettings } = this.state
-    const pluginsWithSettings = pickBy(plugins, p => p.settings)
-    return Object.keys(pluginsWithSettings).map(name => {
-      const { settings } = pluginsWithSettings[name]
-      return (
-        <PluginSettings
-          key={name}
-          name={name}
-          values={pluginsSettings[name] || {}}
-          settings={settings}
-          onChange={this.pluginChangeSettings(name)}
-        />
-      )
-    })
-  }
   render() {
     const {
       hotkey, showInTray, country, theme, developerMode, cleanOnHide
@@ -144,8 +113,6 @@ class Settings extends Component {
             </label>
           </div>
         </div>
-
-        {this.renderPluginsSettings()}
       </div>
     )
   }

From f3fc172df8f39bc2ea2d523aa24121bd5aca3394 Mon Sep 17 00:00:00 2001
From: Alexandr Subbotin <kelionweb@gmail.com>
Date: Mon, 3 Apr 2017 15:34:11 +0200
Subject: [PATCH 13/16] Removed `add` method from plugin settings

---
 app/lib/plugins/settings/add.js     | 21 ---------------------
 app/lib/plugins/settings/index.js   |  3 +--
 app/main/plugins/externalPlugins.js |  2 --
 3 files changed, 1 insertion(+), 25 deletions(-)
 delete mode 100644 app/lib/plugins/settings/add.js

diff --git a/app/lib/plugins/settings/add.js b/app/lib/plugins/settings/add.js
deleted file mode 100644
index b81f4403..00000000
--- a/app/lib/plugins/settings/add.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import config from 'lib/config'
-
-export default (pluginName, { settings = {} }) => {
-  const pluginSettings = config.get('plugins')[pluginName] || {}
-  Object
-    .keys(settings)
-    .filter(key => !pluginSettings.hasOwnProperty(key))
-    .forEach(key => {
-      pluginSettings[key] = settings[key].defaultValue || null
-    })
-
-  Object
-    .keys(pluginSettings)
-    .filter(key => !settings.hasOwnProperty(key))
-    .forEach(key => delete pluginSettings[key])
-
-  config.set('plugins', {
-    ...config.get('plugins'),
-    [pluginName]: pluginSettings,
-  })
-}
diff --git a/app/lib/plugins/settings/index.js b/app/lib/plugins/settings/index.js
index 18355b28..e89c363d 100644
--- a/app/lib/plugins/settings/index.js
+++ b/app/lib/plugins/settings/index.js
@@ -1,5 +1,4 @@
 import get from './get'
 import validate from './validate'
-import add from './add'
 
-export default { get, validate, add }
+export default { get, validate }
diff --git a/app/main/plugins/externalPlugins.js b/app/main/plugins/externalPlugins.js
index 7e0a2004..7f52f1ce 100644
--- a/app/main/plugins/externalPlugins.js
+++ b/app/main/plugins/externalPlugins.js
@@ -61,8 +61,6 @@ pluginsWatcher.on('addDir', (pluginPath) => {
       return
     }
 
-    settings.add(base, plugin)
-
     console.log('Loaded.')
     const requirePath = window.require.resolve(pluginPath)
     const watcher = chokidar.watch(requirePath, { depth: 0 })

From d77edc36f31b09800c6474be4edd17d67778423f Mon Sep 17 00:00:00 2001
From: Alexandr Subbotin <kelionweb@gmail.com>
Date: Mon, 3 Apr 2017 15:42:14 +0200
Subject: [PATCH 14/16] Refactor plugin settings

---
 .../Form/Checkbox.js}                         |   5 +-
 .../options.js => components/Form/Select.js}  |  30 +++--
 app/main/components/Form/Text.js              |  27 ++++
 app/main/components/Form/Wrapper.js           |  20 +++
 app/main/components/Form/index.js             |   7 +
 app/main/components/Form/styles.css           |  48 +++++++
 .../core/cerebro/plugins/Preview/FormItem.js  |  25 ++++
 .../Preview/Settings.js}                      |  15 +--
 .../core/cerebro/plugins/Preview/index.js     |  31 ++---
 .../core/cerebro/plugins/Preview/styles.css   |   4 +
 .../settings/Settings/CountrySelect/index.js  |   7 -
 .../{components/hotkey.js => Hotkey.js}       |   4 +-
 .../settings/Settings/components/index.js     |  26 ----
 .../settings/Settings/components/input.js     |  30 -----
 .../settings/Settings/components/select.js    |  26 ----
 .../Settings/{CountrySelect => }/countries.js |   0
 .../core/cerebro/settings/Settings/index.js   | 121 ++++++------------
 .../core/cerebro/settings/Settings/styles.css |  31 -----
 18 files changed, 209 insertions(+), 248 deletions(-)
 rename app/main/{plugins/core/cerebro/settings/Settings/components/checkbox.js => components/Form/Checkbox.js} (84%)
 rename app/main/{plugins/core/cerebro/settings/Settings/components/options.js => components/Form/Select.js} (51%)
 create mode 100644 app/main/components/Form/Text.js
 create mode 100644 app/main/components/Form/Wrapper.js
 create mode 100644 app/main/components/Form/index.js
 create mode 100644 app/main/components/Form/styles.css
 create mode 100644 app/main/plugins/core/cerebro/plugins/Preview/FormItem.js
 rename app/main/plugins/core/cerebro/{settings/Settings/PluginSettings.js => plugins/Preview/Settings.js} (77%)
 delete mode 100644 app/main/plugins/core/cerebro/settings/Settings/CountrySelect/index.js
 rename app/main/plugins/core/cerebro/settings/Settings/{components/hotkey.js => Hotkey.js} (97%)
 delete mode 100644 app/main/plugins/core/cerebro/settings/Settings/components/index.js
 delete mode 100644 app/main/plugins/core/cerebro/settings/Settings/components/input.js
 delete mode 100644 app/main/plugins/core/cerebro/settings/Settings/components/select.js
 rename app/main/plugins/core/cerebro/settings/Settings/{CountrySelect => }/countries.js (100%)

diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js b/app/main/components/Form/Checkbox.js
similarity index 84%
rename from app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
rename to app/main/components/Form/Checkbox.js
index 0eba641f..44b264c4 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/checkbox.js
+++ b/app/main/components/Form/Checkbox.js
@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react'
-import styles from '../styles.css'
+import styles from './styles.css'
 
 const Checkbox = ({ label, value, onChange, description }) => (
   <div className={styles.item}>
@@ -11,8 +11,9 @@ const Checkbox = ({ label, value, onChange, description }) => (
           onChange={({ target }) => onChange(target.checked)}
           className={styles.checkbox}
         />
-      {description}
+      {label}
       </label>
+      <div className={styles.itemNotice}>{description}</div>
     </div>
   </div>
 )
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/options.js b/app/main/components/Form/Select.js
similarity index 51%
rename from app/main/plugins/core/cerebro/settings/Settings/components/options.js
rename to app/main/components/Form/Select.js
index 7f1188ea..dcf01efd 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/options.js
+++ b/app/main/components/Form/Select.js
@@ -1,26 +1,26 @@
 import React, { PropTypes } from 'react'
-import Select from 'react-select'
-import styles from '../styles.css'
+import ReactSelect, { Creatable } from 'react-select'
+import Wrapper from './Wrapper'
 
-const Options = ({ label, value, onChange, description, options, multi }) => (
-  <div className={styles.item}>
-    <div className={styles.itemValue}>
-      <Select
+const Select = ({ label, value, onChange, description, options, multi, clearable, creatable }) => {
+  const Component = creatable ? Creatable : ReactSelect
+  return (
+    <Wrapper label={label} description={description}>
+      <Component
         multi={multi}
         value={value}
-        placeholder={label}
-        options={options.map(option => ({ label: option, value: option }))}
+        clearable={clearable}
+        options={options}
         onChange={newValue => {
           const changedValue = multi ? newValue.map(val => val.value) : newValue.value
           onChange(changedValue)
         }}
       />
-      <div className={styles.itemNotice}>{description}</div>
-    </div>
-  </div>
-)
+    </Wrapper>
+  )
+}
 
-Options.propTypes = {
+Select.propTypes = {
   label: PropTypes.string,
   value: PropTypes.oneOfType([
     PropTypes.string,
@@ -31,6 +31,8 @@ Options.propTypes = {
   description: PropTypes.string,
   options: PropTypes.array.isRequired,
   multi: PropTypes.bool,
+  clearable: PropTypes.bool,
+  creatable: PropTypes.bool
 }
 
-export default Options
+export default Select
diff --git a/app/main/components/Form/Text.js b/app/main/components/Form/Text.js
new file mode 100644
index 00000000..c16b4e12
--- /dev/null
+++ b/app/main/components/Form/Text.js
@@ -0,0 +1,27 @@
+import React, { PropTypes } from 'react'
+import Wrapper from './Wrapper'
+import styles from './styles.css'
+
+const Input = ({ label, value, onChange, description, type }) => (
+  <Wrapper label={label} description={description}>
+    <input
+      type={type}
+      value={value || ''}
+      className={styles.input}
+      onChange={({ target }) => onChange(target.value)}
+    />
+  </Wrapper>
+)
+
+Input.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  onChange: PropTypes.func.isRequired,
+  description: PropTypes.string,
+  type: PropTypes.string.isRequired,
+}
+
+export default Input
diff --git a/app/main/components/Form/Wrapper.js b/app/main/components/Form/Wrapper.js
new file mode 100644
index 00000000..5bd7adca
--- /dev/null
+++ b/app/main/components/Form/Wrapper.js
@@ -0,0 +1,20 @@
+import React, { PropTypes } from 'react'
+import styles from './styles.css'
+
+const Wrapper = ({ label, description, children }) => (
+  <div className={styles.item}>
+    {label && <label className={styles.label}>{label}:</label>}
+    <div className={label ? styles.itemValue : styles.itemValueWithoutLabel}>
+      {children}
+      <div className={styles.itemNotice}>{description}</div>
+    </div>
+  </div>
+)
+
+Wrapper.propTypes = {
+  label: PropTypes.string,
+  description: PropTypes.string,
+  children: PropTypes.any
+}
+
+export default Wrapper
diff --git a/app/main/components/Form/index.js b/app/main/components/Form/index.js
new file mode 100644
index 00000000..8863cb96
--- /dev/null
+++ b/app/main/components/Form/index.js
@@ -0,0 +1,7 @@
+import Checkbox from './Checkbox'
+import Text from './Text'
+import Select from './Select'
+
+export {
+  Checkbox, Text, Select
+}
diff --git a/app/main/components/Form/styles.css b/app/main/components/Form/styles.css
new file mode 100644
index 00000000..bfae693d
--- /dev/null
+++ b/app/main/components/Form/styles.css
@@ -0,0 +1,48 @@
+.item {
+  display: flex;
+  flex-direction: row;
+  width: 250px;
+  margin-top: 20px;
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.itemValue {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 2;
+}
+
+.itemValueWithoutLabel {
+  composes: itemValue;
+  margin-left: 75px;
+}
+
+.itemNotice{
+  color: var(--secondary-font-color);
+  font-size: .8em;
+  margin-top: 5px;
+}
+
+.label {
+  margin-right: 15px;
+  margin-top: 8px;
+  min-width: 60px;
+  max-width: 60px;
+}
+
+.input {
+  font-size: 16px;
+  line-height: 34px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  width: 100%;
+  border-color: #d9d9d9 #ccc #b3b3b3;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+
+.checkbox {
+  margin-right: 5px;
+}
diff --git a/app/main/plugins/core/cerebro/plugins/Preview/FormItem.js b/app/main/plugins/core/cerebro/plugins/Preview/FormItem.js
new file mode 100644
index 00000000..f02d16c1
--- /dev/null
+++ b/app/main/plugins/core/cerebro/plugins/Preview/FormItem.js
@@ -0,0 +1,25 @@
+import React, { PropTypes } from 'react'
+import { Select, Text, Checkbox } from 'main/components/Form'
+
+const components = {
+  bool: Checkbox,
+  option: Select,
+  array: Select,
+}
+
+const FormItem = ({ type, ...props }) => {
+  const Component = components[type] || Text
+
+  return (
+    <Component type={type} {...props} />
+  )
+}
+
+FormItem.propTypes = {
+  value: PropTypes.any,
+  type: PropTypes.string.isRequired,
+}
+
+export default FormItem
+
+
diff --git a/app/main/plugins/core/cerebro/settings/Settings/PluginSettings.js b/app/main/plugins/core/cerebro/plugins/Preview/Settings.js
similarity index 77%
rename from app/main/plugins/core/cerebro/settings/Settings/PluginSettings.js
rename to app/main/plugins/core/cerebro/plugins/Preview/Settings.js
index f064cdc1..a3dd3e51 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/PluginSettings.js
+++ b/app/main/plugins/core/cerebro/plugins/Preview/Settings.js
@@ -1,9 +1,9 @@
 import React, { PropTypes, Component } from 'react'
 import config from 'lib/config'
+import FormItem from './FormItem'
 import styles from './styles.css'
-import SettingsComponent from './components'
 
-export default class PluginSettings extends Component {
+export default class Settings extends Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -32,7 +32,7 @@ export default class PluginSettings extends Component {
     const value = key in this.state.values ? this.state.values[key] : defaultValue
 
     return (
-      <SettingsComponent
+      <FormItem
         key={key}
         label={label || key}
         value={value}
@@ -44,19 +44,16 @@ export default class PluginSettings extends Component {
 
   render() {
     return (
-      <div className={styles.settingItem}>
-        <label className={styles.header}>Settings</label>
+      <div className={styles.settingsWrapper}>
         {
-          Object
-            .keys(this.props.settings)
-            .map(this.renderSetting)
+          Object.keys(this.props.settings).map(this.renderSetting)
         }
       </div>
     )
   }
 }
 
-PluginSettings.propTypes = {
+Settings.propTypes = {
   name: PropTypes.string.isRequired,
   settings: PropTypes.object.isRequired,
 }
diff --git a/app/main/plugins/core/cerebro/plugins/Preview/index.js b/app/main/plugins/core/cerebro/plugins/Preview/index.js
index 52edb81c..a9c67f3a 100644
--- a/app/main/plugins/core/cerebro/plugins/Preview/index.js
+++ b/app/main/plugins/core/cerebro/plugins/Preview/index.js
@@ -3,7 +3,7 @@ import Preload from 'main/components/Preload'
 import KeyboardNav from 'main/components/KeyboardNav'
 import KeyboardNavItem from 'main/components/KeyboardNavItem'
 import ActionButton from './ActionButton.js'
-import PluginSettings from '../../settings/Settings/PluginSettings'
+import Settings from './Settings'
 import getReadme from '../getReadme'
 import ReactMarkdown from 'react-markdown'
 import styles from './styles.css'
@@ -24,10 +24,9 @@ class Preview extends Component {
   constructor(props) {
     super(props)
     this.onComplete = this.onComplete.bind(this)
-    const plugin = plugins[props.name] || {}
     this.state = {
       showDescription: false,
-      settings: plugin.settings,
+      showSettings: false,
     }
   }
 
@@ -64,18 +63,6 @@ class Preview extends Component {
     )
   }
 
-  renderPluginSettings() {
-    const { settings } = this.state
-    if (! settings) return ''
-
-    return (
-      <PluginSettings
-        name={this.props.name}
-        settings={settings}
-      />
-    )
-  }
-
   render() {
     const {
       name,
@@ -87,14 +74,21 @@ class Preview extends Component {
       isUpdateAvailable
     } = this.props
     const githubRepo = repo && repo.match(/^.+github.com\/([^\/]+\/[^\/]+).*?/)
-    const runningAction = this.state.runningAction
+    const { runningAction, showSettings } = this.state
+    const settings = plugins[name] ? plugins[name].settings : null
     return (
       <div className={styles.preview} key={name}>
         <h2>{format.name(name)} ({version})</h2>
         <p>{format.description(description)}</p>
-        {this.renderPluginSettings()}
         <KeyboardNav>
           <div className={styles.header}>
+            {
+              settings &&
+                <KeyboardNavItem onSelect={() => this.setState({ showSettings: !this.state.showSettings })}>
+                  Settings
+                </KeyboardNavItem>
+            }
+            {showSettings && <Settings name={name} settings={settings} />}
             {
               !isInstalled &&
                 <ActionButton
@@ -126,7 +120,7 @@ class Preview extends Component {
             {
               githubRepo &&
                 <KeyboardNavItem
-                  onSelect={() => this.setState({ showDescription: true })}
+                  onSelect={() => this.setState({ showDescription: !this.state.showDescription })}
                 >
                   Details
                 </KeyboardNavItem>
@@ -141,6 +135,7 @@ class Preview extends Component {
 
 Preview.propTypes = {
   name: PropTypes.string.isRequired,
+  settings: PropTypes.object,
   version: PropTypes.string.isRequired,
   description: PropTypes.string,
   repo: PropTypes.string,
diff --git a/app/main/plugins/core/cerebro/plugins/Preview/styles.css b/app/main/plugins/core/cerebro/plugins/Preview/styles.css
index e7facb14..da997e14 100644
--- a/app/main/plugins/core/cerebro/plugins/Preview/styles.css
+++ b/app/main/plugins/core/cerebro/plugins/Preview/styles.css
@@ -94,3 +94,7 @@
     margin-top: 0.25em;
   }
 }
+
+.settingsWrapper {
+  margin: 15px 0;
+}
diff --git a/app/main/plugins/core/cerebro/settings/Settings/CountrySelect/index.js b/app/main/plugins/core/cerebro/settings/Settings/CountrySelect/index.js
deleted file mode 100644
index ff2bb713..00000000
--- a/app/main/plugins/core/cerebro/settings/Settings/CountrySelect/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-import countries from './countries'
-import Select from 'react-select'
-
-export default (props) => (
-  <Select {...props} options={countries} />
-)
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/hotkey.js b/app/main/plugins/core/cerebro/settings/Settings/Hotkey.js
similarity index 97%
rename from app/main/plugins/core/cerebro/settings/Settings/components/hotkey.js
rename to app/main/plugins/core/cerebro/settings/Settings/Hotkey.js
index 8719ca66..1a8a2d61 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/components/hotkey.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/Hotkey.js
@@ -1,5 +1,5 @@
 import React, { PropTypes, Component } from 'react'
-import styles from '../styles.css'
+import styles from './styles.css'
 
 const ASCII = {
   188: '44',
@@ -124,7 +124,7 @@ class Hotkey extends Component {
     const { hotkey } = this.props
     const keys = hotkey.split('+').map(keyToSign).join(osKeyDelimiter)
     return (
-      <div className={styles.hotkey}>
+      <div>
         <input
           className={styles.input}
           type="text"
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/index.js b/app/main/plugins/core/cerebro/settings/Settings/components/index.js
deleted file mode 100644
index 3ecb20a7..00000000
--- a/app/main/plugins/core/cerebro/settings/Settings/components/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { PropTypes } from 'react'
-import Checkbox from './checkbox'
-import Input from './input'
-import Select from './select'
-import Options from './options'
-
-const components = {
-  bool: Checkbox,
-  option: Options,
-  array: Select,
-}
-
-const SettingsComponent = ({ type, ...props }) => {
-  const Component = components[type] || Input
-
-  return (
-    <Component type={type} {...props} />
-  )
-}
-
-SettingsComponent.propTypes = {
-  value: PropTypes.any,
-  type: PropTypes.string.isRequired,
-}
-
-export default SettingsComponent
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/input.js b/app/main/plugins/core/cerebro/settings/Settings/components/input.js
deleted file mode 100644
index ff52d1a7..00000000
--- a/app/main/plugins/core/cerebro/settings/Settings/components/input.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { PropTypes } from 'react'
-import styles from '../styles.css'
-
-const Input = ({ label, value, onChange, description, type }) => (
-  <div className={styles.item}>
-    <label className={styles.label}>{label}:</label>
-    <div className={styles.itemValue}>
-      <input
-        type={type}
-        value={value || ''}
-        className={styles.input}
-        onChange={({ target }) => onChange(target.value)}
-      />
-      <div className={styles.itemNotice}>{description}</div>
-    </div>
-  </div>
-)
-
-Input.propTypes = {
-  label: PropTypes.string,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-  onChange: PropTypes.func.isRequired,
-  description: PropTypes.string,
-  type: PropTypes.string.isRequired,
-}
-
-export default Input
diff --git a/app/main/plugins/core/cerebro/settings/Settings/components/select.js b/app/main/plugins/core/cerebro/settings/Settings/components/select.js
deleted file mode 100644
index 24a7dfc1..00000000
--- a/app/main/plugins/core/cerebro/settings/Settings/components/select.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { PropTypes } from 'react'
-import { Creatable } from 'react-select'
-import styles from '../styles.css'
-
-const Select = ({ label, value, onChange, description }) => (
-  <div className={styles.item}>
-    <div className={styles.itemValue}>
-      <Creatable
-        multi
-        value={(value || []).map(val => ({ value: val, label: val }))}
-        placeholder={label}
-        onChange={newValue => onChange(newValue.map(val => val.value))}
-      />
-      <div className={styles.itemNotice}>{description}</div>
-    </div>
-  </div>
-)
-
-Select.propTypes = {
-  label: PropTypes.string,
-  value: PropTypes.array,
-  onChange: PropTypes.func.isRequired,
-  description: PropTypes.string,
-}
-
-export default Select
diff --git a/app/main/plugins/core/cerebro/settings/Settings/CountrySelect/countries.js b/app/main/plugins/core/cerebro/settings/Settings/countries.js
similarity index 100%
rename from app/main/plugins/core/cerebro/settings/Settings/CountrySelect/countries.js
rename to app/main/plugins/core/cerebro/settings/Settings/countries.js
diff --git a/app/main/plugins/core/cerebro/settings/Settings/index.js b/app/main/plugins/core/cerebro/settings/Settings/index.js
index afc291cb..648bc9d2 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/index.js
+++ b/app/main/plugins/core/cerebro/settings/Settings/index.js
@@ -1,7 +1,8 @@
 import React, { PropTypes, Component } from 'react'
-import Hotkey from './components/hotkey'
-import CountrySelect from './CountrySelect'
-import Select from 'react-select'
+import Hotkey from './Hotkey'
+import countries from './countries'
+import { Select, Checkbox } from 'main/components/Form'
+import Wrapper from 'main/components/Form/Wrapper'
 import loadThemes from 'lib/loadThemes'
 import styles from './styles.css'
 
@@ -31,88 +32,42 @@ class Settings extends Component {
       hotkey, showInTray, country, theme, developerMode, cleanOnHide
     } = this.state
 
-
     return (
       <div className={styles.settings}>
-        <div className={styles.item}>
-          <label className={styles.label}>Hotkey:</label>
-          <div className={styles.itemValue}>
-            <Hotkey
-              hotkey={hotkey}
-              onChange={(key) => this.changeConfig('hotkey', key)}
-            />
-            <div className={styles.itemNotice}>
-              Type your global shortcut for Cerebro in this input.
-            </div>
-          </div>
-        </div>
-
-        <div className={styles.item}>
-          <label className={styles.label}>Country:</label>
-          <div className={styles.itemValue}>
-            <CountrySelect
-              value={country}
-              onChange={({ value }) => this.changeConfig('country', value)}
-            />
-            <div className={styles.itemNotice}>
-              Choose your country so Cerebro can better choose currency, language, etc.
-            </div>
-          </div>
-        </div>
-
-        <div className={styles.item}>
-          <label className={styles.label}>Theme:</label>
-          <div className={styles.itemValue}>
-            <Select
-              value={theme}
-              options={loadThemes()}
-              clearable={false}
-              onChange={({ value }) => this.changeConfig('theme', value)}
-            />
-          </div>
-        </div>
-
-        <div className={styles.item}>
-          <div className={styles.itemValueWithoutLabel}>
-            <label>
-              <input
-                type="checkbox"
-                checked={showInTray}
-                onChange={({ target }) => this.changeConfig('showInTray', target.checked)}
-                className={styles.checkbox}
-              />
-              Show in menu bar
-            </label>
-          </div>
-        </div>
-
-        <div className={styles.item}>
-          <div className={styles.itemValueWithoutLabel}>
-            <label>
-              <input
-                type="checkbox"
-                checked={developerMode}
-                onChange={({ target }) => this.changeConfig('developerMode', target.checked)}
-                className={styles.checkbox}
-              />
-              Developer Mode
-            </label>
-          </div>
-        </div>
-
-        <div className={styles.item}>
-          <div className={styles.itemValueWithoutLabel}>
-            <label>
-              <input
-                type="checkbox"
-                checked={cleanOnHide}
-                onChange={({ target }) => this.changeConfig('cleanOnHide', target.checked)}
-                className={styles.checkbox}
-              />
-              Clean results on hide
-            </label>
-          </div>
-        </div>
+        <Wrapper label="Hotkey" description="Type your global shortcut for Cerebro in this input">
+          <Hotkey
+            hotkey={hotkey}
+            onChange={(key) => this.changeConfig('hotkey', key)}
+          />
+        </Wrapper>
+        <Select
+          label="Country"
+          description="Choose your country so Cerebro can better choose currency, language, etc."
+          value={country}
+          options={countries}
+          onChange={value => this.changeConfig('country', value)}
+        />
+        <Select
+          label="Theme"
+          value={theme}
+          options={loadThemes()}
+          onChange={value => this.changeConfig('theme', value)}
+        />
+        <Checkbox
+          label="Show in menu bar"
+          value={showInTray}
+          onChange={value => this.changeConfig('showInTray', value)}
+        />
+        <Checkbox
+          label="Developer Mode"
+          value={developerMode}
+          onChange={value => this.changeConfig('developerMode', value)}
+        />
+        <Checkbox
+          label="Clean results on hide"
+          value={cleanOnHide}
+          onChange={value => this.changeConfig('cleanOnHide', value)}
+        />
       </div>
     )
   }
diff --git a/app/main/plugins/core/cerebro/settings/Settings/styles.css b/app/main/plugins/core/cerebro/settings/Settings/styles.css
index dd6bd0e0..30ad0f95 100644
--- a/app/main/plugins/core/cerebro/settings/Settings/styles.css
+++ b/app/main/plugins/core/cerebro/settings/Settings/styles.css
@@ -5,33 +5,6 @@
   align-items: center;
 }
 
-.item {
-  display: flex;
-  flex-direction: row;
-  width: 250px;
-  margin-top: 20px;
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-.itemValue {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 2;
-}
-
-.itemValueWithoutLabel {
-  composes: itemValue;
-  margin-left: 75px;
-}
-
-.itemNotice{
-  color: var(--secondary-font-color);
-  font-size: .8em;
-  margin-top: 5px;
-}
-
 .label {
   margin-right: 15px;
   margin-top: 8px;
@@ -56,10 +29,6 @@
   font-weight: bold;
 }
 
-.hotkey {
-
-}
-
 .input {
   font-size: 16px;
   line-height: 34px;

From 57557c1059feb666aed2cf00c5de1556c5365b35 Mon Sep 17 00:00:00 2001
From: Alexandr Subbotin <kelionweb@gmail.com>
Date: Mon, 3 Apr 2017 15:51:44 +0200
Subject: [PATCH 15/16] Fix null/undefined value in select

---
 app/main/components/Form/Select.js                        | 3 +++
 app/main/plugins/core/cerebro/plugins/Preview/FormItem.js | 2 --
 app/main/plugins/core/cerebro/plugins/Preview/index.js    | 4 +++-
 test/actions/search.spec.js                               | 6 +++++-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/main/components/Form/Select.js b/app/main/components/Form/Select.js
index dcf01efd..050367b9 100644
--- a/app/main/components/Form/Select.js
+++ b/app/main/components/Form/Select.js
@@ -12,6 +12,9 @@ const Select = ({ label, value, onChange, description, options, multi, clearable
         clearable={clearable}
         options={options}
         onChange={newValue => {
+          if (!newValue) {
+            return newValue
+          }
           const changedValue = multi ? newValue.map(val => val.value) : newValue.value
           onChange(changedValue)
         }}
diff --git a/app/main/plugins/core/cerebro/plugins/Preview/FormItem.js b/app/main/plugins/core/cerebro/plugins/Preview/FormItem.js
index f02d16c1..de9197db 100644
--- a/app/main/plugins/core/cerebro/plugins/Preview/FormItem.js
+++ b/app/main/plugins/core/cerebro/plugins/Preview/FormItem.js
@@ -21,5 +21,3 @@ FormItem.propTypes = {
 }
 
 export default FormItem
-
-
diff --git a/app/main/plugins/core/cerebro/plugins/Preview/index.js b/app/main/plugins/core/cerebro/plugins/Preview/index.js
index a9c67f3a..bb2a27f1 100644
--- a/app/main/plugins/core/cerebro/plugins/Preview/index.js
+++ b/app/main/plugins/core/cerebro/plugins/Preview/index.js
@@ -84,7 +84,9 @@ class Preview extends Component {
           <div className={styles.header}>
             {
               settings &&
-                <KeyboardNavItem onSelect={() => this.setState({ showSettings: !this.state.showSettings })}>
+                <KeyboardNavItem
+                  onSelect={() => this.setState({ showSettings: !this.state.showSettings })}
+                >
                   Settings
                 </KeyboardNavItem>
             }
diff --git a/test/actions/search.spec.js b/test/actions/search.spec.js
index 54213b5d..c02c7f61 100644
--- a/test/actions/search.spec.js
+++ b/test/actions/search.spec.js
@@ -17,10 +17,14 @@ const pluginsMock = {
   'test-plugin': testPlugin
 }
 
+
 const actions = searchInjector({
   electron: {},
   '../plugins/': pluginsMock,
-  'lib/config': {}
+  'lib/config': {},
+  'lib/plugins': {
+    get: () => undefined
+  }
 })
 
 describe('reset', () => {

From 7d644e0c9b38d87794854d06374c738bd16b13c6 Mon Sep 17 00:00:00 2001
From: Ezinwa Okpoechi <brainmaestro@outlook.com>
Date: Thu, 6 Apr 2017 17:41:30 +0100
Subject: [PATCH 16/16] Remove add settings call

---
 app/main/plugins/externalPlugins.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/main/plugins/externalPlugins.js b/app/main/plugins/externalPlugins.js
index 7f52f1ce..94513301 100644
--- a/app/main/plugins/externalPlugins.js
+++ b/app/main/plugins/externalPlugins.js
@@ -68,7 +68,6 @@ pluginsWatcher.on('addDir', (pluginPath) => {
       console.log(`[${base}] Update plugin`)
       delete window.require.cache[requirePath]
       plugins[base] = window.require(pluginPath)
-      settings.add(base, plugins[base])
       console.log(`[${base}] Plugin updated`)
     }, 1000))
     console.groupEnd()