Hotkey settingの時Alertで結果を出す

Folder nameが長すぎ雨時のlayout崩れ解決
ArticleNavigatorの余計なスペースをなくす
Default articleの誤字直し

lib/components/modal/Preference/AppSettingTab.js

@@ -9,10 +9,33 @@ export default class AppSettingTab extends React.Component {
     let keymap = remote.getGlobal('keymap')
 
     this.state = {
-      toggleFinder: keymap.toggleFinder
+      toggleFinder: keymap.toggleFinder,
+      alert: null
     }
   }
 
+  componentDidMount () {
+    this.handleSettingDone = () => {
+      this.setState({alert: {
+        type: 'success',
+        message: 'Successfully done!'
+      }})
+    }
+    this.handleSettingError = err => {
+      this.setState({alert: {
+        type: 'error',
+        message: err.message
+      }})
+    }
+    ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
+  componentWillUnmount () {
+    ipc.removeListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
   handleSaveButtonClick (e) {
     ipc.send('hotkeyUpdated', {
       toggleFinder: this.state.toggleFinder
@@ -20,6 +43,13 @@ export default class AppSettingTab extends React.Component {
   }
 
   render () {
+    let alert = this.state.alert
+    let alertElement = alert != null ? (
+        <p className={`alert ${alert.type}`}>
+          {alert.message}
+        </p>
+      ) : null
+
     return (
       <div className='AppSettingTab content'>
         <div className='section'>
@@ -30,6 +60,7 @@ export default class AppSettingTab extends React.Component {
           </div>
           <div className='sectionConfirm'>
             <button onClick={e => this.handleSaveButtonClick(e)}>Save</button>
+            {alertElement}
           </div>
           <div className='description'>
             <ul>