From 65c969a32169970fd80db5792e9da7eb96756f63 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Mon, 18 Apr 2016 04:37:00 +0900
Subject: [PATCH 001/109] move devtool to main-menu

---
 browser/main/index.js |  9 ---------
 lib/main-menu.js      | 10 ++++++++++
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/browser/main/index.js b/browser/main/index.js
index 96cb5edb..6b146c27 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -10,15 +10,6 @@ import activityRecord from 'browser/lib/activityRecord'
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const path = require('path')
-const remote = electron.remote
-
-if (process.env.NODE_ENV !== 'production') {
-  window.addEventListener('keydown', function (e) {
-    if (e.keyCode === 73 && e.metaKey && e.altKey) {
-      remote.getCurrentWindow().toggleDevTools()
-    }
-  })
-}
 
 activityRecord.init()
 window.addEventListener('online', function () {
diff --git a/lib/main-menu.js b/lib/main-menu.js
index 678dfaa9..6accf63b 100644
--- a/lib/main-menu.js
+++ b/lib/main-menu.js
@@ -146,6 +146,16 @@ var view = {
       click: function () {
         BrowserWindow.getFocusedWindow().reload()
       }
+    },
+    {
+      label: 'Toggle Developer Tools',
+      accelerator: (function () {
+        if (process.platform === 'darwin') return 'Command+Alt+I'
+        else return 'Ctrl+Shift+I'
+      })(),
+      click: function () {
+        BrowserWindow.getFocusedWindow().toggleDevTools()
+      }
     }
   ]
 }

From d878028dccc28d75449e0503ae6b6da9f6557d77 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Mon, 18 Apr 2016 04:39:53 +0900
Subject: [PATCH 002/109] add season & css modules

---
 package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/package.json b/package.json
index 8f844d8e..ffa5b826 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "markdown-it-math": "^3.0.2",
     "md5": "^2.0.0",
     "moment": "^2.10.3",
+    "season": "^5.3.0",
     "superagent": "^1.2.0",
     "superagent-promise": "^1.0.3"
   },
@@ -64,6 +65,7 @@
     "history": "^1.17.0",
     "nib": "^1.1.0",
     "react": "^0.14.3",
+    "react-css-modules": "^3.7.6",
     "react-dom": "^0.14.3",
     "react-redux": "^4.0.6",
     "redux": "^3.0.5",

From 948377ba9371c27e56001ede7d8896aa22b0ce94 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Mon, 18 Apr 2016 05:47:13 +0900
Subject: [PATCH 003/109] Use browser target dist of react stuff

for faster compile
---
 gruntfile.js        | 26 ++++++++++++++++++++++++++
 lib/finder.html     |  4 ++++
 lib/main.html       |  4 ++++
 package.json        |  5 +++--
 webpack-skeleton.js | 17 +++++++++++++++--
 5 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/gruntfile.js b/gruntfile.js
index e4ab430f..e2cb3cfc 100644
--- a/gruntfile.js
+++ b/gruntfile.js
@@ -1,6 +1,8 @@
 const path = require('path')
 const ChildProcess = require('child_process')
 const packager = require('electron-packager')
+const fs = require('fs')
+const merge = require('merge-stream')
 
 module.exports = function (grunt) {
   var auth_code
@@ -55,6 +57,30 @@ module.exports = function (grunt) {
   grunt.loadNpmTasks('grunt-electron-installer')
   grunt.loadNpmTasks('grunt-electron-installer-debian')
 
+  grunt.registerTask('copy', function () {
+    var done = this.async()
+    var targetPaths = [
+      'node_modules/react/dist/react.min.js',
+      'node_modules/react-dom/dist/react-dom.min.js',
+      'node_modules/react-redux/dist/react-redux.min.js',
+      'node_modules/redux/dist/redux.min.js'
+    ]
+
+    var merged = merge()
+    targetPaths.forEach(function (targetPath) {
+      var read = fs
+        .createReadStream(path.resolve(__dirname, targetPath))
+      var write = fs.createWriteStream(path.resolve(__dirname, 'compiled', path.basename(targetPath)))
+      read.pipe(write)
+      merged.add(read)
+    })
+
+    merged
+      .on('end', function () {
+        done()
+      })
+  })
+
   grunt.registerTask('compile', function () {
     var done = this.async()
     var execPath = path.join('node_modules', '.bin', 'webpack') + ' --config webpack-production.config.js'
diff --git a/lib/finder.html b/lib/finder.html
index c802dd3d..50412a5d 100644
--- a/lib/finder.html
+++ b/lib/finder.html
@@ -29,6 +29,10 @@
   <div id="content"></div>
   <script src="../submodules/ace/src-min/ace.js"></script>
   <script src="../resources/katex.min.js"></script>
+  <script src="../compiled/react.min.js"></script>
+  <script src="../compiled/react-dom.min.js"></script>
+  <script src="../compiled/redux.min.js"></script>
+  <script src="../compiled/react-redux.min.js"></script>
   <script>
     const electron = require('electron')
     electron.webFrame.setZoomLevelLimits(1, 1)
diff --git a/lib/main.html b/lib/main.html
index 6e413f01..3d032869 100644
--- a/lib/main.html
+++ b/lib/main.html
@@ -57,6 +57,10 @@
 
   <script src="../submodules/ace/src-min/ace.js"></script>
   <script src="../resources/katex.min.js"></script>
+  <script src="../compiled/react.min.js"></script>
+  <script src="../compiled/react-dom.min.js"></script>
+  <script src="../compiled/redux.min.js"></script>
+  <script src="../compiled/react-redux.min.js"></script>
   <script type='text/javascript'>
     const electron = require('electron')
     electron.webFrame.setZoomLevelLimits(1, 1)
diff --git a/package.json b/package.json
index ffa5b826..b2a66111 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,13 @@
 {
   "name": "boost",
-  "version": "0.5.9",
+  "version": "0.6.0",
   "description": "Boostnote",
   "main": "index.js",
   "scripts": {
     "start": "electron ./index.js",
     "hot": "electron ./index.js --hot",
-    "webpack": "webpack-dev-server --hot --inline --config webpack.config.js"
+    "webpack": "webpack-dev-server --hot --inline --config webpack.config.js",
+    "postinstall": "grunt copy"
   },
   "config": {
     "electron-version": "0.36.11"
diff --git a/webpack-skeleton.js b/webpack-skeleton.js
index 68b3f760..1cec52df 100644
--- a/webpack-skeleton.js
+++ b/webpack-skeleton.js
@@ -19,9 +19,15 @@ var config = {
     new webpack.NoErrorsPlugin(),
     new NodeTargetPlugin()
   ],
+  stylus: {
+    use: [require('nib')()],
+    import: [
+      '~nib/lib/nib/index.styl',
+      path.resolve(__dirname, 'browser/styles/index.styl')
+    ]
+  },
   externals: [
     'electron',
-    'socket.io-client',
     'md5',
     'superagent',
     'superagent-promise',
@@ -33,7 +39,14 @@ var config = {
     'fs-jetpack',
     'markdown-it-math',
     '@rokt33r/sanitize-html',
-    'markdown-it-checkbox'
+    'markdown-it-checkbox',
+    'season',
+    {
+      react: 'var React',
+      'react-dom': 'var ReactDOM',
+      'react-redux': 'var ReactRedux',
+      'redux': 'var Redux'
+    }
   ]
 }
 

From d06d52dedaf03dfa1279b71ee3d82167e1159c34 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Mon, 18 Apr 2016 12:43:34 +0900
Subject: [PATCH 004/109] ready to use CSSModules

---
 browser/styles/index.styl      | 32 ++++++++++++++++++++++++++++++++
 browser/styles/main/index.styl |  1 -
 webpack-production.config.js   |  2 +-
 webpack.config.js              |  2 +-
 4 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 browser/styles/index.styl

diff --git a/browser/styles/index.styl b/browser/styles/index.styl
new file mode 100644
index 00000000..a00ef8a5
--- /dev/null
+++ b/browser/styles/index.styl
@@ -0,0 +1,32 @@
+$brand-color = #2BAC8F
+
+$danger-color = red
+$danger-lighten-color = #FFE5E6
+
+
+/*
+* # Border
+*/
+$border-color = #D0D0D0
+$active-border-color = #369DCD
+
+$default-border = solid 1px $border-color
+$active-border = solid 1px $active-border-color
+
+/**
+* # Modal Stuff
+* These will be moved lib/modal
+*/
+
+$modal-z-index = 1002
+$modal-background = white
+$modal-margin = 64px auto 0
+$modal-border-radius = 5px
+
+modal()
+  position relative
+  z-index $modal-z-index
+  margin $modal-margin
+  background-color $modal-background
+  overflow hidden
+  border-radius $modal-border-radius
diff --git a/browser/styles/main/index.styl b/browser/styles/main/index.styl
index 69bce492..25d81076 100644
--- a/browser/styles/main/index.styl
+++ b/browser/styles/main/index.styl
@@ -1,4 +1,3 @@
-@import '../../../node_modules/nib/lib/nib'
 @import '../vars'
 @import '../mixins/*'
 global-reset()
diff --git a/webpack-production.config.js b/webpack-production.config.js
index 5ef9440e..cbb9cbc2 100644
--- a/webpack-production.config.js
+++ b/webpack-production.config.js
@@ -14,7 +14,7 @@ var config = Object.assign({}, skeleton, {
       {
         test: /\.styl?$/,
         exclude: /(node_modules|bower_components)/,
-        loader: 'style-loader!css-loader!stylus-loader'
+        loader: 'style!css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!stylus?sourceMap'
       }
     ]
   },
diff --git a/webpack.config.js b/webpack.config.js
index 5078168f..2cc1131c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -12,7 +12,7 @@ var config = Object.assign({}, skeleton, {
       {
         test: /\.styl?$/,
         exclude: /(node_modules|bower_components)/,
-        loader: 'style-loader!css-loader!stylus-loader'
+        loader: 'style!css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!stylus?sourceMap'
       }
     ]
   },

From 8600710d23b96c304e1af57b6f4e6841e2410dea Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Mon, 18 Apr 2016 12:44:32 +0900
Subject: [PATCH 005/109] global styles must not use pre-loader

---
 browser/finder/index.js | 2 +-
 browser/main/index.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/finder/index.js b/browser/finder/index.js
index cda861d4..ef42feff 100644
--- a/browser/finder/index.js
+++ b/browser/finder/index.js
@@ -33,7 +33,7 @@ function notify (title, options) {
   return new window.Notification(title, options)
 }
 
-require('../styles/finder/index.styl')
+require('!!style!css!stylus?sourceMap!../styles/finder/index.styl')
 
 const FOLDER_FILTER = 'FOLDER_FILTER'
 const FOLDER_EXACT_FILTER = 'FOLDER_EXACT_FILTER'
diff --git a/browser/main/index.js b/browser/main/index.js
index 6b146c27..9e305ad1 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -3,7 +3,7 @@ import MainPage from './MainPage'
 import store from './store'
 import React from 'react'
 import ReactDOM from 'react-dom'
-require('../styles/main/index.styl')
+require('!!style!css!stylus?sourceMap!../styles/main/index.styl')
 import { openModal } from 'browser/lib/modal'
 import OSSAnnounceModal from './modal/OSSAnnounceModal'
 import activityRecord from 'browser/lib/activityRecord'

From 9c5cbd348b57c42c1c23683858e01e5281af2440 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Mon, 18 Apr 2016 12:44:52 +0900
Subject: [PATCH 006/109] Wrap CSSModules

---
 browser/lib/CSSModules.js | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 browser/lib/CSSModules.js

diff --git a/browser/lib/CSSModules.js b/browser/lib/CSSModules.js
new file mode 100644
index 00000000..181274f4
--- /dev/null
+++ b/browser/lib/CSSModules.js
@@ -0,0 +1,5 @@
+import CSSModules from 'react-css-modules'
+
+export default function (component, styles) {
+  return CSSModules(component, styles, {errorWhenNotFound: false})
+}

From ac7e08ae2c8c6c93a7ae30b514d2f62be6d8879b Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Mon, 18 Apr 2016 15:36:02 +0900
Subject: [PATCH 007/109] Redesign SideNav & implement add repo func

---
 browser/lib/RepositoryManager.js              | 295 ++++++++++++++++++
 browser/main/HomePage/ArticleNavigator.js     | 202 ------------
 browser/main/HomePage/SideNav/Repository.js   |  75 +++++
 browser/main/HomePage/SideNav/Repository.styl |  90 ++++++
 browser/main/HomePage/SideNav/SideNav.styl    |  63 ++++
 browser/main/HomePage/SideNav/index.js        | 156 +++++++++
 browser/main/HomePage/index.js                |  14 +-
 browser/main/actions.js                       |  16 +-
 browser/main/modal/NewRepositoryModal.js      | 175 +++++++++++
 browser/main/modal/NewRepositoryModal.styl    | 133 ++++++++
 browser/main/reducer.js                       |  54 +++-
 11 files changed, 1062 insertions(+), 211 deletions(-)
 create mode 100644 browser/lib/RepositoryManager.js
 delete mode 100644 browser/main/HomePage/ArticleNavigator.js
 create mode 100644 browser/main/HomePage/SideNav/Repository.js
 create mode 100644 browser/main/HomePage/SideNav/Repository.styl
 create mode 100644 browser/main/HomePage/SideNav/SideNav.styl
 create mode 100644 browser/main/HomePage/SideNav/index.js
 create mode 100644 browser/main/modal/NewRepositoryModal.js
 create mode 100644 browser/main/modal/NewRepositoryModal.styl

diff --git a/browser/lib/RepositoryManager.js b/browser/lib/RepositoryManager.js
new file mode 100644
index 00000000..3aa39dde
--- /dev/null
+++ b/browser/lib/RepositoryManager.js
@@ -0,0 +1,295 @@
+const keygen = require('browser/lib/keygen')
+const fs = require('fs')
+const path = require('path')
+const CSON = require('season')
+const _ = require('lodash')
+
+/**
+ * # Repo structure
+ *
+ * ```
+ * root
+ *  |- data
+ *      |-note1.cson
+ *      |-note2.cson
+ *      |-note3.cson
+ *  |- boostrepo.json
+ * ```
+ *
+ * ## `boostrepo.json`
+ *
+ * ```js
+ * {
+ *   name: String,
+ *   author: String, // Same convention of package.json, `John Doe <email@example.com> (http://example.com)`
+ *   remotes: [{
+ *     name: String,
+ *     url: String, // url of git remote
+ *     branch: String // if branch isn't set, it will try to use `master` branch.
+ *   }],
+ *   folders: [{
+ *     key: String // Unique sha1 hash key to identify folder,
+ *     name: String,
+ *     color: String // All CSS color formats available.
+ *   }]
+ * }
+ * ```
+ *
+ * ## `data` directory
+ *
+ * Every note will be saved here as a single CSON file to `git diff` efficiently.
+ * > This is because CSON supports Multiline string.
+ * File name of each cson file will be used to identify note.
+ * Commonly, Boostnote will automatically generate sha1 key and use it as a file name when creating a new note.
+ *
+ * ### `note.cson`
+ *
+ * ```cson
+ * name: String
+ * tags: [String] // tags
+ * folder: String // hash key of folder
+ * mode: String // syntax mode
+ * title: String
+ * content: String
+ * createdAt: Date
+ * updatedAt: Date
+ * ```
+ */
+
+/**
+ * # Resolve directory.
+ *
+ * If directory doesn't exist, it will try to make a new one.
+ * If failed return rejected promise
+ *
+ * @param  {String} targetPath Target path of directory
+ * @return {Promise}      [description]
+ */
+function _resolveDirectory (targetPath) {
+  return new Promise(function (resolve, reject) {
+    // check the directory exists
+    fs.stat(targetPath, function (err, stat) {
+      // Reject errors except no suchfile
+      if (err != null && err.code !== 'ENOENT') {
+        return reject(err)
+      }
+
+      // Handle no suchfile error only
+      // Make new Folder by given path
+      if (err != null) {
+        return fs.mkdir(targetPath, function (err, stat) {
+          // If failed to make a new directory, reject it.
+          if (err != null) {
+            return reject(err)
+          }
+          resolve(targetPath)
+        })
+      }
+
+      // Check the target is not a directory
+      if (!stat.isDirectory()) {
+        return reject(new Error(targetPath + ' path is not a directory'))
+      }
+      resolve(targetPath)
+    })
+  })
+}
+
+function _generateDefaultRepoJSON (override) {
+  return Object.assign({
+    name: 'default',
+    remotes: [],
+    folders: [{
+      key: keygen(),
+      name: 'general',
+      color: 'green'
+    }]
+  }, override)
+}
+
+/**
+ * # Resolve RepoJSON
+ *
+ * Every repository must have `boostrepo.json`
+ *
+ * If boostrepo.json doesn't exist, create new one.
+ *
+ * @param  {[type]} targetPath [description]
+ * @return {[type]}            [description]
+ */
+function _resolveRepoJSON (targetPath) {
+  return new Promise(function checkIfExists (resolve, reject) {
+    // If JSON doesn't exist, make a new one.
+    if (CSON.resolve(targetPath) == null) {
+      let newRepoJSON = _generateDefaultRepoJSON()
+      return CSON.writeFile(targetPath, newRepoJSON, function (err) {
+        if (err != null) return reject(err)
+        resolve(newRepoJSON)
+      })
+    }
+
+    CSON.readFile(targetPath, function (err, obj) {
+      if (err != null) return reject(err)
+      resolve(obj)
+    })
+  })
+}
+
+/**
+ * Get all repository stats from localStorage
+ * it is stored to `repositories` key.
+ * if the data is corrupted, re-intialize it.
+ *
+ * @return {Array} registered repositories
+ * ```
+ * [{
+ *   key: String,
+ *   name: String,
+ *   path: String // path of repository
+ * }]
+ * ```
+ */
+function getAllRepoStats () {
+  let data
+  try {
+    data = JSON.parse(localStorage.getItem('repositories'))
+    if (!_.isArray(data)) {
+      throw new Error('Data is corrupted. it must be an array.')
+    }
+  } catch (err) {
+    console.log(err)
+    data = []
+    _saveAllRepoStats(data)
+  }
+  return data
+}
+
+/**
+ * Save All Repos
+ */
+function _saveAllRepoStats (repoStats) {
+  localStorage.setItem('repoStats', JSON.stringify(repoStats))
+}
+
+/**
+ * Add repository and return new Repo
+ * @param {Object} newRepo [description]
+ * ```
+ * {
+ *   key: String,
+ *   name: String,
+ *   path: String,
+ *   status: String,
+ *   folders: [{
+ *     key: String,
+ *     color: String,
+ *     name: String
+ *   }],
+ *   notes: [{
+ *     key: String,
+ *     title: String,
+ *     content: String,
+ *     folder: String,
+ *     tags: [String],
+ *     createdAt: Date,
+ *     updatedAt: Date
+ *   }]
+ * }
+ * ```
+ */
+function addRepo (newRepo) {
+  let { targetPath, name } = newRepo
+  targetPath = path.resolve(targetPath)
+
+  let repoStat, repoJSON
+  return _resolveDirectory(targetPath)
+    .then(function initializeRepo () {
+      let resolveDataDirectory = _resolveDirectory(path.resolve(targetPath, 'data'))
+      let resolveBoostrepoJSON = _resolveRepoJSON(path.resolve(targetPath, 'boostrepo.json'))
+      return Promise.all([resolveDataDirectory, resolveBoostrepoJSON])
+    })
+    .then(function setLoalStorage (data) {
+      let dataPath = data[0]
+      repoJSON = data[1]
+
+      let repoStats = getAllRepoStats()
+
+      // generate unique key
+      let key = keygen()
+      while (repoStats.some((repoStat) => repoStat.key === key)) {
+        key = keygen()
+      }
+
+      repoStat = {
+        key,
+        name: name,
+        path: targetPath
+      }
+
+      repoStats.push(repoStat)
+      _saveAllRepoStats(repoStats)
+
+      return dataPath
+    })
+    .then(function fetchNotes (dataPath) {
+      let noteNames = fs.readdirSync(dataPath)
+      let notes = noteNames
+        .map((noteName) => {
+          let notePath = path.resolve(dataPath, noteNames)
+
+          return new Promise(function (resolve, reject) {
+            CSON.readFile(notePath, function (err, obj) {
+              if (err != null) {
+                console.log(err)
+                return resolve(null)
+              }
+              obj.key = path.basename(noteName, '.cson')
+              return resolve(obj)
+            })
+          })
+        })
+        .filter((note) => note != null)
+
+      return Promise.all(notes)
+    })
+    .then(function resolveRepo (notes) {
+      return Object.assign({}, repoJSON, repoStat, {
+        status: 'IDLE',
+        notes
+      })
+    })
+}
+
+function getRepos () {
+  let repoStats
+  try {
+    repoStats = JSON.parse(localStorage.getItem('repoStats'))
+    if (repoStats == null) repoStats = []
+  } catch (err) {
+    repoStats = []
+  }
+  return repoStats
+    .map((repoStat) => {
+      let repoJSON, notes
+      try {
+        repoJSON = CSON.readFileSync(path.resolve(repoStat.path, 'boostrepo.json'))
+        let notePaths = fs.readdirSync(path.resolve(repoStat.path, 'data'))
+        notes = notePaths.map((notePath) => CSON.readFileSync(notePath))
+      } catch (err) {
+        return Object.assign({}, repoStat, {
+          status: 'ERROR',
+          error: err
+        })
+      }
+      return Object.assign({}, repoJSON, repoStat, {
+        status: 'IDLE',
+        notes
+      })
+    })
+}
+
+export default {
+  getAllRepoStats,
+  addRepo,
+  getRepos
+}
diff --git a/browser/main/HomePage/ArticleNavigator.js b/browser/main/HomePage/ArticleNavigator.js
deleted file mode 100644
index b8b69790..00000000
--- a/browser/main/HomePage/ArticleNavigator.js
+++ /dev/null
@@ -1,202 +0,0 @@
-import React, { PropTypes } from 'react'
-import { findWhere } from 'lodash'
-import { setSearchFilter, switchFolder, uncacheArticle, saveAllArticles, switchArticle, clearSearch } from '../actions'
-import { openModal, isModalOpen } from 'browser/lib/modal'
-import FolderMark from 'browser/components/FolderMark'
-import Preferences from '../modal/Preferences'
-import CreateNewFolder from '../modal/CreateNewFolder'
-import _ from 'lodash'
-import ModeIcon from 'browser/components/ModeIcon'
-
-const ipc = require('electron').ipcRenderer
-
-const BRAND_COLOR = '#18AF90'
-const OSX = global.process.platform === 'darwin'
-
-const preferenceTutorialElement = (
-  <svg width='300' height='300' className='tutorial'>
-    <text x='15' y='30' fill={BRAND_COLOR} fontSize='24'>Preference</text>
-    <svg x='-30' y='-270' width='400' height='400'>
-      <path fill='white' d='M165.9,297c5.3,0,10.6,0.1,15.8,0.1c3.3,0,7.7,0.8,10.7-1c2.3-1.4,3.1-4,4.5-6.2c3.5-5.5,9.6-5.2,14.6-1.9
-c4.6,3.1,8.7,8,8.4,13.8c-0.3,5.2-3.3,10.1-6.1,14.3c-3.1,4.7-6.6,7-12.2,7.9c-5.2,0.8-11.7,1.6-15.4-3
-c-6.6-8.2,2.1-20.5,7.4-27.1c6.5-8.1,20.1-14,26.4-2.1c5.4,10.3-3.1,21.7-13,24.8c-5.7,1.8-11,0.9-16.2-1.9c-2-1.1-5-2.6-6.6-4.4
-c-3.9-4.3-0.3-8.2,2.5-11.2c1.3-1.4-0.8-3.6-2.1-2.1c-2.7,2.9-5.8,6.6-5.1,10.9c0.7,4.4,5.6,6.9,9,8.9c8.6,5.1,18.7,4.8,26.8-1.2
-c7.3-5.4,11.6-15,8-23.7c-3.3-8.1-11.7-11.8-20-9c-12.5,4.1-33.7,33.5-15.9,43.1c6.8,3.7,19.8,1.8,25.3-3.6
-c6.1-5.8,12.1-17.2,9.5-25.7c-2.6-8.4-13.7-17-22.6-13.3c-1.6,0.7-3,1.7-4.1,3c-1.6,1.9-2.2,5.1-4.1,6.6c-3.1,2.4-10.1,1-13.7,1
-c-4,0-7.9,0-11.9-0.1C164,294,164,297,165.9,297L165.9,297z'/>
-    </svg>
-  </svg>
-)
-
-const newFolderTutorialElement = (
-  <svg width='800' height='500' className='tutorial'>
-    <text x='30' y='110' fill={BRAND_COLOR} fontSize='24'>Create a new folder!!</text>
-    <text x='50' y='135' fill={BRAND_COLOR} fontSize='16'>{'press ' + (OSX ? '`⌘ + Shift + n`' : '`^ + Shift + n`')}</text>
-    <svg x='50' y='10' width='300' height='400'>
-      <path fill='white' d='M94.1,10.9C77.7,15.6,62,22.7,47.8,32.1c-13.6,9-27.7,20.4-37.1,33.9c-1.1,1.6,1.5,3.1,2.6,1.5
-        C22.6,54.1,37,42.7,50.6,33.8c13.7-8.8,28.6-15.5,44.2-20C96.7,13.3,95.9,10.4,94.1,10.9L94.1,10.9z'/>
-      <path fill='white' d='M71.1,8.6c7.9,1.6,15.8,3.2,23.6,4.7c-0.1-0.9-0.2-1.8-0.4-2.7c-4.6,3.4-5.4,7.7-4.4,13.2
-        c0.8,4.4,0.8,10.9,5.6,12.8c1.8,0.7,2.6-2.2,0.8-2.9c-2.3-1-2.6-6.2-3-8.3c-0.9-4.5-1.7-9,2.5-12.1c0.9-0.7,1-2.5-0.4-2.7
-        C87.5,9,79.6,7.4,71.8,5.9C70,5.4,69.2,8.3,71.1,8.6L71.1,8.6z'/>
-    </svg>
-  </svg>
-)
-
-export default class ArticleNavigator extends React.Component {
-  constructor (props) {
-    super(props)
-    this.newFolderHandler = e => {
-      if (isModalOpen()) return true
-      this.handleNewFolderButton(e)
-    }
-  }
-
-  componentDidMount () {
-    ipc.on('nav-new-folder', this.newFolderHandler)
-  }
-
-  componentWillUnmount () {
-    ipc.removeListener('nav-new-folder', this.newFolderHandler)
-  }
-
-  handlePreferencesButtonClick (e) {
-    openModal(Preferences)
-  }
-
-  handleNewFolderButton (e) {
-    let { user } = this.props
-    openModal(CreateNewFolder, {user: user})
-  }
-
-  handleFolderButtonClick (name) {
-    return e => {
-      let { dispatch } = this.props
-      dispatch(switchFolder(name))
-    }
-  }
-
-  handleAllFoldersButtonClick (e) {
-    let { dispatch } = this.props
-    dispatch(setSearchFilter(''))
-  }
-
-  handleUnsavedItemClick (article) {
-    let { dispatch } = this.props
-    return e => {
-      let { articles } = this.props
-      let isInArticleList = articles.some(_article => _article.key === article.key)
-      if (!isInArticleList) dispatch(clearSearch())
-      dispatch(switchArticle(article.key))
-    }
-  }
-
-  handleUncacheButtonClick (article) {
-    let { dispatch } = this.props
-    return e => {
-      dispatch(uncacheArticle(article.key))
-    }
-  }
-
-  handleSaveAllClick (e) {
-    let { dispatch } = this.props
-    dispatch(saveAllArticles())
-  }
-
-  render () {
-    let { status, user, folders, allArticles, modified, activeArticle } = this.props
-    let { targetFolders } = status
-    if (targetFolders == null) targetFolders = []
-
-    let modifiedElements = modified.map(modifiedArticle => {
-      let originalArticle = _.findWhere(allArticles, {key: modifiedArticle.key})
-      if (originalArticle == null) return false
-      let combinedArticle = Object.assign({}, originalArticle, modifiedArticle)
-
-      let className = 'ArticleNavigator-unsaved-list-item'
-      if (activeArticle && activeArticle.key === combinedArticle.key) className += ' active'
-
-      return (
-        <div key={modifiedArticle.key} onClick={e => this.handleUnsavedItemClick(combinedArticle)(e)} className={className}>
-          <div className='ArticleNavigator-unsaved-list-item-label'>
-            <ModeIcon mode={combinedArticle.mode}/>&nbsp;
-            {combinedArticle.title.trim().length > 0
-              ? combinedArticle.title
-              : <span className='ArticleNavigator-unsaved-list-item-label-untitled'>(Untitled)</span>}
-          </div>
-          <button onClick={e => this.handleUncacheButtonClick(combinedArticle)(e)} className='ArticleNavigator-unsaved-list-item-discard-button'><i className='fa fa-times'/></button>
-        </div>
-      )
-    }).filter(modifiedArticle => modifiedArticle).sort((a, b) => a.updatedAt - b.updatedAt)
-    let hasModified = modifiedElements.length > 0
-
-    let folderElememts = folders.map((folder, index) => {
-      let isActive = findWhere(targetFolders, {key: folder.key})
-      let articleCount = allArticles.filter(article => article.FolderKey === folder.key && article.status !== 'NEW').length
-
-      return (
-        <button onClick={e => this.handleFolderButtonClick(folder.name)(e)} key={'folder-' + folder.key} className={isActive ? 'active' : ''}>
-          <FolderMark color={folder.color}/> {folder.name} <span className='articleCount'>{articleCount}</span>
-        </button>
-      )
-    })
-
-    return (
-      <div tabIndex='1' className='ArticleNavigator'>
-        <div className='userInfo'>
-          <div className='userProfileName'>{user.name}</div>
-          <div className='userName'>localStorage</div>
-          <button onClick={e => this.handlePreferencesButtonClick(e)} className='settingBtn'>
-            <i className='fa fa-fw fa-chevron-down'/>
-            <span className='tooltip'>Preferences</span>
-          </button>
-
-          {status.isTutorialOpen ? preferenceTutorialElement : null}
-
-        </div>
-
-        {/*<div className={'ArticleNavigator-unsaved' + (hasModified ? '' : ' hide')}>
-          <div className='ArticleNavigator-unsaved-header'>Work in progress</div>
-          <div className='ArticleNavigator-unsaved-list'>
-            {modifiedElements}
-          </div>
-          <div className='ArticleNavigator-unsaved-control'>
-            <button onClick={e => this.handleSaveAllClick()} className='ArticleNavigator-unsaved-control-save-all-button' disabled={modifiedElements.length === 0}>Save all</button>
-          </div>
-        </div>*/}
-
-
-
-        <div className={'ArticleNavigator-folders expand'}>
-          {status.isTutorialOpen ? newFolderTutorialElement : null}
-          <div className='ArticleNavigator-folders-header'>
-            <div className='title'>Folders</div>
-            <button onClick={e => this.handleNewFolderButton(e)} className='addBtn'>
-              <i className='fa fa-fw fa-plus'/>
-              <span className='tooltip'>Create a new folder ({OSX ? '⌘' : '^'} + Shift + n)</span>
-            </button>
-          </div>
-          <div className='folderList'>
-            <button onClick={e => this.handleAllFoldersButtonClick(e)} className={targetFolders.length === 0 ? 'active' : ''}>All folders</button>
-            {folderElememts}
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-ArticleNavigator.propTypes = {
-  dispatch: PropTypes.func,
-  status: PropTypes.shape({
-    folderId: PropTypes.number
-  }),
-  user: PropTypes.object,
-  folders: PropTypes.array,
-  allArticles: PropTypes.array,
-  articles: PropTypes.array,
-  modified: PropTypes.array,
-  activeArticle: PropTypes.shape({
-    key: PropTypes.string
-  })
-}
-
diff --git a/browser/main/HomePage/SideNav/Repository.js b/browser/main/HomePage/SideNav/Repository.js
new file mode 100644
index 00000000..2a849283
--- /dev/null
+++ b/browser/main/HomePage/SideNav/Repository.js
@@ -0,0 +1,75 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './Repository.styl'
+
+class Repository extends React.Component {
+  render () {
+    let { repository } = this.props
+    let folderElements = repository.folders.map((folder) => {
+      return (
+        <div
+          key={folder.name}
+          styleName='folder'
+        >
+          <div styleName='folder-label'>
+            <i className='fa fa-cube'/> {folder.name}
+          </div>
+          <div styleName='folder-control'>
+            <button styleName='folder-control-button'>
+              <i className='fa fa-pencil'/>
+            </button>
+            <button styleName='folder-control-button'>
+              <i className='fa fa-trash'/>
+            </button>
+          </div>
+        </div>
+      )
+    })
+
+    return (
+      <div
+        className='Repository'
+        styleName='root'
+      >
+        <div styleName='header'>
+          <div styleName='header-name'>
+            <i className='fa fa-archive'/> {repository.name}
+          </div>
+
+          <div styleName='header-control'>
+            <button styleName='header-control-button'
+            >
+              <i className='fa fa-unlink'/>
+            </button>
+            <button styleName='header-control-button'
+            >
+              <i className='fa fa-pencil'/>
+            </button>
+            <button styleName='header-control-button'
+            >
+              <i className='fa fa-angle-down'/>
+            </button>
+          </div>
+        </div>
+
+        {folderElements}
+
+        <button styleName='newFolderButton'
+        >
+          <i className='fa fa-plus'/> New Folder
+        </button>
+      </div>
+    )
+  }
+}
+
+Repository.propTypes = {
+  repository: PropTypes.shape({
+    name: PropTypes.string,
+    folders: PropTypes.arrayOf(PropTypes.shape({
+      name: PropTypes.string
+    }))
+  })
+}
+
+export default CSSModules(Repository, styles)
diff --git a/browser/main/HomePage/SideNav/Repository.styl b/browser/main/HomePage/SideNav/Repository.styl
new file mode 100644
index 00000000..c59997d2
--- /dev/null
+++ b/browser/main/HomePage/SideNav/Repository.styl
@@ -0,0 +1,90 @@
+.root
+  margin-top 15px
+  margin-bottom 15px
+
+.header
+  position relative
+  height 33px
+  &:hover
+    background-color alpha(white, 0.1)
+
+.header-name
+  position absolute
+  left 0
+  top 0
+  bottom 0
+  right 72px
+  padding-left 10px
+  line-height 33px
+  color white
+
+.header-control
+  position absolute
+  top 0
+  bottom 0
+  right 5px
+  width 72px
+
+.header-control-button
+  width 24px
+  padding 0
+  margin-top 4.5px
+  height 24px
+  border none
+  border-radius 5px
+  background-color transparent
+  color white
+  &:hover
+    background-color alpha(white, 0.1)
+  &:active
+    background-color $brand-color
+
+.folder
+  height 33px
+  width 100%
+  position relative
+  &:hover
+    background-color alpha(white 0.1)
+
+.folder-label
+  position absolute
+  left 0
+  top 0
+  bottom 0
+  right 48px
+  padding-left 20px
+  line-height 33px
+  color white
+
+.folder-control
+  position absolute
+  top 0
+  bottom 0
+  right 0
+  width 48px
+
+.folder-control-button
+  width 24px
+  height 24px
+  margin-top 4.5px
+  border none
+  border-radius 5px
+  background-color transparent
+  color white
+  &:hover
+    background-color alpha(white, 0.1)
+  &:active
+    background-color $brand-color
+
+.newFolderButton
+  height 33px
+  width 100%
+  border none
+  padding-left 20px
+  text-align left
+  background-color transparent
+  color white
+  &:hover
+    background-color alpha(white, 0.1)
+  &:active
+    background-color $brand-color
diff --git a/browser/main/HomePage/SideNav/SideNav.styl b/browser/main/HomePage/SideNav/SideNav.styl
new file mode 100644
index 00000000..b54462f5
--- /dev/null
+++ b/browser/main/HomePage/SideNav/SideNav.styl
@@ -0,0 +1,63 @@
+$nav-border-color = #838383
+$nav-background-color = #353535
+
+.root
+  absolute top bottom left
+  width 200px
+  border-right solid 1px $nav-border-color
+  background-color $nav-background-color
+
+.menu
+  margin-top 30px
+  margin-bottom 15px
+
+.menu-button
+  height 33px
+  padding 0 10px
+  font-size 14px
+  width 100%
+  text-align left
+  border none
+  color white
+  background-color transparent
+  &:hover
+    background-color alph(white, 0.1)
+  &:active
+    background-color $brand-color
+
+.repositoryList
+  absolute left right
+  top 145px
+  border-top solid 1px $nav-border-color
+
+.control
+  absolute bottom left right
+  height 33px
+  border-top solid 1px $nav-border-color
+
+.control-newRepositoryButton
+  absolute top bottom left
+  width 167px
+  padding 0 10px
+  text-align left
+  border-width 0 1px 0 0
+  border-color $nav-border-color
+  border-style solid
+  color white
+  background-color transparent
+  &:hover
+    background-color alph(white, 0.1)
+  &:active
+    background-color $brand-color
+
+.control-toggleButton
+  absolute top bottom right
+  width 33px
+  color white
+  background-color transparent
+  border none
+  &:hover
+    background-color alph(white, 0.1)
+  &:active
+    background-color $brand-color
+
diff --git a/browser/main/HomePage/SideNav/index.js b/browser/main/HomePage/SideNav/index.js
new file mode 100644
index 00000000..e671ba20
--- /dev/null
+++ b/browser/main/HomePage/SideNav/index.js
@@ -0,0 +1,156 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SideNav.styl'
+import actions from 'browser/main/actions'
+import { openModal, isModalOpen } from 'browser/lib/modal'
+import Preferences from '../../modal/Preferences'
+import CreateNewFolder from '../../modal/CreateNewFolder'
+import Repository from './Repository'
+import NewRepositoryModal from '../../modal/NewRepositoryModal'
+
+const ipc = require('electron').ipcRenderer
+
+const BRAND_COLOR = '#18AF90'
+const OSX = global.process.platform === 'darwin'
+
+const preferenceTutorialElement = (
+  <svg width='300' height='300' className='tutorial'>
+    <text x='15' y='30' fill={BRAND_COLOR} fontSize='24'>Preference</text>
+    <svg x='-30' y='-270' width='400' height='400'>
+      <path fill='white' d='M165.9,297c5.3,0,10.6,0.1,15.8,0.1c3.3,0,7.7,0.8,10.7-1c2.3-1.4,3.1-4,4.5-6.2c3.5-5.5,9.6-5.2,14.6-1.9
+c4.6,3.1,8.7,8,8.4,13.8c-0.3,5.2-3.3,10.1-6.1,14.3c-3.1,4.7-6.6,7-12.2,7.9c-5.2,0.8-11.7,1.6-15.4-3
+c-6.6-8.2,2.1-20.5,7.4-27.1c6.5-8.1,20.1-14,26.4-2.1c5.4,10.3-3.1,21.7-13,24.8c-5.7,1.8-11,0.9-16.2-1.9c-2-1.1-5-2.6-6.6-4.4
+c-3.9-4.3-0.3-8.2,2.5-11.2c1.3-1.4-0.8-3.6-2.1-2.1c-2.7,2.9-5.8,6.6-5.1,10.9c0.7,4.4,5.6,6.9,9,8.9c8.6,5.1,18.7,4.8,26.8-1.2
+c7.3-5.4,11.6-15,8-23.7c-3.3-8.1-11.7-11.8-20-9c-12.5,4.1-33.7,33.5-15.9,43.1c6.8,3.7,19.8,1.8,25.3-3.6
+c6.1-5.8,12.1-17.2,9.5-25.7c-2.6-8.4-13.7-17-22.6-13.3c-1.6,0.7-3,1.7-4.1,3c-1.6,1.9-2.2,5.1-4.1,6.6c-3.1,2.4-10.1,1-13.7,1
+c-4,0-7.9,0-11.9-0.1C164,294,164,297,165.9,297L165.9,297z'/>
+    </svg>
+  </svg>
+)
+
+const newFolderTutorialElement = (
+  <svg width='800' height='500' className='tutorial'>
+    <text x='30' y='110' fill={BRAND_COLOR} fontSize='24'>Create a new folder!!</text>
+    <text x='50' y='135' fill={BRAND_COLOR} fontSize='16'>{'press ' + (OSX ? '`⌘ + Shift + n`' : '`^ + Shift + n`')}</text>
+    <svg x='50' y='10' width='300' height='400'>
+      <path fill='white' d='M94.1,10.9C77.7,15.6,62,22.7,47.8,32.1c-13.6,9-27.7,20.4-37.1,33.9c-1.1,1.6,1.5,3.1,2.6,1.5
+        C22.6,54.1,37,42.7,50.6,33.8c13.7-8.8,28.6-15.5,44.2-20C96.7,13.3,95.9,10.4,94.1,10.9L94.1,10.9z'/>
+      <path fill='white' d='M71.1,8.6c7.9,1.6,15.8,3.2,23.6,4.7c-0.1-0.9-0.2-1.8-0.4-2.7c-4.6,3.4-5.4,7.7-4.4,13.2
+        c0.8,4.4,0.8,10.9,5.6,12.8c1.8,0.7,2.6-2.2,0.8-2.9c-2.3-1-2.6-6.2-3-8.3c-0.9-4.5-1.7-9,2.5-12.1c0.9-0.7,1-2.5-0.4-2.7
+        C87.5,9,79.6,7.4,71.8,5.9C70,5.4,69.2,8.3,71.1,8.6L71.1,8.6z'/>
+    </svg>
+  </svg>
+)
+
+class SideNav extends React.Component {
+  constructor (props) {
+    super(props)
+    this.newFolderHandler = e => {
+      if (isModalOpen()) return true
+      this.handleNewFolderButton(e)
+    }
+  }
+
+  componentDidMount () {
+    ipc.on('nav-new-folder', this.newFolderHandler)
+  }
+
+  componentWillUnmount () {
+    ipc.removeListener('nav-new-folder', this.newFolderHandler)
+  }
+
+  handlePreferencesButtonClick (e) {
+    openModal(Preferences)
+  }
+
+  handleNewFolderButton (e) {
+    let { user } = this.props
+    openModal(CreateNewFolder, {user: user})
+  }
+
+  handleFolderButtonClick (name) {
+    return e => {
+      let { dispatch } = this.props
+      dispatch(actions.switchFolder(name))
+    }
+  }
+
+  handleAllFoldersButtonClick (e) {
+    let { dispatch } = this.props
+    dispatch(actions.setSearchFilter(''))
+  }
+
+  handleNewRepositoryButtonClick (e) {
+    openModal(NewRepositoryModal)
+  }
+
+  render () {
+    let { repositories } = this.props
+    let repositorieElements = repositories.map((repo) => {
+      return <Repository
+        key={repo.name}
+        repository={repo}
+      />
+    })
+
+    return (
+      <div
+        className='SideNav'
+        styleName='root'
+        tabIndex='1'
+      >
+        <div styleName='menu'>
+          <button styleName='menu-button'
+          >
+            <i className='fa fa-history'/> Recents
+          </button>
+          <button styleName='menu-button'
+          >
+            <i className='fa fa-star'/> Favorited
+          </button>
+          <button styleName='menu-button'
+          >
+            <i className='fa fa-list'/> All posts
+          </button>
+        </div>
+
+        <div styleName='repositoryList'>
+          {repositories.length > 0 ? repositorieElements : (
+            <div styleName='repositoryList-empty'>Empty</div>
+          )}
+        </div>
+
+        <div styleName='control'>
+          <button
+            styleName='control-newRepositoryButton'
+            onClick={(e) => this.handleNewRepositoryButtonClick(e)}
+          >
+            <i className='fa fa-plus'/> New Repository
+          </button>
+          <button styleName='control-toggleButton'
+          >
+            <i className='fa fa-angle-double-right'/>
+          </button>
+        </div>
+      </div>
+    )
+  }
+}
+
+SideNav.propTypes = {
+  dispatch: PropTypes.func,
+  status: PropTypes.shape({
+    folderId: PropTypes.number
+  }),
+  user: PropTypes.object,
+  folders: PropTypes.array,
+  allArticles: PropTypes.array,
+  articles: PropTypes.array,
+  modified: PropTypes.array,
+  activeArticle: PropTypes.shape({
+    key: PropTypes.string
+  }),
+  repositories: PropTypes.array
+}
+
+export default CSSModules(SideNav, styles)
diff --git a/browser/main/HomePage/index.js b/browser/main/HomePage/index.js
index 54274a97..da4c3dfa 100644
--- a/browser/main/HomePage/index.js
+++ b/browser/main/HomePage/index.js
@@ -2,7 +2,7 @@ import React, { PropTypes} from 'react'
 import { connect } from 'react-redux'
 import ReactDOM from 'react-dom'
 import { toggleTutorial } from '../actions'
-import ArticleNavigator from './ArticleNavigator'
+import SideNav from './SideNav'
 import ArticleTopBar from './ArticleTopBar'
 import ArticleList from './ArticleList'
 import ArticleDetail from './ArticleDetail'
@@ -73,12 +73,14 @@ class HomePage extends React.Component {
 
   render () {
     let { dispatch, status, user, articles, allArticles, modified, activeArticle, folders, tags } = this.props
+    let { repositories } = this.props
 
     return (
       <div className='HomePage'>
-        <ArticleNavigator
+        <SideNav
           ref='nav'
           dispatch={dispatch}
+          repositories={repositories}
           status={status}
           user={user}
           folders={folders}
@@ -212,6 +214,8 @@ function remap (state) {
   let activeArticle = _.findWhere(articles, {key: status.articleKey})
   if (activeArticle == null) activeArticle = articles[0]
 
+  let { repositories } = state
+
   return {
     user,
     folders,
@@ -220,7 +224,8 @@ function remap (state) {
     allArticles,
     modified,
     activeArticle,
-    tags
+    tags,
+    repositories
   }
 }
 
@@ -235,7 +240,8 @@ HomePage.propTypes = {
   activeArticle: PropTypes.shape(),
   dispatch: PropTypes.func,
   folders: PropTypes.array,
-  tags: PropTypes.array
+  tags: PropTypes.array,
+  repositories: PropTypes.array
 }
 
 export default connect(remap)(HomePage)
diff --git a/browser/main/actions.js b/browser/main/actions.js
index 37e02f58..a4e2aee3 100644
--- a/browser/main/actions.js
+++ b/browser/main/actions.js
@@ -153,6 +153,17 @@ export function toggleTutorial () {
   }
 }
 
+/**
+ * v0.6.* Actions
+ */
+
+export function addRepo (data) {
+  return {
+    type: 'ADD_REPOSITORY',
+    data
+  }
+}
+
 export default {
   updateUser,
 
@@ -174,5 +185,8 @@ export default {
   setSearchFilter,
   setTagFilter,
   clearSearch,
-  toggleTutorial
+  toggleTutorial,
+
+  // v0.6.*
+  addRepo
 }
diff --git a/browser/main/modal/NewRepositoryModal.js b/browser/main/modal/NewRepositoryModal.js
new file mode 100644
index 00000000..600b0fd6
--- /dev/null
+++ b/browser/main/modal/NewRepositoryModal.js
@@ -0,0 +1,175 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './NewRepositoryModal.styl'
+import linkState from 'browser/lib/linkState'
+import RepositoryManager from 'browser/lib/RepositoryManager'
+import store from 'browser/main/store'
+import actions from 'browser/main/actions'
+
+const electron = require('electron')
+const remote = electron.remote
+
+function browseFolder () {
+  let dialog = remote.dialog
+
+  let defaultPath = remote.app.getHomeDir()
+  return new Promise((resolve, reject) => {
+    dialog.showOpenDialog({
+      title: 'Select Directory',
+      defaultPath,
+      properties: ['openDirectory', 'createDirectory']
+    }, function (targetPaths) {
+      if (targetPaths == null) return resolve('')
+      resolve(targetPaths[0])
+    })
+  })
+}
+
+class NewRepositoryModal extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      name: '',
+      path: '',
+      isPathSectionFocused: false,
+      error: null,
+      isBrowsingPath: false
+    }
+  }
+
+  handleCloseButtonClick (e) {
+    this.props.close()
+  }
+
+  handlePathFocus (e) {
+    this.setState({
+      isPathSectionFocused: true
+    })
+  }
+
+  handlePathBlur (e) {
+    if (e.relatedTarget !== this.refs.pathInput && e.relatedTarget !== this.refs.browseButton) {
+      this.setState({
+        isPathSectionFocused: false
+      })
+    }
+  }
+
+  handleBrowseButtonClick (e) {
+    this.setState({
+      isBrowsingPath: true
+    }, () => {
+      browseFolder()
+        .then((targetPath) => {
+          this.setState({
+            path: targetPath,
+            isBrowsingPath: false
+          })
+        })
+        .catch((err) => {
+          console.error('BrowseFAILED')
+          console.error(err)
+          this.setState({
+            isBrowsingPath: false
+          })
+        })
+    })
+  }
+
+  handleConfirmButtonClick (e) {
+    let targetPath = this.state.path
+    let name = this.state.name
+
+    RepositoryManager
+      .addRepo({
+        targetPath,
+        name
+      })
+      .then((newRepo) => {
+        store.dispatch(actions.addRepo(newRepo))
+        this.props.close()
+      })
+      .catch((err) => {
+        console.error(err)
+        this.setState({
+          error: err.message
+        })
+      })
+  }
+
+  render () {
+    return (
+      <div className='NewRepositoryModal'
+        styleName='root'
+      >
+        <div styleName='header'>
+          <div styleName='header-title'>New Repository</div>
+          <button styleName='header-closeButton'
+            onClick={(e) => this.handleCloseButtonClick(e)}
+          >
+            <i className='fa fa-times'/>
+          </button>
+        </div>
+        <div styleName='body'>
+          <div styleName='body-section'>
+            <div styleName='body-section-label'>Repository Name</div>
+            <input styleName='body-section-input'
+              ref='nameInput'
+              valueLink={this.linkState('name')}
+            />
+          </div>
+
+          <div styleName='body-section'>
+            <div styleName='body-section-label'>Repository Path</div>
+            <div styleName={!this.state.isPathSectionFocused ? 'body-section-path' : 'body-section-path--focus'}>
+              <input styleName='body-section-path-input'
+                valueLink={this.linkState('path')}
+                style={styles.body_section_path_input}
+                onFocus={(e) => this.handlePathFocus(e)}
+                onBlur={(e) => this.handlePathBlur(e)}
+                disabled={this.state.isBrowsingPath}
+              />
+              <button styleName='body-section-path-button'
+                onClick={(e) => this.handleBrowseButtonClick(e)}
+                onFocus={(e) => this.handlePathFocus(e)}
+                onBlur={(e) => this.handlePathBlur(e)}
+                disabled={this.state.isBrowsingPath}
+              >
+                ...
+              </button>
+            </div>
+          </div>
+          {
+            this.state.error != null && (
+              <div styleName='body-error'>
+                {this.state.error}
+              </div>
+            )
+          }
+        </div>
+
+        <div styleName='footer'>
+          <button styleName='footer-cancelButton'
+            onClick={(e) => this.handleCloseButtonClick(e)}
+          >
+            <i className='fa fa-times'/> Cancel
+          </button>
+          <button styleName='footer-confirmButton'
+            onClick={(e) => this.handleConfirmButtonClick(e)}
+          >
+            <i className='fa fa-check'/> Confirm
+          </button>
+        </div>
+      </div>
+    )
+  }
+}
+
+NewRepositoryModal.propTypes = {
+  close: PropTypes.func
+}
+
+NewRepositoryModal.prototype.linkState = linkState
+
+export default CSSModules(NewRepositoryModal, styles)
diff --git a/browser/main/modal/NewRepositoryModal.styl b/browser/main/modal/NewRepositoryModal.styl
new file mode 100644
index 00000000..9f555f9c
--- /dev/null
+++ b/browser/main/modal/NewRepositoryModal.styl
@@ -0,0 +1,133 @@
+$modal-width = 550px
+$modal-header-color = #F2F2F2
+$body-button-background-color = #2BAC8F
+
+.root
+  modal()
+  width $modal-width
+  height 310px
+
+.header
+  height 50px
+  background-color $modal-header-color
+
+.header-title
+  font-size 24px
+  line-height 50px
+  padding-left 15px
+
+.header-closeButton
+  position absolute
+  top 8.5px
+  right 8.5px
+  width 33px
+  height 33px
+  font-size 20px
+  background-color transparent
+  border none
+  color #AAA
+  &:hover
+    color #4D4D4D
+
+.body
+  absolute left right
+  top 50px
+  bottom 50px
+  padding 35px 0
+
+.body-section
+  height 33px
+  margin-bottom 15px
+  position relative
+
+.body-section-label
+  absolute top bottom left
+  width 175px
+  text-align right
+  line-height 33px
+  padding-right 15px
+
+.body-section-input
+  absolute top bottom
+  left 175px
+  width 315px
+  padding 0 10px
+  border $default-border
+  border-radius 5px
+  outline none
+  &:focus
+    border $active-border
+
+.body-section-path
+  absolute top bottom
+  left 175px
+  width 315px
+  padding 0 10px
+  border $default-border
+  border-radius 5px
+  outline none
+  overflow hidden
+
+.body-section-path--focus
+  @extend .body-section-path
+  border $active-border
+
+.body-section-path-input
+  absolute top left bottom
+  width 265px
+  border none
+  outline none
+  padding 0 10px
+
+.body-section-path-button
+  absolute top right bottom
+  width 50px
+  border none
+  border-left $default-border
+  outline none
+  color white
+  background-color $body-button-background-color
+  transition 0.15s
+  &:hover
+    background-color lighten($body-button-background-color, 7%)
+  &:disabled
+    background-color lighten(gray, 15%)
+
+.body-error
+  height 33px
+  margin 35px auto 0
+  width 320px
+  border-radius 5px
+  text-align center
+  line-height 33px
+  color $danger-color
+  background-color $danger-lighten-color
+
+.footer
+  absolute left right bottom
+  height 50px
+
+.footer-cancelButton
+  position absolute
+  height 33px
+  right 85.5px
+  width 72px
+  top 8.5px
+  border-radius 5px
+  border $default-border
+  background-color darken(white, 0.03)
+  &:hover
+    background-color white
+
+.footer-confirmButton
+  position absolute
+  height 33px
+  right 8.5px
+  width 72px
+  top 8.5px
+  color white
+  border-radius 5px
+  border none
+  background-color #2BAC8F
+  &:hover
+    background-color lighten($body-button-background-color, 7%)
diff --git a/browser/main/reducer.js b/browser/main/reducer.js
index 8f7afd10..9c3db1f7 100644
--- a/browser/main/reducer.js
+++ b/browser/main/reducer.js
@@ -36,14 +36,16 @@ const initialStatus = {
   isTutorialOpen: false
 }
 
-dataStore.init()
-let data = dataStore.getData()
+let data = {
+  articles: [],
+  folders: []
+}
 let initialArticles = {
   data: data && data.articles ? data.articles : [],
   modified: []
 }
 let initialFolders = data && data.folders ? data.folders : []
-let initialUser = dataStore.getUser().user
+let initialUser = {}
 
 function user (state = initialUser, action) {
   switch (action.type) {
@@ -298,9 +300,53 @@ function status (state = initialStatus, action) {
   }
 }
 
+/**
+ * v0.6.* Reducers
+ */
+
+/**
+ * Repositories
+ * ```
+ * repositories = [{
+ *   key: String,
+ *   name: String,
+ *   path: String, // path of repository
+ *   status: String, // status of repository [LOADING, IDLE, ERROR]
+ *   folders: {
+ *     name: String,
+ *     color: String
+ *   },
+ *   notes: [{
+ *     key: String,
+ *     title: String,
+ *     content: String,
+ *     folder: String,
+ *     tags: [String],
+ *     createdAt: Date,
+ *     updatedAt: Date
+ *   }]
+ * }]
+ * ```
+ */
+import RepositoryManager from 'browser/lib/RepositoryManager'
+const initialRepositories = RepositoryManager.getRepos()
+
+function repositories (state = initialRepositories, action) {
+  console.log(state)
+  switch (action.type) {
+    case 'ADD_REPOSITORY':
+      let repos = state.slice()
+      repos.push(action.data)
+      return repos
+  }
+  return state
+}
+// v0.6 end
+
 export default combineReducers({
   user,
   folders,
   articles,
-  status
+  status,
+  repositories
 })

From 744907ac382241d92bfee00281806d0d5632f0f7 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Mon, 2 May 2016 04:36:34 +0900
Subject: [PATCH 008/109] remove repo

---
 browser/lib/RepositoryManager.js            | 21 +++++++++--
 browser/main/HomePage/SideNav/Repository.js | 16 ++++++++-
 browser/main/HomePage/SideNav/index.js      | 39 +++------------------
 browser/main/actions.js                     | 10 +++++-
 browser/main/reducer.js                     | 18 +++++++---
 5 files changed, 61 insertions(+), 43 deletions(-)

diff --git a/browser/lib/RepositoryManager.js b/browser/lib/RepositoryManager.js
index 3aa39dde..1c1f3a1a 100644
--- a/browser/lib/RepositoryManager.js
+++ b/browser/lib/RepositoryManager.js
@@ -152,7 +152,7 @@ function _resolveRepoJSON (targetPath) {
 function getAllRepoStats () {
   let data
   try {
-    data = JSON.parse(localStorage.getItem('repositories'))
+    data = JSON.parse(localStorage.getItem('repoStats'))
     if (!_.isArray(data)) {
       throw new Error('Data is corrupted. it must be an array.')
     }
@@ -208,7 +208,7 @@ function addRepo (newRepo) {
       let resolveBoostrepoJSON = _resolveRepoJSON(path.resolve(targetPath, 'boostrepo.json'))
       return Promise.all([resolveDataDirectory, resolveBoostrepoJSON])
     })
-    .then(function setLoalStorage (data) {
+    .then(function saveToLocalStorage (data) {
       let dataPath = data[0]
       repoJSON = data[1]
 
@@ -260,6 +260,22 @@ function addRepo (newRepo) {
     })
 }
 
+function removeRepo (repository) {
+  return new Promise(function (resolve, reject) {
+    try {
+      let repoStats = getAllRepoStats()
+      let targetIndex = _.findIndex(repoStats, {key: repository.key})
+      if (targetIndex > -1) {
+        repoStats.splice(targetIndex, 1)
+      }
+      _saveAllRepoStats(repoStats)
+      resolve(true)
+    } catch (err) {
+      reject(err)
+    }
+  })
+}
+
 function getRepos () {
   let repoStats
   try {
@@ -291,5 +307,6 @@ function getRepos () {
 export default {
   getAllRepoStats,
   addRepo,
+  removeRepo,
   getRepos
 }
diff --git a/browser/main/HomePage/SideNav/Repository.js b/browser/main/HomePage/SideNav/Repository.js
index 2a849283..4631af6b 100644
--- a/browser/main/HomePage/SideNav/Repository.js
+++ b/browser/main/HomePage/SideNav/Repository.js
@@ -1,10 +1,22 @@
 import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './Repository.styl'
+import actions from 'browser/main/actions'
+import RepositoryManager from 'browser/lib/RepositoryManager'
 
 class Repository extends React.Component {
+  handleUnlinkButtonClick (e) {
+    let { dispatch, repository } = this.props
+
+    RepositoryManager.removeRepo(repository)
+      .then(() => {
+        dispatch(actions.removeRepo(repository))
+      })
+  }
+
   render () {
     let { repository } = this.props
+
     let folderElements = repository.folders.map((folder) => {
       return (
         <div
@@ -38,6 +50,7 @@ class Repository extends React.Component {
 
           <div styleName='header-control'>
             <button styleName='header-control-button'
+              onClick={(e) => this.handleUnlinkButtonClick(e)}
             >
               <i className='fa fa-unlink'/>
             </button>
@@ -69,7 +82,8 @@ Repository.propTypes = {
     folders: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string
     }))
-  })
+  }),
+  dispatch: PropTypes.func
 }
 
 export default CSSModules(Repository, styles)
diff --git a/browser/main/HomePage/SideNav/index.js b/browser/main/HomePage/SideNav/index.js
index e671ba20..be606bdd 100644
--- a/browser/main/HomePage/SideNav/index.js
+++ b/browser/main/HomePage/SideNav/index.js
@@ -10,42 +10,10 @@ import NewRepositoryModal from '../../modal/NewRepositoryModal'
 
 const ipc = require('electron').ipcRenderer
 
-const BRAND_COLOR = '#18AF90'
-const OSX = global.process.platform === 'darwin'
-
-const preferenceTutorialElement = (
-  <svg width='300' height='300' className='tutorial'>
-    <text x='15' y='30' fill={BRAND_COLOR} fontSize='24'>Preference</text>
-    <svg x='-30' y='-270' width='400' height='400'>
-      <path fill='white' d='M165.9,297c5.3,0,10.6,0.1,15.8,0.1c3.3,0,7.7,0.8,10.7-1c2.3-1.4,3.1-4,4.5-6.2c3.5-5.5,9.6-5.2,14.6-1.9
-c4.6,3.1,8.7,8,8.4,13.8c-0.3,5.2-3.3,10.1-6.1,14.3c-3.1,4.7-6.6,7-12.2,7.9c-5.2,0.8-11.7,1.6-15.4-3
-c-6.6-8.2,2.1-20.5,7.4-27.1c6.5-8.1,20.1-14,26.4-2.1c5.4,10.3-3.1,21.7-13,24.8c-5.7,1.8-11,0.9-16.2-1.9c-2-1.1-5-2.6-6.6-4.4
-c-3.9-4.3-0.3-8.2,2.5-11.2c1.3-1.4-0.8-3.6-2.1-2.1c-2.7,2.9-5.8,6.6-5.1,10.9c0.7,4.4,5.6,6.9,9,8.9c8.6,5.1,18.7,4.8,26.8-1.2
-c7.3-5.4,11.6-15,8-23.7c-3.3-8.1-11.7-11.8-20-9c-12.5,4.1-33.7,33.5-15.9,43.1c6.8,3.7,19.8,1.8,25.3-3.6
-c6.1-5.8,12.1-17.2,9.5-25.7c-2.6-8.4-13.7-17-22.6-13.3c-1.6,0.7-3,1.7-4.1,3c-1.6,1.9-2.2,5.1-4.1,6.6c-3.1,2.4-10.1,1-13.7,1
-c-4,0-7.9,0-11.9-0.1C164,294,164,297,165.9,297L165.9,297z'/>
-    </svg>
-  </svg>
-)
-
-const newFolderTutorialElement = (
-  <svg width='800' height='500' className='tutorial'>
-    <text x='30' y='110' fill={BRAND_COLOR} fontSize='24'>Create a new folder!!</text>
-    <text x='50' y='135' fill={BRAND_COLOR} fontSize='16'>{'press ' + (OSX ? '`⌘ + Shift + n`' : '`^ + Shift + n`')}</text>
-    <svg x='50' y='10' width='300' height='400'>
-      <path fill='white' d='M94.1,10.9C77.7,15.6,62,22.7,47.8,32.1c-13.6,9-27.7,20.4-37.1,33.9c-1.1,1.6,1.5,3.1,2.6,1.5
-        C22.6,54.1,37,42.7,50.6,33.8c13.7-8.8,28.6-15.5,44.2-20C96.7,13.3,95.9,10.4,94.1,10.9L94.1,10.9z'/>
-      <path fill='white' d='M71.1,8.6c7.9,1.6,15.8,3.2,23.6,4.7c-0.1-0.9-0.2-1.8-0.4-2.7c-4.6,3.4-5.4,7.7-4.4,13.2
-        c0.8,4.4,0.8,10.9,5.6,12.8c1.8,0.7,2.6-2.2,0.8-2.9c-2.3-1-2.6-6.2-3-8.3c-0.9-4.5-1.7-9,2.5-12.1c0.9-0.7,1-2.5-0.4-2.7
-        C87.5,9,79.6,7.4,71.8,5.9C70,5.4,69.2,8.3,71.1,8.6L71.1,8.6z'/>
-    </svg>
-  </svg>
-)
-
 class SideNav extends React.Component {
   constructor (props) {
     super(props)
-    this.newFolderHandler = e => {
+    this.newFolderHandler = (e) => {
       if (isModalOpen()) return true
       this.handleNewFolderButton(e)
     }
@@ -69,7 +37,7 @@ class SideNav extends React.Component {
   }
 
   handleFolderButtonClick (name) {
-    return e => {
+    return (e) => {
       let { dispatch } = this.props
       dispatch(actions.switchFolder(name))
     }
@@ -85,11 +53,12 @@ class SideNav extends React.Component {
   }
 
   render () {
-    let { repositories } = this.props
+    let { repositories, dispatch } = this.props
     let repositorieElements = repositories.map((repo) => {
       return <Repository
         key={repo.name}
         repository={repo}
+        dispatch={dispatch}
       />
     })
 
diff --git a/browser/main/actions.js b/browser/main/actions.js
index a4e2aee3..da3e4b42 100644
--- a/browser/main/actions.js
+++ b/browser/main/actions.js
@@ -164,6 +164,13 @@ export function addRepo (data) {
   }
 }
 
+export function removeRepo (data) {
+  return {
+    type: 'REMOVE_REPOSITORY',
+    data
+  }
+}
+
 export default {
   updateUser,
 
@@ -188,5 +195,6 @@ export default {
   toggleTutorial,
 
   // v0.6.*
-  addRepo
+  addRepo,
+  removeRepo
 }
diff --git a/browser/main/reducer.js b/browser/main/reducer.js
index a41a0749..8efff887 100644
--- a/browser/main/reducer.js
+++ b/browser/main/reducer.js
@@ -332,12 +332,22 @@ import RepositoryManager from 'browser/lib/RepositoryManager'
 const initialRepositories = RepositoryManager.getRepos()
 
 function repositories (state = initialRepositories, action) {
-  console.log(state)
   switch (action.type) {
     case 'ADD_REPOSITORY':
-      let repos = state.slice()
-      repos.push(action.data)
-      return repos
+      {
+        let repos = state.slice()
+        repos.push(action.data)
+        return repos
+      }
+    case 'REMOVE_REPOSITORY':
+      {
+        let repos = state.slice()
+        let targetIndex = _.findIndex(repos, {key: action.data.key})
+        if (targetIndex > -1) {
+          repos.splice(targetIndex, 1)
+        }
+        return repos
+      }
   }
   return state
 }

From 46df9398e88c16393bf69de7d696c2d181c9aa31 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Mon, 2 May 2016 04:36:59 +0900
Subject: [PATCH 009/109] remove OSSAnnounceModal

---
 browser/main/MainPage.js               |  2 +-
 browser/main/index.js                  | 10 ---------
 browser/main/modal/OSSAnnounceModal.js | 29 --------------------------
 3 files changed, 1 insertion(+), 40 deletions(-)
 delete mode 100644 browser/main/modal/OSSAnnounceModal.js

diff --git a/browser/main/MainPage.js b/browser/main/MainPage.js
index fb729bd5..a5371252 100644
--- a/browser/main/MainPage.js
+++ b/browser/main/MainPage.js
@@ -41,7 +41,7 @@ export default class MainContainer extends React.Component {
         onWheel={(e) => this.handleWheel(e)}
       >
         {this.state.updateAvailable ? (
-        <button onClick={this.updateApp} className='appUpdateButton'><i className='fa fa-cloud-download'/> Update available!</button>
+          <button onClick={this.updateApp} className='appUpdateButton'><i className='fa fa-cloud-download'/> Update available!</button>
         ) : null}
         <HomePage/>
       </div>
diff --git a/browser/main/index.js b/browser/main/index.js
index 0c15732b..70241b14 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -4,8 +4,6 @@ import store from './store'
 import React from 'react'
 import ReactDOM from 'react-dom'
 require('!!style!css!stylus?sourceMap!../styles/main/index.styl')
-import { openModal } from 'browser/lib/modal'
-import OSSAnnounceModal from './modal/OSSAnnounceModal'
 import activityRecord from 'browser/lib/activityRecord'
 import fetchConfig from '../lib/fetchConfig'
 const electron = require('electron')
@@ -84,12 +82,4 @@ ReactDOM.render((
 ), el, function () {
   let loadingCover = document.getElementById('loadingCover')
   loadingCover.parentNode.removeChild(loadingCover)
-  let status = JSON.parse(localStorage.getItem('status'))
-  if (status == null) status = {}
-
-  if (!status.ossAnnounceWatched) {
-    openModal(OSSAnnounceModal)
-    status.ossAnnounceWatched = true
-    localStorage.setItem('status', JSON.stringify(status))
-  }
 })
diff --git a/browser/main/modal/OSSAnnounceModal.js b/browser/main/modal/OSSAnnounceModal.js
deleted file mode 100644
index 0902682e..00000000
--- a/browser/main/modal/OSSAnnounceModal.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { PropTypes } from 'react'
-import ExternalLink from 'browser/components/ExternalLink'
-
-export default class OSSAnnounceModal extends React.Component {
-  handleCloseBtnClick (e) {
-    this.props.close()
-  }
-  render () {
-    return (
-      <div className='OSSAnnounceModal modal'>
-
-        <div className='OSSAnnounceModal-title'>Boostnote has been Open-sourced</div>
-
-        <ExternalLink className='OSSAnnounceModal-link' href='https://github.com/BoostIO/Boostnote'>
-          https://github.com/BoostIO/Boostnote
-        </ExternalLink>
-
-        <button
-          className='OSSAnnounceModal-closeBtn'
-          onClick={(e) => this.handleCloseBtnClick(e)}
-        >Close</button>
-      </div>
-    )
-  }
-}
-
-OSSAnnounceModal.propTypes = {
-  close: PropTypes.func
-}

From 039429d452aad463a6ead5512962ad4f8535fd6a Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Mon, 2 May 2016 04:37:33 +0900
Subject: [PATCH 010/109] add merge-stream to devDependencies

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 7ee4a0e0..f25d37ae 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "grunt": "^0.4.5",
     "grunt-electron-installer": "^1.2.0",
     "history": "^1.17.0",
+    "merge-stream": "^1.0.0",
     "nib": "^1.1.0",
     "react": "^0.14.3",
     "react-css-modules": "^3.7.6",

From e6a0c86f4eb4c1c6f98c790bbc1356b14966fa5e Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Mon, 2 May 2016 04:37:39 +0900
Subject: [PATCH 011/109] upgrade ace

---
 submodules/ace | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/submodules/ace b/submodules/ace
index e94cb3c7..8dcfcd6d 160000
--- a/submodules/ace
+++ b/submodules/ace
@@ -1 +1 @@
-Subproject commit e94cb3c7ffccfb2e565cc857f07a988c0989e527
+Subproject commit 8dcfcd6d0d6e0167f2282fa51308facc6f4fc46c

From 1d2ca469fce8b8e94134135e7f57f717d29a3f87 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Tue, 3 May 2016 15:33:47 +0900
Subject: [PATCH 012/109] add Repository class

---
 browser/lib/Repository.js | 587 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 587 insertions(+)
 create mode 100644 browser/lib/Repository.js

diff --git a/browser/lib/Repository.js b/browser/lib/Repository.js
new file mode 100644
index 00000000..40077966
--- /dev/null
+++ b/browser/lib/Repository.js
@@ -0,0 +1,587 @@
+const keygen = require('browser/lib/keygen')
+const fs = require('fs')
+const path = require('path')
+const CSON = require('season')
+const _ = require('lodash')
+
+let repositories = []
+
+/**
+ * # Repository
+ *
+ * ## Life cycle
+ *
+ * ```js
+ * // Add reposiotry
+ * var repo = new Repository({name: 'test', path: '/Users/somebody/test'})
+ * repo
+ *   .mount()
+ *   .then(() => repo.load())
+ *
+ * // Update Cached
+ * repo.updateCache({name: 'renamed'})
+ *
+ * // Update JSON
+ * repo.updateJSON({author: 'Other user'})
+ *
+ * // Remove repository
+ * repo.unmount()
+ * ```
+ *
+ * ## `this.cached`
+ *
+ * Information of a Repository. It stores in `repoStats` key of localStorage
+ *
+ * ```js
+ * this.cached = {
+ *   "key":"523280a789404d430ce571ab9148fdd1343336cb",
+ *   "name":"test",
+ *   "path":"/Users/dickchoi/test"
+ * }
+ * ```
+ *
+ * ## `this.json`
+ *
+ * Parsed object from `boostrepo.json`. See `boostrepo.json`.
+ *
+ * ## Repository file structure
+ *
+ * The root directory of a Repository. It has several files and folders.
+ *
+ * ```
+ * root
+ *  |- data
+ *      |-note1.cson
+ *      |-note2.cson
+ *      |-note3.cson
+ *  |- boostrepo.json
+ * ```
+ *
+ * #### `boostrepo.json`
+ *
+ * ```js
+ * {
+ *   name: String,
+ *   author: String, // Same convention of package.json, `John Doe <email@example.com> (http://example.com)`
+ *   remotes: [{
+ *     name: String,
+ *     url: String, // url of git remote
+ *     branch: String // if branch isn't set, it will try to use `master` branch.
+ *   }],
+ *   folders: [{
+ *     key: String // Unique sha1 hash key to identify folder,
+ *     name: String,
+ *     color: String // All CSS color formats available.
+ *   }]
+ * }
+ * ```
+ *
+ * #### `data` directory
+ *
+ * Every note will be saved here as a single CSON file to `git diff` efficiently.
+ * > This is because CSON supports Multiline string.
+ * File name of each cson file will be used to identify note.
+ * Commonly, Boostnote will automatically generate sha1 key and use it as a file name when creating a new note.
+ *
+ * ##### `note.cson`
+ *
+ * ```cson
+ * name: String
+ * tags: [String] // tags
+ * folder: String // hash key of folder
+ * mode: String // syntax mode
+ * title: String
+ * content: String
+ * createdAt: Date
+ * updatedAt: Date
+ * ```
+ *
+ * ### Full data
+ *
+ * Full data of a Repository. It includes not only information also all data(notes). Redux will directly handle this data.
+ *
+ * ```js
+ * var repo = Object.assign({}, repoJSON, notesData, cached, {status: 'READY'})
+ *
+ * // repo
+ * {
+ *   {...repoJSON}
+ *   "key": "523280a789404d430ce571ab9148fdd1343336cb",
+ *   "name": "test",
+ *   "path": "/Users/dickchoi/test",
+ *   "notes": [], // See `note.cson`
+ *   "status": "READY" // If Boostnote failed to fetch data, It will be set `ERROR`
+ * }
+ * ```
+ */
+
+class Repository {
+  constructor (cached) {
+    this.cached = _.pick(cached, ['key', 'name', 'path'])
+    this.status = 'IDLE'
+    this.isMount = false
+  }
+
+  /**
+   * Reload and set all data of a repository
+   * @return {Promise} full data of a repository
+   */
+  load () {
+    if (!_.isString(this.cached.key)) {
+      console.warn('The key of this repository doesn\'t seem to be valid. You should input this data to Redux reducer after setting the key properly.')
+    }
+    let name = this.cached.name
+    let targetPath = this.cached.path
+
+    targetPath = path.join(targetPath)
+    let dataPath = path.join(targetPath, 'data')
+
+    let initializeRepository = () => {
+      let resolveDataDirectory = this.constructor.resolveDirectory(path.join(targetPath, 'data'))
+      let resolveBoostrepoJSON = this.constructor.resolveJSON(path.join(targetPath, 'boostrepo.json'), {name: name})
+      return Promise.all([resolveDataDirectory, resolveBoostrepoJSON])
+        .then((data) => {
+          this.json = data[1]
+        })
+    }
+
+    let fetchNotes = () => {
+      let noteNames = fs.readdirSync(dataPath)
+      let notes = noteNames
+        .map((noteName) => {
+          let notePath = path.join(dataPath, noteNames)
+
+          return new Promise(function (resolve, reject) {
+            CSON.readFile(notePath, function (err, obj) {
+              if (err != null) {
+                console.log(err)
+                return resolve(null)
+              }
+              obj.key = path.basename(noteName, '.cson')
+              return resolve(obj)
+            })
+          })
+        })
+        .filter((note) => note != null)
+
+      return Promise.all(notes)
+        .then((notes) => {
+          this.notes = notes
+        })
+    }
+
+    return this.constructor.resolveDirectory(targetPath)
+      .then(initializeRepository)
+      .then(fetchNotes)
+      .then(() => {
+        this.status = 'READY'
+
+        return this.getData()
+      })
+      .catch(function handleError (err) {
+        this.status = 'ERROR'
+        this.error = err
+        return err
+      })
+  }
+
+  /**
+   * Add repository to localStorage
+   * If key doesn't exist, it will generate it.
+   * If a cache having same key extists in localStorage, override it.
+   *
+   * @return {Promise} added cache data
+   */
+  mount () {
+    let allCached = this.constructor.getAllCached()
+
+    // If key is not set, generate new one.
+    if (!_.isString(this.cached.key)) {
+      this.cached.key = keygen()
+      // Repeat utill generated key becomes unique.
+      while (_.findIndex(allCached, {key: this.cached.key}) > -1) {
+        this.cached.key = keygen()
+      }
+    }
+
+    let targetCachedIndex = _.findIndex(allCached, {key: this.cached.key})
+    if (targetCachedIndex > -1) {
+      allCached.splice(targetCachedIndex, 1, this.cached)
+    } else {
+      allCached.push(this.cached)
+    }
+    this.constructor.saveAllCached(allCached)
+    this.isMount = true
+
+    // Put in `repositories` array if it isn't in.
+    let targetIndex = _.findIndex(repositories, {cached: {key: this.cached.key}})
+    if (targetIndex < 0) {
+      repositories.push(this)
+    }
+
+    return Promise.resolve(this.cached)
+  }
+
+  /**
+   * Remove repository from localStorage
+   * @return {Promise} remoded cache data
+   */
+  unmount () {
+    let allCached = this.constructor.getAllCached()
+
+    let targetCachedIndex = _.findIndex(allCached, {key: this.cached.key})
+    if (targetCachedIndex > -1) {
+      allCached.splice(targetCachedIndex, 1)
+    }
+    this.constructor.saveAllCached(allCached)
+    this.isMount = false
+
+    // Discard from `repositories` array if it is in.
+    let targetIndex = _.findIndex(repositories, {cached: {key: this.cached.key}})
+    if (targetIndex > -1) {
+      repositories.splice(targetIndex, 1)
+    }
+
+    return Promise.resolve(this.cached)
+  }
+
+  /**
+   * Get all data of a repository
+   *
+   * If data is not ready, try to load it.
+   *
+   * @return {Promise} all data of a repository
+   */
+  getData () {
+    if (this.status !== 'READY') {
+      return this.load()
+    }
+
+    return Promise.resolve(Object.assign({}, this.json, this.cached, {
+      status: this.status,
+      notes: this.notes
+    }))
+  }
+
+  /**
+   * Save Cached
+   * @param  {Object} newCached
+   * @return {Promies} updated Cached
+   */
+  saveCached (newCached) {
+    if (_.isObject(newCached)) {
+      Object.assign(this.cached, _.pick(newCached, ['name', 'path']))
+    }
+
+    if (this.isMount) {
+      this.mount()
+    }
+
+    return Promise.resolve(this.cached)
+  }
+
+  /**
+   * Save JSON
+   * @param  {Object}  newJSON
+   * @return {Promise} updated JSON
+   */
+  saveJSON (newJSON) {
+    let jsonPath = path.join(this.cached.path, 'boostrepo.json')
+    Object.assign(this.json, newJSON)
+
+    return new Promise(function (resolve, reject) {
+      CSON
+        .writeFile(jsonPath, this.json, function (err) {
+          if (err != null) return reject(err)
+          resolve(this.json)
+        })
+    })
+  }
+
+  /**
+   * Save both Cached and JSON
+   * @return {Promise} resolve array have cached and JSON
+   */
+  save () {
+    return Promise.all([this.saveCached(), this.saveJSON()])
+  }
+
+  /**
+   * Add a folder
+   * @param {Object} newFolder
+   * @return {Promise} new folder
+   */
+  addFolder (newFolder) {
+    let { folders } = this.json
+
+    newFolder = _.pick(newFolder, ['color', 'name'])
+    if (!_.isString(newFolder.name) || newFolder.name.trim().length === 0) newFolder.name = 'unnamed'
+    else newFolder.name = newFolder.trim()
+
+    if (!_.isString(newFolder.color)) newFolder.color = ''
+
+    newFolder.key = keygen()
+    while (_.findIndex(folders, {key: newFolder.key}) > -1) {
+      newFolder.key = keygen()
+    }
+
+    folders.push(newFolder)
+
+    return this.updateJSON(this.json)
+      .then(() => newFolder)
+  }
+
+  /**
+   * Update a folder
+   * @param  {String} folderKey [description]
+   * @param  {Object} override   [description]
+   * @return {[type]}           [description]
+   */
+  updateFolder (folderKey, override) {
+    let { folders } = this.json
+
+    let targetFolder = _.find(folders, {key: folderKey})
+    if (targetFolder == null) {
+      return this.addFolder(override)
+    }
+    if (_.isString(override.name) && override.name.trim().length > 0) targetFolder.name = override.name.trim()
+    if (_.isString(override.color)) targetFolder.color = override.color
+
+    return this.updateJSON(this.json)
+      .then(() => targetFolder)
+  }
+
+  /**
+   * Remove a folder
+   * @param  {String} folderKey
+   * @return {Promise} removed folder
+   */
+  removeFolder (folderKey) {
+    let { folders } = this.json
+    let targetFolder = null
+
+    let targetIndex = _.findIndex(folders, {key: folderKey})
+    if (targetIndex > -1) {
+      targetFolder = folders.splice(targetIndex, 1)[0]
+    }
+
+    return this.updateJSON(null)
+      .then(() => targetFolder)
+  }
+
+  addNote (newNote) {
+    newNote = Object.assign({}, _.pick(newNote, ['content', 'tags', 'folder', 'mode', 'title']))
+
+    if (!this.constructor.validateNote(newNote)) {
+      return Promise.reject(new Error('Invalid input'))
+    }
+
+    newNote.key = keygen()
+    while (_.find(this.notes, {key: newNote.key}) != null) {
+      newNote.key = keygen()
+    }
+    newNote.createdAt = new Date()
+    newNote.updatedAt = new Date()
+    this.notes.push(newNote)
+
+    return new Promise((resolve, reject) => {
+      CSON.writeFile(path.join(this.cached.path, 'data', newNote.key + '.cson'), _.omit(newNote, ['key']), function (err) {
+        if (err != null) return reject(err)
+        resolve(newNote)
+      })
+    })
+  }
+
+  static validateNote (note) {
+    if (!_.isString(note.title)) return false
+    if (!_.isString(note.content)) return false
+    if (!_.isArray(note.tags)) return false
+    if (!note.tags.every((tag) => _.isString(tag))) return false
+    if (!_.isString(note.folder)) return false
+    if (!_.isString(note.mode)) return false
+    return true
+  }
+
+  getNote (noteKey) {
+    let note = _.find(this.notes, {key: noteKey})
+
+    return Promise.resolve(note)
+  }
+
+  updateNote (noteKey, override) {
+    let note = _.find(this.notes, {key: noteKey})
+    let isNew = false
+    if (note == null) {
+      note = override
+      isNew = true
+    }
+
+    if (!this.constructor.validateNote(note)) {
+      return Promise.reject(new Error('Invalid input'))
+    }
+
+    if (isNew) this.notes.push(note)
+    note.updatedAt = new Date()
+
+    return new Promise((resolve, reject) => {
+      CSON.writeFile(path.join(this.cached.path, 'data', note.key + '.cson'), _.omit(note, ['key']), function (err) {
+        if (err != null) return reject(err)
+        resolve(note)
+      })
+    })
+  }
+
+  removeNote (noteKey) {
+    let noteIndex = _.findIndex(this.notes, {key: noteKey})
+
+    if (noteIndex < 0) return Promise.resolve(null)
+
+    let note = this.notes[noteIndex]
+    this.notes.splice(noteIndex, 1)
+
+    return new Promise((resolve, reject) => {
+      fs.unlink(path.join(this.cached.path, 'data', noteKey + '.cson'), function (err) {
+        if (err != null) return reject(err)
+        resolve(note)
+      })
+    })
+  }
+
+  getAllNotes () {
+    return Promise.resolve(this.notes)
+  }
+
+  static generateDefaultJSON (override) {
+    return Object.assign({
+      name: 'unnamed',
+      remotes: [],
+      folders: [{
+        key: keygen(),
+        name: 'general',
+        color: 'green'
+      }]
+    }, override)
+  }
+
+  /**
+   * # Resolve Repository JSON
+   *
+   * Fetch and parse JSON from given path.
+   * If boostrepo.json doesn't exist, create new one.
+   *
+   * @param  {String} targetPath [description]
+   * @param  {Object} defaultOverrides Overrided to default value of RepoJSON when creating new one.
+   * @return {Promise} resolving parsed data
+   */
+  static resolveJSON (targetPath, defaultOverrides) {
+    return new Promise(function checkIfExists (resolve, reject) {
+      // If JSON doesn't exist, make a new one.
+      if (CSON.resolve(targetPath) == null) {
+        let newRepoJSON = this.constructor.generateDefaultJSON(defaultOverrides)
+        CSON.writeFile(targetPath, newRepoJSON, function (err) {
+          if (err != null) return reject(err)
+          resolve(newRepoJSON)
+        })
+      } else {
+        CSON.readFile(targetPath, function (err, obj) {
+          if (err != null) return reject(err)
+          resolve(obj)
+        })
+      }
+    })
+  }
+
+  /**
+   * # Resolve directory.
+   *
+   * Make sure the directory exists.
+   * If directory doesn't exist, it will try to make a new one.
+   * If failed, it return rejected promise
+   *
+   * @param  {String} targetPath Target path of directory
+   * @return {Promise} resolving targetPath
+   */
+  static resolveDirectory (targetPath) {
+    return new Promise(function (resolve, reject) {
+      // check the directory exists
+      fs.stat(targetPath, function (err, stat) {
+        // Reject errors except `ENOENT`
+        if (err != null && err.code !== 'ENOENT') {
+          return reject(err)
+        }
+
+        // Handle no suchfile error only
+        // Make new Folder by given path
+        if (err != null) {
+          return fs.mkdir(targetPath, function (err, stat) {
+            // If failed to make a new directory, reject it.
+            if (err != null) {
+              return reject(err)
+            }
+            resolve(targetPath)
+          })
+        }
+
+        // Check the target is not a directory
+        if (!stat.isDirectory()) {
+          return reject(new Error(targetPath + ' path is not a directory'))
+        }
+        resolve(targetPath)
+      })
+    })
+  }
+
+  /**
+   * Get all repository stats from localStorage
+   * it is stored to `repositories` key.
+   * if the data is corrupted, re-intialize it.
+   *
+   * @return {Array} registered repositories
+   * ```
+   * [{
+   *   key: String,
+   *   name: String,
+   *   path: String // path of repository
+   * }]
+   * ```
+   */
+  static getAllCached () {
+    let data
+    try {
+      data = JSON.parse(localStorage.getItem('repositories'))
+      if (!_.isArray(data)) {
+        throw new Error('Data is corrupted. it must be an array.')
+      }
+    } catch (err) {
+      console.log(err)
+      data = []
+      this.saveAllCached(data)
+    }
+    return data
+  }
+
+  static saveAllCached (allCached) {
+    localStorage.setItem('repositories', JSON.stringify(allCached))
+  }
+
+  static loadAll () {
+    repositories = []
+    return Promise.all(this.getAllCached().map((cached) => {
+      let repo = new this(cached)
+      repositories.push(repo)
+
+      return repo.load()
+    }))
+  }
+
+  static list () {
+    return Promise.resolve(repositories)
+  }
+
+  static find (repoKey) {
+    let repository = _.find(repositories, {cached: {key: repoKey}})
+    return Promise.resolve(repository)
+  }
+}
+
+export default Repository

From 45c627b0a5e1b72e29886f622101f422761a1227 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Tue, 3 May 2016 15:37:14 +0900
Subject: [PATCH 013/109] using Repository class

---
 browser/lib/RepositoryManager.js              | 312 ------------------
 .../{Repository.js => RepositorySection.js}   |  23 +-
 ...Repository.styl => RepositorySection.styl} |   0
 browser/main/HomePage/SideNav/index.js        |  20 +-
 browser/main/HomePage/index.js                | 243 +++-----------
 browser/main/actions.js                       | 200 -----------
 browser/main/modal/NewRepositoryModal.js      |  42 ++-
 browser/main/store.js                         |  58 +++-
 8 files changed, 151 insertions(+), 747 deletions(-)
 delete mode 100644 browser/lib/RepositoryManager.js
 rename browser/main/HomePage/SideNav/{Repository.js => RepositorySection.js} (80%)
 rename browser/main/HomePage/SideNav/{Repository.styl => RepositorySection.styl} (100%)
 delete mode 100644 browser/main/actions.js

diff --git a/browser/lib/RepositoryManager.js b/browser/lib/RepositoryManager.js
deleted file mode 100644
index 1c1f3a1a..00000000
--- a/browser/lib/RepositoryManager.js
+++ /dev/null
@@ -1,312 +0,0 @@
-const keygen = require('browser/lib/keygen')
-const fs = require('fs')
-const path = require('path')
-const CSON = require('season')
-const _ = require('lodash')
-
-/**
- * # Repo structure
- *
- * ```
- * root
- *  |- data
- *      |-note1.cson
- *      |-note2.cson
- *      |-note3.cson
- *  |- boostrepo.json
- * ```
- *
- * ## `boostrepo.json`
- *
- * ```js
- * {
- *   name: String,
- *   author: String, // Same convention of package.json, `John Doe <email@example.com> (http://example.com)`
- *   remotes: [{
- *     name: String,
- *     url: String, // url of git remote
- *     branch: String // if branch isn't set, it will try to use `master` branch.
- *   }],
- *   folders: [{
- *     key: String // Unique sha1 hash key to identify folder,
- *     name: String,
- *     color: String // All CSS color formats available.
- *   }]
- * }
- * ```
- *
- * ## `data` directory
- *
- * Every note will be saved here as a single CSON file to `git diff` efficiently.
- * > This is because CSON supports Multiline string.
- * File name of each cson file will be used to identify note.
- * Commonly, Boostnote will automatically generate sha1 key and use it as a file name when creating a new note.
- *
- * ### `note.cson`
- *
- * ```cson
- * name: String
- * tags: [String] // tags
- * folder: String // hash key of folder
- * mode: String // syntax mode
- * title: String
- * content: String
- * createdAt: Date
- * updatedAt: Date
- * ```
- */
-
-/**
- * # Resolve directory.
- *
- * If directory doesn't exist, it will try to make a new one.
- * If failed return rejected promise
- *
- * @param  {String} targetPath Target path of directory
- * @return {Promise}      [description]
- */
-function _resolveDirectory (targetPath) {
-  return new Promise(function (resolve, reject) {
-    // check the directory exists
-    fs.stat(targetPath, function (err, stat) {
-      // Reject errors except no suchfile
-      if (err != null && err.code !== 'ENOENT') {
-        return reject(err)
-      }
-
-      // Handle no suchfile error only
-      // Make new Folder by given path
-      if (err != null) {
-        return fs.mkdir(targetPath, function (err, stat) {
-          // If failed to make a new directory, reject it.
-          if (err != null) {
-            return reject(err)
-          }
-          resolve(targetPath)
-        })
-      }
-
-      // Check the target is not a directory
-      if (!stat.isDirectory()) {
-        return reject(new Error(targetPath + ' path is not a directory'))
-      }
-      resolve(targetPath)
-    })
-  })
-}
-
-function _generateDefaultRepoJSON (override) {
-  return Object.assign({
-    name: 'default',
-    remotes: [],
-    folders: [{
-      key: keygen(),
-      name: 'general',
-      color: 'green'
-    }]
-  }, override)
-}
-
-/**
- * # Resolve RepoJSON
- *
- * Every repository must have `boostrepo.json`
- *
- * If boostrepo.json doesn't exist, create new one.
- *
- * @param  {[type]} targetPath [description]
- * @return {[type]}            [description]
- */
-function _resolveRepoJSON (targetPath) {
-  return new Promise(function checkIfExists (resolve, reject) {
-    // If JSON doesn't exist, make a new one.
-    if (CSON.resolve(targetPath) == null) {
-      let newRepoJSON = _generateDefaultRepoJSON()
-      return CSON.writeFile(targetPath, newRepoJSON, function (err) {
-        if (err != null) return reject(err)
-        resolve(newRepoJSON)
-      })
-    }
-
-    CSON.readFile(targetPath, function (err, obj) {
-      if (err != null) return reject(err)
-      resolve(obj)
-    })
-  })
-}
-
-/**
- * Get all repository stats from localStorage
- * it is stored to `repositories` key.
- * if the data is corrupted, re-intialize it.
- *
- * @return {Array} registered repositories
- * ```
- * [{
- *   key: String,
- *   name: String,
- *   path: String // path of repository
- * }]
- * ```
- */
-function getAllRepoStats () {
-  let data
-  try {
-    data = JSON.parse(localStorage.getItem('repoStats'))
-    if (!_.isArray(data)) {
-      throw new Error('Data is corrupted. it must be an array.')
-    }
-  } catch (err) {
-    console.log(err)
-    data = []
-    _saveAllRepoStats(data)
-  }
-  return data
-}
-
-/**
- * Save All Repos
- */
-function _saveAllRepoStats (repoStats) {
-  localStorage.setItem('repoStats', JSON.stringify(repoStats))
-}
-
-/**
- * Add repository and return new Repo
- * @param {Object} newRepo [description]
- * ```
- * {
- *   key: String,
- *   name: String,
- *   path: String,
- *   status: String,
- *   folders: [{
- *     key: String,
- *     color: String,
- *     name: String
- *   }],
- *   notes: [{
- *     key: String,
- *     title: String,
- *     content: String,
- *     folder: String,
- *     tags: [String],
- *     createdAt: Date,
- *     updatedAt: Date
- *   }]
- * }
- * ```
- */
-function addRepo (newRepo) {
-  let { targetPath, name } = newRepo
-  targetPath = path.resolve(targetPath)
-
-  let repoStat, repoJSON
-  return _resolveDirectory(targetPath)
-    .then(function initializeRepo () {
-      let resolveDataDirectory = _resolveDirectory(path.resolve(targetPath, 'data'))
-      let resolveBoostrepoJSON = _resolveRepoJSON(path.resolve(targetPath, 'boostrepo.json'))
-      return Promise.all([resolveDataDirectory, resolveBoostrepoJSON])
-    })
-    .then(function saveToLocalStorage (data) {
-      let dataPath = data[0]
-      repoJSON = data[1]
-
-      let repoStats = getAllRepoStats()
-
-      // generate unique key
-      let key = keygen()
-      while (repoStats.some((repoStat) => repoStat.key === key)) {
-        key = keygen()
-      }
-
-      repoStat = {
-        key,
-        name: name,
-        path: targetPath
-      }
-
-      repoStats.push(repoStat)
-      _saveAllRepoStats(repoStats)
-
-      return dataPath
-    })
-    .then(function fetchNotes (dataPath) {
-      let noteNames = fs.readdirSync(dataPath)
-      let notes = noteNames
-        .map((noteName) => {
-          let notePath = path.resolve(dataPath, noteNames)
-
-          return new Promise(function (resolve, reject) {
-            CSON.readFile(notePath, function (err, obj) {
-              if (err != null) {
-                console.log(err)
-                return resolve(null)
-              }
-              obj.key = path.basename(noteName, '.cson')
-              return resolve(obj)
-            })
-          })
-        })
-        .filter((note) => note != null)
-
-      return Promise.all(notes)
-    })
-    .then(function resolveRepo (notes) {
-      return Object.assign({}, repoJSON, repoStat, {
-        status: 'IDLE',
-        notes
-      })
-    })
-}
-
-function removeRepo (repository) {
-  return new Promise(function (resolve, reject) {
-    try {
-      let repoStats = getAllRepoStats()
-      let targetIndex = _.findIndex(repoStats, {key: repository.key})
-      if (targetIndex > -1) {
-        repoStats.splice(targetIndex, 1)
-      }
-      _saveAllRepoStats(repoStats)
-      resolve(true)
-    } catch (err) {
-      reject(err)
-    }
-  })
-}
-
-function getRepos () {
-  let repoStats
-  try {
-    repoStats = JSON.parse(localStorage.getItem('repoStats'))
-    if (repoStats == null) repoStats = []
-  } catch (err) {
-    repoStats = []
-  }
-  return repoStats
-    .map((repoStat) => {
-      let repoJSON, notes
-      try {
-        repoJSON = CSON.readFileSync(path.resolve(repoStat.path, 'boostrepo.json'))
-        let notePaths = fs.readdirSync(path.resolve(repoStat.path, 'data'))
-        notes = notePaths.map((notePath) => CSON.readFileSync(notePath))
-      } catch (err) {
-        return Object.assign({}, repoStat, {
-          status: 'ERROR',
-          error: err
-        })
-      }
-      return Object.assign({}, repoJSON, repoStat, {
-        status: 'IDLE',
-        notes
-      })
-    })
-}
-
-export default {
-  getAllRepoStats,
-  addRepo,
-  removeRepo,
-  getRepos
-}
diff --git a/browser/main/HomePage/SideNav/Repository.js b/browser/main/HomePage/SideNav/RepositorySection.js
similarity index 80%
rename from browser/main/HomePage/SideNav/Repository.js
rename to browser/main/HomePage/SideNav/RepositorySection.js
index 4631af6b..e0ccc29c 100644
--- a/browser/main/HomePage/SideNav/Repository.js
+++ b/browser/main/HomePage/SideNav/RepositorySection.js
@@ -1,16 +1,21 @@
 import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
-import styles from './Repository.styl'
-import actions from 'browser/main/actions'
-import RepositoryManager from 'browser/lib/RepositoryManager'
+import styles from './RepositorySection.styl'
+import Repository from 'browser/lib/Repository'
 
-class Repository extends React.Component {
+class RepositorySection extends React.Component {
   handleUnlinkButtonClick (e) {
     let { dispatch, repository } = this.props
 
-    RepositoryManager.removeRepo(repository)
+    Repository.find(repository.key)
+      .then((repositoryInstance) => {
+        return repositoryInstance.unmount()
+      })
       .then(() => {
-        dispatch(actions.removeRepo(repository))
+        dispatch({
+          type: 'REMOVE_REPOSITORY',
+          key: repository.key
+        })
       })
   }
 
@@ -40,7 +45,7 @@ class Repository extends React.Component {
 
     return (
       <div
-        className='Repository'
+        className='RepositorySection'
         styleName='root'
       >
         <div styleName='header'>
@@ -76,7 +81,7 @@ class Repository extends React.Component {
   }
 }
 
-Repository.propTypes = {
+RepositorySection.propTypes = {
   repository: PropTypes.shape({
     name: PropTypes.string,
     folders: PropTypes.arrayOf(PropTypes.shape({
@@ -86,4 +91,4 @@ Repository.propTypes = {
   dispatch: PropTypes.func
 }
 
-export default CSSModules(Repository, styles)
+export default CSSModules(RepositorySection, styles)
diff --git a/browser/main/HomePage/SideNav/Repository.styl b/browser/main/HomePage/SideNav/RepositorySection.styl
similarity index 100%
rename from browser/main/HomePage/SideNav/Repository.styl
rename to browser/main/HomePage/SideNav/RepositorySection.styl
diff --git a/browser/main/HomePage/SideNav/index.js b/browser/main/HomePage/SideNav/index.js
index be606bdd..3d26e1df 100644
--- a/browser/main/HomePage/SideNav/index.js
+++ b/browser/main/HomePage/SideNav/index.js
@@ -1,11 +1,10 @@
 import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SideNav.styl'
-import actions from 'browser/main/actions'
 import { openModal, isModalOpen } from 'browser/lib/modal'
 import Preferences from '../../modal/Preferences'
 import CreateNewFolder from '../../modal/CreateNewFolder'
-import Repository from './Repository'
+import RepositorySection from './RepositorySection'
 import NewRepositoryModal from '../../modal/NewRepositoryModal'
 
 const ipc = require('electron').ipcRenderer
@@ -39,13 +38,11 @@ class SideNav extends React.Component {
   handleFolderButtonClick (name) {
     return (e) => {
       let { dispatch } = this.props
-      dispatch(actions.switchFolder(name))
     }
   }
 
   handleAllFoldersButtonClick (e) {
     let { dispatch } = this.props
-    dispatch(actions.setSearchFilter(''))
   }
 
   handleNewRepositoryButtonClick (e) {
@@ -55,8 +52,8 @@ class SideNav extends React.Component {
   render () {
     let { repositories, dispatch } = this.props
     let repositorieElements = repositories.map((repo) => {
-      return <Repository
-        key={repo.name}
+      return <RepositorySection
+        key={repo.key}
         repository={repo}
         dispatch={dispatch}
       />
@@ -108,17 +105,6 @@ class SideNav extends React.Component {
 
 SideNav.propTypes = {
   dispatch: PropTypes.func,
-  status: PropTypes.shape({
-    folderId: PropTypes.number
-  }),
-  user: PropTypes.object,
-  folders: PropTypes.array,
-  allArticles: PropTypes.array,
-  articles: PropTypes.array,
-  modified: PropTypes.array,
-  activeArticle: PropTypes.shape({
-    key: PropTypes.string
-  }),
   repositories: PropTypes.array
 }
 
diff --git a/browser/main/HomePage/index.js b/browser/main/HomePage/index.js
index da4c3dfa..93e06316 100644
--- a/browser/main/HomePage/index.js
+++ b/browser/main/HomePage/index.js
@@ -1,30 +1,31 @@
 import React, { PropTypes} from 'react'
 import { connect } from 'react-redux'
 import ReactDOM from 'react-dom'
-import { toggleTutorial } from '../actions'
 import SideNav from './SideNav'
 import ArticleTopBar from './ArticleTopBar'
 import ArticleList from './ArticleList'
 import ArticleDetail from './ArticleDetail'
-import _ from 'lodash'
 import { isModalOpen, closeModal } from 'browser/lib/modal'
+import Repository from 'browser/lib/Repository'
 
 const electron = require('electron')
 const remote = electron.remote
 
-const TEXT_FILTER = 'TEXT_FILTER'
-const FOLDER_FILTER = 'FOLDER_FILTER'
-const FOLDER_EXACT_FILTER = 'FOLDER_EXACT_FILTER'
-const TAG_FILTER = 'TAG_FILTER'
-
 const OSX = global.process.platform === 'darwin'
 
 class HomePage extends React.Component {
   componentDidMount () {
-    // React自体のKey入力はfocusされていないElementからは動かないため、
-    // `window`に直接かける
-    this.keyHandler = e => this.handleKeyDown(e)
-    window.addEventListener('keydown', this.keyHandler)
+    let { dispatch } = this.props
+
+    // Bind directly to window
+    // this.keyHandler = (e) => this.handleKeyDown(e)
+    // window.addEventListener('keydown', this.keyHandler)
+
+    // Reload all data
+    Repository.loadAll()
+      .then((allData) => {
+        dispatch({type: 'INIT_ALL', data: allData})
+      })
   }
 
   componentWillUnmount () {
@@ -32,216 +33,72 @@ class HomePage extends React.Component {
   }
 
   handleKeyDown (e) {
-    if (isModalOpen()) {
-      if (e.keyCode === 13 && (OSX ? e.metaKey : e.ctrlKey)) {
-        remote.getCurrentWebContents().send('modal-confirm')
-      }
-      if (e.keyCode === 27) closeModal()
-      return
-    }
+    // if (isModalOpen()) {
+    //   if (e.keyCode === 13 && (OSX ? e.metaKey : e.ctrlKey)) {
+    //     remote.getCurrentWebContents().send('modal-confirm')
+    //   }
+    //   if (e.keyCode === 27) closeModal()
+    //   return
+    // }
 
-    let { status, dispatch } = this.props
-    let { top, list } = this.refs
-    let listElement = ReactDOM.findDOMNode(list)
+    // let { dispatch } = this.props
+    // let { top, list } = this.refs
+    // let listElement = ReactDOM.findDOMNode(list)
 
-    if (status.isTutorialOpen) {
-      dispatch(toggleTutorial())
-      e.preventDefault()
-      return
-    }
+    // if (status.isTutorialOpen) {
+    //   // dispatch(toggleTutorial())
+    //   e.preventDefault()
+    //   return
+    // }
 
-    if (e.keyCode === 13 && top.isInputFocused()) {
-      listElement.focus()
-      return
-    }
-    if (e.keyCode === 27 && top.isInputFocused()) {
-      if (status.search.length > 0) top.escape()
-      else listElement.focus()
-      return
-    }
+    // if (e.keyCode === 13 && top.isInputFocused()) {
+    //   listElement.focus()
+    //   return
+    // }
+    // if (e.keyCode === 27 && top.isInputFocused()) {
+    //   // if (status.search.length > 0) top.escape()
+    //   // else listElement.focus()
+    //   return
+    // }
 
-    // Search inputがfocusされていたら大体のキー入力は無視される。
-    if (e.keyCode === 27) {
-      if (document.activeElement !== listElement) {
-        listElement.focus()
-      } else {
-        top.focusInput()
-      }
-      return
-    }
+    // // Search inputがfocusされていたら大体のキー入力は無視される。
+    // if (e.keyCode === 27) {
+    //   if (document.activeElement !== listElement) {
+    //     listElement.focus()
+    //   } else {
+    //     top.focusInput()
+    //   }
+    //   return
+    // }
   }
 
   render () {
-    let { dispatch, status, user, articles, allArticles, modified, activeArticle, folders, tags } = this.props
-    let { repositories } = this.props
-
     return (
       <div className='HomePage'>
         <SideNav
           ref='nav'
-          dispatch={dispatch}
-          repositories={repositories}
-          status={status}
-          user={user}
-          folders={folders}
-          allArticles={allArticles}
-          articles={articles}
-          modified={modified}
-          activeArticle={activeArticle}
+          {...this.props}
         />
         <ArticleTopBar
           ref='top'
-          dispatch={dispatch}
-          status={status}
-          folders={folders}
+          {...this.props}
         />
         <ArticleList
           ref='list'
-          dispatch={dispatch}
-          folders={folders}
-          articles={articles}
-          modified={modified}
-          activeArticle={activeArticle}
+          {...this.props}
         />
         <ArticleDetail
           ref='detail'
-          dispatch={dispatch}
-          status={status}
-          tags={tags}
-          user={user}
-          folders={folders}
-          modified={modified}
-          activeArticle={activeArticle}
+          {...this.props}
         />
       </div>
     )
   }
 }
 
-// Ignore invalid key
-function ignoreInvalidKey (key) {
-  return key.length > 0 && !key.match(/^\/\/$/) && !key.match(/^\/$/) && !key.match(/^#$/) && !key.match(/^--/)
-}
-
-// Build filter object by key
-function buildFilter (key) {
-  if (key.match(/^\/\/.+/)) {
-    return {type: FOLDER_EXACT_FILTER, value: key.match(/^\/\/(.+)$/)[1]}
-  }
-  if (key.match(/^\/.+/)) {
-    return {type: FOLDER_FILTER, value: key.match(/^\/(.+)$/)[1]}
-  }
-  if (key.match(/^#(.+)/)) {
-    return {type: TAG_FILTER, value: key.match(/^#(.+)$/)[1]}
-  }
-  return {type: TEXT_FILTER, value: key}
-}
-
-function isContaining (target, needle) {
-  return target.match(new RegExp(_.escapeRegExp(needle), 'i'))
-}
-
-function startsWith (target, needle) {
-  return target.match(new RegExp('^' + _.escapeRegExp(needle), 'i'))
-}
-
-function remap (state) {
-  let { user, folders, status } = state
-  let _articles = state.articles
-
-  let articles = _articles != null ? _articles.data : []
-  let modified = _articles != null ? _articles.modified : []
-
-  articles.sort((a, b) => {
-    let match = new Date(b.updatedAt) - new Date(a.updatedAt)
-    if (match === 0) match = b.title.localeCompare(a.title)
-    if (match === 0) match = b.key.localeCompare(a.key)
-    return match
-  })
-  let allArticles = articles.slice()
-
-  let tags = _.uniq(allArticles.reduce((sum, article) => {
-    if (!_.isArray(article.tags)) return sum
-    return sum.concat(article.tags)
-  }, []))
-
-  if (status.search.split(' ').some(key => key === '--unsaved')) articles = articles.filter(article => _.findWhere(modified, {key: article.key}))
-  // Filter articles
-  let filters = status.search.split(' ')
-    .map(key => key.trim())
-    .filter(ignoreInvalidKey)
-    .map(buildFilter)
-
-  let folderExactFilters = filters.filter(filter => filter.type === FOLDER_EXACT_FILTER)
-  let folderFilters = filters.filter(filter => filter.type === FOLDER_FILTER)
-  let textFilters = filters.filter(filter => filter.type === TEXT_FILTER)
-  let tagFilters = filters.filter(filter => filter.type === TAG_FILTER)
-
-  let targetFolders
-  if (folders != null) {
-    let exactTargetFolders = folders.filter(folder => {
-      return _.find(folderExactFilters, filter => filter.value.toLowerCase() === folder.name.toLowerCase())
-    })
-    let fuzzyTargetFolders = folders.filter(folder => {
-      return _.find(folderFilters, filter => startsWith(folder.name.replace(/_/g, ''), filter.value.replace(/_/g, '')))
-    })
-    targetFolders = status.targetFolders = exactTargetFolders.concat(fuzzyTargetFolders)
-
-    if (targetFolders.length > 0) {
-      articles = articles.filter(article => {
-        return _.findWhere(targetFolders, {key: article.FolderKey})
-      })
-    }
-
-    if (textFilters.length > 0) {
-      articles = textFilters.reduce((articles, textFilter) => {
-        return articles.filter(article => {
-          return isContaining(article.title, textFilter.value) || isContaining(article.content, textFilter.value)
-        })
-      }, articles)
-    }
-
-    if (tagFilters.length > 0) {
-      articles = tagFilters.reduce((articles, tagFilter) => {
-        return articles.filter(article => {
-          return _.find(article.tags, tag => isContaining(tag, tagFilter.value))
-        })
-      }, articles)
-    }
-  }
-
-  // Grab active article
-  let activeArticle = _.findWhere(articles, {key: status.articleKey})
-  if (activeArticle == null) activeArticle = articles[0]
-
-  let { repositories } = state
-
-  return {
-    user,
-    folders,
-    status,
-    articles,
-    allArticles,
-    modified,
-    activeArticle,
-    tags,
-    repositories
-  }
-}
-
 HomePage.propTypes = {
-  status: PropTypes.shape(),
-  user: PropTypes.shape({
-    name: PropTypes.string
-  }),
-  articles: PropTypes.array,
-  allArticles: PropTypes.array,
-  modified: PropTypes.array,
-  activeArticle: PropTypes.shape(),
   dispatch: PropTypes.func,
-  folders: PropTypes.array,
-  tags: PropTypes.array,
   repositories: PropTypes.array
 }
 
-export default connect(remap)(HomePage)
+export default connect((x) => x)(HomePage)
diff --git a/browser/main/actions.js b/browser/main/actions.js
deleted file mode 100644
index da3e4b42..00000000
--- a/browser/main/actions.js
+++ /dev/null
@@ -1,200 +0,0 @@
-// Action types
-export const USER_UPDATE = 'USER_UPDATE'
-
-export const ARTICLE_UPDATE = 'ARTICLE_UPDATE'
-export const ARTICLE_DESTROY = 'ARTICLE_DESTROY'
-export const ARTICLE_SAVE = 'ARTICLE_SAVE'
-export const ARTICLE_SAVE_ALL = 'ARTICLE_SAVE_ALL'
-export const ARTICLE_CACHE = 'ARTICLE_CACHE'
-export const ARTICLE_UNCACHE = 'ARTICLE_UNCACHE'
-export const ARTICLE_UNCACHE_ALL = 'ARTICLE_UNCACHE_ALL'
-
-export const FOLDER_CREATE = 'FOLDER_CREATE'
-export const FOLDER_UPDATE = 'FOLDER_UPDATE'
-export const FOLDER_DESTROY = 'FOLDER_DESTROY'
-export const FOLDER_REPLACE = 'FOLDER_REPLACE'
-
-export const SWITCH_FOLDER = 'SWITCH_FOLDER'
-export const SWITCH_ARTICLE = 'SWITCH_ARTICLE'
-export const SET_SEARCH_FILTER = 'SET_SEARCH_FILTER'
-export const SET_TAG_FILTER = 'SET_TAG_FILTER'
-export const CLEAR_SEARCH = 'CLEAR_SEARCH'
-
-export const TOGGLE_TUTORIAL = 'TOGGLE_TUTORIAL'
-
-// Article status
-export const NEW = 'NEW'
-
-export function updateUser (input) {
-  return {
-    type: USER_UPDATE,
-    data: input
-  }
-}
-
-// DB
-export function cacheArticle (key, article) {
-  return {
-    type: ARTICLE_CACHE,
-    data: { key, article }
-  }
-}
-
-export function uncacheArticle (key) {
-  return {
-    type: ARTICLE_UNCACHE,
-    data: { key }
-  }
-}
-
-export function uncacheAllArticles () {
-  return {
-    type: ARTICLE_UNCACHE_ALL
-  }
-}
-
-export function saveArticle (key, article, forceSwitch) {
-  return {
-    type: ARTICLE_SAVE,
-    data: { key, article, forceSwitch }
-  }
-}
-
-export function saveAllArticles () {
-  return {
-    type: ARTICLE_SAVE_ALL
-  }
-}
-
-export function updateArticle (article) {
-  return {
-    type: ARTICLE_UPDATE,
-    data: { article }
-  }
-}
-
-export function destroyArticle (key) {
-  return {
-    type: ARTICLE_DESTROY,
-    data: { key }
-  }
-}
-
-export function createFolder (folder) {
-  return {
-    type: FOLDER_CREATE,
-    data: { folder }
-  }
-}
-
-export function updateFolder (folder) {
-  return {
-    type: FOLDER_UPDATE,
-    data: { folder }
-  }
-}
-
-export function destroyFolder (key) {
-  return {
-    type: FOLDER_DESTROY,
-    data: { key }
-  }
-}
-
-export function replaceFolder (a, b) {
-  return {
-    type: FOLDER_REPLACE,
-    data: {
-      a,
-      b
-    }
-  }
-}
-
-export function switchFolder (folderName) {
-  return {
-    type: SWITCH_FOLDER,
-    data: folderName
-  }
-}
-
-export function switchArticle (articleKey) {
-  return {
-    type: SWITCH_ARTICLE,
-    data: {
-      key: articleKey
-    }
-  }
-}
-
-export function setSearchFilter (search) {
-  return {
-    type: SET_SEARCH_FILTER,
-    data: search
-  }
-}
-
-export function setTagFilter (tag) {
-  return {
-    type: SET_TAG_FILTER,
-    data: tag
-  }
-}
-
-export function clearSearch () {
-  return {
-    type: CLEAR_SEARCH
-  }
-}
-
-export function toggleTutorial () {
-  return {
-    type: TOGGLE_TUTORIAL
-  }
-}
-
-/**
- * v0.6.* Actions
- */
-
-export function addRepo (data) {
-  return {
-    type: 'ADD_REPOSITORY',
-    data
-  }
-}
-
-export function removeRepo (data) {
-  return {
-    type: 'REMOVE_REPOSITORY',
-    data
-  }
-}
-
-export default {
-  updateUser,
-
-  updateArticle,
-  destroyArticle,
-  cacheArticle,
-  uncacheArticle,
-  uncacheAllArticles,
-  saveArticle,
-  saveAllArticles,
-
-  createFolder,
-  updateFolder,
-  destroyFolder,
-  replaceFolder,
-
-  switchFolder,
-  switchArticle,
-  setSearchFilter,
-  setTagFilter,
-  clearSearch,
-  toggleTutorial,
-
-  // v0.6.*
-  addRepo,
-  removeRepo
-}
diff --git a/browser/main/modal/NewRepositoryModal.js b/browser/main/modal/NewRepositoryModal.js
index 600b0fd6..c1433e5f 100644
--- a/browser/main/modal/NewRepositoryModal.js
+++ b/browser/main/modal/NewRepositoryModal.js
@@ -1,10 +1,8 @@
 import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './NewRepositoryModal.styl'
-import linkState from 'browser/lib/linkState'
-import RepositoryManager from 'browser/lib/RepositoryManager'
+import Repository from 'browser/lib/Repository'
 import store from 'browser/main/store'
-import actions from 'browser/main/actions'
 
 const electron = require('electron')
 const remote = electron.remote
@@ -81,13 +79,19 @@ class NewRepositoryModal extends React.Component {
     let targetPath = this.state.path
     let name = this.state.name
 
-    RepositoryManager
-      .addRepo({
-        targetPath,
-        name
-      })
-      .then((newRepo) => {
-        store.dispatch(actions.addRepo(newRepo))
+    let repository = new Repository({
+      name: name,
+      path: targetPath
+    })
+
+    repository
+      .mount()
+      .then(() => repository.load())
+      .then((data) => {
+        store.dispatch({
+          type: 'ADD_REPOSITORY',
+          repository: data
+        })
         this.props.close()
       })
       .catch((err) => {
@@ -98,6 +102,15 @@ class NewRepositoryModal extends React.Component {
       })
   }
 
+  handleChange (e) {
+    let name = this.refs.nameInput.value
+    let path = this.refs.pathInput.value
+    this.setState({
+      name,
+      path
+    })
+  }
+
   render () {
     return (
       <div className='NewRepositoryModal'
@@ -116,7 +129,8 @@ class NewRepositoryModal extends React.Component {
             <div styleName='body-section-label'>Repository Name</div>
             <input styleName='body-section-input'
               ref='nameInput'
-              valueLink={this.linkState('name')}
+              value={this.state.name}
+              onChange={(e) => this.handleChange(e)}
             />
           </div>
 
@@ -124,11 +138,13 @@ class NewRepositoryModal extends React.Component {
             <div styleName='body-section-label'>Repository Path</div>
             <div styleName={!this.state.isPathSectionFocused ? 'body-section-path' : 'body-section-path--focus'}>
               <input styleName='body-section-path-input'
-                valueLink={this.linkState('path')}
+                ref='pathInput'
+                value={this.state.path}
                 style={styles.body_section_path_input}
                 onFocus={(e) => this.handlePathFocus(e)}
                 onBlur={(e) => this.handlePathBlur(e)}
                 disabled={this.state.isBrowsingPath}
+                onChange={(e) => this.handleChange(e)}
               />
               <button styleName='body-section-path-button'
                 onClick={(e) => this.handleBrowseButtonClick(e)}
@@ -170,6 +186,4 @@ NewRepositoryModal.propTypes = {
   close: PropTypes.func
 }
 
-NewRepositoryModal.prototype.linkState = linkState
-
 export default CSSModules(NewRepositoryModal, styles)
diff --git a/browser/main/store.js b/browser/main/store.js
index e910bfaa..1b7842cb 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -1,5 +1,59 @@
-import reducer from './reducer'
-import { createStore } from 'redux'
+import { combineReducers, createStore } from 'redux'
+import _ from 'lodash'
+
+/**
+ * Repositories
+ * ```
+ * repositories = [{
+ *   key: String,
+ *   name: String,
+ *   path: String, // path of repository
+ *   status: String, // status of repository [IDLE, LOADING, READY, ERROR]
+ *   folders: {
+ *     name: String,
+ *     color: String
+ *   },
+ *   notes: [{
+ *     key: String,
+ *     title: String,
+ *     content: String,
+ *     folder: String,
+ *     tags: [String],
+ *     createdAt: Date,
+ *     updatedAt: Date
+ *   }]
+ * }]
+ * ```
+ */
+const initialRepositories = []
+
+function repositories (state = initialRepositories, action) {
+  console.log(action)
+  switch (action.type) {
+    case 'INIT_ALL':
+      return action.data.slice()
+    case 'ADD_REPOSITORY':
+      {
+        let repos = state.slice()
+        repos.push(action.repository)
+        return repos
+      }
+    case 'REMOVE_REPOSITORY':
+      {
+        let repos = state.slice()
+        let targetIndex = _.findIndex(repos, {key: action.key})
+        if (targetIndex > -1) {
+          repos.splice(targetIndex, 1)
+        }
+        return repos
+      }
+  }
+  return state
+}
+
+let reducer = combineReducers({
+  repositories
+})
 
 let store = createStore(reducer)
 

From ea8e31561ef2c46af50c30bf8ab34b36e6006d7a Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Tue, 3 May 2016 15:37:50 +0900
Subject: [PATCH 014/109] add oh-my-cdn & vendor script

---
 gruntfile.js   | 24 ------------------------
 lib/main.html  |  8 ++++----
 oh-my-cdn.json |  9 +++++++++
 package.json   | 10 ++++------
 4 files changed, 17 insertions(+), 34 deletions(-)
 create mode 100644 oh-my-cdn.json

diff --git a/gruntfile.js b/gruntfile.js
index 5496c490..6637d3d8 100644
--- a/gruntfile.js
+++ b/gruntfile.js
@@ -61,30 +61,6 @@ module.exports = function (grunt) {
     grunt.loadNpmTasks('grunt-electron-installer-debian')
   }
 
-  grunt.registerTask('copy', function () {
-    var done = this.async()
-    var targetPaths = [
-      'node_modules/react/dist/react.min.js',
-      'node_modules/react-dom/dist/react-dom.min.js',
-      'node_modules/react-redux/dist/react-redux.min.js',
-      'node_modules/redux/dist/redux.min.js'
-    ]
-
-    var merged = merge()
-    targetPaths.forEach(function (targetPath) {
-      var read = fs
-        .createReadStream(path.resolve(__dirname, targetPath))
-      var write = fs.createWriteStream(path.resolve(__dirname, 'compiled', path.basename(targetPath)))
-      read.pipe(write)
-      merged.add(read)
-    })
-
-    merged
-      .on('end', function () {
-        done()
-      })
-  })
-
   grunt.registerTask('compile', function () {
     var done = this.async()
     var execPath = path.join('node_modules', '.bin', 'webpack') + ' --config webpack-production.config.js'
diff --git a/lib/main.html b/lib/main.html
index 49b390d4..834c295f 100644
--- a/lib/main.html
+++ b/lib/main.html
@@ -58,10 +58,10 @@
   <script src="../submodules/ace/src-min/ace.js"></script>
   <script src="../submodules/ace/src-min/ext-themelist.js"></script>
   <script src="../resources/katex.min.js"></script>
-  <script src="../compiled/react.min.js"></script>
-  <script src="../compiled/react-dom.min.js"></script>
-  <script src="../compiled/redux.min.js"></script>
-  <script src="../compiled/react-redux.min.js"></script>
+  <script src="../compiled/react.js"></script>
+  <script src="../compiled/react-dom.js"></script>
+  <script src="../compiled/redux.js"></script>
+  <script src="../compiled/react-redux.js"></script>
   <script type='text/javascript'>
     const electron = require('electron')
     electron.webFrame.setZoomLevelLimits(1, 1)
diff --git a/oh-my-cdn.json b/oh-my-cdn.json
new file mode 100644
index 00000000..717263f7
--- /dev/null
+++ b/oh-my-cdn.json
@@ -0,0 +1,9 @@
+{
+  "directory": "compiled",
+  "targets": {
+    "react": "https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js",
+    "react-dom": "https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js",
+    "redux": "https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js",
+    "react-redux": "https://npmcdn.com/react-redux@4.4.5/dist/react-redux.min.js"
+  }
+}
diff --git a/package.json b/package.json
index f25d37ae..06327ff8 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "start": "electron ./index.js",
     "hot": "electron ./index.js --hot",
     "webpack": "webpack-dev-server --hot --inline --config webpack.config.js",
-    "postinstall": "grunt copy"
+    "postinstall": "npm run vendor",
+    "vendor": "oh-my-cdn"
   },
   "config": {
     "electron-version": "0.36.11"
@@ -63,18 +64,15 @@
     "babel-preset-react-hmre": "^1.0.1",
     "css-loader": "^0.19.0",
     "electron-packager": "^6.0.0",
-    "electron-prebuilt": "^0.36.11",
+    "electron-prebuilt": "^0.36.12",
     "electron-release": "^2.2.0",
     "grunt": "^0.4.5",
     "grunt-electron-installer": "^1.2.0",
     "history": "^1.17.0",
     "merge-stream": "^1.0.0",
     "nib": "^1.1.0",
-    "react": "^0.14.3",
+    "oh-my-cdn": "^0.1.1",
     "react-css-modules": "^3.7.6",
-    "react-dom": "^0.14.3",
-    "react-redux": "^4.0.6",
-    "redux": "^3.0.5",
     "standard": "^6.0.8",
     "style-loader": "^0.12.4",
     "stylus": "^0.52.4",

From 10aae90ae2fb8dd9032cf07994bfbe884307c5f3 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Tue, 3 May 2016 15:41:11 +0900
Subject: [PATCH 015/109] clean code

---
 browser/lib/modal.js                          |   2 +-
 browser/main/HomePage/ArticleDetail/index.js  |  64 ++--
 browser/main/HomePage/ArticleList.js          |  48 +--
 browser/main/HomePage/ArticleTopBar.js        |  59 +--
 browser/main/HomePage/TagLink.js              |   5 +-
 browser/main/HomePage/UserNavigator.js        |  41 --
 browser/main/{MainPage.js => Main.js}         |  16 -
 browser/main/index.js                         |   4 +-
 browser/main/modal/CreateNewFolder.js         |  23 +-
 browser/main/modal/DeleteArticleModal.js      |   9 +-
 .../main/modal/Preference/AppSettingTab.js    |   3 +-
 browser/main/modal/Preference/FolderRow.js    |  21 +-
 .../main/modal/Preference/FolderSettingTab.js |   7 +-
 browser/main/reducer.js                       | 362 ------------------
 browser/styles/main/index.styl                |  45 ---
 15 files changed, 84 insertions(+), 625 deletions(-)
 delete mode 100644 browser/main/HomePage/UserNavigator.js
 rename browser/main/{MainPage.js => Main.js} (64%)
 delete mode 100644 browser/main/reducer.js

diff --git a/browser/lib/modal.js b/browser/lib/modal.js
index 7e330178..15273f69 100644
--- a/browser/lib/modal.js
+++ b/browser/lib/modal.js
@@ -22,7 +22,7 @@ class ModalBase extends React.Component {
   render () {
     return (
       <div className={'ModalBase' + (this.state.isHidden ? ' hide' : '')}>
-        <div onClick={e => this.close(e)} className='modalBack'/>
+        <div onClick={(e) => this.close(e)} className='modalBack'/>
         {this.state.component == null ? null : (
           <this.state.component {...this.state.componentProps} close={this.close}/>
         )}
diff --git a/browser/main/HomePage/ArticleDetail/index.js b/browser/main/HomePage/ArticleDetail/index.js
index efd84c3a..73c45d98 100644
--- a/browser/main/HomePage/ArticleDetail/index.js
+++ b/browser/main/HomePage/ArticleDetail/index.js
@@ -2,10 +2,6 @@ import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import moment from 'moment'
 import _ from 'lodash'
-import {
-  switchFolder,
-  updateArticle
-} from '../../actions'
 import linkState from 'browser/lib/linkState'
 import TagSelect from 'browser/components/TagSelect'
 import ModeSelect from 'browser/components/ModeSelect'
@@ -67,25 +63,25 @@ export default class ArticleDetail extends React.Component {
   constructor (props) {
     super(props)
 
-    this.deleteHandler = e => {
+    this.deleteHandler = (e) => {
       if (isModalOpen()) return true
       this.handleDeleteButtonClick()
     }
-    this.uncacheHandler = e => {
+    this.uncacheHandler = (e) => {
       if (isModalOpen()) return true
       this.handleUncache()
     }
-    this.titleHandler = e => {
+    this.titleHandler = (e) => {
       if (isModalOpen()) return true
       if (this.refs.title) {
         this.focusTitle()
       }
     }
-    this.editHandler = e => {
+    this.editHandler = (e) => {
       if (isModalOpen()) return true
       if (this.refs.editor) this.refs.editor.switchEditMode()
     }
-    this.previewHandler = e => {
+    this.previewHandler = (e) => {
       if (isModalOpen()) return true
       if (this.refs.editor) this.refs.editor.switchPreviewMode()
     }
@@ -100,7 +96,7 @@ export default class ArticleDetail extends React.Component {
 
   componentDidMount () {
     this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
-    this.shareDropdownInterceptor = e => {
+    this.shareDropdownInterceptor = (e) => {
       e.stopPropagation()
     }
 
@@ -159,12 +155,12 @@ export default class ArticleDetail extends React.Component {
       updatedAt: new Date()
     })
 
-    dispatch(updateArticle(article))
+    // dispatch(updateArticle(article))
 
     let targetFolderKey = e.target.value
     if (status.targetFolders.length > 0) {
       let targetFolder = _.findWhere(folders, {key: targetFolderKey})
-      dispatch(switchFolder(targetFolder.name))
+      // dispatch(switchFolder(targetFolder.name))
     }
   }
 
@@ -174,7 +170,7 @@ export default class ArticleDetail extends React.Component {
       title: e.target.value,
       updatedAt: new Date()
     })
-    dispatch(updateArticle(article))
+    // dispatch(updateArticle(article))
   }
 
   handleTagsChange (newTag, tags) {
@@ -184,7 +180,7 @@ export default class ArticleDetail extends React.Component {
       updatedAt: new Date()
     })
 
-    dispatch(updateArticle(article))
+    // dispatch(updateArticle(article))
   }
 
   handleModeChange (value) {
@@ -194,7 +190,7 @@ export default class ArticleDetail extends React.Component {
       updatedAt: new Date()
     })
 
-    dispatch(updateArticle(article))
+    // dispatch(updateArticle(article))
     this.switchEditMode()
   }
 
@@ -206,7 +202,7 @@ export default class ArticleDetail extends React.Component {
         updatedAt: new Date()
       })
 
-      dispatch(updateArticle(article))
+      // dispatch(updateArticle(article))
     }
   }
 
@@ -254,7 +250,7 @@ export default class ArticleDetail extends React.Component {
   render () {
     let { folders, status, tags, activeArticle, modified, user } = this.props
     if (activeArticle == null) return this.renderEmpty()
-    let folderOptions = folders.map(folder => {
+    let folderOptions = folders.map((folder) => {
       return (
         <option key={folder.key} value={folder.key}>{folder.name}</option>
       )
@@ -269,7 +265,7 @@ export default class ArticleDetail extends React.Component {
             <select
               className='ArticleDetail-info-folder'
               value={activeArticle.FolderKey}
-              onChange={e => this.handleFolderKeyChange(e)}
+              onChange={(e) => this.handleFolderKeyChange(e)}
             >
               {folderOptions}
             </select>
@@ -282,25 +278,14 @@ export default class ArticleDetail extends React.Component {
             />
 
             <div className='ArticleDetail-info-control'>
-              {/*<div className={'ArticleDetail-info-control-save' + (!isUnsaved ? ' hide' : '')}>
-                <button
-                  onClick={e => this.handleSaveButtonClick(e)}
-                  className='ArticleDetail-info-control-save-button'
-                  disabled={!isUnsaved}
-                  >
-                  <i className='fa fa-fw fa-save'/>&nbsp;Save
-                  <span className='tooltip' children={`Save Post (${OSX ? '⌘' : '^'} + S)`}/>
-                </button>
-              </div>*/}
-
               <ShareButton
                 article={activeArticle}
                 user={user}
                 />
 
-              <button className='ArticleDetail-info-control-delete-button' onClick={e => this.handleOthersButtonClick(e)}>
+              <button className='ArticleDetail-info-control-delete-button' onClick={(e) => this.handleOthersButtonClick(e)}>
                 <i className='fa fa-fw fa-trash'/>
-                <span className='tooltip' children={`Delete Post (^ + Del)`}/>
+                <span className='tooltip'>Delete Post (^ + Del)</span>
               </button>
             </div>
           </div>
@@ -319,11 +304,11 @@ export default class ArticleDetail extends React.Component {
           <div className='ArticleDetail-panel-header'>
             <div className='ArticleDetail-panel-header-title'>
               <input
-                onKeyDown={e => this.handleTitleKeyDown(e)}
+                onKeyDown={(e) => this.handleTitleKeyDown(e)}
                 placeholder='(Untitled)'
                 ref='title'
                 value={activeArticle.title}
-                onChange={e => this.handleTitleChange(e)}
+                onChange={(e) => this.handleTitleChange(e)}
                 style={{
                   fontFamily: this.state.fontFamily
                 }}
@@ -331,8 +316,8 @@ export default class ArticleDetail extends React.Component {
             </div>
             <ModeSelect
               ref='mode'
-              onChange={e => this.handleModeChange(e)}
-              onKeyDown={e => this.handleModeSelectKeyDown(e)}
+              onChange={(e) => this.handleModeChange(e)}
+              onKeyDown={(e) => this.handleModeSelectKeyDown(e)}
               value={activeArticle.mode}
               className='ArticleDetail-panel-header-mode'
             />
@@ -341,7 +326,7 @@ export default class ArticleDetail extends React.Component {
           <ArticleEditor
             ref='editor'
             article={activeArticle}
-            onChange={content => this.handleContentChange(content)}
+            onChange={(content) => this.handleContentChange(content)}
           />
         </div>
       </div>
@@ -351,11 +336,6 @@ export default class ArticleDetail extends React.Component {
 
 ArticleDetail.propTypes = {
   dispatch: PropTypes.func,
-  status: PropTypes.shape(),
-  tags: PropTypes.array,
-  user: PropTypes.shape(),
-  folders: PropTypes.array,
-  modified: PropTypes.array,
-  activeArticle: PropTypes.shape()
+  repositories: PropTypes.array
 }
 ArticleDetail.prototype.linkState = linkState
diff --git a/browser/main/HomePage/ArticleList.js b/browser/main/HomePage/ArticleList.js
index 07b10350..afc56570 100644
--- a/browser/main/HomePage/ArticleList.js
+++ b/browser/main/HomePage/ArticleList.js
@@ -2,7 +2,6 @@ import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import ModeIcon from 'browser/components/ModeIcon'
 import moment from 'moment'
-import { switchArticle } from '../actions'
 import FolderMark from 'browser/components/FolderMark'
 import TagLink from './TagLink'
 import _ from 'lodash'
@@ -15,7 +14,7 @@ export default class ArticleList extends React.Component {
   constructor (props) {
     super(props)
 
-    this.focusHandler = e => this.focus()
+    this.focusHandler = (e) => this.focus()
   }
 
   componentDidMount () {
@@ -30,8 +29,8 @@ export default class ArticleList extends React.Component {
   }
 
   componentDidUpdate () {
-    let { articles, activeArticle } = this.props
-    var index = articles.indexOf(activeArticle)
+    return false
+    var index = articles.indexOf(null)
     var el = ReactDOM.findDOMNode(this)
     var li = el.querySelectorAll('.ArticleList>div')[index]
 
@@ -130,16 +129,12 @@ export default class ArticleList extends React.Component {
   }
 
   render () {
-    let { articles, modified, activeArticle, folders } = this.props
-
-    let articleElements = articles.map(article => {
-      let modifiedArticle = _.findWhere(modified, {key: article.key})
+    let articles = []
+    let folders = []
+    let articleElements = articles.map((article) => {
       let originalArticle = article
-      if (modifiedArticle) {
-        article = Object.assign({}, article)
-      }
       let tagElements = Array.isArray(article.tags) && article.tags.length > 0
-        ? article.tags.slice().map(tag => {
+        ? article.tags.slice().map((tag) => {
           return (<TagLink key={tag} tag={tag}/>)
         })
         : (<span>Not tagged yet</span>)
@@ -153,27 +148,21 @@ export default class ArticleList extends React.Component {
 
       return (
         <div key={'article-' + article.key}>
-          <div onClick={e => this.handleArticleClick(article)(e)} className={'ArticleList-item' + (activeArticle.key === article.key ? ' active' : '')}>
+          <div onClick={(e) => this.handleArticleClick(article)(e)} className={'ArticleList-item' + (article.key === 'ACTIVE_POST_KEY' ? ' active' : '')}>
             <div className='ArticleList-item-top'>
               {folder != null
                 ? folderChanged
                   ? <span className='folderName'>
-                      <FolderMark color={originalFolder.color}/>{originalFolder.name}
-                      ->
-                      <FolderMark color={folder.color}/>{folder.name}
-                    </span>
+                    <FolderMark color={originalFolder.color}/>{originalFolder.name}
+                    ->
+                    <FolderMark color={folder.color}/>{folder.name}
+                  </span>
                   : <span className='folderName'>
-                      <FolderMark color={folder.color}/>{folder.name}
-                    </span>
+                    <FolderMark color={folder.color}/>{folder.name}
+                  </span>
                 : <span><FolderMark color={-1}/>Unknown</span>
               }
-              <span className='updatedAt'
-                children={
-                  modifiedArticle != null
-                    ? <span><span className='unsaved-mark'>●</span> Unsaved</span>
-                    : moment(article.updatedAt).fromNow()
-                }
-              />
+              <span className='updatedAt'>{moment(article.updatedAt).fromNow()}</span>
             </div>
             <div className='ArticleList-item-middle'>
               <ModeIcon className='mode' mode={article.mode}/> <div className='title' children={title}/>
@@ -191,7 +180,7 @@ export default class ArticleList extends React.Component {
     })
 
     return (
-      <div tabIndex='3' onKeyDown={e => this.handleArticleListKeyDown(e)} className='ArticleList'>
+      <div tabIndex='3' onKeyDown={(e) => this.handleArticleListKeyDown(e)} className='ArticleList'>
         {articleElements}
       </div>
     )
@@ -200,8 +189,5 @@ export default class ArticleList extends React.Component {
 
 ArticleList.propTypes = {
   dispatch: PropTypes.func,
-  folders: PropTypes.array,
-  articles: PropTypes.array,
-  modified: PropTypes.array,
-  activeArticle: PropTypes.shape()
+  repositories: PropTypes.array
 }
diff --git a/browser/main/HomePage/ArticleTopBar.js b/browser/main/HomePage/ArticleTopBar.js
index 6fd94095..9e7c4cc2 100644
--- a/browser/main/HomePage/ArticleTopBar.js
+++ b/browser/main/HomePage/ArticleTopBar.js
@@ -1,13 +1,10 @@
 import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import ExternalLink from 'browser/components/ExternalLink'
-import { setSearchFilter, clearSearch, toggleTutorial, saveArticle, switchFolder } from '../actions'
 import { isModalOpen } from 'browser/lib/modal'
-import keygen from 'browser/lib/keygen'
 import activityRecord from 'browser/lib/activityRecord'
 
 const electron = require('electron')
-const remote = electron.remote
 const ipc = electron.ipcRenderer
 
 const OSX = global.process.platform === 'darwin'
@@ -83,7 +80,7 @@ export default class ArticleTopBar extends React.Component {
         this.setState({isLinksDropdownOpen: true})
       }
     }
-    this.linksButton.addEventListener('click', this.showLinksDropdown)
+    // this.linksButton.addEventListener('click', this.showLinksDropdown)
     this.hideLinksDropdown = e => {
       if (this.state.isLinksDropdownOpen) {
         this.setState({isLinksDropdownOpen: false})
@@ -118,11 +115,6 @@ export default class ArticleTopBar extends React.Component {
   }
 
   escape () {
-    let { status, dispatch } = this.props
-    if (status.search.length > 0) {
-      dispatch(clearSearch())
-      return
-    }
   }
 
   focusInput () {
@@ -136,7 +128,7 @@ export default class ArticleTopBar extends React.Component {
   handleSearchChange (e) {
     let { dispatch } = this.props
 
-    dispatch(setSearchFilter(e.target.value))
+    // dispatch(setSearchFilter(e.target.value))
     this.handleTooltipRequest()
   }
 
@@ -146,35 +138,13 @@ export default class ArticleTopBar extends React.Component {
   }
 
   handleNewPostButtonClick (e) {
-    let { dispatch, folders, status } = this.props
-    let { targetFolders } = status
-
-    let isFolderFilterApplied = targetFolders.length > 0
-    let FolderKey = isFolderFilterApplied
-      ? targetFolders[0].key
-      : folders[0].key
-
-    let newArticle = {
-      key: keygen(),
-      title: '',
-      content: '',
-      mode: 'markdown',
-      tags: [],
-      FolderKey: FolderKey,
-      craetedAt: new Date(),
-      updatedAt: new Date()
-    }
-
-    dispatch(saveArticle(newArticle.key, newArticle, true))
-    if (isFolderFilterApplied) dispatch(switchFolder(targetFolders[0].name))
-    remote.getCurrentWebContents().send('detail-title')
     activityRecord.emit('ARTICLE_CREATE')
   }
 
   handleTutorialButtonClick (e) {
     let { dispatch } = this.props
 
-    dispatch(toggleTutorial())
+    // dispatch(toggleTutorial())
   }
 
   render () {
@@ -186,16 +156,16 @@ export default class ArticleTopBar extends React.Component {
             <i className='fa fa-search fa-fw' />
             <input
               ref='searchInput'
-              onFocus={e => this.handleSearchChange(e)}
-              onBlur={e => this.handleSearchChange(e)}
-              value={this.props.status.search}
-              onChange={e => this.handleSearchChange(e)}
+              onFocus={(e) => this.handleSearchChange(e)}
+              onBlur={(e) => this.handleSearchChange(e)}
+              value={'this.props.status.search'}
+              onChange={(e) => this.handleSearchChange(e)}
               placeholder='Search'
               type='text'
             />
             {
-              this.props.status.search != null && this.props.status.search.length > 0
-                ? <button onClick={e => this.handleSearchClearButton(e)} className='ArticleTopBar-left-search-clear-button'><i className='fa fa-times'/></button>
+              'sadf' > 0
+                ? <button onClick={(e) => this.handleSearchClearButton(e)} className='ArticleTopBar-left-search-clear-button'><i className='fa fa-times'/></button>
                 : null
             }
             <div className={'tooltip' + (this.state.isTooltipHidden ? ' hide' : '')}>
@@ -207,19 +177,16 @@ export default class ArticleTopBar extends React.Component {
             </div>
           </div>
 
-          {status.isTutorialOpen ? searchTutorialElement : null}
-
           <div className={'ArticleTopBar-left-control'}>
-            <button className='ArticleTopBar-left-control-new-post-button' onClick={e => this.handleNewPostButtonClick(e)}>
+            <button className='ArticleTopBar-left-control-new-post-button' onClick={(e) => this.handleNewPostButtonClick(e)}>
               <i className='fa fa-plus'/>
               <span className='tooltip'>New Post ({OSX ? '⌘' : '^'} + n)</span>
             </button>
-            {status.isTutorialOpen ? newPostTutorialElement : null}
           </div>
         </div>
 
         <div className='ArticleTopBar-right'>
-          <button onClick={e => this.handleTutorialButtonClick(e)}>?<span className='tooltip'>How to use</span>
+          <button onClick={(e) => this.handleTutorialButtonClick(e)}>?<span className='tooltip'>How to use</span>
           </button>
           <a ref='links' className='ArticleTopBar-right-links-button' href>
             <img src='../resources/app.png' width='44' height='44'/>
@@ -240,9 +207,9 @@ export default class ArticleTopBar extends React.Component {
           }
         </div>
 
-        {status.isTutorialOpen ? (
+        {false ? (
           <div className='tutorial'>
-            <div onClick={e => this.handleTutorialButtonClick(e)} className='clickJammer'/>
+            <div onClick={(e) => this.handleTutorialButtonClick(e)} className='clickJammer'/>
             <svg width='500' height='250' className='finder'>
               <text x='100' y='25' fontSize='32' fill={BRAND_COLOR}>Also, you can open Finder!!</text>
               <text x='150' y='55' fontSize='18' fill={BRAND_COLOR} children={'with pressing ' + (OSX ? '`⌘ + Alt + s`' : '`Win + Alt + s`')}/>
diff --git a/browser/main/HomePage/TagLink.js b/browser/main/HomePage/TagLink.js
index 2193c42c..2f2f4a1a 100644
--- a/browser/main/HomePage/TagLink.js
+++ b/browser/main/HomePage/TagLink.js
@@ -1,14 +1,11 @@
 import React, { PropTypes } from 'react'
-import store from '../store'
-import { setTagFilter } from '../actions'
 
 export default class TagLink extends React.Component {
   handleClick (e) {
-    store.dispatch(setTagFilter(this.props.tag))
   }
   render () {
     return (
-      <a onClick={e => this.handleClick(e)}>{this.props.tag}</a>
+      <a onClick={(e) => this.handleClick(e)}>{this.props.tag}</a>
     )
   }
 }
diff --git a/browser/main/HomePage/UserNavigator.js b/browser/main/HomePage/UserNavigator.js
deleted file mode 100644
index e260f749..00000000
--- a/browser/main/HomePage/UserNavigator.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { Component, PropTypes } from 'react'
-import { Link } from 'react-router'
-import ProfileImage from 'browser/components/ProfileImage'
-
-export default class UserNavigator extends Component {
-  renderUserList () {
-    if (this.props.users == null) return null
-
-    var users = this.props.users.map((user, index) => (
-      <li key={'user-' + user.id}>
-        <Link to={'/users/' + user.id} activeClassName='active'>
-          <ProfileImage email={user.email} size='44'/>
-          <div className='userTooltip'>{user.name}</div>
-          {index < 9 ? <div className='keyLabel'>{'⌘' + (index + 1)}</div> : null}
-        </Link>
-      </li>
-    ))
-
-    return (
-      <ul className='userList'>
-        {users}
-      </ul>
-    )
-  }
-
-  render () {
-    return (
-      <div className='UserNavigator'>
-        {this.renderUserList()}
-        <button className='createTeamBtn'>
-          +
-          <div className='tooltip'>Create a new team</div>
-        </button>
-      </div>
-    )
-  }
-}
-
-UserNavigator.propTypes = {
-  users: PropTypes.array
-}
diff --git a/browser/main/MainPage.js b/browser/main/Main.js
similarity index 64%
rename from browser/main/MainPage.js
rename to browser/main/Main.js
index a5371252..43bacd4b 100644
--- a/browser/main/MainPage.js
+++ b/browser/main/Main.js
@@ -19,26 +19,10 @@ export default class MainContainer extends React.Component {
     ipc.send('update-app', 'Deal with it.')
   }
 
-  handleWheel (e) {
-    if (e.ctrlKey && global.process.platform !== 'darwin') {
-      if (window.document.body.style.zoom == null) {
-        window.document.body.style.zoom = 1
-      }
-
-      let zoom = Number(window.document.body.style.zoom)
-      if (e.deltaY > 0 && zoom < 4) {
-        document.body.style.zoom = zoom + 0.05
-      } else if (e.deltaY < 0 && zoom > 0.5) {
-        document.body.style.zoom = zoom - 0.05
-      }
-    }
-  }
-
   render () {
     return (
       <div
         className='Main'
-        onWheel={(e) => this.handleWheel(e)}
       >
         {this.state.updateAvailable ? (
           <button onClick={this.updateApp} className='appUpdateButton'><i className='fa fa-cloud-download'/> Update available!</button>
diff --git a/browser/main/index.js b/browser/main/index.js
index 70241b14..22ba4213 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -1,5 +1,5 @@
 import { Provider } from 'react-redux'
-import MainPage from './MainPage'
+import Main from './Main'
 import store from './store'
 import React from 'react'
 import ReactDOM from 'react-dom'
@@ -76,7 +76,7 @@ let el = document.getElementById('content')
 ReactDOM.render((
   <div>
     <Provider store={store}>
-      <MainPage/>
+      <Main/>
     </Provider>
   </div>
 ), el, function () {
diff --git a/browser/main/modal/CreateNewFolder.js b/browser/main/modal/CreateNewFolder.js
index eb797a0c..9ff61a4b 100644
--- a/browser/main/modal/CreateNewFolder.js
+++ b/browser/main/modal/CreateNewFolder.js
@@ -1,7 +1,6 @@
 import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import linkState from 'browser/lib/linkState'
-import { createFolder } from '../actions'
 import store from '../store'
 import FolderMark from 'browser/components/FolderMark'
 
@@ -34,7 +33,7 @@ export default class CreateNewFolder extends React.Component {
         color
       }
       try {
-        store.dispatch(createFolder(input))
+        // store.dispatch(createFolder(input))
       } catch (e) {
         this.setState({alert: {
           type: 'error',
@@ -47,7 +46,7 @@ export default class CreateNewFolder extends React.Component {
   }
 
   handleColorClick (colorIndex) {
-    return e => {
+    return (e) => {
       this.setState({
         color: colorIndex
       })
@@ -63,20 +62,20 @@ export default class CreateNewFolder extends React.Component {
   render () {
     let alert = this.state.alert
     let alertElement = alert != null ? (
-        <p className={`alert ${alert.type}`}>
-          {alert.message}
-        </p>
-      ) : null
+      <p className={`alert ${alert.type}`}>
+        {alert.message}
+      </p>
+    ) : null
     let colorIndexes = []
     for (let i = 0; i < 8; i++) {
       colorIndexes.push(i)
     }
-    let colorElements = colorIndexes.map(index => {
+    let colorElements = colorIndexes.map((index) => {
       let className = 'option'
       if (index === this.state.color) className += ' active'
 
       return (
-        <span className={className} key={index} onClick={e => this.handleColorClick(index)(e)}>
+        <span className={className} key={index} onClick={(e) => this.handleColorClick(index)(e)}>
           <FolderMark color={index}/>
         </span>
       )
@@ -84,17 +83,17 @@ export default class CreateNewFolder extends React.Component {
 
     return (
       <div className='CreateNewFolder modal'>
-        <button onClick={e => this.handleCloseButton(e)} className='closeBtn'><i className='fa fa-fw fa-times'/></button>
+        <button onClick={(e) => this.handleCloseButton(e)} className='closeBtn'><i className='fa fa-fw fa-times'/></button>
 
         <div className='title'>Create new folder</div>
 
-        <input ref='folderName' onKeyDown={e => this.handleKeyDown(e)} className='ipt' type='text' valueLink={this.linkState('name')} placeholder='Enter folder name'/>
+        <input ref='folderName' onKeyDown={(e) => this.handleKeyDown(e)} className='ipt' type='text' valueLink={this.linkState('name')} placeholder='Enter folder name'/>
         <div className='colorSelect'>
           {colorElements}
         </div>
         {alertElement}
 
-        <button onClick={e => this.handleConfirmButton(e)} className='confirmBtn'>Create</button>
+        <button onClick={(e) => this.handleConfirmButton(e)} className='confirmBtn'>Create</button>
       </div>
     )
   }
diff --git a/browser/main/modal/DeleteArticleModal.js b/browser/main/modal/DeleteArticleModal.js
index 095ca949..78db1bfa 100644
--- a/browser/main/modal/DeleteArticleModal.js
+++ b/browser/main/modal/DeleteArticleModal.js
@@ -1,7 +1,6 @@
 import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import store from '../store'
-import { destroyArticle } from '../actions'
 
 const electron = require('electron')
 const ipc = electron.ipcRenderer
@@ -10,7 +9,7 @@ export default class DeleteArticleModal extends React.Component {
   constructor (props) {
     super(props)
 
-    this.confirmHandler = e => this.handleYesButtonClick()
+    this.confirmHandler = (e) => this.handleYesButtonClick()
   }
 
   componentDidMount () {
@@ -27,7 +26,7 @@ export default class DeleteArticleModal extends React.Component {
   }
 
   handleYesButtonClick (e) {
-    store.dispatch(destroyArticle(this.props.articleKey))
+    // store.dispatch(destroyArticle(this.props.articleKey))
     this.props.close()
   }
 
@@ -39,8 +38,8 @@ export default class DeleteArticleModal extends React.Component {
         <div className='message'>Do you really want to delete?</div>
 
         <div className='control'>
-          <button ref='no' onClick={e => this.handleNoButtonClick(e)}><i className='fa fa-fw fa-close'/> No</button>
-          <button ref='yes' onClick={e => this.handleYesButtonClick(e)} className='danger'><i className='fa fa-fw fa-check'/> Yes</button>
+          <button ref='no' onClick={(e) => this.handleNoButtonClick(e)}><i className='fa fa-fw fa-close'/> No</button>
+          <button ref='yes' onClick={(e) => this.handleYesButtonClick(e)} className='danger'><i className='fa fa-fw fa-check'/> Yes</button>
         </div>
       </div>
     )
diff --git a/browser/main/modal/Preference/AppSettingTab.js b/browser/main/modal/Preference/AppSettingTab.js
index c44675a8..c385b292 100644
--- a/browser/main/modal/Preference/AppSettingTab.js
+++ b/browser/main/modal/Preference/AppSettingTab.js
@@ -1,6 +1,5 @@
 import React, { PropTypes } from 'react'
 import linkState from 'browser/lib/linkState'
-import { updateUser } from '../../actions'
 import fetchConfig from 'browser/lib/fetchConfig'
 import hljsTheme from 'browser/lib/hljsThemes'
 
@@ -38,7 +37,7 @@ export default class AppSettingTab extends React.Component {
         message: 'Successfully done!'
       }})
     }
-    this.handleSettingError = err => {
+    this.handleSettingError = (err) => {
       this.setState({keymapAlert: {
         type: 'error',
         message: err.message != null ? err.message : 'Error occurs!'
diff --git a/browser/main/modal/Preference/FolderRow.js b/browser/main/modal/Preference/FolderRow.js
index f836e9d1..6e9bb11e 100644
--- a/browser/main/modal/Preference/FolderRow.js
+++ b/browser/main/modal/Preference/FolderRow.js
@@ -2,7 +2,6 @@ import React, { PropTypes } from 'react'
 import linkState from 'browser/lib/linkState'
 import FolderMark from 'browser/components/FolderMark'
 import store from '../../store'
-import { updateFolder, destroyFolder, replaceFolder } from '../../actions'
 
 const IDLE = 'IDLE'
 const EDIT = 'EDIT'
@@ -20,14 +19,14 @@ export default class FolderRow extends React.Component {
   handleUpClick (e) {
     let { index } = this.props
     if (index > 0) {
-      store.dispatch(replaceFolder(index, index - 1))
+      // store.dispatch(replaceFolder(index, index - 1))
     }
   }
 
   handleDownClick (e) {
     let { index, count } = this.props
     if (index < count - 1) {
-      store.dispatch(replaceFolder(index, index + 1))
+      // store.dispatch(replaceFolder(index, index + 1))
     }
   }
 
@@ -82,7 +81,7 @@ export default class FolderRow extends React.Component {
       folder = Object.assign({}, folder, input)
 
       try {
-        store.dispatch(updateFolder(folder))
+        // store.dispatch(updateFolder(folder))
         this.setState({
           mode: IDLE
         })
@@ -98,7 +97,7 @@ export default class FolderRow extends React.Component {
 
   handleDeleteConfirmButtonClick (e) {
     let { folder } = this.props
-    store.dispatch(destroyFolder(folder.key))
+    // store.dispatch(destroyFolder(folder.key))
   }
 
   render () {
@@ -111,7 +110,7 @@ export default class FolderRow extends React.Component {
           colorIndexes.push(i)
         }
 
-        let colorOptions = colorIndexes.map(index => {
+        let colorOptions = colorIndexes.map((index) => {
           let className = this.state.color === index
             ? 'active'
             : null
@@ -129,12 +128,10 @@ export default class FolderRow extends React.Component {
                 <FolderMark color={this.state.color}/>
               </button>
               {this.state.isColorEditing
-                ? (
-                  <div className='options'>
-                    <div className='label'>Color select</div>
-                    {colorOptions}
-                  </div>
-                )
+                ? <div className='options'>
+                  <div className='label'>Color select</div>
+                  {colorOptions}
+                </div>
                 : null
               }
             </div>
diff --git a/browser/main/modal/Preference/FolderSettingTab.js b/browser/main/modal/Preference/FolderSettingTab.js
index 2337aa32..0fd0d2d5 100644
--- a/browser/main/modal/Preference/FolderSettingTab.js
+++ b/browser/main/modal/Preference/FolderSettingTab.js
@@ -1,7 +1,6 @@
 import React, { PropTypes } from 'react'
 import FolderRow from './FolderRow'
 import linkState from 'browser/lib/linkState'
-import { createFolder } from '../../actions'
 
 export default class FolderSettingTab extends React.Component {
   constructor (props) {
@@ -23,9 +22,9 @@ export default class FolderSettingTab extends React.Component {
       let { dispatch } = this.props
 
       try {
-        dispatch(createFolder({
-          name: this.state.name
-        }))
+        // dispatch(createFolder({
+        //   name: this.state.name
+        // }))
       } catch (e) {
         this.setState({alert: {
           type: 'error',
diff --git a/browser/main/reducer.js b/browser/main/reducer.js
deleted file mode 100644
index 8efff887..00000000
--- a/browser/main/reducer.js
+++ /dev/null
@@ -1,362 +0,0 @@
-import { combineReducers } from 'redux'
-import _ from 'lodash'
-import {
-  // Status action type
-  SWITCH_FOLDER,
-  SWITCH_ARTICLE,
-  SET_SEARCH_FILTER,
-  SET_TAG_FILTER,
-  CLEAR_SEARCH,
-  TOGGLE_TUTORIAL,
-
-  // user
-  USER_UPDATE,
-
-  // Article action type
-  ARTICLE_UPDATE,
-  ARTICLE_DESTROY,
-  ARTICLE_CACHE,
-  ARTICLE_UNCACHE,
-  ARTICLE_UNCACHE_ALL,
-  ARTICLE_SAVE,
-  ARTICLE_SAVE_ALL,
-
-  // Folder action type
-  FOLDER_CREATE,
-  FOLDER_UPDATE,
-  FOLDER_DESTROY,
-  FOLDER_REPLACE
-} from './actions'
-import dataStore from 'browser/lib/dataStore'
-import keygen from 'browser/lib/keygen'
-import activityRecord from 'browser/lib/activityRecord'
-
-const initialStatus = {
-  search: '',
-  isTutorialOpen: false
-}
-
-let data = {
-  articles: [],
-  folders: []
-}
-let initialArticles = {
-  data: data && data.articles ? data.articles : [],
-  modified: []
-}
-let initialFolders = data && data.folders ? data.folders : []
-let initialUser = {}
-
-function user (state = initialUser, action) {
-  switch (action.type) {
-    case USER_UPDATE:
-      let updated = Object.assign(state, action.data)
-      dataStore.saveUser(null, updated)
-      return updated
-    default:
-      return state
-  }
-}
-
-function folders (state = initialFolders, action) {
-  state = state.slice()
-  switch (action.type) {
-    case FOLDER_CREATE:
-      {
-        let newFolder = action.data.folder
-        if (!_.isString(newFolder.name)) throw new Error('Folder name must be a string')
-        newFolder.name = newFolder.name.trim().replace(/\s/g, '_')
-
-        Object.assign(newFolder, {
-          key: keygen(),
-          createdAt: new Date(),
-          updatedAt: new Date()
-        })
-
-        if (newFolder.name == null || newFolder.name.length === 0) throw new Error('Folder name is required')
-        if (newFolder.name.match(/\//)) throw new Error('`/` is not available for folder name')
-
-        let conflictFolder = _.find(state, (folder) => folder.name.toLowerCase() === newFolder.name.toLowerCase())
-        if (conflictFolder != null) throw new Error(`${conflictFolder.name} already exists!`)
-        state.push(newFolder)
-
-        dataStore.setFolders(state)
-        activityRecord.emit('FOLDER_CREATE')
-        return state
-      }
-    case FOLDER_UPDATE:
-      {
-        let folder = action.data.folder
-        let targetFolder = _.findWhere(state, {key: folder.key})
-
-        if (!_.isString(folder.name)) throw new Error('Folder name must be a string')
-        folder.name = folder.name.trim().replace(/\s/g, '_')
-        if (folder.name.length === 0) throw new Error('Folder name is required')
-        if (folder.name.match(/\//)) throw new Error('`/` is not available for folder name')
-
-        // Folder existence check
-        if (targetFolder == null) throw new Error('Folder doesnt exist')
-        // Name conflict check
-        if (targetFolder.name !== folder.name) {
-          let conflictFolder = _.find(state, (_folder) => {
-            return folder.name.toLowerCase() === _folder.name.toLowerCase() && folder.key !== _folder.key
-          })
-          if (conflictFolder != null) throw new Error('Name conflicted')
-        }
-        Object.assign(targetFolder, folder, {
-          updatedAt: new Date()
-        })
-
-        dataStore.setFolders(state)
-        activityRecord.emit('FOLDER_UPDATE')
-        return state
-      }
-    case FOLDER_DESTROY:
-      {
-        if (state.length < 2) throw new Error('Folder must exist more than one')
-
-        let targetKey = action.data.key
-        let targetIndex = _.findIndex(state, (folder) => folder.key === targetKey)
-        if (targetIndex >= 0) {
-          state.splice(targetIndex, 1)
-        }
-        dataStore.setFolders(state)
-        activityRecord.emit('FOLDER_DESTROY')
-        return state
-      }
-    case FOLDER_REPLACE:
-      {
-        let { a, b } = action.data
-        let folderA = state[a]
-        let folderB = state[b]
-        state.splice(a, 1, folderB)
-        state.splice(b, 1, folderA)
-      }
-      dataStore.setFolders(state)
-      return state
-    default:
-      return state
-  }
-}
-
-function compareArticle (original, modified) {
-  var keys = _.keys(_.pick(modified, ['mode', 'title', 'tags', 'content', 'FolderKey']))
-
-  return keys.reduce((sum, key) => {
-    if ((key === 'tags' && !_.isEqual(original[key], modified[key])) || (key !== 'tags' && original[key] !== modified[key])) {
-      if (sum == null) {
-        sum = {
-          key: original.key
-        }
-      }
-      sum[key] = modified[key]
-    }
-    return sum
-  }, null)
-}
-
-function articles (state = initialArticles, action) {
-  switch (action.type) {
-    case ARTICLE_CACHE:
-      {
-        let modified = action.data.article
-        let targetKey = action.data.key
-        let originalIndex = _.findIndex(state.data, (_article) => targetKey === _article.key)
-        if (originalIndex === -1) return state
-        let modifiedIndex = _.findIndex(state.modified, (_article) => targetKey === _article.key)
-
-        modified = compareArticle(state.data[originalIndex], modified)
-        if (modified == null) {
-          if (modifiedIndex !== -1) state.modified.splice(modifiedIndex, 1)
-          return state
-        }
-
-        if (modifiedIndex === -1) state.modified.push(modified)
-        else Object.assign(state.modified[modifiedIndex], modified)
-        return state
-      }
-    case ARTICLE_UNCACHE:
-      {
-        let targetKey = action.data.key
-        let modifiedIndex = _.findIndex(state.modified, _article => targetKey === _article.key)
-        if (modifiedIndex >= 0) state.modified.splice(modifiedIndex, 1)
-        return state
-      }
-    case ARTICLE_UNCACHE_ALL:
-      state.modified = []
-      return state
-    case ARTICLE_SAVE:
-      {
-        let targetKey = action.data.key
-        let override = action.data.article
-        let modifiedIndex = _.findIndex(state.modified, _article => targetKey === _article.key)
-        let modified = modifiedIndex !== -1 ? state.modified.splice(modifiedIndex, 1)[0] : null
-
-        let targetIndex = _.findIndex(state.data, _article => targetKey === _article.key)
-        // Make a new if target article is not found.
-        if (targetIndex === -1) {
-          state.data.push(Object.assign({
-            title: '',
-            content: '',
-            mode: 'markdown',
-            tags: [],
-            craetedAt: new Date()
-          }, modified, override, {key: targetKey, updatedAt: new Date()}))
-          return state
-        }
-
-        Object.assign(state.data[targetIndex], modified, override, {key: targetKey, updatedAt: new Date()})
-
-        dataStore.setArticles(state.data)
-        return state
-      }
-    case ARTICLE_SAVE_ALL:
-      if (state.modified.length > 0) {
-        state.modified.forEach(modifiedArticle => {
-          let targetIndex = _.findIndex(state.data, _article => modifiedArticle.key === _article.key)
-          Object.assign(state.data[targetIndex], modifiedArticle, {key: modifiedArticle.key, updatedAt: new Date()})
-        })
-      }
-
-      state.modified = []
-      dataStore.setArticles(state.data)
-
-      return state
-    case ARTICLE_UPDATE:
-      {
-        let article = action.data.article
-
-        let targetIndex = _.findIndex(state.data, _article => article.key === _article.key)
-        if (targetIndex < 0) state.data.unshift(article)
-        else Object.assign(state.data[targetIndex], article)
-
-        dataStore.setArticles(state.data)
-        return state
-      }
-    case ARTICLE_DESTROY:
-      {
-        let articleKey = action.data.key
-
-        let targetIndex = _.findIndex(state.data, _article => articleKey === _article.key)
-        if (targetIndex >= 0) state.data.splice(targetIndex, 1)
-        let modifiedIndex = _.findIndex(state.modified, _article => articleKey === _article.key)
-        if (modifiedIndex >= 0) state.modified.splice(modifiedIndex, 1)
-
-        dataStore.setArticles(state.data)
-        return state
-      }
-    case FOLDER_DESTROY:
-      {
-        let folderKey = action.data.key
-
-        state.data = state.data.filter(article => article.FolderKey !== folderKey)
-
-        dataStore.setArticles(state.data)
-        return state
-      }
-    default:
-      return state
-  }
-}
-
-function status (state = initialStatus, action) {
-  state = Object.assign({}, state)
-  switch (action.type) {
-    case TOGGLE_TUTORIAL:
-      state.isTutorialOpen = !state.isTutorialOpen
-      return state
-  }
-
-  switch (action.type) {
-    case ARTICLE_SAVE:
-      if (action.data.forceSwitch) {
-        let article = action.data.article
-        state.articleKey = article.key
-        state.search = ''
-      }
-      return state
-    case SWITCH_FOLDER:
-      state.search = `\/\/${action.data} `
-
-      return state
-    case SWITCH_ARTICLE:
-      state.articleKey = action.data.key
-
-      return state
-    case SET_SEARCH_FILTER:
-      state.search = action.data
-
-      return state
-    case SET_TAG_FILTER:
-      state.search = `#${action.data}`
-
-      return state
-    case CLEAR_SEARCH:
-      state.search = ''
-
-      return state
-    default:
-      return state
-  }
-}
-
-/**
- * v0.6.* Reducers
- */
-
-/**
- * Repositories
- * ```
- * repositories = [{
- *   key: String,
- *   name: String,
- *   path: String, // path of repository
- *   status: String, // status of repository [LOADING, IDLE, ERROR]
- *   folders: {
- *     name: String,
- *     color: String
- *   },
- *   notes: [{
- *     key: String,
- *     title: String,
- *     content: String,
- *     folder: String,
- *     tags: [String],
- *     createdAt: Date,
- *     updatedAt: Date
- *   }]
- * }]
- * ```
- */
-import RepositoryManager from 'browser/lib/RepositoryManager'
-const initialRepositories = RepositoryManager.getRepos()
-
-function repositories (state = initialRepositories, action) {
-  switch (action.type) {
-    case 'ADD_REPOSITORY':
-      {
-        let repos = state.slice()
-        repos.push(action.data)
-        return repos
-      }
-    case 'REMOVE_REPOSITORY':
-      {
-        let repos = state.slice()
-        let targetIndex = _.findIndex(repos, {key: action.data.key})
-        if (targetIndex > -1) {
-          repos.splice(targetIndex, 1)
-        }
-        return repos
-      }
-  }
-  return state
-}
-// v0.6 end
-
-export default combineReducers({
-  user,
-  folders,
-  articles,
-  status,
-  repositories
-})
diff --git a/browser/styles/main/index.styl b/browser/styles/main/index.styl
index 0c24750b..c90aa873 100644
--- a/browser/styles/main/index.styl
+++ b/browser/styles/main/index.styl
@@ -106,48 +106,3 @@ textarea.block-input
     &:hover
       opacity 1
       background-color lighten(brandColor, 10%)
-  .contactButton
-    position fixed
-    z-index 2000
-    bottom 5px
-    right 5px
-    padding 10px 15px
-    border none
-    border-radius 5px
-    background-color brandColor
-    color white
-    opacity 0.7
-    &:hover
-      opacity 1
-      background-color lighten(brandColor, 10%)
-    .tooltip
-      tooltip()
-      margin-top -22px
-      margin-left -107px
-    &:hover .tooltip
-      opacity 1
-
-.OSSAnnounceModal
-  height 250
-  text-align center
-  .OSSAnnounceModal-title
-    font-size 32px
-    padding 45px 0
-
-  .OSSAnnounceModal-link
-    display block
-    font-size 20px
-    margin 25px 0 65px
-  .OSSAnnounceModal-closeBtn
-    display block
-    margin 0 auto
-    border none
-    border-radius 5px
-    width 150px
-    height 33px
-    background-color brandColor
-    color white
-    opacity 0.7
-    &:hover
-      opacity 1
-      background-color lighten(brandColor, 10%)

From 6ea66b85e01ffff8378d0d4c1e88b58b0de3d85d Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Tue, 3 May 2016 17:50:28 +0900
Subject: [PATCH 016/109] update style variables

---
 browser/styles/index.styl | 40 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index a00ef8a5..566cbfa8 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -13,6 +13,46 @@ $active-border-color = #369DCD
 $default-border = solid 1px $border-color
 $active-border = solid 1px $active-border-color
 
+/**
+* # Button styles
+*/
+
+// Default button
+$default-button-background = white
+$default-button-background--hover = #e6e6e6
+$default-button-background--active = #d4d4d4
+
+colorDefaultButton()
+  background-color $default-button-background
+  &:hover
+    background-color $default-button-background--hover
+  &:active
+    background-color $default-button-background--active
+  &:active:hover
+    background-color $default-button-background--active
+
+// Primary button(Brand color)
+$primary-button-background = $brand-color
+$primary-button-background--hover = darken($brand-color, 5%)
+$primary-button-background--hover = darken($brand-color, 10%)
+
+colorPrimaryButton()
+  background-color $primary-button-background
+  &:hover
+    background-color $primary-button-background--hover
+  &:active
+    background-color $primary-button-background--active
+  &:active:hover
+    background-color $primary-button-background--active
+
+/**
+* Nav
+*/
+
+$nav-border-color = #838383
+$nav-background-color = #353535
+$nav-inactive-color = #838383
+
 /**
 * # Modal Stuff
 * These will be moved lib/modal

From df51e6d429aca042b25e5a6621c3f9706746cbc3 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Tue, 3 May 2016 17:54:09 +0900
Subject: [PATCH 017/109] renew SideNav

---
 .../HomePage/SideNav/RepositorySection.js     | 42 ++++++---
 .../HomePage/SideNav/RepositorySection.styl   | 21 +++--
 browser/main/HomePage/SideNav/SideNav.styl    | 90 ++++++++++++-------
 browser/main/HomePage/SideNav/index.js        | 86 +++++++-----------
 4 files changed, 138 insertions(+), 101 deletions(-)

diff --git a/browser/main/HomePage/SideNav/RepositorySection.js b/browser/main/HomePage/SideNav/RepositorySection.js
index e0ccc29c..9b66ea40 100644
--- a/browser/main/HomePage/SideNav/RepositorySection.js
+++ b/browser/main/HomePage/SideNav/RepositorySection.js
@@ -3,8 +3,13 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './RepositorySection.styl'
 import Repository from 'browser/lib/Repository'
 
+const electron = require('electron')
+const { remote } = electron
+const Menu = remote.Menu
+const MenuItem = remote.MenuItem
+
 class RepositorySection extends React.Component {
-  handleUnlinkButtonClick (e) {
+  handleUnlinkButtonClick () {
     let { dispatch, repository } = this.props
 
     Repository.find(repository.key)
@@ -19,6 +24,27 @@ class RepositorySection extends React.Component {
       })
   }
 
+  handleToggleButtonClick (e) {
+
+  }
+
+  handleContextButtonClick (e) {
+    var menu = new Menu()
+    menu.append(new MenuItem({
+      label: 'New Note'
+    }))
+    menu.append(new MenuItem({
+      label: 'New Folder'
+    }))
+    menu.append(new MenuItem({ type: 'separator' }))
+    menu.append(new MenuItem({
+      label: 'Unmount',
+      click: () => this.handleUnlinkButtonClick()
+    }))
+
+    menu.popup(remote.getCurrentWindow())
+  }
+
   render () {
     let { repository } = this.props
 
@@ -33,10 +59,7 @@ class RepositorySection extends React.Component {
           </div>
           <div styleName='folder-control'>
             <button styleName='folder-control-button'>
-              <i className='fa fa-pencil'/>
-            </button>
-            <button styleName='folder-control-button'>
-              <i className='fa fa-trash'/>
+              <i className='fa fa-ellipsis-v'/>
             </button>
           </div>
         </div>
@@ -55,15 +78,12 @@ class RepositorySection extends React.Component {
 
           <div styleName='header-control'>
             <button styleName='header-control-button'
-              onClick={(e) => this.handleUnlinkButtonClick(e)}
+              onClick={(e) => this.handleContextButtonClick(e)}
             >
-              <i className='fa fa-unlink'/>
-            </button>
-            <button styleName='header-control-button'
-            >
-              <i className='fa fa-pencil'/>
+              <i className='fa fa-ellipsis-v'/>
             </button>
             <button styleName='header-control-button'
+              onClick={(e) => this.handleToggleButtonClick(e)}
             >
               <i className='fa fa-angle-down'/>
             </button>
diff --git a/browser/main/HomePage/SideNav/RepositorySection.styl b/browser/main/HomePage/SideNav/RepositorySection.styl
index c59997d2..f509a31d 100644
--- a/browser/main/HomePage/SideNav/RepositorySection.styl
+++ b/browser/main/HomePage/SideNav/RepositorySection.styl
@@ -1,10 +1,12 @@
 .root
   margin-top 15px
   margin-bottom 15px
+  user-select none
 
 .header
   position relative
   height 33px
+  cursor pointer
   &:hover
     background-color alpha(white, 0.1)
 
@@ -23,7 +25,7 @@
   top 0
   bottom 0
   right 5px
-  width 72px
+  width 48px
 
 .header-control-button
   width 24px
@@ -33,16 +35,19 @@
   border none
   border-radius 5px
   background-color transparent
-  color white
+  color $nav-inactive-color
   &:hover
+    color white
     background-color alpha(white, 0.1)
   &:active
+    color white
     background-color $brand-color
 
 .folder
   height 33px
   width 100%
   position relative
+  cursor pointer
   &:hover
     background-color alpha(white 0.1)
 
@@ -60,8 +65,8 @@
   position absolute
   top 0
   bottom 0
-  right 0
-  width 48px
+  right 5px
+  width 24px
 
 .folder-control-button
   width 24px
@@ -70,10 +75,12 @@
   border none
   border-radius 5px
   background-color transparent
-  color white
+  color $nav-inactive-color
   &:hover
+    color white
     background-color alpha(white, 0.1)
   &:active
+    color white
     background-color $brand-color
 
 .newFolderButton
@@ -83,8 +90,10 @@
   padding-left 20px
   text-align left
   background-color transparent
-  color white
+  color $nav-inactive-color
   &:hover
     background-color alpha(white, 0.1)
+    color white
   &:active
     background-color $brand-color
+    color white
diff --git a/browser/main/HomePage/SideNav/SideNav.styl b/browser/main/HomePage/SideNav/SideNav.styl
index b54462f5..2b881bf1 100644
--- a/browser/main/HomePage/SideNav/SideNav.styl
+++ b/browser/main/HomePage/SideNav/SideNav.styl
@@ -1,18 +1,16 @@
-$nav-border-color = #838383
-$nav-background-color = #353535
-
 .root
   absolute top bottom left
   width 200px
   border-right solid 1px $nav-border-color
   background-color $nav-background-color
+  user-select none
 
-.menu
-  margin-top 30px
-  margin-bottom 15px
+.top
+  height 60px
+  border-bottom solid 1px $nav-border-color
 
-.menu-button
-  height 33px
+.top-menu
+  height 60px
   padding 0 10px
   font-size 14px
   width 100%
@@ -21,39 +19,60 @@ $nav-background-color = #353535
   color white
   background-color transparent
   &:hover
-    background-color alph(white, 0.1)
+    background-color alpha(white, 0.1)
+  &:active
+    background-color $brand-color
+
+.menu
+  margin-top 15px
+
+.menu-button
+  height 44px
+  padding 0 10px
+  font-size 14px
+  width 100%
+  text-align left
+  border none
+  color white
+  background-color transparent
+  &:hover
+    background-color alpha(white, 0.1)
   &:active
     background-color $brand-color
 
 .repositoryList
   absolute left right
-  top 145px
-  border-top solid 1px $nav-border-color
+  top 167px
+  bottom 33px
+  overflow-y auto
+
+.repositoryList-empty
+  padding 0 10px
+  height 44px
+  line-height 44px
+  color $nav-inactive-color
+
+.navToggle
+  display block
+  position absolute
+  right 5px
+  bottom 5px
+  border-radius 16.5px
+  height 33px
+  width 33px
+  color $nav-inactive-color
+  border none
+  background-color transparent
+  &:hover
+    background-color alpha(white, 0.1)
+    color white
+  &:active
+    background-color $brand-color
+    color white
 
 .control
   absolute bottom left right
   height 33px
-  border-top solid 1px $nav-border-color
-
-.control-newRepositoryButton
-  absolute top bottom left
-  width 167px
-  padding 0 10px
-  text-align left
-  border-width 0 1px 0 0
-  border-color $nav-border-color
-  border-style solid
-  color white
-  background-color transparent
-  &:hover
-    background-color alph(white, 0.1)
-  &:active
-    background-color $brand-color
-
-.control-toggleButton
-  absolute top bottom right
-  width 33px
-  color white
   background-color transparent
   border none
   &:hover
@@ -61,3 +80,10 @@ $nav-background-color = #353535
   &:active
     background-color $brand-color
 
+.control-newRepositoryButton
+  absolute top bottom left
+  width 167px
+  padding 0 10px
+  text-align left
+  border none
+  color white
diff --git a/browser/main/HomePage/SideNav/index.js b/browser/main/HomePage/SideNav/index.js
index 3d26e1df..dd85e3a0 100644
--- a/browser/main/HomePage/SideNav/index.js
+++ b/browser/main/HomePage/SideNav/index.js
@@ -7,48 +7,35 @@ import CreateNewFolder from '../../modal/CreateNewFolder'
 import RepositorySection from './RepositorySection'
 import NewRepositoryModal from '../../modal/NewRepositoryModal'
 
-const ipc = require('electron').ipcRenderer
+const electron = require('electron')
+const { remote } = electron
+const Menu = remote.Menu
+const MenuItem = remote.MenuItem
 
 class SideNav extends React.Component {
-  constructor (props) {
-    super(props)
-    this.newFolderHandler = (e) => {
-      if (isModalOpen()) return true
-      this.handleNewFolderButton(e)
-    }
-  }
-
-  componentDidMount () {
-    ipc.on('nav-new-folder', this.newFolderHandler)
-  }
-
-  componentWillUnmount () {
-    ipc.removeListener('nav-new-folder', this.newFolderHandler)
-  }
-
-  handlePreferencesButtonClick (e) {
-    openModal(Preferences)
-  }
-
-  handleNewFolderButton (e) {
-    let { user } = this.props
-    openModal(CreateNewFolder, {user: user})
-  }
-
-  handleFolderButtonClick (name) {
-    return (e) => {
-      let { dispatch } = this.props
-    }
-  }
-
-  handleAllFoldersButtonClick (e) {
-    let { dispatch } = this.props
+  // TODO: should not use electron stuff v0.7
+  handleMenuButtonClick (e) {
+    var menu = new Menu()
+    menu.append(new MenuItem({
+      label: 'Preferences',
+      click: (e) => this.handlePreferencesButtonClick(e)
+    }))
+    menu.append(new MenuItem({ type: 'separator' }))
+    menu.append(new MenuItem({
+      label: 'Mount Repository',
+      click: (e) => this.handleNewRepositoryButtonClick(e)
+    }))
+    menu.popup(remote.getCurrentWindow())
   }
 
   handleNewRepositoryButtonClick (e) {
     openModal(NewRepositoryModal)
   }
 
+  handlePreferencesButtonClick (e) {
+    openModal(Preferences)
+  }
+
   render () {
     let { repositories, dispatch } = this.props
     let repositorieElements = repositories.map((repo) => {
@@ -65,39 +52,34 @@ class SideNav extends React.Component {
         styleName='root'
         tabIndex='1'
       >
+        <div styleName='top'>
+          <button styleName='top-menu'
+            onClick={(e) => this.handleMenuButtonClick(e)}
+          >
+            <i className='fa fa-navicon'/> Menu
+          </button>
+        </div>
+
         <div styleName='menu'>
           <button styleName='menu-button'
           >
-            <i className='fa fa-history'/> Recents
+            <i className='fa fa-home'/> Home
           </button>
           <button styleName='menu-button'
           >
             <i className='fa fa-star'/> Favorited
           </button>
-          <button styleName='menu-button'
-          >
-            <i className='fa fa-list'/> All posts
-          </button>
         </div>
 
         <div styleName='repositoryList'>
           {repositories.length > 0 ? repositorieElements : (
-            <div styleName='repositoryList-empty'>Empty</div>
+            <div styleName='repositoryList-empty'>No repository mount</div>
           )}
         </div>
 
-        <div styleName='control'>
-          <button
-            styleName='control-newRepositoryButton'
-            onClick={(e) => this.handleNewRepositoryButtonClick(e)}
-          >
-            <i className='fa fa-plus'/> New Repository
-          </button>
-          <button styleName='control-toggleButton'
-          >
-            <i className='fa fa-angle-double-right'/>
-          </button>
-        </div>
+        <button styleName='navToggle'>
+          <i className='fa fa-angle-double-left'/>
+        </button>
       </div>
     )
   }

From dcf773fd88e1655443ee8ce625e5a1dc91e43586 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Tue, 3 May 2016 22:38:54 +0900
Subject: [PATCH 018/109] add Folder

---
 browser/lib/Repository.js                     |  75 ++++++++----
 browser/lib/consts.js                         |  14 +++
 .../HomePage/SideNav/RepositorySection.js     | 109 +++++++++++++++---
 .../HomePage/SideNav/RepositorySection.styl   |  15 +++
 browser/main/HomePage/SideNav/index.js        |   3 +-
 browser/main/store.js                         |  20 ++++
 browser/styles/index.styl                     |   1 +
 7 files changed, 197 insertions(+), 40 deletions(-)
 create mode 100644 browser/lib/consts.js

diff --git a/browser/lib/Repository.js b/browser/lib/Repository.js
index 40077966..3a72ec0c 100644
--- a/browser/lib/Repository.js
+++ b/browser/lib/Repository.js
@@ -3,6 +3,7 @@ const fs = require('fs')
 const path = require('path')
 const CSON = require('season')
 const _ = require('lodash')
+const consts = require('browser/lib/consts')
 
 let repositories = []
 
@@ -19,10 +20,10 @@ let repositories = []
  *   .then(() => repo.load())
  *
  * // Update Cached
- * repo.updateCache({name: 'renamed'})
+ * repo.saveCache({name: 'renamed'})
  *
  * // Update JSON
- * repo.updateJSON({author: 'Other user'})
+ * repo.saveJSON({author: 'Other user'})
  *
  * // Remove repository
  * repo.unmount()
@@ -142,6 +143,7 @@ class Repository {
       return Promise.all([resolveDataDirectory, resolveBoostrepoJSON])
         .then((data) => {
           this.json = data[1]
+          return true
         })
     }
 
@@ -167,6 +169,7 @@ class Repository {
       return Promise.all(notes)
         .then((notes) => {
           this.notes = notes
+          return true
         })
     }
 
@@ -178,10 +181,11 @@ class Repository {
 
         return this.getData()
       })
-      .catch(function handleError (err) {
+      .catch((err) => {
         this.status = 'ERROR'
         this.error = err
-        return err
+        console.error(err)
+        return this
       })
   }
 
@@ -253,14 +257,23 @@ class Repository {
    * @return {Promise} all data of a repository
    */
   getData () {
-    if (this.status !== 'READY') {
+    function carbonCopy (obj) {
+      return JSON.parse(JSON.stringify(obj))
+    }
+    if (this.status === 'IDLE') {
       return this.load()
     }
 
-    return Promise.resolve(Object.assign({}, this.json, this.cached, {
+    if (this.status === 'ERROR') {
+      return Promise.resolve(carbonCopy(Object.assign({}, this.json, this.cached, {
+        status: this.status
+      })))
+    }
+
+    return Promise.resolve(carbonCopy(Object.assign({}, this.json, this.cached, {
       status: this.status,
       notes: this.notes
-    }))
+    })))
   }
 
   /**
@@ -287,11 +300,13 @@ class Repository {
    */
   saveJSON (newJSON) {
     let jsonPath = path.join(this.cached.path, 'boostrepo.json')
-    Object.assign(this.json, newJSON)
+    if (_.isObject(newJSON)) {
+      Object.assign(this.json, newJSON)
+    }
 
-    return new Promise(function (resolve, reject) {
+    return new Promise((resolve, reject) => {
       CSON
-        .writeFile(jsonPath, this.json, function (err) {
+        .writeFile(jsonPath, this.json, (err) => {
           if (err != null) return reject(err)
           resolve(this.json)
         })
@@ -316,9 +331,9 @@ class Repository {
 
     newFolder = _.pick(newFolder, ['color', 'name'])
     if (!_.isString(newFolder.name) || newFolder.name.trim().length === 0) newFolder.name = 'unnamed'
-    else newFolder.name = newFolder.trim()
+    else newFolder.name = newFolder.name.trim()
 
-    if (!_.isString(newFolder.color)) newFolder.color = ''
+    if (!_.isString(newFolder.color)) newFolder.color = this.constructor.randomColor()
 
     newFolder.key = keygen()
     while (_.findIndex(folders, {key: newFolder.key}) > -1) {
@@ -327,7 +342,7 @@ class Repository {
 
     folders.push(newFolder)
 
-    return this.updateJSON(this.json)
+    return this.saveJSON(this.json)
       .then(() => newFolder)
   }
 
@@ -451,6 +466,10 @@ class Repository {
     return Promise.resolve(this.notes)
   }
 
+  /**
+   * Static Methods
+   */
+
   static generateDefaultJSON (override) {
     return Object.assign({
       name: 'unnamed',
@@ -458,7 +477,7 @@ class Repository {
       folders: [{
         key: keygen(),
         name: 'general',
-        color: 'green'
+        color: this.randomColor()
       }]
     }, override)
   }
@@ -474,21 +493,28 @@ class Repository {
    * @return {Promise} resolving parsed data
    */
   static resolveJSON (targetPath, defaultOverrides) {
-    return new Promise(function checkIfExists (resolve, reject) {
-      // If JSON doesn't exist, make a new one.
-      if (CSON.resolve(targetPath) == null) {
-        let newRepoJSON = this.constructor.generateDefaultJSON(defaultOverrides)
-        CSON.writeFile(targetPath, newRepoJSON, function (err) {
+    return (new Promise((resolve, reject) => {
+      let writeNew = () => {
+        let newRepoJSON = this.generateDefaultJSON(defaultOverrides)
+        CSON.writeFile(targetPath, newRepoJSON, (err) => {
           if (err != null) return reject(err)
           resolve(newRepoJSON)
         })
+      }
+      // If JSON doesn't exist, make a new one.
+      if (CSON.resolve(targetPath) == null) {
+        writeNew()
       } else {
-        CSON.readFile(targetPath, function (err, obj) {
+        CSON.readFile(targetPath, (err, obj) => {
           if (err != null) return reject(err)
-          resolve(obj)
+          if (obj == null) {
+            writeNew()
+          } else {
+            resolve(obj)
+          }
         })
       }
-    })
+    }))
   }
 
   /**
@@ -553,7 +579,6 @@ class Repository {
         throw new Error('Data is corrupted. it must be an array.')
       }
     } catch (err) {
-      console.log(err)
       data = []
       this.saveAllCached(data)
     }
@@ -582,6 +607,10 @@ class Repository {
     let repository = _.find(repositories, {cached: {key: repoKey}})
     return Promise.resolve(repository)
   }
+
+  static randomColor () {
+    return consts.FOLDER_COLORS[Math.floor(Math.random() * consts.FOLDER_COLORS.length)]
+  }
 }
 
 export default Repository
diff --git a/browser/lib/consts.js b/browser/lib/consts.js
new file mode 100644
index 00000000..de75eaf1
--- /dev/null
+++ b/browser/lib/consts.js
@@ -0,0 +1,14 @@
+const consts = {
+  FOLDER_COLORS: [
+    '#3460C7',
+    '#2BA5F7',
+    '#FF8E00',
+    '#E8D252',
+    '#3FD941',
+    '#1FAD85',
+    '#E10051',
+    '#B013A4'
+  ]
+}
+
+module.exports = consts
diff --git a/browser/main/HomePage/SideNav/RepositorySection.js b/browser/main/HomePage/SideNav/RepositorySection.js
index 9b66ea40..04f77e81 100644
--- a/browser/main/HomePage/SideNav/RepositorySection.js
+++ b/browser/main/HomePage/SideNav/RepositorySection.js
@@ -9,10 +9,28 @@ const Menu = remote.Menu
 const MenuItem = remote.MenuItem
 
 class RepositorySection extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isOpen: true,
+      isCreatingFolder: false,
+      isSaving: false,
+      newFolder: {
+        name: ''
+      }
+    }
+  }
+
+  getRepository () {
+    let { repository } = this.props
+    return Repository.find(repository.key)
+  }
+
   handleUnlinkButtonClick () {
     let { dispatch, repository } = this.props
 
-    Repository.find(repository.key)
+    this.getRepository()
       .then((repositoryInstance) => {
         return repositoryInstance.unmount()
       })
@@ -25,16 +43,16 @@ class RepositorySection extends React.Component {
   }
 
   handleToggleButtonClick (e) {
-
+    this.setState({
+      isOpen: !this.state.isOpen
+    })
   }
 
   handleContextButtonClick (e) {
     var menu = new Menu()
     menu.append(new MenuItem({
-      label: 'New Note'
-    }))
-    menu.append(new MenuItem({
-      label: 'New Folder'
+      label: 'New Folder',
+      click: () => this.handleNewFolderButtonClick()
     }))
     menu.append(new MenuItem({ type: 'separator' }))
     menu.append(new MenuItem({
@@ -45,17 +63,62 @@ class RepositorySection extends React.Component {
     menu.popup(remote.getCurrentWindow())
   }
 
+  handleNewFolderButtonClick (e) {
+    this.setState({
+      isCreatingFolder: true,
+      newFolder: {
+        name: 'New Folder'
+      }
+    }, () => {
+      this.refs.nameInput.select()
+      this.refs.nameInput.focus()
+    })
+  }
+
+  handleNewFolderFormChange (e) {
+    let newFolder = this.state.newFolder
+    newFolder.name = this.refs.nameInput.value
+
+    this.setState({
+      newFolder
+    })
+  }
+
+  handleNameInputBlur (e) {
+    let { dispatch, repository } = this.props
+
+    this.getRepository()
+      .then((repositoryInstance) => {
+        return repositoryInstance.addFolder({
+          name: this.state.newFolder.name
+        })
+      })
+      .then((folder) => {
+        console.log(folder)
+        dispatch({
+          type: 'ADD_FOLDER',
+          key: repository.key,
+          folder: folder
+        })
+
+        this.setState({
+          isCreatingFolder: false,
+          isSaving: false
+        })
+      })
+  }
+
   render () {
     let { repository } = this.props
 
     let folderElements = repository.folders.map((folder) => {
       return (
         <div
-          key={folder.name}
+          key={folder.key}
           styleName='folder'
         >
           <div styleName='folder-label'>
-            <i className='fa fa-cube'/> {folder.name}
+            <i className='fa fa-cube' style={{color: folder.color}}/> {folder.name}
           </div>
           <div styleName='folder-control'>
             <button styleName='folder-control-button'>
@@ -66,6 +129,10 @@ class RepositorySection extends React.Component {
       )
     })
 
+    let toggleButtonIconClassName = this.state.isOpen
+      ? 'fa fa-minus'
+      : 'fa fa-plus'
+
     return (
       <div
         className='RepositorySection'
@@ -85,17 +152,29 @@ class RepositorySection extends React.Component {
             <button styleName='header-control-button'
               onClick={(e) => this.handleToggleButtonClick(e)}
             >
-              <i className='fa fa-angle-down'/>
+              <i className={toggleButtonIconClassName}/>
             </button>
           </div>
         </div>
+        {this.state.isOpen && <div>
+          {folderElements}
 
-        {folderElements}
-
-        <button styleName='newFolderButton'
-        >
-          <i className='fa fa-plus'/> New Folder
-        </button>
+          {this.state.isCreatingFolder
+            ? <div styleName='newFolderForm'>
+              <input styleName='newFolderForm-nameInput'
+                ref='nameInput'
+                value={this.state.newFolder.name}
+                onChange={(e) => this.handleNewFolderFormChange(e)}
+                onBlur={(e) => this.handleNameInputBlur(e)}
+              />
+            </div>
+            : <button styleName='newFolderButton'
+              onClick={(e) => this.handleNewFolderButtonClick(e)}
+            >
+              <i className='fa fa-plus'/> New Folder
+            </button>
+          }
+        </div>}
       </div>
     )
   }
diff --git a/browser/main/HomePage/SideNav/RepositorySection.styl b/browser/main/HomePage/SideNav/RepositorySection.styl
index f509a31d..92539277 100644
--- a/browser/main/HomePage/SideNav/RepositorySection.styl
+++ b/browser/main/HomePage/SideNav/RepositorySection.styl
@@ -83,6 +83,21 @@
     color white
     background-color $brand-color
 
+.newFolderForm
+  width 100%
+  padding 0 15px
+  height 33px
+
+.newFolderForm-nameInput
+  width 100%
+  height 33px
+  padding 0 10px
+  border-radius 5px
+  border solid 1px $nav-border-color
+  outline none
+  &:focus
+    border-color $focus-border-color
+
 .newFolderButton
   height 33px
   width 100%
diff --git a/browser/main/HomePage/SideNav/index.js b/browser/main/HomePage/SideNav/index.js
index dd85e3a0..171b1f0b 100644
--- a/browser/main/HomePage/SideNav/index.js
+++ b/browser/main/HomePage/SideNav/index.js
@@ -1,9 +1,8 @@
 import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SideNav.styl'
-import { openModal, isModalOpen } from 'browser/lib/modal'
+import { openModal } from 'browser/lib/modal'
 import Preferences from '../../modal/Preferences'
-import CreateNewFolder from '../../modal/CreateNewFolder'
 import RepositorySection from './RepositorySection'
 import NewRepositoryModal from '../../modal/NewRepositoryModal'
 
diff --git a/browser/main/store.js b/browser/main/store.js
index 1b7842cb..adabd37a 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -35,16 +35,36 @@ function repositories (state = initialRepositories, action) {
     case 'ADD_REPOSITORY':
       {
         let repos = state.slice()
+
         repos.push(action.repository)
+
         return repos
       }
     case 'REMOVE_REPOSITORY':
       {
         let repos = state.slice()
+
         let targetIndex = _.findIndex(repos, {key: action.key})
         if (targetIndex > -1) {
           repos.splice(targetIndex, 1)
         }
+
+        return repos
+      }
+    case 'ADD_FOLDER':
+      {
+        let repos = state.slice()
+        let targetRepo = _.find(repos, {key: action.key})
+
+        if (targetRepo == null) return state
+
+        let targetFolderIndex = _.findIndex(targetRepo.folders, {key: action.folder.key})
+        if (targetFolderIndex < 0) {
+          targetRepo.folders.push(action.folder)
+        } else {
+          targetRepo.folders.splice(targetFolderIndex, 1, action.folder)
+        }
+
         return repos
       }
   }
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 566cbfa8..e2e64b02 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -9,6 +9,7 @@ $danger-lighten-color = #FFE5E6
 */
 $border-color = #D0D0D0
 $active-border-color = #369DCD
+$focus-border-color = #369DCD
 
 $default-border = solid 1px $border-color
 $active-border = solid 1px $active-border-color

From 219af76679e76cd11045560783b173f3eb8cd735 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Tue, 3 May 2016 23:03:04 +0900
Subject: [PATCH 019/109] set Input disabled when saving

---
 .../HomePage/SideNav/RepositorySection.js     | 50 ++++++++++++-------
 .../HomePage/SideNav/RepositorySection.styl   |  2 +
 2 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/browser/main/HomePage/SideNav/RepositorySection.js b/browser/main/HomePage/SideNav/RepositorySection.js
index 04f77e81..6ace6531 100644
--- a/browser/main/HomePage/SideNav/RepositorySection.js
+++ b/browser/main/HomePage/SideNav/RepositorySection.js
@@ -87,25 +87,36 @@ class RepositorySection extends React.Component {
   handleNameInputBlur (e) {
     let { dispatch, repository } = this.props
 
-    this.getRepository()
-      .then((repositoryInstance) => {
-        return repositoryInstance.addFolder({
-          name: this.state.newFolder.name
-        })
-      })
-      .then((folder) => {
-        console.log(folder)
-        dispatch({
-          type: 'ADD_FOLDER',
-          key: repository.key,
-          folder: folder
+    this.setState({
+      isSaving: true
+    }, () => {
+      this.getRepository()
+        .then((repositoryInstance) => {
+          return repositoryInstance.addFolder({
+            name: this.state.newFolder.name
+          })
         })
+        .then((folder) => {
+          dispatch({
+            type: 'ADD_FOLDER',
+            key: repository.key,
+            folder: folder
+          })
 
-        this.setState({
-          isCreatingFolder: false,
-          isSaving: false
+          this.setState({
+            isCreatingFolder: false,
+            isSaving: false
+          })
         })
-      })
+        .catch((err) => {
+          console.error(err)
+
+          this.setState({
+            isCreatingFolder: false,
+            isSaving: false
+          })
+        })
+    })
   }
 
   render () {
@@ -138,7 +149,9 @@ class RepositorySection extends React.Component {
         className='RepositorySection'
         styleName='root'
       >
-        <div styleName='header'>
+        <div styleName='header'
+          onContextMenu={(e) => this.handleContextButtonClick(e)}
+        >
           <div styleName='header-name'>
             <i className='fa fa-archive'/> {repository.name}
           </div>
@@ -149,7 +162,7 @@ class RepositorySection extends React.Component {
             >
               <i className='fa fa-ellipsis-v'/>
             </button>
-            <button styleName='header-control-button'
+            <button styleName='header-control-button--show'
               onClick={(e) => this.handleToggleButtonClick(e)}
             >
               <i className={toggleButtonIconClassName}/>
@@ -163,6 +176,7 @@ class RepositorySection extends React.Component {
             ? <div styleName='newFolderForm'>
               <input styleName='newFolderForm-nameInput'
                 ref='nameInput'
+                disabled={this.state.isSaving}
                 value={this.state.newFolder.name}
                 onChange={(e) => this.handleNewFolderFormChange(e)}
                 onBlur={(e) => this.handleNameInputBlur(e)}
diff --git a/browser/main/HomePage/SideNav/RepositorySection.styl b/browser/main/HomePage/SideNav/RepositorySection.styl
index 92539277..6f7659d6 100644
--- a/browser/main/HomePage/SideNav/RepositorySection.styl
+++ b/browser/main/HomePage/SideNav/RepositorySection.styl
@@ -97,6 +97,8 @@
   outline none
   &:focus
     border-color $focus-border-color
+  &:disabled
+    background-color $disabled-input-background
 
 .newFolderButton
   height 33px

From 1e7cce9056bf61c51a33d3476870df4da5f2e60d Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Tue, 3 May 2016 23:05:44 +0900
Subject: [PATCH 020/109] update style of SideNav

---
 browser/main/HomePage/SideNav/RepositorySection.styl | 12 +++++++++++-
 browser/main/HomePage/SideNav/SideNav.styl           |  3 +--
 browser/styles/index.styl                            |  6 ++++++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/browser/main/HomePage/SideNav/RepositorySection.styl b/browser/main/HomePage/SideNav/RepositorySection.styl
index 6f7659d6..9bc95ca4 100644
--- a/browser/main/HomePage/SideNav/RepositorySection.styl
+++ b/browser/main/HomePage/SideNav/RepositorySection.styl
@@ -9,6 +9,8 @@
   cursor pointer
   &:hover
     background-color alpha(white, 0.1)
+    .header-control-button
+      opacity 1
 
 .header-name
   position absolute
@@ -36,6 +38,7 @@
   border-radius 5px
   background-color transparent
   color $nav-inactive-color
+  opacity 0
   &:hover
     color white
     background-color alpha(white, 0.1)
@@ -43,13 +46,19 @@
     color white
     background-color $brand-color
 
+.header-control-button--show
+  @extend .header-control-button
+  opacity 1
+
 .folder
   height 33px
   width 100%
   position relative
   cursor pointer
   &:hover
-    background-color alpha(white 0.1)
+    background-color alpha(white, 0.1)
+    .folder-control
+      opacity 1
 
 .folder-label
   position absolute
@@ -62,6 +71,7 @@
   color white
 
 .folder-control
+  opacity 0
   position absolute
   top 0
   bottom 0
diff --git a/browser/main/HomePage/SideNav/SideNav.styl b/browser/main/HomePage/SideNav/SideNav.styl
index 2b881bf1..1b67b6e8 100644
--- a/browser/main/HomePage/SideNav/SideNav.styl
+++ b/browser/main/HomePage/SideNav/SideNav.styl
@@ -41,9 +41,8 @@
     background-color $brand-color
 
 .repositoryList
-  absolute left right
+  absolute left right bottom
   top 167px
-  bottom 33px
   overflow-y auto
 
 .repositoryList-empty
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index e2e64b02..f39991a1 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -46,6 +46,12 @@ colorPrimaryButton()
   &:active:hover
     background-color $primary-button-background--active
 
+/**
+* Input
+*/
+
+$disabled-input-background = #DDD
+
 /**
 * Nav
 */

From 27c22a4b09d8e50c9d97f0a6318ca3c090395f60 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Tue, 3 May 2016 23:18:39 +0900
Subject: [PATCH 021/109] focus first input & fix deprecated code

---
 browser/main/modal/NewRepositoryModal.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/browser/main/modal/NewRepositoryModal.js b/browser/main/modal/NewRepositoryModal.js
index c1433e5f..b777278a 100644
--- a/browser/main/modal/NewRepositoryModal.js
+++ b/browser/main/modal/NewRepositoryModal.js
@@ -10,7 +10,7 @@ const remote = electron.remote
 function browseFolder () {
   let dialog = remote.dialog
 
-  let defaultPath = remote.app.getHomeDir()
+  let defaultPath = remote.app.getPath('home')
   return new Promise((resolve, reject) => {
     dialog.showOpenDialog({
       title: 'Select Directory',
@@ -36,6 +36,10 @@ class NewRepositoryModal extends React.Component {
     }
   }
 
+  componentDidMount () {
+    this.refs.nameInput.focus()
+  }
+
   handleCloseButtonClick (e) {
     this.props.close()
   }

From 66856d1229615727858a878165d04e3e94f5085a Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Tue, 3 May 2016 23:21:27 +0900
Subject: [PATCH 022/109] clean old codes

---
 .../main/modal/Preference/AppSettingTab.js    |  65 +--
 .../main/modal/Preference/FolderSettingTab.js |  96 -----
 browser/main/modal/Preferences.js             |  35 +-
 browser/main/modal/Tutorial.js                | 115 ------
 browser/styles/main/UserNavigator.styl        |  86 ----
 .../styles/main/modal/CreateNewFolder.styl    |  91 ----
 browser/styles/main/modal/CreateNewTeam.styl  | 199 ---------
 browser/styles/main/modal/Tutorial.styl       | 132 ------
 browser/styles/shared/modal.styl              | 390 ------------------
 9 files changed, 24 insertions(+), 1185 deletions(-)
 delete mode 100644 browser/main/modal/Preference/FolderSettingTab.js
 delete mode 100644 browser/main/modal/Tutorial.js
 delete mode 100644 browser/styles/main/UserNavigator.styl
 delete mode 100644 browser/styles/main/modal/CreateNewFolder.styl
 delete mode 100644 browser/styles/main/modal/CreateNewTeam.styl
 delete mode 100644 browser/styles/main/modal/Tutorial.styl
 delete mode 100644 browser/styles/shared/modal.styl

diff --git a/browser/main/modal/Preference/AppSettingTab.js b/browser/main/modal/Preference/AppSettingTab.js
index c385b292..16a4c5ed 100644
--- a/browser/main/modal/Preference/AppSettingTab.js
+++ b/browser/main/modal/Preference/AppSettingTab.js
@@ -88,58 +88,27 @@ export default class AppSettingTab extends React.Component {
     })
   }
 
-  handleNameSaveButtonClick (e) {
-    let { dispatch } = this.props
-
-    dispatch(updateUser({name: this.state.user.name}))
-    this.setState({
-      userAlert: {
-        type: 'success',
-        message: 'Successfully done!'
-      }
-    })
-  }
-
   render () {
     let keymapAlert = this.state.keymapAlert
     let keymapAlertElement = keymapAlert != null
-      ? (
-        <p className={`alert ${keymapAlert.type}`}>
-          {keymapAlert.message}
-        </p>
-      ) : null
-    let userAlert = this.state.userAlert
-    let userAlertElement = userAlert != null
-      ? (
-        <p className={`alert ${userAlert.type}`}>
-          {userAlert.message}
-        </p>
-      ) : null
-    let aceThemeList = ace.require("ace/ext/themelist")
+      ? <p className={`alert ${keymapAlert.type}`}>
+        {keymapAlert.message}
+      </p>
+      : null
+    let aceThemeList = ace.require('ace/ext/themelist')
     let hljsThemeList = hljsTheme()
 
     return (
       <div className='AppSettingTab content'>
-        <div className='section'>
-          <div className='sectionTitle'>User&apos;s info</div>
-          <div className='sectionInput'>
-            <label>User name</label>
-            <input valueLink={this.linkState('user.name')} type='text'/>
-          </div>
-          <div className='sectionConfirm'>
-            <button onClick={e => this.handleNameSaveButtonClick(e)}>Save</button>
-            {userAlertElement}
-          </div>
-        </div>
         <div className='section'>
           <div className='sectionTitle'>Editor</div>
           <div className='sectionInput'>
             <label>Editor Font Size</label>
-            <input valueLink={this.linkState('config.editor-font-size')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
+            <input valueLink={this.linkState('config.editor-font-size')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
           </div>
           <div className='sectionInput'>
             <label>Editor Font Family</label>
-            <input valueLink={this.linkState('config.editor-font-family')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
+            <input valueLink={this.linkState('config.editor-font-family')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
           </div>
           <div className='sectionMultiSelect'>
             <label>Editor Indent Style</label>
@@ -160,11 +129,11 @@ export default class AppSettingTab extends React.Component {
           <div className='sectionTitle'>Preview</div>
           <div className='sectionInput'>
             <label>Preview Font Size</label>
-            <input valueLink={this.linkState('config.preview-font-size')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
+            <input valueLink={this.linkState('config.preview-font-size')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
           </div>
           <div className='sectionInput'>
             <label>Preview Font Family</label>
-            <input valueLink={this.linkState('config.preview-font-family')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
+            <input valueLink={this.linkState('config.preview-font-family')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
           </div>
           <div className='sectionSelect'>
             <label>Switching Preview</label>
@@ -194,8 +163,8 @@ export default class AppSettingTab extends React.Component {
             <label>Code block Theme</label>
             <select valueLink={this.linkState('config.theme-code')}>
               {
-                hljsThemeList.map(function(v, i){
-                  return (<option value={v.name} key={v.name}>{v.caption}</option>)
+                hljsThemeList.map((theme) => {
+                  return (<option value={theme.name} key={theme.name}>{theme.caption}</option>)
                 })
               }
             </select>
@@ -204,28 +173,28 @@ export default class AppSettingTab extends React.Component {
             <label>Editor Theme</label>
             <select valueLink={this.linkState('config.theme-syntax')}>
               {
-                aceThemeList.themes.map(function(v, i){
-                  return (<option value={v.name} key={v.name}>{v.caption}</option>)
+                aceThemeList.themes.map((theme) => {
+                  return (<option value={theme.name} key={theme.name}>{theme.caption}</option>)
                 })
               }
             </select>
           </div>
           <div className='sectionConfirm'>
-            <button onClick={e => this.handleConfigSaveButtonClick(e)}>Save</button>
+            <button onClick={(e) => this.handleConfigSaveButtonClick(e)}>Save</button>
           </div>
         </div>
         <div className='section'>
           <div className='sectionTitle'>Hotkey</div>
           <div className='sectionInput'>
             <label>Toggle Main</label>
-            <input onKeyDown={e => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleMain')} type='text'/>
+            <input onKeyDown={(e) => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleMain')} type='text'/>
           </div>
           <div className='sectionInput'>
             <label>Toggle Finder(popup)</label>
-            <input onKeyDown={e => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleFinder')} type='text'/>
+            <input onKeyDown={(e) => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleFinder')} type='text'/>
           </div>
           <div className='sectionConfirm'>
-            <button onClick={e => this.handleSaveButtonClick(e)}>Save</button>
+            <button onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
             {keymapAlertElement}
           </div>
           <div className='description'>
diff --git a/browser/main/modal/Preference/FolderSettingTab.js b/browser/main/modal/Preference/FolderSettingTab.js
deleted file mode 100644
index 0fd0d2d5..00000000
--- a/browser/main/modal/Preference/FolderSettingTab.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { PropTypes } from 'react'
-import FolderRow from './FolderRow'
-import linkState from 'browser/lib/linkState'
-
-export default class FolderSettingTab extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      name: ''
-    }
-  }
-
-  handleNewFolderNameKeyDown (e) {
-    if (e.keyCode === 13) {
-      this.handleSaveButtonClick()
-    }
-  }
-
-  handleSaveButtonClick (e) {
-    this.setState({alert: null}, () => {
-      let { dispatch } = this.props
-
-      try {
-        // dispatch(createFolder({
-        //   name: this.state.name
-        // }))
-      } catch (e) {
-        this.setState({alert: {
-          type: 'error',
-          message: e.message
-        }})
-        return
-      }
-
-      this.setState({name: ''})
-    })
-  }
-
-  setAlert (alert, cb) {
-    this.setState({alert: alert}, cb)
-  }
-
-  render () {
-    let { folders } = this.props
-    let folderElements = folders.map((folder, index) => {
-      return (
-        <FolderRow
-          key={'folder-' + folder.key}
-          folder={folder}
-          index={index}
-          count={folders.length}
-          setAlert={(alert, cb) => this.setAlert(alert, cb)}
-        />
-      )
-    })
-
-    let alert = this.state.alert
-    let alertElement = alert != null ? (
-        <p className={`alert ${alert.type}`}>
-          {alert.message}
-        </p>
-      ) : null
-
-    return (
-      <div className='FolderSettingTab content'>
-        <div className='section'>
-          <div className='sectionTitle'>Manage folder</div>
-          <div className='folderTable'>
-            <div className='folderHeader'>
-              <div className='folderName'>Folder</div>
-              <div className='folderControl'>Edit/Delete</div>
-            </div>
-            {folderElements}
-            <div className='newFolder'>
-              <div className='folderName'>
-                <input onKeyDown={(e) => this.handleNewFolderNameKeyDown(e)} valueLink={this.linkState('name')} type='text' placeholder='New Folder'/>
-              </div>
-              <div className='folderControl'>
-                <button onClick={(e) => this.handleSaveButtonClick(e)} className='primary'>Add</button>
-              </div>
-            </div>
-            {alertElement}
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-FolderSettingTab.propTypes = {
-  folders: PropTypes.array,
-  dispatch: PropTypes.func
-}
-
-FolderSettingTab.prototype.linkState = linkState
diff --git a/browser/main/modal/Preferences.js b/browser/main/modal/Preferences.js
index 01b7ac22..82ea0d13 100644
--- a/browser/main/modal/Preferences.js
+++ b/browser/main/modal/Preferences.js
@@ -3,12 +3,10 @@ import { connect, Provider } from 'react-redux'
 import linkState from 'browser/lib/linkState'
 import store from '../store'
 import AppSettingTab from './Preference/AppSettingTab'
-import FolderSettingTab from './Preference/FolderSettingTab'
 import ContactTab from './Preference/ContactTab'
 import { closeModal } from 'browser/lib/modal'
 
 const APP = 'APP'
-const FOLDER = 'FOLDER'
 const CONTACT = 'CONTACT'
 
 class Preferences extends React.Component {
@@ -25,7 +23,7 @@ class Preferences extends React.Component {
   }
 
   handleNavButtonClick (tab) {
-    return e => {
+    return (e) => {
       this.setState({currentTab: tab})
     }
   }
@@ -35,19 +33,18 @@ class Preferences extends React.Component {
 
     let tabs = [
       {target: APP, label: 'Preferences'},
-      {target: FOLDER, label: 'Manage folder'},
-      {target: CONTACT, label: 'Contact form'}
+      {target: CONTACT, label: 'Contact'}
     ]
 
-    let navButtons = tabs.map(tab => (
-      <button key={tab.target} onClick={e => this.handleNavButtonClick(tab.target)(e)} className={this.state.currentTab === tab.target ? 'active' : ''}>{tab.label}</button>
+    let navButtons = tabs.map((tab) => (
+      <button key={tab.target} onClick={(e) => this.handleNavButtonClick(tab.target)(e)} className={this.state.currentTab === tab.target ? 'active' : ''}>{tab.label}</button>
     ))
 
     return (
       <div className='Preferences modal'>
         <div className='header'>
           <div className='title'>Setting</div>
-          <button onClick={e => closeModal()} className='closeBtn'>Done</button>
+          <button onClick={(e) => closeModal()} className='closeBtn'>Done</button>
         </div>
 
         <div className='nav'>
@@ -60,16 +57,9 @@ class Preferences extends React.Component {
   }
 
   renderContent () {
-    let { user, folders, dispatch } = this.props
+    let { user, dispatch } = this.props
 
     switch (this.state.currentTab) {
-      case FOLDER:
-        return (
-          <FolderSettingTab
-            dispatch={dispatch}
-            folders={folders}
-          />
-        )
       case CONTACT:
         return (
           <ContactTab/>
@@ -90,23 +80,12 @@ Preferences.propTypes = {
   user: PropTypes.shape({
     name: PropTypes.string
   }),
-  folders: PropTypes.array,
   dispatch: PropTypes.func
 }
 
 Preferences.prototype.linkState = linkState
 
-function remap (state) {
-  let { user, folders, status } = state
-
-  return {
-    user,
-    folders,
-    status
-  }
-}
-
-let RootComponent = connect(remap)(Preferences)
+let RootComponent = connect((x) => x)(Preferences)
 export default class PreferencesModal extends React.Component {
   render () {
     return (
diff --git a/browser/main/modal/Tutorial.js b/browser/main/modal/Tutorial.js
deleted file mode 100644
index 6fbc1f88..00000000
--- a/browser/main/modal/Tutorial.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import React, { PropTypes } from 'react'
-import MarkdownPreview from 'browser/components/MarkdownPreview'
-import CodeEditor from 'browser/components/CodeEditor'
-
-export default class Tutorial extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      slideIndex: 0
-    }
-  }
-
-  handlePriorSlideClick () {
-    if (this.state.slideIndex > 0) this.setState({slideIndex: this.state.slideIndex - 1})
-  }
-
-  handleNextSlideClick () {
-    if (this.state.slideIndex < 4) this.setState({slideIndex: this.state.slideIndex + 1})
-  }
-
-  startButtonClick (e) {
-    this.props.close()
-  }
-
-  render () {
-    let content = this.renderContent(this.state.slideIndex)
-
-    let dotElements = []
-    for (let i = 0; i < 5; i++) {
-      dotElements.push(<i key={i} className={'fa fa-fw fa-circle' + (i === this.state.slideIndex ? ' active' : '')}/>)
-    }
-
-    return (
-      <div className='Tutorial modal'>
-        <button onClick={(e) => this.handlePriorSlideClick()} className={'priorBtn' + (this.state.slideIndex === 0 ? ' hide' : '')}>
-          <i className='fa fa-fw fa-angle-left'/>
-        </button>
-        <button onClick={(e) => this.handleNextSlideClick()} className={'nextBtn' + (this.state.slideIndex === 4 ? ' hide' : '')}>
-          <i className='fa fa-fw fa-angle-right'/>
-        </button>
-        {content}
-        <div className='dots'>
-          {dotElements}
-        </div>
-      </div>
-    )
-  }
-
-  renderContent (index) {
-    switch (index) {
-      case 0:
-        return (<div className='slide slide0'>
-          <div className='title'>Welcome to Boost</div>
-          <div className='content'>
-            Boost is a brand new note app for software<br/>
-            Don't waste time cleaning up your data.<br/>
-            devote that time to more creative work.<br/>
-            Hack your memory.
-          </div>
-        </div>)
-      case 1:
-        let content = '## Boost is a note app for engineer.\n\n - Write with markdown\n - Stylize beautiful'
-        return (<div className='slide slide1'>
-          <div className='title'>Write with Markdown</div>
-          <div className='content'>
-            Markdown is available.<br/>
-            Your notes will be stylized beautifully and quickly.
-            <div className='markdown'>
-              <pre className='left'>{content}</pre>
-              <MarkdownPreview className='right' content={content}/>
-            </div>
-          </div>
-        </div>)
-      case 2:
-        let code = 'import shell from \'shell\'\r\nvar React = require(\'react\')\r\nvar { PropTypes } = React\r\nimport markdown from \'boost\/markdown\'\r\nvar ReactDOM = require(\'react-dom\')\r\n\r\nfunction handleAnchorClick (e) {\r\n  shell.openExternal(e.target.href)\r\n  e.preventDefault()\r\n}\r\n\r\nexport default class MarkdownPreview extends React.Component {\r\n  componentDidMount () {\r\n    this.addListener()\r\n  }\r\n\r\n  componentDidUpdate () {\r\n    this.addListener()\r\n  }\r\n\r\n  componentWillUnmount () {\r\n    this.removeListener()\r\n  }'
-        return (<div className='slide slide2'>
-          <div className='title'>Beautiful code highlighting</div>
-          <div className='content'>
-            Boost supports code syntax highlighting.<br/>
-            There are more than 100 different type of language.
-            <div className='code'>
-              <CodeEditor readOnly article={{content: code, mode: 'jsx'}}/>
-            </div>
-          </div>
-        </div>)
-      case 3:
-        return (<div className='slide slide3'>
-          <div className='title'>Easy to access with Finder</div>
-          <div className='content'>
-            The Finder helps you organize all of the files and documents.<br/>
-            There is a short-cut key [⌘ + alt + s] to open the Finder.<br/>
-            It is available to save your articles on the Clipboard<br/>
-            by selecting your file with pressing Enter key,<br/>
-            and to paste the contents of the Clipboard with [{process.platform === 'darwin' ? 'Command' : 'Control'}-V]
-
-            <img width='480' src='../resources/finder.png'/>
-          </div>
-        </div>)
-      case 4:
-        return (<div className='slide slide4'>
-          <div className='title'>Are you ready?</div>
-          <div className='content'>
-          <button onClick={(e) => this.startButtonClick(e)}>Start<br/>Boost</button>
-          </div>
-        </div>)
-      default:
-        return null
-    }
-  }
-}
-
-Tutorial.propTypes = {
-  close: PropTypes.func
-}
diff --git a/browser/styles/main/UserNavigator.styl b/browser/styles/main/UserNavigator.styl
deleted file mode 100644
index 9c3d9442..00000000
--- a/browser/styles/main/UserNavigator.styl
+++ /dev/null
@@ -1,86 +0,0 @@
-userNavigatorBgColor = #1B1C1C
-userNavigatorColor = #DDD
-userAnchorColor = #979797
-userAnchorBgColor = #BEBEBE
-userAnchorActiveColor = textColor
-userAnchorActiveBgColor = white
-
-.UserNavigator
-  noSelect()
-  background-color userNavigatorBgColor
-  absolute left top bottom
-  width 60px
-  text-align center
-  box-sizing border-box
-  ul.userList
-    position absolute
-    top 25px
-    left 0
-    right 0
-    bottom 70px
-    // overflow-y auto
-    &>li
-      a
-        display block
-        width 38px
-        height 64px
-        margin 0 auto 10px
-        text-align center
-        text-decoration none
-        color userAnchorColor
-        line-height 44px
-        font-size 1.1em
-        cursor pointer
-        transition 0.1s
-
-        img.ProfileImage
-          width 38px
-          height 38px
-          border-radius 22px
-          opacity 0.7
-        &:hover
-          img.ProfileImage
-            opacity 1
-          .userTooltip
-            opacity 1
-        &.active
-          img.ProfileImage
-            opacity 1
-        .userTooltip
-          tooltip()
-          position absolute
-          margin-top -52px
-          margin-left 44px
-        .keyLabel
-          margin-top -25px
-          font-size 0.8em
-          color userNavigatorColor
-  button.createTeamBtn
-    display block
-    margin 0 auto
-    width 30px
-    height 30px
-    border-radius 15px
-    border 2px solid darken(white, 5%)
-    color darken(white, 5%)
-    text-align center
-    background-image none
-    background-color transparent
-    box-sizing border-box
-    absolute left right
-    bottom 15px
-    font-size 22px
-    line-height 22px
-    transition 0.1s
-    .tooltip
-      tooltip()
-      margin-top -26px
-      margin-left 30px
-    &:hover, &.hover, &:focus, &.focus
-      color white
-      border-color white
-      .tooltip
-        opacity 1
-    &:active
-      background-color brandColor
-      border-color brandColor
diff --git a/browser/styles/main/modal/CreateNewFolder.styl b/browser/styles/main/modal/CreateNewFolder.styl
deleted file mode 100644
index 1d7870d2..00000000
--- a/browser/styles/main/modal/CreateNewFolder.styl
+++ /dev/null
@@ -1,91 +0,0 @@
-tabNavColor = #999999
-iptFocusBorderColor = #369DCD
-
-.CreateNewFolder.modal
-  width 600px
-  height 450px
-  .closeBtn
-    position absolute
-    top 15px
-    right 15px
-    width 33px
-    height 33px
-    font-size 18px
-    line-height 33px
-    padding 0
-    text-align center
-    background-color transparent
-    border none
-    color stripBtnColor
-    &:hover
-      color stripHoverBtnColor
-  .title
-    font-size 32px
-    text-align center
-    font-weight bold
-    margin-top 25px
-  .ipt
-    display block
-    width 330px
-    font-size 14px
-    height 44px
-    line-height 44px
-    padding 0 15px
-    border-radius 5px
-    border solid 1px borderColor
-    outline none
-    margin 75px auto 20px
-    &:focus
-      border-color iptFocusBorderColor
-  .colorSelect
-    text-align center
-    .option
-      cursor pointer
-      font-size 22px
-      height 48px
-      width 48px
-      margin 0 2px
-      border 1px solid transparent
-      border-radius 5px
-      overflow hidden
-      line-height 45px
-      text-align center
-      transition 0.1s
-      display inline-block
-      &:hover
-        border-color borderColor
-        font-size 28px
-      &.active
-        font-size 28px
-        border-color iptFocusBorderColor
-  .alert
-    color infoTextColor
-    background-color infoBackgroundColor
-    font-size 14px
-    padding 15px 15px
-    width 330px
-    border-radius 5px
-    margin 15px auto 0
-    &.error
-      color errorTextColor
-      background-color errorBackgroundColor
-  .confirmBtn
-    display block
-    position absolute
-    left 205px
-    bottom 44px
-    width 240px
-    font-size 24px
-    height 44px
-    line-height 24px
-    font-weight bold
-    background-color brandColor
-    color white
-    border none
-    border-radius 5px
-    margin 0 auto
-    transition 0.1s
-    &:hover
-      transform scale(1.1)
-    &:disabled
-      opacity 0.7
diff --git a/browser/styles/main/modal/CreateNewTeam.styl b/browser/styles/main/modal/CreateNewTeam.styl
deleted file mode 100644
index 20dc353e..00000000
--- a/browser/styles/main/modal/CreateNewTeam.styl
+++ /dev/null
@@ -1,199 +0,0 @@
-tabNavColor = #999999
-iptFocusBorderColor = #369DCD
-stripHoverBtnColor = #333
-stripBtnColor = lighten(stripHoverBtnColor, 35%)
-
-.CreateNewTeam.modal
-  width 600px
-  height 450px
-  .closeBtn
-    position absolute
-    top 15px
-    right 15px
-    width 33px
-    height 33px
-    font-size 18px
-    line-height 33px
-    padding 0
-    text-align center
-    background-color transparent
-    border none
-    color stripBtnColor
-    &:hover
-      color stripHoverBtnColor
-  .title
-    font-size 32px
-    text-align center
-    font-weight bold
-    margin-top 25px
-  .ipt
-    display block
-    width 330px
-    font-size 14px
-    height 44px
-    line-height 44px
-    padding 0 15px
-    border-radius 5px
-    border solid 1px borderColor
-    outline none
-    &:focus
-      border-color iptFocusBorderColor
-  .alert
-    padding 0 15px
-    height 44px
-    line-height 44px
-    width 300px
-    margin 0 auto
-    border-radius 5px
-    color infoTextColor
-    background-color infoBackgroundColor
-    white-space nowrap
-    overflow-x auto
-    &.error
-      color errorTextColor
-      background-color errorBackgroundColor
-  .confirmBtn
-    display block
-    position absolute
-    left 180px
-    bottom 44px
-    width 240px
-    font-size 24px
-    height 44px
-    line-height 24px
-    font-weight bold
-    background-color brandColor
-    color white
-    border none
-    border-radius 5px
-    margin 0 auto
-    transition 0.1s
-    &:hover
-      transform scale(1.1)
-    &:disabled
-      opacity 0.7
-  .tabNav
-    absolute left right
-    bottom 15px
-    height 33px
-    line-height 33px
-    width 150px
-    text-align center
-    font-size 12px
-    color tabNavColor
-    margin 0 auto
-    transition 0.1s
-    i.active
-      color brandColor
-  .createTab
-    .ipt
-      margin 105px auto 15px
-  .selectTab
-    .memberForm
-      display block
-      margin 25px auto 15px
-      width 330px
-      clearfix()
-      padding 0
-      font-size 14px
-      height 44px
-      line-height 44px
-      outline none
-      .Select.memberName
-        display block
-        margin 0
-        float left
-        width 280px
-        height 44px
-        font-size 14px
-        border none
-        line-height 44px
-        background-color transparent
-        outline none
-        &.is-focus
-          .Select-control
-            border-color iptFocusBorderColor
-        .Select-control
-          height 44px
-          line-height 44px
-          padding 0 0 0 15px
-          border-radius 5px 0 0 5px
-          border 1px solid borderColor
-          border-right none
-          .Select-placeholder
-            padding 0 0 0 15px
-          .Seleect-arrow
-            top 21px
-          .Select-clear
-            padding 0 10px
-        .Select-noresults, .Select-option
-          line-height 44px
-          padding 0 0 0 15px
-
-        &:focus, &.focus
-          border-color iptFocusBorderColor
-      button
-        font-weight 400
-        height 44px
-        cursor pointer
-        margin 0
-        padding 0
-        width 50px
-        float right
-        border none
-        background-color brandColor
-        border-top-right-radius 5px
-        border-bottom-right-radius 5px
-        color white
-        font-size 14px
-    .memberList
-      width 480px
-      margin 0 auto
-      height 190px
-      overflow scroll
-      border-bottom 1px solid borderColor
-      &>li
-        border-bottom 1px solid borderColor
-        height 44px
-        padding 0 25px
-        clearfix()
-        &:nth-last-child(1)
-          border-bottom-color transparent
-        .userPhoto
-          width 30px
-          height 30px
-          float left
-          margin-top 7px
-          margin-right 15px
-          border-radius 15px
-        .userInfo
-          float left
-          margin-top 7px
-          .userName
-            font-size 16px
-            margin-bottom 2px
-          .userEmail
-            font-size 12px
-        .userControl
-          float right
-          .userRole
-            float left
-            height 30px
-            background-color transparent
-            border 1px solid transparent
-            margin-top 7px
-            margin-right 35px
-            outline none
-            cursor pointer
-            &:hover
-              border-color borderColor
-            &:focus
-              border-color iptFocusBorderColor
-          button
-            border none
-            height 30px
-            margin-top 7px
-            background-color transparent
-            color stripBtnColor
-            &:hover
-              color stripHoverBtnColor
diff --git a/browser/styles/main/modal/Tutorial.styl b/browser/styles/main/modal/Tutorial.styl
deleted file mode 100644
index f1c48671..00000000
--- a/browser/styles/main/modal/Tutorial.styl
+++ /dev/null
@@ -1,132 +0,0 @@
-
-slideBgColor0 = #2BAC8F
-slideBgColor1 = #F68F92
-slideBgColor2 = #D6AD56
-slideBgColor3 = #26969B
-slideBgColor4 = #00B493
-
-.Tutorial.modal
-  background-color slideBgColor0
-  color white !important
-  width 720px
-  height 480px
-  margin-top 75px
-  border-radius 5px
-  overflow hidden
-
-  .priorBtn, .nextBtn
-    font-size 72px
-    position absolute
-    background-color transparent
-    color transparentify(white, 50%)
-    transition 0.1s
-    border none
-    line-height 72px
-    padding 0
-    width 93px
-    height 72px
-    z-index 2
-    top 189px
-    &:hover
-      color white
-    &.hide
-      opacity 0
-  .priorBtn
-    left 15px
-  .nextBtn
-    right 15px
-  .title
-    text-align center
-    font-size 54px
-    margin 40px 0
-  .content
-    text-align center
-    font-size 22px
-    line-height 1.8
-  .dots
-    position absolute
-    left 0
-    right 0
-    bottom 25px
-    margin 0 auto
-    color gray
-    text-align center
-    z-index 2
-    &>i
-      transition 0.3s
-      &.active
-        color white
-  .slide
-    absolute top bottom left right
-    z-index 1
-  .slide0
-    background-color slideBgColor0
-    .content
-      margin-top 100px
-  .slide1
-    background-color slideBgColor1
-    .content
-      .markdown
-        background-color white
-        color textColor
-        width 480px
-        height 140px
-        margin 45px auto 0
-        clearfix()
-        text-align left
-        border-radius 5px
-        overflow hidden
-        .left
-          float left
-          width 240px
-          height 140px
-          box-sizing border-box
-          font-size 0.5em
-          padding 30px
-          border-right 1px solid borderColor
-        .right
-          width 240px
-          height 140px
-          float right
-          box-sizing border-box
-          padding: 28px 0 0 10px
-          font-size 0.45em
-          marked()
-          ul
-            padding-left 20px
-  .slide2
-    background-color slideBgColor2
-    .code
-      border-radius 5px
-      overflow hidden
-      text-align left
-      width 480px
-      heght 140px
-      margin 45px auto 0
-      font-size 14px
-      .ace_editor
-        height 140px
-  .slide3
-    background-color slideBgColor3
-    .title
-      margin-bottom 15px
-    .content
-      font-size 18px
-      &>img
-        margin-top 25px
-  .slide4
-    background-color slideBgColor4
-    .content
-      &>button
-        background-color white
-        color brandColor
-        font-size 60px
-        width 250px
-        height 250px
-        border-radius 125px
-        border none
-        transition 0.1s
-        &:hover
-          transform scale(1.2)
-
-
diff --git a/browser/styles/shared/modal.styl b/browser/styles/shared/modal.styl
deleted file mode 100644
index 38377145..00000000
--- a/browser/styles/shared/modal.styl
+++ /dev/null
@@ -1,390 +0,0 @@
-// .ModalBase
-//   fixed top left bottom right
-//   z-index modalZIndex
-//   &.hide
-//     display none
-//   .modalBack
-//     absolute top left bottom right
-//     background-color modalBackColor
-//     z-index modalZIndex + 1
-//   .modal
-//     position relative
-//     width 650px
-//     margin 50px auto 0
-//     z-index modalZIndex + 2
-//     box-shadow popupShadow
-//     background-color white
-//     border-radius 10px
-//     padding 15px
-//     .modal-header
-//       border-bottom solid 1px borderColor
-//       margin-bottom 10px
-//       h1
-//         padding 10px 0 15px
-//         font-size 1.5em
-//     .modal-body
-//       p
-//         margin-bottom 10px
-//     .modal-footer
-//       clearfix()
-//       border-top solid 1px borderColor
-//       padding-top 10px
-//       .modal-control
-//         float right
-//
-//   .sideNavModal
-//     height 500px
-//     .leftPane
-//       absolute top bottom left
-//       width 175px
-//       padding 20px
-//       border-right solid 1px borderColor
-//       .modalLabel
-//         font-size 1.5em
-//         margin-top 25px
-//         margin-bottom 35px
-//         color brandColor
-//       .tabList button
-//         btnStripDefault()
-//         display block
-//         width 100%
-//         font-size 1.1em
-//         padding 10px 5px
-//         margin-bottom 15px
-//         text-align left
-//     .rightPane
-//       absolute top bottom right
-//       left 175px
-//       padding 15px
-//       overflow-y auto
-//     .tab
-//       padding-top 45px
-//       .formField
-//         position relative
-//         clearfix()
-//         margin-bottom 15px
-//         label
-//           width 30%
-//           display block
-//           line-height 33px
-//           float left
-//         input
-//           width 70%
-//           display block
-//           borderInput()
-//           height 33px
-//           font-size 1em
-//           border-radius 5px
-//           float left
-//       .formRadioField
-//         margin-bottom 15px
-//         input
-//           margin-left 25px
-//       .formConfirm
-//         position relative
-//         clearfix()
-//         margin-bottom 15px
-//         button
-//           float right
-//           btnDefault()
-//           padding 10px 15px
-//           border-radius 5px
-//           font-size 1em
-//           margin-left 5px
-//         .alertInfo, .alertSuccess, .alertError
-//           float right
-//           padding 12px 10px
-//           border-radius 5px
-//           width 320px
-//           font-size 1em
-//           overflow-x hidden
-//           white-space nowrap
-//           transition 0.1s
-//           &.hide
-//             width 0
-//             padding 12px 0
-//         .alertInfo
-//           alertInfo()
-//         .alertSuccess
-//           alertSuccess()
-//         .alertError
-//           alertError()
-//   .PreferencesModal
-//     .settingsTab
-//       .categoryLabel
-//         font-size 1.5em
-//         margin-bottom 25px
-//       .example
-//         marked()
-//     .aboutTab
-//       padding-top 30px
-//       .about1
-//         margin-bottom 25px
-//         .logo
-//           display block
-//           margin 0 auto
-//         .appInfo
-//           font-size 1.5em
-//           text-align center
-//       .about2
-//         width 200px
-//         margin 0 auto
-//         .externalLabel
-//           font-size 1.2em
-//           margin-bottom 15px
-//         .externalList
-//           li
-//             margin-bottom 15px
-//   .PlanetSettingModal
-//     .planetDeleteTab
-//       padding-top 65px
-//       p
-//         margin-bottom 25px
-//         strong
-//           color brandColor
-//           font-size 1.1em
-//       input
-//         borderInput()
-//         margin-right 5px
-//         height 33px
-//         font-size 1em
-//         border-radius 10px
-//       .formConfirm
-//         position relative
-//         clearfix()
-//         margin-bottom 15px
-//         button
-//           float right
-//           btnDefault()
-//           padding 10px 15px
-//           border-radius 5px
-//           font-size 1em
-//           margin-left 5px
-//         .alertInfo, .alertSuccess, .alertError
-//           float right
-//           padding 12px 10px
-//           border-radius 5px
-//           width 320px
-//           font-size 1em
-//           overflow-x hidden
-//           white-space nowrap
-//           transition 0.1s
-//           &.hide
-//             width 0
-//             padding 12px 0
-//         .alertInfo
-//           alertInfo()
-//         .alertSuccess
-//           alertSuccess()
-//         .alertError
-//           alertError()
-//   .TeamSettingsModal
-//     .membersTab
-//       .memberTable
-//         width 100%
-//         margin-bottom 25px
-//         th
-//           border-bottom solid 2px borderColor
-//         td
-//           border-bottom solid 1px borderColor
-//           height 38px
-//           button
-//             btnDefault()
-//             padding 5px
-//             border-radius 5px
-//           .roleSelect
-//             height 33px
-//             border solid 1px borderColor
-//             background-color backgroundColor
-//         th, td
-//           padding 5px 0
-//       .addMemberForm
-//         .formLabel
-//           margin-bottom 5px
-//         .formGroup
-//           clearfix()
-//           .userNameSelect
-//             display block
-//             width 200px
-//             margin-right 5px
-//             float left
-//           .roleSelect
-//             display block
-//             height 33px
-//             border solid 1px borderColor
-//             background-color backgroundColor
-//             float left
-//             margin-right 5px
-//           .confirmButton
-//             display block
-//             height 33px
-//             btnDefault()
-//             border-radius 5px
-//             float left
-//
-//   .LaunchModal
-//     .modal-tab
-//       text-align center
-//       margin-bottom 10px
-//       .btn-primary, .btn-default
-//         margin 0
-//         border-radius 0
-//         border-width 1px
-//         width 150px
-//         border-radius 0
-//         &:nth-child(1)
-//           border-right solid 1px borderColor
-//           border-top-left-radius 5px
-//           border-bottom-left-radius 5px
-//         &:nth-child(2)
-//           border-left none
-//           border-top-right-radius 5px
-//           border-bottom-right-radius 5px
-//   .Select
-//     .Select-control
-//       border-color borderColor
-//     &.is-focused
-//       .Select-control
-//         border-color brandBorderColor
-//     .Select-menu-outer
-//       border-color borderColor
-//   .ace_editor
-//     border-radius 5px
-//     border solid 1px borderColor
-//   .CodeForm, .NoteForm
-//     .form-group
-//       margin-bottom 10px
-//   .CodeForm
-//     textarea.codeDescription
-//       height 75px
-//       font-size 0.9em
-//       margin-bottom 10px
-//     .modeSelect.Select
-//       display inline-block
-//       width 200px
-//       height 37px
-//       .Select-control
-//         height 37px
-//     .ace_editor
-//       height 258px
-//   .NoteForm
-//     .ace_editor
-//       height 358px
-//     .previewMode
-//       absolute top right
-//       font-size 0.8em
-//       line-height 24px
-//       padding 5 15px
-//       background-color transparentify(invBackgroundColor, 0.2)
-//       color invTextColor
-//       border-top-right-radius 5px
-//   .marked
-//     height 360px
-//     overflow-x hidden
-//     overflow-y auto
-//     box-sizing border-box
-//     padding 5px
-//     border solid 1px borderColor
-//     border-radius 5px
-//     marked()
-//
-//
-//   .PlanetCreateModal.modal, .TeamCreateModal.modal, .AddMemberModal.modal
-//     padding 60px 0
-//     .nameInput
-//       width 80%
-//       font-size 1.3em
-//       margin 25px auto 15px
-//       text-align center
-//     .userNameSelect
-//       width 80%
-//       font-size 1.3em
-//       margin 35px auto
-//       text-align center
-//     .formField
-//       text-align center
-//       margin 0 auto 25px
-//       select
-//         display inline-block
-//         width 150px
-//         height 33px
-//         border solid 1px borderColor
-//         background-color white
-//         padding 0 10px
-//         margin 0 15px
-//     .submitButton
-//       display block
-//       margin 0 auto
-//       box-sizing border-box
-//       width 55px
-//       height 55px
-//       circle()
-//       btnPrimary()
-//     .errorAlert
-//       alertError()
-//       padding 12px 10px
-//       border-radius 5px
-//       text-align center
-//       display block
-//       width 360px
-//       margin 0 auto 15px
-//
-//   .ContactModal
-//     padding 15px
-//     .contactForm
-//       .formField
-//         width 100%
-//         margin-bottom 10px
-//         input, textarea
-//           display block
-//           width 100%
-//           borderInput()
-//           border-radius 5px
-//         input
-//           height 33px
-//           font-size 1em
-//         textarea
-//           height 175px
-//           font-size 1em
-//       .formControl
-//         clearfix()
-//         button
-//           float right
-//           btnDefault()
-//           height 44px
-//           padding 0 15px
-//           border-radius 5px
-//           margin-left 5px
-//           font-size 1em
-//         button.sendButton
-//           btnPrimary()
-//     .confirmation
-//       .confirmationMessage
-//         padding 35px 0
-//         text-align center
-//         font-size 1.1em
-//       .doneButton
-//         btnDefault()
-//         height 44px
-//         padding 0 35px
-//         border-radius 5px
-//         display block
-//         margin 0 auto 25px
-//
-//   .LogoutModal
-//     padding 65px 0 45px
-//     width 350px
-//     .messageLabel
-//       text-align center
-//       font-size 1.1em
-//       margin-bottom 35px
-//     .formControl
-//       text-align center
-//       button
-//         btnDefault()
-//         border-radius 5px
-//         height 44px
-//         margin 15px 5px
-//         padding 0 15px
-//       button.logoutButton
-//         btnPrimary()

From 70244f79ba96da8b0c9051602c46ea4ff7c0383c Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sun, 8 May 2016 02:49:19 +0900
Subject: [PATCH 023/109] rename, recolor, remove folder

---
 browser/lib/Repository.js                     |   4 +-
 browser/lib/consts.js                         |  10 +
 browser/main/HomePage/SideNav/FolderItem.js   | 212 +++++++++
 browser/main/HomePage/SideNav/FolderItem.styl |  56 +++
 .../HomePage/SideNav/RepositorySection.js     |  20 +-
 .../HomePage/SideNav/RepositorySection.styl   |  43 --
 browser/main/HomePage/SideNav/SideNav.styl    |   4 +-
 browser/main/HomePage/SideNav/index.js        |   2 +-
 browser/main/store.js                         |  38 ++
 browser/styles/main/modal/Preferences.styl    | 442 ------------------
 10 files changed, 327 insertions(+), 504 deletions(-)
 create mode 100644 browser/main/HomePage/SideNav/FolderItem.js
 create mode 100644 browser/main/HomePage/SideNav/FolderItem.styl

diff --git a/browser/lib/Repository.js b/browser/lib/Repository.js
index 3a72ec0c..9c583b4b 100644
--- a/browser/lib/Repository.js
+++ b/browser/lib/Repository.js
@@ -362,7 +362,7 @@ class Repository {
     if (_.isString(override.name) && override.name.trim().length > 0) targetFolder.name = override.name.trim()
     if (_.isString(override.color)) targetFolder.color = override.color
 
-    return this.updateJSON(this.json)
+    return this.saveJSON(this.json)
       .then(() => targetFolder)
   }
 
@@ -380,7 +380,7 @@ class Repository {
       targetFolder = folders.splice(targetIndex, 1)[0]
     }
 
-    return this.updateJSON(null)
+    return this.saveJSON(null)
       .then(() => targetFolder)
   }
 
diff --git a/browser/lib/consts.js b/browser/lib/consts.js
index de75eaf1..400ffb78 100644
--- a/browser/lib/consts.js
+++ b/browser/lib/consts.js
@@ -8,6 +8,16 @@ const consts = {
     '#1FAD85',
     '#E10051',
     '#B013A4'
+  ],
+  FOLDER_COLOR_NAMES: [
+    'Cerulean Blue',
+    'Dodger Blue',
+    'Pizazz',
+    'Confetti',
+    'Emerald',
+    'Mountain Meadow',
+    'Razzmatazz',
+    'Violet Eggplant'
   ]
 }
 
diff --git a/browser/main/HomePage/SideNav/FolderItem.js b/browser/main/HomePage/SideNav/FolderItem.js
new file mode 100644
index 00000000..c9164225
--- /dev/null
+++ b/browser/main/HomePage/SideNav/FolderItem.js
@@ -0,0 +1,212 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './FolderItem.styl'
+import store from 'browser/main/store'
+import Repository from 'browser/lib/Repository'
+import consts from 'browser/lib/consts'
+
+const electron = require('electron')
+const { remote } = electron
+const { Menu, MenuItem } = remote
+
+class FolderItem extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isEditing: false,
+      isUpdating: false,
+      name: props.folder.name
+    }
+  }
+
+  handleColorButtonClick (color) {
+    return (e) => {
+      let { repository, folder } = this.props
+      this.setState({
+        isUpdating: true
+      }, () => {
+        Repository.find(repository.key)
+          .then((repository) => {
+            console.log(repository)
+            return repository.updateFolder(folder.key, {color: color})
+          })
+          .then((folder) => {
+            store.dispatch({
+              type: 'EDIT_FOLDER',
+              key: repository.key,
+              folder: folder
+            })
+            this.setState({
+              isEditing: false,
+              isUpdating: false
+            })
+          })
+          .catch((err) => {
+            console.error(err)
+            this.setState({
+              isEditing: false,
+              isUpdating: false
+            })
+          })
+      })
+    }
+  }
+
+  handleContextButtonClick (e) {
+    if (this.state.isUpdating) {
+      return
+    }
+
+    var menu = new Menu()
+    menu.append(new MenuItem({
+      label: 'Rename',
+      click: () => this.handleRenameButtonClick(e)
+    }))
+    var colorMenu = new Menu()
+    consts.FOLDER_COLORS.forEach((color, index) => {
+      colorMenu.append(new MenuItem({
+        label: consts.FOLDER_COLOR_NAMES[index],
+        click: (e) => this.handleColorButtonClick(color)(e)
+      }))
+    })
+    menu.append(new MenuItem({
+      label: 'Recolor',
+      submenu: colorMenu
+    }))
+    menu.append(new MenuItem({ type: 'separator' }))
+    menu.append(new MenuItem({
+      label: 'Delete',
+      click: () => this.handleDeleteButtonClick(e)
+    }))
+
+    menu.popup(remote.getCurrentWindow())
+  }
+
+  handleRenameButtonClick (e) {
+    this.setState({
+      isEditing: true,
+      name: this.props.folder.name
+    }, () => {
+      this.refs.nameInput.focus()
+    })
+  }
+
+  handleDeleteButtonClick (e) {
+    let { repository, folder } = this.props
+
+    this.setState({
+      isUpdating: true
+    }, () => {
+      Repository.find(repository.key)
+        .then((repository) => {
+          console.log(repository)
+          return repository.removeFolder(folder.key)
+        })
+        .then(() => {
+          store.dispatch({
+            type: 'REMOVE_FOLDER',
+            repository: repository.key,
+            folder: folder.key
+          })
+        })
+        .catch((err) => {
+          console.error(err)
+          this.setState({
+            isUpdating: false
+          })
+        })
+    })
+  }
+
+  renderIdle () {
+    let { folder } = this.props
+
+    return (
+      <div className='FolderItem'
+        styleName='root'>
+        <div styleName='label'>
+          <i className='fa fa-cube' style={{color: folder.color}}/> {folder.name}
+        </div>
+        <div styleName='control'>
+          <button styleName='control-button'
+            onClick={(e) => this.handleContextButtonClick(e)}
+          >
+            <i className='fa fa-ellipsis-v'/>
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  handleNameInputChange (e) {
+    this.setState({
+      name: e.target.value
+    })
+  }
+
+  handleNameInputBlur (e) {
+    let { folder, repository } = this.props
+
+    this.setState({
+      isUpdating: true
+    }, () => {
+      Repository.find(repository.key)
+        .then((repository) => {
+          console.log(repository)
+          return repository.updateFolder(folder.key, {name: this.state.name})
+        })
+        .then((folder) => {
+          store.dispatch({
+            type: 'EDIT_FOLDER',
+            key: repository.key,
+            folder: folder
+          })
+          this.setState({
+            isEditing: false,
+            isUpdating: false
+          })
+        })
+        .catch((err) => {
+          console.error(err)
+          this.setState({
+            isEditing: false,
+            isUpdating: false
+          })
+        })
+    })
+  }
+
+  renderEdit () {
+    return (
+      <div className='FolderItem'
+        styleName='root'
+        onContextMenu={(e) => this.handleContextButtonClick(e)}
+      >
+        <input styleName='nameInput'
+          ref='nameInput'
+          value={this.state.name}
+          onChange={(e) => this.handleNameInputChange(e)}
+          onBlur={(e) => this.handleNameInputBlur(e)}
+          disabled={this.state.isUpdating}
+        />
+      </div>
+    )
+  }
+
+  render () {
+    return this.state.isEditing ? this.renderEdit() : this.renderIdle()
+  }
+}
+
+FolderItem.propTypes = {
+  folder: PropTypes.shape({
+    name: PropTypes.string,
+    color: PropTypes.string
+  }),
+  repository: PropTypes.shape({
+    key: PropTypes.string
+  })
+}
+
+export default CSSModules(FolderItem, styles)
diff --git a/browser/main/HomePage/SideNav/FolderItem.styl b/browser/main/HomePage/SideNav/FolderItem.styl
new file mode 100644
index 00000000..817b975e
--- /dev/null
+++ b/browser/main/HomePage/SideNav/FolderItem.styl
@@ -0,0 +1,56 @@
+.root
+  height 33px
+  width 100%
+  position relative
+  cursor pointer
+  &:hover
+    background-color alpha(white, 0.1)
+    .control
+      opacity 1
+
+.label
+  position absolute
+  left 0
+  top 0
+  bottom 0
+  right 48px
+  padding-left 20px
+  line-height 33px
+  color white
+
+.control
+  opacity 0
+  position absolute
+  top 0
+  bottom 0
+  right 5px
+  width 24px
+
+.control-button
+  width 24px
+  height 24px
+  margin-top 4.5px
+  border none
+  border-radius 5px
+  background-color transparent
+  color $nav-inactive-color
+  &:hover
+    color white
+    background-color alpha(white, 0.1)
+  &:active
+    color white
+    background-color $brand-color
+
+.nameInput
+  absolute top bottom
+  left 10px
+  right 10px
+  height 33px
+  padding 0 10px
+  border-radius 5px
+  border solid 1px $nav-border-color
+  outline none
+  &:focus
+    border-color $focus-border-color
+  &:disabled
+    background-color $disabled-input-background
diff --git a/browser/main/HomePage/SideNav/RepositorySection.js b/browser/main/HomePage/SideNav/RepositorySection.js
index 6ace6531..294e2a99 100644
--- a/browser/main/HomePage/SideNav/RepositorySection.js
+++ b/browser/main/HomePage/SideNav/RepositorySection.js
@@ -2,11 +2,11 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './RepositorySection.styl'
 import Repository from 'browser/lib/Repository'
+import FolderItem from './FolderItem'
 
 const electron = require('electron')
 const { remote } = electron
-const Menu = remote.Menu
-const MenuItem = remote.MenuItem
+const { Menu, MenuItem } = remote
 
 class RepositorySection extends React.Component {
   constructor (props) {
@@ -124,19 +124,11 @@ class RepositorySection extends React.Component {
 
     let folderElements = repository.folders.map((folder) => {
       return (
-        <div
+        <FolderItem
           key={folder.key}
-          styleName='folder'
-        >
-          <div styleName='folder-label'>
-            <i className='fa fa-cube' style={{color: folder.color}}/> {folder.name}
-          </div>
-          <div styleName='folder-control'>
-            <button styleName='folder-control-button'>
-              <i className='fa fa-ellipsis-v'/>
-            </button>
-          </div>
-        </div>
+          folder={folder}
+          repository={repository}
+        />
       )
     })
 
diff --git a/browser/main/HomePage/SideNav/RepositorySection.styl b/browser/main/HomePage/SideNav/RepositorySection.styl
index 9bc95ca4..8230fc3e 100644
--- a/browser/main/HomePage/SideNav/RepositorySection.styl
+++ b/browser/main/HomePage/SideNav/RepositorySection.styl
@@ -50,49 +50,6 @@
   @extend .header-control-button
   opacity 1
 
-.folder
-  height 33px
-  width 100%
-  position relative
-  cursor pointer
-  &:hover
-    background-color alpha(white, 0.1)
-    .folder-control
-      opacity 1
-
-.folder-label
-  position absolute
-  left 0
-  top 0
-  bottom 0
-  right 48px
-  padding-left 20px
-  line-height 33px
-  color white
-
-.folder-control
-  opacity 0
-  position absolute
-  top 0
-  bottom 0
-  right 5px
-  width 24px
-
-.folder-control-button
-  width 24px
-  height 24px
-  margin-top 4.5px
-  border none
-  border-radius 5px
-  background-color transparent
-  color $nav-inactive-color
-  &:hover
-    color white
-    background-color alpha(white, 0.1)
-  &:active
-    color white
-    background-color $brand-color
-
 .newFolderForm
   width 100%
   padding 0 15px
diff --git a/browser/main/HomePage/SideNav/SideNav.styl b/browser/main/HomePage/SideNav/SideNav.styl
index 1b67b6e8..65bb6b37 100644
--- a/browser/main/HomePage/SideNav/SideNav.styl
+++ b/browser/main/HomePage/SideNav/SideNav.styl
@@ -47,8 +47,8 @@
 
 .repositoryList-empty
   padding 0 10px
-  height 44px
-  line-height 44px
+  margin-top 15px
+  line-height 24px
   color $nav-inactive-color
 
 .navToggle
diff --git a/browser/main/HomePage/SideNav/index.js b/browser/main/HomePage/SideNav/index.js
index 171b1f0b..4d76847c 100644
--- a/browser/main/HomePage/SideNav/index.js
+++ b/browser/main/HomePage/SideNav/index.js
@@ -72,7 +72,7 @@ class SideNav extends React.Component {
 
         <div styleName='repositoryList'>
           {repositories.length > 0 ? repositorieElements : (
-            <div styleName='repositoryList-empty'>No repository mount</div>
+            <div styleName='repositoryList-empty'>No repository mount.</div>
           )}
         </div>
 
diff --git a/browser/main/store.js b/browser/main/store.js
index adabd37a..109d2dfd 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -65,6 +65,44 @@ function repositories (state = initialRepositories, action) {
           targetRepo.folders.splice(targetFolderIndex, 1, action.folder)
         }
 
+        return repos
+      }
+    case 'EDIT_FOLDER':
+      {
+        let repos = state.slice()
+        let targetRepo = _.find(repos, {key: action.key})
+
+        if (targetRepo == null) return state
+
+        let targetFolderIndex = _.findIndex(targetRepo.folders, {key: action.folder.key})
+        if (targetFolderIndex < 0) {
+          targetRepo.folders.push(action.folder)
+        } else {
+          targetRepo.folders.splice(targetFolderIndex, 1, action.folder)
+        }
+
+        return repos
+      }
+    /**
+     *  Remove a folder from the repository
+     * {
+     *  type: 'REMOVE_FOLDER',
+     *  repository: repositoryKey,
+     *  folder: folderKey
+     * }
+     */
+    case 'REMOVE_FOLDER':
+      {
+        let repos = state.slice()
+        let targetRepo = _.find(repos, {key: action.repository})
+
+        if (targetRepo == null) return state
+
+        let targetFolderIndex = _.findIndex(targetRepo.folders, {key: action.folder})
+        if (targetFolderIndex > -1) {
+          targetRepo.folders.splice(targetFolderIndex, 1)
+        }
+
         return repos
       }
   }
diff --git a/browser/styles/main/modal/Preferences.styl b/browser/styles/main/modal/Preferences.styl
index 0bb32d97..9239f571 100644
--- a/browser/styles/main/modal/Preferences.styl
+++ b/browser/styles/main/modal/Preferences.styl
@@ -31,8 +31,6 @@ iptFocusBorderColor = #369DCD
       margin-right 15px
       border none
       border-radius 5px
-      &:hover
-        background-color lighten(closeBtnBgColor, 10%)
   &>.nav
     absolute left bottom
     top 50px
@@ -158,8 +156,6 @@ iptFocusBorderColor = #369DCD
           height 33px
           padding 0 15px
           font-size 14px
-          &:hover
-            background-color lighten(brandColor, 10%)
         .alert
           float right
           width 250px
@@ -188,441 +184,3 @@ iptFocusBorderColor = #369DCD
     &.AppSettingTab
       .description
         marked()
-    &.TeamSettingTab
-      .header
-        border-bottom 1px solid borderColor
-        padding 10px
-        font-size 18px
-        color brandColor
-        line-height 33px
-        .teamSelect
-          border 1px solid borderColor
-          height 33px
-          width 200px
-          margin 0 10px
-          outline none
-          font-size 14px
-          &:focus
-            border-color iptFocusBorderColor
-      .teamDeleteConfirm
-
-        label
-          line-height 33px
-          font-size 14px
-      .teamDelete
-        label
-          line-height 33px
-          font-size 18px
-          color brandColor
-      .teamDelete, .teamDeleteConfirm
-        padding 15px 20px 15px 15px
-        button
-          background-color white
-          height 33px
-          font-size 14px
-          padding 0 15px
-          border 1px solid borderColor
-          float right
-          margin 0 5px
-          border-radius 5px
-          &:hover
-            background-color darken(white, 10%)
-        button.deleteBtn
-          background-color brandColor
-          border none
-          color white
-          &:hover
-            background-color lighten(brandColor, 10%)
-    &.MemberSettingTab
-      &>.header
-        border-bottom 1px solid borderColor
-        padding 10px
-        font-size 18px
-        color brandColor
-        line-height 33px
-        .teamSelect
-          border 1px solid borderColor
-          height 33px
-          width 200px
-          margin 0 10px
-          outline none
-          font-size 14px
-          &:focus
-            border-color iptFocusBorderColor
-      .membersTableSection
-        .addMember
-          clearfix()
-          padding 10px
-          .addMemberLabel
-            font-size 14px
-            line-height 33px
-            float left
-          .addMemberControl
-            width 330px
-            float left
-            margin-left 25px
-            .Select
-              display block
-              margin 0
-              float left
-              width 280px
-              height 33px
-              font-size 14px
-              border none
-              line-height 33px
-              background-color transparent
-              outline none
-              &.is-focus
-                .Select-control
-                  border-color iptFocusBorderColor
-              .Select-control
-                height 33px
-                line-height 33px
-                padding 0 0 0 15px
-                border-radius 5px 0 0 5px
-                border 1px solid borderColor
-                border-right none
-                .Select-placeholder
-                  padding 0 0 0 15px
-                .Seleect-arrow
-                  top 21px
-                .Select-clear
-                  padding 0 10px
-              .Select-noresults, .Select-option
-                line-height 33px
-                padding 0 0 0 15px
-            button
-              font-weight 400
-              height 33px
-              cursor pointer
-              margin 0
-              padding 0
-              width 50px
-              float right
-              border none
-              background-color brandColor
-              border-top-right-radius 5px
-              border-bottom-right-radius 5px
-              color white
-              font-size 14px
-        .memberList
-          &>.header
-            clearfix()
-            &>.userName
-              float left
-            &>.role
-              float left
-            &>.control
-              float right
-          &>li
-            &.edit
-              .colDescription
-                font-size 14px
-                line-height 33px
-                padding-left 15px
-                float left
-                strong
-                  font-size 16px
-                  color brandColor
-              .colDeleteConfirm
-                float right
-                margin-right 15px
-                button
-                  border none
-                  height 30px
-                  width 60px
-                  margin-top 1.5px
-                  font-size 14px
-                  background-color transparent
-                  color stripBtnColor
-                  &:hover
-                    color stripHoverBtnColor
-                  &:disabled
-                    color lighten(stripBtnColor, 10%)
-                    cursor not-allowed
-                  &.primary
-                   color brandColor
-                   &:hover
-                    color lighten(brandColor, 10%)
-
-            border-bottom 1px solid borderColor
-            height 44px
-            padding 0 25px
-            width 420px
-            margin 0 auto
-            clearfix()
-            &:nth-last-child(1)
-              border-bottom-color transparent
-            .colUserName
-              float left
-              width 250px
-              clearfix()
-              .userPhoto
-                width 30px
-                height 30px
-                float left
-                margin-top 7px
-                margin-right 15px
-                border-radius 15px
-              .userInfo
-                float left
-                margin-top 7px
-                width 205px
-                .userName
-                  font-size 16px
-                  margin-bottom 2px
-                  overflow ellipsis
-                .userEmail
-                  font-size 12px
-                  overflow ellipsis
-            .colRole
-              float left
-              width 75px
-              .userRole
-                height 30px
-                background-color transparent
-                border 1px solid transparent
-                margin-top 7px
-                margin-right 35px
-                outline none
-                cursor pointer
-                &:hover
-                  border-color borderColor
-                &:focus
-                  border-color iptFocusBorderColor
-                &:disabled
-                  border-color transparent
-                  cursor not-allowed
-            .colDelete
-              width 45px
-              float right
-              text-align center
-              button.deleteButton
-                border none
-                height 30px
-                width 30px
-                margin-top 7px
-                background-color transparent
-                color stripBtnColor
-                &:hover
-                  color stripHoverBtnColor
-                &:disabled
-                  color lighten(stripBtnColor, 10%)
-                  cursor not-allowed
-            &.header
-              .colRole, .colDelete
-                text-align center
-              .colUserName, .colRole, .colDelete
-                line-height 44px
-    &.FolderSettingTab
-      &>.header
-        border-bottom 1px solid borderColor
-        padding 10px
-        font-size 18px
-        color brandColor
-        line-height 33px
-        .teamSelect
-          border 1px solid borderColor
-          height 33px
-          width 200px
-          margin 0 10px
-          outline none
-          font-size 14px
-          &:focus
-            border-color iptFocusBorderColor
-      .section
-        .folderTable
-          width 420px
-          margin 15px auto
-          &>div
-            border-bottom 1px solid borderColor
-            clearfix()
-            height 43px
-            line-height 33px
-            padding 5px 0
-            &:last-child
-              border-color transparent
-            .folderColor
-              float left
-              margin-left 10px
-              text-align center
-              width 44px
-            .folderName
-              float left
-              width 175px
-              overflow ellipsis
-            .folderControl
-              float right
-              width 125px
-              text-align center
-            &.folderHeader
-              .folderName
-                padding-left 25px
-            &.newFolder
-              .alert
-                display block
-                color infoTextColor
-                background-color infoBackgroundColor
-                font-size 14px
-                padding 15px 15px
-                width 330px
-                border-radius 5px
-                margin 0 auto
-                &.error
-                  color errorTextColor
-                  background-color errorBackgroundColor
-              .folderName input
-                height 33px
-                border 1px solid transparent
-                border-radius 5px
-                padding 0 10px
-                font-size 14px
-                outline none
-                width 150px
-                overflow ellipsis
-                &:hover
-                  border-color borderColor
-                &:focus
-                  border-color iptFocusBorderColor
-              .folderPublic select
-                height 33px
-                border 1px solid transparent
-                background-color white
-                outline none
-                display block
-                margin 0 auto
-                font-size 14px
-                &:hover
-                  border-color borderColor
-                &:focus
-                  border-color iptFocusBorderColor
-              .folderControl
-                button
-                  border none
-                  height 30px
-                  margin-top 1.5px
-                  font-size 14px
-                  background-color transparent
-                  color brandColor
-                  &:hover
-                    color lighten(brandColor, 10%)
-            &.FolderRow
-              .sortBtns
-                float left
-                display block
-                height 30px
-                width 30px
-                margin-top 1.5px
-                position absolute
-                button
-                  absolute left
-                  background-color transparent
-                  border none
-                  height 15px
-                  padding 0
-                  margin 0
-                  color stripBtnColor
-                  &:first-child
-                    top 0
-                  &:last-child
-                    top 15px
-                  &:hover
-                    color stripHoverBtnColor
-                  &:disabled
-                    color lighten(stripBtnColor, 10%)
-                    cursor not-allowed
-              .folderName input
-                height 33px
-                border 1px solid borderColor
-                border-radius 5px
-                padding 0 10px
-                font-size 14px
-                outline none
-                width 150px
-                &:focus
-                  border-color iptFocusBorderColor
-              .folderColor
-                .select
-                  height 33px
-                  width 33px
-                  border 1px solid borderColor
-                  background-color white
-                  outline none
-                  display block
-                  margin 0 auto
-                  font-size 14px
-                  border-radius 5px
-                  &:focus
-                    border-color iptFocusBorderColor
-                .options
-                  position absolute
-                  background-color white
-                  text-align left
-                  border 1px solid borderColor
-                  border-radius 5px
-                  padding 0 5px 5px
-                  margin-left 5px
-                  margin-top -34px
-                  clearfix()
-                  .label
-                    margin-left 5px
-                    line-height 22px
-                    font-size 12px
-                  button
-                    float left
-                    border none
-                    width 33px
-                    height 33px
-                    margin-right 5px
-                    border 1px solid transparent
-                    line-height 29px
-                    overflow hidden
-                    border-radius 5px
-                    background-color transparent
-                    outline none
-                    transition 0.1s
-                    &:hover
-                      border-color borderColor
-                    &.active
-                      border-color iptFocusBorderColor
-                      .FolderMark
-                        transform scale(1.4)
-              .folderControl
-                button
-                  border none
-                  height 30px
-                  width 30px
-                  margin-top 1.5px
-                  font-size 14px
-                  background-color transparent
-                  color stripBtnColor
-                  &:hover
-                    color stripHoverBtnColor
-                  &:disabled
-                    color lighten(stripBtnColor, 10%)
-                    cursor not-allowed
-              &.edit
-                .folderControl
-                  button
-                    width 60px
-                    &.primary
-                     color brandColor
-                     &:hover
-                      color lighten(brandColor, 10%)
-              &.delete
-                .folderDeleteLabel
-                  float left
-                  height 33px
-                  width 250px
-                  padding-left 15px
-                  overflow ellipsis
-                  strong
-                    font-size 16px
-                    color brandColor
-                .folderControl
-                  button
-                    width 60px
-                    &.primary
-                     color brandColor
-                     &:hover
-                      color lighten(brandColor, 10%)

From 293c286d2297bcb26c78eb49c8f6f6a0e7d0710e Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sun, 8 May 2016 03:03:26 +0900
Subject: [PATCH 024/109] update  color option and enhance UX of FolderItem

---
 browser/lib/consts.js                       | 14 ++++++--------
 browser/main/HomePage/SideNav/FolderItem.js |  6 ++++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/browser/lib/consts.js b/browser/lib/consts.js
index 400ffb78..c6afc3b7 100644
--- a/browser/lib/consts.js
+++ b/browser/lib/consts.js
@@ -1,22 +1,20 @@
 const consts = {
   FOLDER_COLORS: [
-    '#3460C7',
-    '#2BA5F7',
+    '#E10051',
     '#FF8E00',
     '#E8D252',
     '#3FD941',
-    '#1FAD85',
-    '#E10051',
+    '#30D5C8',
+    '#2BA5F7',
     '#B013A4'
   ],
   FOLDER_COLOR_NAMES: [
-    'Cerulean Blue',
-    'Dodger Blue',
+    'Razzmatazz',
     'Pizazz',
     'Confetti',
     'Emerald',
-    'Mountain Meadow',
-    'Razzmatazz',
+    'Turquoise',
+    'Dodger Blue',
     'Violet Eggplant'
   ]
 }
diff --git a/browser/main/HomePage/SideNav/FolderItem.js b/browser/main/HomePage/SideNav/FolderItem.js
index c9164225..5be3ab12 100644
--- a/browser/main/HomePage/SideNav/FolderItem.js
+++ b/browser/main/HomePage/SideNav/FolderItem.js
@@ -89,6 +89,7 @@ class FolderItem extends React.Component {
       name: this.props.folder.name
     }, () => {
       this.refs.nameInput.focus()
+      this.refs.nameInput.select()
     })
   }
 
@@ -124,7 +125,9 @@ class FolderItem extends React.Component {
 
     return (
       <div className='FolderItem'
-        styleName='root'>
+        styleName='root'
+        onContextMenu={(e) => this.handleContextButtonClick(e)}
+      >
         <div styleName='label'>
           <i className='fa fa-cube' style={{color: folder.color}}/> {folder.name}
         </div>
@@ -181,7 +184,6 @@ class FolderItem extends React.Component {
     return (
       <div className='FolderItem'
         styleName='root'
-        onContextMenu={(e) => this.handleContextButtonClick(e)}
       >
         <input styleName='nameInput'
           ref='nameInput'

From c91adcd165fb8d00aebacc236aa2157fa9a47f02 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sun, 8 May 2016 14:41:27 +0900
Subject: [PATCH 025/109] update label

---
 browser/lib/consts.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/browser/lib/consts.js b/browser/lib/consts.js
index c6afc3b7..0ebec02a 100644
--- a/browser/lib/consts.js
+++ b/browser/lib/consts.js
@@ -9,10 +9,10 @@ const consts = {
     '#B013A4'
   ],
   FOLDER_COLOR_NAMES: [
-    'Razzmatazz',
-    'Pizazz',
-    'Confetti',
-    'Emerald',
+    'Razzmatazz (Red)',
+    'Pizazz (Orange)',
+    'Confetti (Yellow)',
+    'Emerald (Green)',
     'Turquoise',
     'Dodger Blue',
     'Violet Eggplant'

From 652c1aae736dd738ee4ee686729ada2811b96b33 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sun, 8 May 2016 14:42:08 +0900
Subject: [PATCH 026/109] re-color style of SideNav

---
 browser/main/HomePage/SideNav/FolderItem.styl | 16 +++++++------
 .../HomePage/SideNav/RepositorySection.styl   | 23 +++++++++---------
 browser/main/HomePage/SideNav/SideNav.styl    | 24 +++++++++++++------
 browser/styles/index.styl                     |  9 ++++---
 4 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/browser/main/HomePage/SideNav/FolderItem.styl b/browser/main/HomePage/SideNav/FolderItem.styl
index 817b975e..ac8d60df 100644
--- a/browser/main/HomePage/SideNav/FolderItem.styl
+++ b/browser/main/HomePage/SideNav/FolderItem.styl
@@ -4,9 +4,12 @@
   position relative
   cursor pointer
   &:hover
-    background-color alpha(white, 0.1)
+    background-color $nav-hover-background
     .control
       opacity 1
+  &:active
+    background-color $nav-active-background
+    color $nav-text-color
 
 .label
   position absolute
@@ -16,7 +19,7 @@
   right 48px
   padding-left 20px
   line-height 33px
-  color white
+  color $nav-inactive-text-color
 
 .control
   opacity 0
@@ -33,13 +36,12 @@
   border none
   border-radius 5px
   background-color transparent
-  color $nav-inactive-color
+  color $nav-inactive-text-color
   &:hover
-    color white
-    background-color alpha(white, 0.1)
+    background-color $nav-hover-background
   &:active
-    color white
-    background-color $brand-color
+    background-color $nav-active-background
+    color $nav-text-color
 
 .nameInput
   absolute top bottom
diff --git a/browser/main/HomePage/SideNav/RepositorySection.styl b/browser/main/HomePage/SideNav/RepositorySection.styl
index 8230fc3e..260ce797 100644
--- a/browser/main/HomePage/SideNav/RepositorySection.styl
+++ b/browser/main/HomePage/SideNav/RepositorySection.styl
@@ -2,13 +2,15 @@
   margin-top 15px
   margin-bottom 15px
   user-select none
+  color $nav-text-color
 
 .header
   position relative
   height 33px
   cursor pointer
+  color $nav-inactive-text-color
   &:hover
-    background-color alpha(white, 0.1)
+    background-color $nav-hover-background
     .header-control-button
       opacity 1
 
@@ -20,7 +22,6 @@
   right 72px
   padding-left 10px
   line-height 33px
-  color white
 
 .header-control
   position absolute
@@ -37,14 +38,13 @@
   border none
   border-radius 5px
   background-color transparent
-  color $nav-inactive-color
+  color $nav-inactive-text-color
   opacity 0
   &:hover
-    color white
-    background-color alpha(white, 0.1)
+    background-color $nav-hover-background
   &:active
-    color white
-    background-color $brand-color
+    background-color $nav-active-background
+    color $nav-text-color
 
 .header-control-button--show
   @extend .header-control-button
@@ -73,11 +73,10 @@
   border none
   padding-left 20px
   text-align left
+  color $nav-inactive-text-color
   background-color transparent
-  color $nav-inactive-color
   &:hover
-    background-color alpha(white, 0.1)
-    color white
+    background-color $nav-hover-background
   &:active
-    background-color $brand-color
-    color white
+    background-color $nav-active-background
+    color $nav-text-color
diff --git a/browser/main/HomePage/SideNav/SideNav.styl b/browser/main/HomePage/SideNav/SideNav.styl
index 65bb6b37..5e6a076b 100644
--- a/browser/main/HomePage/SideNav/SideNav.styl
+++ b/browser/main/HomePage/SideNav/SideNav.styl
@@ -4,24 +4,26 @@
   border-right solid 1px $nav-border-color
   background-color $nav-background-color
   user-select none
+  color $nav-text-color
 
 .top
   height 60px
   border-bottom solid 1px $nav-border-color
 
 .top-menu
-  height 60px
+  height 59px
   padding 0 10px
   font-size 14px
   width 100%
   text-align left
   border none
-  color white
+  color $nav-inactive-text-color
   background-color transparent
   &:hover
-    background-color alpha(white, 0.1)
+    background-color $nav-hover-background
   &:active
-    background-color $brand-color
+    background-color $nav-active-background
+    color $nav-text-color
 
 .menu
   margin-top 15px
@@ -33,12 +35,20 @@
   width 100%
   text-align left
   border none
-  color white
+  color $nav-inactive-text-color
   background-color transparent
   &:hover
-    background-color alpha(white, 0.1)
+    background-color $nav-hover-background
   &:active
-    background-color $brand-color
+    background-color $nav-active-background
+    color $nav-text-color
+
+.menu-button--active
+  @extend .menu-button
+  background-color $nav-active-background
+  color $nav-text-color
+  &:hover
+    background-color $nav-active-background
 
 .repositoryList
   absolute left right bottom
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index f39991a1..24b39ab3 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -56,9 +56,12 @@ $disabled-input-background = #DDD
 * Nav
 */
 
-$nav-border-color = #838383
-$nav-background-color = #353535
-$nav-inactive-color = #838383
+$nav-text-color = #515151
+$nav-inactive-text-color = #939395
+$nav-hover-background = rgba(126, 127, 129, 0.08)
+$nav-active-background = #E7E7E7
+$nav-border-color = #D1D1D2
+$nav-background-color = #FAFAFA
 
 /**
 * # Modal Stuff

From 330ea986d41d884bde3468dc32938ac45ee7ece2 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sun, 8 May 2016 14:42:38 +0900
Subject: [PATCH 027/109] use ReactRouter

---
 browser/main/HomePage/SideNav/index.js | 26 ++++++++++++++++++++++----
 browser/main/Main.js                   |  2 +-
 browser/main/index.js                  | 26 +++++++++++++++++++++-----
 browser/main/store.js                  |  4 +++-
 package.json                           |  4 +++-
 5 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/browser/main/HomePage/SideNav/index.js b/browser/main/HomePage/SideNav/index.js
index 4d76847c..373c1677 100644
--- a/browser/main/HomePage/SideNav/index.js
+++ b/browser/main/HomePage/SideNav/index.js
@@ -35,8 +35,18 @@ class SideNav extends React.Component {
     openModal(Preferences)
   }
 
+  handleHomeButtonClick (e) {
+    let { router } = this.context
+    router.push('/repositories')
+  }
+
+  handleStarredButtonClick (e) {
+    let { router } = this.context
+    router.push('/starred')
+  }
+
   render () {
-    let { repositories, dispatch } = this.props
+    let { repositories, dispatch, location } = this.props
     let repositorieElements = repositories.map((repo) => {
       return <RepositorySection
         key={repo.key}
@@ -44,6 +54,8 @@ class SideNav extends React.Component {
         dispatch={dispatch}
       />
     })
+    let isHomeActive = location.pathname.match(/^\/home$/)
+    let isStarredActive = location.pathname.match(/^\/starred$/)
 
     return (
       <div
@@ -60,13 +72,15 @@ class SideNav extends React.Component {
         </div>
 
         <div styleName='menu'>
-          <button styleName='menu-button'
+          <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
+            onClick={(e) => this.handleHomeButtonClick(e)}
           >
             <i className='fa fa-home'/> Home
           </button>
-          <button styleName='menu-button'
+          <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
+            onClick={(e) => this.handleStarredButtonClick(e)}
           >
-            <i className='fa fa-star'/> Favorited
+            <i className='fa fa-star'/> Starred
           </button>
         </div>
 
@@ -84,6 +98,10 @@ class SideNav extends React.Component {
   }
 }
 
+SideNav.contextTypes = {
+  router: PropTypes.shape({})
+}
+
 SideNav.propTypes = {
   dispatch: PropTypes.func,
   repositories: PropTypes.array
diff --git a/browser/main/Main.js b/browser/main/Main.js
index 43bacd4b..90841d0b 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -27,7 +27,7 @@ export default class MainContainer extends React.Component {
         {this.state.updateAvailable ? (
           <button onClick={this.updateApp} className='appUpdateButton'><i className='fa fa-cloud-download'/> Update available!</button>
         ) : null}
-        <HomePage/>
+        <HomePage {...this.props}/>
       </div>
     )
   }
diff --git a/browser/main/index.js b/browser/main/index.js
index 22ba4213..8f2d8eb5 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -6,9 +6,11 @@ import ReactDOM from 'react-dom'
 require('!!style!css!stylus?sourceMap!../styles/main/index.styl')
 import activityRecord from 'browser/lib/activityRecord'
 import fetchConfig from '../lib/fetchConfig'
+import { Router, Route, IndexRoute, IndexRedirect, hashHistory } from 'react-router'
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const path = require('path')
+import { syncHistoryWithStore } from 'react-router-redux'
 
 const remote = electron.remote
 
@@ -73,12 +75,26 @@ ipc.on('open-finder', function () {
 })
 
 let el = document.getElementById('content')
+const history = syncHistoryWithStore(hashHistory, store)
+history.listen((location) => console.info(location))
 ReactDOM.render((
-  <div>
-    <Provider store={store}>
-      <Main/>
-    </Provider>
-  </div>
+  <Provider store={store}>
+    <Router history={history}>
+      <Route path='/' component={Main}>
+        <IndexRedirect to='/home'/>
+        <Route path='home'/>
+        <Route path='starred'/>
+        <Route path='repositories'>
+          <IndexRedirect to='/home'/>
+          <Route path=':repositoryKey'>
+            <IndexRoute/>
+            <Route path='settings'/>
+            <Route path='folders/:folderKey'/>
+          </Route>
+        </Route>
+      </Route>
+    </Router>
+  </Provider>
 ), el, function () {
   let loadingCover = document.getElementById('loadingCover')
   loadingCover.parentNode.removeChild(loadingCover)
diff --git a/browser/main/store.js b/browser/main/store.js
index 109d2dfd..70cb444c 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -1,5 +1,6 @@
 import { combineReducers, createStore } from 'redux'
 import _ from 'lodash'
+import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
 
 /**
  * Repositories
@@ -110,7 +111,8 @@ function repositories (state = initialRepositories, action) {
 }
 
 let reducer = combineReducers({
-  repositories
+  repositories,
+  routing: routerReducer
 })
 
 let store = createStore(reducer)
diff --git a/package.json b/package.json
index 06327ff8..fedb4d03 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "font-awesome": "^4.3.0",
     "fs-jetpack": "^0.7.0",
     "highlight.js": "^9.3.0",
-    "lodash": "^3.10.1",
+    "lodash": "^4.11.1",
     "markdown-it": "^6.0.1",
     "markdown-it-checkbox": "^1.1.0",
     "markdown-it-emoji": "^1.1.1",
@@ -73,6 +73,8 @@
     "nib": "^1.1.0",
     "oh-my-cdn": "^0.1.1",
     "react-css-modules": "^3.7.6",
+    "react-router": "^2.4.0",
+    "react-router-redux": "^4.0.4",
     "standard": "^6.0.8",
     "style-loader": "^0.12.4",
     "stylus": "^0.52.4",

From a3d5f23861dce9dc2cb600cbedbeaa4a2b034fc5 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Wed, 11 May 2016 09:59:17 +0900
Subject: [PATCH 028/109] update sidebar style

add transition
modify margin among menu buttons
---
 browser/main/HomePage/SideNav/FolderItem.js   |  4 +++
 browser/main/HomePage/SideNav/FolderItem.styl |  3 ++
 .../HomePage/SideNav/RepositorySection.styl   |  5 +--
 browser/main/HomePage/SideNav/SideNav.styl    | 33 +++++--------------
 4 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/browser/main/HomePage/SideNav/FolderItem.js b/browser/main/HomePage/SideNav/FolderItem.js
index 5be3ab12..b91f30d5 100644
--- a/browser/main/HomePage/SideNav/FolderItem.js
+++ b/browser/main/HomePage/SideNav/FolderItem.js
@@ -59,6 +59,10 @@ class FolderItem extends React.Component {
     }
 
     var menu = new Menu()
+    menu.append(new MenuItem({
+      label: 'New Note'
+    }))
+    menu.append(new MenuItem({ type: 'separator' }))
     menu.append(new MenuItem({
       label: 'Rename',
       click: () => this.handleRenameButtonClick(e)
diff --git a/browser/main/HomePage/SideNav/FolderItem.styl b/browser/main/HomePage/SideNav/FolderItem.styl
index ac8d60df..5c5df37d 100644
--- a/browser/main/HomePage/SideNav/FolderItem.styl
+++ b/browser/main/HomePage/SideNav/FolderItem.styl
@@ -3,6 +3,7 @@
   width 100%
   position relative
   cursor pointer
+  transition 0.15s
   &:hover
     background-color $nav-hover-background
     .control
@@ -28,6 +29,7 @@
   bottom 0
   right 5px
   width 24px
+  transition 0.15s
 
 .control-button
   width 24px
@@ -37,6 +39,7 @@
   border-radius 5px
   background-color transparent
   color $nav-inactive-text-color
+  transition 0.15s
   &:hover
     background-color $nav-hover-background
   &:active
diff --git a/browser/main/HomePage/SideNav/RepositorySection.styl b/browser/main/HomePage/SideNav/RepositorySection.styl
index 260ce797..649bf322 100644
--- a/browser/main/HomePage/SideNav/RepositorySection.styl
+++ b/browser/main/HomePage/SideNav/RepositorySection.styl
@@ -1,6 +1,4 @@
 .root
-  margin-top 15px
-  margin-bottom 15px
   user-select none
   color $nav-text-color
 
@@ -9,6 +7,7 @@
   height 33px
   cursor pointer
   color $nav-inactive-text-color
+  transition 0.15s
   &:hover
     background-color $nav-hover-background
     .header-control-button
@@ -40,6 +39,7 @@
   background-color transparent
   color $nav-inactive-text-color
   opacity 0
+  transition 0.15s
   &:hover
     background-color $nav-hover-background
   &:active
@@ -75,6 +75,7 @@
   text-align left
   color $nav-inactive-text-color
   background-color transparent
+  transition 0.15s
   &:hover
     background-color $nav-hover-background
   &:active
diff --git a/browser/main/HomePage/SideNav/SideNav.styl b/browser/main/HomePage/SideNav/SideNav.styl
index 5e6a076b..6b416d1f 100644
--- a/browser/main/HomePage/SideNav/SideNav.styl
+++ b/browser/main/HomePage/SideNav/SideNav.styl
@@ -19,6 +19,7 @@
   border none
   color $nav-inactive-text-color
   background-color transparent
+  transition 0.15s
   &:hover
     background-color $nav-hover-background
   &:active
@@ -37,6 +38,7 @@
   border none
   color $nav-inactive-text-color
   background-color transparent
+  transition 0.15s
   &:hover
     background-color $nav-hover-background
   &:active
@@ -52,7 +54,7 @@
 
 .repositoryList
   absolute left right bottom
-  top 167px
+  top 178px
   overflow-y auto
 
 .repositoryList-empty
@@ -69,30 +71,13 @@
   border-radius 16.5px
   height 33px
   width 33px
-  color $nav-inactive-color
+  color $nav-inactive-text-color
   border none
   background-color transparent
+  transition 0.15s
   &:hover
-    background-color alpha(white, 0.1)
-    color white
+    background-color $nav-hover-background
+    color $nav-inactive-text-color
   &:active
-    background-color $brand-color
-    color white
-
-.control
-  absolute bottom left right
-  height 33px
-  background-color transparent
-  border none
-  &:hover
-    background-color alph(white, 0.1)
-  &:active
-    background-color $brand-color
-
-.control-newRepositoryButton
-  absolute top bottom left
-  width 167px
-  padding 0 10px
-  text-align left
-  border none
-  color white
+    background-color $nav-active-background
+    color $nav-text-color

From 365d7a1afd133c4479065860db38d0635b850d17 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Thu, 12 May 2016 19:53:21 +0900
Subject: [PATCH 029/109] foldable SideNav

---
 browser/main/HomePage/SideNav/FolderItem.js   |  42 +++++--
 browser/main/HomePage/SideNav/FolderItem.styl |  69 ++++++++++-
 .../HomePage/SideNav/RepositorySection.js     |  36 ++++--
 .../HomePage/SideNav/RepositorySection.styl   | 110 +++++++++++++++++-
 browser/main/HomePage/SideNav/SideNav.styl    |  75 +++++++++---
 browser/main/HomePage/SideNav/index.js        |  55 ++++++---
 browser/main/store.js                         |  14 +++
 browser/styles/index.styl                     |  18 ++-
 8 files changed, 361 insertions(+), 58 deletions(-)

diff --git a/browser/main/HomePage/SideNav/FolderItem.js b/browser/main/HomePage/SideNav/FolderItem.js
index b91f30d5..6331cf18 100644
--- a/browser/main/HomePage/SideNav/FolderItem.js
+++ b/browser/main/HomePage/SideNav/FolderItem.js
@@ -54,6 +54,7 @@ class FolderItem extends React.Component {
   }
 
   handleContextButtonClick (e) {
+    e.stopPropagation()
     if (this.state.isUpdating) {
       return
     }
@@ -84,7 +85,7 @@ class FolderItem extends React.Component {
       click: () => this.handleDeleteButtonClick(e)
     }))
 
-    menu.popup(remote.getCurrentWindow())
+    menu.popup(remote.getCurrentWindow(), e.clientX, e.clientY - 44)
   }
 
   handleRenameButtonClick (e) {
@@ -124,16 +125,33 @@ class FolderItem extends React.Component {
     })
   }
 
+  handleClick (e) {
+    let { folder, repository } = this.props
+    let { router } = this.context
+
+    router.push('/repositories/' + repository.key + '/folders/' + folder.key)
+  }
+
   renderIdle () {
-    let { folder } = this.props
+    let { folder, repository, isFolded } = this.props
+    let { router } = this.context
+
+    let isActive = router.isActive('/repositories/' + repository.key + '/folders/' + folder.key)
 
     return (
-      <div className='FolderItem'
-        styleName='root'
+      <div styleName={isFolded
+          ? isActive ? 'root--folded--active' : 'root--folded'
+          : isActive ? 'root--active' : 'root'
+        }
+        onClick={(e) => this.handleClick(e)}
         onContextMenu={(e) => this.handleContextButtonClick(e)}
       >
         <div styleName='label'>
-          <i className='fa fa-cube' style={{color: folder.color}}/> {folder.name}
+          <i styleName='label-icon'
+            className='fa fa-cube'
+            style={{color: folder.color}}
+          />
+          <span styleName='label-name'>{folder.name}</span>
         </div>
         <div styleName='control'>
           <button styleName='control-button'
@@ -185,9 +203,12 @@ class FolderItem extends React.Component {
   }
 
   renderEdit () {
+    let { isFolded } = this.props
     return (
-      <div className='FolderItem'
-        styleName='root'
+      <div styleName={isFolded
+          ? 'root--edit--folded'
+          : 'root--edit'
+        }
       >
         <input styleName='nameInput'
           ref='nameInput'
@@ -205,6 +226,10 @@ class FolderItem extends React.Component {
   }
 }
 
+FolderItem.contextTypes = {
+  router: PropTypes.object
+}
+
 FolderItem.propTypes = {
   folder: PropTypes.shape({
     name: PropTypes.string,
@@ -212,7 +237,8 @@ FolderItem.propTypes = {
   }),
   repository: PropTypes.shape({
     key: PropTypes.string
-  })
+  }),
+  isFolded: PropTypes.bool
 }
 
 export default CSSModules(FolderItem, styles)
diff --git a/browser/main/HomePage/SideNav/FolderItem.styl b/browser/main/HomePage/SideNav/FolderItem.styl
index 5c5df37d..e2b0f7bd 100644
--- a/browser/main/HomePage/SideNav/FolderItem.styl
+++ b/browser/main/HomePage/SideNav/FolderItem.styl
@@ -4,14 +4,25 @@
   position relative
   cursor pointer
   transition 0.15s
+  color $nav-inactive-text-color
   &:hover
     background-color $nav-hover-background
     .control
       opacity 1
-  &:active
+  &:active, &:hover:active
     background-color $nav-active-background
     color $nav-text-color
 
+.root--active
+  @extend .root
+  background-color $nav-active-background
+  color $nav-text-color
+  &:hover
+    background-color $nav-active-background
+    color $nav-text-color
+  .control
+    opacity 1
+
 .label
   position absolute
   left 0
@@ -20,7 +31,10 @@
   right 48px
   padding-left 20px
   line-height 33px
-  color $nav-inactive-text-color
+  overflow-x hidden
+
+.label-name
+  margin-left 5px
 
 .control
   opacity 0
@@ -29,7 +43,7 @@
   bottom 0
   right 5px
   width 24px
-  transition 0.15s
+  transition opacity 0.15s
 
 .control-button
   width 24px
@@ -39,12 +53,14 @@
   border-radius 5px
   background-color transparent
   color $nav-inactive-text-color
-  transition 0.15s
+  transition color background-color 0.15s
   &:hover
     background-color $nav-hover-background
   &:active
     background-color $nav-active-background
     color $nav-text-color
+.root--edit
+  @extend .root
 
 .nameInput
   absolute top bottom
@@ -59,3 +75,48 @@
     border-color $focus-border-color
   &:disabled
     background-color $disabled-input-background
+
+.root--folded
+  @extend .root
+  width 44px
+  &:hover .label-name
+    width 100px
+  .label
+    padding-left 0
+    text-align center
+    right 0
+  .label-icon
+    width 44px
+  .label-name
+    position fixed
+    height 34px
+    left 44px
+    width 0
+    box-sizing border-box
+    margin-left 0
+    overflow ellipsis
+    background-color $nav-tooltip-background-color
+    color white
+    line-height 34px
+    border-top-right-radius 5px
+    border-bottom-right-radius 5px
+    transition width 0.15s
+    pointer-events none
+  .control
+    display none
+
+.root--folded--active
+  @extend .root--folded
+  background-color $nav-active-background
+  color $nav-text-color
+  &:hover
+    background-color $nav-active-background
+    color $nav-text-color
+
+.root--edit--folded
+  @extend .root--edit
+  .nameInput
+    position fixed
+    top inherit
+    bottom inherit
+    width 100px
diff --git a/browser/main/HomePage/SideNav/RepositorySection.js b/browser/main/HomePage/SideNav/RepositorySection.js
index 294e2a99..e3ba2600 100644
--- a/browser/main/HomePage/SideNav/RepositorySection.js
+++ b/browser/main/HomePage/SideNav/RepositorySection.js
@@ -43,12 +43,20 @@ class RepositorySection extends React.Component {
   }
 
   handleToggleButtonClick (e) {
+    e.stopPropagation()
     this.setState({
       isOpen: !this.state.isOpen
     })
   }
 
+  handleHeaderClick (e) {
+    let { repository } = this.props
+    let { router } = this.context
+    router.push('/repositories/' + repository.key)
+  }
+
   handleContextButtonClick (e) {
+    e.stopPropagation()
     var menu = new Menu()
     menu.append(new MenuItem({
       label: 'New Folder',
@@ -60,7 +68,7 @@ class RepositorySection extends React.Component {
       click: () => this.handleUnlinkButtonClick()
     }))
 
-    menu.popup(remote.getCurrentWindow())
+    menu.popup(remote.getCurrentWindow(), e.clientX, e.clientY - 44)
   }
 
   handleNewFolderButtonClick (e) {
@@ -120,7 +128,10 @@ class RepositorySection extends React.Component {
   }
 
   render () {
-    let { repository } = this.props
+    let { repository, isFolded } = this.props
+    let { router } = this.context
+
+    let isActive = router.isActive('/repositories/' + repository.key, true)
 
     let folderElements = repository.folders.map((folder) => {
       return (
@@ -128,6 +139,7 @@ class RepositorySection extends React.Component {
           key={folder.key}
           folder={folder}
           repository={repository}
+          isFolded={isFolded}
         />
       )
     })
@@ -139,20 +151,22 @@ class RepositorySection extends React.Component {
     return (
       <div
         className='RepositorySection'
-        styleName='root'
+        styleName={isFolded ? 'root-folded' : 'root'}
       >
-        <div styleName='header'
+        <div styleName={isActive ? 'header--active' : 'header'}
+          onClick={(e) => this.handleHeaderClick(e)}
           onContextMenu={(e) => this.handleContextButtonClick(e)}
         >
           <div styleName='header-name'>
-            <i className='fa fa-archive'/> {repository.name}
+            <i styleName='header-name-icon' className='fa fa-archive fa-fw'/>
+            <span styleName='header-name-label'>{repository.name}</span>
           </div>
 
           <div styleName='header-control'>
             <button styleName='header-control-button'
               onClick={(e) => this.handleContextButtonClick(e)}
             >
-              <i className='fa fa-ellipsis-v'/>
+              <i className='fa fa-ellipsis-v fa-fw'/>
             </button>
             <button styleName='header-control-button--show'
               onClick={(e) => this.handleToggleButtonClick(e)}
@@ -177,7 +191,8 @@ class RepositorySection extends React.Component {
             : <button styleName='newFolderButton'
               onClick={(e) => this.handleNewFolderButtonClick(e)}
             >
-              <i className='fa fa-plus'/> New Folder
+              <i styleName='newFolderButton-icon' className='fa fa-plus fa-fw'/>
+              <span styleName='newFolderButton-label'>New Folder</span>
             </button>
           }
         </div>}
@@ -186,6 +201,10 @@ class RepositorySection extends React.Component {
   }
 }
 
+RepositorySection.contextTypes = {
+  router: PropTypes.object
+}
+
 RepositorySection.propTypes = {
   repository: PropTypes.shape({
     name: PropTypes.string,
@@ -193,7 +212,8 @@ RepositorySection.propTypes = {
       name: PropTypes.string
     }))
   }),
-  dispatch: PropTypes.func
+  dispatch: PropTypes.func,
+  isFolded: PropTypes.bool
 }
 
 export default CSSModules(RepositorySection, styles)
diff --git a/browser/main/HomePage/SideNav/RepositorySection.styl b/browser/main/HomePage/SideNav/RepositorySection.styl
index 649bf322..5f50f5cb 100644
--- a/browser/main/HomePage/SideNav/RepositorySection.styl
+++ b/browser/main/HomePage/SideNav/RepositorySection.styl
@@ -8,10 +8,28 @@
   cursor pointer
   color $nav-inactive-text-color
   transition 0.15s
+  border none
+  width 100%
+  text-align left
+  background-color transparent
+  font-size 14px
   &:hover
     background-color $nav-hover-background
     .header-control-button
       opacity 1
+  &:active, &:active:hover
+    background-color $nav-active-background
+    color $nav-text-color
+
+.header--active
+  @extend .header
+  background-color $nav-active-background
+  color $nav-text-color
+  .header-control-button
+    opacity 1
+  &:hover
+    background-color $nav-active-background
+    color $nav-text-color
 
 .header-name
   position absolute
@@ -22,6 +40,9 @@
   padding-left 10px
   line-height 33px
 
+.header-name-label
+  margin-left 5px
+
 .header-control
   position absolute
   top 0
@@ -39,7 +60,7 @@
   background-color transparent
   color $nav-inactive-text-color
   opacity 0
-  transition 0.15s
+  transition color background-color 0.15s
   &:hover
     background-color $nav-hover-background
   &:active
@@ -75,9 +96,94 @@
   text-align left
   color $nav-inactive-text-color
   background-color transparent
-  transition 0.15s
+  transition color background-color 0.15s
   &:hover
     background-color $nav-hover-background
   &:active
     background-color $nav-active-background
     color $nav-text-color
+
+.newFolderButton
+  height 34px
+  line-height 34px
+.newFolderButton-label
+  margin-left 0
+
+.root-folded
+  @extend .root
+  width 44px
+  .header, .header--active
+    width 44px
+    text-align center
+    overflow hidden
+    &:hover
+      .header-name-label
+        width 134px
+        padding-left 34px
+      .header-control
+        width 35px
+        padding-right 5px
+  .header-name
+    width 44px
+    padding-left 0
+  .header-name-label
+    position fixed
+    display inline-block
+    height 34px
+    left 44px
+    width 0
+    box-sizing border-box
+    margin-left 0
+    overflow ellipsis
+    background-color $nav-tooltip-background-color
+    color white
+    line-height 34px
+    border-top-right-radius 5px
+    border-bottom-right-radius 5px
+    transition width 0.15s
+    pointer-events none
+  .header-control
+    position fixed
+    width 0
+    height 33px
+    top inherit
+    bottom inherit
+    left 43px
+    box-sizing border-box
+    overflow hidden
+  .header-control-button
+    display none
+  .header-control-button--show
+    float right
+    background-color $nav-tooltip-button-background
+    &:hover
+      background-color $nav-tooltip-button-background--hover
+  .newFolderButton
+    width 44px
+    padding 0
+    &:hover .newFolderButton-label
+      width 100px
+  .newFolderButton-icon
+    text-align center
+    width 44px
+  .newFolderButton-label
+    position fixed
+    display inline-block
+    height 34px
+    left 44px
+    width 0
+    box-sizing border-box
+    margin-left 0
+    overflow ellipsis
+    background-color $nav-tooltip-background-color
+    color white
+    line-height 34px
+    border-top-right-radius 5px
+    border-bottom-right-radius 5px
+    transition width 0.15s
+    pointer-events none
+    font-size 14px
+    text-align center
+  .newFolderForm-nameInput
+    position fixed
+    width 100px
diff --git a/browser/main/HomePage/SideNav/SideNav.styl b/browser/main/HomePage/SideNav/SideNav.styl
index 6b416d1f..c9bd6592 100644
--- a/browser/main/HomePage/SideNav/SideNav.styl
+++ b/browser/main/HomePage/SideNav/SideNav.styl
@@ -11,39 +11,26 @@
   border-bottom solid 1px $nav-border-color
 
 .top-menu
+  navButtonColor()
   height 59px
   padding 0 10px
   font-size 14px
   width 100%
   text-align left
-  border none
-  color $nav-inactive-text-color
-  background-color transparent
-  transition 0.15s
-  &:hover
-    background-color $nav-hover-background
-  &:active
-    background-color $nav-active-background
-    color $nav-text-color
+
+.top-menu-label
+  margin-left 5px
 
 .menu
   margin-top 15px
 
 .menu-button
+  navButtonColor()
   height 44px
   padding 0 10px
   font-size 14px
   width 100%
   text-align left
-  border none
-  color $nav-inactive-text-color
-  background-color transparent
-  transition 0.15s
-  &:hover
-    background-color $nav-hover-background
-  &:active
-    background-color $nav-active-background
-    color $nav-text-color
 
 .menu-button--active
   @extend .menu-button
@@ -52,6 +39,9 @@
   &:hover
     background-color $nav-active-background
 
+.menu-button-label
+  margin-left 5px
+
 .repositoryList
   absolute left right bottom
   top 178px
@@ -74,10 +64,57 @@
   color $nav-inactive-text-color
   border none
   background-color transparent
-  transition 0.15s
+  transition color background-color 0.15s
   &:hover
     background-color $nav-hover-background
     color $nav-inactive-text-color
   &:active
     background-color $nav-active-background
     color $nav-text-color
+
+.root-folded
+  @extend .root
+  width 44px
+  .top-menu
+    width 44px
+    text-align center
+    &:hover .top-menu-label
+      width 100px
+  .top-menu-label
+    position fixed
+    display inline-block
+    height 34px
+    left 44px
+    width 0
+    margin-top -5px
+    margin-left 0
+    overflow hidden
+    background-color $nav-tooltip-background-color
+    color white
+    line-height 34px
+    border-top-right-radius 5px
+    border-bottom-right-radius 5px
+    transition width 0.15s
+    pointer-events none
+  .menu-button, .menu-button--active
+    width 44px
+    text-align center
+    &:hover .menu-button-label
+      width 100px
+  .menu-button-label
+    position fixed
+    display inline-block
+    height 34px
+    left 44px
+    width 0
+    padding-left 0
+    margin-top -9px
+    margin-left 0
+    overflow ellipsis
+    background-color $nav-tooltip-background-color
+    color white
+    line-height 34px
+    border-top-right-radius 5px
+    border-bottom-right-radius 5px
+    transition width 0.15s
+    pointer-events none
diff --git a/browser/main/HomePage/SideNav/index.js b/browser/main/HomePage/SideNav/index.js
index 373c1677..dc21d019 100644
--- a/browser/main/HomePage/SideNav/index.js
+++ b/browser/main/HomePage/SideNav/index.js
@@ -24,7 +24,7 @@ class SideNav extends React.Component {
       label: 'Mount Repository',
       click: (e) => this.handleNewRepositoryButtonClick(e)
     }))
-    menu.popup(remote.getCurrentWindow())
+    menu.popup(remote.getCurrentWindow(), e.clientX, e.clientY - 44)
   }
 
   handleNewRepositoryButtonClick (e) {
@@ -45,29 +45,43 @@ class SideNav extends React.Component {
     router.push('/starred')
   }
 
-  render () {
-    let { repositories, dispatch, location } = this.props
-    let repositorieElements = repositories.map((repo) => {
-      return <RepositorySection
-        key={repo.key}
-        repository={repo}
-        dispatch={dispatch}
-      />
+  handleToggleButtonClick (e) {
+    let { dispatch } = this.props
+
+    dispatch({
+      type: 'TOGGLE_SIDENAV'
     })
+  }
+
+  render () {
+    let { repositories, dispatch, location, status } = this.props
+
+    let isFolded = !status.sideNavExpand
     let isHomeActive = location.pathname.match(/^\/home$/)
     let isStarredActive = location.pathname.match(/^\/starred$/)
 
+    let repositorieElements = repositories
+      .map((repo) => {
+        return <RepositorySection
+          key={repo.key}
+          repository={repo}
+          dispatch={dispatch}
+          isFolded={isFolded}
+        />
+      })
+
     return (
       <div
         className='SideNav'
-        styleName='root'
+        styleName={isFolded ? 'root-folded' : 'root'}
         tabIndex='1'
       >
         <div styleName='top'>
           <button styleName='top-menu'
             onClick={(e) => this.handleMenuButtonClick(e)}
           >
-            <i className='fa fa-navicon'/> Menu
+            <i styleName='top-menu-icon' className='fa fa-navicon fa-fw'/>
+            <span styleName='top-menu-label'>Menu</span>
           </button>
         </div>
 
@@ -75,12 +89,18 @@ class SideNav extends React.Component {
           <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
             onClick={(e) => this.handleHomeButtonClick(e)}
           >
-            <i className='fa fa-home'/> Home
+            <i styleName='menu-button-icon'
+              className='fa fa-home fa-fw'
+            />
+            <span styleName='menu-button-label'>Home</span>
           </button>
           <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
             onClick={(e) => this.handleStarredButtonClick(e)}
           >
-            <i className='fa fa-star'/> Starred
+            <i styleName='menu-button-icon'
+              className='fa fa-star fa-fw'
+            />
+            <span styleName='menu-button-label'>Starred</span>
           </button>
         </div>
 
@@ -90,8 +110,13 @@ class SideNav extends React.Component {
           )}
         </div>
 
-        <button styleName='navToggle'>
-          <i className='fa fa-angle-double-left'/>
+        <button styleName='navToggle'
+          onClick={(e) => this.handleToggleButtonClick(e)}
+        >
+          {isFolded
+            ? <i className='fa fa-angle-double-right'/>
+            : <i className='fa fa-angle-double-left'/>
+          }
         </button>
       </div>
     )
diff --git a/browser/main/store.js b/browser/main/store.js
index 70cb444c..4d16598c 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -110,8 +110,22 @@ function repositories (state = initialRepositories, action) {
   return state
 }
 
+const defaultStatus = {
+  sideNavExpand: false
+}
+
+function status (state = defaultStatus, action) {
+  switch (action.type) {
+    case 'TOGGLE_SIDENAV':
+      state.sideNavExpand = !state.sideNavExpand
+      return Object.assign({}, state)
+  }
+  return state
+}
+
 let reducer = combineReducers({
   repositories,
+  status,
   routing: routerReducer
 })
 
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 24b39ab3..1533e32a 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -59,9 +59,23 @@ $disabled-input-background = #DDD
 $nav-text-color = #515151
 $nav-inactive-text-color = #939395
 $nav-hover-background = rgba(126, 127, 129, 0.08)
-$nav-active-background = #E7E7E7
-$nav-border-color = #D1D1D2
+$nav-active-background = alpha(#E0E0E0, 90%)
+$nav-border-color = #D1D1D1
 $nav-background-color = #FAFAFA
+$nav-tooltip-background-color = alpha(#444, 70%)
+$nav-tooltip-button-background = #D1D1D1
+$nav-tooltip-button-background--hover = lighten(#D1D1D1, 30%)
+
+navButtonColor()
+  border none
+  color $nav-inactive-text-color
+  background-color transparent
+  transition color background-color  0.15s
+  &:hover
+    background-color $nav-hover-background
+  &:active
+    background-color $nav-active-background
+    color $nav-text-color
 
 /**
 * # Modal Stuff

From c851f8f0065d6e13f4fba0b4c4c5d6a3ffc819db Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Thu, 12 May 2016 20:45:03 +0900
Subject: [PATCH 030/109] modify localIdentName of css loader

---
 webpack-production.config.js | 2 +-
 webpack.config.js            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/webpack-production.config.js b/webpack-production.config.js
index cbb9cbc2..1b45fca5 100644
--- a/webpack-production.config.js
+++ b/webpack-production.config.js
@@ -14,7 +14,7 @@ var config = Object.assign({}, skeleton, {
       {
         test: /\.styl?$/,
         exclude: /(node_modules|bower_components)/,
-        loader: 'style!css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!stylus?sourceMap'
+        loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[path]!stylus?sourceMap'
       }
     ]
   },
diff --git a/webpack.config.js b/webpack.config.js
index 2cc1131c..84631836 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -12,7 +12,7 @@ var config = Object.assign({}, skeleton, {
       {
         test: /\.styl?$/,
         exclude: /(node_modules|bower_components)/,
-        loader: 'style!css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!stylus?sourceMap'
+        loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[path]!stylus?sourceMap'
       }
     ]
   },

From 18b6d8289fe2c1a8c986ca00e151231c2469949e Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Thu, 12 May 2016 20:45:21 +0900
Subject: [PATCH 031/109] refactor file structure

---
 .../ArticleDetail/ArticleEditor.js            |   0
 .../ArticleDetail/ShareButton.js              |   0
 .../{HomePage => }/ArticleDetail/index.js     |   2 +-
 browser/main/{HomePage => }/ArticleList.js    |  51 +----
 browser/main/{HomePage => }/ArticleTopBar.js  |   0
 browser/main/HomePage/TagLink.js              |  15 --
 browser/main/HomePage/index.js                | 104 ----------
 browser/main/Main.js                          |  41 +++-
 .../main/{HomePage => }/SideNav/FolderItem.js |   0
 .../{HomePage => }/SideNav/FolderItem.styl    |   0
 .../SideNav/RepositorySection.js              |   0
 .../SideNav/RepositorySection.styl            |   0
 .../main/{HomePage => }/SideNav/SideNav.styl  |   0
 browser/main/{HomePage => }/SideNav/index.js  |   4 +-
 browser/main/modal/CreateNewFolder.js         | 106 ----------
 browser/main/modal/Preference/FolderRow.js    | 184 ------------------
 .../{modal => modals}/DeleteArticleModal.js   |   0
 .../{modal => modals}/NewRepositoryModal.js   |   0
 .../{modal => modals}/NewRepositoryModal.styl |   0
 .../Preferences}/AppSettingTab.js             |   0
 .../Preferences}/ContactTab.js                |   0
 .../Preferences/index.js}                     |   6 +-
 22 files changed, 43 insertions(+), 470 deletions(-)
 rename browser/main/{HomePage => }/ArticleDetail/ArticleEditor.js (100%)
 rename browser/main/{HomePage => }/ArticleDetail/ShareButton.js (100%)
 rename browser/main/{HomePage => }/ArticleDetail/index.js (99%)
 rename browser/main/{HomePage => }/ArticleList.js (60%)
 rename browser/main/{HomePage => }/ArticleTopBar.js (100%)
 delete mode 100644 browser/main/HomePage/TagLink.js
 delete mode 100644 browser/main/HomePage/index.js
 rename browser/main/{HomePage => }/SideNav/FolderItem.js (100%)
 rename browser/main/{HomePage => }/SideNav/FolderItem.styl (100%)
 rename browser/main/{HomePage => }/SideNav/RepositorySection.js (100%)
 rename browser/main/{HomePage => }/SideNav/RepositorySection.styl (100%)
 rename browser/main/{HomePage => }/SideNav/SideNav.styl (100%)
 rename browser/main/{HomePage => }/SideNav/index.js (96%)
 delete mode 100644 browser/main/modal/CreateNewFolder.js
 delete mode 100644 browser/main/modal/Preference/FolderRow.js
 rename browser/main/{modal => modals}/DeleteArticleModal.js (100%)
 rename browser/main/{modal => modals}/NewRepositoryModal.js (100%)
 rename browser/main/{modal => modals}/NewRepositoryModal.styl (100%)
 rename browser/main/{modal/Preference => modals/Preferences}/AppSettingTab.js (100%)
 rename browser/main/{modal/Preference => modals/Preferences}/ContactTab.js (100%)
 rename browser/main/{modal/Preferences.js => modals/Preferences/index.js} (93%)

diff --git a/browser/main/HomePage/ArticleDetail/ArticleEditor.js b/browser/main/ArticleDetail/ArticleEditor.js
similarity index 100%
rename from browser/main/HomePage/ArticleDetail/ArticleEditor.js
rename to browser/main/ArticleDetail/ArticleEditor.js
diff --git a/browser/main/HomePage/ArticleDetail/ShareButton.js b/browser/main/ArticleDetail/ShareButton.js
similarity index 100%
rename from browser/main/HomePage/ArticleDetail/ShareButton.js
rename to browser/main/ArticleDetail/ShareButton.js
diff --git a/browser/main/HomePage/ArticleDetail/index.js b/browser/main/ArticleDetail/index.js
similarity index 99%
rename from browser/main/HomePage/ArticleDetail/index.js
rename to browser/main/ArticleDetail/index.js
index 73c45d98..cafc2875 100644
--- a/browser/main/HomePage/ArticleDetail/index.js
+++ b/browser/main/ArticleDetail/index.js
@@ -7,7 +7,7 @@ import TagSelect from 'browser/components/TagSelect'
 import ModeSelect from 'browser/components/ModeSelect'
 import ShareButton from './ShareButton'
 import { openModal, isModalOpen } from 'browser/lib/modal'
-import DeleteArticleModal from '../../modal/DeleteArticleModal'
+import DeleteArticleModal from '../modals/DeleteArticleModal'
 import ArticleEditor from './ArticleEditor'
 const electron = require('electron')
 const ipc = electron.ipcRenderer
diff --git a/browser/main/HomePage/ArticleList.js b/browser/main/ArticleList.js
similarity index 60%
rename from browser/main/HomePage/ArticleList.js
rename to browser/main/ArticleList.js
index afc56570..bcc7d6c3 100644
--- a/browser/main/HomePage/ArticleList.js
+++ b/browser/main/ArticleList.js
@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom'
 import ModeIcon from 'browser/components/ModeIcon'
 import moment from 'moment'
 import FolderMark from 'browser/components/FolderMark'
-import TagLink from './TagLink'
 import _ from 'lodash'
 
 const electron = require('electron')
@@ -129,55 +128,7 @@ export default class ArticleList extends React.Component {
   }
 
   render () {
-    let articles = []
-    let folders = []
-    let articleElements = articles.map((article) => {
-      let originalArticle = article
-      let tagElements = Array.isArray(article.tags) && article.tags.length > 0
-        ? article.tags.slice().map((tag) => {
-          return (<TagLink key={tag} tag={tag}/>)
-        })
-        : (<span>Not tagged yet</span>)
-      let folder = _.findWhere(folders, {key: article.FolderKey})
-      let folderChanged = originalArticle.FolderKey !== article.FolderKey
-      let originalFolder = folderChanged ? _.findWhere(folders, {key: originalArticle.FolderKey}) : null
-
-      let title = article.title.trim().length === 0
-        ? <small>(Untitled)</small>
-        : article.title
-
-      return (
-        <div key={'article-' + article.key}>
-          <div onClick={(e) => this.handleArticleClick(article)(e)} className={'ArticleList-item' + (article.key === 'ACTIVE_POST_KEY' ? ' active' : '')}>
-            <div className='ArticleList-item-top'>
-              {folder != null
-                ? folderChanged
-                  ? <span className='folderName'>
-                    <FolderMark color={originalFolder.color}/>{originalFolder.name}
-                    ->
-                    <FolderMark color={folder.color}/>{folder.name}
-                  </span>
-                  : <span className='folderName'>
-                    <FolderMark color={folder.color}/>{folder.name}
-                  </span>
-                : <span><FolderMark color={-1}/>Unknown</span>
-              }
-              <span className='updatedAt'>{moment(article.updatedAt).fromNow()}</span>
-            </div>
-            <div className='ArticleList-item-middle'>
-              <ModeIcon className='mode' mode={article.mode}/> <div className='title' children={title}/>
-            </div>
-            <div className='ArticleList-item-middle2'>
-              <pre><code children={article.content.trim().length === 0 ? '(Empty content)' : article.content.substring(0, 50)}/></pre>
-            </div>
-            <div className='ArticleList-item-bottom'>
-              <div className='tags'><i className='fa fa-fw fa-tags'/>{tagElements}</div>
-            </div>
-          </div>
-          <div className='divider'></div>
-        </div>
-      )
-    })
+    let articleElements = []
 
     return (
       <div tabIndex='3' onKeyDown={(e) => this.handleArticleListKeyDown(e)} className='ArticleList'>
diff --git a/browser/main/HomePage/ArticleTopBar.js b/browser/main/ArticleTopBar.js
similarity index 100%
rename from browser/main/HomePage/ArticleTopBar.js
rename to browser/main/ArticleTopBar.js
diff --git a/browser/main/HomePage/TagLink.js b/browser/main/HomePage/TagLink.js
deleted file mode 100644
index 2f2f4a1a..00000000
--- a/browser/main/HomePage/TagLink.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { PropTypes } from 'react'
-
-export default class TagLink extends React.Component {
-  handleClick (e) {
-  }
-  render () {
-    return (
-      <a onClick={(e) => this.handleClick(e)}>{this.props.tag}</a>
-    )
-  }
-}
-
-TagLink.propTypes = {
-  tag: PropTypes.string
-}
diff --git a/browser/main/HomePage/index.js b/browser/main/HomePage/index.js
deleted file mode 100644
index 93e06316..00000000
--- a/browser/main/HomePage/index.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import React, { PropTypes} from 'react'
-import { connect } from 'react-redux'
-import ReactDOM from 'react-dom'
-import SideNav from './SideNav'
-import ArticleTopBar from './ArticleTopBar'
-import ArticleList from './ArticleList'
-import ArticleDetail from './ArticleDetail'
-import { isModalOpen, closeModal } from 'browser/lib/modal'
-import Repository from 'browser/lib/Repository'
-
-const electron = require('electron')
-const remote = electron.remote
-
-const OSX = global.process.platform === 'darwin'
-
-class HomePage extends React.Component {
-  componentDidMount () {
-    let { dispatch } = this.props
-
-    // Bind directly to window
-    // this.keyHandler = (e) => this.handleKeyDown(e)
-    // window.addEventListener('keydown', this.keyHandler)
-
-    // Reload all data
-    Repository.loadAll()
-      .then((allData) => {
-        dispatch({type: 'INIT_ALL', data: allData})
-      })
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('keydown', this.keyHandler)
-  }
-
-  handleKeyDown (e) {
-    // if (isModalOpen()) {
-    //   if (e.keyCode === 13 && (OSX ? e.metaKey : e.ctrlKey)) {
-    //     remote.getCurrentWebContents().send('modal-confirm')
-    //   }
-    //   if (e.keyCode === 27) closeModal()
-    //   return
-    // }
-
-    // let { dispatch } = this.props
-    // let { top, list } = this.refs
-    // let listElement = ReactDOM.findDOMNode(list)
-
-    // if (status.isTutorialOpen) {
-    //   // dispatch(toggleTutorial())
-    //   e.preventDefault()
-    //   return
-    // }
-
-    // if (e.keyCode === 13 && top.isInputFocused()) {
-    //   listElement.focus()
-    //   return
-    // }
-    // if (e.keyCode === 27 && top.isInputFocused()) {
-    //   // if (status.search.length > 0) top.escape()
-    //   // else listElement.focus()
-    //   return
-    // }
-
-    // // Search inputがfocusされていたら大体のキー入力は無視される。
-    // if (e.keyCode === 27) {
-    //   if (document.activeElement !== listElement) {
-    //     listElement.focus()
-    //   } else {
-    //     top.focusInput()
-    //   }
-    //   return
-    // }
-  }
-
-  render () {
-    return (
-      <div className='HomePage'>
-        <SideNav
-          ref='nav'
-          {...this.props}
-        />
-        <ArticleTopBar
-          ref='top'
-          {...this.props}
-        />
-        <ArticleList
-          ref='list'
-          {...this.props}
-        />
-        <ArticleDetail
-          ref='detail'
-          {...this.props}
-        />
-      </div>
-    )
-  }
-}
-
-HomePage.propTypes = {
-  dispatch: PropTypes.func,
-  repositories: PropTypes.array
-}
-
-export default connect((x) => x)(HomePage)
diff --git a/browser/main/Main.js b/browser/main/Main.js
index 90841d0b..1a7abdaa 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -1,18 +1,30 @@
 const electron = require('electron')
+import { connect } from 'react-redux'
 const ipc = electron.ipcRenderer
 import React, { PropTypes } from 'react'
-import HomePage from './HomePage'
+import SideNav from './SideNav'
+import ArticleTopBar from './ArticleTopBar'
+import ArticleList from './ArticleList'
+import ArticleDetail from './ArticleDetail'
+import Repository from 'browser/lib/Repository'
 
-export default class MainContainer extends React.Component {
+class Main extends React.Component {
   constructor (props) {
     super(props)
     this.state = {updateAvailable: false}
   }
 
   componentDidMount () {
+    let { dispatch } = this.props
     ipc.on('update-available', function (message) {
       this.setState({updateAvailable: true})
     }.bind(this))
+
+    // Reload all data
+    Repository.loadAll()
+      .then((allData) => {
+        dispatch({type: 'INIT_ALL', data: allData})
+      })
   }
 
   updateApp () {
@@ -27,12 +39,31 @@ export default class MainContainer extends React.Component {
         {this.state.updateAvailable ? (
           <button onClick={this.updateApp} className='appUpdateButton'><i className='fa fa-cloud-download'/> Update available!</button>
         ) : null}
-        <HomePage {...this.props}/>
+
+        <SideNav
+          ref='nav'
+          {...this.props}
+        />
+        <ArticleTopBar
+          ref='top'
+          {...this.props}
+        />
+        <ArticleList
+          ref='list'
+          {...this.props}
+        />
+        <ArticleDetail
+          ref='detail'
+          {...this.props}
+        />
       </div>
     )
   }
 }
 
-MainContainer.propTypes = {
-  children: PropTypes.element
+Main.propTypes = {
+  dispatch: PropTypes.func,
+  repositories: PropTypes.array
 }
+
+export default connect((x) => x)(Main)
diff --git a/browser/main/HomePage/SideNav/FolderItem.js b/browser/main/SideNav/FolderItem.js
similarity index 100%
rename from browser/main/HomePage/SideNav/FolderItem.js
rename to browser/main/SideNav/FolderItem.js
diff --git a/browser/main/HomePage/SideNav/FolderItem.styl b/browser/main/SideNav/FolderItem.styl
similarity index 100%
rename from browser/main/HomePage/SideNav/FolderItem.styl
rename to browser/main/SideNav/FolderItem.styl
diff --git a/browser/main/HomePage/SideNav/RepositorySection.js b/browser/main/SideNav/RepositorySection.js
similarity index 100%
rename from browser/main/HomePage/SideNav/RepositorySection.js
rename to browser/main/SideNav/RepositorySection.js
diff --git a/browser/main/HomePage/SideNav/RepositorySection.styl b/browser/main/SideNav/RepositorySection.styl
similarity index 100%
rename from browser/main/HomePage/SideNav/RepositorySection.styl
rename to browser/main/SideNav/RepositorySection.styl
diff --git a/browser/main/HomePage/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
similarity index 100%
rename from browser/main/HomePage/SideNav/SideNav.styl
rename to browser/main/SideNav/SideNav.styl
diff --git a/browser/main/HomePage/SideNav/index.js b/browser/main/SideNav/index.js
similarity index 96%
rename from browser/main/HomePage/SideNav/index.js
rename to browser/main/SideNav/index.js
index dc21d019..115a9ef4 100644
--- a/browser/main/HomePage/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -2,9 +2,9 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SideNav.styl'
 import { openModal } from 'browser/lib/modal'
-import Preferences from '../../modal/Preferences'
+import Preferences from '../modals/Preferences'
 import RepositorySection from './RepositorySection'
-import NewRepositoryModal from '../../modal/NewRepositoryModal'
+import NewRepositoryModal from '../modals/NewRepositoryModal'
 
 const electron = require('electron')
 const { remote } = electron
diff --git a/browser/main/modal/CreateNewFolder.js b/browser/main/modal/CreateNewFolder.js
deleted file mode 100644
index 9ff61a4b..00000000
--- a/browser/main/modal/CreateNewFolder.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import React, { PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import linkState from 'browser/lib/linkState'
-import store from '../store'
-import FolderMark from 'browser/components/FolderMark'
-
-export default class CreateNewFolder extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      name: '',
-      color: Math.round(Math.random() * 7),
-      alert: null
-    }
-  }
-
-  componentDidMount () {
-    ReactDOM.findDOMNode(this.refs.folderName).focus()
-  }
-
-  handleCloseButton (e) {
-    this.props.close()
-  }
-
-  handleConfirmButton (e) {
-    this.setState({alert: null}, () => {
-      let { close } = this.props
-      let { name, color } = this.state
-
-      let input = {
-        name,
-        color
-      }
-      try {
-        // store.dispatch(createFolder(input))
-      } catch (e) {
-        this.setState({alert: {
-          type: 'error',
-          message: e.message
-        }})
-        return
-      }
-      close()
-    })
-  }
-
-  handleColorClick (colorIndex) {
-    return (e) => {
-      this.setState({
-        color: colorIndex
-      })
-    }
-  }
-
-  handleKeyDown (e) {
-    if (e.keyCode === 13) {
-      this.handleConfirmButton()
-    }
-  }
-
-  render () {
-    let alert = this.state.alert
-    let alertElement = alert != null ? (
-      <p className={`alert ${alert.type}`}>
-        {alert.message}
-      </p>
-    ) : null
-    let colorIndexes = []
-    for (let i = 0; i < 8; i++) {
-      colorIndexes.push(i)
-    }
-    let colorElements = colorIndexes.map((index) => {
-      let className = 'option'
-      if (index === this.state.color) className += ' active'
-
-      return (
-        <span className={className} key={index} onClick={(e) => this.handleColorClick(index)(e)}>
-          <FolderMark color={index}/>
-        </span>
-      )
-    })
-
-    return (
-      <div className='CreateNewFolder modal'>
-        <button onClick={(e) => this.handleCloseButton(e)} className='closeBtn'><i className='fa fa-fw fa-times'/></button>
-
-        <div className='title'>Create new folder</div>
-
-        <input ref='folderName' onKeyDown={(e) => this.handleKeyDown(e)} className='ipt' type='text' valueLink={this.linkState('name')} placeholder='Enter folder name'/>
-        <div className='colorSelect'>
-          {colorElements}
-        </div>
-        {alertElement}
-
-        <button onClick={(e) => this.handleConfirmButton(e)} className='confirmBtn'>Create</button>
-      </div>
-    )
-  }
-}
-
-CreateNewFolder.propTypes = {
-  close: PropTypes.func
-}
-
-CreateNewFolder.prototype.linkState = linkState
diff --git a/browser/main/modal/Preference/FolderRow.js b/browser/main/modal/Preference/FolderRow.js
deleted file mode 100644
index 6e9bb11e..00000000
--- a/browser/main/modal/Preference/FolderRow.js
+++ /dev/null
@@ -1,184 +0,0 @@
-import React, { PropTypes } from 'react'
-import linkState from 'browser/lib/linkState'
-import FolderMark from 'browser/components/FolderMark'
-import store from '../../store'
-
-const IDLE = 'IDLE'
-const EDIT = 'EDIT'
-const DELETE = 'DELETE'
-
-export default class FolderRow extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      mode: IDLE
-    }
-  }
-
-  handleUpClick (e) {
-    let { index } = this.props
-    if (index > 0) {
-      // store.dispatch(replaceFolder(index, index - 1))
-    }
-  }
-
-  handleDownClick (e) {
-    let { index, count } = this.props
-    if (index < count - 1) {
-      // store.dispatch(replaceFolder(index, index + 1))
-    }
-  }
-
-  handleCancelButtonClick (e) {
-    this.setState({
-      mode: IDLE
-    })
-  }
-
-  handleEditButtonClick (e) {
-    this.setState({
-      mode: EDIT,
-      name: this.props.folder.name,
-      color: this.props.folder.color,
-      isColorEditing: false
-    })
-  }
-
-  handleDeleteButtonClick (e) {
-    this.setState({mode: DELETE})
-  }
-
-  handleNameInputKeyDown (e) {
-    if (e.keyCode === 13) {
-      this.handleSaveButtonClick()
-    }
-  }
-
-  handleColorSelectClick (e) {
-    this.setState({
-      isColorEditing: true
-    })
-  }
-
-  handleColorButtonClick (index) {
-    return (e) => {
-      this.setState({
-        color: index,
-        isColorEditing: false
-      })
-    }
-  }
-
-  handleSaveButtonClick (e) {
-    let { folder, setAlert } = this.props
-
-    setAlert(null, () => {
-      let input = {
-        name: this.state.name,
-        color: this.state.color
-      }
-      folder = Object.assign({}, folder, input)
-
-      try {
-        // store.dispatch(updateFolder(folder))
-        this.setState({
-          mode: IDLE
-        })
-      } catch (e) {
-        console.error(e)
-        setAlert({
-          type: 'error',
-          message: e.message
-        })
-      }
-    })
-  }
-
-  handleDeleteConfirmButtonClick (e) {
-    let { folder } = this.props
-    // store.dispatch(destroyFolder(folder.key))
-  }
-
-  render () {
-    let folder = this.props.folder
-
-    switch (this.state.mode) {
-      case EDIT:
-        let colorIndexes = []
-        for (let i = 0; i < 8; i++) {
-          colorIndexes.push(i)
-        }
-
-        let colorOptions = colorIndexes.map((index) => {
-          let className = this.state.color === index
-            ? 'active'
-            : null
-          return (
-            <button onClick={(e) => this.handleColorButtonClick(index)(e)} className={className} key={index}>
-              <FolderMark color={index}/>
-            </button>
-          )
-        })
-
-        return (
-          <div className='FolderRow edit'>
-            <div className='folderColor'>
-              <button onClick={(e) => this.handleColorSelectClick(e)} className='select'>
-                <FolderMark color={this.state.color}/>
-              </button>
-              {this.state.isColorEditing
-                ? <div className='options'>
-                  <div className='label'>Color select</div>
-                  {colorOptions}
-                </div>
-                : null
-              }
-            </div>
-            <div className='folderName'>
-              <input onKeyDown={(e) => this.handleNameInputKeyDown(e)} valueLink={this.linkState('name')} type='text'/>
-            </div>
-            <div className='folderControl'>
-              <button onClick={(e) => this.handleSaveButtonClick(e)} className='primary'>Save</button>
-              <button onClick={(e) => this.handleCancelButtonClick(e)}>Cancel</button>
-            </div>
-          </div>
-        )
-      case DELETE:
-        return (
-          <div className='FolderRow delete'>
-            <div className='folderDeleteLabel'>Are you sure to delete <strong>{folder.name}</strong> folder?</div>
-            <div className='folderControl'>
-              <button onClick={(e) => this.handleDeleteConfirmButtonClick(e)} className='primary'>Sure</button>
-              <button onClick={(e) => this.handleCancelButtonClick(e)}>Cancel</button>
-            </div>
-          </div>
-        )
-      case IDLE:
-      default:
-        return (
-          <div className='FolderRow'>
-            <div className='sortBtns'>
-              <button onClick={(e) => this.handleUpClick(e)}><i className='fa fa-sort-up fa-fw'/></button>
-              <button onClick={(e) => this.handleDownClick(e)}><i className='fa fa-sort-down fa-fw'/></button>
-            </div>
-            <div className='folderColor'><FolderMark color={folder.color}/></div>
-            <div className='folderName'>{folder.name}</div>
-            <div className='folderControl'>
-              <button onClick={(e) => this.handleEditButtonClick(e)}><i className='fa fa-fw fa-edit'/></button>
-              <button onClick={(e) => this.handleDeleteButtonClick(e)}><i className='fa fa-fw fa-close'/></button>
-            </div>
-          </div>
-        )
-    }
-  }
-}
-
-FolderRow.propTypes = {
-  folder: PropTypes.shape(),
-  index: PropTypes.number,
-  count: PropTypes.number,
-  setAlert: PropTypes.func
-}
-
-FolderRow.prototype.linkState = linkState
diff --git a/browser/main/modal/DeleteArticleModal.js b/browser/main/modals/DeleteArticleModal.js
similarity index 100%
rename from browser/main/modal/DeleteArticleModal.js
rename to browser/main/modals/DeleteArticleModal.js
diff --git a/browser/main/modal/NewRepositoryModal.js b/browser/main/modals/NewRepositoryModal.js
similarity index 100%
rename from browser/main/modal/NewRepositoryModal.js
rename to browser/main/modals/NewRepositoryModal.js
diff --git a/browser/main/modal/NewRepositoryModal.styl b/browser/main/modals/NewRepositoryModal.styl
similarity index 100%
rename from browser/main/modal/NewRepositoryModal.styl
rename to browser/main/modals/NewRepositoryModal.styl
diff --git a/browser/main/modal/Preference/AppSettingTab.js b/browser/main/modals/Preferences/AppSettingTab.js
similarity index 100%
rename from browser/main/modal/Preference/AppSettingTab.js
rename to browser/main/modals/Preferences/AppSettingTab.js
diff --git a/browser/main/modal/Preference/ContactTab.js b/browser/main/modals/Preferences/ContactTab.js
similarity index 100%
rename from browser/main/modal/Preference/ContactTab.js
rename to browser/main/modals/Preferences/ContactTab.js
diff --git a/browser/main/modal/Preferences.js b/browser/main/modals/Preferences/index.js
similarity index 93%
rename from browser/main/modal/Preferences.js
rename to browser/main/modals/Preferences/index.js
index 82ea0d13..a399afd2 100644
--- a/browser/main/modal/Preferences.js
+++ b/browser/main/modals/Preferences/index.js
@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react'
 import { connect, Provider } from 'react-redux'
 import linkState from 'browser/lib/linkState'
-import store from '../store'
-import AppSettingTab from './Preference/AppSettingTab'
-import ContactTab from './Preference/ContactTab'
+import store from 'browser/main/store'
+import AppSettingTab from './AppSettingTab'
+import ContactTab from './ContactTab'
 import { closeModal } from 'browser/lib/modal'
 
 const APP = 'APP'

From ba4d90765a2ff930804dd2b2ee663fa61f3a9bdb Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Fri, 13 May 2016 03:17:08 +0900
Subject: [PATCH 032/109] devtron

---
 browser/main/index.js | 3 +++
 package.json          | 1 +
 webpack-skeleton.js   | 1 +
 3 files changed, 5 insertions(+)

diff --git a/browser/main/index.js b/browser/main/index.js
index 8f2d8eb5..8765bd3f 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -12,6 +12,9 @@ const ipc = electron.ipcRenderer
 const path = require('path')
 import { syncHistoryWithStore } from 'react-router-redux'
 
+const PRO = process.env.NODE_ENV === 'production'
+if (!PRO) require('devtron').install()
+
 const remote = electron.remote
 
 let config = fetchConfig()
diff --git a/package.json b/package.json
index fedb4d03..81817a59 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "babel-preset-react": "^6.3.13",
     "babel-preset-react-hmre": "^1.0.1",
     "css-loader": "^0.19.0",
+    "devtron": "^1.1.0",
     "electron-packager": "^6.0.0",
     "electron-prebuilt": "^0.36.12",
     "electron-release": "^2.2.0",
diff --git a/webpack-skeleton.js b/webpack-skeleton.js
index 5638cd82..4a399d06 100644
--- a/webpack-skeleton.js
+++ b/webpack-skeleton.js
@@ -41,6 +41,7 @@ var config = {
     '@rokt33r/sanitize-html',
     'markdown-it-checkbox',
     'season',
+    'devtron',
     {
       react: 'var React',
       'react-dom': 'var ReactDOM',

From 5dff50ff92676eef29264588691e252f927cf189 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Fri, 13 May 2016 03:20:35 +0900
Subject: [PATCH 033/109] upgrade electron

---
 lib/main-window.js | 2 +-
 package.json       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/main-window.js b/lib/main-window.js
index a6f728f3..72fbb8ff 100644
--- a/lib/main-window.js
+++ b/lib/main-window.js
@@ -6,8 +6,8 @@ const path = require('path')
 var mainWindow = new BrowserWindow({
   width: 1080,
   height: 720,
-  zoomFactor: 1.0,
   webPreferences: {
+    zoomFactor: 1.0,
     blinkFeatures: 'OverlayScrollbars'
   }
 })
diff --git a/package.json b/package.json
index 81817a59..eb8165f4 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "css-loader": "^0.19.0",
     "devtron": "^1.1.0",
     "electron-packager": "^6.0.0",
-    "electron-prebuilt": "^0.36.12",
+    "electron-prebuilt": "^0.37.8",
     "electron-release": "^2.2.0",
     "grunt": "^0.4.5",
     "grunt-electron-installer": "^1.2.0",

From 9deaa8694e80d45a8676b3ca02f19eb6ce3f618f Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 12:23:49 +0900
Subject: [PATCH 034/109] simplify keygen

---
 browser/lib/keygen.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/browser/lib/keygen.js b/browser/lib/keygen.js
index da8cf6b1..05d166b9 100644
--- a/browser/lib/keygen.js
+++ b/browser/lib/keygen.js
@@ -1,7 +1,7 @@
-var crypto = require('crypto')
+const crypto = require('crypto')
+const _ = require('lodash')
 
-module.exports = function () {
-  var shasum = crypto.createHash('sha1')
-  shasum.update(((new Date()).getTime() + Math.round(Math.random()*1000)).toString())
-  return shasum.digest('hex')
+module.exports = function (length) {
+  if (!_.isFinite(length)) length = 12
+  return crypto.randomBytes(length).toString('hex')
 }

From 6ebde04d221b02d630ff6a176b000800b954499c Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 12:24:24 +0900
Subject: [PATCH 035/109] add ConfigManager & ZoomManager

---
 browser/main/lib/ConfigManager.js | 45 +++++++++++++++++++++++++++++++
 browser/main/lib/ZoomManager.js   | 30 +++++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 browser/main/lib/ConfigManager.js
 create mode 100644 browser/main/lib/ZoomManager.js

diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
new file mode 100644
index 00000000..71153544
--- /dev/null
+++ b/browser/main/lib/ConfigManager.js
@@ -0,0 +1,45 @@
+import _ from 'lodash'
+
+const defaultConfig = {
+  zoom: 1,
+  isSideNavFolded: false
+}
+
+function _validate (config) {
+  if (!_.isObject(config)) return false
+  if (!_.isNumber(config.zoom) || config.zoom < 0) return false
+  if (!_.isBoolean(config.isSideNavFolded)) return false
+
+  return true
+}
+
+function _save (config) {
+  window.localStorage.setItem('config', JSON.stringify(config))
+}
+
+function get () {
+  let config = window.localStorage.getItem('config')
+
+  try {
+    config = JSON.parse(config)
+    if (!_validate(config)) throw new Error('INVALID CONFIG')
+  } catch (err) {
+    console.warn('Boostnote resets the malformed configuration.')
+    config = defaultConfig
+    _save(config)
+  }
+
+  return config
+}
+
+function set (updates) {
+  let currentConfig = get()
+  let newConfig = Object.assign({}, defaultConfig, currentConfig, updates)
+  if (!_validate(newConfig)) throw new Error('INVALID CONFIG')
+  _save(newConfig)
+}
+
+export default {
+  get,
+  set
+}
diff --git a/browser/main/lib/ZoomManager.js b/browser/main/lib/ZoomManager.js
new file mode 100644
index 00000000..463df222
--- /dev/null
+++ b/browser/main/lib/ZoomManager.js
@@ -0,0 +1,30 @@
+import ConfigManager from './ConfigManager'
+
+const electron = require('electron')
+const { remote } = electron
+
+_init()
+
+function _init () {
+  setZoom(getZoom(), true)
+}
+
+function _saveZoom (zoomFactor) {
+  ConfigManager.set({zoom: zoomFactor})
+}
+
+function setZoom (zoomFactor, noSave = false) {
+  if (!noSave) _saveZoom(zoomFactor)
+  remote.getCurrentWebContents().setZoomFactor(zoomFactor)
+}
+
+function getZoom () {
+  let config = ConfigManager.get()
+
+  return config.zoom
+}
+
+export default {
+  setZoom,
+  getZoom
+}

From be2897806abf21562feef22a6f386c83aaa3e136 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 12:26:11 +0900
Subject: [PATCH 036/109] show empty warning properly when SideNav folded

---
 browser/main/SideNav/SideNav.styl | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index c9bd6592..72ce51c8 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -75,6 +75,9 @@
 .root-folded
   @extend .root
   width 44px
+  .repositoryList-empty
+    white-space nowrap
+    transform rotate(90deg)
   .top-menu
     width 44px
     text-align center

From 4d3d416ecb3efcc82c9e591dd2ccd41922356142 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 12:27:28 +0900
Subject: [PATCH 037/109] use ConfigManager

---
 browser/main/SideNav/index.js | 11 +++++++----
 browser/main/store.js         | 18 ++++++++++--------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 115a9ef4..6cd56c8a 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -5,6 +5,7 @@ import { openModal } from 'browser/lib/modal'
 import Preferences from '../modals/Preferences'
 import RepositorySection from './RepositorySection'
 import NewRepositoryModal from '../modals/NewRepositoryModal'
+import ConfigManager from 'browser/main/lib/ConfigManager'
 
 const electron = require('electron')
 const { remote } = electron
@@ -46,17 +47,19 @@ class SideNav extends React.Component {
   }
 
   handleToggleButtonClick (e) {
-    let { dispatch } = this.props
+    let { dispatch, config } = this.props
 
+    ConfigManager.set({isSideNavFolded: !config.isSideNavFolded})
     dispatch({
-      type: 'TOGGLE_SIDENAV'
+      type: 'SET_IS_SIDENAV_FOLDED',
+      isFolded: !config.isSideNavFolded
     })
   }
 
   render () {
-    let { repositories, dispatch, location, status } = this.props
+    let { repositories, dispatch, location, config } = this.props
 
-    let isFolded = !status.sideNavExpand
+    let isFolded = config.isSideNavFolded
     let isHomeActive = location.pathname.match(/^\/home$/)
     let isStarredActive = location.pathname.match(/^\/starred$/)
 
diff --git a/browser/main/store.js b/browser/main/store.js
index 4d16598c..0d37038b 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -1,6 +1,7 @@
 import { combineReducers, createStore } from 'redux'
 import _ from 'lodash'
-import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
+import { routerReducer } from 'react-router-redux'
+import ConfigManager from 'browser/main/lib/ConfigManager'
 
 /**
  * Repositories
@@ -110,14 +111,15 @@ function repositories (state = initialRepositories, action) {
   return state
 }
 
-const defaultStatus = {
-  sideNavExpand: false
-}
+const defaultConfig = ConfigManager.get()
 
-function status (state = defaultStatus, action) {
+function config (state = defaultConfig, action) {
   switch (action.type) {
-    case 'TOGGLE_SIDENAV':
-      state.sideNavExpand = !state.sideNavExpand
+    case 'SET_IS_SIDENAV_FOLDED':
+      state.isSideNavFolded = action.isFolded
+      return Object.assign({}, state)
+    case 'SET_ZOOM':
+      state.zoom = action.zoom
       return Object.assign({}, state)
   }
   return state
@@ -125,7 +127,7 @@ function status (state = defaultStatus, action) {
 
 let reducer = combineReducers({
   repositories,
-  status,
+  config,
   routing: routerReducer
 })
 

From 508615b600bf1d0c79cf32607f226bd37d460b4c Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 12:29:38 +0900
Subject: [PATCH 038/109] add StatusBar & Zoom UI

---
 browser/main/SideNav/SideNav.styl     |  3 +-
 browser/main/StatusBar/StatusBar.styl | 40 ++++++++++++
 browser/main/StatusBar/index.js       | 94 +++++++++++++++++++++++++++
 3 files changed, 136 insertions(+), 1 deletion(-)
 create mode 100644 browser/main/StatusBar/StatusBar.styl
 create mode 100644 browser/main/StatusBar/index.js

diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 72ce51c8..9209b670 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -1,5 +1,6 @@
 .root
-  absolute top bottom left
+  absolute top left
+  bottom 24px
   width 200px
   border-right solid 1px $nav-border-color
   background-color $nav-background-color
diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl
new file mode 100644
index 00000000..203c5375
--- /dev/null
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -0,0 +1,40 @@
+.root
+  absolute bottom left right
+  height 24px
+  border-top solid 1px $nav-border-color
+  background-color $nav-background-color
+
+.zoom
+  absolute right
+  height 24px
+  width 60px
+  border-width 0 1px
+  border-style solid
+  border-color $nav-border-color
+  background-color transparent
+  color $nav-inactive-text-color
+  transition color background-color 0.15s
+  &:hover
+    background-color $nav-hover-background
+    color $nav-inactive-text-color
+  &:active
+    background-color $nav-active-background
+    color $nav-text-color
+
+.update
+  position absolute
+  right 60px
+  height 24px
+  border-width 0 0 0 1px
+  border-style solid
+  border-color $nav-border-color
+  background-color transparent
+  color $brand-color
+  transition color background-color 0.15s
+  &:hover
+    background-color $nav-hover-background
+    color $brand-color
+  &:active
+    background-color $nav-active-background
+    color $brand-color
+
diff --git a/browser/main/StatusBar/index.js b/browser/main/StatusBar/index.js
new file mode 100644
index 00000000..ffd3782c
--- /dev/null
+++ b/browser/main/StatusBar/index.js
@@ -0,0 +1,94 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './StatusBar.styl'
+import ZoomManager from 'browser/main/lib/ZoomManager'
+
+const electron = require('electron')
+const ipc = electron.ipcRenderer
+const { remote } = electron
+const { Menu, MenuItem } = remote
+
+class StatusBar extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {updateAvailable: false}
+  }
+
+  componentDidMount () {
+    ipc.on('update-available', function (message) {
+      this.setState({updateAvailable: true})
+    }.bind(this))
+  }
+
+  updateApp () {
+    ipc.send('update-app', 'Deal with it.')
+  }
+
+  handleZoomButtonClick (e) {
+    let menu = new Menu()
+    menu.append(new MenuItem({
+      label: '130%',
+      click: () => this.handleZoomMenuItemClick(1.3)
+    }))
+    menu.append(new MenuItem({
+      label: '120%',
+      click: () => this.handleZoomMenuItemClick(1.2)
+    }))
+    menu.append(new MenuItem({
+      label: '110%',
+      click: () => this.handleZoomMenuItemClick(1.1)
+    }))
+    menu.append(new MenuItem({
+      label: '100%',
+      click: () => this.handleZoomMenuItemClick(1)
+    }))
+    menu.append(new MenuItem({
+      label: '90%',
+      click: () => this.handleZoomMenuItemClick(0.9)
+    }))
+    menu.append(new MenuItem({
+      label: '80%',
+      click: () => this.handleZoomMenuItemClick(0.8)
+    }))
+    menu.popup(remote.getCurrentWindow())
+  }
+
+  handleZoomMenuItemClick (zoomFactor) {
+    let { dispatch } = this.props
+    ZoomManager.setZoom(zoomFactor)
+    dispatch({
+      type: 'SET_ZOOM',
+      zoom: zoomFactor
+    })
+  }
+
+  render () {
+    let { config } = this.props
+    return (
+      <div className='StatusBar'
+        styleName='root'
+      >
+        {this.state.updateAvailable
+          ? <button onClick={this.updateApp} styleName='update'>
+            <i className='fa fa-cloud-download'/> Update is available!
+          </button>
+          : null
+        }
+        <button styleName='zoom'
+          onClick={(e) => this.handleZoomButtonClick(e)}
+        >
+          <i className='fa fa-search-plus'/>&nbsp;
+          {Math.floor(config.zoom * 100)}%
+        </button>
+      </div>
+    )
+  }
+}
+
+StatusBar.propTypes = {
+  config: PropTypes.shape({
+    zoom: PropTypes.number
+  })
+}
+
+export default CSSModules(StatusBar, styles)

From e99e3eb6c40b2184eedf3fbaa422b7cba8c850cd Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 12:29:53 +0900
Subject: [PATCH 039/109] update readme

---
 readme.md | 101 +++++++++++++-----------------------------------------
 1 file changed, 24 insertions(+), 77 deletions(-)

diff --git a/readme.md b/readme.md
index a66d8f9c..597af87a 100644
--- a/readme.md
+++ b/readme.md
@@ -2,13 +2,13 @@
 
 Simple note app
 
-## Progress Kanban
+## Inspired by
 
-https://trello.com/b/wJlinZJx/boostnote-todo-list
-
-This is a public Kanban board. Also everyone can comment here.
-
-If you want to join us, ask me to add you.
+- Atom
+- Quiver
+- Evernote
+- GitKraken
+- GitBook
 
 ## System requirement
 
@@ -18,103 +18,50 @@ You can check it from [here](https://github.com/electron/electron/blob/master/do
 
 Currently, I'm testing this app on Windows 10(64bit), OS X El Capitan, Ubuntu Linux, Arch Linux.
 
-## About note storage
-
-Currently, Boostnote stores data to a single json file.
-
-You can find it from the path below.
-
-OS X
-```
-/Users/$USER_NAME$/Library/Application Support/boost/local.json
-```
-
-Windows
-```
-C:\Users\$USER_NAME$\AppData\Roaming\boost\local.json
-```
-
-On v0.6.0, You will be able to select any folder in your file system.
-
 ## Develop
 
 1. turn on HMR server
 
-```
-npm run webpack
-```
+  ```
+  npm run webpack
+  ```
 
 2. run hot mode
 
-```
-npm run hot
-```
+  ```
+  npm run hot
+  ```
 
 > `npm start` is using compiled scripts. see [Build](#Build) to compile scripts.
 
-
 ## Build
 
-> '3. Codesign' and '4. Create' installer are needed to deploy this app.
-> You can skip these steps.
-
 1. Compile scripts
 
-compile all browser stuff(Javascript, Stylus).
+  compile all browser stuff(Javascript, Stylus).
 
-```
-grunt compile
-```
+  ```
+  grunt compile
+  ```
 
 2. Build executable
 
-build `Boostnote.app` (OS X) / `Boostnote.exe` (Windows)
+  build `Boostnote.app` (OS X) / `Boostnote.exe` (Windows)
 
-```
-grunt pack:osx
-grunt pack:windows
-```
+  ```
+  grunt pack:osx
+  grunt pack:windows
+  ```
 
-3. Codesign (OSX only)
-
-codesign with Certification.
-
-```
-grunt codesign
-```
-
-> `OSX_COMMON_NAME` must be defined inside `/secret/auth_code.json`.
-
-> codesigning on windows is included to creating installer.
-
-4. Create installer
-
-create installer, `Boostnote.dmg`(OSX) / `Setup.exe`(Windows).
-
-```
-grunt create-windows-installer
-```
-
-> #### Windows only
-> `WIN_CERT_PASSWORD` must be defined inside `/secret/auth_code.json`.
-> `/secret/authenticode_cer.p12` is required also.
-
-5. Zip (OSX only)
-
-zip `Boostnote.app` file.
-
-```
-grunt zip:osx
-```
-
-> Stuff(Setup.exe, .nupkg) of Windows are not needed to be zipped.
+Also there are some tasks for CodeSign(OS X) and Authenticode(Windows). To use these tasks, you need to aquire your own certifications.
 
 ## Using stack
 
 - Electron
 - React
 - Webpack
-... check [`package.json`](./package.json)
+- Redux
+- CSSModules
 
 
 ## Codestyle

From 04e5034f5fd47782beb60636b5878a64a83b0375 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 12:45:07 +0900
Subject: [PATCH 040/109] add StatusBar to Main

---
 browser/main/Main.js | 28 +++++-----------------------
 1 file changed, 5 insertions(+), 23 deletions(-)

diff --git a/browser/main/Main.js b/browser/main/Main.js
index 1a7abdaa..1a975910 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -1,24 +1,15 @@
-const electron = require('electron')
-import { connect } from 'react-redux'
-const ipc = electron.ipcRenderer
 import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
 import SideNav from './SideNav'
 import ArticleTopBar from './ArticleTopBar'
 import ArticleList from './ArticleList'
 import ArticleDetail from './ArticleDetail'
 import Repository from 'browser/lib/Repository'
+import StatusBar from './StatusBar'
 
 class Main extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = {updateAvailable: false}
-  }
-
   componentDidMount () {
     let { dispatch } = this.props
-    ipc.on('update-available', function (message) {
-      this.setState({updateAvailable: true})
-    }.bind(this))
 
     // Reload all data
     Repository.loadAll()
@@ -27,33 +18,24 @@ class Main extends React.Component {
       })
   }
 
-  updateApp () {
-    ipc.send('update-app', 'Deal with it.')
-  }
-
   render () {
     return (
       <div
         className='Main'
       >
-        {this.state.updateAvailable ? (
-          <button onClick={this.updateApp} className='appUpdateButton'><i className='fa fa-cloud-download'/> Update available!</button>
-        ) : null}
-
         <SideNav
-          ref='nav'
           {...this.props}
         />
         <ArticleTopBar
-          ref='top'
           {...this.props}
         />
         <ArticleList
-          ref='list'
           {...this.props}
         />
         <ArticleDetail
-          ref='detail'
+          {...this.props}
+        />
+        <StatusBar
           {...this.props}
         />
       </div>

From 9869545777c2cf2eac27e05dab50d4a91c2318e0 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 12:45:49 +0900
Subject: [PATCH 041/109] remove linkState function & move modal.js to main/lib

---
 browser/components/TagSelect.js               |   3 -
 browser/lib/linkState.js                      |  36 ------
 browser/main/ArticleDetail/index.js           |   4 +-
 browser/main/ArticleTopBar.js                 | 109 +-----------------
 browser/main/SideNav/RepositorySection.js     |   2 +-
 browser/main/SideNav/index.js                 |   2 +-
 browser/{ => main}/lib/modal.js               |  10 +-
 .../main/modals/Preferences/AppSettingTab.js  |   2 -
 browser/main/modals/Preferences/ContactTab.js |   3 -
 browser/main/modals/Preferences/index.js      |  19 +--
 10 files changed, 12 insertions(+), 178 deletions(-)
 delete mode 100644 browser/lib/linkState.js
 rename browser/{ => main}/lib/modal.js (84%)

diff --git a/browser/components/TagSelect.js b/browser/components/TagSelect.js
index dbbc456f..2e631bef 100644
--- a/browser/components/TagSelect.js
+++ b/browser/components/TagSelect.js
@@ -1,7 +1,6 @@
 import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import _ from 'lodash'
-import linkState from '../lib/linkState'
 
 function isNotEmptyString (str) {
   return _.isString(str) && str.length > 0
@@ -164,5 +163,3 @@ TagSelect.propTypes = {
   onChange: PropTypes.func,
   suggestTags: PropTypes.array
 }
-
-TagSelect.prototype.linkState = linkState
diff --git a/browser/lib/linkState.js b/browser/lib/linkState.js
deleted file mode 100644
index 2b874615..00000000
--- a/browser/lib/linkState.js
+++ /dev/null
@@ -1,36 +0,0 @@
-function getIn (object, path) {
-  let stack = path.split('.')
-  while (stack.length > 1) {
-    object = object[stack.shift()]
-  }
-  return object[stack.shift()]
-}
-
-function updateIn (object, path, value) {
-  let current = object
-  let stack = path.split('.')
-  while (stack.length > 1) {
-    current = current[stack.shift()]
-  }
-  current[stack.shift()] = value
-  return object
-}
-
-function setPartialState (component, path, value) {
-  component.setState(
-    updateIn(component.state, path, value))
-}
-
-export default function linkState (path) {
-  return {
-    value: getIn(this.state, path),
-    requestChange: setPartialState.bind(null, this, path)
-  }
-}
-
-export function linkState2 (el, path) {
-  return {
-    value: getIn(el.state, path),
-    requestChange: setPartialState.bind(null, el, path)
-  }
-}
diff --git a/browser/main/ArticleDetail/index.js b/browser/main/ArticleDetail/index.js
index cafc2875..1db13315 100644
--- a/browser/main/ArticleDetail/index.js
+++ b/browser/main/ArticleDetail/index.js
@@ -2,11 +2,10 @@ import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import moment from 'moment'
 import _ from 'lodash'
-import linkState from 'browser/lib/linkState'
 import TagSelect from 'browser/components/TagSelect'
 import ModeSelect from 'browser/components/ModeSelect'
 import ShareButton from './ShareButton'
-import { openModal, isModalOpen } from 'browser/lib/modal'
+import { openModal, isModalOpen } from 'browser/main/lib/modal'
 import DeleteArticleModal from '../modals/DeleteArticleModal'
 import ArticleEditor from './ArticleEditor'
 const electron = require('electron')
@@ -338,4 +337,3 @@ ArticleDetail.propTypes = {
   dispatch: PropTypes.func,
   repositories: PropTypes.array
 }
-ArticleDetail.prototype.linkState = linkState
diff --git a/browser/main/ArticleTopBar.js b/browser/main/ArticleTopBar.js
index 9e7c4cc2..bb33becb 100644
--- a/browser/main/ArticleTopBar.js
+++ b/browser/main/ArticleTopBar.js
@@ -1,107 +1,20 @@
 import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import ExternalLink from 'browser/components/ExternalLink'
-import { isModalOpen } from 'browser/lib/modal'
 import activityRecord from 'browser/lib/activityRecord'
 
-const electron = require('electron')
-const ipc = electron.ipcRenderer
-
-const OSX = global.process.platform === 'darwin'
-
-const BRAND_COLOR = '#18AF90'
-
-const searchTutorialElement = (
-  <svg width='750' height='300' className='tutorial'>
-    <text x='125' y='63' fill={BRAND_COLOR} fontSize='24'>Search some posts!!</text>
-    <text x='125' y='90' fill={BRAND_COLOR} fontSize='18'>{'- Search by tag : #{string}'}</text>
-    <text x='125' y='115' fill={BRAND_COLOR} fontSize='18'>
-    {'- Search by folder : /{folder_name}\n'}</text>
-    <text x='140' y='135' fill={BRAND_COLOR} fontSize='14'>
-    {'exact match : //{folder_name}'}</text>
-
-    <svg x='90' width='500' height='300'>
-      <path fill='white' d='M27.2,6.9c-1.7,3.5-6,4.8-8,8.2c-1.8,3.1-2.1,6.8-1.8,10.2c0.7,7,4.2,16.7,10.3,20.7c0.5,0.4,1.4,0.2,1.8-0.2
-        c0.1-0.1,0.2-0.2,0.3-0.3c0.6-0.6,0.6-1.5,0-2.1c-0.2-0.2-0.3-0.4-0.5-0.5c-1.3-1.4-3.2,0.7-1.9,2.1c0.2,0.2-0.3,0.4,0.7,0.5
-        c0-0.7,0-1.4,0-2.1c0,0.1-0.4,0.2-0.5,0.3c0.6-0.1,1.1-0.2,1.7-0.2c-5.7-3.7-9.2-14.5-9-20.9c0.1-4,1.6-6.7,4.8-9.1
-        c2-1.5,3.6-2.6,4.7-4.9C30.6,6.7,28,5.2,27.2,6.9L27.2,6.9z'/>
-      <path fill='white' d='M9.5,24.4c2.4-2.7,4.9-5.4,7.3-8c2.5-2.8,5.7-7.6,9.9-7.8c-0.5-0.5-1-1-1.5-1.5c0.1,6.8,1.9,13.1,5.3,18.9
-        c1,1.7,3.6,0.2,2.6-1.5c-3.2-5.4-4.8-11.1-4.9-17.4c0-0.8-0.7-1.5-1.5-1.5c-3.6,0.2-5.9,2.1-8.3,4.7c-3.7,3.9-7.3,8-11,12
-        C6.1,23.7,8.2,25.9,9.5,24.4L9.5,24.4z'/>
-    </svg>
-  </svg>
-)
-
-const newPostTutorialElement = (
-  <svg width='900' height='900' className='tutorial'>
-    <text x='470' y='50' fill={BRAND_COLOR} fontSize='24'>Create a new post!!</text>
-    <text x='490' y='75' fill={BRAND_COLOR} fontSize='16' children={`press \`${OSX ? '⌘' : '^'} + n\``}/>
-    <svg x='415' y='20' width='400' height='400'>
-      <path fill='white' d='M11.6,14.7c1,5.5,2.9,10.7,5.7,15.5c1,1.7,3.5,0.2,2.6-1.5c-2.6-4.7-4.4-9.6-5.4-14.8
-        C14.1,12,11.3,12.8,11.6,14.7L11.6,14.7z'/>
-      <path fill='white' d='M16.8,17.1c4,0.2,7.6-1.1,10.7-3.6c1.5-1.2-0.6-3.3-2.1-2.1c-2.4,2-5.4,2.9-8.6,2.7C14.9,14,14.9,17,16.8,17.1
-        L16.8,17.1z'/>
-      <path fill='white' d='M13.8,17.6c11.9,3.5,24.1,4.9,36.4,3.9c1.9-0.1,1.9-3.1,0-3c-12.1,0.9-24-0.3-35.6-3.8
-        C12.7,14.1,11.9,17,13.8,17.6L13.8,17.6z'/>
-    </svg>
-  </svg>
-)
+const OSX = process.platform === 'darwin'
 
 export default class ArticleTopBar extends React.Component {
   constructor (props) {
     super(props)
 
-    this.saveAllHandler = e => {
-      if (isModalOpen()) return true
-      this.handleSaveAllButtonClick(e)
-    }
-    this.focusSearchHandler = e => {
-      if (isModalOpen()) return true
-      this.focusInput(e)
-    }
-    this.newPostHandler = e => {
-      if (isModalOpen()) return true
-      this.handleNewPostButtonClick(e)
-    }
-
     this.state = {
       isTooltipHidden: true,
       isLinksDropdownOpen: false
     }
   }
 
-  componentDidMount () {
-    this.searchInput = ReactDOM.findDOMNode(this.refs.searchInput)
-    this.linksButton = ReactDOM.findDOMNode(this.refs.links)
-    this.showLinksDropdown = e => {
-      e.preventDefault()
-      e.stopPropagation()
-      if (!this.state.isLinksDropdownOpen) {
-        this.setState({isLinksDropdownOpen: true})
-      }
-    }
-    // this.linksButton.addEventListener('click', this.showLinksDropdown)
-    this.hideLinksDropdown = e => {
-      if (this.state.isLinksDropdownOpen) {
-        this.setState({isLinksDropdownOpen: false})
-      }
-    }
-    document.addEventListener('click', this.hideLinksDropdown)
-
-    // ipc.on('top-save-all', this.saveAllHandler)
-    ipc.on('top-focus-search', this.focusSearchHandler)
-    ipc.on('top-new-post', this.newPostHandler)
-  }
-
-  componentWillUnmount () {
-    document.removeEventListener('click', this.hideLinksDropdown)
-    this.linksButton.removeEventListener('click', this.showLinksDropdown())
-
-    // ipc.removeListener('top-save-all', this.saveAllHandler)
-    ipc.removeListener('top-focus-search', this.focusSearchHandler)
-    ipc.removeListener('top-new-post', this.newPostHandler)
-  }
-
   handleTooltipRequest (e) {
     if (this.searchInput.value.length === 0 && (document.activeElement === this.searchInput)) {
       this.setState({isTooltipHidden: false})
@@ -126,10 +39,6 @@ export default class ArticleTopBar extends React.Component {
   }
 
   handleSearchChange (e) {
-    let { dispatch } = this.props
-
-    // dispatch(setSearchFilter(e.target.value))
-    this.handleTooltipRequest()
   }
 
   handleSearchClearButton (e) {
@@ -206,22 +115,6 @@ export default class ArticleTopBar extends React.Component {
               : null
           }
         </div>
-
-        {false ? (
-          <div className='tutorial'>
-            <div onClick={(e) => this.handleTutorialButtonClick(e)} className='clickJammer'/>
-            <svg width='500' height='250' className='finder'>
-              <text x='100' y='25' fontSize='32' fill={BRAND_COLOR}>Also, you can open Finder!!</text>
-              <text x='150' y='55' fontSize='18' fill={BRAND_COLOR} children={'with pressing ' + (OSX ? '`⌘ + Alt + s`' : '`Win + Alt + s`')}/>
-            </svg>
-            <svg width='450' className='global'>
-              <text x='100' y='45' fontSize='24' fill={BRAND_COLOR}>Hope you to enjoy our app :D</text>
-              <text x='50' y='75' fontSize='18' fill={BRAND_COLOR}>Press any key or click to escape tutorial mode</text>
-            </svg>
-            <div className='back'></div>
-          </div>
-        ) : null}
-
       </div>
     )
   }
diff --git a/browser/main/SideNav/RepositorySection.js b/browser/main/SideNav/RepositorySection.js
index e3ba2600..617ce8a5 100644
--- a/browser/main/SideNav/RepositorySection.js
+++ b/browser/main/SideNav/RepositorySection.js
@@ -57,7 +57,7 @@ class RepositorySection extends React.Component {
 
   handleContextButtonClick (e) {
     e.stopPropagation()
-    var menu = new Menu()
+    let menu = new Menu()
     menu.append(new MenuItem({
       label: 'New Folder',
       click: () => this.handleNewFolderButtonClick()
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 6cd56c8a..4c062e05 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SideNav.styl'
-import { openModal } from 'browser/lib/modal'
+import { openModal } from 'browser/main/lib/modal'
 import Preferences from '../modals/Preferences'
 import RepositorySection from './RepositorySection'
 import NewRepositoryModal from '../modals/NewRepositoryModal'
diff --git a/browser/lib/modal.js b/browser/main/lib/modal.js
similarity index 84%
rename from browser/lib/modal.js
rename to browser/main/lib/modal.js
index 15273f69..e1026fe5 100644
--- a/browser/lib/modal.js
+++ b/browser/main/lib/modal.js
@@ -1,7 +1,7 @@
 import React from 'react'
+import { Provider } from 'react-redux'
 import ReactDOM from 'react-dom'
-
-const remote = require('electron').remote
+import store from '../store'
 
 class ModalBase extends React.Component {
   constructor (props) {
@@ -15,8 +15,6 @@ class ModalBase extends React.Component {
 
   close () {
     if (modalBase != null) modalBase.setState({component: null, componentProps: null, isHidden: true})
-
-    remote.getCurrentWebContents().send('list-focus')
   }
 
   render () {
@@ -24,7 +22,9 @@ class ModalBase extends React.Component {
       <div className={'ModalBase' + (this.state.isHidden ? ' hide' : '')}>
         <div onClick={(e) => this.close(e)} className='modalBack'/>
         {this.state.component == null ? null : (
-          <this.state.component {...this.state.componentProps} close={this.close}/>
+          <Provider store={store}>
+            <this.state.component {...this.state.componentProps} close={this.close}/>
+          </Provider>
         )}
       </div>
     )
diff --git a/browser/main/modals/Preferences/AppSettingTab.js b/browser/main/modals/Preferences/AppSettingTab.js
index d1656fb0..51ddef2e 100644
--- a/browser/main/modals/Preferences/AppSettingTab.js
+++ b/browser/main/modals/Preferences/AppSettingTab.js
@@ -1,5 +1,4 @@
 import React, { PropTypes } from 'react'
-import linkState from 'browser/lib/linkState'
 import fetchConfig from 'browser/lib/fetchConfig'
 import hljsTheme from 'browser/lib/hljsThemes'
 
@@ -235,7 +234,6 @@ export default class AppSettingTab extends React.Component {
   }
 }
 
-AppSettingTab.prototype.linkState = linkState
 AppSettingTab.propTypes = {
   user: PropTypes.shape({
     name: PropTypes.string
diff --git a/browser/main/modals/Preferences/ContactTab.js b/browser/main/modals/Preferences/ContactTab.js
index aad8c331..47e6bf31 100644
--- a/browser/main/modals/Preferences/ContactTab.js
+++ b/browser/main/modals/Preferences/ContactTab.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import linkState from 'browser/lib/linkState'
 import ExternalLink from 'browser/components/ExternalLink'
 
 export default class ContactTab extends React.Component {
@@ -20,5 +19,3 @@ export default class ContactTab extends React.Component {
     )
   }
 }
-
-ContactTab.prototype.linkState = linkState
diff --git a/browser/main/modals/Preferences/index.js b/browser/main/modals/Preferences/index.js
index a399afd2..77222077 100644
--- a/browser/main/modals/Preferences/index.js
+++ b/browser/main/modals/Preferences/index.js
@@ -1,10 +1,8 @@
 import React, { PropTypes } from 'react'
-import { connect, Provider } from 'react-redux'
-import linkState from 'browser/lib/linkState'
-import store from 'browser/main/store'
+import { connect } from 'react-redux'
 import AppSettingTab from './AppSettingTab'
 import ContactTab from './ContactTab'
-import { closeModal } from 'browser/lib/modal'
+import { closeModal } from 'browser/main/lib/modal'
 
 const APP = 'APP'
 const CONTACT = 'CONTACT'
@@ -83,15 +81,4 @@ Preferences.propTypes = {
   dispatch: PropTypes.func
 }
 
-Preferences.prototype.linkState = linkState
-
-let RootComponent = connect((x) => x)(Preferences)
-export default class PreferencesModal extends React.Component {
-  render () {
-    return (
-      <Provider store={store}>
-        <RootComponent/>
-      </Provider>
-    )
-  }
-}
+export default connect((x) => x)(Preferences)

From c3e62f58abdaf3df5e32b0a39efc64108fc3d3f3 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 12:47:59 +0900
Subject: [PATCH 042/109] remove menu offset

---
 browser/main/SideNav/FolderItem.js        | 2 +-
 browser/main/SideNav/RepositorySection.js | 2 +-
 browser/main/SideNav/index.js             | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/browser/main/SideNav/FolderItem.js b/browser/main/SideNav/FolderItem.js
index 6331cf18..937c0397 100644
--- a/browser/main/SideNav/FolderItem.js
+++ b/browser/main/SideNav/FolderItem.js
@@ -85,7 +85,7 @@ class FolderItem extends React.Component {
       click: () => this.handleDeleteButtonClick(e)
     }))
 
-    menu.popup(remote.getCurrentWindow(), e.clientX, e.clientY - 44)
+    menu.popup(remote.getCurrentWindow())
   }
 
   handleRenameButtonClick (e) {
diff --git a/browser/main/SideNav/RepositorySection.js b/browser/main/SideNav/RepositorySection.js
index 617ce8a5..110d3a22 100644
--- a/browser/main/SideNav/RepositorySection.js
+++ b/browser/main/SideNav/RepositorySection.js
@@ -68,7 +68,7 @@ class RepositorySection extends React.Component {
       click: () => this.handleUnlinkButtonClick()
     }))
 
-    menu.popup(remote.getCurrentWindow(), e.clientX, e.clientY - 44)
+    menu.popup(remote.getCurrentWindow())
   }
 
   handleNewFolderButtonClick (e) {
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 4c062e05..025236d6 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -25,7 +25,7 @@ class SideNav extends React.Component {
       label: 'Mount Repository',
       click: (e) => this.handleNewRepositoryButtonClick(e)
     }))
-    menu.popup(remote.getCurrentWindow(), e.clientX, e.clientY - 44)
+    menu.popup(remote.getCurrentWindow())
   }
 
   handleNewRepositoryButtonClick (e) {

From 443b529667cc82156665d099af4eb7010dd62328 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 13:50:23 +0900
Subject: [PATCH 043/109] extract stylus vars of nav

---
 browser/main/SideNav/FolderItem.styl        | 44 +++++---------
 browser/main/SideNav/RepositorySection.styl | 65 +++++++--------------
 browser/main/SideNav/SideNav.styl           | 31 ++++------
 browser/main/StatusBar/StatusBar.styl       | 29 ++-------
 browser/styles/index.styl                   | 48 ++++++++-------
 5 files changed, 79 insertions(+), 138 deletions(-)

diff --git a/browser/main/SideNav/FolderItem.styl b/browser/main/SideNav/FolderItem.styl
index e2b0f7bd..fa5f1af6 100644
--- a/browser/main/SideNav/FolderItem.styl
+++ b/browser/main/SideNav/FolderItem.styl
@@ -3,23 +3,15 @@
   width 100%
   position relative
   cursor pointer
-  transition 0.15s
-  color $nav-inactive-text-color
-  &:hover
-    background-color $nav-hover-background
-    .control
-      opacity 1
-  &:active, &:hover:active
-    background-color $nav-active-background
-    color $nav-text-color
+  navButtonColor()
 
 .root--active
   @extend .root
-  background-color $nav-active-background
-  color $nav-text-color
+  background-color $ui-button--active-backgroundColor
+  color $ui-button--active-color
   &:hover
-    background-color $nav-active-background
-    color $nav-text-color
+    background-color $ui-button--active-backgroundColor
+    color $ui-button--active-color
   .control
     opacity 1
 
@@ -46,19 +38,11 @@
   transition opacity 0.15s
 
 .control-button
+  navButtonColor()
   width 24px
   height 24px
   margin-top 4.5px
-  border none
   border-radius 5px
-  background-color transparent
-  color $nav-inactive-text-color
-  transition color background-color 0.15s
-  &:hover
-    background-color $nav-hover-background
-  &:active
-    background-color $nav-active-background
-    color $nav-text-color
 .root--edit
   @extend .root
 
@@ -69,12 +53,12 @@
   height 33px
   padding 0 10px
   border-radius 5px
-  border solid 1px $nav-border-color
+  border $ui-border
   outline none
   &:focus
-    border-color $focus-border-color
+    border-color $ui-input--focus-borderColor
   &:disabled
-    background-color $disabled-input-background
+    background-color $ui-input--disabled-backgroundColor
 
 .root--folded
   @extend .root
@@ -95,7 +79,7 @@
     box-sizing border-box
     margin-left 0
     overflow ellipsis
-    background-color $nav-tooltip-background-color
+    background-color $ui-tooltip-backgroundColor
     color white
     line-height 34px
     border-top-right-radius 5px
@@ -107,11 +91,11 @@
 
 .root--folded--active
   @extend .root--folded
-  background-color $nav-active-background
-  color $nav-text-color
+  background-color $ui-button--active-backgroundColor
+  color $ui-button--active-color
   &:hover
-    background-color $nav-active-background
-    color $nav-text-color
+    background-color $ui-button--active-backgroundColor
+    color $ui-button--active-color
 
 .root--edit--folded
   @extend .root--edit
diff --git a/browser/main/SideNav/RepositorySection.styl b/browser/main/SideNav/RepositorySection.styl
index 5f50f5cb..19752d59 100644
--- a/browser/main/SideNav/RepositorySection.styl
+++ b/browser/main/SideNav/RepositorySection.styl
@@ -3,33 +3,25 @@
   color $nav-text-color
 
 .header
+  navButtonColor()
   position relative
+  width 100%
   height 33px
   cursor pointer
-  color $nav-inactive-text-color
-  transition 0.15s
-  border none
-  width 100%
   text-align left
-  background-color transparent
   font-size 14px
-  &:hover
-    background-color $nav-hover-background
-    .header-control-button
-      opacity 1
-  &:active, &:active:hover
-    background-color $nav-active-background
-    color $nav-text-color
+  &:hover .header-control-button
+    opacity 1
 
 .header--active
   @extend .header
-  background-color $nav-active-background
-  color $nav-text-color
+  background-color $ui-button--active-backgroundColor
+  color $ui-button--active-color
   .header-control-button
     opacity 1
   &:hover
-    background-color $nav-active-background
-    color $nav-text-color
+    background-color $ui-button--active-backgroundColor
+    color $ui-button--active-color
 
 .header-name
   position absolute
@@ -51,21 +43,13 @@
   width 48px
 
 .header-control-button
+  navButtonColor()
   width 24px
+  height 24px
   padding 0
   margin-top 4.5px
-  height 24px
-  border none
   border-radius 5px
-  background-color transparent
-  color $nav-inactive-text-color
   opacity 0
-  transition color background-color 0.15s
-  &:hover
-    background-color $nav-hover-background
-  &:active
-    background-color $nav-active-background
-    color $nav-text-color
 
 .header-control-button--show
   @extend .header-control-button
@@ -81,31 +65,22 @@
   height 33px
   padding 0 10px
   border-radius 5px
-  border solid 1px $nav-border-color
+  border $ui-border
   outline none
   &:focus
-    border-color $focus-border-color
+    border-color $ui-input--focus-borderColor
   &:disabled
-    background-color $disabled-input-background
+    background-color $ui-input--disabled-backgroundColor
 
 .newFolderButton
-  height 33px
+  navButtonColor()
+  height 34px
   width 100%
   border none
   padding-left 20px
   text-align left
-  color $nav-inactive-text-color
-  background-color transparent
-  transition color background-color 0.15s
-  &:hover
-    background-color $nav-hover-background
-  &:active
-    background-color $nav-active-background
-    color $nav-text-color
-
-.newFolderButton
-  height 34px
   line-height 34px
+
 .newFolderButton-label
   margin-left 0
 
@@ -135,7 +110,7 @@
     box-sizing border-box
     margin-left 0
     overflow ellipsis
-    background-color $nav-tooltip-background-color
+    background-color $ui-tooltip-backgroundColor
     color white
     line-height 34px
     border-top-right-radius 5px
@@ -155,9 +130,9 @@
     display none
   .header-control-button--show
     float right
-    background-color $nav-tooltip-button-background
+    background-color $ui-tooltip-button-backgroundColor
     &:hover
-      background-color $nav-tooltip-button-background--hover
+      background-color $ui-tooltip-button--hover-backgroundColor
   .newFolderButton
     width 44px
     padding 0
@@ -175,7 +150,7 @@
     box-sizing border-box
     margin-left 0
     overflow ellipsis
-    background-color $nav-tooltip-background-color
+    background-color $ui-tooltip-backgroundColor
     color white
     line-height 34px
     border-top-right-radius 5px
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 9209b670..dc526248 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -2,14 +2,14 @@
   absolute top left
   bottom 24px
   width 200px
-  border-right solid 1px $nav-border-color
-  background-color $nav-background-color
+  border-right $ui-border
+  background-color $ui-backgroundColor
   user-select none
-  color $nav-text-color
+  color $ui-text-color
 
 .top
   height 60px
-  border-bottom solid 1px $nav-border-color
+  border-bottom $ui-border
 
 .top-menu
   navButtonColor()
@@ -35,10 +35,10 @@
 
 .menu-button--active
   @extend .menu-button
-  background-color $nav-active-background
-  color $nav-text-color
+  background-color $ui-button--active-backgroundColor
+  color $ui-button--active-color
   &:hover
-    background-color $nav-active-background
+    background-color $ui-button--active-backgroundColor
 
 .menu-button-label
   margin-left 5px
@@ -52,9 +52,10 @@
   padding 0 10px
   margin-top 15px
   line-height 24px
-  color $nav-inactive-color
+  color $ui-inactive-text-color
 
 .navToggle
+  navButtonColor()
   display block
   position absolute
   right 5px
@@ -62,16 +63,6 @@
   border-radius 16.5px
   height 33px
   width 33px
-  color $nav-inactive-text-color
-  border none
-  background-color transparent
-  transition color background-color 0.15s
-  &:hover
-    background-color $nav-hover-background
-    color $nav-inactive-text-color
-  &:active
-    background-color $nav-active-background
-    color $nav-text-color
 
 .root-folded
   @extend .root
@@ -93,7 +84,7 @@
     margin-top -5px
     margin-left 0
     overflow hidden
-    background-color $nav-tooltip-background-color
+    background-color $ui-tooltip-backgroundColor
     color white
     line-height 34px
     border-top-right-radius 5px
@@ -115,7 +106,7 @@
     margin-top -9px
     margin-left 0
     overflow ellipsis
-    background-color $nav-tooltip-background-color
+    background-color $ui-tooltip-backgroundColor
     color white
     line-height 34px
     border-top-right-radius 5px
diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl
index 203c5375..6865b23b 100644
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -1,40 +1,23 @@
 .root
   absolute bottom left right
   height 24px
-  border-top solid 1px $nav-border-color
-  background-color $nav-background-color
+  border-top $ui-border
+  background-color $ui-backgroundColor
 
 .zoom
+  navButtonColor()
   absolute right
   height 24px
   width 60px
   border-width 0 1px
   border-style solid
-  border-color $nav-border-color
-  background-color transparent
-  color $nav-inactive-text-color
-  transition color background-color 0.15s
-  &:hover
-    background-color $nav-hover-background
-    color $nav-inactive-text-color
-  &:active
-    background-color $nav-active-background
-    color $nav-text-color
+  border-color $ui-borderColor
 
 .update
+  navButtonColor()
   position absolute
   right 60px
   height 24px
   border-width 0 0 0 1px
   border-style solid
-  border-color $nav-border-color
-  background-color transparent
-  color $brand-color
-  transition color background-color 0.15s
-  &:hover
-    background-color $nav-hover-background
-    color $brand-color
-  &:active
-    background-color $nav-active-background
-    color $brand-color
-
+  border-color $ui-borderColor
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 1533e32a..bfa01105 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -3,6 +3,27 @@ $brand-color = #2BAC8F
 $danger-color = red
 $danger-lighten-color = #FFE5E6
 
+// UI default
+$ui-text-color = #515151
+$ui-inactive-text-color = #939395
+$ui-borderColor = #D1D1D1
+$ui-backgroundColor = #FAFAFA
+$ui-border = solid 1px $ui-borderColor
+
+// UI Button
+$ui-button-color = #939395
+$ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08)
+$ui-button--active-color = #515151
+$ui-button--active-backgroundColor = alpha(#E0E0E0, 90%)
+
+// UI Tooltip
+$ui-tooltip-backgroundColor = alpha(#444, 70%)
+$ui-tooltip-button-backgroundColor = #D1D1D1
+$ui-tooltip-button--hover-backgroundColor = lighten(#D1D1D1, 30%)
+
+// UI Input
+$ui-input--focus-borderColor = #369DCD
+$ui-input--disabled-backgroundColor = #DDD
 
 /*
 * # Border
@@ -46,36 +67,23 @@ colorPrimaryButton()
   &:active:hover
     background-color $primary-button-background--active
 
-/**
-* Input
-*/
-
-$disabled-input-background = #DDD
-
 /**
 * Nav
 */
 
-$nav-text-color = #515151
-$nav-inactive-text-color = #939395
-$nav-hover-background = rgba(126, 127, 129, 0.08)
-$nav-active-background = alpha(#E0E0E0, 90%)
-$nav-border-color = #D1D1D1
-$nav-background-color = #FAFAFA
-$nav-tooltip-background-color = alpha(#444, 70%)
-$nav-tooltip-button-background = #D1D1D1
-$nav-tooltip-button-background--hover = lighten(#D1D1D1, 30%)
-
 navButtonColor()
   border none
-  color $nav-inactive-text-color
+  color $ui-button-color
   background-color transparent
   transition color background-color  0.15s
   &:hover
-    background-color $nav-hover-background
+    background-color $ui-button--hover-backgroundColor
   &:active
-    background-color $nav-active-background
-    color $nav-text-color
+    background-color $ui-button--active-backgroundColor
+    color $ui-button--active-color
+  &:active, &:active:hover
+    background-color $ui-button--active-backgroundColor
+    color $ui-button--active-color
 
 /**
 * # Modal Stuff

From 735b79a4e0bed6b6f495b706fc5088d40f365b22 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 15:52:05 +0900
Subject: [PATCH 044/109] refactor ZoomSelect iteration

---
 browser/main/StatusBar/index.js | 34 ++++++++++-----------------------
 1 file changed, 10 insertions(+), 24 deletions(-)

diff --git a/browser/main/StatusBar/index.js b/browser/main/StatusBar/index.js
index ffd3782c..9985fd77 100644
--- a/browser/main/StatusBar/index.js
+++ b/browser/main/StatusBar/index.js
@@ -8,6 +8,8 @@ const ipc = electron.ipcRenderer
 const { remote } = electron
 const { Menu, MenuItem } = remote
 
+const zoomOptions = [0.8, 0.9, 1, 1.1, 1.2, 1.3]
+
 class StatusBar extends React.Component {
   constructor (props) {
     super(props)
@@ -26,30 +28,14 @@ class StatusBar extends React.Component {
 
   handleZoomButtonClick (e) {
     let menu = new Menu()
-    menu.append(new MenuItem({
-      label: '130%',
-      click: () => this.handleZoomMenuItemClick(1.3)
-    }))
-    menu.append(new MenuItem({
-      label: '120%',
-      click: () => this.handleZoomMenuItemClick(1.2)
-    }))
-    menu.append(new MenuItem({
-      label: '110%',
-      click: () => this.handleZoomMenuItemClick(1.1)
-    }))
-    menu.append(new MenuItem({
-      label: '100%',
-      click: () => this.handleZoomMenuItemClick(1)
-    }))
-    menu.append(new MenuItem({
-      label: '90%',
-      click: () => this.handleZoomMenuItemClick(0.9)
-    }))
-    menu.append(new MenuItem({
-      label: '80%',
-      click: () => this.handleZoomMenuItemClick(0.8)
-    }))
+
+    zoomOptions.forEach((zoom) => {
+      menu.append(new MenuItem({
+        label: Math.floor(zoom * 100) + '%',
+        click: () => this.handleZoomMenuItemClick(zoom)
+      }))
+    })
+
     menu.popup(remote.getCurrentWindow())
   }
 

From 00691f122590ad5e51728eace2a95737a2f30001 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 18:47:09 +0900
Subject: [PATCH 045/109] shorter uid

---
 browser/lib/keygen.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/lib/keygen.js b/browser/lib/keygen.js
index 05d166b9..8b9fdf5b 100644
--- a/browser/lib/keygen.js
+++ b/browser/lib/keygen.js
@@ -2,6 +2,6 @@ const crypto = require('crypto')
 const _ = require('lodash')
 
 module.exports = function (length) {
-  if (!_.isFinite(length)) length = 12
+  if (!_.isFinite(length)) length = 6
   return crypto.randomBytes(length).toString('hex')
 }

From c59638aaaeb3d6f1909327ea1a4d5d62dd349627 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 19:00:45 +0900
Subject: [PATCH 046/109] Don't call devtron every refreshing

---
 browser/main/index.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/browser/main/index.js b/browser/main/index.js
index 8765bd3f..718fc3b2 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -7,14 +7,11 @@ require('!!style!css!stylus?sourceMap!../styles/main/index.styl')
 import activityRecord from 'browser/lib/activityRecord'
 import fetchConfig from '../lib/fetchConfig'
 import { Router, Route, IndexRoute, IndexRedirect, hashHistory } from 'react-router'
+import { syncHistoryWithStore } from 'react-router-redux'
+
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const path = require('path')
-import { syncHistoryWithStore } from 'react-router-redux'
-
-const PRO = process.env.NODE_ENV === 'production'
-if (!PRO) require('devtron').install()
-
 const remote = electron.remote
 
 let config = fetchConfig()

From be20c2c80023c2e613ca41a68c6914290a164d73 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 19:01:32 +0900
Subject: [PATCH 047/109] renew TopBar

---
 browser/main/ArticleTopBar.js          | 129 --------------
 browser/main/Main.js                   |   4 +-
 browser/main/TopBar/TopBar.styl        | 108 ++++++++++++
 browser/main/TopBar/index.js           | 114 +++++++++++++
 browser/styles/index.styl              |  12 +-
 browser/styles/main/ArticleTopBar.styl | 224 -------------------------
 browser/styles/main/index.styl         |   1 -
 7 files changed, 233 insertions(+), 359 deletions(-)
 delete mode 100644 browser/main/ArticleTopBar.js
 create mode 100644 browser/main/TopBar/TopBar.styl
 create mode 100644 browser/main/TopBar/index.js
 delete mode 100644 browser/styles/main/ArticleTopBar.styl

diff --git a/browser/main/ArticleTopBar.js b/browser/main/ArticleTopBar.js
deleted file mode 100644
index bb33becb..00000000
--- a/browser/main/ArticleTopBar.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import React, { PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import ExternalLink from 'browser/components/ExternalLink'
-import activityRecord from 'browser/lib/activityRecord'
-
-const OSX = process.platform === 'darwin'
-
-export default class ArticleTopBar extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      isTooltipHidden: true,
-      isLinksDropdownOpen: false
-    }
-  }
-
-  handleTooltipRequest (e) {
-    if (this.searchInput.value.length === 0 && (document.activeElement === this.searchInput)) {
-      this.setState({isTooltipHidden: false})
-    } else {
-      this.setState({isTooltipHidden: true})
-    }
-  }
-
-  isInputFocused () {
-    return document.activeElement === ReactDOM.findDOMNode(this.refs.searchInput)
-  }
-
-  escape () {
-  }
-
-  focusInput () {
-    this.searchInput.focus()
-  }
-
-  blurInput () {
-    this.searchInput.blur()
-  }
-
-  handleSearchChange (e) {
-  }
-
-  handleSearchClearButton (e) {
-    this.searchInput.value = ''
-    this.focusInput()
-  }
-
-  handleNewPostButtonClick (e) {
-    activityRecord.emit('ARTICLE_CREATE')
-  }
-
-  handleTutorialButtonClick (e) {
-    let { dispatch } = this.props
-
-    // dispatch(toggleTutorial())
-  }
-
-  render () {
-    let { status } = this.props
-    return (
-      <div tabIndex='2' className='ArticleTopBar'>
-        <div className='ArticleTopBar-left'>
-          <div className='ArticleTopBar-left-search'>
-            <i className='fa fa-search fa-fw' />
-            <input
-              ref='searchInput'
-              onFocus={(e) => this.handleSearchChange(e)}
-              onBlur={(e) => this.handleSearchChange(e)}
-              value={'this.props.status.search'}
-              onChange={(e) => this.handleSearchChange(e)}
-              placeholder='Search'
-              type='text'
-            />
-            {
-              'sadf' > 0
-                ? <button onClick={(e) => this.handleSearchClearButton(e)} className='ArticleTopBar-left-search-clear-button'><i className='fa fa-times'/></button>
-                : null
-            }
-            <div className={'tooltip' + (this.state.isTooltipHidden ? ' hide' : '')}>
-              <ul>
-                <li>- Search by tag : #{'{string}'}</li>
-                <li>- Search by folder : /{'{folder_name}'}<br/><small>exact match : //{'{folder_name}'}</small></li>
-                <li>- Only unsaved : --unsaved</li>
-              </ul>
-            </div>
-          </div>
-
-          <div className={'ArticleTopBar-left-control'}>
-            <button className='ArticleTopBar-left-control-new-post-button' onClick={(e) => this.handleNewPostButtonClick(e)}>
-              <i className='fa fa-plus'/>
-              <span className='tooltip'>New Post ({OSX ? '⌘' : '^'} + n)</span>
-            </button>
-          </div>
-        </div>
-
-        <div className='ArticleTopBar-right'>
-          <button onClick={(e) => this.handleTutorialButtonClick(e)}>?<span className='tooltip'>How to use</span>
-          </button>
-          <a ref='links' className='ArticleTopBar-right-links-button' href>
-            <img src='../resources/app.png' width='44' height='44'/>
-          </a>
-          {
-            this.state.isLinksDropdownOpen
-              ? (
-                <div className='ArticleTopBar-right-links-button-dropdown'>
-                  <ExternalLink className='ArticleTopBar-right-links-button-dropdown-item' href='https://b00st.io'>
-                    <i className='fa fa-fw fa-home'/>Boost official page
-                  </ExternalLink>
-                  <ExternalLink className='ArticleTopBar-right-links-button-dropdown-item' href='https://github.com/BoostIO/Boostnote/issues'>
-                    <i className='fa fa-fw fa-github'/> Issues
-                  </ExternalLink>
-                </div>
-              )
-              : null
-          }
-        </div>
-      </div>
-    )
-  }
-}
-
-ArticleTopBar.propTypes = {
-  dispatch: PropTypes.func,
-  status: PropTypes.shape({
-    search: PropTypes.string
-  }),
-  folders: PropTypes.array
-}
diff --git a/browser/main/Main.js b/browser/main/Main.js
index 1a975910..10fbcd01 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import SideNav from './SideNav'
-import ArticleTopBar from './ArticleTopBar'
+import TopBar from './TopBar'
 import ArticleList from './ArticleList'
 import ArticleDetail from './ArticleDetail'
 import Repository from 'browser/lib/Repository'
@@ -26,7 +26,7 @@ class Main extends React.Component {
         <SideNav
           {...this.props}
         />
-        <ArticleTopBar
+        <TopBar
           {...this.props}
         />
         <ArticleList
diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl
new file mode 100644
index 00000000..570e8912
--- /dev/null
+++ b/browser/main/TopBar/TopBar.styl
@@ -0,0 +1,108 @@
+.root
+  absolute top right
+  background-color $ui-backgroundColor
+  left $sideNav-width
+  border-bottom $ui-border
+  height 60px
+  clearfix()
+
+.left
+  float left
+  height 59px
+  line-height 60px
+
+.left-search
+  margin-top 12px
+  margin-left 25px
+  height 34px
+  width 200px
+  float left
+  border-radius 22px
+  position relative
+  background-color white
+  border $ui-border
+
+.left-search-icon
+  absolute left
+  width 36px
+  height 32px
+  padding 0
+  line-height 32px
+  color $ui-inactive-text-color
+
+.left-search-input
+  absolute top bottom right
+  height 32px
+  left 34px
+  border none
+  outline none
+  font-size 14px
+
+.left-control
+  float left
+  margin-left 15px
+
+.left-control-newPostButton
+  width 34px
+  height 34px
+  margin-top 12px
+  border-radius 17px
+  navButtonColor()
+  border $ui-border
+  font-size 14px
+  line-height 32px
+  padding 0
+  &:active
+    border-color $ui-button--active-backgroundColor
+  &:hover .left-control-newPostButton-tooltip
+    display block
+
+
+.left-control-newPostButton-tooltip
+  position fixed
+  background-color $ui-tooltip-backgroundColor
+  color $ui-tooltip-text-color
+  font-size 10px
+  margin-left -35px
+  margin-top 12px
+  padding 5px
+  z-index 1
+  border-radius 5px
+  display none
+  pointer-events none
+
+.right
+  float right
+  height 60px
+  clearfix()
+
+.right-helpButton
+  width 24px
+  height 24px
+  border-radius 12px
+  navButtonColor()
+  border $ui-border
+  line-height 22px
+  font-size 12px
+  padding 0
+  float left
+  margin-top 17px
+
+.right-linksButton
+  float left
+  height 44px
+  width 44px
+  border-radius 17px
+  background-color transparent
+  border none
+  margin-top 7px
+  margin-left 5px
+  margin-right 15px
+  opacity 0.8
+  &:hover, &:active
+    opacity 1
+
+.root--expanded
+  @extend .root
+  absolute top right
+  left $sideNav--folded-width
diff --git a/browser/main/TopBar/index.js b/browser/main/TopBar/index.js
new file mode 100644
index 00000000..922ccf48
--- /dev/null
+++ b/browser/main/TopBar/index.js
@@ -0,0 +1,114 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TopBar.styl'
+import activityRecord from 'browser/lib/activityRecord'
+
+const OSX = window.process.platform === 'darwin'
+
+class TopBar extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      search: ''
+    }
+  }
+
+  isInputFocused () {
+    return document.activeElement === this.refs.searchInput
+  }
+
+  escape () {
+  }
+
+  focusInput () {
+    this.searchInput.focus()
+  }
+
+  blurInput () {
+    this.searchInput.blur()
+  }
+
+  handleSearchChange (e) {
+  }
+
+  handleSearchClearButton (e) {
+    this.searchInput.value = ''
+    this.focusInput()
+  }
+
+  handleNewPostButtonClick (e) {
+    activityRecord.emit('ARTICLE_CREATE')
+  }
+
+  handleTutorialButtonClick (e) {
+  }
+
+  handleLinksButton (e) {
+
+  }
+
+  render () {
+    let { config } = this.props
+    return (
+      <div className='TopBar'
+        styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}
+      >
+        <div styleName='left'>
+          <div styleName='left-search'>
+            <i styleName='left-search-icon' className='fa fa-search fa-fw'/>
+            <input styleName='left-search-input'
+              ref='searchInput'
+              onFocus={(e) => this.handleSearchChange(e)}
+              onBlur={(e) => this.handleSearchChange(e)}
+              value={this.state.search}
+              onChange={(e) => this.handleSearchChange(e)}
+              placeholder='Search'
+              type='text'
+            />
+            {this.state.search > 0 &&
+              <button styleName='left-search-clearButton'
+                onClick={(e) => this.handleSearchClearButton(e)}
+              >
+                <i className='fa fa-times'/>
+              </button>
+            }
+          </div>
+
+          <div styleName='left-control'>
+            <button styleName='left-control-newPostButton'
+              onClick={(e) => this.handleNewPostButtonClick(e)}>
+              <i className='fa fa-plus'/>
+              <span styleName='left-control-newPostButton-tooltip'>
+                New Post ({OSX ? '⌘' : '^'} + n)
+              </span>
+            </button>
+          </div>
+        </div>
+
+        <div styleName='right'>
+          <button styleName='right-helpButton'
+            onClick={(e) => this.handleTutorialButtonClick(e)}
+            disabled
+          >
+            ?<span styleName='left-control-newPostButton-tooltip'>How to use</span>
+          </button>
+          <button styleName='right-linksButton'
+            onClick={(e) => this.handleLinksButton(e)}
+          >
+            <img src='../resources/app.png' width='44' height='44'/>
+          </button>
+        </div>
+      </div>
+    )
+  }
+}
+
+TopBar.propTypes = {
+  dispatch: PropTypes.func,
+  config: PropTypes.shape({
+    isSideNavFolded: PropTypes.bool
+  })
+}
+
+export default CSSModules(TopBar, styles)
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index bfa01105..3d39ba77 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -1,8 +1,13 @@
-$brand-color = #2BAC8F
+$brand-color = #6AA5E9
 
 $danger-color = red
 $danger-lighten-color = #FFE5E6
 
+// Layouts
+$statusBar-height = 24px
+$sideNav-width = 200px
+$sideNav--folded-width = 44px
+
 // UI default
 $ui-text-color = #515151
 $ui-inactive-text-color = #939395
@@ -13,10 +18,11 @@ $ui-border = solid 1px $ui-borderColor
 // UI Button
 $ui-button-color = #939395
 $ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08)
-$ui-button--active-color = #515151
-$ui-button--active-backgroundColor = alpha(#E0E0E0, 90%)
+$ui-button--active-color = white
+$ui-button--active-backgroundColor = #6AA5E9
 
 // UI Tooltip
+$ui-tooltip-text-color = white
 $ui-tooltip-backgroundColor = alpha(#444, 70%)
 $ui-tooltip-button-backgroundColor = #D1D1D1
 $ui-tooltip-button--hover-backgroundColor = lighten(#D1D1D1, 30%)
diff --git a/browser/styles/main/ArticleTopBar.styl b/browser/styles/main/ArticleTopBar.styl
deleted file mode 100644
index 37857c84..00000000
--- a/browser/styles/main/ArticleTopBar.styl
+++ /dev/null
@@ -1,224 +0,0 @@
-bgColor = #E6E6E6
-inputBgColor = white
-
-topBarBtnColor = #B3B3B3
-topBarBtnBgColor = #B3B3B3
-topBarBtnBgActiveColor = #3A3A3A
-
-infoBtnColor = bgColor
-infoBtnBgColor = #B3B3B3
-infoBtnActiveBgColor = #3A3A3A
-
-.ArticleTopBar
-  absolute top right
-  left 200px
-  height 60px
-  background-color bgColor
-  user-select none
-  &>.tutorial
-    .clickJammer
-      fixed top left bottom right
-      z-index 40
-      background transparent
-    .global
-      fixed bottom right
-      height 100px
-      z-index 35
-      font-style italic
-    .finder
-      fixed bottom right
-      height 250px
-      left 50%
-      margin-left -250px
-      z-index 35
-      font-style italic
-    .back
-      fixed top left bottom right
-      z-index 20
-      background-color transparentify(black, 80%)
-  &>.ArticleTopBar-left
-    float left
-    &>.tutorial
-      fixed top
-      left 100px
-      top 30px
-      z-index 36
-      font-style italic
-    &>.ArticleTopBar-left-search
-      position relative
-      float left
-      height 33px
-      margin-top 13.5px
-      margin-left 15px
-      width 350px
-      padding 5px 15px
-      transition 0.1s
-      font-size 16px
-      border 1px solid transparent
-      z-index 30
-      .tooltip
-        tooltip()
-        margin-left -24px
-        margin-top 35px
-        opacity 1
-        &.hide
-          opacity 0
-        ul
-          li
-            line-height 18px
-          li:last-child
-            line-height 10px
-            margin-bottom 3px
-        small
-          font-size 10px
-          position relative
-          top -2px
-          margin-left 15px
-      input
-        absolute top left
-        width 350px
-        border-radius 16.5px
-        background-color inputBgColor
-        border 1px solid transparent
-        padding-left 35px
-        outline none
-        font-size 14px
-        height 33px
-        line-height 33px
-        z-index 0
-        &:focus
-          border-color focusBorderColor
-      i.fa.fa-search
-        position absolute
-        display block
-        top 0
-        left 10px
-        line-height 33px
-        z-index 1
-        pointer-events none
-      .ArticleTopBar-left-search-clear-button
-        position absolute
-        top 6px
-        right 10px
-        width 20px
-        height 20px
-        border-radius 10px
-        border none
-        background-color transparent
-        color topBarBtnColor
-        transition 0.1s
-        line-height 20px
-        text-align center
-        padding 0
-        &:focus
-          color textColor
-        &:hover
-          color white
-          background-color topBarBtnBgColor
-        &:active
-          color white
-          background-color darken(topBarBtnBgColor, 35%)
-    .ArticleTopBar-left-control
-      line-height 33px
-      float left
-      height 33px
-      margin-top 13.5px
-      margin-left 20px
-      .tutorial
-        fixed top
-        left 200px
-        z-index 36
-        font-style italic
-      button.ArticleTopBar-left-control-new-post-button
-        position fixed
-        background bgColor
-        font-size 20px
-        border none
-        outline none
-        color inactiveTextColor
-        width 33px
-        height 33px
-        border-radius 16.5px
-        transition 0.1s
-        border 1px solid transparent
-        z-index 30
-        &:hover
-          color textColor
-        &:active
-          color textColor
-          background-color lighten(topBarBtnBgColor, 15%)
-        &:disabled
-          color inactiveTextColor
-          background transparent
-        &:focus
-          color textColor
-        .tooltip
-          tooltip()
-          margin-left -80px
-          margin-top 40px
-        &:hover
-          .tooltip
-            opacity 1
-  &>.ArticleTopBar-right
-    float right
-    &>button
-      display block
-      position absolute
-      right 74px
-      top 20px
-      width 20px
-      height 20px
-      font-size 14px
-      line-height 14px
-      background-color infoBtnBgColor
-      color bgColor
-      border-radius 11px
-      border 1px solid bgColor
-      transition 0.1s
-      &:focus
-        background-color lighten(infoBtnActiveBgColor, 15%)
-      .tooltip
-        tooltip()
-        margin-left -50px
-        margin-top 20px
-      &:hover
-        background-color infoBtnActiveBgColor
-        .tooltip
-          opacity 1
-
-    &>.ArticleTopBar-right-links-button
-      display block
-      position absolute
-      top 8px
-      right 15px
-      opacity 0.7
-      border-radius 23px
-      height 46px
-      width 46px
-      border 1px solid transparent
-      &:focus
-        border-color focusBorderColor
-      &:hover
-        opacity 1
-        .tooltip
-          opacity 1
-    &>.ArticleTopBar-right-links-button-dropdown
-      position fixed
-      z-index 50
-      right 10px
-      top 40px
-      background-color transparentify(invBackgroundColor, 80%)
-      padding 5px 0
-      .ArticleTopBar-right-links-button-dropdown-item
-        padding 0 10px
-        height 33px
-        width 100%
-        display block
-        line-height 33px
-        text-decoration none
-        color white
-        &:hover
-          background-color transparentify(lighten(invBackgroundColor, 30%), 80%)
-
-
-
diff --git a/browser/styles/main/index.styl b/browser/styles/main/index.styl
index c90aa873..3c532b11 100644
--- a/browser/styles/main/index.styl
+++ b/browser/styles/main/index.styl
@@ -3,7 +3,6 @@
 global-reset()
 @import '../shared/*'
 @import './ArticleNavigator'
-@import './ArticleTopBar'
 @import './ArticleList'
 @import './ArticleDetail'
 @import './modal/*'

From da19066fb8c9ce13649757aeeefbaa8d746d4c20 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 19:01:57 +0900
Subject: [PATCH 048/109] update style of buttons in SideNav

---
 browser/main/SideNav/FolderItem.styl        | 12 ++++++---
 browser/main/SideNav/RepositorySection.styl | 29 +++++++++++++++------
 browser/main/SideNav/SideNav.styl           | 13 +++++----
 3 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/browser/main/SideNav/FolderItem.styl b/browser/main/SideNav/FolderItem.styl
index fa5f1af6..8cbeb646 100644
--- a/browser/main/SideNav/FolderItem.styl
+++ b/browser/main/SideNav/FolderItem.styl
@@ -12,8 +12,13 @@
   &:hover
     background-color $ui-button--active-backgroundColor
     color $ui-button--active-color
-  .control
+  .control-button
     opacity 1
+    color white
+    &:hover
+      background-color alpha(white, 30%)
+    &:active, &:hover:active
+      background-color alpha(white, 15%)
 
 .label
   position absolute
@@ -29,20 +34,21 @@
   margin-left 5px
 
 .control
-  opacity 0
   position absolute
   top 0
   bottom 0
   right 5px
   width 24px
-  transition opacity 0.15s
 
 .control-button
+  opacity 0
   navButtonColor()
   width 24px
   height 24px
   margin-top 4.5px
   border-radius 5px
+  transition opacity 0.15s
+
 .root--edit
   @extend .root
 
diff --git a/browser/main/SideNav/RepositorySection.styl b/browser/main/SideNav/RepositorySection.styl
index 19752d59..e73e9c8c 100644
--- a/browser/main/SideNav/RepositorySection.styl
+++ b/browser/main/SideNav/RepositorySection.styl
@@ -3,25 +3,33 @@
   color $nav-text-color
 
 .header
-  navButtonColor()
   position relative
   width 100%
   height 33px
   cursor pointer
   text-align left
   font-size 14px
+  color $ui-inactive-text-color
   &:hover .header-control-button
     opacity 1
+  &:active
+    background-color $ui-button--active-backgroundColor !important
+    color $ui-button--active-color
+    .header-control-button, .header-control-button--show
+      color white
 
-.header--active
+.header--active, .header--active:hover, .header--active:active
   @extend .header
   background-color $ui-button--active-backgroundColor
   color $ui-button--active-color
-  .header-control-button
+  .header-control-button,
+  .header-control-button--show
+    color white
     opacity 1
-  &:hover
-    background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
+    &:hover
+      background-color alpha(white, 30%)
+    &:active
+      background-color alpha(white, 15%)
 
 .header-name
   position absolute
@@ -43,13 +51,18 @@
   width 48px
 
 .header-control-button
-  navButtonColor()
+  border none
+  background-color transparent
   width 24px
   height 24px
   padding 0
   margin-top 4.5px
   border-radius 5px
   opacity 0
+  color $ui-inactive-text-color
+  transition color background-color 0.15s
+  &:hover
+    background-color $ui-button--hover-backgroundColor
 
 .header-control-button--show
   @extend .header-control-button
@@ -77,7 +90,7 @@
   height 34px
   width 100%
   border none
-  padding-left 20px
+  padding 0 0 0 20px
   text-align left
   line-height 34px
 
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index dc526248..8fcab2f6 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -1,7 +1,7 @@
 .root
   absolute top left
-  bottom 24px
-  width 200px
+  bottom $statusBar-height
+  width $sideNav-width
   border-right $ui-border
   background-color $ui-backgroundColor
   user-select none
@@ -44,7 +44,8 @@
   margin-left 5px
 
 .repositoryList
-  absolute left right bottom
+  absolute left right
+  bottom 44px
   top 178px
   overflow-y auto
 
@@ -61,8 +62,10 @@
   right 5px
   bottom 5px
   border-radius 16.5px
-  height 33px
-  width 33px
+  height 34px
+  width 34px
+  line-height 32px
+  padding 0
 
 .root-folded
   @extend .root

From ce52d5cf4297c2d4d046f79ea5f9fe23929caac2 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 19:03:05 +0900
Subject: [PATCH 049/109] improve style of StatusBar & display pathname from
 StatusBar

---
 browser/main/StatusBar/StatusBar.styl | 17 ++++++++++++++++-
 browser/main/StatusBar/index.js       |  6 ++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl
index 6865b23b..bdbc431d 100644
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -1,9 +1,19 @@
 .root
   absolute bottom left right
-  height 24px
+  height $statusBar-height
   border-top $ui-border
   background-color $ui-backgroundColor
 
+.pathname
+  absolute left
+  height 24px
+  overflow ellipsis
+  width 350px
+  line-height 24px
+  font-size 12px
+  padding 0 15px
+  color $ui-inactive-text-color
+
 .zoom
   navButtonColor()
   absolute right
@@ -21,3 +31,8 @@
   border-width 0 0 0 1px
   border-style solid
   border-color $ui-borderColor
+  &:active .update-icon
+    color white
+
+.update-icon
+  color $brand-color
diff --git a/browser/main/StatusBar/index.js b/browser/main/StatusBar/index.js
index 9985fd77..f7fc5e85 100644
--- a/browser/main/StatusBar/index.js
+++ b/browser/main/StatusBar/index.js
@@ -49,14 +49,16 @@ class StatusBar extends React.Component {
   }
 
   render () {
-    let { config } = this.props
+    let { config, location } = this.props
+
     return (
       <div className='StatusBar'
         styleName='root'
       >
+        <div styleName='pathname'>{location.pathname}</div>
         {this.state.updateAvailable
           ? <button onClick={this.updateApp} styleName='update'>
-            <i className='fa fa-cloud-download'/> Update is available!
+            <i styleName='update-icon' className='fa fa-cloud-download'/> Update is available!
           </button>
           : null
         }

From 3412d707376635aa44d792ff41759aadf4ec2770 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 19:03:27 +0900
Subject: [PATCH 050/109] set minimum size to main-window

---
 lib/main-window.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/main-window.js b/lib/main-window.js
index 72fbb8ff..606099be 100644
--- a/lib/main-window.js
+++ b/lib/main-window.js
@@ -6,6 +6,8 @@ const path = require('path')
 var mainWindow = new BrowserWindow({
   width: 1080,
   height: 720,
+  minWidth: 420,
+  minHeight: 320,
   webPreferences: {
     zoomFactor: 1.0,
     blinkFeatures: 'OverlayScrollbars'

From dc6bd1aae8e406ad7de58ee6278ccfa270904e53 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 14 May 2016 19:03:47 +0900
Subject: [PATCH 051/109] bump up electron 1.0.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index eb8165f4..d2d99af8 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "css-loader": "^0.19.0",
     "devtron": "^1.1.0",
     "electron-packager": "^6.0.0",
-    "electron-prebuilt": "^0.37.8",
+    "electron-prebuilt": "^1.0.2",
     "electron-release": "^2.2.0",
     "grunt": "^0.4.5",
     "grunt-electron-installer": "^1.2.0",

From 89a76d9eadb7619741d2eea4313eb6c594feb6c8 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Thu, 19 May 2016 13:58:39 +0900
Subject: [PATCH 052/109] resizible list

---
 browser/main/ArticleDetail/index.js           | 339 ---------------
 browser/main/Main.js                          |  91 +++-
 browser/main/Main.styl                        |  25 ++
 .../ArticleEditor.js                          |   0
 browser/main/NoteDetail/NoteDetail.styl       |  17 +
 .../ShareButton.js                            |   0
 browser/main/NoteDetail/index.js              |  45 ++
 browser/main/NoteList/NoteList.styl           |   4 +
 browser/main/NoteList/index.js                | 150 +++++++
 browser/main/SideNav/FolderItem.styl          |   1 +
 browser/main/SideNav/RepositorySection.js     |   2 +-
 browser/main/SideNav/RepositorySection.styl   |   9 +-
 browser/main/SideNav/SideNav.styl             |   6 +-
 browser/main/SideNav/index.js                 |  21 +-
 browser/main/StatusBar/StatusBar.styl         |   3 +-
 browser/main/TopBar/TopBar.styl               |  12 +-
 browser/main/TopBar/index.js                  |   5 +-
 browser/main/lib/ConfigManager.js             |  14 +-
 browser/main/store.js                         |   7 +-
 browser/styles/index.styl                     |   1 +
 browser/styles/main/ArticleDetail.styl        | 393 ------------------
 browser/styles/main/ArticleList.styl          | 105 -----
 browser/styles/main/ArticleNavigator.styl     | 213 ----------
 browser/styles/main/index.styl                |  19 -
 24 files changed, 370 insertions(+), 1112 deletions(-)
 delete mode 100644 browser/main/ArticleDetail/index.js
 create mode 100644 browser/main/Main.styl
 rename browser/main/{ArticleDetail => NoteDetail}/ArticleEditor.js (100%)
 create mode 100644 browser/main/NoteDetail/NoteDetail.styl
 rename browser/main/{ArticleDetail => NoteDetail}/ShareButton.js (100%)
 create mode 100644 browser/main/NoteDetail/index.js
 create mode 100644 browser/main/NoteList/NoteList.styl
 create mode 100644 browser/main/NoteList/index.js
 delete mode 100644 browser/styles/main/ArticleDetail.styl
 delete mode 100644 browser/styles/main/ArticleList.styl
 delete mode 100644 browser/styles/main/ArticleNavigator.styl

diff --git a/browser/main/ArticleDetail/index.js b/browser/main/ArticleDetail/index.js
deleted file mode 100644
index 1db13315..00000000
--- a/browser/main/ArticleDetail/index.js
+++ /dev/null
@@ -1,339 +0,0 @@
-import React, { PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import moment from 'moment'
-import _ from 'lodash'
-import TagSelect from 'browser/components/TagSelect'
-import ModeSelect from 'browser/components/ModeSelect'
-import ShareButton from './ShareButton'
-import { openModal, isModalOpen } from 'browser/main/lib/modal'
-import DeleteArticleModal from '../modals/DeleteArticleModal'
-import ArticleEditor from './ArticleEditor'
-const electron = require('electron')
-const ipc = electron.ipcRenderer
-import fetchConfig from 'browser/lib/fetchConfig'
-
-let config = fetchConfig()
-ipc.on('config-apply', function (e, newConfig) {
-  config = newConfig
-})
-
-const BRAND_COLOR = '#18AF90'
-const OSX = global.process.platform === 'darwin'
-
-const tagSelectTutorialElement = (
-  <svg width='500' height='500' className='tutorial'>
-    <text x='155' y='50' fill={BRAND_COLOR} fontSize='24'>Attach some tags here!</text>
-
-    <svg x='0' y='-15'>
-      <path fill='white' d='M15.5,22.2c77.8-0.7,155.6-1.3,233.5-2c22.2-0.2,44.4-0.4,66.6-0.6c1.9,0,1.9-3,0-3
-        c-77.8,0.7-155.6,1.3-233.5,2c-22.2,0.2-44.4,0.4-66.6,0.6C13.6,19.2,13.6,22.2,15.5,22.2L15.5,22.2z'/>
-      <path fill='white' d='M130.8,25c-5.4,6.8-10.3,14-14.6,21.5c-0.8,1.4,1.2,3.2,2.4,1.8c1-1.2,2-2.4,3.1-3.7c1.2-1.5-0.9-3.6-2.1-2.1
-        c-1,1.2-2,2.4-3.1,3.7c0.8,0.6,1.6,1.2,2.4,1.8c4.2-7.3,8.9-14.3,14.2-20.9C134.1,25.6,132,23.4,130.8,25L130.8,25z'/>
-      <path fill='white' d='M132.6,22.1c8.4,5.9,16.8,11.9,25.2,17.8c1.6,1.1,3.1-1.5,1.5-2.6c-8.4-5.9-16.8-11.9-25.2-17.8
-        C132.5,18.4,131,21,132.6,22.1L132.6,22.1z'/>
-      <path fill='white' d='M132.9,18.6c0.4,6.7-0.7,13.3-3.5,19.3c-1.5,3.1-3.9,6.4-3.1,10c0.7,3.1,3.4,4.4,6.2,5.5
-        c5.1,2.1,10.5,3.1,16.1,3.2c1.9,0,1.9-3,0-3c-4.7-0.1-9.2-0.8-13.6-2.4c-3-1.1-6.2-1.9-5.4-6.6c0.4-2,2-4.1,2.8-5.9
-        c2.9-6.3,4-13.1,3.6-20.1C135.8,16.7,132.8,16.7,132.9,18.6L132.9,18.6z'/>
-    </svg>
-  </svg>
-)
-
-const modeSelectTutorialElement = (
-  <svg width='500' height='500' className='tutorial'>
-    <text x='195' y='130' fill={BRAND_COLOR} fontSize='24'>Select code syntax!!</text>
-
-    <svg x='300' y='0'>
-      <path fill='white' d='M99.9,58.8c-14.5-0.5-29-2.2-43.1-5.6c-12.3-2.9-27.9-6.4-37.1-15.5C7.9,26,28.2,18.9,37,16.7
-        c13.8-3.5,28.3-4.7,42.4-5.8c29.6-2.2,59.3-1.7,89-1c3,0.1,7.5-0.6,10.2,0.6c3.1,1.4,3.1,5.3,3.3,8.1c0.3,5.2-0.2,10.7-2.4,15.4
-        c-4.4,9.6-18.4,14.7-27.5,18.1c-27.1,10.1-56.7,12.8-85.3,15.6c-1.9,0.2-1.9,3.2,0,3c29.3-2.9,59.8-5.6,87.5-16.2
-        c9.6-3.7,22.8-8.7,27.7-18.4c2.3-4.6,3.2-9.9,3.2-15c0-3.6,0-9.4-2.9-12c-1.9-1.7-4.7-1.8-7.1-2c-4.8-0.2-9.6-0.2-14.4-0.3
-        c-8.7-0.2-17.5-0.3-26.2-0.4C116.7,6.3,99,6.5,81.3,7.8c-15.8,1.1-32.1,2.3-47.4,6.6c-7.7,2.2-22.1,6.9-20.9,17.4
-        c0.6,5.4,5.6,9.4,9.9,12.1c6.7,4.3,14.4,6.9,22,9.2c17.8,5.4,36.4,8,54.9,8.6C101.8,61.8,101.8,58.8,99.9,58.8L99.9,58.8z'/>
-      <path fill='white' d='M11.1,67.8c9.2-6.1,18.6-11.9,28.2-17.2c-0.7-0.3-1.5-0.6-2.2-0.9c0.9,5.3,0.7,10.3-0.5,15.5
-        c-0.4,1.9,2.4,2.7,2.9,0.8c1.4-5.7,1.5-11.3,0.5-17.1c-0.2-1-1.4-1.3-2.2-0.9c-9.7,5.3-19.1,11.1-28.2,17.2
-        C8,66.3,9.5,68.9,11.1,67.8L11.1,67.8z'/>
-      <path fill='white' d='M31.5,52.8C23.4,68.9,0.2,83.2,7.9,104c0.7,1.8,3.6,1,2.9-0.8C3.6,83.7,26.4,69.7,34.1,54.3
-        C35,52.6,32.4,51.1,31.5,52.8L31.5,52.8z'/>
-    </svg>
-  </svg>
-)
-
-export default class ArticleDetail extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.deleteHandler = (e) => {
-      if (isModalOpen()) return true
-      this.handleDeleteButtonClick()
-    }
-    this.uncacheHandler = (e) => {
-      if (isModalOpen()) return true
-      this.handleUncache()
-    }
-    this.titleHandler = (e) => {
-      if (isModalOpen()) return true
-      if (this.refs.title) {
-        this.focusTitle()
-      }
-    }
-    this.editHandler = (e) => {
-      if (isModalOpen()) return true
-      if (this.refs.editor) this.refs.editor.switchEditMode()
-    }
-    this.previewHandler = (e) => {
-      if (isModalOpen()) return true
-      if (this.refs.editor) this.refs.editor.switchPreviewMode()
-    }
-    this.configApplyHandler = (e, config) => this.handleConfigApply(e, config)
-
-    this.state = {
-      article: Object.assign({content: ''}, props.activeArticle),
-      openShareDropdown: false,
-      fontFamily: config['editor-font-family']
-    }
-  }
-
-  componentDidMount () {
-    this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
-    this.shareDropdownInterceptor = (e) => {
-      e.stopPropagation()
-    }
-
-    ipc.on('detail-delete', this.deleteHandler)
-    ipc.on('detail-uncache', this.uncacheHandler)
-    ipc.on('detail-title', this.titleHandler)
-    ipc.on('detail-edit', this.editHandler)
-    ipc.on('detail-preview', this.previewHandler)
-    ipc.on('config-apply', this.configApplyHandler)
-  }
-
-  componentWillUnmount () {
-    clearInterval(this.refreshTimer)
-
-    ipc.removeListener('detail-delete', this.deleteHandler)
-    ipc.removeListener('detail-uncache', this.uncacheHandler)
-    ipc.removeListener('detail-title', this.titleHandler)
-    ipc.removeListener('detail-edit', this.editHandler)
-    ipc.removeListener('detail-preview', this.previewHandler)
-  }
-
-  componentDidUpdate (prevProps, prevState) {
-    if (this.props.activeArticle == null || prevProps.activeArticle == null || this.props.activeArticle.key !== prevProps.activeArticle.key) {
-      if (this.refs.editor) this.refs.editor.resetCursorPosition()
-    }
-
-    if (prevProps.activeArticle == null && this.props.activeArticle) {
-
-    }
-  }
-
-  handleConfigApply (e, config) {
-    this.setState({
-      fontFamily: config['editor-font-family']
-    })
-  }
-
-  renderEmpty () {
-    return (
-      <div className='ArticleDetail empty'>
-        <div className='ArticleDetail-empty-box'>
-          <div className='ArticleDetail-empty-box-message'>{OSX ? 'Command(⌘)' : 'Ctrl(^)'} + N<br/>to create a new post</div>
-        </div>
-      </div>
-    )
-  }
-
-  handleOthersButtonClick (e) {
-    this.deleteHandler()
-  }
-
-  handleFolderKeyChange (e) {
-    let { dispatch, activeArticle, status, folders } = this.props
-    let article = Object.assign({}, activeArticle, {
-      FolderKey: e.target.value,
-      updatedAt: new Date()
-    })
-
-    // dispatch(updateArticle(article))
-
-    let targetFolderKey = e.target.value
-    if (status.targetFolders.length > 0) {
-      let targetFolder = _.findWhere(folders, {key: targetFolderKey})
-      // dispatch(switchFolder(targetFolder.name))
-    }
-  }
-
-  handleTitleChange (e) {
-    let { dispatch, activeArticle } = this.props
-    let article = Object.assign({}, activeArticle, {
-      title: e.target.value,
-      updatedAt: new Date()
-    })
-    // dispatch(updateArticle(article))
-  }
-
-  handleTagsChange (newTag, tags) {
-    let { dispatch, activeArticle } = this.props
-    let article = Object.assign({}, activeArticle, {
-      tags: tags,
-      updatedAt: new Date()
-    })
-
-    // dispatch(updateArticle(article))
-  }
-
-  handleModeChange (value) {
-    let { dispatch, activeArticle } = this.props
-    let article = Object.assign({}, activeArticle, {
-      mode: value,
-      updatedAt: new Date()
-    })
-
-    // dispatch(updateArticle(article))
-    this.switchEditMode()
-  }
-
-  handleContentChange (value) {
-    let { dispatch, activeArticle } = this.props
-    if (activeArticle.content !== value) {
-      let article = Object.assign({}, activeArticle, {
-        content: value,
-        updatedAt: new Date()
-      })
-
-      // dispatch(updateArticle(article))
-    }
-  }
-
-  handleDeleteButtonClick (e) {
-    if (this.props.activeArticle) {
-      openModal(DeleteArticleModal, {articleKey: this.props.activeArticle.key})
-    }
-  }
-
-  handleTitleKeyDown (e) {
-    if (e.keyCode === 9 && !e.shiftKey) {
-      e.preventDefault()
-      this.refs.mode.handleIdleSelectClick()
-    }
-  }
-
-  handleModeSelectKeyDown (e) {
-    if (e.keyCode === 9 && !e.shiftKey) {
-      e.preventDefault()
-      this.switchEditMode()
-    }
-
-    if (e.keyCode === 9 && e.shiftKey) {
-      e.preventDefault()
-      this.focusTitle()
-    }
-
-    if (e.keyCode === 27) {
-      this.focusTitle()
-    }
-  }
-
-  switchEditMode () {
-    this.refs.editor.switchEditMode()
-  }
-
-  focusTitle () {
-    if (this.refs.title) {
-      let titleEl = ReactDOM.findDOMNode(this.refs.title)
-      titleEl.focus()
-      titleEl.select()
-    }
-  }
-
-  render () {
-    let { folders, status, tags, activeArticle, modified, user } = this.props
-    if (activeArticle == null) return this.renderEmpty()
-    let folderOptions = folders.map((folder) => {
-      return (
-        <option key={folder.key} value={folder.key}>{folder.name}</option>
-      )
-    })
-
-    let isUnsaved = !!_.findWhere(modified, {key: activeArticle.key})
-
-    return (
-      <div tabIndex='4' className='ArticleDetail'>
-        <div className='ArticleDetail-info'>
-          <div className='ArticleDetail-info-row'>
-            <select
-              className='ArticleDetail-info-folder'
-              value={activeArticle.FolderKey}
-              onChange={(e) => this.handleFolderKeyChange(e)}
-            >
-              {folderOptions}
-            </select>
-            <span className='ArticleDetail-info-status'
-              children={
-                isUnsaved
-                  ? <span> <span className='unsaved-mark'>●</span> Unsaved</span>
-                  : `Created : ${moment(activeArticle.createdAt).format('YYYY/MM/DD')} Updated : ${moment(activeArticle.updatedAt).format('YYYY/MM/DD')}`
-              }
-            />
-
-            <div className='ArticleDetail-info-control'>
-              <ShareButton
-                article={activeArticle}
-                user={user}
-                />
-
-              <button className='ArticleDetail-info-control-delete-button' onClick={(e) => this.handleOthersButtonClick(e)}>
-                <i className='fa fa-fw fa-trash'/>
-                <span className='tooltip'>Delete Post (^ + Del)</span>
-              </button>
-            </div>
-          </div>
-          <div className='ArticleDetail-info-row2'>
-            <TagSelect
-              tags={activeArticle.tags}
-              onChange={(tags, tag) => this.handleTagsChange(tags, tag)}
-              suggestTags={tags}
-            />
-
-            {status.isTutorialOpen ? tagSelectTutorialElement : null}
-          </div>
-        </div>
-
-        <div className='ArticleDetail-panel'>
-          <div className='ArticleDetail-panel-header'>
-            <div className='ArticleDetail-panel-header-title'>
-              <input
-                onKeyDown={(e) => this.handleTitleKeyDown(e)}
-                placeholder='(Untitled)'
-                ref='title'
-                value={activeArticle.title}
-                onChange={(e) => this.handleTitleChange(e)}
-                style={{
-                  fontFamily: this.state.fontFamily
-                }}
-              />
-            </div>
-            <ModeSelect
-              ref='mode'
-              onChange={(e) => this.handleModeChange(e)}
-              onKeyDown={(e) => this.handleModeSelectKeyDown(e)}
-              value={activeArticle.mode}
-              className='ArticleDetail-panel-header-mode'
-            />
-            {status.isTutorialOpen ? modeSelectTutorialElement : null}
-          </div>
-          <ArticleEditor
-            ref='editor'
-            article={activeArticle}
-            onChange={(content) => this.handleContentChange(content)}
-          />
-        </div>
-      </div>
-    )
-  }
-}
-
-ArticleDetail.propTypes = {
-  dispatch: PropTypes.func,
-  repositories: PropTypes.array
-}
diff --git a/browser/main/Main.js b/browser/main/Main.js
index 10fbcd01..ee8f12e6 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -1,13 +1,27 @@
 import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './Main.styl'
 import { connect } from 'react-redux'
 import SideNav from './SideNav'
 import TopBar from './TopBar'
-import ArticleList from './ArticleList'
-import ArticleDetail from './ArticleDetail'
+import NoteList from './NoteList'
+import NoteDetail from './NoteDetail'
 import Repository from 'browser/lib/Repository'
 import StatusBar from './StatusBar'
+import _ from 'lodash'
+import ConfigManager from 'browser/main/lib/ConfigManager'
 
 class Main extends React.Component {
+  constructor (props) {
+    super(props)
+
+    let { config } = props
+
+    this.state = {
+      isSliderFocused: false,
+      listWidth: config.listWidth
+    }
+  }
   componentDidMount () {
     let { dispatch } = this.props
 
@@ -18,25 +32,74 @@ class Main extends React.Component {
       })
   }
 
+  handleSlideMouseDown (e) {
+    e.preventDefault()
+    this.setState({
+      isSliderFocused: true
+    })
+  }
+
+  handleMouseUp (e) {
+    if (this.state.isSliderFocused) {
+      this.setState({
+        isSliderFocused: false
+      }, () => {
+        let { dispatch } = this.props
+        let newListWidth = this.state.listWidth
+        // TODO: ConfigManager should dispatch itself.
+        ConfigManager.set({listWidth: newListWidth})
+        dispatch({
+          type: 'SET_LIST_WIDTH',
+          listWidth: newListWidth
+        })
+      })
+    }
+  }
+
+  handleMouseMove (e) {
+    if (this.state.isSliderFocused) {
+      let offset = this.refs.body.getBoundingClientRect().left
+      let newListWidth = e.pageX - offset
+      if (newListWidth < 10) {
+        newListWidth = 10
+      } else if (newListWidth > 600) {
+        newListWidth = 600
+      }
+      this.setState({
+        listWidth: newListWidth
+      })
+    }
+  }
+
   render () {
+    let { config } = this.props
+
     return (
       <div
         className='Main'
+        styleName='root'
+        onMouseMove={(e) => this.handleMouseMove(e)}
+        onMouseUp={(e) => this.handleMouseUp(e)}
       >
         <SideNav
-          {...this.props}
-        />
-        <TopBar
-          {...this.props}
-        />
-        <ArticleList
-          {...this.props}
-        />
-        <ArticleDetail
-          {...this.props}
+          {..._.pick(this.props, ['dispatch', 'repositories', 'config', 'location'])}
         />
+        <TopBar/>
+        <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
+          ref='body'
+        >
+          <NoteList style={{width: this.state.listWidth}}/>
+          <div styleName={this.state.isSliderFocused ? 'slider--active' : 'slider'}
+            style={{left: this.state.listWidth}}
+            onMouseDown={(e) => this.handleSlideMouseDown(e)}
+            draggable='false'
+          />
+          <NoteDetail
+            style={{left: this.state.listWidth + 5}}
+          />
+        </div>
         <StatusBar
-          {...this.props}
+          {..._.pick(this.props, ['config', 'location', 'dispatch'])}
         />
       </div>
     )
@@ -48,4 +111,4 @@ Main.propTypes = {
   repositories: PropTypes.array
 }
 
-export default connect((x) => x)(Main)
+export default connect((x) => x)(CSSModules(Main, styles))
diff --git a/browser/main/Main.styl b/browser/main/Main.styl
new file mode 100644
index 00000000..ef6eddb3
--- /dev/null
+++ b/browser/main/Main.styl
@@ -0,0 +1,25 @@
+.root
+  absolute top left bottom right
+
+.body
+  absolute right
+  bottom $statusBar-height - 1
+  top $topBar-height - 1
+  left $sideNav-width
+
+.body--expanded
+  @extend .body
+  left $sideNav--folded-width
+
+.slider
+  absolute top bottom
+  width 5px
+  background-color $ui-backgroundColor
+  border-width 0 1px 0
+  border-style solid
+  border-color $ui-borderColor
+  cursor ew-resize
+
+.slider--active
+  @extend .slider
+  background-color $ui-button--active-backgroundColor
diff --git a/browser/main/ArticleDetail/ArticleEditor.js b/browser/main/NoteDetail/ArticleEditor.js
similarity index 100%
rename from browser/main/ArticleDetail/ArticleEditor.js
rename to browser/main/NoteDetail/ArticleEditor.js
diff --git a/browser/main/NoteDetail/NoteDetail.styl b/browser/main/NoteDetail/NoteDetail.styl
new file mode 100644
index 00000000..3a641159
--- /dev/null
+++ b/browser/main/NoteDetail/NoteDetail.styl
@@ -0,0 +1,17 @@
+.root
+  absolute top bottom right
+  border-width 1px 0
+  border-style solid
+  border-color $ui-borderColor
+
+.empty
+  height 320px
+  display flex
+  align-items center
+.empty-message
+  width 100%
+  font-size 42px
+  line-height 72px
+  text-align center
+  color $ui-inactive-text-color
+
diff --git a/browser/main/ArticleDetail/ShareButton.js b/browser/main/NoteDetail/ShareButton.js
similarity index 100%
rename from browser/main/ArticleDetail/ShareButton.js
rename to browser/main/NoteDetail/ShareButton.js
diff --git a/browser/main/NoteDetail/index.js b/browser/main/NoteDetail/index.js
new file mode 100644
index 00000000..3d9b7c56
--- /dev/null
+++ b/browser/main/NoteDetail/index.js
@@ -0,0 +1,45 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './NoteDetail.styl'
+const electron = require('electron')
+
+const OSX = global.process.platform === 'darwin'
+
+class NoteDetail extends React.Component {
+  componentDidUpdate (prevProps, prevState) {
+  }
+
+  renderEmpty () {
+    return (
+      <div styleName='empty'>
+        <div styleName='empty-message'>{OSX ? 'Command(⌘)' : 'Ctrl(^)'} + N<br/>to create a new post</div>
+      </div>
+    )
+  }
+
+  render () {
+    let isEmpty = true
+    let view = isEmpty
+      ? this.renderEmpty()
+      : null
+    return (
+      <div className='NoteDetail'
+        style={this.props.style}
+        styleName='root'
+        tabIndex='0'
+      >
+        {view}
+      </div>
+    )
+  }
+}
+
+NoteDetail.propTypes = {
+  dispatch: PropTypes.func,
+  repositories: PropTypes.array,
+  style: PropTypes.shape({
+    left: PropTypes.number
+  })
+}
+
+export default CSSModules(NoteDetail, styles)
diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
new file mode 100644
index 00000000..26643c16
--- /dev/null
+++ b/browser/main/NoteList/NoteList.styl
@@ -0,0 +1,4 @@
+.root
+  absolute top left bottom
+  border-top $ui-border
+  border-bottom $ui-border
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
new file mode 100644
index 00000000..e7a05d33
--- /dev/null
+++ b/browser/main/NoteList/index.js
@@ -0,0 +1,150 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './NoteList.styl'
+import ReactDOM from 'react-dom'
+import ModeIcon from 'browser/components/ModeIcon'
+import moment from 'moment'
+import _ from 'lodash'
+
+const electron = require('electron')
+const remote = electron.remote
+const ipc = electron.ipcRenderer
+
+class NoteList extends React.Component {
+  constructor (props) {
+    super(props)
+
+    // this.focusHandler = (e) => this.focus()
+  }
+
+  componentDidMount () {
+    // this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
+    // ipc.on('list-focus', this.focusHandler)
+    // this.focus()
+  }
+
+  componentWillUnmount () {
+    // clearInterval(this.refreshTimer)
+    // ipc.removeListener('list-focus', this.focusHandler)
+  }
+
+  componentDidUpdate () {
+    // return false
+    // var index = articles.indexOf(null)
+    // var el = ReactDOM.findDOMNode(this)
+    // var li = el.querySelectorAll('.NoteList>div')[index]
+
+    // if (li == null) {
+    //   return
+    // }
+
+    // var overflowBelow = el.clientHeight + el.scrollTop < li.offsetTop + li.clientHeight
+    // if (overflowBelow) {
+    //   el.scrollTop = li.offsetTop + li.clientHeight - el.clientHeight
+    // }
+    // var overflowAbove = el.scrollTop > li.offsetTop
+    // if (overflowAbove) {
+    //   el.scrollTop = li.offsetTop
+    // }
+  }
+
+  focus () {
+    // ReactDOM.findDOMNode(this).focus()
+  }
+
+  // 移動ができなかったらfalseを返す:
+  selectPriorArticle () {
+    let { articles, activeArticle, dispatch } = this.props
+    let targetIndex = articles.indexOf(activeArticle) - 1
+    let targetArticle = articles[targetIndex]
+    return false
+  }
+
+  selectNextArticle () {
+    let { articles, activeArticle, dispatch } = this.props
+    let targetIndex = articles.indexOf(activeArticle) + 1
+    let targetArticle = articles[targetIndex]
+
+    if (targetArticle != null) {
+      dispatch(switchArticle(targetArticle.key))
+      return true
+    }
+    return false
+  }
+
+  handleArticleClick (article) {
+    let { dispatch } = this.props
+    return function (e) {
+      dispatch(switchArticle(article.key))
+    }
+  }
+
+  handleNoteListKeyDown (e) {
+    if (e.metaKey || e.ctrlKey) return true
+
+    if (e.keyCode === 65 && !e.shiftKey) {
+      e.preventDefault()
+      remote.getCurrentWebContents().send('top-new-post')
+    }
+
+    if (e.keyCode === 65 && e.shiftKey) {
+      e.preventDefault()
+      remote.getCurrentWebContents().send('nav-new-folder')
+    }
+
+    if (e.keyCode === 68) {
+      e.preventDefault()
+      remote.getCurrentWebContents().send('detail-delete')
+    }
+
+    if (e.keyCode === 84) {
+      e.preventDefault()
+      remote.getCurrentWebContents().send('detail-title')
+    }
+
+    if (e.keyCode === 69) {
+      e.preventDefault()
+      remote.getCurrentWebContents().send('detail-edit')
+    }
+
+    if (e.keyCode === 83) {
+      e.preventDefault()
+      remote.getCurrentWebContents().send('detail-save')
+    }
+
+    if (e.keyCode === 38) {
+      e.preventDefault()
+      this.selectPriorArticle()
+    }
+
+    if (e.keyCode === 40) {
+      e.preventDefault()
+      this.selectNextArticle()
+    }
+  }
+
+  render () {
+    let articleElements = []
+
+    return (
+      <div className='NoteList'
+        styleName='root'
+        tabIndex='0'
+        onKeyDown={(e) => this.handleNoteListKeyDown(e)}
+        style={this.props.style}
+      >
+        {articleElements}
+      </div>
+    )
+  }
+}
+
+NoteList.propTypes = {
+  dispatch: PropTypes.func,
+  repositories: PropTypes.array,
+  style: PropTypes.shape({
+    width: PropTypes.number
+  })
+}
+
+export default CSSModules(NoteList, styles)
diff --git a/browser/main/SideNav/FolderItem.styl b/browser/main/SideNav/FolderItem.styl
index 8cbeb646..bf64366b 100644
--- a/browser/main/SideNav/FolderItem.styl
+++ b/browser/main/SideNav/FolderItem.styl
@@ -86,6 +86,7 @@
     margin-left 0
     overflow ellipsis
     background-color $ui-tooltip-backgroundColor
+    z-index 10
     color white
     line-height 34px
     border-top-right-radius 5px
diff --git a/browser/main/SideNav/RepositorySection.js b/browser/main/SideNav/RepositorySection.js
index 110d3a22..a643d9e8 100644
--- a/browser/main/SideNav/RepositorySection.js
+++ b/browser/main/SideNav/RepositorySection.js
@@ -158,7 +158,7 @@ class RepositorySection extends React.Component {
           onContextMenu={(e) => this.handleContextButtonClick(e)}
         >
           <div styleName='header-name'>
-            <i styleName='header-name-icon' className='fa fa-archive fa-fw'/>
+            <i className='fa fa-archive fa-fw'/>
             <span styleName='header-name-label'>{repository.name}</span>
           </div>
 
diff --git a/browser/main/SideNav/RepositorySection.styl b/browser/main/SideNav/RepositorySection.styl
index e73e9c8c..f9e7e9fe 100644
--- a/browser/main/SideNav/RepositorySection.styl
+++ b/browser/main/SideNav/RepositorySection.styl
@@ -10,10 +10,12 @@
   text-align left
   font-size 14px
   color $ui-inactive-text-color
+  &:hover
+    background-color $ui-button--hover-backgroundColor
   &:hover .header-control-button
     opacity 1
   &:active
-    background-color $ui-button--active-backgroundColor !important
+    background-color $ui-button--active-backgroundColor
     color $ui-button--active-color
     .header-control-button, .header-control-button--show
       color white
@@ -22,6 +24,8 @@
   @extend .header
   background-color $ui-button--active-backgroundColor
   color $ui-button--active-color
+  &:hover
+    background-color $ui-button--active-backgroundColor
   .header-control-button,
   .header-control-button--show
     color white
@@ -124,6 +128,7 @@
     margin-left 0
     overflow ellipsis
     background-color $ui-tooltip-backgroundColor
+    z-index 10
     color white
     line-height 34px
     border-top-right-radius 5px
@@ -136,6 +141,7 @@
     height 33px
     top inherit
     bottom inherit
+    z-index 11
     left 43px
     box-sizing border-box
     overflow hidden
@@ -164,6 +170,7 @@
     margin-left 0
     overflow ellipsis
     background-color $ui-tooltip-backgroundColor
+    z-index 10
     color white
     line-height 34px
     border-top-right-radius 5px
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 8fcab2f6..e4249119 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -1,8 +1,9 @@
 .root
   absolute top left
-  bottom $statusBar-height
+  bottom $statusBar-height - 1
   width $sideNav-width
   border-right $ui-border
+  border-bottom $ui-border
   background-color $ui-backgroundColor
   user-select none
   color $ui-text-color
@@ -88,6 +89,7 @@
     margin-left 0
     overflow hidden
     background-color $ui-tooltip-backgroundColor
+    z-index 10
     color white
     line-height 34px
     border-top-right-radius 5px
@@ -99,6 +101,7 @@
     text-align center
     &:hover .menu-button-label
       width 100px
+  // TODO: extract tooltip style to a mixin
   .menu-button-label
     position fixed
     display inline-block
@@ -110,6 +113,7 @@
     margin-left 0
     overflow ellipsis
     background-color $ui-tooltip-backgroundColor
+    z-index 10
     color white
     line-height 34px
     border-top-right-radius 5px
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 025236d6..05411f16 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -74,8 +74,7 @@ class SideNav extends React.Component {
       })
 
     return (
-      <div
-        className='SideNav'
+      <div className='SideNav'
         styleName={isFolded ? 'root-folded' : 'root'}
         tabIndex='1'
       >
@@ -83,7 +82,7 @@ class SideNav extends React.Component {
           <button styleName='top-menu'
             onClick={(e) => this.handleMenuButtonClick(e)}
           >
-            <i styleName='top-menu-icon' className='fa fa-navicon fa-fw'/>
+            <i className='fa fa-navicon fa-fw'/>
             <span styleName='top-menu-label'>Menu</span>
           </button>
         </div>
@@ -92,17 +91,13 @@ class SideNav extends React.Component {
           <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
             onClick={(e) => this.handleHomeButtonClick(e)}
           >
-            <i styleName='menu-button-icon'
-              className='fa fa-home fa-fw'
-            />
+            <i className='fa fa-home fa-fw'/>
             <span styleName='menu-button-label'>Home</span>
           </button>
           <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
             onClick={(e) => this.handleStarredButtonClick(e)}
           >
-            <i styleName='menu-button-icon'
-              className='fa fa-star fa-fw'
-            />
+            <i className='fa fa-star fa-fw'/>
             <span styleName='menu-button-label'>Starred</span>
           </button>
         </div>
@@ -132,7 +127,13 @@ SideNav.contextTypes = {
 
 SideNav.propTypes = {
   dispatch: PropTypes.func,
-  repositories: PropTypes.array
+  repositories: PropTypes.array,
+  config: PropTypes.shape({
+    isSideNavFolded: PropTypes.bool
+  }),
+  location: PropTypes.shape({
+    pathname: PropTypes.string
+  })
 }
 
 export default CSSModules(SideNav, styles)
diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl
index bdbc431d..7687b112 100644
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -1,7 +1,6 @@
 .root
   absolute bottom left right
-  height $statusBar-height
-  border-top $ui-border
+  height $statusBar-height - 1
   background-color $ui-backgroundColor
 
 .pathname
diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl
index 570e8912..56ad9c72 100644
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -2,14 +2,13 @@
   absolute top right
   background-color $ui-backgroundColor
   left $sideNav-width
-  border-bottom $ui-border
-  height 60px
+  height $topBar-height -1
   clearfix()
 
 .left
   float left
-  height 59px
-  line-height 60px
+  height $topBar-height - 1
+  line-height $topBar-height
 
 .left-search
   margin-top 12px
@@ -60,11 +59,12 @@
 
 .left-control-newPostButton-tooltip
   position fixed
+  line-height 1.4
   background-color $ui-tooltip-backgroundColor
   color $ui-tooltip-text-color
   font-size 10px
   margin-left -35px
-  margin-top 12px
+  margin-top 5px
   padding 5px
   z-index 1
   border-radius 5px
@@ -73,7 +73,7 @@
 
 .right
   float right
-  height 60px
+  height $topBar-height -1
   clearfix()
 
 .right-helpButton
diff --git a/browser/main/TopBar/index.js b/browser/main/TopBar/index.js
index 922ccf48..3aa89aee 100644
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TopBar.styl'
 import activityRecord from 'browser/lib/activityRecord'
@@ -80,7 +81,7 @@ class TopBar extends React.Component {
               onClick={(e) => this.handleNewPostButtonClick(e)}>
               <i className='fa fa-plus'/>
               <span styleName='left-control-newPostButton-tooltip'>
-                New Post ({OSX ? '⌘' : '^'} + n)
+                New Post {OSX ? '⌘' : '^'} + n
               </span>
             </button>
           </div>
@@ -111,4 +112,4 @@ TopBar.propTypes = {
   })
 }
 
-export default CSSModules(TopBar, styles)
+export default connect((x) => x)(CSSModules(TopBar, styles))
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index 71153544..692bf3c9 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -2,13 +2,16 @@ import _ from 'lodash'
 
 const defaultConfig = {
   zoom: 1,
-  isSideNavFolded: false
+  isSideNavFolded: false,
+  listWidth: 250
 }
 
-function _validate (config) {
+function validate (config) {
+  console.log(config)
   if (!_.isObject(config)) return false
   if (!_.isNumber(config.zoom) || config.zoom < 0) return false
   if (!_.isBoolean(config.isSideNavFolded)) return false
+  if (!_.isNumber(config.listWidth) || config.listWidth <= 0) return false
 
   return true
 }
@@ -22,7 +25,7 @@ function get () {
 
   try {
     config = JSON.parse(config)
-    if (!_validate(config)) throw new Error('INVALID CONFIG')
+    if (!validate(config)) throw new Error('INVALID CONFIG')
   } catch (err) {
     console.warn('Boostnote resets the malformed configuration.')
     config = defaultConfig
@@ -35,11 +38,12 @@ function get () {
 function set (updates) {
   let currentConfig = get()
   let newConfig = Object.assign({}, defaultConfig, currentConfig, updates)
-  if (!_validate(newConfig)) throw new Error('INVALID CONFIG')
+  if (!validate(newConfig)) throw new Error('INVALID CONFIG')
   _save(newConfig)
 }
 
 export default {
   get,
-  set
+  set,
+  validate
 }
diff --git a/browser/main/store.js b/browser/main/store.js
index 0d37038b..012e9de6 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -30,7 +30,7 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 const initialRepositories = []
 
 function repositories (state = initialRepositories, action) {
-  console.log(action)
+  console.info('REDUX >> ', action)
   switch (action.type) {
     case 'INIT_ALL':
       return action.data.slice()
@@ -121,6 +121,11 @@ function config (state = defaultConfig, action) {
     case 'SET_ZOOM':
       state.zoom = action.zoom
       return Object.assign({}, state)
+    case 'SET_LIST_WIDTH':
+      state.listWidth = action.listWidth
+      return Object.assign({}, state)
+    case 'SET_CONFIG':
+      return Object.assign({}, state, action.config)
   }
   return state
 }
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 3d39ba77..7d592146 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -7,6 +7,7 @@ $danger-lighten-color = #FFE5E6
 $statusBar-height = 24px
 $sideNav-width = 200px
 $sideNav--folded-width = 44px
+$topBar-height = 60px
 
 // UI default
 $ui-text-color = #515151
diff --git a/browser/styles/main/ArticleDetail.styl b/browser/styles/main/ArticleDetail.styl
deleted file mode 100644
index bcf9edeb..00000000
--- a/browser/styles/main/ArticleDetail.styl
+++ /dev/null
@@ -1,393 +0,0 @@
-noTagsColor = #999
-
-infoButton()
-  display inline-block
-  border-radius 16.5px
-  cursor pointer
-  height 33px
-  width 33px
-  line-height 33px
-  margin-right 5px
-  font-size 18px
-  color inactiveTextColor
-  background-color white
-  padding 0
-  border 1px solid white
-  &:focus
-    border-color focusBorderColor
-  &:hover
-    color inherit
-
-.ArticleDetail
-  absolute right bottom
-  top 60px
-  left 450px
-  padding 10px
-  background-color #E6E6E6
-  border-top 1px solid borderColor
-  &.empty
-    .ArticleDetail-empty-box
-      line-height 72px
-      font-size 42px
-      height 320px
-      display flex
-      align-items center
-      .ArticleDetail-empty-box-message
-        text-align center
-        width 100%
-        color inactiveTextColor
-  .ArticleDetail-info
-    height 70px
-    width 100%
-    font-size 12px
-    user-select none
-    &>.tutorial
-      position fixed
-      z-index 35
-    .ArticleDetail-info-folder
-      display inline-block
-      max-width 100px
-      overflow ellipsis
-      height 10px
-      width 150px
-      height 27px
-      outline none
-      background-color darken(white, 5%)
-      border 1px solid transparent
-      &:hover
-        background-color white
-      &:focus
-        border-color focusBorderColor
-      &>.tutorial
-        position fixed
-        z-index 35
-    .ArticleDetail-info-status
-      padding 0 5px
-      .unsaved-mark
-        color brandColor
-    .ArticleDetail-info-control
-      float right
-      clearfix
-      .ShareButton
-        display block
-        float left
-      &>button, .ShareButton-open-button
-        infoButton()
-        .tooltip
-          tooltip()
-          margin-top 30px
-        &:hover
-          .tooltip
-            opacity 1
-      &>button
-        float left
-        &:nth-child(1) .tooltip
-          margin-left -65px
-      .ArticleDetail-info-control-delete-button
-        .tooltip
-          right 5px
-      .ArticleDetail-info-control-save
-        float left
-        width 80px
-        margin-right 5px
-        overflow hidden
-        transition width 0.15s ease-in-out
-        border-radius 16.5px
-        &.hide
-          width 0px
-          opacity 0.2
-      .ArticleDetail-info-control-save-button
-        infoButton()
-        background-color brandColor
-        color white
-        font-size 12px
-        width 100%
-        border 1px solid brandBorderColor
-        white-space nowrap
-        .fa
-          font-size 18px
-        &:hover
-          color white
-          background-color lighten(brandColor, 15%)
-        &:focus
-          color white
-          background-color lighten(brandColor, 15%)
-        .tooltip
-          tooltip()
-          margin-top 30px
-          margin-left -90px
-        &:hover .tooltip
-          opacity 1
-
-      .ShareButton-open-button .tooltip
-        margin-left -40px
-      .ShareButton-dropdown
-        position fixed
-        width 185px
-        z-index 35
-        background-color #F0F0F0
-        padding 4px 0
-        border-radius 5px
-        right 5px
-        top 95px
-        box-shadow 0px 0px 10px 1px alpha(#bbb, 0.8)
-        border 1px solid #bcbcbc
-        &.hide
-          display none
-        &>button
-          background-color transparent
-          height 21px
-          width 100%
-          border none
-          padding-left 20px
-          text-align left
-          font-size 13px
-          font-family '.HelveticaNeueDeskInterface-Regular', sans-serif
-          &:hover
-            background-color #4297FE
-            color white
-        .ShareButton-url
-          height 40px
-          width 100%
-          position relative
-          padding 0 5px
-          .ShareButton-url-input
-            height 21px
-            border none
-            width 143px
-            float left
-            border-top-left-radius 3px
-            border-bottom-left-radius 3px
-            border 1px solid borderColor
-            border-right none
-          .ShareButton-url-button
-            height 21px
-            border none
-            width 30px
-            float left
-            background-color #F0F0F0
-            border-top-right-radius 3px
-            border-bottom-right-radius 3px
-            border 1px solid borderColor
-            .ShareButton-url-button-tooltip
-              tooltip()
-              right 10px
-              margin-top 5px
-            &:hover
-              .ShareButton-url-button-tooltip
-                opacity 1
-            &:active
-              background-color #4297FE
-              color white
-          .ShareButton-url-alert
-            padding 10px
-            line-height 16px
-
-
-    .ArticleDetail-info-row2
-      .tutorial
-        position fixed
-        z-index 35
-        font-style italic
-      .TagSelect
-        margin-top 5px
-        .TagSelect-tags
-          white-space nowrap
-          overflow-x auto
-          position relative
-          noSelect()
-          z-index 30
-          background-color #E6E6E6
-          clearfix()
-          .TagSelect-tags-item
-            background-color transparent
-            color white
-            margin 0 2px
-            padding 0
-            height 17px
-            float left
-            button.TagSelect-tags-item-remove
-              display block
-              float left
-              background-color transparent
-              border none
-              font-size 8px
-              color white
-              width 15px
-              height 17px
-              text-align center
-              line-height 12px
-              padding 0
-              margin 0
-              border-top solid 1px darken(brandColor, 5%)
-              border-bottom solid 1px darken(brandColor, 5%)
-              border-left solid 1px darken(brandColor, 5%)
-              border-right solid 1px transparent
-              border-radius left 2px
-              background-color brandColor
-              &:hover
-                background-color lighten(brandColor, 10%)
-                border-color lighten(brandColor, 10%)
-              &:focus
-                background-color lighten(brandColor, 10%)
-                border-color focusBorderColor
-            .TagSelect-tags-item-label
-              background-color brandColor
-              float left
-              font-size 12px
-              border-top solid 1px darken(brandColor, 5%)
-              border-bottom solid 1px darken(brandColor, 5%)
-              border-right solid 1px darken(brandColor, 5%)
-              line-height 15px
-              padding 0 5px
-              border-radius right 2px
-          input.TagSelect-input
-            background-color transparent
-            border none
-            border-bottom 1px solid transparent
-            outline none
-            margin 0 2px
-            transition 0.15s
-            height 18px
-            &:focus
-              border-color focusBorderColor
-        .TagSelect-suggest
-          position fixed
-          width 150px
-          max-height 150px
-          background-color white
-          z-index 50
-          border 1px solid borderColor
-          border-radius 5px
-          overflow-y auto
-          &>button
-            width 100%
-            display block
-            padding 0 15px
-            height 33px
-            line-height 33px
-            background-color transparent
-            border none
-            text-align left
-            font-size 14px
-            &:hover
-              background-color darken(white, 10%)
-  .ArticleDetail-panel
-    position absolute
-    top 70px
-    left 10px
-    right 10px
-    bottom 10px
-    overflow-x hidden
-    overflow-y auto
-    background-color white
-    border-radius 5px
-    border solid 1px lighten(borderColor, 15%)
-    &>.ArticleDetail-panel-header
-      display block
-      height 60px
-      &>.tutorial
-        fixed right
-        z-index 35
-        font-style italic
-      .ArticleDetail-panel-header-mode
-        z-index 30
-        background-color white
-        absolute top bottom
-        right 10px
-        display block
-        height 33px
-        margin-top 14px
-        width 120px
-        margin-right 15px
-        border solid 1px borderColor
-        border-radius 5px
-        transition width 0.15s
-        user-select none
-        &.idle
-          cursor pointer
-          &:hover
-            background-color darken(white, 5%)
-          .ModeIcon
-            padding 0 5px
-            line-height 33px
-        &.edit
-          border-color focusBorderColor
-          input
-            width 120px
-            line-height 31px
-            padding 0 10px
-            border none
-            outline none
-            background-color transparent
-            font-size 14px
-          .ModeSelect-options
-            position fixed
-            width 120px
-            z-index 10
-            border 1px solid borderColor
-            border-radius 5px
-            background-color white
-            max-height 250px
-            overflow-y auto
-            margin-top 5px
-            .ModeSelect-options-item
-              height 33px
-              line-height 33px
-              cursor pointer
-              &.active, &:hover.active
-                background-color brandColor
-                color white
-              .ModeIcon
-                width 30px
-                text-align center
-                display inline-block
-              &:hover
-                background-color darken(white, 10%)
-      .ArticleDetail-panel-header-title
-        absolute left top
-        right 145px
-        padding 0 15px
-        background-color transparent
-        input
-          border none
-          line-height 60px
-          width 100%
-          font-size 24px
-          outline none
-    .ArticleEditor
-      absolute left right bottom
-      top 60px
-      .ArticleDetail-panel-content-tooltip
-        absolute bottom right
-        height 24px
-        background-color alpha(black, 0.5)
-        line-height 24px
-        color white
-        padding 0 15px
-        opacity 0
-        transition 0.1s
-        z-index 35
-      &:hover .ArticleDetail-panel-content-tooltip
-        opacity 1
-      .MarkdownPreview
-        absolute top left right bottom
-        marked()
-        box-sizing border-box
-        padding 5px 15px
-        border-top solid 1px borderColor
-        overflow-y auto
-        user-select all
-        &.empty
-          color lighten(inactiveTextColor, 10%)
-          user-select none
-          font-size 14px
-        &.lineNumbered
-          .lineNumber
-            display block
-      .CodeEditor
-        absolute top left right bottom
-        border-top solid 1px borderColor
-        min-height 300px
-        border-bottom-left-radius 5px
-        border-bottom-right-radius 5px
diff --git a/browser/styles/main/ArticleList.styl b/browser/styles/main/ArticleList.styl
deleted file mode 100644
index 4e3a63f5..00000000
--- a/browser/styles/main/ArticleList.styl
+++ /dev/null
@@ -1,105 +0,0 @@
-articleItemHoverBgColor = darken(white, 5%)
-articleItemColor = #777
-
-.ArticleList
-  absolute bottom
-  top 60px
-  left 200px
-  width 250px
-  border-top 1px solid borderColor
-  border-right 1px solid borderColor
-  &:focus
-    border-color focusBorderColor
-  overflow-y auto
-  noSelect()
-  &>div
-    .ArticleList-item
-      border solid 2px transparent
-      position relative
-      min-height 110px
-      width 100%
-      cursor pointer
-      transition 0.1s
-      background-color white
-      padding 0 10px
-      font-size 12px
-      .ArticleList-item-top
-        clearfix()
-        padding-top 2px
-        line-height 18px
-        height 20px
-        color articleItemColor
-        font-size 11px
-        i
-          margin-right 4px
-        .folderName
-          overflow ellipsis
-          display inline-block
-          width 120px
-        .updatedAt
-          float right
-          line-height 18px
-          .unsaved-mark
-            color brandColor
-      .ArticleList-item-middle
-        font-size 16px
-        position relative
-        padding-top 6px
-        height 22px
-        .mode
-          position absolute
-          left 0
-          font-size 12px
-          line-height 16px
-        .title
-          position absolute
-          left 19px
-          right 0
-          overflow ellipsis
-          small
-            color #AAA
-      .ArticleList-item-middle2
-        padding-top 8px
-        pre
-          color lighten(inactiveTextColor, 10%)
-          white-space pre-wrap
-          overflow hidden
-          height 33px
-          line-height 14px
-          font-size 10px
-          code
-            font-family Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace
-      .ArticleList-item-bottom
-        padding-bottom 5px
-        .tags
-          color articleItemColor
-          line-height 18px
-          word-wrap break-word
-          clearfix()
-          i.fa-tags
-            display inline
-            float left
-            padding 2px 2px 0 0
-            height 14px
-            line-height 13px
-          a
-            background-color brandColor
-            float left
-            color white
-            border-radius 2px
-            padding 1px 5px
-            margin 2px
-            height 14px
-            line-height 13px
-            font-size 10px
-            opacity 0.8
-            &:hover
-              opacity 1
-      &:hover, &.hover
-        background-color articleItemHoverBgColor
-        &:active, &.active
-          background-color white
-      &:active, &.active
-        border-color brandBorderColor
-    .divider
-      border-bottom solid 1px borderColor
diff --git a/browser/styles/main/ArticleNavigator.styl b/browser/styles/main/ArticleNavigator.styl
deleted file mode 100644
index 90835f51..00000000
--- a/browser/styles/main/ArticleNavigator.styl
+++ /dev/null
@@ -1,213 +0,0 @@
-articleNavBgColor = #353535
-articleCount = #999
-
-.ArticleNavigator
-  background-color articleNavBgColor
-  absolute top bottom left
-  width 200px
-  border-right 1px solid borderColor
-  color white
-  user-select none
-  .userInfo
-    height 60px
-    display block
-    box-sizing content-box
-    border-bottom 1px solid borderColor
-    .userProfileName
-      color brandColor
-      font-size 28px
-      padding 6px 37px 0 10px
-      white-space nowrap
-      text-overflow ellipsis
-      overflow hidden
-    .userName
-      color white
-      padding-left 20px
-      margin-top 3px
-    .tutorial
-      position fixed
-      z-index 35
-      top 0
-      left 0
-      pointer-event none
-      font-style italic
-      transition 0.1s
-      &.hide
-        opacity 0
-    .settingBtn
-      width 22px
-      height 22px
-      line-height 22px
-      border-radius 11px
-      position absolute
-      top 19px
-      right 14px
-      color white
-      padding 0
-      background-color transparent
-      border 1px solid white
-      z-index 31
-      .tooltip
-        tooltip()
-        margin-top -5px
-        margin-left 10px
-      &:hover
-        .tooltip
-          opacity 1
-      &:active
-        background-color brandColor
-        border-color brandColor
-  .ArticleNavigator-unsaved
-    position absolute
-    top 100px
-    width 100%
-    height 225px
-    transition opacity 0.2s ease-in-out
-    &.hide
-      opacity 0.2
-    .ArticleNavigator-unsaved-header
-      border-bottom 1px solid alpha(borderColor, 0.5)
-      padding-bottom 5px
-      clearfix()
-      position relative
-      padding-left 10px
-      font-size 18px
-      line-height 22px
-    .ArticleNavigator-unsaved-list
-      height 165px
-      padding 5px 0
-      overflow-y scroll
-      .ArticleNavigator-unsaved-list-item
-        height 33px
-        padding-left 15px
-        clearfix()
-        transition 0.1s
-        cursor pointer
-        overflow hidden
-        &:hover
-          background-color alpha(white, 0.05)
-        &.active, &:active
-          background-color alpha(lighten(brandColor, 25%), 70%)
-        .ArticleNavigator-unsaved-list-item-label
-          float left
-          width 151px
-          line-height 33px
-          overflow ellipsis
-        .ArticleNavigator-unsaved-list-item-label-untitled
-          color inactiveTextColor
-        .ArticleNavigator-unsaved-list-item-discard-button
-          float right
-          width 33px
-          line-height 30px
-          height 33px
-          border none
-          background-color transparent
-          color white
-          font-size 18px
-          opacity 0.5
-          &:hover
-            opacity 1
-      .ArticleNavigator-unsaved-list-empty
-        height 33px
-        padding-left 15px
-        color alpha(white, 0.4)
-        transition 0.1s
-        line-height 33px
-        &:hover
-          color alpha(white, 0.6)
-    .ArticleNavigator-unsaved-control
-      absolute bottom
-      height 33px
-      border-top 1px solid alpha(borderColor, 0.5)
-      width 100%
-      .ArticleNavigator-unsaved-control-save-all-button
-        border none
-        background-color transparent
-        font-size 14px
-        color brandColor
-        padding-left 15px
-        width 100%
-        height 33px
-        text-align left
-        &:hover
-          color lighten(brandColor, 15%)
-          background-color alpha(white, 0.05)
-        &:active
-          color white
-        &:disabled
-          color alpha(brandColor, 0.5)
-          &:hover
-            color alpha(lighten(brandColor, 25%), 0.5)
-            background-color transparent
-
-
-  .ArticleNavigator-folders
-    absolute bottom
-    top 365px
-    width 100%
-    transition top 0.15s ease-in-out
-    background-color articleNavBgColor
-    .tutorial
-      position fixed
-      z-index 35
-      font-style italic
-    &.expand
-      top 100px
-    .ArticleNavigator-folders-header
-      border-bottom 1px solid alpha(borderColor, 0.5)
-      padding-bottom 5px
-      clearfix()
-      position relative
-      z-index 30
-      .title
-        float left
-        padding-left 10px
-        font-size 18px
-        line-height 22px
-      .addBtn
-        float right
-        margin-right 15px
-        width 22px
-        height 22px
-        font-size 10px
-        padding 0
-        line-height 22px
-        border 1px solid white
-        border-radius 11px
-        background-color transparent
-        color white
-        padding 0
-        font-weight bold
-        .tooltip
-          tooltip()
-          margin-top -6px
-          margin-left 11px
-        &:hover
-          .tooltip
-            opacity 1
-        &:active
-          background-color brandColor
-          border-color brandColor
-    .folderList
-      absolute bottom
-      top 33px
-      overflow-y auto
-    .folderList button
-      height 33px
-      width 199px
-      border none
-      text-align left
-      font-size 14px
-      background-color transparent
-      color white
-      padding-left 15px
-      overflow ellipsis
-      &:hover
-        background-color alpha(white, 0.05)
-      &.active, &:active
-        background-color alpha(lighten(brandColor, 25%), 70%)
-        .articleCount
-          color white
-      .articleCount
-        color articleCount
-        font-size 12px
diff --git a/browser/styles/main/index.styl b/browser/styles/main/index.styl
index 3c532b11..46d6b19c 100644
--- a/browser/styles/main/index.styl
+++ b/browser/styles/main/index.styl
@@ -2,9 +2,6 @@
 @import '../mixins/*'
 global-reset()
 @import '../shared/*'
-@import './ArticleNavigator'
-@import './ArticleList'
-@import './ArticleDetail'
 @import './modal/*'
 @import '../theme/*'
 
@@ -89,19 +86,3 @@ textarea.block-input
 
 #content
   fullsize()
-
-.Main
-  .appUpdateButton
-    position fixed
-    z-index 2000
-    bottom 5px
-    right 53px
-    padding 10px 15px
-    border none
-    border-radius 5px
-    background-color brandColor
-    color white
-    opacity 0.7
-    &:hover
-      opacity 1
-      background-color lighten(brandColor, 10%)

From 93d3ea70fc7ed2ecc928e7411634eb6a002f2237 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sun, 22 May 2016 23:44:49 +0900
Subject: [PATCH 053/109] handle new note button & note list

---
 browser/components/FolderMark.js     | 52 ------------------
 browser/lib/Repository.js            | 12 +++--
 browser/main/Main.js                 | 25 +++++++--
 browser/main/Main.styl               | 13 +++--
 browser/main/NoteList/NoteList.styl  | 33 ++++++++++++
 browser/main/NoteList/index.js       | 80 +++++++++++++++++++++++++++-
 browser/main/SideNav/FolderItem.styl |  2 +
 browser/main/TopBar/index.js         | 56 +++++++++++++++----
 browser/main/index.js                |  2 +-
 browser/main/store.js                | 10 ++++
 index.js                             |  2 +-
 11 files changed, 208 insertions(+), 79 deletions(-)
 delete mode 100644 browser/components/FolderMark.js

diff --git a/browser/components/FolderMark.js b/browser/components/FolderMark.js
deleted file mode 100644
index dd6708b9..00000000
--- a/browser/components/FolderMark.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { PropTypes } from 'react'
-
-const BLUE = '#3460C7'
-const LIGHTBLUE = '#2BA5F7'
-const ORANGE = '#FF8E00'
-const YELLOW = '#E8D252'
-const GREEN = '#3FD941'
-const DARKGREEN = '#1FAD85'
-const RED = '#E10051'
-const PURPLE = '#B013A4'
-
-function getColorByIndex (index) {
-  switch (index % 8) {
-    case 0:
-      return RED
-    case 1:
-      return ORANGE
-    case 2:
-      return YELLOW
-    case 3:
-      return GREEN
-    case 4:
-      return DARKGREEN
-    case 5:
-      return LIGHTBLUE
-    case 6:
-      return BLUE
-    case 7:
-      return PURPLE
-    default:
-      return DARKGREEN
-  }
-}
-
-export default class FolderMark extends React.Component {
-  render () {
-    let color = getColorByIndex(this.props.color)
-    let className = 'FolderMark fa fa-square fa-fw'
-    if (this.props.className != null) {
-      className += ' active'
-    }
-
-    return (
-      <i className={className} style={{color: color}}/>
-    )
-  }
-}
-
-FolderMark.propTypes = {
-  color: PropTypes.number,
-  className: PropTypes.string
-}
diff --git a/browser/lib/Repository.js b/browser/lib/Repository.js
index 9c583b4b..b23e497d 100644
--- a/browser/lib/Repository.js
+++ b/browser/lib/Repository.js
@@ -87,7 +87,6 @@ let repositories = []
  * ##### `note.cson`
  *
  * ```cson
- * name: String
  * tags: [String] // tags
  * folder: String // hash key of folder
  * mode: String // syntax mode
@@ -151,7 +150,7 @@ class Repository {
       let noteNames = fs.readdirSync(dataPath)
       let notes = noteNames
         .map((noteName) => {
-          let notePath = path.join(dataPath, noteNames)
+          let notePath = path.join(dataPath, noteName)
 
           return new Promise(function (resolve, reject) {
             CSON.readFile(notePath, function (err, obj) {
@@ -218,7 +217,9 @@ class Repository {
     this.isMount = true
 
     // Put in `repositories` array if it isn't in.
-    let targetIndex = _.findIndex(repositories, {cached: {key: this.cached.key}})
+    let targetIndex = _.findIndex(repositories, (repo) => {
+      this.cached.key === repo.cached.key
+    })
     if (targetIndex < 0) {
       repositories.push(this)
     }
@@ -241,7 +242,9 @@ class Repository {
     this.isMount = false
 
     // Discard from `repositories` array if it is in.
-    let targetIndex = _.findIndex(repositories, {cached: {key: this.cached.key}})
+    let targetIndex = _.findIndex(repositories, (repo) => {
+      this.cached.key === repo.cached.key
+    })
     if (targetIndex > -1) {
       repositories.splice(targetIndex, 1)
     }
@@ -586,6 +589,7 @@ class Repository {
   }
 
   static saveAllCached (allCached) {
+    console.info('cach updated > ', allCached)
     localStorage.setItem('repositories', JSON.stringify(allCached))
   }
 
diff --git a/browser/main/Main.js b/browser/main/Main.js
index ee8f12e6..c3489f87 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -84,18 +84,35 @@ class Main extends React.Component {
         <SideNav
           {..._.pick(this.props, ['dispatch', 'repositories', 'config', 'location'])}
         />
-        <TopBar/>
+        <TopBar
+          {..._.pick(this.props, [
+            'dispatch',
+            'repositories',
+            'config',
+            'params'
+          ])}
+        />
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
           ref='body'
         >
-          <NoteList style={{width: this.state.listWidth}}/>
+          <NoteList style={{width: this.state.listWidth}}
+            {..._.pick(this.props, [
+              'dispatch',
+              'repositories',
+              'config',
+              'params',
+              'location'
+            ])}
+          />
           <div styleName={this.state.isSliderFocused ? 'slider--active' : 'slider'}
             style={{left: this.state.listWidth}}
             onMouseDown={(e) => this.handleSlideMouseDown(e)}
             draggable='false'
-          />
+          >
+            <div styleName='slider-hitbox'/>
+          </div>
           <NoteDetail
-            style={{left: this.state.listWidth + 5}}
+            style={{left: this.state.listWidth + 1}}
           />
         </div>
         <StatusBar
diff --git a/browser/main/Main.styl b/browser/main/Main.styl
index ef6eddb3..a30454ed 100644
--- a/browser/main/Main.styl
+++ b/browser/main/Main.styl
@@ -13,13 +13,18 @@
 
 .slider
   absolute top bottom
-  width 5px
-  background-color $ui-backgroundColor
-  border-width 0 1px 0
+  width 1px
+  background-color $ui-borderColor
+  border-width 0
   border-style solid
   border-color $ui-borderColor
-  cursor ew-resize
+  cursor col-resize
 
 .slider--active
   @extend .slider
   background-color $ui-button--active-backgroundColor
+
+.slider-hitbox
+  absolute top bottom left right
+  width 7px
+  left -3px
diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index 26643c16..e176f6da 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -2,3 +2,36 @@
   absolute top left bottom
   border-top $ui-border
   border-bottom $ui-border
+  overflow auto
+
+.item
+  height 80px
+  border-bottom $ui-border
+  padding 0 5px
+  user-select none
+  cursor pointer
+  &:hover
+    background-color alpha(black, 5%)
+
+.item-info
+  height 30px
+  clearfix()
+  font-size 12px
+  line-height 30px
+
+.item-info-left
+  float left
+
+.item-info-right
+  float right
+
+.item-title
+  height 20px
+  line-height 20px
+  font-weight bold
+  overflow ellipsis
+
+.item-tags
+  height 30px
+  font-size 12px
+  line-height 30px
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index e7a05d33..f3e91539 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -123,8 +123,81 @@ class NoteList extends React.Component {
     }
   }
 
+  getNotes () {
+    let { repositories, params, location } = this.props
+    let repositoryKey = params.repositoryKey
+    let folderKey = params.folderKey
+
+    if (location.pathname.match(/\/home/)) {
+      return repositories
+      .reduce((sum, repository) => {
+        return sum.concat(repository.notes
+          .map((note) => {
+            note._repository = repository
+            return note
+          }))
+      }, [])
+    }
+
+    let repository = _.find(repositories, {key: repositoryKey})
+    if (repository == null) return []
+
+    let folder = _.find(repository.folders, {key: folderKey})
+    if (folder == null) {
+      return repository.notes
+        .map((note) => {
+          note._repository = repository
+          return note
+        })
+    }
+
+    return repository.notes
+      .filter((note) => note.folder === folderKey)
+      .map((note) => {
+        note._repository = repository
+        return note
+      })
+  }
+
+  handleNoteClick (key) {
+    return (e) => {
+      console.log(key)
+    }
+  }
+
   render () {
-    let articleElements = []
+    let notes = this.getNotes()
+    let noteElements = notes.map((note) => {
+      let folder = _.find(note._repository.folders, {key: note.folder})
+      let tagElements = note.tags.map((tag) => {
+        return <span key='tag'>{tag}</span>
+      })
+      let key = `${note._repository.key}/${note.key}`
+
+      return (
+        <div styleName='item'
+          key={key}
+          onClick={(e) => this.handleNoteClick(key)(e)}
+        >
+          <div styleName='item-info'>
+
+            <div styleName='item-info-left'>
+              <i className='fa fa-cube fa-fw' style={{color: folder.color}}/> {folder.name}
+            </div>
+
+            <div styleName='item-info-right'>
+              {moment(note.createdAt).fromNow()}
+            </div>
+
+          </div>
+
+          <div styleName='item-title'>{note.title}</div>
+
+          <div styleName='item-tags'><i className='fa fa-tags fa-fw'/>{tagElements.length > 0 ? tagElements : <span>Not tagged yet</span>}</div>
+
+        </div>
+      )
+    })
 
     return (
       <div className='NoteList'
@@ -133,11 +206,14 @@ class NoteList extends React.Component {
         onKeyDown={(e) => this.handleNoteListKeyDown(e)}
         style={this.props.style}
       >
-        {articleElements}
+        {noteElements}
       </div>
     )
   }
 }
+NoteList.contextTypes = {
+  router: PropTypes.shape([])
+}
 
 NoteList.propTypes = {
   dispatch: PropTypes.func,
diff --git a/browser/main/SideNav/FolderItem.styl b/browser/main/SideNav/FolderItem.styl
index bf64366b..e138c160 100644
--- a/browser/main/SideNav/FolderItem.styl
+++ b/browser/main/SideNav/FolderItem.styl
@@ -61,6 +61,8 @@
   border-radius 5px
   border $ui-border
   outline none
+  background-color white
+  z-index 1
   &:focus
     border-color $ui-input--focus-borderColor
   &:disabled
diff --git a/browser/main/TopBar/index.js b/browser/main/TopBar/index.js
index 3aa89aee..e1071520 100644
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -1,8 +1,9 @@
 import React, { PropTypes } from 'react'
-import { connect } from 'react-redux'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TopBar.styl'
 import activityRecord from 'browser/lib/activityRecord'
+import Repository from 'browser/lib/Repository'
+import _ from 'lodash'
 
 const OSX = window.process.platform === 'darwin'
 
@@ -30,23 +31,56 @@ class TopBar extends React.Component {
     this.searchInput.blur()
   }
 
-  handleSearchChange (e) {
-  }
-
-  handleSearchClearButton (e) {
-    this.searchInput.value = ''
-    this.focusInput()
-  }
-
   handleNewPostButtonClick (e) {
     activityRecord.emit('ARTICLE_CREATE')
+
+    let { params, repositories } = this.props
+
+    let folderKey = params.folderKey
+    let repositoryKey = params.repositoryKey
+    if (folderKey == null) {
+      let repository = _.find(repositories, {key: repositoryKey})
+      if (repository == null) {
+        repository = repositories[0]
+      }
+      if (repository != null) {
+        repositoryKey = repository.key
+        folderKey = repository.folders[0] != null && repository.folders[0].key
+      }
+      if (folderKey == null) throw new Error('no folder exists')
+    }
+
+    let newNote = {
+      title: 'New Note',
+      content: '',
+      folder: folderKey,
+      tags: [],
+      mode: 'markdown'
+    }
+
+    Repository
+      .find(repositoryKey)
+      .then((repo) => {
+        console.log(repo)
+        return repo.addNote(newNote)
+      })
+      .then((note) => {
+        let { dispatch } = this.props
+        dispatch({
+          type: 'ADD_NOTE',
+          repository: repositoryKey,
+          note: note
+        })
+      })
+      .catch((err) => {
+        console.error(err)
+      })
   }
 
   handleTutorialButtonClick (e) {
   }
 
   handleLinksButton (e) {
-
   }
 
   render () {
@@ -112,4 +146,4 @@ TopBar.propTypes = {
   })
 }
 
-export default connect((x) => x)(CSSModules(TopBar, styles))
+export default CSSModules(TopBar, styles)
diff --git a/browser/main/index.js b/browser/main/index.js
index 718fc3b2..fedef081 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -76,7 +76,7 @@ ipc.on('open-finder', function () {
 
 let el = document.getElementById('content')
 const history = syncHistoryWithStore(hashHistory, store)
-history.listen((location) => console.info(location))
+
 ReactDOM.render((
   <Provider store={store}>
     <Router history={history}>
diff --git a/browser/main/store.js b/browser/main/store.js
index 012e9de6..3b315308 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -105,6 +105,16 @@ function repositories (state = initialRepositories, action) {
           targetRepo.folders.splice(targetFolderIndex, 1)
         }
 
+        return repos
+      }
+    case 'ADD_NOTE':
+      {
+        let repos = state.slice()
+        let targetRepo = _.find(repos, {key: action.repository})
+
+        if (targetRepo == null) return state
+        targetRepo.notes.push(action.note)
+
         return repos
       }
   }
diff --git a/index.js b/index.js
index fe56a62e..7a1fdf7b 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,6 @@
 function isFinderCalled () {
   var argv = process.argv.slice(1)
-  return argv.some(arg => arg.match(/--finder/))
+  return argv.some((arg) => arg.match(/--finder/))
 }
 
 if (isFinderCalled()) {

From dfe34a9f22aab88998be7bf6bfdc2e422e91eae5 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Tue, 24 May 2016 16:53:21 +0900
Subject: [PATCH 054/109] update webpack.config

---
 webpack-production.config.js |  2 +-
 webpack-skeleton.js          | 10 +++++-----
 webpack.config.js            |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/webpack-production.config.js b/webpack-production.config.js
index 1b45fca5..12dcbf4e 100644
--- a/webpack-production.config.js
+++ b/webpack-production.config.js
@@ -12,7 +12,7 @@ var config = Object.assign({}, skeleton, {
         loader: 'babel'
       },
       {
-        test: /\.styl?$/,
+        test: /\.styl$/,
         exclude: /(node_modules|bower_components)/,
         loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[path]!stylus?sourceMap'
       }
diff --git a/webpack-skeleton.js b/webpack-skeleton.js
index 4a399d06..1f46bc49 100644
--- a/webpack-skeleton.js
+++ b/webpack-skeleton.js
@@ -5,14 +5,14 @@ const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin')
 var config = {
   entry: {
     main: './browser/main/index.js',
-    finder: './browser/finder/index.js'
+    // finder: './browser/finder/index.js'
   },
   resolve: {
-    extensions: ['', '.js', '.jsx'],
+    extensions: ['', '.js', '.jsx', '.styl'],
     packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main'],
     alias: {
-      'lib': path.resolve(__dirname, 'lib'),
-      'browser': path.resolve(__dirname, 'browser')
+      'lib': path.join(__dirname, 'lib'),
+      'browser': path.join(__dirname, 'browser')
     }
   },
   plugins: [
@@ -23,7 +23,7 @@ var config = {
     use: [require('nib')()],
     import: [
       '~nib/lib/nib/index.styl',
-      path.resolve(__dirname, 'browser/styles/index.styl')
+      path.join(__dirname, 'browser/styles/index.styl')
     ]
   },
   externals: [
diff --git a/webpack.config.js b/webpack.config.js
index 84631836..7a1768f1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -10,7 +10,7 @@ var config = Object.assign({}, skeleton, {
         loader: 'babel?cacheDirectory'
       },
       {
-        test: /\.styl?$/,
+        test: /\.styl$/,
         exclude: /(node_modules|bower_components)/,
         loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[path]!stylus?sourceMap'
       }

From 89d1071dc1d9c0e03b823a0bd5a43a46514b77f5 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Tue, 24 May 2016 20:14:53 +0900
Subject: [PATCH 055/109] update StatusBar

fix width of URL status
show dialog before update
---
 browser/main/StatusBar/StatusBar.styl |  3 ++-
 browser/main/StatusBar/index.js       | 20 ++++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl
index 7687b112..f91d5930 100644
--- a/browser/main/StatusBar/StatusBar.styl
+++ b/browser/main/StatusBar/StatusBar.styl
@@ -7,7 +7,7 @@
   absolute left
   height 24px
   overflow ellipsis
-  width 350px
+  right 185px
   line-height 24px
   font-size 12px
   padding 0 15px
@@ -27,6 +27,7 @@
   position absolute
   right 60px
   height 24px
+  width 125px
   border-width 0 0 0 1px
   border-style solid
   border-color $ui-borderColor
diff --git a/browser/main/StatusBar/index.js b/browser/main/StatusBar/index.js
index f7fc5e85..4a1ade40 100644
--- a/browser/main/StatusBar/index.js
+++ b/browser/main/StatusBar/index.js
@@ -6,14 +6,17 @@ import ZoomManager from 'browser/main/lib/ZoomManager'
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const { remote } = electron
-const { Menu, MenuItem } = remote
+const { Menu, MenuItem, dialog } = remote
 
 const zoomOptions = [0.8, 0.9, 1, 1.1, 1.2, 1.3]
 
 class StatusBar extends React.Component {
   constructor (props) {
     super(props)
-    this.state = {updateAvailable: false}
+
+    this.state = {
+      updateAvailable: false
+    }
   }
 
   componentDidMount () {
@@ -23,7 +26,16 @@ class StatusBar extends React.Component {
   }
 
   updateApp () {
-    ipc.send('update-app', 'Deal with it.')
+    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: 'Update Boostnote',
+      detail: 'New Boostnote is ready to be installed.',
+      buttons: ['Restart & Install', 'Not Now']
+    })
+
+    if (index === 0) {
+      ipc.send('update-app', 'Deal with it.')
+    }
   }
 
   handleZoomButtonClick (e) {
@@ -55,7 +67,7 @@ class StatusBar extends React.Component {
       <div className='StatusBar'
         styleName='root'
       >
-        <div styleName='pathname'>{location.pathname}</div>
+        <div styleName='pathname'>{location.pathname + location.search}</div>
         {this.state.updateAvailable
           ? <button onClick={this.updateApp} styleName='update'>
             <i styleName='update-icon' className='fa fa-cloud-download'/> Update is available!

From d07c79551156fd4440701de68cb3e919c900ab50 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Tue, 24 May 2016 20:15:52 +0900
Subject: [PATCH 056/109] Navigating by notelist

---
 browser/main/NoteList/NoteList.styl | 17 +++++++++++++++++
 browser/main/NoteList/index.js      | 19 ++++++++++++++++---
 browser/styles/index.styl           |  1 +
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index e176f6da..26f3a603 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -5,18 +5,33 @@
   overflow auto
 
 .item
+  position relative
   height 80px
   border-bottom $ui-border
   padding 0 5px
   user-select none
   cursor pointer
+  transition background-color 0.15s
   &:hover
     background-color alpha(black, 5%)
 
+.item--active
+  @extend .item
+  .item-border
+    border-color $ui-active-color
+
+.item-border
+  absolute top bottom left right
+  border-style solid
+  border-width 2px
+  border-color transparent
+  transition 0.15s
+
 .item-info
   height 30px
   clearfix()
   font-size 12px
+  color $ui-inactive-text-color
   line-height 30px
 
 .item-info-left
@@ -28,6 +43,7 @@
 .item-title
   height 20px
   line-height 20px
+  padding 0 5px
   font-weight bold
   overflow ellipsis
 
@@ -35,3 +51,4 @@
   height 30px
   font-size 12px
   line-height 30px
+  color $ui-inactive-text-color
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index f3e91539..eb328e4c 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -161,11 +161,20 @@ class NoteList extends React.Component {
 
   handleNoteClick (key) {
     return (e) => {
-      console.log(key)
+      let { router } = this.context
+      let { location } = this.props
+
+      router.push({
+        pathname: location.pathname,
+        query: {
+          key: key
+        }
+      })
     }
   }
 
   render () {
+    let { location } = this.props
     let notes = this.getNotes()
     let noteElements = notes.map((note) => {
       let folder = _.find(note._repository.folders, {key: note.folder})
@@ -173,12 +182,16 @@ class NoteList extends React.Component {
         return <span key='tag'>{tag}</span>
       })
       let key = `${note._repository.key}/${note.key}`
-
+      let isActive = location.query.key === key
       return (
-        <div styleName='item'
+        <div styleName={isActive
+            ? 'item--active'
+            : 'item'
+          }
           key={key}
           onClick={(e) => this.handleNoteClick(key)(e)}
         >
+          <div styleName='item-border'/>
           <div styleName='item-info'>
 
             <div styleName='item-info-left'>
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 7d592146..db3636a7 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -15,6 +15,7 @@ $ui-inactive-text-color = #939395
 $ui-borderColor = #D1D1D1
 $ui-backgroundColor = #FAFAFA
 $ui-border = solid 1px $ui-borderColor
+$ui-active-color = #6AA5E9
 
 // UI Button
 $ui-button-color = #939395

From c7ad06a1f72d6d2098ea6d2f477c1f9a96b1af18 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Wed, 25 May 2016 02:16:22 +0900
Subject: [PATCH 057/109] Update NoteList

redirect if no note selected
add overflow style of labels in Note item
---
 browser/main/NoteList/NoteList.styl |  5 ++++-
 browser/main/NoteList/index.js      | 14 ++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index 26f3a603..dd4043c6 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -13,7 +13,7 @@
   cursor pointer
   transition background-color 0.15s
   &:hover
-    background-color alpha(black, 5%)
+    background-color alpha($ui-active-color, 10%)
 
 .item--active
   @extend .item
@@ -33,9 +33,11 @@
   font-size 12px
   color $ui-inactive-text-color
   line-height 30px
+  overflow-y hidden
 
 .item-info-left
   float left
+  overflow ellipsis
 
 .item-info-right
   float right
@@ -52,3 +54,4 @@
   font-size 12px
   line-height 30px
   color $ui-inactive-text-color
+  overflow ellipsis
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index eb328e4c..a4896d47 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -29,6 +29,16 @@ class NoteList extends React.Component {
   }
 
   componentDidUpdate () {
+    let { location } = this.props
+    if (this.notes.length > 0 && location.query.key == null) {
+      let { router } = this.context
+      router.replace({
+        pathname: location.pathname,
+        query: {
+          key: `${this.notes[0]._repository.key}-${this.notes[0].key}`
+        }
+      })
+    }
     // return false
     // var index = articles.indexOf(null)
     // var el = ReactDOM.findDOMNode(this)
@@ -175,13 +185,13 @@ class NoteList extends React.Component {
 
   render () {
     let { location } = this.props
-    let notes = this.getNotes()
+    let notes = this.notes = this.getNotes()
     let noteElements = notes.map((note) => {
       let folder = _.find(note._repository.folders, {key: note.folder})
       let tagElements = note.tags.map((tag) => {
         return <span key='tag'>{tag}</span>
       })
-      let key = `${note._repository.key}/${note.key}`
+      let key = `${note._repository.key}-${note.key}`
       let isActive = location.query.key === key
       return (
         <div styleName={isActive

From 60daafe1367fc6c9caa3e304be640bf8863b1658 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Wed, 25 May 2016 16:49:21 +0900
Subject: [PATCH 058/109] clean lib

---
 browser/components/ExternalLink.js            | 20 ----------
 browser/lib/clientKey.js                      |  2 +-
 browser/lib/openExternal.js                   |  7 ----
 browser/lib/search.js                         | 40 -------------------
 browser/main/lib/ConfigManager.js             |  1 -
 browser/main/modals/Preferences/ContactTab.js |  3 +-
 lib/main.html                                 |  6 +--
 7 files changed, 4 insertions(+), 75 deletions(-)
 delete mode 100644 browser/components/ExternalLink.js
 delete mode 100644 browser/lib/openExternal.js
 delete mode 100644 browser/lib/search.js

diff --git a/browser/components/ExternalLink.js b/browser/components/ExternalLink.js
deleted file mode 100644
index ec190ecc..00000000
--- a/browser/components/ExternalLink.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { PropTypes } from 'react'
-const electron = require('electron')
-const shell = electron.shell
-
-export default class ExternalLink extends React.Component {
-  handleClick (e) {
-    shell.openExternal(this.props.href)
-    e.preventDefault()
-  }
-
-  render () {
-    return (
-      <a onClick={e => this.handleClick(e)} {...this.props}/>
-    )
-  }
-}
-
-ExternalLink.propTypes = {
-  href: PropTypes.string
-}
diff --git a/browser/lib/clientKey.js b/browser/lib/clientKey.js
index e827b2d8..5d5c1f3c 100644
--- a/browser/lib/clientKey.js
+++ b/browser/lib/clientKey.js
@@ -4,7 +4,7 @@ import keygen from './keygen'
 function getClientKey () {
   let clientKey = localStorage.getItem('clientKey')
   if (!_.isString(clientKey) || clientKey.length !== 40) {
-    clientKey = keygen()
+    clientKey = keygen(20)
     setClientKey(clientKey)
   }
 
diff --git a/browser/lib/openExternal.js b/browser/lib/openExternal.js
deleted file mode 100644
index 7d4d2e55..00000000
--- a/browser/lib/openExternal.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const electron = require('electron')
-const shell = electron.shell
-
-export default function (e) {
-  shell.openExternal(e.currentTarget.href)
-  e.preventDefault()
-}
diff --git a/browser/lib/search.js b/browser/lib/search.js
deleted file mode 100644
index 0a8d7a3a..00000000
--- a/browser/lib/search.js
+++ /dev/null
@@ -1,40 +0,0 @@
-'use strict'
-
-var _ = require('lodash')
-
-const TEXT_FILTER = 'TEXT_FILTER'
-const FOLDER_FILTER = 'FOLDER_FILTER'
-const TAG_FILTER = 'TAG_FILTER'
-
-export default function search (articles, search) {
-  let filters = search.split(' ').map(key => key.trim()).filter(key => key.length > 0 && !key.match(/^#$/)).map(key => {
-    if (key.match(/^in:.+$/)) {
-      return {type: FOLDER_FILTER, value: key.match(/^in:(.+)$/)[1]}
-    }
-    if (key.match(/^#(.+)/)) {
-      return {type: TAG_FILTER, value: key.match(/^#(.+)$/)[1]}
-    }
-    return {type: TEXT_FILTER, value: key}
-  })
-  // let folderFilters = filters.filter(filter => filter.type === FOLDER_FILTER)
-  let textFilters = filters.filter(filter => filter.type === TEXT_FILTER)
-  let tagFilters = filters.filter(filter => filter.type === TAG_FILTER)
-
-  if (textFilters.length > 0) {
-    articles = textFilters.reduce((articles, textFilter) => {
-      return articles.filter(article => {
-        return article.title.match(new RegExp(textFilter.value, 'i')) || article.content.match(new RegExp(textFilter.value, 'i'))
-      })
-    }, articles)
-  }
-
-  if (tagFilters.length > 0) {
-    articles = tagFilters.reduce((articles, tagFilter) => {
-      return articles.filter(article => {
-        return _.find(article.Tags, tag => tag.name.match(new RegExp(tagFilter.value, 'i')))
-      })
-    }, articles)
-  }
-
-  return articles
-}
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index 692bf3c9..e715da61 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -7,7 +7,6 @@ const defaultConfig = {
 }
 
 function validate (config) {
-  console.log(config)
   if (!_.isObject(config)) return false
   if (!_.isNumber(config.zoom) || config.zoom < 0) return false
   if (!_.isBoolean(config.isSideNavFolded)) return false
diff --git a/browser/main/modals/Preferences/ContactTab.js b/browser/main/modals/Preferences/ContactTab.js
index 47e6bf31..edc1dd9a 100644
--- a/browser/main/modals/Preferences/ContactTab.js
+++ b/browser/main/modals/Preferences/ContactTab.js
@@ -1,6 +1,5 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import ExternalLink from 'browser/components/ExternalLink'
 
 export default class ContactTab extends React.Component {
   componentDidMount () {
@@ -13,7 +12,7 @@ export default class ContactTab extends React.Component {
       <div className='ContactTab content'>
         <div className='title'>Contact</div>
         <p>
-          - Issues: <ExternalLink href='https://github.com/BoostIO/Boostnote/issues'>https://github.com/BoostIO/Boostnote/issues</ExternalLink>
+          - Issues: <a href='https://github.com/BoostIO/Boostnote/issues'>https://github.com/BoostIO/Boostnote/issues</a>
         </p>
       </div>
     )
diff --git a/lib/main.html b/lib/main.html
index 834c295f..6803dea8 100644
--- a/lib/main.html
+++ b/lib/main.html
@@ -9,7 +9,6 @@
   <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css" id="hljs-css">
   <link rel="shortcut icon" href="../resources/favicon.ico">
   <title>Boostnote</title>
-  <link rel="stylesheet" href="../resources/katex.min.css">
 </script>
 
   <style>
@@ -65,13 +64,12 @@
   <script type='text/javascript'>
     const electron = require('electron')
     electron.webFrame.setZoomLevelLimits(1, 1)
-    var version = electron.remote.app.getVersion()
     const _ = require('lodash')
-    var scriptUrl = _.find(electron.remote.process.argv, a => a === '--hot')
+    var scriptUrl = _.find(electron.remote.process.argv, (a) => a === '--hot')
       ? 'http://localhost:8080/assets/main.js'
       : '../compiled/main.js'
     var scriptEl = document.createElement('script')
-    scriptEl.setAttribute("type","text/javascript")
+    scriptEl.setAttribute("type", "text/javascript")
     scriptEl.setAttribute("src", scriptUrl)
     document.body.appendChild(scriptEl)
   </script>

From 1a98afee921c927ebae37c27344556ebfc907f05 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Wed, 25 May 2016 17:07:59 +0900
Subject: [PATCH 059/109] upgrade katex

---
 resources/katex.min.css |  2 +-
 resources/katex.min.js  | 11 +++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/resources/katex.min.css b/resources/katex.min.css
index 408409dc..47dd09da 100644
--- a/resources/katex.min.css
+++ b/resources/katex.min.css
@@ -1 +1 @@
-@font-face{font-family:KaTeX_AMS;src:url(fonts/KaTeX_AMS-Regular.eot);src:url(fonts/KaTeX_AMS-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_AMS-Regular.woff2) format('woff2'),url(fonts/KaTeX_AMS-Regular.woff) format('woff'),url(fonts/KaTeX_AMS-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Caligraphic;src:url(fonts/KaTeX_Caligraphic-Bold.eot);src:url(fonts/KaTeX_Caligraphic-Bold.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Caligraphic-Bold.woff2) format('woff2'),url(fonts/KaTeX_Caligraphic-Bold.woff) format('woff'),url(fonts/KaTeX_Caligraphic-Bold.ttf) format('ttf');font-weight:700;font-style:normal}@font-face{font-family:KaTeX_Caligraphic;src:url(fonts/KaTeX_Caligraphic-Regular.eot);src:url(fonts/KaTeX_Caligraphic-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Caligraphic-Regular.woff2) format('woff2'),url(fonts/KaTeX_Caligraphic-Regular.woff) format('woff'),url(fonts/KaTeX_Caligraphic-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Fraktur;src:url(fonts/KaTeX_Fraktur-Bold.eot);src:url(fonts/KaTeX_Fraktur-Bold.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Fraktur-Bold.woff2) format('woff2'),url(fonts/KaTeX_Fraktur-Bold.woff) format('woff'),url(fonts/KaTeX_Fraktur-Bold.ttf) format('ttf');font-weight:700;font-style:normal}@font-face{font-family:KaTeX_Fraktur;src:url(fonts/KaTeX_Fraktur-Regular.eot);src:url(fonts/KaTeX_Fraktur-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Fraktur-Regular.woff2) format('woff2'),url(fonts/KaTeX_Fraktur-Regular.woff) format('woff'),url(fonts/KaTeX_Fraktur-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Main;src:url(fonts/KaTeX_Main-Bold.eot);src:url(fonts/KaTeX_Main-Bold.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Main-Bold.woff2) format('woff2'),url(fonts/KaTeX_Main-Bold.woff) format('woff'),url(fonts/KaTeX_Main-Bold.ttf) format('ttf');font-weight:700;font-style:normal}@font-face{font-family:KaTeX_Main;src:url(fonts/KaTeX_Main-Italic.eot);src:url(fonts/KaTeX_Main-Italic.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Main-Italic.woff2) format('woff2'),url(fonts/KaTeX_Main-Italic.woff) format('woff'),url(fonts/KaTeX_Main-Italic.ttf) format('ttf');font-weight:400;font-style:italic}@font-face{font-family:KaTeX_Main;src:url(fonts/KaTeX_Main-Regular.eot);src:url(fonts/KaTeX_Main-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Main-Regular.woff2) format('woff2'),url(fonts/KaTeX_Main-Regular.woff) format('woff'),url(fonts/KaTeX_Main-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Math;src:url(fonts/KaTeX_Math-Italic.eot);src:url(fonts/KaTeX_Math-Italic.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Math-Italic.woff2) format('woff2'),url(fonts/KaTeX_Math-Italic.woff) format('woff'),url(fonts/KaTeX_Math-Italic.ttf) format('ttf');font-weight:400;font-style:italic}@font-face{font-family:KaTeX_SansSerif;src:url(fonts/KaTeX_SansSerif-Regular.eot);src:url(fonts/KaTeX_SansSerif-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_SansSerif-Regular.woff2) format('woff2'),url(fonts/KaTeX_SansSerif-Regular.woff) format('woff'),url(fonts/KaTeX_SansSerif-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Script;src:url(fonts/KaTeX_Script-Regular.eot);src:url(fonts/KaTeX_Script-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Script-Regular.woff2) format('woff2'),url(fonts/KaTeX_Script-Regular.woff) format('woff'),url(fonts/KaTeX_Script-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size1;src:url(fonts/KaTeX_Size1-Regular.eot);src:url(fonts/KaTeX_Size1-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Size1-Regular.woff2) format('woff2'),url(fonts/KaTeX_Size1-Regular.woff) format('woff'),url(fonts/KaTeX_Size1-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size2;src:url(fonts/KaTeX_Size2-Regular.eot);src:url(fonts/KaTeX_Size2-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Size2-Regular.woff2) format('woff2'),url(fonts/KaTeX_Size2-Regular.woff) format('woff'),url(fonts/KaTeX_Size2-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size3;src:url(fonts/KaTeX_Size3-Regular.eot);src:url(fonts/KaTeX_Size3-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Size3-Regular.woff2) format('woff2'),url(fonts/KaTeX_Size3-Regular.woff) format('woff'),url(fonts/KaTeX_Size3-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size4;src:url(fonts/KaTeX_Size4-Regular.eot);src:url(fonts/KaTeX_Size4-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Size4-Regular.woff2) format('woff2'),url(fonts/KaTeX_Size4-Regular.woff) format('woff'),url(fonts/KaTeX_Size4-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Typewriter;src:url(fonts/KaTeX_Typewriter-Regular.eot);src:url(fonts/KaTeX_Typewriter-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Typewriter-Regular.woff2) format('woff2'),url(fonts/KaTeX_Typewriter-Regular.woff) format('woff'),url(fonts/KaTeX_Typewriter-Regular.ttf) format('ttf');font-weight:400;font-style:normal}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:inline-block}.katex{font:400 1.21em KaTeX_Main;line-height:1.2;white-space:nowrap;text-indent:0}.katex .katex-html{display:inline-block}.katex .katex-mathml{position:absolute;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}.katex .base,.katex .strut{display:inline-block}.katex .mathit{font-family:KaTeX_Math;font-style:italic}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .amsrm,.katex .mathbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak{font-family:KaTeX_Fraktur}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr{font-family:KaTeX_Script}.katex .mathsf{font-family:KaTeX_SansSerif}.katex .mainit{font-family:KaTeX_Main;font-style:italic}.katex .textstyle>.mord+.mop{margin-left:.16667em}.katex .textstyle>.mord+.mbin{margin-left:.22222em}.katex .textstyle>.mord+.mrel{margin-left:.27778em}.katex .textstyle>.mop+.mop,.katex .textstyle>.mop+.mord,.katex .textstyle>.mord+.minner{margin-left:.16667em}.katex .textstyle>.mop+.mrel{margin-left:.27778em}.katex .textstyle>.mop+.minner{margin-left:.16667em}.katex .textstyle>.mbin+.minner,.katex .textstyle>.mbin+.mop,.katex .textstyle>.mbin+.mopen,.katex .textstyle>.mbin+.mord{margin-left:.22222em}.katex .textstyle>.mrel+.minner,.katex .textstyle>.mrel+.mop,.katex .textstyle>.mrel+.mopen,.katex .textstyle>.mrel+.mord{margin-left:.27778em}.katex .textstyle>.mclose+.mop{margin-left:.16667em}.katex .textstyle>.mclose+.mbin{margin-left:.22222em}.katex .textstyle>.mclose+.mrel{margin-left:.27778em}.katex .textstyle>.mclose+.minner,.katex .textstyle>.minner+.mop,.katex .textstyle>.minner+.mord,.katex .textstyle>.mpunct+.mclose,.katex .textstyle>.mpunct+.minner,.katex .textstyle>.mpunct+.mop,.katex .textstyle>.mpunct+.mopen,.katex .textstyle>.mpunct+.mord,.katex .textstyle>.mpunct+.mpunct,.katex .textstyle>.mpunct+.mrel{margin-left:.16667em}.katex .textstyle>.minner+.mbin{margin-left:.22222em}.katex .textstyle>.minner+.mrel{margin-left:.27778em}.katex .mclose+.mop,.katex .minner+.mop,.katex .mop+.mop,.katex .mop+.mord,.katex .mord+.mop,.katex .textstyle>.minner+.minner,.katex .textstyle>.minner+.mopen,.katex .textstyle>.minner+.mpunct{margin-left:.16667em}.katex .reset-textstyle.textstyle{font-size:1em}.katex .reset-textstyle.scriptstyle{font-size:.7em}.katex .reset-textstyle.scriptscriptstyle{font-size:.5em}.katex .reset-scriptstyle.textstyle{font-size:1.42857em}.katex .reset-scriptstyle.scriptstyle{font-size:1em}.katex .reset-scriptstyle.scriptscriptstyle{font-size:.71429em}.katex .reset-scriptscriptstyle.textstyle{font-size:2em}.katex .reset-scriptscriptstyle.scriptstyle{font-size:1.4em}.katex .reset-scriptscriptstyle.scriptscriptstyle{font-size:1em}.katex .style-wrap{position:relative}.katex .vlist{display:inline-block}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist .baseline-fix{display:inline-table;table-layout:fixed}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{width:100%}.katex .mfrac .frac-line:before{border-bottom-style:solid;border-bottom-width:1px;content:"";display:block}.katex .mfrac .frac-line:after{border-bottom-style:solid;border-bottom-width:.04em;content:"";display:block;margin-top:-1px}.katex .mspace{display:inline-block}.katex .mspace.negativethinspace{margin-left:-.16667em}.katex .mspace.thinspace{width:.16667em}.katex .mspace.mediumspace{width:.22222em}.katex .mspace.thickspace{width:.27778em}.katex .mspace.enspace{width:.5em}.katex .mspace.quad{width:1em}.katex .mspace.qquad{width:2em}.katex .llap,.katex .rlap{width:0;position:relative}.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .rlap>.inner{left:0}.katex .katex-logo .a{font-size:.75em;margin-left:-.32em;position:relative;top:-.2em}.katex .katex-logo .t{margin-left:-.23em}.katex .katex-logo .e{margin-left:-.1667em;position:relative;top:.2155em}.katex .katex-logo .x{margin-left:-.125em}.katex .rule{display:inline-block;border-style:solid;position:relative}.katex .overline .overline-line{width:100%}.katex .overline .overline-line:before{border-bottom-style:solid;border-bottom-width:1px;content:"";display:block}.katex .overline .overline-line:after{border-bottom-style:solid;border-bottom-width:.04em;content:"";display:block;margin-top:-1px}.katex .sqrt>.sqrt-sign{position:relative}.katex .sqrt .sqrt-line{width:100%}.katex .sqrt .sqrt-line:before{border-bottom-style:solid;border-bottom-width:1px;content:"";display:block}.katex .sqrt .sqrt-line:after{border-bottom-style:solid;border-bottom-width:.04em;content:"";display:block;margin-top:-1px}.katex .sqrt>.root{margin-left:.27777778em;margin-right:-.55555556em}.katex .fontsize-ensurer,.katex .sizing{display:inline-block}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:2em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:3.46em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:4.14em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.98em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.71428571em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.14285714em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.28571429em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.42857143em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.71428571em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2.05714286em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.47142857em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.95714286em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.55714286em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.875em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.125em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.25em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.5em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.8em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.1625em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.5875em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:3.1125em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.55555556em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.77777778em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.88888889em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.11111111em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.33333333em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.6em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.92222222em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.3em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.76666667em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.7em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.8em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.9em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.2em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.44em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.73em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:2.07em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.49em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.41666667em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.58333333em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.66666667em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.75em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.83333333em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44166667em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.725em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.075em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.34722222em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.48611111em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.55555556em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.625em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.69444444em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.83333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.20138889em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.4375em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.72916667em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.28901734em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.40462428em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.46242775em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.52023121em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.57803468em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.69364162em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.83236994em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.19653179em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.43930636em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.24154589em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.33816425em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.38647343em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.43478261em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.48309179em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.57971014em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.69565217em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.83574879em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.20289855em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.20080321em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2811245em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.32128514em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.36144578em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.40160643em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.48192771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.57831325em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.69477912em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8313253em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist>span,.katex .op-limits>.vlist>span{text-align:center}.katex .accent .accent-body>span{width:0}.katex .accent .accent-body.accent-vec>span{position:relative;left:.326em}.katex .mtable .vertical-separator{display:inline-block;margin:0 -.025em;border-right:.05em solid #000}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist{text-align:center}.katex .mtable .col-align-l>.vlist{text-align:left}.katex .mtable .col-align-r>.vlist{text-align:right}
\ No newline at end of file
+@font-face{font-family:KaTeX_AMS;src:url(fonts/KaTeX_AMS-Regular.eot);src:url(fonts/KaTeX_AMS-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_AMS-Regular.woff2) format('woff2'),url(fonts/KaTeX_AMS-Regular.woff) format('woff'),url(fonts/KaTeX_AMS-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Caligraphic;src:url(fonts/KaTeX_Caligraphic-Bold.eot);src:url(fonts/KaTeX_Caligraphic-Bold.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Caligraphic-Bold.woff2) format('woff2'),url(fonts/KaTeX_Caligraphic-Bold.woff) format('woff'),url(fonts/KaTeX_Caligraphic-Bold.ttf) format('ttf');font-weight:700;font-style:normal}@font-face{font-family:KaTeX_Caligraphic;src:url(fonts/KaTeX_Caligraphic-Regular.eot);src:url(fonts/KaTeX_Caligraphic-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Caligraphic-Regular.woff2) format('woff2'),url(fonts/KaTeX_Caligraphic-Regular.woff) format('woff'),url(fonts/KaTeX_Caligraphic-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Fraktur;src:url(fonts/KaTeX_Fraktur-Bold.eot);src:url(fonts/KaTeX_Fraktur-Bold.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Fraktur-Bold.woff2) format('woff2'),url(fonts/KaTeX_Fraktur-Bold.woff) format('woff'),url(fonts/KaTeX_Fraktur-Bold.ttf) format('ttf');font-weight:700;font-style:normal}@font-face{font-family:KaTeX_Fraktur;src:url(fonts/KaTeX_Fraktur-Regular.eot);src:url(fonts/KaTeX_Fraktur-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Fraktur-Regular.woff2) format('woff2'),url(fonts/KaTeX_Fraktur-Regular.woff) format('woff'),url(fonts/KaTeX_Fraktur-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Main;src:url(fonts/KaTeX_Main-Bold.eot);src:url(fonts/KaTeX_Main-Bold.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Main-Bold.woff2) format('woff2'),url(fonts/KaTeX_Main-Bold.woff) format('woff'),url(fonts/KaTeX_Main-Bold.ttf) format('ttf');font-weight:700;font-style:normal}@font-face{font-family:KaTeX_Main;src:url(fonts/KaTeX_Main-Italic.eot);src:url(fonts/KaTeX_Main-Italic.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Main-Italic.woff2) format('woff2'),url(fonts/KaTeX_Main-Italic.woff) format('woff'),url(fonts/KaTeX_Main-Italic.ttf) format('ttf');font-weight:400;font-style:italic}@font-face{font-family:KaTeX_Main;src:url(fonts/KaTeX_Main-Regular.eot);src:url(fonts/KaTeX_Main-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Main-Regular.woff2) format('woff2'),url(fonts/KaTeX_Main-Regular.woff) format('woff'),url(fonts/KaTeX_Main-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Math;src:url(fonts/KaTeX_Math-Italic.eot);src:url(fonts/KaTeX_Math-Italic.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Math-Italic.woff2) format('woff2'),url(fonts/KaTeX_Math-Italic.woff) format('woff'),url(fonts/KaTeX_Math-Italic.ttf) format('ttf');font-weight:400;font-style:italic}@font-face{font-family:KaTeX_SansSerif;src:url(fonts/KaTeX_SansSerif-Regular.eot);src:url(fonts/KaTeX_SansSerif-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_SansSerif-Regular.woff2) format('woff2'),url(fonts/KaTeX_SansSerif-Regular.woff) format('woff'),url(fonts/KaTeX_SansSerif-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Script;src:url(fonts/KaTeX_Script-Regular.eot);src:url(fonts/KaTeX_Script-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Script-Regular.woff2) format('woff2'),url(fonts/KaTeX_Script-Regular.woff) format('woff'),url(fonts/KaTeX_Script-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size1;src:url(fonts/KaTeX_Size1-Regular.eot);src:url(fonts/KaTeX_Size1-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Size1-Regular.woff2) format('woff2'),url(fonts/KaTeX_Size1-Regular.woff) format('woff'),url(fonts/KaTeX_Size1-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size2;src:url(fonts/KaTeX_Size2-Regular.eot);src:url(fonts/KaTeX_Size2-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Size2-Regular.woff2) format('woff2'),url(fonts/KaTeX_Size2-Regular.woff) format('woff'),url(fonts/KaTeX_Size2-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size3;src:url(fonts/KaTeX_Size3-Regular.eot);src:url(fonts/KaTeX_Size3-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Size3-Regular.woff2) format('woff2'),url(fonts/KaTeX_Size3-Regular.woff) format('woff'),url(fonts/KaTeX_Size3-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Size4;src:url(fonts/KaTeX_Size4-Regular.eot);src:url(fonts/KaTeX_Size4-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Size4-Regular.woff2) format('woff2'),url(fonts/KaTeX_Size4-Regular.woff) format('woff'),url(fonts/KaTeX_Size4-Regular.ttf) format('ttf');font-weight:400;font-style:normal}@font-face{font-family:KaTeX_Typewriter;src:url(fonts/KaTeX_Typewriter-Regular.eot);src:url(fonts/KaTeX_Typewriter-Regular.eot#iefix) format('embedded-opentype'),url(fonts/KaTeX_Typewriter-Regular.woff2) format('woff2'),url(fonts/KaTeX_Typewriter-Regular.woff) format('woff'),url(fonts/KaTeX_Typewriter-Regular.ttf) format('ttf');font-weight:400;font-style:normal}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:inline-block;text-align:initial}.katex{font:400 1.21em KaTeX_Main;line-height:1.2;white-space:nowrap;text-indent:0}.katex .katex-html{display:inline-block}.katex .katex-mathml{position:absolute;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}.katex .base,.katex .strut{display:inline-block}.katex .mathit{font-family:KaTeX_Math;font-style:italic}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .amsrm,.katex .mathbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak{font-family:KaTeX_Fraktur}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr{font-family:KaTeX_Script}.katex .mathsf{font-family:KaTeX_SansSerif}.katex .mainit{font-family:KaTeX_Main;font-style:italic}.katex .textstyle>.mord+.mop{margin-left:.16667em}.katex .textstyle>.mord+.mbin{margin-left:.22222em}.katex .textstyle>.mord+.mrel{margin-left:.27778em}.katex .textstyle>.mop+.mop,.katex .textstyle>.mop+.mord,.katex .textstyle>.mord+.minner{margin-left:.16667em}.katex .textstyle>.mop+.mrel{margin-left:.27778em}.katex .textstyle>.mop+.minner{margin-left:.16667em}.katex .textstyle>.mbin+.minner,.katex .textstyle>.mbin+.mop,.katex .textstyle>.mbin+.mopen,.katex .textstyle>.mbin+.mord{margin-left:.22222em}.katex .textstyle>.mrel+.minner,.katex .textstyle>.mrel+.mop,.katex .textstyle>.mrel+.mopen,.katex .textstyle>.mrel+.mord{margin-left:.27778em}.katex .textstyle>.mclose+.mop{margin-left:.16667em}.katex .textstyle>.mclose+.mbin{margin-left:.22222em}.katex .textstyle>.mclose+.mrel{margin-left:.27778em}.katex .textstyle>.mclose+.minner,.katex .textstyle>.minner+.mop,.katex .textstyle>.minner+.mord,.katex .textstyle>.mpunct+.mclose,.katex .textstyle>.mpunct+.minner,.katex .textstyle>.mpunct+.mop,.katex .textstyle>.mpunct+.mopen,.katex .textstyle>.mpunct+.mord,.katex .textstyle>.mpunct+.mpunct,.katex .textstyle>.mpunct+.mrel{margin-left:.16667em}.katex .textstyle>.minner+.mbin{margin-left:.22222em}.katex .textstyle>.minner+.mrel{margin-left:.27778em}.katex .mclose+.mop,.katex .minner+.mop,.katex .mop+.mop,.katex .mop+.mord,.katex .mord+.mop,.katex .textstyle>.minner+.minner,.katex .textstyle>.minner+.mopen,.katex .textstyle>.minner+.mpunct{margin-left:.16667em}.katex .reset-textstyle.textstyle{font-size:1em}.katex .reset-textstyle.scriptstyle{font-size:.7em}.katex .reset-textstyle.scriptscriptstyle{font-size:.5em}.katex .reset-scriptstyle.textstyle{font-size:1.42857em}.katex .reset-scriptstyle.scriptstyle{font-size:1em}.katex .reset-scriptstyle.scriptscriptstyle{font-size:.71429em}.katex .reset-scriptscriptstyle.textstyle{font-size:2em}.katex .reset-scriptscriptstyle.scriptstyle{font-size:1.4em}.katex .reset-scriptscriptstyle.scriptscriptstyle{font-size:1em}.katex .style-wrap{position:relative}.katex .vlist{display:inline-block}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist .baseline-fix{display:inline-table;table-layout:fixed}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{width:100%}.katex .mfrac .frac-line:before{border-bottom-style:solid;border-bottom-width:1px;content:"";display:block}.katex .mfrac .frac-line:after{border-bottom-style:solid;border-bottom-width:.04em;content:"";display:block;margin-top:-1px}.katex .mspace{display:inline-block}.katex .mspace.negativethinspace{margin-left:-.16667em}.katex .mspace.thinspace{width:.16667em}.katex .mspace.mediumspace{width:.22222em}.katex .mspace.thickspace{width:.27778em}.katex .mspace.enspace{width:.5em}.katex .mspace.quad{width:1em}.katex .mspace.qquad{width:2em}.katex .llap,.katex .rlap{width:0;position:relative}.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .rlap>.inner{left:0}.katex .katex-logo .a{font-size:.75em;margin-left:-.32em;position:relative;top:-.2em}.katex .katex-logo .t{margin-left:-.23em}.katex .katex-logo .e{margin-left:-.1667em;position:relative;top:.2155em}.katex .katex-logo .x{margin-left:-.125em}.katex .rule{display:inline-block;border:0 solid;position:relative}.katex .overline .overline-line,.katex .underline .underline-line{width:100%}.katex .overline .overline-line:before,.katex .underline .underline-line:before{border-bottom-style:solid;border-bottom-width:1px;content:"";display:block}.katex .overline .overline-line:after,.katex .underline .underline-line:after{border-bottom-style:solid;border-bottom-width:.04em;content:"";display:block;margin-top:-1px}.katex .sqrt>.sqrt-sign{position:relative}.katex .sqrt .sqrt-line{width:100%}.katex .sqrt .sqrt-line:before{border-bottom-style:solid;border-bottom-width:1px;content:"";display:block}.katex .sqrt .sqrt-line:after{border-bottom-style:solid;border-bottom-width:.04em;content:"";display:block;margin-top:-1px}.katex .sqrt>.root{margin-left:.27777778em;margin-right:-.55555556em}.katex .fontsize-ensurer,.katex .sizing{display:inline-block}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:2em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:3.46em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:4.14em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.98em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.71428571em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.14285714em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.28571429em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.42857143em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.71428571em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2.05714286em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.47142857em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.95714286em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.55714286em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.875em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.125em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.25em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.5em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.8em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.1625em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.5875em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:3.1125em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.55555556em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.77777778em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.88888889em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.11111111em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.33333333em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.6em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.92222222em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.3em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.76666667em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.7em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.8em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.9em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.2em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.44em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.73em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:2.07em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.49em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.41666667em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.58333333em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.66666667em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.75em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.83333333em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44166667em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.725em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.075em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.34722222em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.48611111em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.55555556em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.625em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.69444444em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.83333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.20138889em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.4375em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.72916667em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.28901734em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.40462428em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.46242775em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.52023121em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.57803468em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.69364162em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.83236994em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.19653179em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.43930636em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.24154589em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.33816425em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.38647343em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.43478261em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.48309179em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.57971014em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.69565217em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.83574879em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.20289855em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.20080321em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2811245em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.32128514em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.36144578em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.40160643em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.48192771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.57831325em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.69477912em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8313253em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist>span,.katex .op-limits>.vlist>span{text-align:center}.katex .accent .accent-body>span{width:0}.katex .accent .accent-body.accent-vec>span{position:relative;left:.326em}.katex .mtable .vertical-separator{display:inline-block;margin:0 -.025em;border-right:.05em solid #000}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist{text-align:center}.katex .mtable .col-align-l>.vlist{text-align:left}.katex .mtable .col-align-r>.vlist{text-align:right}
\ No newline at end of file
diff --git a/resources/katex.min.js b/resources/katex.min.js
index 863b1e8a..67be5b71 100644
--- a/resources/katex.min.js
+++ b/resources/katex.min.js
@@ -1,6 +1,5 @@
-(function(e){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=e()}else if(typeof define==="function"&&define.amd){define([],e)}else{var t;if(typeof window!=="undefined"){t=window}else if(typeof global!=="undefined"){t=global}else if(typeof self!=="undefined"){t=self}else{t=this}t.katex=e()}})(function(){var e,t,i;return function h(e,t,i){function a(l,s){if(!t[l]){if(!e[l]){var p=typeof require=="function"&&require;if(!s&&p)return p(l,!0);if(r)return r(l,!0);var c=new Error("Cannot find module '"+l+"'");throw c.code="MODULE_NOT_FOUND",c}var n=t[l]={exports:{}};e[l][0].call(n.exports,function(t){var i=e[l][1][t];return a(i?i:t)},n,n.exports,h,e,t,i)}return t[l].exports}var r=typeof require=="function"&&require;for(var l=0;l<i.length;l++)a(i[l]);return a}({1:[function(e,t,i){var h=e("./src/ParseError");var a=e("./src/Settings");var r=e("./src/buildTree");var l=e("./src/parseTree");var s=e("./src/utils");var p=function(e,t,i){s.clearNode(t);var h=new a(i);var p=l(e,h);var c=r(p,e,h).toNode();t.appendChild(c)};if(typeof document!=="undefined"){if(document.compatMode!=="CSS1Compat"){typeof console!=="undefined"&&console.warn("Warning: KaTeX doesn't work in quirks mode. Make sure your "+"website has a suitable doctype.");p=function(){throw new h("KaTeX doesn't work in quirks mode.")}}}var c=function(e,t){var i=new a(t);var h=l(e,i);return r(h,e,i).toMarkup()};var n=function(e,t){var i=new a(t);return l(e,i)};t.exports={render:p,renderToString:c,__parse:n,ParseError:h}},{"./src/ParseError":5,"./src/Settings":7,"./src/buildTree":12,"./src/parseTree":21,"./src/utils":23}],2:[function(e,t,i){"use strict";function h(e){if(!e.__matchAtRelocatable){var t=e.source+"|()";var i="g"+(e.ignoreCase?"i":"")+(e.multiline?"m":"")+(e.unicode?"u":"");e.__matchAtRelocatable=new RegExp(t,i)}return e.__matchAtRelocatable}function a(e,t,i){if(e.global||e.sticky){throw new Error("matchAt(...): Only non-global regexes are supported")}var a=h(e);a.lastIndex=i;var r=a.exec(t);if(r[r.length-1]==null){r.length=r.length-1;return r}else{return null}}t.exports=a},{}],3:[function(e,t,i){var h=e("match-at");var a=e("./ParseError");function r(e){this._input=e}function l(e,t,i){this.text=e;this.data=t;this.position=i}var s=[/[/|@.""`0-9a-zA-Z]/,/[*+-]/,/[=<>:]/,/[,;]/,/['\^_{}]/,/[(\[]/,/[)\]?!]/,/~/,/&/,/\\\\/];var p=[/[a-zA-Z0-9`!@*()-=+\[\]'";:?\/.,]/,/[{}]/,/~/,/&/,/\\\\/];var c=/\s*/;var n=/ +|\\  +/;var o=/\\(?:[a-zA-Z]+|.)/;r.prototype._innerLex=function(e,t,i){var r=this._input;var s;if(i){s=h(c,r,e)[0];e+=s.length}else{s=h(n,r,e);if(s!==null){return new l(" ",null,e+s[0].length)}}if(e===r.length){return new l("EOF",null,e)}var p;if(p=h(o,r,e)){return new l(p[0],null,e+p[0].length)}else{for(var g=0;g<t.length;g++){var d=t[g];if(p=h(d,r,e)){return new l(p[0],null,e+p[0].length)}}}throw new a("Unexpected character: '"+r[e]+"'",this,e)};var g=/#[a-z0-9]+|[a-z]+/i;r.prototype._innerLexColor=function(e){var t=this._input;var i=h(c,t,e)[0];e+=i.length;var r;if(r=h(g,t,e)){return new l(r[0],null,e+r[0].length)}else{throw new a("Invalid color",this,e)}};var d=/(-?)\s*(\d+(?:\.\d*)?|\.\d+)\s*([a-z]{2})/;r.prototype._innerLexSize=function(e){var t=this._input;var i=h(c,t,e)[0];e+=i.length;var r;if(r=h(d,t,e)){var s=r[3];if(s!=="em"&&s!=="ex"){throw new a("Invalid unit: '"+s+"'",this,e)}return new l(r[0],{number:+(r[1]+r[2]),unit:s},e+r[0].length)}throw new a("Invalid size",this,e)};r.prototype._innerLexWhitespace=function(e){var t=this._input;var i=h(c,t,e)[0];e+=i.length;return new l(i[0],null,e)};r.prototype.lex=function(e,t){if(t==="math"){return this._innerLex(e,s,true)}else if(t==="text"){return this._innerLex(e,p,false)}else if(t==="color"){return this._innerLexColor(e)}else if(t==="size"){return this._innerLexSize(e)}else if(t==="whitespace"){return this._innerLexWhitespace(e)}};t.exports=r},{"./ParseError":5,"match-at":2}],4:[function(e,t,i){function h(e){this.style=e.style;this.color=e.color;this.size=e.size;this.phantom=e.phantom;this.font=e.font;if(e.parentStyle===undefined){this.parentStyle=e.style}else{this.parentStyle=e.parentStyle}if(e.parentSize===undefined){this.parentSize=e.size}else{this.parentSize=e.parentSize}}h.prototype.extend=function(e){var t={style:this.style,size:this.size,color:this.color,parentStyle:this.style,parentSize:this.size,phantom:this.phantom,font:this.font};for(var i in e){if(e.hasOwnProperty(i)){t[i]=e[i]}}return new h(t)};h.prototype.withStyle=function(e){return this.extend({style:e})};h.prototype.withSize=function(e){return this.extend({size:e})};h.prototype.withColor=function(e){return this.extend({color:e})};h.prototype.withPhantom=function(){return this.extend({phantom:true})};h.prototype.withFont=function(e){return this.extend({font:e})};h.prototype.reset=function(){return this.extend({})};var a={"katex-blue":"#6495ed","katex-orange":"#ffa500","katex-pink":"#ff00af","katex-red":"#df0030","katex-green":"#28ae7b","katex-gray":"gray","katex-purple":"#9d38bd","katex-blueA":"#c7e9f1","katex-blueB":"#9cdceb","katex-blueC":"#58c4dd","katex-blueD":"#29abca","katex-blueE":"#1c758a","katex-tealA":"#acead7","katex-tealB":"#76ddc0","katex-tealC":"#5cd0b3","katex-tealD":"#55c1a7","katex-tealE":"#49a88f","katex-greenA":"#c9e2ae","katex-greenB":"#a6cf8c","katex-greenC":"#83c167","katex-greenD":"#77b05d","katex-greenE":"#699c52","katex-goldA":"#f7c797","katex-goldB":"#f9b775","katex-goldC":"#f0ac5f","katex-goldD":"#e1a158","katex-goldE":"#c78d46","katex-redA":"#f7a1a3","katex-redB":"#ff8080","katex-redC":"#fc6255","katex-redD":"#e65a4c","katex-redE":"#cf5044","katex-maroonA":"#ecabc1","katex-maroonB":"#ec92ab","katex-maroonC":"#c55f73","katex-maroonD":"#a24d61","katex-maroonE":"#94424f","katex-purpleA":"#caa3e8","katex-purpleB":"#b189c6","katex-purpleC":"#9a72ac","katex-purpleD":"#715582","katex-purpleE":"#644172","katex-mintA":"#f5f9e8","katex-mintB":"#edf2df","katex-mintC":"#e0e5cc","katex-grayA":"#fdfdfd","katex-grayB":"#f7f7f7","katex-grayC":"#eeeeee","katex-grayD":"#dddddd","katex-grayE":"#cccccc","katex-grayF":"#aaaaaa","katex-grayG":"#999999","katex-grayH":"#555555","katex-grayI":"#333333","katex-kaBlue":"#314453","katex-kaGreen":"#639b24"};h.prototype.getColor=function(){if(this.phantom){return"transparent"}else{return a[this.color]||this.color}};t.exports=h},{}],5:[function(e,t,i){function h(e,t,i){var a="KaTeX parse error: "+e;if(t!==undefined&&i!==undefined){a+=" at position "+i+": ";var r=t._input;r=r.slice(0,i)+"\u0332"+r.slice(i);var l=Math.max(0,i-15);var s=i+15;a+=r.slice(l,s)}var p=new Error(a);p.name="ParseError";p.__proto__=h.prototype;p.position=i;return p}h.prototype.__proto__=Error.prototype;t.exports=h},{}],6:[function(e,t,i){var h=e("./functions");var a=e("./environments");var r=e("./Lexer");var l=e("./symbols");var s=e("./utils");var p=e("./parseData");var c=e("./ParseError");function n(e,t){this.lexer=new r(e);this.settings=t}var o=p.ParseNode;var g=p.ParseResult;function d(e,t){this.result=e;this.isFunction=t}n.prototype.expect=function(e,t){if(e.text!==t){throw new c("Expected '"+t+"', got '"+e.text+"'",this.lexer,e.position)}};n.prototype.parse=function(e){var t=this.parseInput(0,"math");return t.result};n.prototype.parseInput=function(e,t){var i=this.parseExpression(e,t,false);this.expect(i.peek,"EOF");return i};var w=["}","\\end","\\right","&","\\\\","\\cr"];n.prototype.parseExpression=function(e,t,i,h){var a=[];var r=null;while(true){r=this.lexer.lex(e,t);if(w.indexOf(r.text)!==-1){break}if(h&&r.text===h){break}var l=this.parseAtom(e,t);if(!l){if(!this.settings.throwOnError&&r.text[0]==="\\"){var s=this.handleUnsupportedCmd(r.text,t);a.push(s);e=r.position;continue}break}if(i&&l.result.type==="infix"){break}a.push(l.result);e=l.position}var p=new g(this.handleInfixNodes(a,t),e);p.peek=r;return p};n.prototype.handleInfixNodes=function(e,t){var i=-1;var a;var r;for(var l=0;l<e.length;l++){var s=e[l];if(s.type==="infix"){if(i!==-1){throw new c("only one infix operator per group",this.lexer,-1)}i=l;r=s.value.replaceWith;a=h.funcs[r]}}if(i!==-1){var p,n;var g=e.slice(0,i);var d=e.slice(i+1);if(g.length===1&&g[0].type==="ordgroup"){p=g[0]}else{p=new o("ordgroup",g,t)}if(d.length===1&&d[0].type==="ordgroup"){n=d[0]}else{n=new o("ordgroup",d,t)}var w=a.handler(r,p,n);return[new o(w.type,w,t)]}else{return e}};var u=1;n.prototype.handleSupSubscript=function(e,t,i,a){var r=this.parseGroup(e,t);if(!r){var l=this.lexer.lex(e,t);if(!this.settings.throwOnError&&l.text[0]==="\\"){return new g(this.handleUnsupportedCmd(l.text,t),l.position)}else{throw new c("Expected group after '"+i+"'",this.lexer,e)}}else if(r.isFunction){var s=h.funcs[r.result.result].greediness;if(s>u){return this.parseFunction(e,t)}else{throw new c("Got function '"+r.result.result+"' with no arguments "+"as "+a,this.lexer,e)}}else{return r.result}};n.prototype.handleUnsupportedCmd=function(e,t){var i=[];for(var h=0;h<e.length;h++){i.push(new o("textord",e[h],"text"))}var a=new o("text",{body:i,type:"text"},t);var r=new o("color",{color:this.settings.errorColor,value:[a],type:"color"},t);return r};n.prototype.parseAtom=function(e,t){var i=this.parseImplicitGroup(e,t);if(t==="text"){return i}var h;if(!i){h=e;i=undefined}else{h=i.position}var a;var r;var l;while(true){var s=this.lexer.lex(h,t);if(s.text==="\\limits"||s.text==="\\nolimits"){if(!i||i.result.type!=="op"){throw new c("Limit controls must follow a math operator",this.lexer,h)}else{var p=s.text==="\\limits";i.result.value.limits=p;i.result.value.alwaysHandleSupSub=true;h=s.position}}else if(s.text==="^"){if(a){throw new c("Double superscript",this.lexer,h)}l=this.handleSupSubscript(s.position,t,s.text,"superscript");h=l.position;a=l.result}else if(s.text==="_"){if(r){throw new c("Double subscript",this.lexer,h)}l=this.handleSupSubscript(s.position,t,s.text,"subscript");h=l.position;r=l.result}else if(s.text==="'"){var n=new o("textord","\\prime",t);var d=[n];h=s.position;while((s=this.lexer.lex(h,t)).text==="'"){d.push(n);h=s.position}a=new o("ordgroup",d,t)}else{break}}if(a||r){return new g(new o("supsub",{base:i&&i.result,sup:a,sub:r},t),h)}else{return i}};var k=["\\tiny","\\scriptsize","\\footnotesize","\\small","\\normalsize","\\large","\\Large","\\LARGE","\\huge","\\Huge"];var m=["\\displaystyle","\\textstyle","\\scriptstyle","\\scriptscriptstyle"];n.prototype.parseImplicitGroup=function(e,t){var i=this.parseSymbol(e,t);if(!i||!i.result){return this.parseFunction(e,t)}var h=i.result.result;var r;if(h==="\\left"){var l=this.parseFunction(e,t);r=this.parseExpression(l.position,t,false);this.expect(r.peek,"\\right");var p=this.parseFunction(r.position,t);return new g(new o("leftright",{body:r.result,left:l.result.value.value,right:p.result.value.value},t),p.position)}else if(h==="\\begin"){var n=this.parseFunction(e,t);var d=n.result.value.name;if(!a.hasOwnProperty(d)){throw new c("No such environment: "+d,this.lexer,n.result.value.namepos)}var w=a[d];var u=[null,t,d];var f=this.parseArguments(n.position,t,"\\begin{"+d+"}",w,u);u[0]=f;var v=w.handler.apply(this,u);var y=this.lexer.lex(v.position,t);this.expect(y,"\\end");var x=this.parseFunction(v.position,t);if(x.result.value.name!==d){throw new c("Mismatch: \\begin{"+d+"} matched "+"by \\end{"+x.result.value.name+"}",this.lexer,x.namepos)}v.position=x.position;return v}else if(s.contains(k,h)){r=this.parseExpression(i.result.position,t,false);return new g(new o("sizing",{size:"size"+(s.indexOf(k,h)+1),value:r.result},t),r.position)}else if(s.contains(m,h)){r=this.parseExpression(i.result.position,t,true);return new g(new o("styling",{style:h.slice(1,h.length-5),value:r.result},t),r.position)}else{return this.parseFunction(e,t)}};n.prototype.parseFunction=function(e,t){var i=this.parseGroup(e,t);if(i){if(i.isFunction){var a=i.result.result;var r=h.funcs[a];if(t==="text"&&!r.allowedInText){throw new c("Can't use function '"+a+"' in text mode",this.lexer,i.position)}var l=[a];var s=this.parseArguments(i.result.position,t,a,r,l);var p=h.funcs[a].handler.apply(this,l);return new g(new o(p.type,p,t),s)}else{return i.result}}else{return null}};n.prototype.parseArguments=function(e,t,i,a,r){var l=a.numArgs+a.numOptionalArgs;if(l===0){return e}var s=e;var p=a.greediness;var n=[s];for(var o=0;o<l;o++){var w=a.argTypes&&a.argTypes[o];var u;if(o<a.numOptionalArgs){if(w){u=this.parseSpecialGroup(s,w,t,true)}else{u=this.parseOptionalGroup(s,t)}if(!u){r.push(null);n.push(s);continue}}else{if(w){u=this.parseSpecialGroup(s,w,t)}else{u=this.parseGroup(s,t)}if(!u){var k=this.lexer.lex(s,t);if(!this.settings.throwOnError&&k.text[0]==="\\"){u=new d(new g(this.handleUnsupportedCmd(k.text,t),k.position),false)}else{throw new c("Expected group after '"+i+"'",this.lexer,e)}}}var m;if(u.isFunction){var f=h.funcs[u.result.result].greediness;if(f>p){m=this.parseFunction(s,t)}else{throw new c("Got function '"+u.result.result+"' as "+"argument to '"+i+"'",this.lexer,u.result.position-1)}}else{m=u.result}r.push(m.result);n.push(m.position);s=m.position}r.push(n);return s};n.prototype.parseSpecialGroup=function(e,t,i,h){if(t==="original"){t=i}if(t==="color"||t==="size"){var a=this.lexer.lex(e,i);if(h&&a.text!=="["){return null}this.expect(a,h?"[":"{");var r=this.lexer.lex(a.position,t);var l;if(t==="color"){l=r.text}else{l=r.data}var s=this.lexer.lex(r.position,i);this.expect(s,h?"]":"}");return new d(new g(new o(t,l,i),s.position),false)}else if(t==="text"){var p=this.lexer.lex(e,"whitespace");e=p.position}if(h){return this.parseOptionalGroup(e,t)}else{return this.parseGroup(e,t)}};n.prototype.parseGroup=function(e,t){var i=this.lexer.lex(e,t);if(i.text==="{"){var h=this.parseExpression(i.position,t,false);var a=this.lexer.lex(h.position,t);this.expect(a,"}");return new d(new g(new o("ordgroup",h.result,t),a.position),false)}else{return this.parseSymbol(e,t)}};n.prototype.parseOptionalGroup=function(e,t){var i=this.lexer.lex(e,t);if(i.text==="["){var h=this.parseExpression(i.position,t,false,"]");var a=this.lexer.lex(h.position,t);this.expect(a,"]");return new d(new g(new o("ordgroup",h.result,t),a.position),false)}else{return null}};n.prototype.parseSymbol=function(e,t){var i=this.lexer.lex(e,t);if(h.funcs[i.text]){return new d(new g(i.text,i.position),true)}else if(l[t][i.text]){return new d(new g(new o(l[t][i.text].group,i.text,t),i.position),false)}else{return null}};n.prototype.ParseNode=o;t.exports=n},{"./Lexer":3,"./ParseError":5,"./environments":15,"./functions":18,"./parseData":20,"./symbols":22,"./utils":23}],7:[function(e,t,i){function h(e,t){return e===undefined?t:e}function a(e){e=e||{};this.displayMode=h(e.displayMode,false);this.throwOnError=h(e.throwOnError,true);this.errorColor=h(e.errorColor,"#cc0000")}t.exports=a},{}],8:[function(e,t,i){function h(e,t,i,h){this.id=e;this.size=t;this.cramped=h;this.sizeMultiplier=i}h.prototype.sup=function(){return w[u[this.id]]};h.prototype.sub=function(){return w[k[this.id]]};h.prototype.fracNum=function(){return w[m[this.id]]};h.prototype.fracDen=function(){return w[f[this.id]]};h.prototype.cramp=function(){return w[v[this.id]]};h.prototype.cls=function(){return g[this.size]+(this.cramped?" cramped":" uncramped")};h.prototype.reset=function(){return d[this.size]};var a=0;var r=1;var l=2;var s=3;var p=4;var c=5;var n=6;var o=7;var g=["displaystyle textstyle","textstyle","scriptstyle","scriptscriptstyle"];var d=["reset-textstyle","reset-textstyle","reset-scriptstyle","reset-scriptscriptstyle"];var w=[new h(a,0,1,false),new h(r,0,1,true),new h(l,1,1,false),new h(s,1,1,true),new h(p,2,.7,false),new h(c,2,.7,true),new h(n,3,.5,false),new h(o,3,.5,true)];var u=[p,c,p,c,n,o,n,o];var k=[c,c,c,c,o,o,o,o];var m=[l,s,p,c,n,o,n,o];var f=[s,s,c,c,o,o,o,o];var v=[r,r,s,s,c,c,o,o];t.exports={DISPLAY:w[a],TEXT:w[l],SCRIPT:w[p],SCRIPTSCRIPT:w[n]}},{}],9:[function(e,t,i){var h=e("./domTree");var a=e("./fontMetrics");var r=e("./symbols");var l=e("./utils");var s=["\\Gamma","\\Delta","\\Theta","\\Lambda","\\Xi","\\Pi","\\Sigma","\\Upsilon","\\Phi","\\Psi","\\Omega"];var p=["\u0131","\u0237"];var c=function(e,t,i,l,s){if(r[i][e]&&r[i][e].replace){e=r[i][e].replace}var p=a.getCharacterMetrics(e,t);var c;if(p){c=new h.symbolNode(e,p.height,p.depth,p.italic,p.skew,s)}else{typeof console!=="undefined"&&console.warn("No character metrics for '"+e+"' in style '"+t+"'");c=new h.symbolNode(e,0,0,0,0,s)}if(l){c.style.color=l}return c};var n=function(e,t,i,h){if(e==="\\"||r[t][e].font==="main"){return c(e,"Main-Regular",t,i,h)}else{return c(e,"AMS-Regular",t,i,h.concat(["amsrm"]))}};var o=function(e,t,i,h,a){if(a==="mathord"){return g(e,t,i,h)}else if(a==="textord"){return c(e,"Main-Regular",t,i,h.concat(["mathrm"]))}else{throw new Error("unexpected type: "+a+" in mathDefault")}};var g=function(e,t,i,h){if(/[0-9]/.test(e.charAt(0))||l.contains(p,e)||l.contains(s,e)){return c(e,"Main-Italic",t,i,h.concat(["mainit"]))}else{return c(e,"Math-Italic",t,i,h.concat(["mathit"]))}};var d=function(e,t,i){var h=e.mode;var s=e.value;if(r[h][s]&&r[h][s].replace){s=r[h][s].replace}var n=["mord"];var d=t.getColor();var w=t.font;if(w){if(w==="mathit"||l.contains(p,s)){return g(s,h,d,n)}else{var u=x[w].fontName;if(a.getCharacterMetrics(s,u)){return c(s,u,h,d,n.concat([w]))}else{return o(s,h,d,n,i)}}}else{return o(s,h,d,n,i)}};var w=function(e){var t=0;var i=0;var h=0;if(e.children){for(var a=0;a<e.children.length;a++){if(e.children[a].height>t){t=e.children[a].height}if(e.children[a].depth>i){i=e.children[a].depth}if(e.children[a].maxFontSize>h){h=e.children[a].maxFontSize}}}e.height=t;e.depth=i;e.maxFontSize=h};var u=function(e,t,i){var a=new h.span(e,t);w(a);if(i){a.style.color=i}return a};var k=function(e){var t=new h.documentFragment(e);w(t);return t};var m=function(e,t){var i=u([],[new h.symbolNode("\u200b")]);i.style.fontSize=t/e.style.sizeMultiplier+"em";var a=u(["fontsize-ensurer","reset-"+e.size,"size5"],[i]);return a};var f=function(e,t,i,a){var r;var l;var s;if(t==="individualShift"){var p=e;e=[p[0]];r=-p[0].shift-p[0].elem.depth;l=r;for(s=1;s<p.length;s++){var c=-p[s].shift-l-p[s].elem.depth;var n=c-(p[s-1].elem.height+p[s-1].elem.depth);l=l+c;e.push({type:"kern",size:n});e.push(p[s])}}else if(t==="top"){var o=i;for(s=0;s<e.length;s++){if(e[s].type==="kern"){o-=e[s].size}else{o-=e[s].elem.height+e[s].elem.depth}}r=o}else if(t==="bottom"){r=-i}else if(t==="shift"){r=-e[0].elem.depth-i}else if(t==="firstBaseline"){r=-e[0].elem.depth}else{r=0}var g=0;for(s=0;s<e.length;s++){if(e[s].type==="elem"){g=Math.max(g,e[s].elem.maxFontSize)}}var d=m(a,g);var w=[];l=r;for(s=0;s<e.length;s++){if(e[s].type==="kern"){l+=e[s].size}else{var k=e[s].elem;var f=-k.depth-l;l+=k.height+k.depth;var v=u([],[d,k]);v.height-=f;v.depth+=f;v.style.top=f+"em";w.push(v)}}var y=u(["baseline-fix"],[d,new h.symbolNode("\u200b")]);w.push(y);var x=u(["vlist"],w);x.height=Math.max(l,x.height);x.depth=Math.max(-r,x.depth);return x};var v={size1:.5,size2:.7,size3:.8,size4:.9,size5:1,size6:1.2,size7:1.44,size8:1.73,size9:2.07,size10:2.49};var y={"\\qquad":{size:"2em",className:"qquad"},"\\quad":{size:"1em",className:"quad"},"\\enspace":{size:"0.5em",className:"enspace"},"\\;":{size:"0.277778em",className:"thickspace"},"\\:":{size:"0.22222em",className:"mediumspace"},"\\,":{size:"0.16667em",className:"thinspace"},"\\!":{size:"-0.16667em",className:"negativethinspace"}};var x={mathbf:{variant:"bold",fontName:"Main-Bold"},mathrm:{variant:"normal",fontName:"Main-Regular"},mathbb:{variant:"double-struck",fontName:"AMS-Regular"},mathcal:{variant:"script",fontName:"Caligraphic-Regular"},mathfrak:{variant:"fraktur",fontName:"Fraktur-Regular"},mathscr:{variant:"script",fontName:"Script-Regular"},mathsf:{variant:"sans-serif",fontName:"SansSerif-Regular"},mathtt:{variant:"monospace",fontName:"Typewriter-Regular"}};t.exports={fontMap:x,makeSymbol:c,mathsym:n,makeSpan:u,makeFragment:k,makeVList:f,makeOrd:d,sizingMultiplier:v,spacingFunctions:y}},{"./domTree":14,"./fontMetrics":16,"./symbols":22,"./utils":23}],10:[function(e,t,i){var h=e("./ParseError");var a=e("./Style");var r=e("./buildCommon");var l=e("./delimiter");var s=e("./domTree");var p=e("./fontMetrics");var c=e("./utils");var n=r.makeSpan;var o=function(e,t,i){var h=[];for(var a=0;a<e.length;a++){var r=e[a];h.push(v(r,t,i));i=r}return h};var g={mathord:"mord",textord:"mord",bin:"mbin",rel:"mrel",text:"mord",open:"mopen",close:"mclose",inner:"minner",genfrac:"mord",array:"mord",spacing:"mord",punct:"mpunct",ordgroup:"mord",op:"mop",katex:"mord",overline:"mord",rule:"mord",leftright:"minner",sqrt:"mord",accent:"mord"};var d=function(e){if(e==null){return g.mathord}else if(e.type==="supsub"){return d(e.value.base)}else if(e.type==="llap"||e.type==="rlap"){return d(e.value)}else if(e.type==="color"){return d(e.value.value)}else if(e.type==="sizing"){return d(e.value.value)}else if(e.type==="styling"){return d(e.value.value)}else if(e.type==="delimsizing"){return g[e.value.delimType]}else{return g[e.type]}};var w=function(e,t){if(!e){return false}else if(e.type==="op"){return e.value.limits&&(t.style.size===a.DISPLAY.size||e.value.alwaysHandleSupSub)}else if(e.type==="accent"){return k(e.value.base)}else{return null}};var u=function(e){if(!e){return false}else if(e.type==="ordgroup"){if(e.value.length===1){return u(e.value[0])}else{return e}}else if(e.type==="color"){if(e.value.value.length===1){return u(e.value.value[0])}else{return e}}else{return e}};var k=function(e){var t=u(e);return t.type==="mathord"||t.type==="textord"||t.type==="bin"||t.type==="rel"||t.type==="inner"||t.type==="open"||t.type==="close"||t.type==="punct"};var m=function(e){return n(["sizing","reset-"+e.size,"size5",e.style.reset(),a.TEXT.cls(),"nulldelimiter"])};var f={mathord:function(e,t,i){return r.makeOrd(e,t,"mathord")},textord:function(e,t,i){return r.makeOrd(e,t,"textord")},bin:function(e,t,i){var h="mbin";var a=i;while(a&&a.type==="color"){var l=a.value.value;a=l[l.length-1]}if(!i||c.contains(["mbin","mopen","mrel","mop","mpunct"],d(a))){e.type="textord";h="mord"}return r.mathsym(e.value,e.mode,t.getColor(),[h])},rel:function(e,t,i){return r.mathsym(e.value,e.mode,t.getColor(),["mrel"])},open:function(e,t,i){return r.mathsym(e.value,e.mode,t.getColor(),["mopen"])},close:function(e,t,i){return r.mathsym(e.value,e.mode,t.getColor(),["mclose"])},inner:function(e,t,i){return r.mathsym(e.value,e.mode,t.getColor(),["minner"])},punct:function(e,t,i){return r.mathsym(e.value,e.mode,t.getColor(),["mpunct"])},ordgroup:function(e,t,i){return n(["mord",t.style.cls()],o(e.value,t.reset()))},text:function(e,t,i){return n(["text","mord",t.style.cls()],o(e.value.body,t.reset()))},color:function(e,t,i){var h=o(e.value.value,t.withColor(e.value.color),i);return new r.makeFragment(h)},supsub:function(e,t,i){if(w(e.value.base,t)){return f[e.value.base.type](e,t,i)}var h=v(e.value.base,t.reset());var l,c,o,g;if(e.value.sup){o=v(e.value.sup,t.withStyle(t.style.sup()));l=n([t.style.reset(),t.style.sup().cls()],[o])}if(e.value.sub){g=v(e.value.sub,t.withStyle(t.style.sub()));c=n([t.style.reset(),t.style.sub().cls()],[g])}var u,m;if(k(e.value.base)){u=0;m=0}else{u=h.height-p.metrics.supDrop;m=h.depth+p.metrics.subDrop}var y;if(t.style===a.DISPLAY){y=p.metrics.sup1}else if(t.style.cramped){y=p.metrics.sup3}else{y=p.metrics.sup2}var x=a.TEXT.sizeMultiplier*t.style.sizeMultiplier;var b=.5/p.metrics.ptPerEm/x+"em";var z;if(!e.value.sup){m=Math.max(m,p.metrics.sub1,g.height-.8*p.metrics.xHeight);z=r.makeVList([{type:"elem",elem:c}],"shift",m,t);z.children[0].style.marginRight=b;if(h instanceof s.symbolNode){z.children[0].style.marginLeft=-h.italic+"em"}}else if(!e.value.sub){u=Math.max(u,y,o.depth+.25*p.metrics.xHeight);z=r.makeVList([{type:"elem",elem:l}],"shift",-u,t);z.children[0].style.marginRight=b}else{u=Math.max(u,y,o.depth+.25*p.metrics.xHeight);m=Math.max(m,p.metrics.sub2);var S=p.metrics.defaultRuleThickness;if(u-o.depth-(g.height-m)<4*S){m=4*S-(u-o.depth)+g.height;var M=.8*p.metrics.xHeight-(u-o.depth);if(M>0){u+=M;m-=M}}z=r.makeVList([{type:"elem",elem:c,shift:m},{type:"elem",elem:l,shift:-u}],"individualShift",null,t);if(h instanceof s.symbolNode){z.children[0].style.marginLeft=-h.italic+"em"}z.children[0].style.marginRight=b;z.children[1].style.marginRight=b}return n([d(e.value.base)],[h,z])},genfrac:function(e,t,i){var h=t.style;if(e.value.size==="display"){h=a.DISPLAY}else if(e.value.size==="text"){h=a.TEXT}var s=h.fracNum();var c=h.fracDen();var o=v(e.value.numer,t.withStyle(s));var g=n([h.reset(),s.cls()],[o]);var d=v(e.value.denom,t.withStyle(c));var w=n([h.reset(),c.cls()],[d]);var u;if(e.value.hasBarLine){u=p.metrics.defaultRuleThickness/t.style.sizeMultiplier}else{u=0}var k;var f;var y;if(h.size===a.DISPLAY.size){k=p.metrics.num1;if(u>0){f=3*u}else{f=7*p.metrics.defaultRuleThickness}y=p.metrics.denom1}else{if(u>0){k=p.metrics.num2;f=u}else{k=p.metrics.num3;f=3*p.metrics.defaultRuleThickness}y=p.metrics.denom2}var x;if(u===0){var b=k-o.depth-(d.height-y);if(b<f){k+=.5*(f-b);y+=.5*(f-b)}x=r.makeVList([{type:"elem",elem:w,shift:y},{type:"elem",elem:g,shift:-k}],"individualShift",null,t)}else{var z=p.metrics.axisHeight;if(k-o.depth-(z+.5*u)<f){k+=f-(k-o.depth-(z+.5*u))}if(z-.5*u-(d.height-y)<f){y+=f-(z-.5*u-(d.height-y))}var S=n([t.style.reset(),a.TEXT.cls(),"frac-line"]);S.height=u;var M=-(z-.5*u);x=r.makeVList([{type:"elem",elem:w,shift:y},{type:"elem",elem:S,shift:M},{type:"elem",elem:g,shift:-k}],"individualShift",null,t)}x.height*=h.sizeMultiplier/t.style.sizeMultiplier;x.depth*=h.sizeMultiplier/t.style.sizeMultiplier;var q;if(h.size===a.DISPLAY.size){q=p.metrics.delim1}else{q=p.metrics.getDelim2(h)}var A,T;if(e.value.leftDelim==null){A=m(t)}else{A=l.customSizedDelim(e.value.leftDelim,q,true,t.withStyle(h),e.mode)}if(e.value.rightDelim==null){T=m(t)}else{T=l.customSizedDelim(e.value.rightDelim,q,true,t.withStyle(h),e.mode)}return n(["mord",t.style.reset(),h.cls()],[A,n(["mfrac"],[x]),T],t.getColor())},array:function(e,t,i){var a,l;var s=e.value.body.length;var o=0;var g=new Array(s);var d=1/p.metrics.ptPerEm;var w=5*d;var u=12*d;var k=c.deflt(e.value.arraystretch,1);var m=k*u;var f=.7*m;var y=.3*m;var x=0;for(a=0;a<e.value.body.length;++a){var b=e.value.body[a];var z=f;var S=y;if(o<b.length){o=b.length}var M=new Array(b.length);for(l=0;l<b.length;++l){var q=v(b[l],t);if(S<q.depth){S=q.depth}if(z<q.height){z=q.height}M[l]=q}var A=0;if(e.value.rowGaps[a]){A=e.value.rowGaps[a].value;switch(A.unit){case"em":A=A.number;break;case"ex":A=A.number*p.metrics.emPerEx;break;default:console.error("Can't handle unit "+A.unit);A=0}if(A>0){A+=y;if(S<A){S=A}A=0}}M.height=z;M.depth=S;x+=z;M.pos=x;x+=S+A;g[a]=M}var T=x/2+p.metrics.axisHeight;var N=e.value.cols||[];var C=[];var R;var E;for(l=0,E=0;l<o||E<N.length;++l,++E){var P=N[E]||{};var D=true;while(P.type==="separator"){if(!D){R=n(["arraycolsep"],[]);R.style.width=p.metrics.doubleRuleSep+"em";C.push(R)}if(P.separator==="|"){var L=n(["vertical-separator"],[]);L.style.height=x+"em";L.style.verticalAlign=-(x-T)+"em";C.push(L)}else{throw new h("Invalid separator type: "+P.separator)}E++;P=N[E]||{};D=false}if(l>=o){continue}var O;if(l>0||e.value.hskipBeforeAndAfter){O=c.deflt(P.pregap,w);if(O!==0){R=n(["arraycolsep"],[]);R.style.width=O+"em";C.push(R)}}var I=[];for(a=0;a<s;++a){var B=g[a];var F=B[l];if(!F){continue}var _=B.pos-T;F.depth=B.depth;F.height=B.height;I.push({type:"elem",elem:F,shift:_})}I=r.makeVList(I,"individualShift",null,t);I=n(["col-align-"+(P.align||"c")],[I]);C.push(I);if(l<o-1||e.value.hskipBeforeAndAfter){O=c.deflt(P.postgap,w);if(O!==0){R=n(["arraycolsep"],[]);R.style.width=O+"em";C.push(R)}}}g=n(["mtable"],C);return n(["mord"],[g],t.getColor())},spacing:function(e,t,i){if(e.value==="\\ "||e.value==="\\space"||e.value===" "||e.value==="~"){return n(["mord","mspace"],[r.mathsym(e.value,e.mode)])}else{return n(["mord","mspace",r.spacingFunctions[e.value].className])}},llap:function(e,t,i){var h=n(["inner"],[v(e.value.body,t.reset())]);var a=n(["fix"],[]);return n(["llap",t.style.cls()],[h,a])},rlap:function(e,t,i){var h=n(["inner"],[v(e.value.body,t.reset())]);var a=n(["fix"],[]);return n(["rlap",t.style.cls()],[h,a])},op:function(e,t,i){var h;var l;var s=false;if(e.type==="supsub"){h=e.value.sup;l=e.value.sub;e=e.value.base;s=true}var o=["\\smallint"];var g=false;if(t.style.size===a.DISPLAY.size&&e.value.symbol&&!c.contains(o,e.value.body)){g=true}var d;var w=0;var u=0;if(e.value.symbol){var k=g?"Size2-Regular":"Size1-Regular";d=r.makeSymbol(e.value.body,k,"math",t.getColor(),["op-symbol",g?"large-op":"small-op","mop"]);w=(d.height-d.depth)/2-p.metrics.axisHeight*t.style.sizeMultiplier;u=d.italic}else{var m=[];for(var f=1;f<e.value.body.length;f++){m.push(r.mathsym(e.value.body[f],e.mode))}d=n(["mop"],m,t.getColor())}if(s){d=n([],[d]);var y,x,b,z;if(h){var S=v(h,t.withStyle(t.style.sup()));y=n([t.style.reset(),t.style.sup().cls()],[S]);x=Math.max(p.metrics.bigOpSpacing1,p.metrics.bigOpSpacing3-S.depth)}if(l){var M=v(l,t.withStyle(t.style.sub()));b=n([t.style.reset(),t.style.sub().cls()],[M]);z=Math.max(p.metrics.bigOpSpacing2,p.metrics.bigOpSpacing4-M.height)}var q,A,T;if(!h){A=d.height-w;q=r.makeVList([{type:"kern",size:p.metrics.bigOpSpacing5},{type:"elem",elem:b},{type:"kern",size:z},{type:"elem",elem:d}],"top",A,t);q.children[0].style.marginLeft=-u+"em"}else if(!l){T=d.depth+w;q=r.makeVList([{type:"elem",elem:d},{type:"kern",size:x},{type:"elem",elem:y},{type:"kern",size:p.metrics.bigOpSpacing5}],"bottom",T,t);q.children[1].style.marginLeft=u+"em"}else if(!h&&!l){return d}else{T=p.metrics.bigOpSpacing5+b.height+b.depth+z+d.depth+w;q=r.makeVList([{type:"kern",size:p.metrics.bigOpSpacing5},{type:"elem",elem:b},{type:"kern",size:z},{type:"elem",elem:d},{type:"kern",size:x},{type:"elem",elem:y},{type:"kern",size:p.metrics.bigOpSpacing5}],"bottom",T,t);q.children[0].style.marginLeft=-u+"em";q.children[2].style.marginLeft=u+"em"}return n(["mop","op-limits"],[q])}else{if(e.value.symbol){d.style.top=w+"em"}return d}},katex:function(e,t,i){var h=n(["k"],[r.mathsym("K",e.mode)]);var a=n(["a"],[r.mathsym("A",e.mode)]);a.height=(a.height+.2)*.75;a.depth=(a.height-.2)*.75;var l=n(["t"],[r.mathsym("T",e.mode)]);var s=n(["e"],[r.mathsym("E",e.mode)]);s.height=s.height-.2155;s.depth=s.depth+.2155;var p=n(["x"],[r.mathsym("X",e.mode)]);return n(["katex-logo","mord"],[h,a,l,s,p],t.getColor())},overline:function(e,t,i){var h=v(e.value.body,t.withStyle(t.style.cramp()));var l=p.metrics.defaultRuleThickness/t.style.sizeMultiplier;var s=n([t.style.reset(),a.TEXT.cls(),"overline-line"]);s.height=l;s.maxFontSize=1;var c=r.makeVList([{type:"elem",elem:h},{type:"kern",size:3*l},{type:"elem",elem:s},{type:"kern",size:l}],"firstBaseline",null,t);return n(["overline","mord"],[c],t.getColor())},sqrt:function(e,t,i){var h=v(e.value.body,t.withStyle(t.style.cramp()));var s=p.metrics.defaultRuleThickness/t.style.sizeMultiplier;var c=n([t.style.reset(),a.TEXT.cls(),"sqrt-line"],[],t.getColor());c.height=s;c.maxFontSize=1;var o=s;if(t.style.id<a.TEXT.id){o=p.metrics.xHeight}var g=s+o/4;var d=(h.height+h.depth)*t.style.sizeMultiplier;var w=d+g+s;var u=n(["sqrt-sign"],[l.customSizedDelim("\\surd",w,false,t,e.mode)],t.getColor());var k=u.height+u.depth-s;if(k>h.height+h.depth+g){g=(g+k-h.height-h.depth)/2}var m=-(h.height+g+s)+u.height;u.style.top=m+"em";u.height-=m;u.depth+=m;var f;if(h.height===0&&h.depth===0){f=n()}else{f=r.makeVList([{type:"elem",elem:h},{type:"kern",size:g},{type:"elem",elem:c},{type:"kern",size:s}],"firstBaseline",null,t)}if(!e.value.index){return n(["sqrt","mord"],[u,f])}else{var y=v(e.value.index,t.withStyle(a.SCRIPTSCRIPT));var x=n([t.style.reset(),a.SCRIPTSCRIPT.cls()],[y]);var b=Math.max(u.height,f.height);var z=Math.max(u.depth,f.depth);var S=.6*(b-z);var M=r.makeVList([{type:"elem",elem:x}],"shift",-S,t);var q=n(["root"],[M]);return n(["sqrt","mord"],[q,u,f])}},sizing:function(e,t,i){var h=o(e.value.value,t.withSize(e.value.size),i);var a=n(["mord"],[n(["sizing","reset-"+t.size,e.value.size,t.style.cls()],h)]);var l=r.sizingMultiplier[e.value.size];a.maxFontSize=l*t.style.sizeMultiplier;
-return a},styling:function(e,t,i){var h={display:a.DISPLAY,text:a.TEXT,script:a.SCRIPT,scriptscript:a.SCRIPTSCRIPT};var r=h[e.value.style];var l=o(e.value.value,t.withStyle(r),i);return n([t.style.reset(),r.cls()],l)},font:function(e,t,i){var h=e.value.font;return v(e.value.body,t.withFont(h),i)},delimsizing:function(e,t,i){var h=e.value.value;if(h==="."){return n([g[e.value.delimType]])}return n([g[e.value.delimType]],[l.sizedDelim(h,e.value.size,t,e.mode)])},leftright:function(e,t,i){var h=o(e.value.body,t.reset());var a=0;var r=0;for(var s=0;s<h.length;s++){a=Math.max(h[s].height,a);r=Math.max(h[s].depth,r)}a*=t.style.sizeMultiplier;r*=t.style.sizeMultiplier;var p;if(e.value.left==="."){p=m(t)}else{p=l.leftRightDelim(e.value.left,a,r,t,e.mode)}h.unshift(p);var c;if(e.value.right==="."){c=m(t)}else{c=l.leftRightDelim(e.value.right,a,r,t,e.mode)}h.push(c);return n(["minner",t.style.cls()],h,t.getColor())},rule:function(e,t,i){var h=n(["mord","rule"],[],t.getColor());var a=0;if(e.value.shift){a=e.value.shift.number;if(e.value.shift.unit==="ex"){a*=p.metrics.xHeight}}var r=e.value.width.number;if(e.value.width.unit==="ex"){r*=p.metrics.xHeight}var l=e.value.height.number;if(e.value.height.unit==="ex"){l*=p.metrics.xHeight}a/=t.style.sizeMultiplier;r/=t.style.sizeMultiplier;l/=t.style.sizeMultiplier;h.style.borderRightWidth=r+"em";h.style.borderTopWidth=l+"em";h.style.bottom=a+"em";h.width=r;h.height=l+a;h.depth=-a;return h},accent:function(e,t,i){var h=e.value.base;var a;if(e.type==="supsub"){var l=e;e=l.value.base;h=e.value.base;l.value.base=h;a=v(l,t.reset(),i)}var s=v(h,t.withStyle(t.style.cramp()));var c;if(k(h)){var o=u(h);var g=v(o,t.withStyle(t.style.cramp()));c=g.skew}else{c=0}var d=Math.min(s.height,p.metrics.xHeight);var w=r.makeSymbol(e.value.accent,"Main-Regular","math",t.getColor());w.italic=0;var m=e.value.accent==="\\vec"?"accent-vec":null;var f=n(["accent-body",m],[n([],[w])]);f=r.makeVList([{type:"elem",elem:s},{type:"kern",size:-d},{type:"elem",elem:f}],"firstBaseline",null,t);f.children[1].style.marginLeft=2*c+"em";var y=n(["mord","accent"],[f]);if(a){a.children[0]=y;a.height=Math.max(y.height,a.height);a.classes[0]="mord";return a}else{return y}},phantom:function(e,t,i){var h=o(e.value.value,t.withPhantom(),i);return new r.makeFragment(h)}};var v=function(e,t,i){if(!e){return n()}if(f[e.type]){var a=f[e.type](e,t,i);var l;if(t.style!==t.parentStyle){l=t.style.sizeMultiplier/t.parentStyle.sizeMultiplier;a.height*=l;a.depth*=l}if(t.size!==t.parentSize){l=r.sizingMultiplier[t.size]/r.sizingMultiplier[t.parentSize];a.height*=l;a.depth*=l}return a}else{throw new h("Got group of unknown type: '"+e.type+"'")}};var y=function(e,t){e=JSON.parse(JSON.stringify(e));var i=o(e,t);var h=n(["base",t.style.cls()],i);var a=n(["strut"]);var r=n(["strut","bottom"]);a.style.height=h.height+"em";r.style.height=h.height+h.depth+"em";r.style.verticalAlign=-h.depth+"em";var l=n(["katex-html"],[a,r,h]);l.setAttribute("aria-hidden","true");return l};t.exports=y},{"./ParseError":5,"./Style":8,"./buildCommon":9,"./delimiter":13,"./domTree":14,"./fontMetrics":16,"./utils":23}],11:[function(e,t,i){var h=e("./buildCommon");var a=e("./fontMetrics");var r=e("./mathMLTree");var l=e("./ParseError");var s=e("./symbols");var p=e("./utils");var c=h.makeSpan;var n=h.fontMap;var o=function(e,t){if(s[t][e]&&s[t][e].replace){e=s[t][e].replace}return new r.TextNode(e)};var g=function(e,t){var i=t.font;if(!i){return null}var h=e.mode;if(i==="mathit"){return"italic"}var r=e.value;if(p.contains(["\\imath","\\jmath"],r)){return null}if(s[h][r]&&s[h][r].replace){r=s[h][r].replace}var l=n[i].fontName;if(a.getCharacterMetrics(r,l)){return n[t.font].variant}return null};var d={mathord:function(e,t){var i=new r.MathNode("mi",[o(e.value,e.mode)]);var h=g(e,t);if(h){i.setAttribute("mathvariant",h)}return i},textord:function(e,t){var i=o(e.value,e.mode);var h=g(e,t)||"normal";var a;if(/[0-9]/.test(e.value)){a=new r.MathNode("mn",[i]);if(t.font){a.setAttribute("mathvariant",h)}}else{a=new r.MathNode("mi",[i]);a.setAttribute("mathvariant",h)}return a},bin:function(e){var t=new r.MathNode("mo",[o(e.value,e.mode)]);return t},rel:function(e){var t=new r.MathNode("mo",[o(e.value,e.mode)]);return t},open:function(e){var t=new r.MathNode("mo",[o(e.value,e.mode)]);return t},close:function(e){var t=new r.MathNode("mo",[o(e.value,e.mode)]);return t},inner:function(e){var t=new r.MathNode("mo",[o(e.value,e.mode)]);return t},punct:function(e){var t=new r.MathNode("mo",[o(e.value,e.mode)]);t.setAttribute("separator","true");return t},ordgroup:function(e,t){var i=w(e.value,t);var h=new r.MathNode("mrow",i);return h},text:function(e,t){var i=w(e.value.body,t);var h=new r.MathNode("mtext",i);return h},color:function(e,t){var i=w(e.value.value,t);var h=new r.MathNode("mstyle",i);h.setAttribute("mathcolor",e.value.color);return h},supsub:function(e,t){var i=[u(e.value.base,t)];if(e.value.sub){i.push(u(e.value.sub,t))}if(e.value.sup){i.push(u(e.value.sup,t))}var h;if(!e.value.sub){h="msup"}else if(!e.value.sup){h="msub"}else{h="msubsup"}var a=new r.MathNode(h,i);return a},genfrac:function(e,t){var i=new r.MathNode("mfrac",[u(e.value.numer,t),u(e.value.denom,t)]);if(!e.value.hasBarLine){i.setAttribute("linethickness","0px")}if(e.value.leftDelim!=null||e.value.rightDelim!=null){var h=[];if(e.value.leftDelim!=null){var a=new r.MathNode("mo",[new r.TextNode(e.value.leftDelim)]);a.setAttribute("fence","true");h.push(a)}h.push(i);if(e.value.rightDelim!=null){var l=new r.MathNode("mo",[new r.TextNode(e.value.rightDelim)]);l.setAttribute("fence","true");h.push(l)}var s=new r.MathNode("mrow",h);return s}return i},array:function(e,t){return new r.MathNode("mtable",e.value.body.map(function(e){return new r.MathNode("mtr",e.map(function(e){return new r.MathNode("mtd",[u(e,t)])}))}))},sqrt:function(e,t){var i;if(e.value.index){i=new r.MathNode("mroot",[u(e.value.body,t),u(e.value.index,t)])}else{i=new r.MathNode("msqrt",[u(e.value.body,t)])}return i},leftright:function(e,t){var i=w(e.value.body,t);if(e.value.left!=="."){var h=new r.MathNode("mo",[o(e.value.left,e.mode)]);h.setAttribute("fence","true");i.unshift(h)}if(e.value.right!=="."){var a=new r.MathNode("mo",[o(e.value.right,e.mode)]);a.setAttribute("fence","true");i.push(a)}var l=new r.MathNode("mrow",i);return l},accent:function(e,t){var i=new r.MathNode("mo",[o(e.value.accent,e.mode)]);var h=new r.MathNode("mover",[u(e.value.base,t),i]);h.setAttribute("accent","true");return h},spacing:function(e){var t;if(e.value==="\\ "||e.value==="\\space"||e.value===" "||e.value==="~"){t=new r.MathNode("mtext",[new r.TextNode("\xa0")])}else{t=new r.MathNode("mspace");t.setAttribute("width",h.spacingFunctions[e.value].size)}return t},op:function(e){var t;if(e.value.symbol){t=new r.MathNode("mo",[o(e.value.body,e.mode)])}else{t=new r.MathNode("mi",[new r.TextNode(e.value.body.slice(1))])}return t},katex:function(e){var t=new r.MathNode("mtext",[new r.TextNode("KaTeX")]);return t},font:function(e,t){var i=e.value.font;return u(e.value.body,t.withFont(i))},delimsizing:function(e){var t=[];if(e.value.value!=="."){t.push(o(e.value.value,e.mode))}var i=new r.MathNode("mo",t);if(e.value.delimType==="open"||e.value.delimType==="close"){i.setAttribute("fence","true")}else{i.setAttribute("fence","false")}return i},styling:function(e,t){var i=w(e.value.value,t);var h=new r.MathNode("mstyle",i);var a={display:["0","true"],text:["0","false"],script:["1","false"],scriptscript:["2","false"]};var l=a[e.value.style];h.setAttribute("scriptlevel",l[0]);h.setAttribute("displaystyle",l[1]);return h},sizing:function(e,t){var i=w(e.value.value,t);var a=new r.MathNode("mstyle",i);a.setAttribute("mathsize",h.sizingMultiplier[e.value.size]+"em");return a},overline:function(e,t){var i=new r.MathNode("mo",[new r.TextNode("\u203e")]);i.setAttribute("stretchy","true");var h=new r.MathNode("mover",[u(e.value.body,t),i]);h.setAttribute("accent","true");return h},rule:function(e){var t=new r.MathNode("mrow");return t},llap:function(e,t){var i=new r.MathNode("mpadded",[u(e.value.body,t)]);i.setAttribute("lspace","-1width");i.setAttribute("width","0px");return i},rlap:function(e,t){var i=new r.MathNode("mpadded",[u(e.value.body,t)]);i.setAttribute("width","0px");return i},phantom:function(e,t,i){var h=w(e.value.value,t);return new r.MathNode("mphantom",h)}};var w=function(e,t){var i=[];for(var h=0;h<e.length;h++){var a=e[h];i.push(u(a,t))}return i};var u=function(e,t){if(!e){return new r.MathNode("mrow")}if(d[e.type]){return d[e.type](e,t)}else{throw new l("Got group of unknown type: '"+e.type+"'")}};var k=function(e,t,i){var h=w(e,i);var a=new r.MathNode("mrow",h);var l=new r.MathNode("annotation",[new r.TextNode(t)]);l.setAttribute("encoding","application/x-tex");var s=new r.MathNode("semantics",[a,l]);var p=new r.MathNode("math",[s]);return c(["katex-mathml"],[p])};t.exports=k},{"./ParseError":5,"./buildCommon":9,"./fontMetrics":16,"./mathMLTree":19,"./symbols":22,"./utils":23}],12:[function(e,t,i){var h=e("./buildHTML");var a=e("./buildMathML");var r=e("./buildCommon");var l=e("./Options");var s=e("./Settings");var p=e("./Style");var c=r.makeSpan;var n=function(e,t,i){i=i||new s({});var r=p.TEXT;if(i.displayMode){r=p.DISPLAY}var n=new l({style:r,size:"size5"});var o=a(e,t,n);var g=h(e,n);var d=c(["katex"],[o,g]);if(i.displayMode){return c(["katex-display"],[d])}else{return d}};t.exports=n},{"./Options":4,"./Settings":7,"./Style":8,"./buildCommon":9,"./buildHTML":10,"./buildMathML":11}],13:[function(e,t,i){var h=e("./ParseError");var a=e("./Style");var r=e("./buildCommon");var l=e("./fontMetrics");var s=e("./symbols");var p=e("./utils");var c=r.makeSpan;var n=function(e,t){if(s.math[e]&&s.math[e].replace){return l.getCharacterMetrics(s.math[e].replace,t)}else{return l.getCharacterMetrics(e,t)}};var o=function(e,t,i){return r.makeSymbol(e,"Size"+t+"-Regular",i)};var g=function(e,t,i){var h=c(["style-wrap",i.style.reset(),t.cls()],[e]);var a=t.sizeMultiplier/i.style.sizeMultiplier;h.height*=a;h.depth*=a;h.maxFontSize=t.sizeMultiplier;return h};var d=function(e,t,i,h,a){var s=r.makeSymbol(e,"Main-Regular",a);var p=g(s,t,h);if(i){var c=(1-h.style.sizeMultiplier/t.sizeMultiplier)*l.metrics.axisHeight;p.style.top=c+"em";p.height-=c;p.depth+=c}return p};var w=function(e,t,i,h,r){var s=o(e,t,r);var p=g(c(["delimsizing","size"+t],[s],h.getColor()),a.TEXT,h);if(i){var n=(1-h.style.sizeMultiplier)*l.metrics.axisHeight;p.style.top=n+"em";p.height-=n;p.depth+=n}return p};var u=function(e,t,i){var h;if(t==="Size1-Regular"){h="delim-size1"}else if(t==="Size4-Regular"){h="delim-size4"}var a=c(["delimsizinginner",h],[c([],[r.makeSymbol(e,t,i)])]);return{type:"elem",elem:a}};var k=function(e,t,i,h,s){var p,o,d,w;p=d=w=e;o=null;var k="Size1-Regular";if(e==="\\uparrow"){d=w="\u23d0"}else if(e==="\\Uparrow"){d=w="\u2016"}else if(e==="\\downarrow"){p=d="\u23d0"}else if(e==="\\Downarrow"){p=d="\u2016"}else if(e==="\\updownarrow"){p="\\uparrow";d="\u23d0";w="\\downarrow"}else if(e==="\\Updownarrow"){p="\\Uparrow";d="\u2016";w="\\Downarrow"}else if(e==="["||e==="\\lbrack"){p="\u23a1";d="\u23a2";w="\u23a3";k="Size4-Regular"}else if(e==="]"||e==="\\rbrack"){p="\u23a4";d="\u23a5";w="\u23a6";k="Size4-Regular"}else if(e==="\\lfloor"){d=p="\u23a2";w="\u23a3";k="Size4-Regular"}else if(e==="\\lceil"){p="\u23a1";d=w="\u23a2";k="Size4-Regular"}else if(e==="\\rfloor"){d=p="\u23a5";w="\u23a6";k="Size4-Regular"}else if(e==="\\rceil"){p="\u23a4";d=w="\u23a5";k="Size4-Regular"}else if(e==="("){p="\u239b";d="\u239c";w="\u239d";k="Size4-Regular"}else if(e===")"){p="\u239e";d="\u239f";w="\u23a0";k="Size4-Regular"}else if(e==="\\{"||e==="\\lbrace"){p="\u23a7";o="\u23a8";w="\u23a9";d="\u23aa";k="Size4-Regular"}else if(e==="\\}"||e==="\\rbrace"){p="\u23ab";o="\u23ac";w="\u23ad";d="\u23aa";k="Size4-Regular"}else if(e==="\\lgroup"){p="\u23a7";w="\u23a9";d="\u23aa";k="Size4-Regular"}else if(e==="\\rgroup"){p="\u23ab";w="\u23ad";d="\u23aa";k="Size4-Regular"}else if(e==="\\lmoustache"){p="\u23a7";w="\u23ad";d="\u23aa";k="Size4-Regular"}else if(e==="\\rmoustache"){p="\u23ab";w="\u23a9";d="\u23aa";k="Size4-Regular"}else if(e==="\\surd"){p="\ue001";w="\u23b7";d="\ue000";k="Size4-Regular"}var m=n(p,k);var f=m.height+m.depth;var v=n(d,k);var y=v.height+v.depth;var x=n(w,k);var b=x.height+x.depth;var z=0;var S=1;if(o!==null){var M=n(o,k);z=M.height+M.depth;S=2}var q=f+b+z;var A=Math.ceil((t-q)/(S*y));var T=q+A*S*y;var N=l.metrics.axisHeight;if(i){N*=h.style.sizeMultiplier}var C=T/2-N;var R=[];R.push(u(w,k,s));var E;if(o===null){for(E=0;E<A;E++){R.push(u(d,k,s))}}else{for(E=0;E<A;E++){R.push(u(d,k,s))}R.push(u(o,k,s));for(E=0;E<A;E++){R.push(u(d,k,s))}}R.push(u(p,k,s));var P=r.makeVList(R,"bottom",C,h);return g(c(["delimsizing","mult"],[P],h.getColor()),a.TEXT,h)};var m=["(",")","[","\\lbrack","]","\\rbrack","\\{","\\lbrace","\\}","\\rbrace","\\lfloor","\\rfloor","\\lceil","\\rceil","\\surd"];var f=["\\uparrow","\\downarrow","\\updownarrow","\\Uparrow","\\Downarrow","\\Updownarrow","|","\\|","\\vert","\\Vert","\\lvert","\\rvert","\\lVert","\\rVert","\\lgroup","\\rgroup","\\lmoustache","\\rmoustache"];var v=["<",">","\\langle","\\rangle","/","\\backslash"];var y=[0,1.2,1.8,2.4,3];var x=function(e,t,i,a){if(e==="<"){e="\\langle"}else if(e===">"){e="\\rangle"}if(p.contains(m,e)||p.contains(v,e)){return w(e,t,false,i,a)}else if(p.contains(f,e)){return k(e,y[t],false,i,a)}else{throw new h("Illegal delimiter: '"+e+"'")}};var b=[{type:"small",style:a.SCRIPTSCRIPT},{type:"small",style:a.SCRIPT},{type:"small",style:a.TEXT},{type:"large",size:1},{type:"large",size:2},{type:"large",size:3},{type:"large",size:4}];var z=[{type:"small",style:a.SCRIPTSCRIPT},{type:"small",style:a.SCRIPT},{type:"small",style:a.TEXT},{type:"stack"}];var S=[{type:"small",style:a.SCRIPTSCRIPT},{type:"small",style:a.SCRIPT},{type:"small",style:a.TEXT},{type:"large",size:1},{type:"large",size:2},{type:"large",size:3},{type:"large",size:4},{type:"stack"}];var M=function(e){if(e.type==="small"){return"Main-Regular"}else if(e.type==="large"){return"Size"+e.size+"-Regular"}else if(e.type==="stack"){return"Size4-Regular"}};var q=function(e,t,i,h){var a=Math.min(2,3-h.style.size);for(var r=a;r<i.length;r++){if(i[r].type==="stack"){break}var l=n(e,M(i[r]));var s=l.height+l.depth;if(i[r].type==="small"){s*=i[r].style.sizeMultiplier}if(s>t){return i[r]}}return i[i.length-1]};var A=function(e,t,i,h,a){if(e==="<"){e="\\langle"}else if(e===">"){e="\\rangle"}var r;if(p.contains(v,e)){r=b}else if(p.contains(m,e)){r=S}else{r=z}var l=q(e,t,r,h);if(l.type==="small"){return d(e,l.style,i,h,a)}else if(l.type==="large"){return w(e,l.size,i,h,a)}else if(l.type==="stack"){return k(e,t,i,h,a)}};var T=function(e,t,i,h,a){var r=l.metrics.axisHeight*h.style.sizeMultiplier;var s=901;var p=5/l.metrics.ptPerEm;var c=Math.max(t-r,i+r);var n=Math.max(c/500*s,2*c-p);return A(e,n,true,h,a)};t.exports={sizedDelim:x,customSizedDelim:A,leftRightDelim:T}},{"./ParseError":5,"./Style":8,"./buildCommon":9,"./fontMetrics":16,"./symbols":22,"./utils":23}],14:[function(e,t,i){var h=e("./utils");var a=function(e){e=e.slice();for(var t=e.length-1;t>=0;t--){if(!e[t]){e.splice(t,1)}}return e.join(" ")};function r(e,t,i,h,a,r){this.classes=e||[];this.children=t||[];this.height=i||0;this.depth=h||0;this.maxFontSize=a||0;this.style=r||{};this.attributes={}}r.prototype.setAttribute=function(e,t){this.attributes[e]=t};r.prototype.toNode=function(){var e=document.createElement("span");e.className=a(this.classes);for(var t in this.style){if(Object.prototype.hasOwnProperty.call(this.style,t)){e.style[t]=this.style[t]}}for(var i in this.attributes){if(Object.prototype.hasOwnProperty.call(this.attributes,i)){e.setAttribute(i,this.attributes[i])}}for(var h=0;h<this.children.length;h++){e.appendChild(this.children[h].toNode())}return e};r.prototype.toMarkup=function(){var e="<span";if(this.classes.length){e+=' class="';e+=h.escape(a(this.classes));e+='"'}var t="";for(var i in this.style){if(this.style.hasOwnProperty(i)){t+=h.hyphenate(i)+":"+this.style[i]+";"}}if(t){e+=' style="'+h.escape(t)+'"'}for(var r in this.attributes){if(Object.prototype.hasOwnProperty.call(this.attributes,r)){e+=" "+r+'="';e+=h.escape(this.attributes[r]);e+='"'}}e+=">";for(var l=0;l<this.children.length;l++){e+=this.children[l].toMarkup()}e+="</span>";return e};function l(e,t,i,h){this.children=e||[];this.height=t||0;this.depth=i||0;this.maxFontSize=h||0}l.prototype.toNode=function(){var e=document.createDocumentFragment();for(var t=0;t<this.children.length;t++){e.appendChild(this.children[t].toNode())}return e};l.prototype.toMarkup=function(){var e="";for(var t=0;t<this.children.length;t++){e+=this.children[t].toMarkup()}return e};function s(e,t,i,h,a,r,l){this.value=e||"";this.height=t||0;this.depth=i||0;this.italic=h||0;this.skew=a||0;this.classes=r||[];this.style=l||{};this.maxFontSize=0}s.prototype.toNode=function(){var e=document.createTextNode(this.value);var t=null;if(this.italic>0){t=document.createElement("span");t.style.marginRight=this.italic+"em"}if(this.classes.length>0){t=t||document.createElement("span");t.className=a(this.classes)}for(var i in this.style){if(this.style.hasOwnProperty(i)){t=t||document.createElement("span");t.style[i]=this.style[i]}}if(t){t.appendChild(e);return t}else{return e}};s.prototype.toMarkup=function(){var e=false;var t="<span";if(this.classes.length){e=true;t+=' class="';t+=h.escape(a(this.classes));t+='"'}var i="";if(this.italic>0){i+="margin-right:"+this.italic+"em;"}for(var r in this.style){if(this.style.hasOwnProperty(r)){i+=h.hyphenate(r)+":"+this.style[r]+";"}}if(i){e=true;t+=' style="'+h.escape(i)+'"'}var l=h.escape(this.value);if(e){t+=">";t+=l;t+="</span>";return t}else{return l}};t.exports={span:r,documentFragment:l,symbolNode:s}},{"./utils":23}],15:[function(e,t,i){var h=e("./fontMetrics");var a=e("./parseData");var r=e("./ParseError");var l=a.ParseNode;var s=a.ParseResult;function p(e,t,i,h){var a=[],p=[a],c=[];while(true){var n=e.parseExpression(t,i,false,null);a.push(new l("ordgroup",n.result,i));t=n.position;var o=n.peek.text;if(o==="&"){t=n.peek.position}else if(o==="\\end"){break}else if(o==="\\\\"||o==="\\cr"){var g=e.parseFunction(t,i);c.push(g.result.value.size);t=g.position;a=[];p.push(a)}else{throw new r("Expected & or \\\\ or \\end",e.lexer,n.peek.position)}}h.body=p;h.rowGaps=c;return new s(new l(h.type,h,i),t)}var c=[{names:["array"],numArgs:1,handler:function(e,t,i,h,a){var l=this;h=h.value.map?h.value:[h];var s=h.map(function(e){var t=e.value;if("lcr".indexOf(t)!==-1){return{type:"align",align:t}}else if(t==="|"){return{type:"separator",separator:"|"}}throw new r("Unknown column alignment: "+e.value,l.lexer,a[1])});var c={type:"array",cols:s,hskipBeforeAndAfter:true};c=p(l,e,t,c);return c}},{names:["matrix","pmatrix","bmatrix","Bmatrix","vmatrix","Vmatrix"],handler:function(e,t,i){var h={matrix:null,pmatrix:["(",")"],bmatrix:["[","]"],Bmatrix:["\\{","\\}"],vmatrix:["|","|"],Vmatrix:["\\Vert","\\Vert"]}[i];var a={type:"array",hskipBeforeAndAfter:false};a=p(this,e,t,a);if(h){a.result=new l("leftright",{body:[a.result],left:h[0],right:h[1]},t)}return a}},{names:["cases"],handler:function(e,t,i){var a={type:"array",arraystretch:1.2,cols:[{type:"align",align:"l",pregap:0,postgap:h.metrics.quad},{type:"align",align:"l",pregap:0,postgap:0}]};a=p(this,e,t,a);a.result=new l("leftright",{body:[a.result],left:"\\{",right:"."},t);return a}}];t.exports=function(){var e={};for(var t=0;t<c.length;++t){var i=c[t];i.greediness=1;i.allowedInText=!!i.allowedInText;i.numArgs=i.numArgs||0;i.numOptionalArgs=i.numOptionalArgs||0;for(var h=0;h<i.names.length;++h){e[i.names[h]]=i}}return e}()},{"./ParseError":5,"./fontMetrics":16,"./parseData":20}],16:[function(e,t,i){var h=e("./Style");var a=.025;var r=0;var l=0;var s=0;var p=.431;var c=1;var n=0;var o=.677;var g=.394;var d=.444;var w=.686;var u=.345;var k=.413;var m=.363;var f=.289;var v=.15;var y=.247;var x=.386;var b=.05;var z=2.39;var S=1.01;var M=.81;var q=.71;var A=.25;var T=0;var N=0;var C=0;var R=0;var E=.431;var P=1;var D=0;var L=.04;var O=.111;var I=.166;var B=.2;var F=.6;var _=.1;var V=10;var G=2/V;var H={xHeight:p,quad:c,num1:o,num2:g,num3:d,denom1:w,denom2:u,sup1:k,sup2:m,sup3:f,sub1:v,sub2:y,supDrop:x,subDrop:b,axisHeight:A,defaultRuleThickness:L,bigOpSpacing1:O,bigOpSpacing2:I,bigOpSpacing3:B,bigOpSpacing4:F,bigOpSpacing5:_,ptPerEm:V,emPerEx:p/c,doubleRuleSep:G,delim1:z,getDelim2:function(e){if(e.size===h.TEXT.size){return S}else if(e.size===h.SCRIPT.size){return M}else if(e.size===h.SCRIPTSCRIPT.size){return q}throw new Error("Unexpected style size: "+e.size)}};var X=e("./fontMetricsData");var U=function(e,t){return X[t][e.charCodeAt(0)]};t.exports={metrics:H,getCharacterMetrics:U}},{"./Style":8,"./fontMetricsData":17}],17:[function(e,t,i){t.exports={"AMS-Regular":{65:{depth:0,height:.68889,italic:0,skew:0},66:{depth:0,height:.68889,italic:0,skew:0},67:{depth:0,height:.68889,italic:0,skew:0},68:{depth:0,height:.68889,italic:0,skew:0},69:{depth:0,height:.68889,italic:0,skew:0},70:{depth:0,height:.68889,italic:0,skew:0},71:{depth:0,height:.68889,italic:0,skew:0},72:{depth:0,height:.68889,italic:0,skew:0},73:{depth:0,height:.68889,italic:0,skew:0},74:{depth:.16667,height:.68889,italic:0,skew:0},75:{depth:0,height:.68889,italic:0,skew:0},76:{depth:0,height:.68889,italic:0,skew:0},77:{depth:0,height:.68889,italic:0,skew:0},78:{depth:0,height:.68889,italic:0,skew:0},79:{depth:.16667,height:.68889,italic:0,skew:0},80:{depth:0,height:.68889,italic:0,skew:0},81:{depth:.16667,height:.68889,italic:0,skew:0},82:{depth:0,height:.68889,italic:0,skew:0},83:{depth:0,height:.68889,italic:0,skew:0},84:{depth:0,height:.68889,italic:0,skew:0},85:{depth:0,height:.68889,italic:0,skew:0},86:{depth:0,height:.68889,italic:0,skew:0},87:{depth:0,height:.68889,italic:0,skew:0},88:{depth:0,height:.68889,italic:0,skew:0},89:{depth:0,height:.68889,italic:0,skew:0},90:{depth:0,height:.68889,italic:0,skew:0},107:{depth:0,height:.68889,italic:0,skew:0},165:{depth:0,height:.675,italic:.025,skew:0},174:{depth:.15559,height:.69224,italic:0,skew:0},240:{depth:0,height:.68889,italic:0,skew:0},295:{depth:0,height:.68889,italic:0,skew:0},710:{depth:0,height:.825,italic:0,skew:0},732:{depth:0,height:.9,italic:0,skew:0},770:{depth:0,height:.825,italic:0,skew:0},771:{depth:0,height:.9,italic:0,skew:0},989:{depth:.08167,height:.58167,italic:0,skew:0},1008:{depth:0,height:.43056,italic:.04028,skew:0},8245:{depth:0,height:.54986,italic:0,skew:0},8463:{depth:0,height:.68889,italic:0,skew:0},8487:{depth:0,height:.68889,italic:0,skew:0},8498:{depth:0,height:.68889,italic:0,skew:0},8502:{depth:0,height:.68889,italic:0,skew:0},8503:{depth:0,height:.68889,italic:0,skew:0},8504:{depth:0,height:.68889,italic:0,skew:0},8513:{depth:0,height:.68889,italic:0,skew:0},8592:{depth:-.03598,height:.46402,italic:0,skew:0},8594:{depth:-.03598,height:.46402,italic:0,skew:0},8602:{depth:-.13313,height:.36687,italic:0,skew:0},8603:{depth:-.13313,height:.36687,italic:0,skew:0},8606:{depth:.01354,height:.52239,italic:0,skew:0},8608:{depth:.01354,height:.52239,italic:0,skew:0},8610:{depth:.01354,height:.52239,italic:0,skew:0},8611:{depth:.01354,height:.52239,italic:0,skew:0},8619:{depth:0,height:.54986,italic:0,skew:0},8620:{depth:0,height:.54986,italic:0,skew:0},8621:{depth:-.13313,height:.37788,italic:0,skew:0},8622:{depth:-.13313,height:.36687,italic:0,skew:0},8624:{depth:0,height:.69224,italic:0,skew:0},8625:{depth:0,height:.69224,italic:0,skew:0},8630:{depth:0,height:.43056,italic:0,skew:0},8631:{depth:0,height:.43056,italic:0,skew:0},8634:{depth:.08198,height:.58198,italic:0,skew:0},8635:{depth:.08198,height:.58198,italic:0,skew:0},8638:{depth:.19444,height:.69224,italic:0,skew:0},8639:{depth:.19444,height:.69224,italic:0,skew:0},8642:{depth:.19444,height:.69224,italic:0,skew:0},8643:{depth:.19444,height:.69224,italic:0,skew:0},8644:{depth:.1808,height:.675,italic:0,skew:0},8646:{depth:.1808,height:.675,italic:0,skew:0},8647:{depth:.1808,height:.675,italic:0,skew:0},8648:{depth:.19444,height:.69224,italic:0,skew:0},8649:{depth:.1808,height:.675,italic:0,skew:0},8650:{depth:.19444,height:.69224,italic:0,skew:0},8651:{depth:.01354,height:.52239,italic:0,skew:0},8652:{depth:.01354,height:.52239,italic:0,skew:0},8653:{depth:-.13313,height:.36687,italic:0,skew:0},8654:{depth:-.13313,height:.36687,italic:0,skew:0},8655:{depth:-.13313,height:.36687,italic:0,skew:0},8666:{depth:.13667,height:.63667,italic:0,skew:0},8667:{depth:.13667,height:.63667,italic:0,skew:0},8669:{depth:-.13313,height:.37788,italic:0,skew:0},8672:{depth:-.064,height:.437,italic:0,skew:0},8674:{depth:-.064,height:.437,italic:0,skew:0},8705:{depth:0,height:.825,italic:0,skew:0},8708:{depth:0,height:.68889,italic:0,skew:0},8709:{depth:.08167,height:.58167,italic:0,skew:0},8717:{depth:0,height:.43056,italic:0,skew:0},8722:{depth:-.03598,height:.46402,italic:0,skew:0},8724:{depth:.08198,height:.69224,italic:0,skew:0},8726:{depth:.08167,height:.58167,italic:0,skew:0},8733:{depth:0,height:.69224,italic:0,skew:0},8736:{depth:0,height:.69224,italic:0,skew:0},8737:{depth:0,height:.69224,italic:0,skew:0},8738:{depth:.03517,height:.52239,italic:0,skew:0},8739:{depth:.08167,height:.58167,italic:0,skew:0},8740:{depth:.25142,height:.74111,italic:0,skew:0},8741:{depth:.08167,height:.58167,italic:0,skew:0},8742:{depth:.25142,height:.74111,italic:0,skew:0},8756:{depth:0,height:.69224,italic:0,skew:0},8757:{depth:0,height:.69224,italic:0,skew:0},8764:{depth:-.13313,height:.36687,italic:0,skew:0},8765:{depth:-.13313,height:.37788,italic:0,skew:0},8769:{depth:-.13313,height:.36687,italic:0,skew:0},8770:{depth:-.03625,height:.46375,italic:0,skew:0},8774:{depth:.30274,height:.79383,italic:0,skew:0},8776:{depth:-.01688,height:.48312,italic:0,skew:0},8778:{depth:.08167,height:.58167,italic:0,skew:0},8782:{depth:.06062,height:.54986,italic:0,skew:0},8783:{depth:.06062,height:.54986,italic:0,skew:0},8785:{depth:.08198,height:.58198,italic:0,skew:0},8786:{depth:.08198,height:.58198,italic:0,skew:0},8787:{depth:.08198,height:.58198,italic:0,skew:0},8790:{depth:0,height:.69224,italic:0,skew:0},8791:{depth:.22958,height:.72958,italic:0,skew:0},8796:{depth:.08198,height:.91667,italic:0,skew:0},8806:{depth:.25583,height:.75583,italic:0,skew:0},8807:{depth:.25583,height:.75583,italic:0,skew:0},8808:{depth:.25142,height:.75726,italic:0,skew:0},8809:{depth:.25142,height:.75726,italic:0,skew:0},8812:{depth:.25583,height:.75583,italic:0,skew:0},8814:{depth:.20576,height:.70576,italic:0,skew:0},8815:{depth:.20576,height:.70576,italic:0,skew:0},8816:{depth:.30274,height:.79383,italic:0,skew:0},8817:{depth:.30274,height:.79383,italic:0,skew:0},8818:{depth:.22958,height:.72958,italic:0,skew:0},8819:{depth:.22958,height:.72958,italic:0,skew:0},8822:{depth:.1808,height:.675,italic:0,skew:0},8823:{depth:.1808,height:.675,italic:0,skew:0},8828:{depth:.13667,height:.63667,italic:0,skew:0},8829:{depth:.13667,height:.63667,italic:0,skew:0},8830:{depth:.22958,height:.72958,italic:0,skew:0},8831:{depth:.22958,height:.72958,italic:0,skew:0},8832:{depth:.20576,height:.70576,italic:0,skew:0},8833:{depth:.20576,height:.70576,italic:0,skew:0},8840:{depth:.30274,height:.79383,italic:0,skew:0},8841:{depth:.30274,height:.79383,italic:0,skew:0},8842:{depth:.13597,height:.63597,italic:0,skew:0},8843:{depth:.13597,height:.63597,italic:0,skew:0},8847:{depth:.03517,height:.54986,italic:0,skew:0},8848:{depth:.03517,height:.54986,italic:0,skew:0},8858:{depth:.08198,height:.58198,italic:0,skew:0},8859:{depth:.08198,height:.58198,italic:0,skew:0},8861:{depth:.08198,height:.58198,italic:0,skew:0},8862:{depth:0,height:.675,italic:0,skew:0},8863:{depth:0,height:.675,italic:0,skew:0},8864:{depth:0,height:.675,italic:0,skew:0},8865:{depth:0,height:.675,italic:0,skew:0},8872:{depth:0,height:.69224,italic:0,skew:0},8873:{depth:0,height:.69224,italic:0,skew:0},8874:{depth:0,height:.69224,italic:0,skew:0},8876:{depth:0,height:.68889,italic:0,skew:0},8877:{depth:0,height:.68889,italic:0,skew:0},8878:{depth:0,height:.68889,italic:0,skew:0},8879:{depth:0,height:.68889,italic:0,skew:0},8882:{depth:.03517,height:.54986,italic:0,skew:0},8883:{depth:.03517,height:.54986,italic:0,skew:0},8884:{depth:.13667,height:.63667,italic:0,skew:0},8885:{depth:.13667,height:.63667,italic:0,skew:0},8888:{depth:0,height:.54986,italic:0,skew:0},8890:{depth:.19444,height:.43056,italic:0,skew:0},8891:{depth:.19444,height:.69224,italic:0,skew:0},8892:{depth:.19444,height:.69224,italic:0,skew:0},8901:{depth:0,height:.54986,italic:0,skew:0},8903:{depth:.08167,height:.58167,italic:0,skew:0},8905:{depth:.08167,height:.58167,italic:0,skew:0},8906:{depth:.08167,height:.58167,italic:0,skew:0},8907:{depth:0,height:.69224,italic:0,skew:0},8908:{depth:0,height:.69224,italic:0,skew:0},8909:{depth:-.03598,height:.46402,italic:0,skew:0},8910:{depth:0,height:.54986,italic:0,skew:0},8911:{depth:0,height:.54986,italic:0,skew:0},8912:{depth:.03517,height:.54986,italic:0,skew:0},8913:{depth:.03517,height:.54986,italic:0,skew:0},8914:{depth:0,height:.54986,italic:0,skew:0},8915:{depth:0,height:.54986,italic:0,skew:0},8916:{depth:0,height:.69224,italic:0,skew:0},8918:{depth:.0391,height:.5391,italic:0,skew:0},8919:{depth:.0391,height:.5391,italic:0,skew:0},8920:{depth:.03517,height:.54986,italic:0,skew:0},8921:{depth:.03517,height:.54986,italic:0,skew:0},8922:{depth:.38569,height:.88569,italic:0,skew:0},8923:{depth:.38569,height:.88569,italic:0,skew:0},8926:{depth:.13667,height:.63667,italic:0,skew:0},8927:{depth:.13667,height:.63667,italic:0,skew:0},8928:{depth:.30274,height:.79383,italic:0,skew:0},8929:{depth:.30274,height:.79383,italic:0,skew:0},8934:{depth:.23222,height:.74111,italic:0,skew:0},8935:{depth:.23222,height:.74111,italic:0,skew:0},8936:{depth:.23222,height:.74111,italic:0,skew:0},8937:{depth:.23222,height:.74111,italic:0,skew:0},8938:{depth:.20576,height:.70576,italic:0,skew:0},8939:{depth:.20576,height:.70576,italic:0,skew:0},8940:{depth:.30274,height:.79383,italic:0,skew:0},8941:{depth:.30274,height:.79383,italic:0,skew:0},8994:{depth:.19444,height:.69224,italic:0,skew:0},8995:{depth:.19444,height:.69224,italic:0,skew:0},9416:{depth:.15559,height:.69224,italic:0,skew:0},9484:{depth:0,height:.69224,italic:0,skew:0},9488:{depth:0,height:.69224,italic:0,skew:0},9492:{depth:0,height:.37788,italic:0,skew:0},9496:{depth:0,height:.37788,italic:0,skew:0},9585:{depth:.19444,height:.68889,italic:0,skew:0},9586:{depth:.19444,height:.74111,italic:0,skew:0},9632:{depth:0,height:.675,italic:0,skew:0},9633:{depth:0,height:.675,italic:0,skew:0},9650:{depth:0,height:.54986,italic:0,skew:0},9651:{depth:0,height:.54986,italic:0,skew:0},9654:{depth:.03517,height:.54986,italic:0,skew:0},9660:{depth:0,height:.54986,italic:0,skew:0},9661:{depth:0,height:.54986,italic:0,skew:0},9664:{depth:.03517,height:.54986,italic:0,skew:0},9674:{depth:.11111,height:.69224,italic:0,skew:0},9733:{depth:.19444,height:.69224,italic:0,skew:0},10003:{depth:0,height:.69224,italic:0,skew:0},10016:{depth:0,height:.69224,italic:0,skew:0},10731:{depth:.11111,height:.69224,italic:0,skew:0},10846:{depth:.19444,height:.75583,italic:0,skew:0},10877:{depth:.13667,height:.63667,italic:0,skew:0},10878:{depth:.13667,height:.63667,italic:0,skew:0},10885:{depth:.25583,height:.75583,italic:0,skew:0},10886:{depth:.25583,height:.75583,italic:0,skew:0},10887:{depth:.13597,height:.63597,italic:0,skew:0},10888:{depth:.13597,height:.63597,italic:0,skew:0},10889:{depth:.26167,height:.75726,italic:0,skew:0},10890:{depth:.26167,height:.75726,italic:0,skew:0},10891:{depth:.48256,height:.98256,italic:0,skew:0},10892:{depth:.48256,height:.98256,italic:0,skew:0},10901:{depth:.13667,height:.63667,italic:0,skew:0},10902:{depth:.13667,height:.63667,italic:0,skew:0},10933:{depth:.25142,height:.75726,italic:0,skew:0},10934:{depth:.25142,height:.75726,italic:0,skew:0},10935:{depth:.26167,height:.75726,italic:0,skew:0},10936:{depth:.26167,height:.75726,italic:0,skew:0},10937:{depth:.26167,
-height:.75726,italic:0,skew:0},10938:{depth:.26167,height:.75726,italic:0,skew:0},10949:{depth:.25583,height:.75583,italic:0,skew:0},10950:{depth:.25583,height:.75583,italic:0,skew:0},10955:{depth:.28481,height:.79383,italic:0,skew:0},10956:{depth:.28481,height:.79383,italic:0,skew:0},57350:{depth:.08167,height:.58167,italic:0,skew:0},57351:{depth:.08167,height:.58167,italic:0,skew:0},57352:{depth:.08167,height:.58167,italic:0,skew:0},57353:{depth:0,height:.43056,italic:.04028,skew:0},57356:{depth:.25142,height:.75726,italic:0,skew:0},57357:{depth:.25142,height:.75726,italic:0,skew:0},57358:{depth:.41951,height:.91951,italic:0,skew:0},57359:{depth:.30274,height:.79383,italic:0,skew:0},57360:{depth:.30274,height:.79383,italic:0,skew:0},57361:{depth:.41951,height:.91951,italic:0,skew:0},57366:{depth:.25142,height:.75726,italic:0,skew:0},57367:{depth:.25142,height:.75726,italic:0,skew:0},57368:{depth:.25142,height:.75726,italic:0,skew:0},57369:{depth:.25142,height:.75726,italic:0,skew:0},57370:{depth:.13597,height:.63597,italic:0,skew:0},57371:{depth:.13597,height:.63597,italic:0,skew:0}},"Caligraphic-Regular":{48:{depth:0,height:.43056,italic:0,skew:0},49:{depth:0,height:.43056,italic:0,skew:0},50:{depth:0,height:.43056,italic:0,skew:0},51:{depth:.19444,height:.43056,italic:0,skew:0},52:{depth:.19444,height:.43056,italic:0,skew:0},53:{depth:.19444,height:.43056,italic:0,skew:0},54:{depth:0,height:.64444,italic:0,skew:0},55:{depth:.19444,height:.43056,italic:0,skew:0},56:{depth:0,height:.64444,italic:0,skew:0},57:{depth:.19444,height:.43056,italic:0,skew:0},65:{depth:0,height:.68333,italic:0,skew:.19445},66:{depth:0,height:.68333,italic:.03041,skew:.13889},67:{depth:0,height:.68333,italic:.05834,skew:.13889},68:{depth:0,height:.68333,italic:.02778,skew:.08334},69:{depth:0,height:.68333,italic:.08944,skew:.11111},70:{depth:0,height:.68333,italic:.09931,skew:.11111},71:{depth:.09722,height:.68333,italic:.0593,skew:.11111},72:{depth:0,height:.68333,italic:.00965,skew:.11111},73:{depth:0,height:.68333,italic:.07382,skew:0},74:{depth:.09722,height:.68333,italic:.18472,skew:.16667},75:{depth:0,height:.68333,italic:.01445,skew:.05556},76:{depth:0,height:.68333,italic:0,skew:.13889},77:{depth:0,height:.68333,italic:0,skew:.13889},78:{depth:0,height:.68333,italic:.14736,skew:.08334},79:{depth:0,height:.68333,italic:.02778,skew:.11111},80:{depth:0,height:.68333,italic:.08222,skew:.08334},81:{depth:.09722,height:.68333,italic:0,skew:.11111},82:{depth:0,height:.68333,italic:0,skew:.08334},83:{depth:0,height:.68333,italic:.075,skew:.13889},84:{depth:0,height:.68333,italic:.25417,skew:0},85:{depth:0,height:.68333,italic:.09931,skew:.08334},86:{depth:0,height:.68333,italic:.08222,skew:0},87:{depth:0,height:.68333,italic:.08222,skew:.08334},88:{depth:0,height:.68333,italic:.14643,skew:.13889},89:{depth:.09722,height:.68333,italic:.08222,skew:.08334},90:{depth:0,height:.68333,italic:.07944,skew:.13889}},"Fraktur-Regular":{33:{depth:0,height:.69141,italic:0,skew:0},34:{depth:0,height:.69141,italic:0,skew:0},38:{depth:0,height:.69141,italic:0,skew:0},39:{depth:0,height:.69141,italic:0,skew:0},40:{depth:.24982,height:.74947,italic:0,skew:0},41:{depth:.24982,height:.74947,italic:0,skew:0},42:{depth:0,height:.62119,italic:0,skew:0},43:{depth:.08319,height:.58283,italic:0,skew:0},44:{depth:0,height:.10803,italic:0,skew:0},45:{depth:.08319,height:.58283,italic:0,skew:0},46:{depth:0,height:.10803,italic:0,skew:0},47:{depth:.24982,height:.74947,italic:0,skew:0},48:{depth:0,height:.47534,italic:0,skew:0},49:{depth:0,height:.47534,italic:0,skew:0},50:{depth:0,height:.47534,italic:0,skew:0},51:{depth:.18906,height:.47534,italic:0,skew:0},52:{depth:.18906,height:.47534,italic:0,skew:0},53:{depth:.18906,height:.47534,italic:0,skew:0},54:{depth:0,height:.69141,italic:0,skew:0},55:{depth:.18906,height:.47534,italic:0,skew:0},56:{depth:0,height:.69141,italic:0,skew:0},57:{depth:.18906,height:.47534,italic:0,skew:0},58:{depth:0,height:.47534,italic:0,skew:0},59:{depth:.12604,height:.47534,italic:0,skew:0},61:{depth:-.13099,height:.36866,italic:0,skew:0},63:{depth:0,height:.69141,italic:0,skew:0},65:{depth:0,height:.69141,italic:0,skew:0},66:{depth:0,height:.69141,italic:0,skew:0},67:{depth:0,height:.69141,italic:0,skew:0},68:{depth:0,height:.69141,italic:0,skew:0},69:{depth:0,height:.69141,italic:0,skew:0},70:{depth:.12604,height:.69141,italic:0,skew:0},71:{depth:0,height:.69141,italic:0,skew:0},72:{depth:.06302,height:.69141,italic:0,skew:0},73:{depth:0,height:.69141,italic:0,skew:0},74:{depth:.12604,height:.69141,italic:0,skew:0},75:{depth:0,height:.69141,italic:0,skew:0},76:{depth:0,height:.69141,italic:0,skew:0},77:{depth:0,height:.69141,italic:0,skew:0},78:{depth:0,height:.69141,italic:0,skew:0},79:{depth:0,height:.69141,italic:0,skew:0},80:{depth:.18906,height:.69141,italic:0,skew:0},81:{depth:.03781,height:.69141,italic:0,skew:0},82:{depth:0,height:.69141,italic:0,skew:0},83:{depth:0,height:.69141,italic:0,skew:0},84:{depth:0,height:.69141,italic:0,skew:0},85:{depth:0,height:.69141,italic:0,skew:0},86:{depth:0,height:.69141,italic:0,skew:0},87:{depth:0,height:.69141,italic:0,skew:0},88:{depth:0,height:.69141,italic:0,skew:0},89:{depth:.18906,height:.69141,italic:0,skew:0},90:{depth:.12604,height:.69141,italic:0,skew:0},91:{depth:.24982,height:.74947,italic:0,skew:0},93:{depth:.24982,height:.74947,italic:0,skew:0},94:{depth:0,height:.69141,italic:0,skew:0},97:{depth:0,height:.47534,italic:0,skew:0},98:{depth:0,height:.69141,italic:0,skew:0},99:{depth:0,height:.47534,italic:0,skew:0},100:{depth:0,height:.62119,italic:0,skew:0},101:{depth:0,height:.47534,italic:0,skew:0},102:{depth:.18906,height:.69141,italic:0,skew:0},103:{depth:.18906,height:.47534,italic:0,skew:0},104:{depth:.18906,height:.69141,italic:0,skew:0},105:{depth:0,height:.69141,italic:0,skew:0},106:{depth:0,height:.69141,italic:0,skew:0},107:{depth:0,height:.69141,italic:0,skew:0},108:{depth:0,height:.69141,italic:0,skew:0},109:{depth:0,height:.47534,italic:0,skew:0},110:{depth:0,height:.47534,italic:0,skew:0},111:{depth:0,height:.47534,italic:0,skew:0},112:{depth:.18906,height:.52396,italic:0,skew:0},113:{depth:.18906,height:.47534,italic:0,skew:0},114:{depth:0,height:.47534,italic:0,skew:0},115:{depth:0,height:.47534,italic:0,skew:0},116:{depth:0,height:.62119,italic:0,skew:0},117:{depth:0,height:.47534,italic:0,skew:0},118:{depth:0,height:.52396,italic:0,skew:0},119:{depth:0,height:.52396,italic:0,skew:0},120:{depth:.18906,height:.47534,italic:0,skew:0},121:{depth:.18906,height:.47534,italic:0,skew:0},122:{depth:.18906,height:.47534,italic:0,skew:0},8216:{depth:0,height:.69141,italic:0,skew:0},8217:{depth:0,height:.69141,italic:0,skew:0},58112:{depth:0,height:.62119,italic:0,skew:0},58113:{depth:0,height:.62119,italic:0,skew:0},58114:{depth:.18906,height:.69141,italic:0,skew:0},58115:{depth:.18906,height:.69141,italic:0,skew:0},58116:{depth:.18906,height:.47534,italic:0,skew:0},58117:{depth:0,height:.69141,italic:0,skew:0},58118:{depth:0,height:.62119,italic:0,skew:0},58119:{depth:0,height:.47534,italic:0,skew:0}},"Main-Bold":{33:{depth:0,height:.69444,italic:0,skew:0},34:{depth:0,height:.69444,italic:0,skew:0},35:{depth:.19444,height:.69444,italic:0,skew:0},36:{depth:.05556,height:.75,italic:0,skew:0},37:{depth:.05556,height:.75,italic:0,skew:0},38:{depth:0,height:.69444,italic:0,skew:0},39:{depth:0,height:.69444,italic:0,skew:0},40:{depth:.25,height:.75,italic:0,skew:0},41:{depth:.25,height:.75,italic:0,skew:0},42:{depth:0,height:.75,italic:0,skew:0},43:{depth:.13333,height:.63333,italic:0,skew:0},44:{depth:.19444,height:.15556,italic:0,skew:0},45:{depth:0,height:.44444,italic:0,skew:0},46:{depth:0,height:.15556,italic:0,skew:0},47:{depth:.25,height:.75,italic:0,skew:0},48:{depth:0,height:.64444,italic:0,skew:0},49:{depth:0,height:.64444,italic:0,skew:0},50:{depth:0,height:.64444,italic:0,skew:0},51:{depth:0,height:.64444,italic:0,skew:0},52:{depth:0,height:.64444,italic:0,skew:0},53:{depth:0,height:.64444,italic:0,skew:0},54:{depth:0,height:.64444,italic:0,skew:0},55:{depth:0,height:.64444,italic:0,skew:0},56:{depth:0,height:.64444,italic:0,skew:0},57:{depth:0,height:.64444,italic:0,skew:0},58:{depth:0,height:.44444,italic:0,skew:0},59:{depth:.19444,height:.44444,italic:0,skew:0},60:{depth:.08556,height:.58556,italic:0,skew:0},61:{depth:-.10889,height:.39111,italic:0,skew:0},62:{depth:.08556,height:.58556,italic:0,skew:0},63:{depth:0,height:.69444,italic:0,skew:0},64:{depth:0,height:.69444,italic:0,skew:0},65:{depth:0,height:.68611,italic:0,skew:0},66:{depth:0,height:.68611,italic:0,skew:0},67:{depth:0,height:.68611,italic:0,skew:0},68:{depth:0,height:.68611,italic:0,skew:0},69:{depth:0,height:.68611,italic:0,skew:0},70:{depth:0,height:.68611,italic:0,skew:0},71:{depth:0,height:.68611,italic:0,skew:0},72:{depth:0,height:.68611,italic:0,skew:0},73:{depth:0,height:.68611,italic:0,skew:0},74:{depth:0,height:.68611,italic:0,skew:0},75:{depth:0,height:.68611,italic:0,skew:0},76:{depth:0,height:.68611,italic:0,skew:0},77:{depth:0,height:.68611,italic:0,skew:0},78:{depth:0,height:.68611,italic:0,skew:0},79:{depth:0,height:.68611,italic:0,skew:0},80:{depth:0,height:.68611,italic:0,skew:0},81:{depth:.19444,height:.68611,italic:0,skew:0},82:{depth:0,height:.68611,italic:0,skew:0},83:{depth:0,height:.68611,italic:0,skew:0},84:{depth:0,height:.68611,italic:0,skew:0},85:{depth:0,height:.68611,italic:0,skew:0},86:{depth:0,height:.68611,italic:.01597,skew:0},87:{depth:0,height:.68611,italic:.01597,skew:0},88:{depth:0,height:.68611,italic:0,skew:0},89:{depth:0,height:.68611,italic:.02875,skew:0},90:{depth:0,height:.68611,italic:0,skew:0},91:{depth:.25,height:.75,italic:0,skew:0},92:{depth:.25,height:.75,italic:0,skew:0},93:{depth:.25,height:.75,italic:0,skew:0},94:{depth:0,height:.69444,italic:0,skew:0},95:{depth:.31,height:.13444,italic:.03194,skew:0},96:{depth:0,height:.69444,italic:0,skew:0},97:{depth:0,height:.44444,italic:0,skew:0},98:{depth:0,height:.69444,italic:0,skew:0},99:{depth:0,height:.44444,italic:0,skew:0},100:{depth:0,height:.69444,italic:0,skew:0},101:{depth:0,height:.44444,italic:0,skew:0},102:{depth:0,height:.69444,italic:.10903,skew:0},103:{depth:.19444,height:.44444,italic:.01597,skew:0},104:{depth:0,height:.69444,italic:0,skew:0},105:{depth:0,height:.69444,italic:0,skew:0},106:{depth:.19444,height:.69444,italic:0,skew:0},107:{depth:0,height:.69444,italic:0,skew:0},108:{depth:0,height:.69444,italic:0,skew:0},109:{depth:0,height:.44444,italic:0,skew:0},110:{depth:0,height:.44444,italic:0,skew:0},111:{depth:0,height:.44444,italic:0,skew:0},112:{depth:.19444,height:.44444,italic:0,skew:0},113:{depth:.19444,height:.44444,italic:0,skew:0},114:{depth:0,height:.44444,italic:0,skew:0},115:{depth:0,height:.44444,italic:0,skew:0},116:{depth:0,height:.63492,italic:0,skew:0},117:{depth:0,height:.44444,italic:0,skew:0},118:{depth:0,height:.44444,italic:.01597,skew:0},119:{depth:0,height:.44444,italic:.01597,skew:0},120:{depth:0,height:.44444,italic:0,skew:0},121:{depth:.19444,height:.44444,italic:.01597,skew:0},122:{depth:0,height:.44444,italic:0,skew:0},123:{depth:.25,height:.75,italic:0,skew:0},124:{depth:.25,height:.75,italic:0,skew:0},125:{depth:.25,height:.75,italic:0,skew:0},126:{depth:.35,height:.34444,italic:0,skew:0},168:{depth:0,height:.69444,italic:0,skew:0},172:{depth:0,height:.44444,italic:0,skew:0},175:{depth:0,height:.59611,italic:0,skew:0},176:{depth:0,height:.69444,italic:0,skew:0},177:{depth:.13333,height:.63333,italic:0,skew:0},180:{depth:0,height:.69444,italic:0,skew:0},215:{depth:.13333,height:.63333,italic:0,skew:0},247:{depth:.13333,height:.63333,italic:0,skew:0},305:{depth:0,height:.44444,italic:0,skew:0},567:{depth:.19444,height:.44444,italic:0,skew:0},710:{depth:0,height:.69444,italic:0,skew:0},711:{depth:0,height:.63194,italic:0,skew:0},713:{depth:0,height:.59611,italic:0,skew:0},714:{depth:0,height:.69444,italic:0,skew:0},715:{depth:0,height:.69444,italic:0,skew:0},728:{depth:0,height:.69444,italic:0,skew:0},729:{depth:0,height:.69444,italic:0,skew:0},730:{depth:0,height:.69444,italic:0,skew:0},732:{depth:0,height:.69444,italic:0,skew:0},768:{depth:0,height:.69444,italic:0,skew:0},769:{depth:0,height:.69444,italic:0,skew:0},770:{depth:0,height:.69444,italic:0,skew:0},771:{depth:0,height:.69444,italic:0,skew:0},772:{depth:0,height:.59611,italic:0,skew:0},774:{depth:0,height:.69444,italic:0,skew:0},775:{depth:0,height:.69444,italic:0,skew:0},776:{depth:0,height:.69444,italic:0,skew:0},778:{depth:0,height:.69444,italic:0,skew:0},779:{depth:0,height:.69444,italic:0,skew:0},780:{depth:0,height:.63194,italic:0,skew:0},824:{depth:.19444,height:.69444,italic:0,skew:0},915:{depth:0,height:.68611,italic:0,skew:0},916:{depth:0,height:.68611,italic:0,skew:0},920:{depth:0,height:.68611,italic:0,skew:0},923:{depth:0,height:.68611,italic:0,skew:0},926:{depth:0,height:.68611,italic:0,skew:0},928:{depth:0,height:.68611,italic:0,skew:0},931:{depth:0,height:.68611,italic:0,skew:0},933:{depth:0,height:.68611,italic:0,skew:0},934:{depth:0,height:.68611,italic:0,skew:0},936:{depth:0,height:.68611,italic:0,skew:0},937:{depth:0,height:.68611,italic:0,skew:0},8211:{depth:0,height:.44444,italic:.03194,skew:0},8212:{depth:0,height:.44444,italic:.03194,skew:0},8216:{depth:0,height:.69444,italic:0,skew:0},8217:{depth:0,height:.69444,italic:0,skew:0},8220:{depth:0,height:.69444,italic:0,skew:0},8221:{depth:0,height:.69444,italic:0,skew:0},8224:{depth:.19444,height:.69444,italic:0,skew:0},8225:{depth:.19444,height:.69444,italic:0,skew:0},8242:{depth:0,height:.55556,italic:0,skew:0},8407:{depth:0,height:.72444,italic:.15486,skew:0},8463:{depth:0,height:.69444,italic:0,skew:0},8465:{depth:0,height:.69444,italic:0,skew:0},8467:{depth:0,height:.69444,italic:0,skew:0},8472:{depth:.19444,height:.44444,italic:0,skew:0},8476:{depth:0,height:.69444,italic:0,skew:0},8501:{depth:0,height:.69444,italic:0,skew:0},8592:{depth:-.10889,height:.39111,italic:0,skew:0},8593:{depth:.19444,height:.69444,italic:0,skew:0},8594:{depth:-.10889,height:.39111,italic:0,skew:0},8595:{depth:.19444,height:.69444,italic:0,skew:0},8596:{depth:-.10889,height:.39111,italic:0,skew:0},8597:{depth:.25,height:.75,italic:0,skew:0},8598:{depth:.19444,height:.69444,italic:0,skew:0},8599:{depth:.19444,height:.69444,italic:0,skew:0},8600:{depth:.19444,height:.69444,italic:0,skew:0},8601:{depth:.19444,height:.69444,italic:0,skew:0},8636:{depth:-.10889,height:.39111,italic:0,skew:0},8637:{depth:-.10889,height:.39111,italic:0,skew:0},8640:{depth:-.10889,height:.39111,italic:0,skew:0},8641:{depth:-.10889,height:.39111,italic:0,skew:0},8656:{depth:-.10889,height:.39111,italic:0,skew:0},8657:{depth:.19444,height:.69444,italic:0,skew:0},8658:{depth:-.10889,height:.39111,italic:0,skew:0},8659:{depth:.19444,height:.69444,italic:0,skew:0},8660:{depth:-.10889,height:.39111,italic:0,skew:0},8661:{depth:.25,height:.75,italic:0,skew:0},8704:{depth:0,height:.69444,italic:0,skew:0},8706:{depth:0,height:.69444,italic:.06389,skew:0},8707:{depth:0,height:.69444,italic:0,skew:0},8709:{depth:.05556,height:.75,italic:0,skew:0},8711:{depth:0,height:.68611,italic:0,skew:0},8712:{depth:.08556,height:.58556,italic:0,skew:0},8715:{depth:.08556,height:.58556,italic:0,skew:0},8722:{depth:.13333,height:.63333,italic:0,skew:0},8723:{depth:.13333,height:.63333,italic:0,skew:0},8725:{depth:.25,height:.75,italic:0,skew:0},8726:{depth:.25,height:.75,italic:0,skew:0},8727:{depth:-.02778,height:.47222,italic:0,skew:0},8728:{depth:-.02639,height:.47361,italic:0,skew:0},8729:{depth:-.02639,height:.47361,italic:0,skew:0},8730:{depth:.18,height:.82,italic:0,skew:0},8733:{depth:0,height:.44444,italic:0,skew:0},8734:{depth:0,height:.44444,italic:0,skew:0},8736:{depth:0,height:.69224,italic:0,skew:0},8739:{depth:.25,height:.75,italic:0,skew:0},8741:{depth:.25,height:.75,italic:0,skew:0},8743:{depth:0,height:.55556,italic:0,skew:0},8744:{depth:0,height:.55556,italic:0,skew:0},8745:{depth:0,height:.55556,italic:0,skew:0},8746:{depth:0,height:.55556,italic:0,skew:0},8747:{depth:.19444,height:.69444,italic:.12778,skew:0},8764:{depth:-.10889,height:.39111,italic:0,skew:0},8768:{depth:.19444,height:.69444,italic:0,skew:0},8771:{depth:.00222,height:.50222,italic:0,skew:0},8776:{depth:.02444,height:.52444,italic:0,skew:0},8781:{depth:.00222,height:.50222,italic:0,skew:0},8801:{depth:.00222,height:.50222,italic:0,skew:0},8804:{depth:.19667,height:.69667,italic:0,skew:0},8805:{depth:.19667,height:.69667,italic:0,skew:0},8810:{depth:.08556,height:.58556,italic:0,skew:0},8811:{depth:.08556,height:.58556,italic:0,skew:0},8826:{depth:.08556,height:.58556,italic:0,skew:0},8827:{depth:.08556,height:.58556,italic:0,skew:0},8834:{depth:.08556,height:.58556,italic:0,skew:0},8835:{depth:.08556,height:.58556,italic:0,skew:0},8838:{depth:.19667,height:.69667,italic:0,skew:0},8839:{depth:.19667,height:.69667,italic:0,skew:0},8846:{depth:0,height:.55556,italic:0,skew:0},8849:{depth:.19667,height:.69667,italic:0,skew:0},8850:{depth:.19667,height:.69667,italic:0,skew:0},8851:{depth:0,height:.55556,italic:0,skew:0},8852:{depth:0,height:.55556,italic:0,skew:0},8853:{depth:.13333,height:.63333,italic:0,skew:0},8854:{depth:.13333,height:.63333,italic:0,skew:0},8855:{depth:.13333,height:.63333,italic:0,skew:0},8856:{depth:.13333,height:.63333,italic:0,skew:0},8857:{depth:.13333,height:.63333,italic:0,skew:0},8866:{depth:0,height:.69444,italic:0,skew:0},8867:{depth:0,height:.69444,italic:0,skew:0},8868:{depth:0,height:.69444,italic:0,skew:0},8869:{depth:0,height:.69444,italic:0,skew:0},8900:{depth:-.02639,height:.47361,italic:0,skew:0},8901:{depth:-.02639,height:.47361,italic:0,skew:0},8902:{depth:-.02778,height:.47222,italic:0,skew:0},8968:{depth:.25,height:.75,italic:0,skew:0},8969:{depth:.25,height:.75,italic:0,skew:0},8970:{depth:.25,height:.75,italic:0,skew:0},8971:{depth:.25,height:.75,italic:0,skew:0},8994:{depth:-.13889,height:.36111,italic:0,skew:0},8995:{depth:-.13889,height:.36111,italic:0,skew:0},9651:{depth:.19444,height:.69444,italic:0,skew:0},9657:{depth:-.02778,height:.47222,italic:0,skew:0},9661:{depth:.19444,height:.69444,italic:0,skew:0},9667:{depth:-.02778,height:.47222,italic:0,skew:0},9711:{depth:.19444,height:.69444,italic:0,skew:0},9824:{depth:.12963,height:.69444,italic:0,skew:0},9825:{depth:.12963,height:.69444,italic:0,skew:0},9826:{depth:.12963,height:.69444,italic:0,skew:0},9827:{depth:.12963,height:.69444,italic:0,skew:0},9837:{depth:0,height:.75,italic:0,skew:0},9838:{depth:.19444,height:.69444,italic:0,skew:0},9839:{depth:.19444,height:.69444,italic:0,skew:0},10216:{depth:.25,height:.75,italic:0,skew:0},10217:{depth:.25,height:.75,italic:0,skew:0},10815:{depth:0,height:.68611,italic:0,skew:0},10927:{depth:.19667,height:.69667,italic:0,skew:0},10928:{depth:.19667,height:.69667,italic:0,skew:0}},"Main-Italic":{33:{depth:0,height:.69444,italic:.12417,skew:0},34:{depth:0,height:.69444,italic:.06961,skew:0},35:{depth:.19444,height:.69444,italic:.06616,skew:0},37:{depth:.05556,height:.75,italic:.13639,skew:0},38:{depth:0,height:.69444,italic:.09694,skew:0},39:{depth:0,height:.69444,italic:.12417,skew:0},40:{depth:.25,height:.75,italic:.16194,skew:0},41:{depth:.25,height:.75,italic:.03694,skew:0},42:{depth:0,height:.75,italic:.14917,skew:0},43:{depth:.05667,height:.56167,italic:.03694,skew:0},44:{depth:.19444,height:.10556,italic:0,skew:0},45:{depth:0,height:.43056,italic:.02826,skew:0},46:{depth:0,height:.10556,italic:0,skew:0},47:{depth:.25,height:.75,italic:.16194,skew:0},48:{depth:0,height:.64444,italic:.13556,skew:0},49:{depth:0,height:.64444,italic:.13556,skew:0},50:{depth:0,height:.64444,italic:.13556,skew:0},51:{depth:0,height:.64444,italic:.13556,skew:0},52:{depth:.19444,height:.64444,italic:.13556,skew:0},53:{depth:0,height:.64444,italic:.13556,skew:0},54:{depth:0,height:.64444,italic:.13556,skew:0},55:{depth:.19444,height:.64444,italic:.13556,skew:0},56:{depth:0,height:.64444,italic:.13556,skew:0},57:{depth:0,height:.64444,italic:.13556,skew:0},58:{depth:0,height:.43056,italic:.0582,skew:0},59:{depth:.19444,height:.43056,italic:.0582,skew:0},61:{depth:-.13313,height:.36687,italic:.06616,skew:0},63:{depth:0,height:.69444,italic:.1225,skew:0},64:{depth:0,height:.69444,italic:.09597,skew:0},65:{depth:0,height:.68333,italic:0,skew:0},66:{depth:0,height:.68333,italic:.10257,skew:0},67:{depth:0,height:.68333,italic:.14528,skew:0},68:{depth:0,height:.68333,italic:.09403,skew:0},69:{depth:0,height:.68333,italic:.12028,skew:0},70:{depth:0,height:.68333,italic:.13305,skew:0},71:{depth:0,height:.68333,italic:.08722,skew:0},72:{depth:0,height:.68333,italic:.16389,skew:0},73:{depth:0,height:.68333,italic:.15806,skew:0},74:{depth:0,height:.68333,italic:.14028,skew:0},75:{depth:0,height:.68333,italic:.14528,skew:0},76:{depth:0,height:.68333,italic:0,skew:0},77:{depth:0,height:.68333,italic:.16389,skew:0},78:{depth:0,height:.68333,italic:.16389,skew:0},79:{depth:0,height:.68333,italic:.09403,skew:0},80:{depth:0,height:.68333,italic:.10257,skew:0},81:{depth:.19444,height:.68333,italic:.09403,skew:0},82:{depth:0,height:.68333,italic:.03868,skew:0},83:{depth:0,height:.68333,italic:.11972,skew:0},84:{depth:0,height:.68333,italic:.13305,skew:0},85:{depth:0,height:.68333,italic:.16389,skew:0},86:{depth:0,height:.68333,italic:.18361,skew:0},87:{depth:0,height:.68333,italic:.18361,skew:0},88:{depth:0,height:.68333,italic:.15806,skew:0},89:{depth:0,height:.68333,italic:.19383,skew:0},90:{depth:0,height:.68333,italic:.14528,skew:0},91:{depth:.25,height:.75,italic:.1875,skew:0},93:{depth:.25,height:.75,italic:.10528,skew:0},94:{depth:0,height:.69444,italic:.06646,skew:0},95:{depth:.31,height:.12056,italic:.09208,skew:0},97:{depth:0,height:.43056,italic:.07671,skew:0},98:{depth:0,height:.69444,italic:.06312,skew:0},99:{depth:0,height:.43056,italic:.05653,skew:0},100:{depth:0,height:.69444,italic:.10333,skew:0},101:{depth:0,height:.43056,italic:.07514,skew:0},102:{depth:.19444,height:.69444,italic:.21194,skew:0},103:{depth:.19444,height:.43056,italic:.08847,skew:0},104:{depth:0,height:.69444,italic:.07671,skew:0},105:{depth:0,height:.65536,italic:.1019,skew:0},106:{depth:.19444,height:.65536,italic:.14467,skew:0},107:{depth:0,height:.69444,italic:.10764,skew:0},108:{depth:0,height:.69444,italic:.10333,skew:0},109:{depth:0,height:.43056,italic:.07671,skew:0},110:{depth:0,height:.43056,italic:.07671,skew:0},111:{depth:0,height:.43056,italic:.06312,skew:0},112:{depth:.19444,height:.43056,italic:.06312,skew:0},113:{depth:.19444,height:.43056,italic:.08847,skew:0},114:{depth:0,height:.43056,italic:.10764,skew:0},115:{depth:0,height:.43056,italic:.08208,skew:0},116:{depth:0,height:.61508,italic:.09486,skew:0},117:{depth:0,height:.43056,italic:.07671,skew:0},118:{depth:0,height:.43056,italic:.10764,skew:0},119:{depth:0,height:.43056,italic:.10764,skew:0},120:{depth:0,height:.43056,italic:.12042,skew:0},121:{depth:.19444,height:.43056,italic:.08847,skew:0},122:{depth:0,height:.43056,italic:.12292,skew:0},126:{depth:.35,height:.31786,italic:.11585,skew:0},163:{depth:0,height:.69444,italic:0,skew:0},305:{depth:0,height:.43056,italic:0,skew:.02778},567:{depth:.19444,height:.43056,italic:0,skew:.08334},768:{depth:0,height:.69444,italic:0,skew:0},769:{depth:0,height:.69444,italic:.09694,skew:0},770:{depth:0,height:.69444,italic:.06646,skew:0},771:{depth:0,height:.66786,italic:.11585,skew:0},772:{depth:0,height:.56167,italic:.10333,skew:0},774:{depth:0,height:.69444,italic:.10806,skew:0},775:{depth:0,height:.66786,italic:.11752,skew:0},776:{depth:0,height:.66786,italic:.10474,skew:0},778:{depth:0,height:.69444,italic:0,skew:0},779:{depth:0,height:.69444,italic:.1225,skew:0},780:{depth:0,height:.62847,italic:.08295,skew:0},915:{depth:0,height:.68333,italic:.13305,skew:0},916:{depth:0,height:.68333,italic:0,skew:0},920:{depth:0,height:.68333,italic:.09403,skew:0},923:{depth:0,height:.68333,italic:0,skew:0},926:{depth:0,height:.68333,italic:.15294,skew:0},928:{depth:0,height:.68333,italic:.16389,skew:0},931:{depth:0,height:.68333,italic:.12028,skew:0},933:{depth:0,height:.68333,italic:.11111,skew:0},934:{depth:0,height:.68333,italic:.05986,skew:0},936:{depth:0,height:.68333,italic:.11111,skew:0},937:{depth:0,height:.68333,italic:.10257,skew:0},8211:{depth:0,height:.43056,italic:.09208,skew:0},8212:{depth:0,height:.43056,italic:.09208,skew:0},8216:{depth:0,height:.69444,italic:.12417,skew:0},8217:{depth:0,height:.69444,italic:.12417,skew:0},8220:{depth:0,height:.69444,italic:.1685,skew:0},8221:{depth:0,height:.69444,italic:.06961,skew:0},8463:{depth:0,height:.68889,italic:0,skew:0}},"Main-Regular":{32:{depth:0,height:0,italic:0,skew:0},33:{depth:0,height:.69444,italic:0,skew:0},34:{depth:0,height:.69444,italic:0,skew:0},35:{depth:.19444,height:.69444,italic:0,skew:0},36:{depth:.05556,height:.75,italic:0,skew:0},37:{depth:.05556,height:.75,italic:0,skew:0},38:{depth:0,height:.69444,italic:0,skew:0},39:{depth:0,height:.69444,italic:0,skew:0},40:{depth:.25,height:.75,italic:0,skew:0},41:{depth:.25,height:.75,italic:0,skew:0},42:{depth:0,height:.75,italic:0,skew:0},43:{depth:.08333,height:.58333,italic:0,skew:0},44:{depth:.19444,height:.10556,italic:0,skew:0},45:{depth:0,height:.43056,italic:0,skew:0},46:{depth:0,height:.10556,italic:0,skew:0},47:{depth:.25,height:.75,italic:0,skew:0},48:{depth:0,height:.64444,italic:0,skew:0},49:{depth:0,height:.64444,italic:0,skew:0},50:{depth:0,height:.64444,italic:0,skew:0},51:{depth:0,height:.64444,italic:0,skew:0},52:{depth:0,height:.64444,italic:0,skew:0},53:{depth:0,height:.64444,italic:0,skew:0},54:{depth:0,height:.64444,italic:0,skew:0},55:{depth:0,height:.64444,italic:0,skew:0},56:{depth:0,height:.64444,italic:0,skew:0},57:{depth:0,height:.64444,italic:0,skew:0},58:{depth:0,height:.43056,italic:0,skew:0},59:{depth:.19444,height:.43056,italic:0,skew:0},60:{depth:.0391,height:.5391,italic:0,skew:0},61:{depth:-.13313,height:.36687,italic:0,skew:0},62:{depth:.0391,height:.5391,italic:0,skew:0},63:{depth:0,height:.69444,italic:0,skew:0},64:{depth:0,height:.69444,italic:0,skew:0},65:{depth:0,height:.68333,italic:0,skew:0},66:{depth:0,height:.68333,italic:0,skew:0},67:{depth:0,height:.68333,italic:0,skew:0},68:{depth:0,height:.68333,italic:0,skew:0},69:{depth:0,height:.68333,italic:0,skew:0},70:{depth:0,height:.68333,italic:0,skew:0},71:{depth:0,height:.68333,italic:0,skew:0},72:{depth:0,height:.68333,italic:0,skew:0},73:{depth:0,height:.68333,italic:0,skew:0},74:{depth:0,height:.68333,italic:0,skew:0},75:{depth:0,height:.68333,italic:0,skew:0},76:{depth:0,height:.68333,italic:0,skew:0},77:{depth:0,height:.68333,italic:0,skew:0},78:{depth:0,height:.68333,italic:0,skew:0},79:{depth:0,height:.68333,italic:0,skew:0},80:{depth:0,height:.68333,italic:0,skew:0},81:{depth:.19444,height:.68333,italic:0,skew:0},82:{depth:0,height:.68333,italic:0,skew:0},83:{depth:0,height:.68333,italic:0,skew:0},84:{depth:0,height:.68333,italic:0,skew:0},85:{depth:0,height:.68333,italic:0,skew:0},86:{depth:0,height:.68333,italic:.01389,skew:0},87:{depth:0,height:.68333,italic:.01389,skew:0},88:{depth:0,height:.68333,italic:0,skew:0},89:{depth:0,height:.68333,italic:.025,skew:0},90:{depth:0,height:.68333,italic:0,skew:0},91:{depth:.25,height:.75,italic:0,skew:0},92:{depth:.25,height:.75,italic:0,skew:0},93:{depth:.25,height:.75,italic:0,skew:0},94:{depth:0,height:.69444,italic:0,skew:0},95:{depth:.31,height:.12056,italic:.02778,skew:0},96:{depth:0,height:.69444,italic:0,skew:0},97:{depth:0,height:.43056,italic:0,skew:0},98:{depth:0,height:.69444,italic:0,skew:0},99:{depth:0,height:.43056,italic:0,skew:0},100:{depth:0,height:.69444,italic:0,skew:0},101:{depth:0,height:.43056,italic:0,skew:0},102:{depth:0,height:.69444,italic:.07778,skew:0},103:{depth:.19444,height:.43056,italic:.01389,skew:0},104:{depth:0,height:.69444,italic:0,skew:0},105:{depth:0,height:.66786,italic:0,skew:0},106:{depth:.19444,height:.66786,italic:0,skew:0},107:{depth:0,height:.69444,italic:0,skew:0},108:{depth:0,height:.69444,italic:0,skew:0},109:{depth:0,height:.43056,italic:0,skew:0},110:{depth:0,height:.43056,italic:0,skew:0},111:{depth:0,height:.43056,italic:0,skew:0},112:{depth:.19444,height:.43056,italic:0,skew:0},113:{depth:.19444,height:.43056,italic:0,skew:0},114:{depth:0,height:.43056,italic:0,skew:0},115:{depth:0,height:.43056,italic:0,skew:0},116:{depth:0,height:.61508,italic:0,skew:0},117:{depth:0,height:.43056,italic:0,skew:0},118:{depth:0,height:.43056,italic:.01389,skew:0},119:{depth:0,height:.43056,italic:.01389,skew:0},120:{depth:0,height:.43056,italic:0,skew:0},121:{depth:.19444,height:.43056,italic:.01389,skew:0},122:{depth:0,height:.43056,italic:0,skew:0},123:{depth:.25,height:.75,italic:0,skew:0},124:{depth:.25,height:.75,italic:0,skew:0},125:{depth:.25,height:.75,italic:0,skew:0},126:{depth:.35,height:.31786,italic:0,skew:0},160:{depth:0,height:0,italic:0,skew:0},168:{depth:0,height:.66786,italic:0,skew:0},172:{depth:0,height:.43056,italic:0,skew:0},175:{depth:0,height:.56778,italic:0,skew:0},176:{depth:0,height:.69444,italic:0,skew:0},177:{depth:.08333,height:.58333,italic:0,skew:0},180:{depth:0,height:.69444,italic:0,skew:0},215:{depth:.08333,height:.58333,italic:0,skew:0},247:{depth:.08333,height:.58333,italic:0,skew:0},305:{depth:0,height:.43056,italic:0,skew:0},567:{depth:.19444,height:.43056,italic:0,skew:0},710:{depth:0,height:.69444,italic:0,skew:0},711:{depth:0,height:.62847,italic:0,skew:0},713:{depth:0,height:.56778,italic:0,skew:0},714:{depth:0,height:.69444,italic:0,skew:0},715:{depth:0,height:.69444,italic:0,skew:0},728:{depth:0,height:.69444,italic:0,skew:0},729:{depth:0,height:.66786,italic:0,skew:0},730:{depth:0,height:.69444,italic:0,skew:0},732:{depth:0,height:.66786,italic:0,skew:0},768:{depth:0,height:.69444,italic:0,skew:0},769:{depth:0,height:.69444,italic:0,skew:0},770:{depth:0,height:.69444,italic:0,skew:0},771:{depth:0,height:.66786,italic:0,skew:0},772:{depth:0,height:.56778,italic:0,skew:0},774:{depth:0,height:.69444,italic:0,skew:0},775:{depth:0,height:.66786,italic:0,skew:0},776:{depth:0,height:.66786,italic:0,skew:0},778:{depth:0,height:.69444,italic:0,skew:0},779:{depth:0,height:.69444,italic:0,skew:0},780:{depth:0,height:.62847,italic:0,skew:0},824:{depth:.19444,height:.69444,italic:0,skew:0},915:{depth:0,height:.68333,italic:0,skew:0},916:{depth:0,height:.68333,italic:0,skew:0},920:{depth:0,height:.68333,italic:0,skew:0},923:{depth:0,height:.68333,italic:0,skew:0},926:{depth:0,height:.68333,italic:0,skew:0},928:{depth:0,height:.68333,italic:0,skew:0},931:{depth:0,height:.68333,italic:0,skew:0},933:{depth:0,height:.68333,italic:0,skew:0},934:{depth:0,height:.68333,italic:0,skew:0},936:{depth:0,height:.68333,italic:0,skew:0},937:{depth:0,height:.68333,italic:0,skew:0},8211:{depth:0,height:.43056,italic:.02778,skew:0},8212:{depth:0,height:.43056,italic:.02778,skew:0},8216:{depth:0,height:.69444,italic:0,skew:0},8217:{depth:0,height:.69444,italic:0,skew:0},8220:{depth:0,height:.69444,italic:0,skew:0},8221:{depth:0,height:.69444,italic:0,skew:0},8224:{depth:.19444,height:.69444,italic:0,skew:0},8225:{depth:.19444,height:.69444,italic:0,skew:0},8230:{depth:0,height:.12,italic:0,skew:0},8242:{depth:0,height:.55556,italic:0,skew:0},8407:{depth:0,height:.71444,italic:.15382,skew:0},8463:{depth:0,height:.68889,italic:0,skew:0},8465:{depth:0,height:.69444,italic:0,skew:0},8467:{depth:0,height:.69444,italic:0,skew:.11111},8472:{depth:.19444,height:.43056,italic:0,skew:.11111},8476:{depth:0,height:.69444,italic:0,skew:0},8501:{depth:0,height:.69444,italic:0,skew:0},8592:{depth:-.13313,height:.36687,italic:0,skew:0},8593:{depth:.19444,height:.69444,italic:0,skew:0},8594:{depth:-.13313,height:.36687,italic:0,skew:0},8595:{depth:.19444,height:.69444,italic:0,skew:0},8596:{depth:-.13313,height:.36687,italic:0,skew:0},8597:{depth:.25,height:.75,italic:0,skew:0},8598:{depth:.19444,height:.69444,italic:0,skew:0},8599:{depth:.19444,height:.69444,italic:0,skew:0},8600:{depth:.19444,height:.69444,italic:0,skew:0},8601:{depth:.19444,height:.69444,italic:0,skew:0},8614:{depth:.011,
-height:.511,italic:0,skew:0},8617:{depth:.011,height:.511,italic:0,skew:0},8618:{depth:.011,height:.511,italic:0,skew:0},8636:{depth:-.13313,height:.36687,italic:0,skew:0},8637:{depth:-.13313,height:.36687,italic:0,skew:0},8640:{depth:-.13313,height:.36687,italic:0,skew:0},8641:{depth:-.13313,height:.36687,italic:0,skew:0},8652:{depth:.011,height:.671,italic:0,skew:0},8656:{depth:-.13313,height:.36687,italic:0,skew:0},8657:{depth:.19444,height:.69444,italic:0,skew:0},8658:{depth:-.13313,height:.36687,italic:0,skew:0},8659:{depth:.19444,height:.69444,italic:0,skew:0},8660:{depth:-.13313,height:.36687,italic:0,skew:0},8661:{depth:.25,height:.75,italic:0,skew:0},8704:{depth:0,height:.69444,italic:0,skew:0},8706:{depth:0,height:.69444,italic:.05556,skew:.08334},8707:{depth:0,height:.69444,italic:0,skew:0},8709:{depth:.05556,height:.75,italic:0,skew:0},8711:{depth:0,height:.68333,italic:0,skew:0},8712:{depth:.0391,height:.5391,italic:0,skew:0},8715:{depth:.0391,height:.5391,italic:0,skew:0},8722:{depth:.08333,height:.58333,italic:0,skew:0},8723:{depth:.08333,height:.58333,italic:0,skew:0},8725:{depth:.25,height:.75,italic:0,skew:0},8726:{depth:.25,height:.75,italic:0,skew:0},8727:{depth:-.03472,height:.46528,italic:0,skew:0},8728:{depth:-.05555,height:.44445,italic:0,skew:0},8729:{depth:-.05555,height:.44445,italic:0,skew:0},8730:{depth:.2,height:.8,italic:0,skew:0},8733:{depth:0,height:.43056,italic:0,skew:0},8734:{depth:0,height:.43056,italic:0,skew:0},8736:{depth:0,height:.69224,italic:0,skew:0},8739:{depth:.25,height:.75,italic:0,skew:0},8741:{depth:.25,height:.75,italic:0,skew:0},8743:{depth:0,height:.55556,italic:0,skew:0},8744:{depth:0,height:.55556,italic:0,skew:0},8745:{depth:0,height:.55556,italic:0,skew:0},8746:{depth:0,height:.55556,italic:0,skew:0},8747:{depth:.19444,height:.69444,italic:.11111,skew:0},8764:{depth:-.13313,height:.36687,italic:0,skew:0},8768:{depth:.19444,height:.69444,italic:0,skew:0},8771:{depth:-.03625,height:.46375,italic:0,skew:0},8773:{depth:-.022,height:.589,italic:0,skew:0},8776:{depth:-.01688,height:.48312,italic:0,skew:0},8781:{depth:-.03625,height:.46375,italic:0,skew:0},8784:{depth:-.133,height:.67,italic:0,skew:0},8800:{depth:.215,height:.716,italic:0,skew:0},8801:{depth:-.03625,height:.46375,italic:0,skew:0},8804:{depth:.13597,height:.63597,italic:0,skew:0},8805:{depth:.13597,height:.63597,italic:0,skew:0},8810:{depth:.0391,height:.5391,italic:0,skew:0},8811:{depth:.0391,height:.5391,italic:0,skew:0},8826:{depth:.0391,height:.5391,italic:0,skew:0},8827:{depth:.0391,height:.5391,italic:0,skew:0},8834:{depth:.0391,height:.5391,italic:0,skew:0},8835:{depth:.0391,height:.5391,italic:0,skew:0},8838:{depth:.13597,height:.63597,italic:0,skew:0},8839:{depth:.13597,height:.63597,italic:0,skew:0},8846:{depth:0,height:.55556,italic:0,skew:0},8849:{depth:.13597,height:.63597,italic:0,skew:0},8850:{depth:.13597,height:.63597,italic:0,skew:0},8851:{depth:0,height:.55556,italic:0,skew:0},8852:{depth:0,height:.55556,italic:0,skew:0},8853:{depth:.08333,height:.58333,italic:0,skew:0},8854:{depth:.08333,height:.58333,italic:0,skew:0},8855:{depth:.08333,height:.58333,italic:0,skew:0},8856:{depth:.08333,height:.58333,italic:0,skew:0},8857:{depth:.08333,height:.58333,italic:0,skew:0},8866:{depth:0,height:.69444,italic:0,skew:0},8867:{depth:0,height:.69444,italic:0,skew:0},8868:{depth:0,height:.69444,italic:0,skew:0},8869:{depth:0,height:.69444,italic:0,skew:0},8872:{depth:.249,height:.75,italic:0,skew:0},8900:{depth:-.05555,height:.44445,italic:0,skew:0},8901:{depth:-.05555,height:.44445,italic:0,skew:0},8902:{depth:-.03472,height:.46528,italic:0,skew:0},8904:{depth:.005,height:.505,italic:0,skew:0},8942:{depth:.03,height:.9,italic:0,skew:0},8943:{depth:-.19,height:.31,italic:0,skew:0},8945:{depth:-.1,height:.82,italic:0,skew:0},8968:{depth:.25,height:.75,italic:0,skew:0},8969:{depth:.25,height:.75,italic:0,skew:0},8970:{depth:.25,height:.75,italic:0,skew:0},8971:{depth:.25,height:.75,italic:0,skew:0},8994:{depth:-.14236,height:.35764,italic:0,skew:0},8995:{depth:-.14236,height:.35764,italic:0,skew:0},9136:{depth:.244,height:.744,italic:0,skew:0},9137:{depth:.244,height:.744,italic:0,skew:0},9651:{depth:.19444,height:.69444,italic:0,skew:0},9657:{depth:-.03472,height:.46528,italic:0,skew:0},9661:{depth:.19444,height:.69444,italic:0,skew:0},9667:{depth:-.03472,height:.46528,italic:0,skew:0},9711:{depth:.19444,height:.69444,italic:0,skew:0},9824:{depth:.12963,height:.69444,italic:0,skew:0},9825:{depth:.12963,height:.69444,italic:0,skew:0},9826:{depth:.12963,height:.69444,italic:0,skew:0},9827:{depth:.12963,height:.69444,italic:0,skew:0},9837:{depth:0,height:.75,italic:0,skew:0},9838:{depth:.19444,height:.69444,italic:0,skew:0},9839:{depth:.19444,height:.69444,italic:0,skew:0},10216:{depth:.25,height:.75,italic:0,skew:0},10217:{depth:.25,height:.75,italic:0,skew:0},10222:{depth:.244,height:.744,italic:0,skew:0},10223:{depth:.244,height:.744,italic:0,skew:0},10229:{depth:.011,height:.511,italic:0,skew:0},10230:{depth:.011,height:.511,italic:0,skew:0},10231:{depth:.011,height:.511,italic:0,skew:0},10232:{depth:.024,height:.525,italic:0,skew:0},10233:{depth:.024,height:.525,italic:0,skew:0},10234:{depth:.024,height:.525,italic:0,skew:0},10236:{depth:.011,height:.511,italic:0,skew:0},10815:{depth:0,height:.68333,italic:0,skew:0},10927:{depth:.13597,height:.63597,italic:0,skew:0},10928:{depth:.13597,height:.63597,italic:0,skew:0}},"Math-BoldItalic":{47:{depth:.19444,height:.69444,italic:0,skew:0},65:{depth:0,height:.68611,italic:0,skew:0},66:{depth:0,height:.68611,italic:.04835,skew:0},67:{depth:0,height:.68611,italic:.06979,skew:0},68:{depth:0,height:.68611,italic:.03194,skew:0},69:{depth:0,height:.68611,italic:.05451,skew:0},70:{depth:0,height:.68611,italic:.15972,skew:0},71:{depth:0,height:.68611,italic:0,skew:0},72:{depth:0,height:.68611,italic:.08229,skew:0},73:{depth:0,height:.68611,italic:.07778,skew:0},74:{depth:0,height:.68611,italic:.10069,skew:0},75:{depth:0,height:.68611,italic:.06979,skew:0},76:{depth:0,height:.68611,italic:0,skew:0},77:{depth:0,height:.68611,italic:.11424,skew:0},78:{depth:0,height:.68611,italic:.11424,skew:0},79:{depth:0,height:.68611,italic:.03194,skew:0},80:{depth:0,height:.68611,italic:.15972,skew:0},81:{depth:.19444,height:.68611,italic:0,skew:0},82:{depth:0,height:.68611,italic:.00421,skew:0},83:{depth:0,height:.68611,italic:.05382,skew:0},84:{depth:0,height:.68611,italic:.15972,skew:0},85:{depth:0,height:.68611,italic:.11424,skew:0},86:{depth:0,height:.68611,italic:.25555,skew:0},87:{depth:0,height:.68611,italic:.15972,skew:0},88:{depth:0,height:.68611,italic:.07778,skew:0},89:{depth:0,height:.68611,italic:.25555,skew:0},90:{depth:0,height:.68611,italic:.06979,skew:0},97:{depth:0,height:.44444,italic:0,skew:0},98:{depth:0,height:.69444,italic:0,skew:0},99:{depth:0,height:.44444,italic:0,skew:0},100:{depth:0,height:.69444,italic:0,skew:0},101:{depth:0,height:.44444,italic:0,skew:0},102:{depth:.19444,height:.69444,italic:.11042,skew:0},103:{depth:.19444,height:.44444,italic:.03704,skew:0},104:{depth:0,height:.69444,italic:0,skew:0},105:{depth:0,height:.69326,italic:0,skew:0},106:{depth:.19444,height:.69326,italic:.0622,skew:0},107:{depth:0,height:.69444,italic:.01852,skew:0},108:{depth:0,height:.69444,italic:.0088,skew:0},109:{depth:0,height:.44444,italic:0,skew:0},110:{depth:0,height:.44444,italic:0,skew:0},111:{depth:0,height:.44444,italic:0,skew:0},112:{depth:.19444,height:.44444,italic:0,skew:0},113:{depth:.19444,height:.44444,italic:.03704,skew:0},114:{depth:0,height:.44444,italic:.03194,skew:0},115:{depth:0,height:.44444,italic:0,skew:0},116:{depth:0,height:.63492,italic:0,skew:0},117:{depth:0,height:.44444,italic:0,skew:0},118:{depth:0,height:.44444,italic:.03704,skew:0},119:{depth:0,height:.44444,italic:.02778,skew:0},120:{depth:0,height:.44444,italic:0,skew:0},121:{depth:.19444,height:.44444,italic:.03704,skew:0},122:{depth:0,height:.44444,italic:.04213,skew:0},915:{depth:0,height:.68611,italic:.15972,skew:0},916:{depth:0,height:.68611,italic:0,skew:0},920:{depth:0,height:.68611,italic:.03194,skew:0},923:{depth:0,height:.68611,italic:0,skew:0},926:{depth:0,height:.68611,italic:.07458,skew:0},928:{depth:0,height:.68611,italic:.08229,skew:0},931:{depth:0,height:.68611,italic:.05451,skew:0},933:{depth:0,height:.68611,italic:.15972,skew:0},934:{depth:0,height:.68611,italic:0,skew:0},936:{depth:0,height:.68611,italic:.11653,skew:0},937:{depth:0,height:.68611,italic:.04835,skew:0},945:{depth:0,height:.44444,italic:0,skew:0},946:{depth:.19444,height:.69444,italic:.03403,skew:0},947:{depth:.19444,height:.44444,italic:.06389,skew:0},948:{depth:0,height:.69444,italic:.03819,skew:0},949:{depth:0,height:.44444,italic:0,skew:0},950:{depth:.19444,height:.69444,italic:.06215,skew:0},951:{depth:.19444,height:.44444,italic:.03704,skew:0},952:{depth:0,height:.69444,italic:.03194,skew:0},953:{depth:0,height:.44444,italic:0,skew:0},954:{depth:0,height:.44444,italic:0,skew:0},955:{depth:0,height:.69444,italic:0,skew:0},956:{depth:.19444,height:.44444,italic:0,skew:0},957:{depth:0,height:.44444,italic:.06898,skew:0},958:{depth:.19444,height:.69444,italic:.03021,skew:0},959:{depth:0,height:.44444,italic:0,skew:0},960:{depth:0,height:.44444,italic:.03704,skew:0},961:{depth:.19444,height:.44444,italic:0,skew:0},962:{depth:.09722,height:.44444,italic:.07917,skew:0},963:{depth:0,height:.44444,italic:.03704,skew:0},964:{depth:0,height:.44444,italic:.13472,skew:0},965:{depth:0,height:.44444,italic:.03704,skew:0},966:{depth:.19444,height:.44444,italic:0,skew:0},967:{depth:.19444,height:.44444,italic:0,skew:0},968:{depth:.19444,height:.69444,italic:.03704,skew:0},969:{depth:0,height:.44444,italic:.03704,skew:0},977:{depth:0,height:.69444,italic:0,skew:0},981:{depth:.19444,height:.69444,italic:0,skew:0},982:{depth:0,height:.44444,italic:.03194,skew:0},1009:{depth:.19444,height:.44444,italic:0,skew:0},1013:{depth:0,height:.44444,italic:0,skew:0}},"Math-Italic":{47:{depth:.19444,height:.69444,italic:0,skew:0},65:{depth:0,height:.68333,italic:0,skew:.13889},66:{depth:0,height:.68333,italic:.05017,skew:.08334},67:{depth:0,height:.68333,italic:.07153,skew:.08334},68:{depth:0,height:.68333,italic:.02778,skew:.05556},69:{depth:0,height:.68333,italic:.05764,skew:.08334},70:{depth:0,height:.68333,italic:.13889,skew:.08334},71:{depth:0,height:.68333,italic:0,skew:.08334},72:{depth:0,height:.68333,italic:.08125,skew:.05556},73:{depth:0,height:.68333,italic:.07847,skew:.11111},74:{depth:0,height:.68333,italic:.09618,skew:.16667},75:{depth:0,height:.68333,italic:.07153,skew:.05556},76:{depth:0,height:.68333,italic:0,skew:.02778},77:{depth:0,height:.68333,italic:.10903,skew:.08334},78:{depth:0,height:.68333,italic:.10903,skew:.08334},79:{depth:0,height:.68333,italic:.02778,skew:.08334},80:{depth:0,height:.68333,italic:.13889,skew:.08334},81:{depth:.19444,height:.68333,italic:0,skew:.08334},82:{depth:0,height:.68333,italic:.00773,skew:.08334},83:{depth:0,height:.68333,italic:.05764,skew:.08334},84:{depth:0,height:.68333,italic:.13889,skew:.08334},85:{depth:0,height:.68333,italic:.10903,skew:.02778},86:{depth:0,height:.68333,italic:.22222,skew:0},87:{depth:0,height:.68333,italic:.13889,skew:0},88:{depth:0,height:.68333,italic:.07847,skew:.08334},89:{depth:0,height:.68333,italic:.22222,skew:0},90:{depth:0,height:.68333,italic:.07153,skew:.08334},97:{depth:0,height:.43056,italic:0,skew:0},98:{depth:0,height:.69444,italic:0,skew:0},99:{depth:0,height:.43056,italic:0,skew:.05556},100:{depth:0,height:.69444,italic:0,skew:.16667},101:{depth:0,height:.43056,italic:0,skew:.05556},102:{depth:.19444,height:.69444,italic:.10764,skew:.16667},103:{depth:.19444,height:.43056,italic:.03588,skew:.02778},104:{depth:0,height:.69444,italic:0,skew:0},105:{depth:0,height:.65952,italic:0,skew:0},106:{depth:.19444,height:.65952,italic:.05724,skew:0},107:{depth:0,height:.69444,italic:.03148,skew:0},108:{depth:0,height:.69444,italic:.01968,skew:.08334},109:{depth:0,height:.43056,italic:0,skew:0},110:{depth:0,height:.43056,italic:0,skew:0},111:{depth:0,height:.43056,italic:0,skew:.05556},112:{depth:.19444,height:.43056,italic:0,skew:.08334},113:{depth:.19444,height:.43056,italic:.03588,skew:.08334},114:{depth:0,height:.43056,italic:.02778,skew:.05556},115:{depth:0,height:.43056,italic:0,skew:.05556},116:{depth:0,height:.61508,italic:0,skew:.08334},117:{depth:0,height:.43056,italic:0,skew:.02778},118:{depth:0,height:.43056,italic:.03588,skew:.02778},119:{depth:0,height:.43056,italic:.02691,skew:.08334},120:{depth:0,height:.43056,italic:0,skew:.02778},121:{depth:.19444,height:.43056,italic:.03588,skew:.05556},122:{depth:0,height:.43056,italic:.04398,skew:.05556},915:{depth:0,height:.68333,italic:.13889,skew:.08334},916:{depth:0,height:.68333,italic:0,skew:.16667},920:{depth:0,height:.68333,italic:.02778,skew:.08334},923:{depth:0,height:.68333,italic:0,skew:.16667},926:{depth:0,height:.68333,italic:.07569,skew:.08334},928:{depth:0,height:.68333,italic:.08125,skew:.05556},931:{depth:0,height:.68333,italic:.05764,skew:.08334},933:{depth:0,height:.68333,italic:.13889,skew:.05556},934:{depth:0,height:.68333,italic:0,skew:.08334},936:{depth:0,height:.68333,italic:.11,skew:.05556},937:{depth:0,height:.68333,italic:.05017,skew:.08334},945:{depth:0,height:.43056,italic:.0037,skew:.02778},946:{depth:.19444,height:.69444,italic:.05278,skew:.08334},947:{depth:.19444,height:.43056,italic:.05556,skew:0},948:{depth:0,height:.69444,italic:.03785,skew:.05556},949:{depth:0,height:.43056,italic:0,skew:.08334},950:{depth:.19444,height:.69444,italic:.07378,skew:.08334},951:{depth:.19444,height:.43056,italic:.03588,skew:.05556},952:{depth:0,height:.69444,italic:.02778,skew:.08334},953:{depth:0,height:.43056,italic:0,skew:.05556},954:{depth:0,height:.43056,italic:0,skew:0},955:{depth:0,height:.69444,italic:0,skew:0},956:{depth:.19444,height:.43056,italic:0,skew:.02778},957:{depth:0,height:.43056,italic:.06366,skew:.02778},958:{depth:.19444,height:.69444,italic:.04601,skew:.11111},959:{depth:0,height:.43056,italic:0,skew:.05556},960:{depth:0,height:.43056,italic:.03588,skew:0},961:{depth:.19444,height:.43056,italic:0,skew:.08334},962:{depth:.09722,height:.43056,italic:.07986,skew:.08334},963:{depth:0,height:.43056,italic:.03588,skew:0},964:{depth:0,height:.43056,italic:.1132,skew:.02778},965:{depth:0,height:.43056,italic:.03588,skew:.02778},966:{depth:.19444,height:.43056,italic:0,skew:.08334},967:{depth:.19444,height:.43056,italic:0,skew:.05556},968:{depth:.19444,height:.69444,italic:.03588,skew:.11111},969:{depth:0,height:.43056,italic:.03588,skew:0},977:{depth:0,height:.69444,italic:0,skew:.08334},981:{depth:.19444,height:.69444,italic:0,skew:.08334},982:{depth:0,height:.43056,italic:.02778,skew:0},1009:{depth:.19444,height:.43056,italic:0,skew:.08334},1013:{depth:0,height:.43056,italic:0,skew:.05556}},"Math-Regular":{65:{depth:0,height:.68333,italic:0,skew:.13889},66:{depth:0,height:.68333,italic:.05017,skew:.08334},67:{depth:0,height:.68333,italic:.07153,skew:.08334},68:{depth:0,height:.68333,italic:.02778,skew:.05556},69:{depth:0,height:.68333,italic:.05764,skew:.08334},70:{depth:0,height:.68333,italic:.13889,skew:.08334},71:{depth:0,height:.68333,italic:0,skew:.08334},72:{depth:0,height:.68333,italic:.08125,skew:.05556},73:{depth:0,height:.68333,italic:.07847,skew:.11111},74:{depth:0,height:.68333,italic:.09618,skew:.16667},75:{depth:0,height:.68333,italic:.07153,skew:.05556},76:{depth:0,height:.68333,italic:0,skew:.02778},77:{depth:0,height:.68333,italic:.10903,skew:.08334},78:{depth:0,height:.68333,italic:.10903,skew:.08334},79:{depth:0,height:.68333,italic:.02778,skew:.08334},80:{depth:0,height:.68333,italic:.13889,skew:.08334},81:{depth:.19444,height:.68333,italic:0,skew:.08334},82:{depth:0,height:.68333,italic:.00773,skew:.08334},83:{depth:0,height:.68333,italic:.05764,skew:.08334},84:{depth:0,height:.68333,italic:.13889,skew:.08334},85:{depth:0,height:.68333,italic:.10903,skew:.02778},86:{depth:0,height:.68333,italic:.22222,skew:0},87:{depth:0,height:.68333,italic:.13889,skew:0},88:{depth:0,height:.68333,italic:.07847,skew:.08334},89:{depth:0,height:.68333,italic:.22222,skew:0},90:{depth:0,height:.68333,italic:.07153,skew:.08334},97:{depth:0,height:.43056,italic:0,skew:0},98:{depth:0,height:.69444,italic:0,skew:0},99:{depth:0,height:.43056,italic:0,skew:.05556},100:{depth:0,height:.69444,italic:0,skew:.16667},101:{depth:0,height:.43056,italic:0,skew:.05556},102:{depth:.19444,height:.69444,italic:.10764,skew:.16667},103:{depth:.19444,height:.43056,italic:.03588,skew:.02778},104:{depth:0,height:.69444,italic:0,skew:0},105:{depth:0,height:.65952,italic:0,skew:0},106:{depth:.19444,height:.65952,italic:.05724,skew:0},107:{depth:0,height:.69444,italic:.03148,skew:0},108:{depth:0,height:.69444,italic:.01968,skew:.08334},109:{depth:0,height:.43056,italic:0,skew:0},110:{depth:0,height:.43056,italic:0,skew:0},111:{depth:0,height:.43056,italic:0,skew:.05556},112:{depth:.19444,height:.43056,italic:0,skew:.08334},113:{depth:.19444,height:.43056,italic:.03588,skew:.08334},114:{depth:0,height:.43056,italic:.02778,skew:.05556},115:{depth:0,height:.43056,italic:0,skew:.05556},116:{depth:0,height:.61508,italic:0,skew:.08334},117:{depth:0,height:.43056,italic:0,skew:.02778},118:{depth:0,height:.43056,italic:.03588,skew:.02778},119:{depth:0,height:.43056,italic:.02691,skew:.08334},120:{depth:0,height:.43056,italic:0,skew:.02778},121:{depth:.19444,height:.43056,italic:.03588,skew:.05556},122:{depth:0,height:.43056,italic:.04398,skew:.05556},915:{depth:0,height:.68333,italic:.13889,skew:.08334},916:{depth:0,height:.68333,italic:0,skew:.16667},920:{depth:0,height:.68333,italic:.02778,skew:.08334},923:{depth:0,height:.68333,italic:0,skew:.16667},926:{depth:0,height:.68333,italic:.07569,skew:.08334},928:{depth:0,height:.68333,italic:.08125,skew:.05556},931:{depth:0,height:.68333,italic:.05764,skew:.08334},933:{depth:0,height:.68333,italic:.13889,skew:.05556},934:{depth:0,height:.68333,italic:0,skew:.08334},936:{depth:0,height:.68333,italic:.11,skew:.05556},937:{depth:0,height:.68333,italic:.05017,skew:.08334},945:{depth:0,height:.43056,italic:.0037,skew:.02778},946:{depth:.19444,height:.69444,italic:.05278,skew:.08334},947:{depth:.19444,height:.43056,italic:.05556,skew:0},948:{depth:0,height:.69444,italic:.03785,skew:.05556},949:{depth:0,height:.43056,italic:0,skew:.08334},950:{depth:.19444,height:.69444,italic:.07378,skew:.08334},951:{depth:.19444,height:.43056,italic:.03588,skew:.05556},952:{depth:0,height:.69444,italic:.02778,skew:.08334},953:{depth:0,height:.43056,italic:0,skew:.05556},954:{depth:0,height:.43056,italic:0,skew:0},955:{depth:0,height:.69444,italic:0,skew:0},956:{depth:.19444,height:.43056,italic:0,skew:.02778},957:{depth:0,height:.43056,italic:.06366,skew:.02778},958:{depth:.19444,height:.69444,italic:.04601,skew:.11111},959:{depth:0,height:.43056,italic:0,skew:.05556},960:{depth:0,height:.43056,italic:.03588,skew:0},961:{depth:.19444,height:.43056,italic:0,skew:.08334},962:{depth:.09722,height:.43056,italic:.07986,skew:.08334},963:{depth:0,height:.43056,italic:.03588,skew:0},964:{depth:0,height:.43056,italic:.1132,skew:.02778},965:{depth:0,height:.43056,italic:.03588,skew:.02778},966:{depth:.19444,height:.43056,italic:0,skew:.08334},967:{depth:.19444,height:.43056,italic:0,skew:.05556},968:{depth:.19444,height:.69444,italic:.03588,skew:.11111},969:{depth:0,height:.43056,italic:.03588,skew:0},977:{depth:0,height:.69444,italic:0,skew:.08334},981:{depth:.19444,height:.69444,italic:0,skew:.08334},982:{depth:0,height:.43056,italic:.02778,skew:0},1009:{depth:.19444,height:.43056,italic:0,skew:.08334},1013:{depth:0,height:.43056,italic:0,skew:.05556}},"SansSerif-Regular":{33:{depth:0,height:.69444,italic:0,skew:0},34:{depth:0,height:.69444,italic:0,skew:0},35:{depth:.19444,height:.69444,italic:0,skew:0},36:{depth:.05556,height:.75,italic:0,skew:0},37:{depth:.05556,height:.75,italic:0,skew:0},38:{depth:0,height:.69444,italic:0,skew:0},39:{depth:0,height:.69444,italic:0,skew:0},40:{depth:.25,height:.75,italic:0,skew:0},41:{depth:.25,height:.75,italic:0,skew:0},42:{depth:0,height:.75,italic:0,skew:0},43:{depth:.08333,height:.58333,italic:0,skew:0},44:{depth:.125,height:.08333,italic:0,skew:0},45:{depth:0,height:.44444,italic:0,skew:0},46:{depth:0,height:.08333,italic:0,skew:0},47:{depth:.25,height:.75,italic:0,skew:0},48:{depth:0,height:.65556,italic:0,skew:0},49:{depth:0,height:.65556,italic:0,skew:0},50:{depth:0,height:.65556,italic:0,skew:0},51:{depth:0,height:.65556,italic:0,skew:0},52:{depth:0,height:.65556,italic:0,skew:0},53:{depth:0,height:.65556,italic:0,skew:0},54:{depth:0,height:.65556,italic:0,skew:0},55:{depth:0,height:.65556,italic:0,skew:0},56:{depth:0,height:.65556,italic:0,skew:0},57:{depth:0,height:.65556,italic:0,skew:0},58:{depth:0,height:.44444,italic:0,skew:0},59:{depth:.125,height:.44444,italic:0,skew:0},61:{depth:-.13,height:.37,italic:0,skew:0},63:{depth:0,height:.69444,italic:0,skew:0},64:{depth:0,height:.69444,italic:0,skew:0},65:{depth:0,height:.69444,italic:0,skew:0},66:{depth:0,height:.69444,italic:0,skew:0},67:{depth:0,height:.69444,italic:0,skew:0},68:{depth:0,height:.69444,italic:0,skew:0},69:{depth:0,height:.69444,italic:0,skew:0},70:{depth:0,height:.69444,italic:0,skew:0},71:{depth:0,height:.69444,italic:0,skew:0},72:{depth:0,height:.69444,italic:0,skew:0},73:{depth:0,height:.69444,italic:0,skew:0},74:{depth:0,height:.69444,italic:0,skew:0},75:{depth:0,height:.69444,italic:0,skew:0},76:{depth:0,height:.69444,italic:0,skew:0},77:{depth:0,height:.69444,italic:0,skew:0},78:{depth:0,height:.69444,italic:0,skew:0},79:{depth:0,height:.69444,italic:0,skew:0},80:{depth:0,height:.69444,italic:0,skew:0},81:{depth:.125,height:.69444,italic:0,skew:0},82:{depth:0,height:.69444,italic:0,skew:0},83:{depth:0,height:.69444,italic:0,skew:0},84:{depth:0,height:.69444,italic:0,skew:0},85:{depth:0,height:.69444,italic:0,skew:0},86:{depth:0,height:.69444,italic:.01389,skew:0},87:{depth:0,height:.69444,italic:.01389,skew:0},88:{depth:0,height:.69444,italic:0,skew:0},89:{depth:0,height:.69444,italic:.025,skew:0},90:{depth:0,height:.69444,italic:0,skew:0},91:{depth:.25,height:.75,italic:0,skew:0},93:{depth:.25,height:.75,italic:0,skew:0},94:{depth:0,height:.69444,italic:0,skew:0},95:{depth:.35,height:.09444,italic:.02778,skew:0},97:{depth:0,height:.44444,italic:0,skew:0},98:{depth:0,height:.69444,italic:0,skew:0},99:{depth:0,height:.44444,italic:0,skew:0},100:{depth:0,height:.69444,italic:0,skew:0},101:{depth:0,height:.44444,italic:0,skew:0},102:{depth:0,height:.69444,italic:.06944,skew:0},103:{depth:.19444,height:.44444,italic:.01389,skew:0},104:{depth:0,height:.69444,italic:0,skew:0},105:{depth:0,height:.67937,italic:0,skew:0},106:{depth:.19444,height:.67937,italic:0,skew:0},107:{depth:0,height:.69444,italic:0,skew:0},108:{depth:0,height:.69444,italic:0,skew:0},109:{depth:0,height:.44444,italic:0,skew:0},110:{depth:0,height:.44444,italic:0,skew:0},111:{depth:0,height:.44444,italic:0,skew:0},112:{depth:.19444,height:.44444,italic:0,skew:0},113:{depth:.19444,height:.44444,italic:0,skew:0},114:{depth:0,height:.44444,italic:.01389,skew:0},115:{depth:0,height:.44444,italic:0,skew:0},116:{depth:0,height:.57143,italic:0,skew:0},117:{depth:0,height:.44444,italic:0,skew:0},118:{depth:0,height:.44444,italic:.01389,skew:0},119:{depth:0,height:.44444,italic:.01389,skew:0},120:{depth:0,height:.44444,italic:0,skew:0},121:{depth:.19444,height:.44444,italic:.01389,skew:0},122:{depth:0,height:.44444,italic:0,skew:0},126:{depth:.35,height:.32659,italic:0,skew:0},305:{depth:0,height:.44444,italic:0,skew:0},567:{depth:.19444,height:.44444,italic:0,skew:0},768:{depth:0,height:.69444,italic:0,skew:0},769:{depth:0,height:.69444,italic:0,skew:0},770:{depth:0,height:.69444,italic:0,skew:0},771:{depth:0,height:.67659,italic:0,skew:0},772:{depth:0,height:.60889,italic:0,skew:0},774:{depth:0,height:.69444,italic:0,skew:0},775:{depth:0,height:.67937,italic:0,skew:0},776:{depth:0,height:.67937,italic:0,skew:0},778:{depth:0,height:.69444,italic:0,skew:0},779:{depth:0,height:.69444,italic:0,skew:0},780:{depth:0,height:.63194,italic:0,skew:0},915:{depth:0,height:.69444,italic:0,skew:0},916:{depth:0,height:.69444,italic:0,skew:0},920:{depth:0,height:.69444,italic:0,skew:0},923:{depth:0,height:.69444,italic:0,skew:0},926:{depth:0,height:.69444,italic:0,skew:0},928:{depth:0,height:.69444,italic:0,skew:0},931:{depth:0,height:.69444,italic:0,skew:0},933:{depth:0,height:.69444,italic:0,skew:0},934:{depth:0,height:.69444,italic:0,skew:0},936:{depth:0,height:.69444,italic:0,skew:0},937:{depth:0,height:.69444,italic:0,skew:0},8211:{depth:0,height:.44444,italic:.02778,skew:0},8212:{depth:0,height:.44444,italic:.02778,skew:0},8216:{depth:0,height:.69444,italic:0,skew:0},8217:{depth:0,height:.69444,italic:0,skew:0},8220:{depth:0,height:.69444,italic:0,skew:0},8221:{depth:0,height:.69444,italic:0,skew:0}},"Script-Regular":{65:{depth:0,height:.7,italic:.22925,skew:0},66:{depth:0,height:.7,italic:.04087,skew:0},67:{depth:0,height:.7,italic:.1689,skew:0},68:{depth:0,height:.7,italic:.09371,skew:0},69:{depth:0,height:.7,italic:.18583,skew:0},70:{depth:0,height:.7,italic:.13634,skew:0},71:{depth:0,height:.7,italic:.17322,skew:0},72:{depth:0,height:.7,italic:.29694,skew:0},73:{depth:0,height:.7,italic:.19189,skew:0},74:{depth:.27778,height:.7,italic:.19189,skew:0},75:{depth:0,height:.7,italic:.31259,skew:0},76:{depth:0,height:.7,italic:.19189,skew:0},77:{depth:0,height:.7,italic:.15981,skew:0},78:{depth:0,height:.7,italic:.3525,skew:0},79:{depth:0,height:.7,italic:.08078,skew:0},80:{depth:0,height:.7,italic:.08078,skew:0},81:{depth:0,height:.7,italic:.03305,skew:0},82:{depth:0,height:.7,italic:.06259,skew:0},83:{depth:0,height:.7,italic:.19189,skew:0},84:{depth:0,height:.7,italic:.29087,skew:0},85:{depth:0,height:.7,italic:.25815,skew:0},86:{depth:0,height:.7,italic:.27523,skew:0},87:{depth:0,height:.7,italic:.27523,skew:0},88:{depth:0,height:.7,italic:.26006,skew:0},89:{depth:0,height:.7,italic:.2939,skew:0},90:{depth:0,height:.7,italic:.24037,skew:0}},"Size1-Regular":{40:{depth:.35001,height:.85,italic:0,skew:0},41:{depth:.35001,height:.85,italic:0,skew:0},47:{depth:.35001,height:.85,italic:0,skew:0},91:{depth:.35001,height:.85,italic:0,skew:0},92:{depth:.35001,height:.85,italic:0,skew:0},93:{depth:.35001,height:.85,italic:0,skew:0},123:{depth:.35001,height:.85,italic:0,skew:0},125:{depth:.35001,height:.85,italic:0,skew:0},710:{depth:0,height:.72222,italic:0,skew:0},732:{depth:0,height:.72222,italic:0,skew:0},770:{depth:0,height:.72222,italic:0,skew:0},771:{depth:0,height:.72222,italic:0,skew:0},8214:{depth:-99e-5,height:.601,italic:0,skew:0},8593:{depth:1e-5,height:.6,italic:0,skew:0},8595:{depth:1e-5,height:.6,italic:0,skew:0},8657:{depth:1e-5,height:.6,italic:0,skew:0},8659:{depth:1e-5,height:.6,italic:0,skew:0},8719:{depth:.25001,height:.75,italic:0,skew:0},8720:{depth:.25001,height:.75,italic:0,skew:0},8721:{depth:.25001,height:.75,italic:0,skew:0},8730:{depth:.35001,height:.85,italic:0,skew:0},8739:{depth:-.00599,height:.606,italic:0,skew:0},8741:{depth:-.00599,height:.606,italic:0,skew:0},8747:{depth:.30612,height:.805,italic:.19445,skew:0},8748:{depth:.306,height:.805,italic:.19445,skew:0},8749:{depth:.306,height:.805,italic:.19445,skew:0},8750:{depth:.30612,height:.805,italic:.19445,skew:0},8896:{depth:.25001,height:.75,italic:0,skew:0},8897:{depth:.25001,height:.75,italic:0,skew:0},8898:{depth:.25001,height:.75,italic:0,skew:0},8899:{depth:.25001,height:.75,italic:0,skew:0},8968:{depth:.35001,height:.85,italic:0,skew:0},8969:{depth:.35001,height:.85,italic:0,skew:0},8970:{depth:.35001,height:.85,italic:0,skew:0},8971:{depth:.35001,height:.85,italic:0,skew:0},9168:{depth:-99e-5,height:.601,italic:0,skew:0},10216:{depth:.35001,height:.85,italic:0,skew:0},10217:{depth:.35001,height:.85,italic:0,skew:0},10752:{depth:.25001,height:.75,italic:0,skew:0},10753:{depth:.25001,height:.75,italic:0,skew:0},10754:{depth:.25001,height:.75,italic:0,skew:0},10756:{depth:.25001,height:.75,italic:0,skew:0},10758:{depth:.25001,height:.75,italic:0,skew:0}},"Size2-Regular":{40:{depth:.65002,height:1.15,italic:0,skew:0},41:{depth:.65002,height:1.15,italic:0,skew:0},47:{depth:.65002,height:1.15,italic:0,skew:0},91:{depth:.65002,height:1.15,italic:0,skew:0},92:{depth:.65002,height:1.15,italic:0,skew:0},93:{depth:.65002,height:1.15,italic:0,skew:0},123:{depth:.65002,height:1.15,italic:0,skew:0},125:{depth:.65002,height:1.15,italic:0,skew:0},710:{depth:0,height:.75,italic:0,skew:0},732:{depth:0,height:.75,italic:0,skew:0},770:{depth:0,height:.75,italic:0,skew:0},771:{depth:0,height:.75,italic:0,skew:0},8719:{depth:.55001,height:1.05,italic:0,skew:0},8720:{depth:.55001,height:1.05,italic:0,skew:0},8721:{depth:.55001,height:1.05,italic:0,skew:0},8730:{depth:.65002,height:1.15,italic:0,skew:0},8747:{depth:.86225,height:1.36,italic:.44445,skew:0},8748:{depth:.862,height:1.36,italic:.44445,skew:0},8749:{depth:.862,height:1.36,italic:.44445,skew:0},8750:{depth:.86225,height:1.36,italic:.44445,skew:0},8896:{depth:.55001,height:1.05,italic:0,skew:0},8897:{depth:.55001,height:1.05,italic:0,skew:0},8898:{depth:.55001,height:1.05,italic:0,skew:0},8899:{depth:.55001,height:1.05,italic:0,skew:0},8968:{depth:.65002,height:1.15,italic:0,skew:0},8969:{depth:.65002,height:1.15,italic:0,skew:0},8970:{depth:.65002,height:1.15,italic:0,skew:0},8971:{depth:.65002,height:1.15,italic:0,skew:0},10216:{depth:.65002,height:1.15,italic:0,skew:0},10217:{depth:.65002,height:1.15,italic:0,skew:0},10752:{depth:.55001,height:1.05,italic:0,skew:0},10753:{depth:.55001,height:1.05,italic:0,skew:0},10754:{depth:.55001,height:1.05,italic:0,skew:0},10756:{depth:.55001,height:1.05,italic:0,skew:0},10758:{depth:.55001,height:1.05,italic:0,skew:0}},"Size3-Regular":{40:{depth:.95003,height:1.45,italic:0,skew:0},41:{depth:.95003,height:1.45,italic:0,skew:0},47:{depth:.95003,height:1.45,italic:0,skew:0},91:{depth:.95003,height:1.45,italic:0,skew:0},92:{depth:.95003,height:1.45,italic:0,skew:0},93:{depth:.95003,height:1.45,italic:0,skew:0},123:{depth:.95003,height:1.45,italic:0,skew:0},125:{depth:.95003,height:1.45,italic:0,skew:0},710:{depth:0,height:.75,italic:0,skew:0},732:{depth:0,height:.75,italic:0,skew:0},770:{depth:0,height:.75,italic:0,skew:0},771:{depth:0,height:.75,italic:0,skew:0},8730:{depth:.95003,height:1.45,italic:0,skew:0},8968:{depth:.95003,height:1.45,italic:0,skew:0},8969:{depth:.95003,height:1.45,italic:0,skew:0},8970:{depth:.95003,height:1.45,italic:0,skew:0},8971:{depth:.95003,height:1.45,italic:0,skew:0},10216:{depth:.95003,height:1.45,italic:0,skew:0},10217:{depth:.95003,height:1.45,italic:0,skew:0}},"Size4-Regular":{40:{depth:1.25003,height:1.75,italic:0,skew:0},41:{depth:1.25003,height:1.75,italic:0,skew:0},47:{depth:1.25003,height:1.75,italic:0,skew:0},91:{depth:1.25003,height:1.75,italic:0,skew:0},92:{depth:1.25003,height:1.75,italic:0,skew:0},93:{depth:1.25003,height:1.75,italic:0,skew:0},123:{depth:1.25003,height:1.75,italic:0,skew:0},125:{depth:1.25003,height:1.75,italic:0,skew:0},710:{depth:0,height:.825,italic:0,skew:0},732:{depth:0,height:.825,italic:0,skew:0},770:{depth:0,height:.825,italic:0,skew:0},771:{depth:0,height:.825,italic:0,skew:0},8730:{depth:1.25003,height:1.75,italic:0,skew:0},8968:{depth:1.25003,height:1.75,italic:0,skew:0},8969:{depth:1.25003,height:1.75,italic:0,skew:0},8970:{depth:1.25003,height:1.75,italic:0,skew:0},8971:{depth:1.25003,height:1.75,italic:0,skew:0},9115:{depth:.64502,height:1.155,italic:0,skew:0},9116:{depth:1e-5,height:.6,italic:0,skew:0},9117:{depth:.64502,height:1.155,italic:0,skew:0},9118:{depth:.64502,height:1.155,italic:0,skew:0},9119:{depth:1e-5,height:.6,italic:0,skew:0},9120:{depth:.64502,height:1.155,italic:0,skew:0},9121:{depth:.64502,height:1.155,italic:0,skew:0},9122:{depth:-99e-5,height:.601,italic:0,skew:0},9123:{depth:.64502,height:1.155,italic:0,skew:0},9124:{depth:.64502,height:1.155,italic:0,skew:0},9125:{depth:-99e-5,height:.601,italic:0,
-skew:0},9126:{depth:.64502,height:1.155,italic:0,skew:0},9127:{depth:1e-5,height:.9,italic:0,skew:0},9128:{depth:.65002,height:1.15,italic:0,skew:0},9129:{depth:.90001,height:0,italic:0,skew:0},9130:{depth:0,height:.3,italic:0,skew:0},9131:{depth:1e-5,height:.9,italic:0,skew:0},9132:{depth:.65002,height:1.15,italic:0,skew:0},9133:{depth:.90001,height:0,italic:0,skew:0},9143:{depth:.88502,height:.915,italic:0,skew:0},10216:{depth:1.25003,height:1.75,italic:0,skew:0},10217:{depth:1.25003,height:1.75,italic:0,skew:0},57344:{depth:-.00499,height:.605,italic:0,skew:0},57345:{depth:-.00499,height:.605,italic:0,skew:0},57680:{depth:0,height:.12,italic:0,skew:0},57681:{depth:0,height:.12,italic:0,skew:0},57682:{depth:0,height:.12,italic:0,skew:0},57683:{depth:0,height:.12,italic:0,skew:0}},"Typewriter-Regular":{33:{depth:0,height:.61111,italic:0,skew:0},34:{depth:0,height:.61111,italic:0,skew:0},35:{depth:0,height:.61111,italic:0,skew:0},36:{depth:.08333,height:.69444,italic:0,skew:0},37:{depth:.08333,height:.69444,italic:0,skew:0},38:{depth:0,height:.61111,italic:0,skew:0},39:{depth:0,height:.61111,italic:0,skew:0},40:{depth:.08333,height:.69444,italic:0,skew:0},41:{depth:.08333,height:.69444,italic:0,skew:0},42:{depth:0,height:.52083,italic:0,skew:0},43:{depth:-.08056,height:.53055,italic:0,skew:0},44:{depth:.13889,height:.125,italic:0,skew:0},45:{depth:-.08056,height:.53055,italic:0,skew:0},46:{depth:0,height:.125,italic:0,skew:0},47:{depth:.08333,height:.69444,italic:0,skew:0},48:{depth:0,height:.61111,italic:0,skew:0},49:{depth:0,height:.61111,italic:0,skew:0},50:{depth:0,height:.61111,italic:0,skew:0},51:{depth:0,height:.61111,italic:0,skew:0},52:{depth:0,height:.61111,italic:0,skew:0},53:{depth:0,height:.61111,italic:0,skew:0},54:{depth:0,height:.61111,italic:0,skew:0},55:{depth:0,height:.61111,italic:0,skew:0},56:{depth:0,height:.61111,italic:0,skew:0},57:{depth:0,height:.61111,italic:0,skew:0},58:{depth:0,height:.43056,italic:0,skew:0},59:{depth:.13889,height:.43056,italic:0,skew:0},60:{depth:-.05556,height:.55556,italic:0,skew:0},61:{depth:-.19549,height:.41562,italic:0,skew:0},62:{depth:-.05556,height:.55556,italic:0,skew:0},63:{depth:0,height:.61111,italic:0,skew:0},64:{depth:0,height:.61111,italic:0,skew:0},65:{depth:0,height:.61111,italic:0,skew:0},66:{depth:0,height:.61111,italic:0,skew:0},67:{depth:0,height:.61111,italic:0,skew:0},68:{depth:0,height:.61111,italic:0,skew:0},69:{depth:0,height:.61111,italic:0,skew:0},70:{depth:0,height:.61111,italic:0,skew:0},71:{depth:0,height:.61111,italic:0,skew:0},72:{depth:0,height:.61111,italic:0,skew:0},73:{depth:0,height:.61111,italic:0,skew:0},74:{depth:0,height:.61111,italic:0,skew:0},75:{depth:0,height:.61111,italic:0,skew:0},76:{depth:0,height:.61111,italic:0,skew:0},77:{depth:0,height:.61111,italic:0,skew:0},78:{depth:0,height:.61111,italic:0,skew:0},79:{depth:0,height:.61111,italic:0,skew:0},80:{depth:0,height:.61111,italic:0,skew:0},81:{depth:.13889,height:.61111,italic:0,skew:0},82:{depth:0,height:.61111,italic:0,skew:0},83:{depth:0,height:.61111,italic:0,skew:0},84:{depth:0,height:.61111,italic:0,skew:0},85:{depth:0,height:.61111,italic:0,skew:0},86:{depth:0,height:.61111,italic:0,skew:0},87:{depth:0,height:.61111,italic:0,skew:0},88:{depth:0,height:.61111,italic:0,skew:0},89:{depth:0,height:.61111,italic:0,skew:0},90:{depth:0,height:.61111,italic:0,skew:0},91:{depth:.08333,height:.69444,italic:0,skew:0},92:{depth:.08333,height:.69444,italic:0,skew:0},93:{depth:.08333,height:.69444,italic:0,skew:0},94:{depth:0,height:.61111,italic:0,skew:0},95:{depth:.09514,height:0,italic:0,skew:0},96:{depth:0,height:.61111,italic:0,skew:0},97:{depth:0,height:.43056,italic:0,skew:0},98:{depth:0,height:.61111,italic:0,skew:0},99:{depth:0,height:.43056,italic:0,skew:0},100:{depth:0,height:.61111,italic:0,skew:0},101:{depth:0,height:.43056,italic:0,skew:0},102:{depth:0,height:.61111,italic:0,skew:0},103:{depth:.22222,height:.43056,italic:0,skew:0},104:{depth:0,height:.61111,italic:0,skew:0},105:{depth:0,height:.61111,italic:0,skew:0},106:{depth:.22222,height:.61111,italic:0,skew:0},107:{depth:0,height:.61111,italic:0,skew:0},108:{depth:0,height:.61111,italic:0,skew:0},109:{depth:0,height:.43056,italic:0,skew:0},110:{depth:0,height:.43056,italic:0,skew:0},111:{depth:0,height:.43056,italic:0,skew:0},112:{depth:.22222,height:.43056,italic:0,skew:0},113:{depth:.22222,height:.43056,italic:0,skew:0},114:{depth:0,height:.43056,italic:0,skew:0},115:{depth:0,height:.43056,italic:0,skew:0},116:{depth:0,height:.55358,italic:0,skew:0},117:{depth:0,height:.43056,italic:0,skew:0},118:{depth:0,height:.43056,italic:0,skew:0},119:{depth:0,height:.43056,italic:0,skew:0},120:{depth:0,height:.43056,italic:0,skew:0},121:{depth:.22222,height:.43056,italic:0,skew:0},122:{depth:0,height:.43056,italic:0,skew:0},123:{depth:.08333,height:.69444,italic:0,skew:0},124:{depth:.08333,height:.69444,italic:0,skew:0},125:{depth:.08333,height:.69444,italic:0,skew:0},126:{depth:0,height:.61111,italic:0,skew:0},127:{depth:0,height:.61111,italic:0,skew:0},305:{depth:0,height:.43056,italic:0,skew:0},567:{depth:.22222,height:.43056,italic:0,skew:0},768:{depth:0,height:.61111,italic:0,skew:0},769:{depth:0,height:.61111,italic:0,skew:0},770:{depth:0,height:.61111,italic:0,skew:0},771:{depth:0,height:.61111,italic:0,skew:0},772:{depth:0,height:.56555,italic:0,skew:0},774:{depth:0,height:.61111,italic:0,skew:0},776:{depth:0,height:.61111,italic:0,skew:0},778:{depth:0,height:.61111,italic:0,skew:0},780:{depth:0,height:.56597,italic:0,skew:0},915:{depth:0,height:.61111,italic:0,skew:0},916:{depth:0,height:.61111,italic:0,skew:0},920:{depth:0,height:.61111,italic:0,skew:0},923:{depth:0,height:.61111,italic:0,skew:0},926:{depth:0,height:.61111,italic:0,skew:0},928:{depth:0,height:.61111,italic:0,skew:0},931:{depth:0,height:.61111,italic:0,skew:0},933:{depth:0,height:.61111,italic:0,skew:0},934:{depth:0,height:.61111,italic:0,skew:0},936:{depth:0,height:.61111,italic:0,skew:0},937:{depth:0,height:.61111,italic:0,skew:0},2018:{depth:0,height:.61111,italic:0,skew:0},2019:{depth:0,height:.61111,italic:0,skew:0},8242:{depth:0,height:.61111,italic:0,skew:0}}}},{}],18:[function(e,t,i){var h=e("./utils");var a=e("./ParseError");var r={"\\sqrt":{numArgs:1,numOptionalArgs:1,handler:function(e,t,i,h){return{type:"sqrt",body:i,index:t}}},"\\text":{numArgs:1,argTypes:["text"],greediness:2,handler:function(e,t){var i;if(t.type==="ordgroup"){i=t.value}else{i=[t]}return{type:"text",body:i}}},"\\color":{numArgs:2,allowedInText:true,greediness:3,argTypes:["color","original"],handler:function(e,t,i){var h;if(i.type==="ordgroup"){h=i.value}else{h=[i]}return{type:"color",color:t.value,value:h}}},"\\overline":{numArgs:1,handler:function(e,t){return{type:"overline",body:t}}},"\\rule":{numArgs:2,numOptionalArgs:1,argTypes:["size","size","size"],handler:function(e,t,i,h){return{type:"rule",shift:t&&t.value,width:i.value,height:h.value}}},"\\KaTeX":{numArgs:0,handler:function(e){return{type:"katex"}}},"\\phantom":{numArgs:1,handler:function(e,t){var i;if(t.type==="ordgroup"){i=t.value}else{i=[t]}return{type:"phantom",value:i}}}};var l={"\\bigl":{type:"open",size:1},"\\Bigl":{type:"open",size:2},"\\biggl":{type:"open",size:3},"\\Biggl":{type:"open",size:4},"\\bigr":{type:"close",size:1},"\\Bigr":{type:"close",size:2},"\\biggr":{type:"close",size:3},"\\Biggr":{type:"close",size:4},"\\bigm":{type:"rel",size:1},"\\Bigm":{type:"rel",size:2},"\\biggm":{type:"rel",size:3},"\\Biggm":{type:"rel",size:4},"\\big":{type:"textord",size:1},"\\Big":{type:"textord",size:2},"\\bigg":{type:"textord",size:3},"\\Bigg":{type:"textord",size:4}};var s=["(",")","[","\\lbrack","]","\\rbrack","\\{","\\lbrace","\\}","\\rbrace","\\lfloor","\\rfloor","\\lceil","\\rceil","<",">","\\langle","\\rangle","\\lvert","\\rvert","\\lVert","\\rVert","\\lgroup","\\rgroup","\\lmoustache","\\rmoustache","/","\\backslash","|","\\vert","\\|","\\Vert","\\uparrow","\\Uparrow","\\downarrow","\\Downarrow","\\updownarrow","\\Updownarrow","."];var p={"\\Bbb":"\\mathbb","\\bold":"\\mathbf","\\frak":"\\mathfrak"};var c=[{funcs:["\\blue","\\orange","\\pink","\\red","\\green","\\gray","\\purple","\\blueA","\\blueB","\\blueC","\\blueD","\\blueE","\\tealA","\\tealB","\\tealC","\\tealD","\\tealE","\\greenA","\\greenB","\\greenC","\\greenD","\\greenE","\\goldA","\\goldB","\\goldC","\\goldD","\\goldE","\\redA","\\redB","\\redC","\\redD","\\redE","\\maroonA","\\maroonB","\\maroonC","\\maroonD","\\maroonE","\\purpleA","\\purpleB","\\purpleC","\\purpleD","\\purpleE","\\mintA","\\mintB","\\mintC","\\grayA","\\grayB","\\grayC","\\grayD","\\grayE","\\grayF","\\grayG","\\grayH","\\grayI","\\kaBlue","\\kaGreen"],data:{numArgs:1,allowedInText:true,greediness:3,handler:function(e,t){var i;if(t.type==="ordgroup"){i=t.value}else{i=[t]}return{type:"color",color:"katex-"+e.slice(1),value:i}}}},{funcs:["\\arcsin","\\arccos","\\arctan","\\arg","\\cos","\\cosh","\\cot","\\coth","\\csc","\\deg","\\dim","\\exp","\\hom","\\ker","\\lg","\\ln","\\log","\\sec","\\sin","\\sinh","\\tan","\\tanh"],data:{numArgs:0,handler:function(e){return{type:"op",limits:false,symbol:false,body:e}}}},{funcs:["\\det","\\gcd","\\inf","\\lim","\\liminf","\\limsup","\\max","\\min","\\Pr","\\sup"],data:{numArgs:0,handler:function(e){return{type:"op",limits:true,symbol:false,body:e}}}},{funcs:["\\int","\\iint","\\iiint","\\oint"],data:{numArgs:0,handler:function(e){return{type:"op",limits:false,symbol:true,body:e}}}},{funcs:["\\coprod","\\bigvee","\\bigwedge","\\biguplus","\\bigcap","\\bigcup","\\intop","\\prod","\\sum","\\bigotimes","\\bigoplus","\\bigodot","\\bigsqcup","\\smallint"],data:{numArgs:0,handler:function(e){return{type:"op",limits:true,symbol:true,body:e}}}},{funcs:["\\dfrac","\\frac","\\tfrac","\\dbinom","\\binom","\\tbinom"],data:{numArgs:2,greediness:2,handler:function(e,t,i){var h;var a=null;var r=null;var l="auto";switch(e){case"\\dfrac":case"\\frac":case"\\tfrac":h=true;break;case"\\dbinom":case"\\binom":case"\\tbinom":h=false;a="(";r=")";break;default:throw new Error("Unrecognized genfrac command")}switch(e){case"\\dfrac":case"\\dbinom":l="display";break;case"\\tfrac":case"\\tbinom":l="text";break}return{type:"genfrac",numer:t,denom:i,hasBarLine:h,leftDelim:a,rightDelim:r,size:l}}}},{funcs:["\\llap","\\rlap"],data:{numArgs:1,allowedInText:true,handler:function(e,t){return{type:e.slice(1),body:t}}}},{funcs:["\\bigl","\\Bigl","\\biggl","\\Biggl","\\bigr","\\Bigr","\\biggr","\\Biggr","\\bigm","\\Bigm","\\biggm","\\Biggm","\\big","\\Big","\\bigg","\\Bigg","\\left","\\right"],data:{numArgs:1,handler:function(e,t,i){if(!h.contains(s,t.value)){throw new a("Invalid delimiter: '"+t.value+"' after '"+e+"'",this.lexer,i[1])}if(e==="\\left"||e==="\\right"){return{type:"leftright",value:t.value}}else{return{type:"delimsizing",size:l[e].size,delimType:l[e].type,value:t.value}}}}},{funcs:["\\tiny","\\scriptsize","\\footnotesize","\\small","\\normalsize","\\large","\\Large","\\LARGE","\\huge","\\Huge"],data:{numArgs:0}},{funcs:["\\displaystyle","\\textstyle","\\scriptstyle","\\scriptscriptstyle"],data:{numArgs:0}},{funcs:["\\mathrm","\\mathit","\\mathbf","\\mathbb","\\mathcal","\\mathfrak","\\mathscr","\\mathsf","\\mathtt","\\Bbb","\\bold","\\frak"],data:{numArgs:1,handler:function(e,t){if(e in p){e=p[e]}return{type:"font",font:e.slice(1),body:t}}}},{funcs:["\\acute","\\grave","\\ddot","\\tilde","\\bar","\\breve","\\check","\\hat","\\vec","\\dot"],data:{numArgs:1,handler:function(e,t){return{type:"accent",accent:e,base:t}}}},{funcs:["\\over","\\choose"],data:{numArgs:0,handler:function(e){var t;switch(e){case"\\over":t="\\frac";break;case"\\choose":t="\\binom";break;default:throw new Error("Unrecognized infix genfrac command")}return{type:"infix",replaceWith:t}}}},{funcs:["\\\\","\\cr"],data:{numArgs:0,numOptionalArgs:1,argTypes:["size"],handler:function(e,t){return{type:"cr",size:t}}}},{funcs:["\\begin","\\end"],data:{numArgs:1,argTypes:["text"],handler:function(e,t,i){if(t.type!=="ordgroup"){throw new a("Invalid environment name",this.lexer,i[1])}var h="";for(var r=0;r<t.value.length;++r){h+=t.value[r].value}return{type:"environment",name:h,namepos:i[1]}}}}];var n=function(e,t){for(var i=0;i<e.length;i++){r[e[i]]=t}};for(var o=0;o<c.length;o++){n(c[o].funcs,c[o].data)}for(var g in r){if(r.hasOwnProperty(g)){var d=r[g];r[g]={numArgs:d.numArgs,argTypes:d.argTypes,greediness:d.greediness===undefined?1:d.greediness,allowedInText:d.allowedInText?d.allowedInText:false,numOptionalArgs:d.numOptionalArgs===undefined?0:d.numOptionalArgs,handler:d.handler}}}t.exports={funcs:r}},{"./ParseError":5,"./utils":23}],19:[function(e,t,i){var h=e("./utils");function a(e,t){this.type=e;this.attributes={};this.children=t||[]}a.prototype.setAttribute=function(e,t){this.attributes[e]=t};a.prototype.toNode=function(){var e=document.createElementNS("http://www.w3.org/1998/Math/MathML",this.type);for(var t in this.attributes){if(Object.prototype.hasOwnProperty.call(this.attributes,t)){e.setAttribute(t,this.attributes[t])}}for(var i=0;i<this.children.length;i++){e.appendChild(this.children[i].toNode())}return e};a.prototype.toMarkup=function(){var e="<"+this.type;for(var t in this.attributes){if(Object.prototype.hasOwnProperty.call(this.attributes,t)){e+=" "+t+'="';e+=h.escape(this.attributes[t]);e+='"'}}e+=">";for(var i=0;i<this.children.length;i++){e+=this.children[i].toMarkup()}e+="</"+this.type+">";return e};function r(e){this.text=e}r.prototype.toNode=function(){return document.createTextNode(this.text)};r.prototype.toMarkup=function(){return h.escape(this.text)};t.exports={MathNode:a,TextNode:r}},{"./utils":23}],20:[function(e,t,i){function h(e,t,i){this.type=e;this.value=t;this.mode=i}function a(e,t,i){this.result=e;this.position=t}t.exports={ParseNode:h,ParseResult:a}},{}],21:[function(e,t,i){var h=e("./Parser");var a=function(e,t){var i=new h(e,t);return i.parse()};t.exports=a},{"./Parser":6}],22:[function(e,t,i){var h={math:{"\\equiv":{font:"main",group:"rel",replace:"\u2261"},"\\prec":{font:"main",group:"rel",replace:"\u227a"},"\\succ":{font:"main",group:"rel",replace:"\u227b"},"\\sim":{font:"main",group:"rel",replace:"\u223c"},"\\perp":{font:"main",group:"rel",replace:"\u22a5"},"\\preceq":{font:"main",group:"rel",replace:"\u2aaf"},"\\succeq":{font:"main",group:"rel",replace:"\u2ab0"},"\\simeq":{font:"main",group:"rel",replace:"\u2243"},"\\mid":{font:"main",group:"rel",replace:"\u2223"},"\\ll":{font:"main",group:"rel",replace:"\u226a"},"\\gg":{font:"main",group:"rel",replace:"\u226b"},"\\asymp":{font:"main",group:"rel",replace:"\u224d"},"\\parallel":{font:"main",group:"rel",replace:"\u2225"},"\\bowtie":{font:"main",group:"rel",replace:"\u22c8"},"\\smile":{font:"main",group:"rel",replace:"\u2323"},"\\sqsubseteq":{font:"main",group:"rel",replace:"\u2291"},"\\sqsupseteq":{font:"main",group:"rel",replace:"\u2292"},"\\doteq":{font:"main",group:"rel",replace:"\u2250"},"\\frown":{font:"main",group:"rel",replace:"\u2322"},"\\ni":{font:"main",group:"rel",replace:"\u220b"},"\\propto":{font:"main",group:"rel",replace:"\u221d"},"\\vdash":{font:"main",group:"rel",replace:"\u22a2"},"\\dashv":{font:"main",group:"rel",replace:"\u22a3"},"\\owns":{font:"main",group:"rel",replace:"\u220b"},"\\ldotp":{font:"main",group:"punct",replace:"."},"\\cdotp":{font:"main",group:"punct",replace:"\u22c5"},"\\#":{font:"main",group:"textord",replace:"#"},"\\&":{font:"main",group:"textord",replace:"&"},"\\aleph":{font:"main",group:"textord",replace:"\u2135"},"\\forall":{font:"main",group:"textord",replace:"\u2200"},"\\hbar":{font:"main",group:"textord",replace:"\u210f"},"\\exists":{font:"main",group:"textord",replace:"\u2203"},"\\nabla":{font:"main",group:"textord",replace:"\u2207"},"\\flat":{font:"main",group:"textord",replace:"\u266d"},"\\ell":{font:"main",group:"textord",replace:"\u2113"},"\\natural":{font:"main",group:"textord",replace:"\u266e"},"\\clubsuit":{font:"main",group:"textord",replace:"\u2663"},"\\wp":{font:"main",group:"textord",replace:"\u2118"},"\\sharp":{font:"main",group:"textord",replace:"\u266f"},"\\diamondsuit":{font:"main",group:"textord",replace:"\u2662"},"\\Re":{font:"main",group:"textord",replace:"\u211c"},"\\heartsuit":{font:"main",group:"textord",replace:"\u2661"},"\\Im":{font:"main",group:"textord",replace:"\u2111"},"\\spadesuit":{font:"main",group:"textord",replace:"\u2660"},"\\dag":{font:"main",group:"textord",replace:"\u2020"},"\\ddag":{font:"main",group:"textord",replace:"\u2021"},"\\rmoustache":{font:"main",group:"close",replace:"\u23b1"},"\\lmoustache":{font:"main",group:"open",replace:"\u23b0"},"\\rgroup":{font:"main",group:"close",replace:"\u27ef"},"\\lgroup":{font:"main",group:"open",replace:"\u27ee"},"\\mp":{font:"main",group:"bin",replace:"\u2213"},"\\ominus":{font:"main",group:"bin",replace:"\u2296"},"\\uplus":{font:"main",group:"bin",replace:"\u228e"},"\\sqcap":{font:"main",group:"bin",replace:"\u2293"},"\\ast":{font:"main",group:"bin",replace:"\u2217"},"\\sqcup":{font:"main",group:"bin",replace:"\u2294"},"\\bigcirc":{font:"main",group:"bin",replace:"\u25ef"},"\\bullet":{font:"main",group:"bin",replace:"\u2219"},"\\ddagger":{font:"main",group:"bin",replace:"\u2021"},"\\wr":{font:"main",group:"bin",replace:"\u2240"},"\\amalg":{font:"main",group:"bin",replace:"\u2a3f"},"\\longleftarrow":{font:"main",group:"rel",replace:"\u27f5"},"\\Leftarrow":{font:"main",group:"rel",replace:"\u21d0"},"\\Longleftarrow":{font:"main",group:"rel",replace:"\u27f8"},"\\longrightarrow":{font:"main",group:"rel",replace:"\u27f6"},"\\Rightarrow":{font:"main",group:"rel",replace:"\u21d2"},"\\Longrightarrow":{font:"main",group:"rel",replace:"\u27f9"},"\\leftrightarrow":{font:"main",group:"rel",replace:"\u2194"},"\\longleftrightarrow":{font:"main",group:"rel",replace:"\u27f7"},"\\Leftrightarrow":{font:"main",group:"rel",replace:"\u21d4"},"\\Longleftrightarrow":{font:"main",group:"rel",replace:"\u27fa"},"\\mapsto":{font:"main",group:"rel",replace:"\u21a6"},"\\longmapsto":{font:"main",group:"rel",replace:"\u27fc"},"\\nearrow":{font:"main",group:"rel",replace:"\u2197"},"\\hookleftarrow":{font:"main",group:"rel",replace:"\u21a9"},"\\hookrightarrow":{font:"main",group:"rel",replace:"\u21aa"},"\\searrow":{font:"main",group:"rel",replace:"\u2198"},"\\leftharpoonup":{font:"main",group:"rel",replace:"\u21bc"},"\\rightharpoonup":{font:"main",group:"rel",replace:"\u21c0"},"\\swarrow":{font:"main",group:"rel",replace:"\u2199"},"\\leftharpoondown":{font:"main",group:"rel",replace:"\u21bd"},"\\rightharpoondown":{font:"main",group:"rel",replace:"\u21c1"},"\\nwarrow":{font:"main",group:"rel",replace:"\u2196"},"\\rightleftharpoons":{font:"main",group:"rel",replace:"\u21cc"},"\\nless":{font:"ams",group:"rel",replace:"\u226e"},"\\nleqslant":{font:"ams",group:"rel",replace:"\ue010"},"\\nleqq":{font:"ams",group:"rel",replace:"\ue011"},"\\lneq":{font:"ams",group:"rel",replace:"\u2a87"},"\\lneqq":{font:"ams",group:"rel",replace:"\u2268"},"\\lvertneqq":{font:"ams",group:"rel",replace:"\ue00c"},"\\lnsim":{font:"ams",group:"rel",replace:"\u22e6"},"\\lnapprox":{font:"ams",group:"rel",replace:"\u2a89"},"\\nprec":{font:"ams",group:"rel",replace:"\u2280"},"\\npreceq":{font:"ams",group:"rel",replace:"\u22e0"},"\\precnsim":{font:"ams",group:"rel",replace:"\u22e8"},"\\precnapprox":{font:"ams",group:"rel",replace:"\u2ab9"},"\\nsim":{font:"ams",group:"rel",replace:"\u2241"},"\\nshortmid":{font:"ams",group:"rel",replace:"\ue006"},"\\nmid":{font:"ams",group:"rel",replace:"\u2224"},"\\nvdash":{font:"ams",group:"rel",replace:"\u22ac"},"\\nvDash":{font:"ams",group:"rel",replace:"\u22ad"},"\\ntriangleleft":{font:"ams",group:"rel",replace:"\u22ea"},"\\ntrianglelefteq":{font:"ams",group:"rel",replace:"\u22ec"},"\\subsetneq":{font:"ams",group:"rel",replace:"\u228a"},"\\varsubsetneq":{font:"ams",group:"rel",replace:"\ue01a"},"\\subsetneqq":{font:"ams",group:"rel",replace:"\u2acb"},"\\varsubsetneqq":{font:"ams",group:"rel",replace:"\ue017"},"\\ngtr":{font:"ams",group:"rel",replace:"\u226f"},"\\ngeqslant":{font:"ams",group:"rel",replace:"\ue00f"},"\\ngeqq":{font:"ams",group:"rel",replace:"\ue00e"},"\\gneq":{font:"ams",group:"rel",replace:"\u2a88"},"\\gneqq":{font:"ams",group:"rel",replace:"\u2269"},"\\gvertneqq":{font:"ams",group:"rel",replace:"\ue00d"},"\\gnsim":{font:"ams",group:"rel",replace:"\u22e7"},"\\gnapprox":{font:"ams",group:"rel",replace:"\u2a8a"},"\\nsucc":{font:"ams",group:"rel",replace:"\u2281"},"\\nsucceq":{font:"ams",group:"rel",replace:"\u22e1"},"\\succnsim":{font:"ams",group:"rel",replace:"\u22e9"},"\\succnapprox":{font:"ams",group:"rel",replace:"\u2aba"},"\\ncong":{font:"ams",group:"rel",replace:"\u2246"},"\\nshortparallel":{font:"ams",group:"rel",replace:"\ue007"},"\\nparallel":{font:"ams",group:"rel",replace:"\u2226"},"\\nVDash":{font:"ams",group:"rel",replace:"\u22af"},"\\ntriangleright":{font:"ams",group:"rel",replace:"\u22eb"},"\\ntrianglerighteq":{font:"ams",group:"rel",replace:"\u22ed"},"\\nsupseteqq":{font:"ams",group:"rel",replace:"\ue018"},"\\supsetneq":{font:"ams",group:"rel",replace:"\u228b"},"\\varsupsetneq":{font:"ams",group:"rel",replace:"\ue01b"},"\\supsetneqq":{font:"ams",group:"rel",replace:"\u2acc"},"\\varsupsetneqq":{font:"ams",group:"rel",replace:"\ue019"},"\\nVdash":{font:"ams",group:"rel",replace:"\u22ae"},"\\precneqq":{font:"ams",group:"rel",replace:"\u2ab5"},"\\succneqq":{font:"ams",group:"rel",replace:"\u2ab6"},"\\nsubseteqq":{font:"ams",group:"rel",replace:"\ue016"},"\\unlhd":{font:"ams",group:"bin",replace:"\u22b4"},"\\unrhd":{font:"ams",group:"bin",replace:"\u22b5"},"\\nleftarrow":{font:"ams",group:"rel",replace:"\u219a"},"\\nrightarrow":{font:"ams",group:"rel",replace:"\u219b"},"\\nLeftarrow":{font:"ams",group:"rel",replace:"\u21cd"},"\\nRightarrow":{font:"ams",group:"rel",replace:"\u21cf"},"\\nleftrightarrow":{font:"ams",group:"rel",replace:"\u21ae"},"\\nLeftrightarrow":{font:"ams",group:"rel",replace:"\u21ce"},"\\vartriangle":{font:"ams",group:"rel",replace:"\u25b3"},"\\hslash":{font:"ams",group:"textord",replace:"\u210f"},"\\triangledown":{font:"ams",group:"textord",replace:"\u25bd"},"\\lozenge":{font:"ams",group:"textord",replace:"\u25ca"},"\\circledS":{font:"ams",group:"textord",replace:"\u24c8"},"\\circledR":{font:"ams",group:"textord",replace:"\xae"},"\\measuredangle":{font:"ams",group:"textord",replace:"\u2221"},"\\nexists":{font:"ams",group:"textord",replace:"\u2204"},"\\mho":{font:"ams",group:"textord",replace:"\u2127"},"\\Finv":{font:"ams",group:"textord",replace:"\u2132"},"\\Game":{font:"ams",group:"textord",replace:"\u2141"},"\\Bbbk":{font:"ams",group:"textord",replace:"k"},"\\backprime":{font:"ams",group:"textord",replace:"\u2035"},"\\blacktriangle":{font:"ams",group:"textord",replace:"\u25b2"},"\\blacktriangledown":{font:"ams",group:"textord",replace:"\u25bc"},"\\blacksquare":{font:"ams",group:"textord",replace:"\u25a0"},"\\blacklozenge":{font:"ams",group:"textord",replace:"\u29eb"},"\\bigstar":{font:"ams",group:"textord",replace:"\u2605"},"\\sphericalangle":{font:"ams",group:"textord",replace:"\u2222"},"\\complement":{font:"ams",group:"textord",replace:"\u2201"},"\\eth":{font:"ams",group:"textord",replace:"\xf0"},"\\diagup":{font:"ams",group:"textord",replace:"\u2571"},"\\diagdown":{font:"ams",group:"textord",replace:"\u2572"},"\\square":{font:"ams",group:"textord",replace:"\u25a1"},"\\Box":{font:"ams",group:"textord",replace:"\u25a1"},"\\Diamond":{font:"ams",group:"textord",replace:"\u25ca"},"\\yen":{font:"ams",group:"textord",replace:"\xa5"},"\\checkmark":{font:"ams",group:"textord",replace:"\u2713"},"\\beth":{font:"ams",group:"textord",replace:"\u2136"},"\\daleth":{font:"ams",group:"textord",replace:"\u2138"},"\\gimel":{font:"ams",group:"textord",replace:"\u2137"},"\\digamma":{font:"ams",group:"textord",replace:"\u03dd"},"\\varkappa":{font:"ams",group:"textord",replace:"\u03f0"},"\\ulcorner":{font:"ams",group:"open",replace:"\u250c"},"\\urcorner":{font:"ams",group:"close",replace:"\u2510"},"\\llcorner":{font:"ams",group:"open",replace:"\u2514"},"\\lrcorner":{font:"ams",group:"close",replace:"\u2518"},"\\leqq":{font:"ams",group:"rel",replace:"\u2266"},"\\leqslant":{font:"ams",group:"rel",replace:"\u2a7d"},"\\eqslantless":{font:"ams",group:"rel",replace:"\u2a95"},"\\lesssim":{font:"ams",group:"rel",replace:"\u2272"},"\\lessapprox":{font:"ams",group:"rel",replace:"\u2a85"},"\\approxeq":{font:"ams",group:"rel",replace:"\u224a"},"\\lessdot":{font:"ams",group:"bin",replace:"\u22d6"},"\\lll":{font:"ams",group:"rel",replace:"\u22d8"},"\\lessgtr":{font:"ams",group:"rel",replace:"\u2276"},"\\lesseqgtr":{font:"ams",group:"rel",replace:"\u22da"},"\\lesseqqgtr":{font:"ams",group:"rel",replace:"\u2a8b"},"\\doteqdot":{font:"ams",group:"rel",replace:"\u2251"},"\\risingdotseq":{font:"ams",group:"rel",replace:"\u2253"},"\\fallingdotseq":{font:"ams",group:"rel",replace:"\u2252"},"\\backsim":{font:"ams",group:"rel",replace:"\u223d"},"\\backsimeq":{font:"ams",group:"rel",replace:"\u22cd"},"\\subseteqq":{font:"ams",group:"rel",replace:"\u2ac5"},"\\Subset":{font:"ams",group:"rel",replace:"\u22d0"},"\\sqsubset":{font:"ams",group:"rel",replace:"\u228f"},"\\preccurlyeq":{font:"ams",group:"rel",replace:"\u227c"},"\\curlyeqprec":{font:"ams",group:"rel",replace:"\u22de"},"\\precsim":{font:"ams",group:"rel",replace:"\u227e"},"\\precapprox":{font:"ams",group:"rel",replace:"\u2ab7"},"\\vartriangleleft":{font:"ams",group:"rel",replace:"\u22b2"},"\\trianglelefteq":{font:"ams",group:"rel",replace:"\u22b4"},"\\vDash":{font:"ams",group:"rel",replace:"\u22a8"},"\\Vvdash":{font:"ams",group:"rel",replace:"\u22aa"},"\\smallsmile":{font:"ams",group:"rel",replace:"\u2323"},"\\smallfrown":{font:"ams",group:"rel",replace:"\u2322"},"\\bumpeq":{font:"ams",group:"rel",replace:"\u224f"},"\\Bumpeq":{font:"ams",group:"rel",replace:"\u224e"},"\\geqq":{font:"ams",group:"rel",replace:"\u2267"},"\\geqslant":{font:"ams",group:"rel",replace:"\u2a7e"},"\\eqslantgtr":{font:"ams",group:"rel",replace:"\u2a96"},"\\gtrsim":{font:"ams",group:"rel",replace:"\u2273"},"\\gtrapprox":{font:"ams",group:"rel",replace:"\u2a86"},"\\gtrdot":{font:"ams",group:"bin",replace:"\u22d7"},"\\ggg":{font:"ams",group:"rel",replace:"\u22d9"},"\\gtrless":{font:"ams",group:"rel",replace:"\u2277"},"\\gtreqless":{font:"ams",group:"rel",replace:"\u22db"},"\\gtreqqless":{font:"ams",group:"rel",replace:"\u2a8c"},"\\eqcirc":{font:"ams",group:"rel",replace:"\u2256"},"\\circeq":{font:"ams",group:"rel",replace:"\u2257"},"\\triangleq":{font:"ams",group:"rel",replace:"\u225c"},"\\thicksim":{font:"ams",group:"rel",replace:"\u223c"},"\\thickapprox":{font:"ams",group:"rel",replace:"\u2248"},"\\supseteqq":{font:"ams",group:"rel",replace:"\u2ac6"},"\\Supset":{font:"ams",group:"rel",replace:"\u22d1"},"\\sqsupset":{font:"ams",group:"rel",replace:"\u2290"},"\\succcurlyeq":{font:"ams",group:"rel",replace:"\u227d"},"\\curlyeqsucc":{font:"ams",group:"rel",replace:"\u22df"},"\\succsim":{font:"ams",group:"rel",replace:"\u227f"},"\\succapprox":{font:"ams",group:"rel",replace:"\u2ab8"},"\\vartriangleright":{font:"ams",group:"rel",replace:"\u22b3"},"\\trianglerighteq":{font:"ams",group:"rel",replace:"\u22b5"},"\\Vdash":{font:"ams",group:"rel",replace:"\u22a9"},"\\shortmid":{font:"ams",group:"rel",replace:"\u2223"},"\\shortparallel":{font:"ams",group:"rel",replace:"\u2225"},"\\between":{font:"ams",group:"rel",replace:"\u226c"},"\\pitchfork":{font:"ams",group:"rel",replace:"\u22d4"},"\\varpropto":{font:"ams",group:"rel",replace:"\u221d"},"\\blacktriangleleft":{font:"ams",group:"rel",replace:"\u25c0"},"\\therefore":{font:"ams",group:"rel",replace:"\u2234"},"\\backepsilon":{font:"ams",group:"rel",replace:"\u220d"},"\\blacktriangleright":{font:"ams",group:"rel",replace:"\u25b6"},"\\because":{font:"ams",group:"rel",replace:"\u2235"},"\\llless":{font:"ams",group:"rel",replace:"\u22d8"},"\\gggtr":{font:"ams",group:"rel",replace:"\u22d9"},"\\lhd":{font:"ams",group:"bin",replace:"\u22b2"},"\\rhd":{font:"ams",group:"bin",replace:"\u22b3"},"\\eqsim":{font:"ams",group:"rel",replace:"\u2242"},"\\Join":{font:"main",group:"rel",replace:"\u22c8"},"\\Doteq":{font:"ams",group:"rel",replace:"\u2251"},"\\dotplus":{font:"ams",group:"bin",replace:"\u2214"},"\\smallsetminus":{font:"ams",group:"bin",replace:"\u2216"},"\\Cap":{font:"ams",group:"bin",replace:"\u22d2"},"\\Cup":{font:"ams",group:"bin",replace:"\u22d3"},"\\doublebarwedge":{font:"ams",group:"bin",replace:"\u2a5e"},"\\boxminus":{font:"ams",group:"bin",replace:"\u229f"},"\\boxplus":{font:"ams",group:"bin",replace:"\u229e"},"\\divideontimes":{font:"ams",group:"bin",replace:"\u22c7"},"\\ltimes":{font:"ams",group:"bin",replace:"\u22c9"},"\\rtimes":{font:"ams",group:"bin",replace:"\u22ca"},"\\leftthreetimes":{font:"ams",group:"bin",replace:"\u22cb"},"\\rightthreetimes":{font:"ams",group:"bin",replace:"\u22cc"},"\\curlywedge":{font:"ams",group:"bin",replace:"\u22cf"},"\\curlyvee":{font:"ams",group:"bin",replace:"\u22ce"},"\\circleddash":{font:"ams",group:"bin",replace:"\u229d"},"\\circledast":{font:"ams",group:"bin",replace:"\u229b"},"\\centerdot":{font:"ams",group:"bin",replace:"\u22c5"},"\\intercal":{font:"ams",group:"bin",replace:"\u22ba"},"\\doublecap":{font:"ams",group:"bin",replace:"\u22d2"},"\\doublecup":{font:"ams",group:"bin",replace:"\u22d3"},"\\boxtimes":{font:"ams",group:"bin",replace:"\u22a0"},"\\dashrightarrow":{font:"ams",group:"rel",replace:"\u21e2"},"\\dashleftarrow":{font:"ams",group:"rel",replace:"\u21e0"},"\\leftleftarrows":{font:"ams",group:"rel",replace:"\u21c7"},"\\leftrightarrows":{font:"ams",group:"rel",replace:"\u21c6"},"\\Lleftarrow":{font:"ams",group:"rel",replace:"\u21da"},"\\twoheadleftarrow":{font:"ams",group:"rel",replace:"\u219e"},"\\leftarrowtail":{font:"ams",group:"rel",replace:"\u21a2"},"\\looparrowleft":{font:"ams",group:"rel",replace:"\u21ab"},"\\leftrightharpoons":{font:"ams",group:"rel",replace:"\u21cb"},"\\curvearrowleft":{font:"ams",group:"rel",replace:"\u21b6"},"\\circlearrowleft":{font:"ams",group:"rel",replace:"\u21ba"},"\\Lsh":{font:"ams",group:"rel",replace:"\u21b0"},"\\upuparrows":{font:"ams",group:"rel",replace:"\u21c8"},"\\upharpoonleft":{font:"ams",group:"rel",replace:"\u21bf"},"\\downharpoonleft":{font:"ams",group:"rel",replace:"\u21c3"},"\\multimap":{font:"ams",group:"rel",replace:"\u22b8"},"\\leftrightsquigarrow":{font:"ams",group:"rel",replace:"\u21ad"},"\\rightrightarrows":{font:"ams",group:"rel",replace:"\u21c9"},"\\rightleftarrows":{font:"ams",group:"rel",replace:"\u21c4"},"\\twoheadrightarrow":{font:"ams",group:"rel",replace:"\u21a0"},"\\rightarrowtail":{font:"ams",group:"rel",replace:"\u21a3"},"\\looparrowright":{font:"ams",group:"rel",replace:"\u21ac"},"\\curvearrowright":{font:"ams",group:"rel",replace:"\u21b7"},"\\circlearrowright":{font:"ams",group:"rel",replace:"\u21bb"},"\\Rsh":{font:"ams",group:"rel",replace:"\u21b1"},"\\downdownarrows":{font:"ams",group:"rel",replace:"\u21ca"},"\\upharpoonright":{font:"ams",group:"rel",replace:"\u21be"},"\\downharpoonright":{font:"ams",group:"rel",replace:"\u21c2"},"\\rightsquigarrow":{font:"ams",group:"rel",replace:"\u21dd"},"\\leadsto":{font:"ams",group:"rel",replace:"\u21dd"},"\\Rrightarrow":{font:"ams",group:"rel",replace:"\u21db"},"\\restriction":{font:"ams",group:"rel",replace:"\u21be"},"`":{font:"main",group:"textord",replace:"\u2018"},"\\$":{font:"main",group:"textord",replace:"$"},"\\%":{font:"main",group:"textord",replace:"%"},"\\_":{font:"main",group:"textord",replace:"_"},"\\angle":{font:"main",group:"textord",replace:"\u2220"},"\\infty":{font:"main",group:"textord",replace:"\u221e"},"\\prime":{font:"main",group:"textord",replace:"\u2032"},"\\triangle":{font:"main",group:"textord",replace:"\u25b3"},"\\Gamma":{font:"main",group:"textord",replace:"\u0393"},"\\Delta":{font:"main",group:"textord",replace:"\u0394"},"\\Theta":{font:"main",group:"textord",replace:"\u0398"},"\\Lambda":{font:"main",group:"textord",replace:"\u039b"},"\\Xi":{font:"main",group:"textord",replace:"\u039e"},"\\Pi":{font:"main",group:"textord",replace:"\u03a0"},"\\Sigma":{font:"main",group:"textord",replace:"\u03a3"},"\\Upsilon":{font:"main",
-group:"textord",replace:"\u03a5"},"\\Phi":{font:"main",group:"textord",replace:"\u03a6"},"\\Psi":{font:"main",group:"textord",replace:"\u03a8"},"\\Omega":{font:"main",group:"textord",replace:"\u03a9"},"\\neg":{font:"main",group:"textord",replace:"\xac"},"\\lnot":{font:"main",group:"textord",replace:"\xac"},"\\top":{font:"main",group:"textord",replace:"\u22a4"},"\\bot":{font:"main",group:"textord",replace:"\u22a5"},"\\emptyset":{font:"main",group:"textord",replace:"\u2205"},"\\varnothing":{font:"ams",group:"textord",replace:"\u2205"},"\\alpha":{font:"main",group:"mathord",replace:"\u03b1"},"\\beta":{font:"main",group:"mathord",replace:"\u03b2"},"\\gamma":{font:"main",group:"mathord",replace:"\u03b3"},"\\delta":{font:"main",group:"mathord",replace:"\u03b4"},"\\epsilon":{font:"main",group:"mathord",replace:"\u03f5"},"\\zeta":{font:"main",group:"mathord",replace:"\u03b6"},"\\eta":{font:"main",group:"mathord",replace:"\u03b7"},"\\theta":{font:"main",group:"mathord",replace:"\u03b8"},"\\iota":{font:"main",group:"mathord",replace:"\u03b9"},"\\kappa":{font:"main",group:"mathord",replace:"\u03ba"},"\\lambda":{font:"main",group:"mathord",replace:"\u03bb"},"\\mu":{font:"main",group:"mathord",replace:"\u03bc"},"\\nu":{font:"main",group:"mathord",replace:"\u03bd"},"\\xi":{font:"main",group:"mathord",replace:"\u03be"},"\\omicron":{font:"main",group:"mathord",replace:"o"},"\\pi":{font:"main",group:"mathord",replace:"\u03c0"},"\\rho":{font:"main",group:"mathord",replace:"\u03c1"},"\\sigma":{font:"main",group:"mathord",replace:"\u03c3"},"\\tau":{font:"main",group:"mathord",replace:"\u03c4"},"\\upsilon":{font:"main",group:"mathord",replace:"\u03c5"},"\\phi":{font:"main",group:"mathord",replace:"\u03d5"},"\\chi":{font:"main",group:"mathord",replace:"\u03c7"},"\\psi":{font:"main",group:"mathord",replace:"\u03c8"},"\\omega":{font:"main",group:"mathord",replace:"\u03c9"},"\\varepsilon":{font:"main",group:"mathord",replace:"\u03b5"},"\\vartheta":{font:"main",group:"mathord",replace:"\u03d1"},"\\varpi":{font:"main",group:"mathord",replace:"\u03d6"},"\\varrho":{font:"main",group:"mathord",replace:"\u03f1"},"\\varsigma":{font:"main",group:"mathord",replace:"\u03c2"},"\\varphi":{font:"main",group:"mathord",replace:"\u03c6"},"*":{font:"main",group:"bin",replace:"\u2217"},"+":{font:"main",group:"bin"},"-":{font:"main",group:"bin",replace:"\u2212"},"\\cdot":{font:"main",group:"bin",replace:"\u22c5"},"\\circ":{font:"main",group:"bin",replace:"\u2218"},"\\div":{font:"main",group:"bin",replace:"\xf7"},"\\pm":{font:"main",group:"bin",replace:"\xb1"},"\\times":{font:"main",group:"bin",replace:"\xd7"},"\\cap":{font:"main",group:"bin",replace:"\u2229"},"\\cup":{font:"main",group:"bin",replace:"\u222a"},"\\setminus":{font:"main",group:"bin",replace:"\u2216"},"\\land":{font:"main",group:"bin",replace:"\u2227"},"\\lor":{font:"main",group:"bin",replace:"\u2228"},"\\wedge":{font:"main",group:"bin",replace:"\u2227"},"\\vee":{font:"main",group:"bin",replace:"\u2228"},"\\surd":{font:"main",group:"textord",replace:"\u221a"},"(":{font:"main",group:"open"},"[":{font:"main",group:"open"},"\\langle":{font:"main",group:"open",replace:"\u27e8"},"\\lvert":{font:"main",group:"open",replace:"\u2223"},"\\lVert":{font:"main",group:"open",replace:"\u2225"},")":{font:"main",group:"close"},"]":{font:"main",group:"close"},"?":{font:"main",group:"close"},"!":{font:"main",group:"close"},"\\rangle":{font:"main",group:"close",replace:"\u27e9"},"\\rvert":{font:"main",group:"close",replace:"\u2223"},"\\rVert":{font:"main",group:"close",replace:"\u2225"},"=":{font:"main",group:"rel"},"<":{font:"main",group:"rel"},">":{font:"main",group:"rel"},":":{font:"main",group:"rel"},"\\approx":{font:"main",group:"rel",replace:"\u2248"},"\\cong":{font:"main",group:"rel",replace:"\u2245"},"\\ge":{font:"main",group:"rel",replace:"\u2265"},"\\geq":{font:"main",group:"rel",replace:"\u2265"},"\\gets":{font:"main",group:"rel",replace:"\u2190"},"\\in":{font:"main",group:"rel",replace:"\u2208"},"\\notin":{font:"main",group:"rel",replace:"\u2209"},"\\subset":{font:"main",group:"rel",replace:"\u2282"},"\\supset":{font:"main",group:"rel",replace:"\u2283"},"\\subseteq":{font:"main",group:"rel",replace:"\u2286"},"\\supseteq":{font:"main",group:"rel",replace:"\u2287"},"\\nsubseteq":{font:"ams",group:"rel",replace:"\u2288"},"\\nsupseteq":{font:"ams",group:"rel",replace:"\u2289"},"\\models":{font:"main",group:"rel",replace:"\u22a8"},"\\leftarrow":{font:"main",group:"rel",replace:"\u2190"},"\\le":{font:"main",group:"rel",replace:"\u2264"},"\\leq":{font:"main",group:"rel",replace:"\u2264"},"\\ne":{font:"main",group:"rel",replace:"\u2260"},"\\neq":{font:"main",group:"rel",replace:"\u2260"},"\\rightarrow":{font:"main",group:"rel",replace:"\u2192"},"\\to":{font:"main",group:"rel",replace:"\u2192"},"\\ngeq":{font:"ams",group:"rel",replace:"\u2271"},"\\nleq":{font:"ams",group:"rel",replace:"\u2270"},"\\!":{font:"main",group:"spacing"},"\\ ":{font:"main",group:"spacing",replace:"\xa0"},"~":{font:"main",group:"spacing",replace:"\xa0"},"\\,":{font:"main",group:"spacing"},"\\:":{font:"main",group:"spacing"},"\\;":{font:"main",group:"spacing"},"\\enspace":{font:"main",group:"spacing"},"\\qquad":{font:"main",group:"spacing"},"\\quad":{font:"main",group:"spacing"},"\\space":{font:"main",group:"spacing",replace:"\xa0"},",":{font:"main",group:"punct"},";":{font:"main",group:"punct"},"\\colon":{font:"main",group:"punct",replace:":"},"\\barwedge":{font:"ams",group:"bin",replace:"\u22bc"},"\\veebar":{font:"ams",group:"bin",replace:"\u22bb"},"\\odot":{font:"main",group:"bin",replace:"\u2299"},"\\oplus":{font:"main",group:"bin",replace:"\u2295"},"\\otimes":{font:"main",group:"bin",replace:"\u2297"},"\\partial":{font:"main",group:"textord",replace:"\u2202"},"\\oslash":{font:"main",group:"bin",replace:"\u2298"},"\\circledcirc":{font:"ams",group:"bin",replace:"\u229a"},"\\boxdot":{font:"ams",group:"bin",replace:"\u22a1"},"\\bigtriangleup":{font:"main",group:"bin",replace:"\u25b3"},"\\bigtriangledown":{font:"main",group:"bin",replace:"\u25bd"},"\\dagger":{font:"main",group:"bin",replace:"\u2020"},"\\diamond":{font:"main",group:"bin",replace:"\u22c4"},"\\star":{font:"main",group:"bin",replace:"\u22c6"},"\\triangleleft":{font:"main",group:"bin",replace:"\u25c3"},"\\triangleright":{font:"main",group:"bin",replace:"\u25b9"},"\\{":{font:"main",group:"open",replace:"{"},"\\}":{font:"main",group:"close",replace:"}"},"\\lbrace":{font:"main",group:"open",replace:"{"},"\\rbrace":{font:"main",group:"close",replace:"}"},"\\lbrack":{font:"main",group:"open",replace:"["},"\\rbrack":{font:"main",group:"close",replace:"]"},"\\lfloor":{font:"main",group:"open",replace:"\u230a"},"\\rfloor":{font:"main",group:"close",replace:"\u230b"},"\\lceil":{font:"main",group:"open",replace:"\u2308"},"\\rceil":{font:"main",group:"close",replace:"\u2309"},"\\backslash":{font:"main",group:"textord",replace:"\\"},"|":{font:"main",group:"textord",replace:"\u2223"},"\\vert":{font:"main",group:"textord",replace:"\u2223"},"\\|":{font:"main",group:"textord",replace:"\u2225"},"\\Vert":{font:"main",group:"textord",replace:"\u2225"},"\\uparrow":{font:"main",group:"rel",replace:"\u2191"},"\\Uparrow":{font:"main",group:"rel",replace:"\u21d1"},"\\downarrow":{font:"main",group:"rel",replace:"\u2193"},"\\Downarrow":{font:"main",group:"rel",replace:"\u21d3"},"\\updownarrow":{font:"main",group:"rel",replace:"\u2195"},"\\Updownarrow":{font:"main",group:"rel",replace:"\u21d5"},"\\coprod":{font:"math",group:"op",replace:"\u2210"},"\\bigvee":{font:"math",group:"op",replace:"\u22c1"},"\\bigwedge":{font:"math",group:"op",replace:"\u22c0"},"\\biguplus":{font:"math",group:"op",replace:"\u2a04"},"\\bigcap":{font:"math",group:"op",replace:"\u22c2"},"\\bigcup":{font:"math",group:"op",replace:"\u22c3"},"\\int":{font:"math",group:"op",replace:"\u222b"},"\\intop":{font:"math",group:"op",replace:"\u222b"},"\\iint":{font:"math",group:"op",replace:"\u222c"},"\\iiint":{font:"math",group:"op",replace:"\u222d"},"\\prod":{font:"math",group:"op",replace:"\u220f"},"\\sum":{font:"math",group:"op",replace:"\u2211"},"\\bigotimes":{font:"math",group:"op",replace:"\u2a02"},"\\bigoplus":{font:"math",group:"op",replace:"\u2a01"},"\\bigodot":{font:"math",group:"op",replace:"\u2a00"},"\\oint":{font:"math",group:"op",replace:"\u222e"},"\\bigsqcup":{font:"math",group:"op",replace:"\u2a06"},"\\smallint":{font:"math",group:"op",replace:"\u222b"},"\\ldots":{font:"main",group:"inner",replace:"\u2026"},"\\cdots":{font:"main",group:"inner",replace:"\u22ef"},"\\ddots":{font:"main",group:"inner",replace:"\u22f1"},"\\vdots":{font:"main",group:"textord",replace:"\u22ee"},"\\acute":{font:"main",group:"accent",replace:"\xb4"},"\\grave":{font:"main",group:"accent",replace:"`"},"\\ddot":{font:"main",group:"accent",replace:"\xa8"},"\\tilde":{font:"main",group:"accent",replace:"~"},"\\bar":{font:"main",group:"accent",replace:"\xaf"},"\\breve":{font:"main",group:"accent",replace:"\u02d8"},"\\check":{font:"main",group:"accent",replace:"\u02c7"},"\\hat":{font:"main",group:"accent",replace:"^"},"\\vec":{font:"main",group:"accent",replace:"\u20d7"},"\\dot":{font:"main",group:"accent",replace:"\u02d9"},"\\imath":{font:"main",group:"mathord",replace:"\u0131"},"\\jmath":{font:"main",group:"mathord",replace:"\u0237"}},text:{"\\ ":{font:"main",group:"spacing",replace:"\xa0"}," ":{font:"main",group:"spacing",replace:"\xa0"},"~":{font:"main",group:"spacing",replace:"\xa0"}}};var a='0123456789/@."';for(var r=0;r<a.length;r++){var l=a.charAt(r);h.math[l]={font:"main",group:"textord"}}var s="0123456789`!@*()-=+[]'\";:?/.,";for(var r=0;r<s.length;r++){var l=s.charAt(r);h.text[l]={font:"main",group:"textord"}}var p="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";for(var r=0;r<p.length;r++){var l=p.charAt(r);h.math[l]={font:"main",group:"mathord"};h.text[l]={font:"main",group:"textord"}}t.exports=h},{}],23:[function(e,t,i){var h=Array.prototype.indexOf;var a=function(e,t){if(e==null){return-1}if(h&&e.indexOf===h){return e.indexOf(t)}var i=0,a=e.length;for(;i<a;i++){if(e[i]===t){return i}}return-1};var r=function(e,t){return a(e,t)!==-1};var l=function(e,t){return e===undefined?t:e};var s=/([A-Z])/g;var p=function(e){return e.replace(s,"-$1").toLowerCase()};var c={"&":"&amp;",">":"&gt;","<":"&lt;",'"':"&quot;","'":"&#x27;"};var n=/[&><"']/g;function o(e){return c[e]}function g(e){return(""+e).replace(n,o)}var d;if(typeof document!=="undefined"){var w=document.createElement("span");if("textContent"in w){d=function(e,t){e.textContent=t}}else{d=function(e,t){e.innerText=t}}}function u(e){d(e,"")}t.exports={contains:r,deflt:l,escape:g,hyphenate:p,indexOf:a,setTextContent:d,clearNode:u}},{}]},{},[1])(1)});
+(function(e){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=e()}else if(typeof define==="function"&&define.amd){define([],e)}else{var t;if(typeof window!=="undefined"){t=window}else if(typeof global!=="undefined"){t=global}else if(typeof self!=="undefined"){t=self}else{t=this}t.katex=e()}})(function(){var e,t,r;return function a(e,t,r){function i(s,l){if(!t[s]){if(!e[s]){var o=typeof require=="function"&&require;if(!l&&o)return o(s,!0);if(n)return n(s,!0);var u=new Error("Cannot find module '"+s+"'");throw u.code="MODULE_NOT_FOUND",u}var p=t[s]={exports:{}};e[s][0].call(p.exports,function(t){var r=e[s][1][t];return i(r?r:t)},p,p.exports,a,e,t,r)}return t[s].exports}var n=typeof require=="function"&&require;for(var s=0;s<r.length;s++)i(r[s]);return i}({1:[function(e,t,r){var a=e("./src/ParseError");var i=e("./src/Settings");var n=e("./src/buildTree");var s=e("./src/parseTree");var l=e("./src/utils");var o=function(e,t,r){l.clearNode(t);var a=new i(r);var o=s(e,a);var u=n(o,e,a).toNode();t.appendChild(u)};if(typeof document!=="undefined"){if(document.compatMode!=="CSS1Compat"){typeof console!=="undefined"&&console.warn("Warning: KaTeX doesn't work in quirks mode. Make sure your "+"website has a suitable doctype.");o=function(){throw new a("KaTeX doesn't work in quirks mode.")}}}var u=function(e,t){var r=new i(t);var a=s(e,r);return n(a,e,r).toMarkup()};var p=function(e,t){var r=new i(t);return s(e,r)};t.exports={render:o,renderToString:u,__parse:p,ParseError:a}},{"./src/ParseError":5,"./src/Settings":7,"./src/buildTree":12,"./src/parseTree":21,"./src/utils":23}],2:[function(e,t,r){"use strict";function a(e){if(!e.__matchAtRelocatable){var t=e.source+"|()";var r="g"+(e.ignoreCase?"i":"")+(e.multiline?"m":"")+(e.unicode?"u":"");e.__matchAtRelocatable=new RegExp(t,r)}return e.__matchAtRelocatable}function i(e,t,r){if(e.global||e.sticky){throw new Error("matchAt(...): Only non-global regexes are supported")}var i=a(e);i.lastIndex=r;var n=i.exec(t);if(n[n.length-1]==null){n.length=n.length-1;return n}else{return null}}t.exports=i},{}],3:[function(e,t,r){var a=e("match-at");var i=e("./ParseError");function n(e){this._input=e}function s(e,t,r){this.text=e;this.data=t;this.position=r}var l=new RegExp("([ \r\n	]+)|("+"---?"+"|[!-\\[\\]-\u2027\u202a-\ud7ff\uf900-\uffff]"+"|[\ud800-\udbff][\udc00-\udfff]"+"|\\\\(?:[a-zA-Z]+|[^\ud800-\udfff])"+")");var o=/\s*/;n.prototype._innerLex=function(e,t){var r=this._input;if(e===r.length){return new s("EOF",null,e)}var n=a(l,r,e);if(n===null){throw new i("Unexpected character: '"+r[e]+"'",this,e)}else if(n[2]){return new s(n[2],null,e+n[2].length)}else if(t){return this._innerLex(e+n[1].length,true)}else{return new s(" ",null,e+n[1].length)}};var u=/#[a-z0-9]+|[a-z]+/i;n.prototype._innerLexColor=function(e){var t=this._input;var r=a(o,t,e)[0];e+=r.length;var n;if(n=a(u,t,e)){return new s(n[0],null,e+n[0].length)}else{throw new i("Invalid color",this,e)}};var p=/(-?)\s*(\d+(?:\.\d*)?|\.\d+)\s*([a-z]{2})/;n.prototype._innerLexSize=function(e){var t=this._input;var r=a(o,t,e)[0];e+=r.length;var n;if(n=a(p,t,e)){var l=n[3];if(l!=="em"&&l!=="ex"){throw new i("Invalid unit: '"+l+"'",this,e)}return new s(n[0],{number:+(n[1]+n[2]),unit:l},e+n[0].length)}throw new i("Invalid size",this,e)};n.prototype._innerLexWhitespace=function(e){var t=this._input;var r=a(o,t,e)[0];e+=r.length;return new s(r[0],null,e)};n.prototype.lex=function(e,t){if(t==="math"){return this._innerLex(e,true)}else if(t==="text"){return this._innerLex(e,false)}else if(t==="color"){return this._innerLexColor(e)}else if(t==="size"){return this._innerLexSize(e)}else if(t==="whitespace"){return this._innerLexWhitespace(e)}};t.exports=n},{"./ParseError":5,"match-at":2}],4:[function(e,t,r){function a(e){this.style=e.style;this.color=e.color;this.size=e.size;this.phantom=e.phantom;this.font=e.font;if(e.parentStyle===undefined){this.parentStyle=e.style}else{this.parentStyle=e.parentStyle}if(e.parentSize===undefined){this.parentSize=e.size}else{this.parentSize=e.parentSize}}a.prototype.extend=function(e){var t={style:this.style,size:this.size,color:this.color,parentStyle:this.style,parentSize:this.size,phantom:this.phantom,font:this.font};for(var r in e){if(e.hasOwnProperty(r)){t[r]=e[r]}}return new a(t)};a.prototype.withStyle=function(e){return this.extend({style:e})};a.prototype.withSize=function(e){return this.extend({size:e})};a.prototype.withColor=function(e){return this.extend({color:e})};a.prototype.withPhantom=function(){return this.extend({phantom:true})};a.prototype.withFont=function(e){return this.extend({font:e})};a.prototype.reset=function(){return this.extend({})};var i={"katex-blue":"#6495ed","katex-orange":"#ffa500","katex-pink":"#ff00af","katex-red":"#df0030","katex-green":"#28ae7b","katex-gray":"gray","katex-purple":"#9d38bd","katex-blueA":"#c7e9f1","katex-blueB":"#9cdceb","katex-blueC":"#58c4dd","katex-blueD":"#29abca","katex-blueE":"#1c758a","katex-tealA":"#acead7","katex-tealB":"#76ddc0","katex-tealC":"#5cd0b3","katex-tealD":"#55c1a7","katex-tealE":"#49a88f","katex-greenA":"#c9e2ae","katex-greenB":"#a6cf8c","katex-greenC":"#83c167","katex-greenD":"#77b05d","katex-greenE":"#699c52","katex-goldA":"#f7c797","katex-goldB":"#f9b775","katex-goldC":"#f0ac5f","katex-goldD":"#e1a158","katex-goldE":"#c78d46","katex-redA":"#f7a1a3","katex-redB":"#ff8080","katex-redC":"#fc6255","katex-redD":"#e65a4c","katex-redE":"#cf5044","katex-maroonA":"#ecabc1","katex-maroonB":"#ec92ab","katex-maroonC":"#c55f73","katex-maroonD":"#a24d61","katex-maroonE":"#94424f","katex-purpleA":"#caa3e8","katex-purpleB":"#b189c6","katex-purpleC":"#9a72ac","katex-purpleD":"#715582","katex-purpleE":"#644172","katex-mintA":"#f5f9e8","katex-mintB":"#edf2df","katex-mintC":"#e0e5cc","katex-grayA":"#fdfdfd","katex-grayB":"#f7f7f7","katex-grayC":"#eeeeee","katex-grayD":"#dddddd","katex-grayE":"#cccccc","katex-grayF":"#aaaaaa","katex-grayG":"#999999","katex-grayH":"#555555","katex-grayI":"#333333","katex-kaBlue":"#314453","katex-kaGreen":"#639b24"};a.prototype.getColor=function(){if(this.phantom){return"transparent"}else{return i[this.color]||this.color}};t.exports=a},{}],5:[function(e,t,r){function a(e,t,r){var i="KaTeX parse error: "+e;if(t!==undefined&&r!==undefined){i+=" at position "+r+": ";var n=t._input;n=n.slice(0,r)+"\u0332"+n.slice(r);var s=Math.max(0,r-15);var l=r+15;i+=n.slice(s,l)}var o=new Error(i);o.name="ParseError";o.__proto__=a.prototype;o.position=r;return o}a.prototype.__proto__=Error.prototype;t.exports=a},{}],6:[function(e,t,r){var a=e("./functions");var i=e("./environments");var n=e("./Lexer");var s=e("./symbols");var l=e("./utils");var o=e("./parseData");var u=e("./ParseError");function p(e,t){this.lexer=new n(e);this.settings=t}var h=o.ParseNode;function c(e,t){this.result=e;this.isFunction=t}p.prototype.expect=function(e,t){if(this.nextToken.text!==e){throw new u("Expected '"+e+"', got '"+this.nextToken.text+"'",this.lexer,this.nextToken.position)}if(t!==false){this.consume()}};p.prototype.consume=function(){this.pos=this.nextToken.position;this.nextToken=this.lexer.lex(this.pos,this.mode)};p.prototype.parse=function(){this.mode="math";this.pos=0;this.nextToken=this.lexer.lex(this.pos,this.mode);var e=this.parseInput();return e};p.prototype.parseInput=function(){var e=this.parseExpression(false);this.expect("EOF",false);return e};var v=["}","\\end","\\right","&","\\\\","\\cr"];p.prototype.parseExpression=function(e,t){var r=[];while(true){var a=this.nextToken;var i=this.pos;if(v.indexOf(a.text)!==-1){break}if(t&&a.text===t){break}var n=this.parseAtom();if(!n){if(!this.settings.throwOnError&&a.text[0]==="\\"){var s=this.handleUnsupportedCmd();r.push(s);i=a.position;continue}break}if(e&&n.type==="infix"){this.pos=i;this.nextToken=a;break}r.push(n)}return this.handleInfixNodes(r)};p.prototype.handleInfixNodes=function(e){var t=-1;var r;for(var a=0;a<e.length;a++){var i=e[a];if(i.type==="infix"){if(t!==-1){throw new u("only one infix operator per group",this.lexer,-1)}t=a;r=i.value.replaceWith}}if(t!==-1){var n;var s;var l=e.slice(0,t);var o=e.slice(t+1);if(l.length===1&&l[0].type==="ordgroup"){n=l[0]}else{n=new h("ordgroup",l,this.mode)}if(o.length===1&&o[0].type==="ordgroup"){s=o[0]}else{s=new h("ordgroup",o,this.mode)}var p=this.callFunction(r,[n,s],null);return[new h(p.type,p,this.mode)]}else{return e}};var m=1;p.prototype.handleSupSubscript=function(e){var t=this.nextToken.text;var r=this.pos;this.consume();var i=this.parseGroup();if(!i){if(!this.settings.throwOnError&&this.nextToken.text[0]==="\\"){return this.handleUnsupportedCmd()}else{throw new u("Expected group after '"+t+"'",this.lexer,r+1)}}else if(i.isFunction){var n=a[i.result].greediness;if(n>m){return this.parseFunction(i)}else{throw new u("Got function '"+i.result+"' with no arguments "+"as "+e,this.lexer,r+1)}}else{return i.result}};p.prototype.handleUnsupportedCmd=function(){var e=this.nextToken.text;var t=[];for(var r=0;r<e.length;r++){t.push(new h("textord",e[r],"text"))}var a=new h("text",{body:t,type:"text"},this.mode);var i=new h("color",{color:this.settings.errorColor,value:[a],type:"color"},this.mode);this.consume();return i};p.prototype.parseAtom=function(){var e=this.parseImplicitGroup();if(this.mode==="text"){return e}var t;var r;while(true){var a=this.nextToken;if(a.text==="\\limits"||a.text==="\\nolimits"){if(!e||e.type!=="op"){throw new u("Limit controls must follow a math operator",this.lexer,this.pos)}else{var i=a.text==="\\limits";e.value.limits=i;e.value.alwaysHandleSupSub=true}this.consume()}else if(a.text==="^"){if(t){throw new u("Double superscript",this.lexer,this.pos)}t=this.handleSupSubscript("superscript")}else if(a.text==="_"){if(r){throw new u("Double subscript",this.lexer,this.pos)}r=this.handleSupSubscript("subscript")}else if(a.text==="'"){var n=new h("textord","\\prime",this.mode);var s=[n];this.consume();while(this.nextToken.text==="'"){s.push(n);this.consume()}t=new h("ordgroup",s,this.mode)}else{break}}if(t||r){return new h("supsub",{base:e,sup:t,sub:r},this.mode)}else{return e}};var f=["\\tiny","\\scriptsize","\\footnotesize","\\small","\\normalsize","\\large","\\Large","\\LARGE","\\huge","\\Huge"];var d=["\\displaystyle","\\textstyle","\\scriptstyle","\\scriptscriptstyle"];p.prototype.parseImplicitGroup=function(){var e=this.parseSymbol();if(e==null){return this.parseFunction()}var t=e.result;var r;if(t==="\\left"){var a=this.parseFunction(e);r=this.parseExpression(false);this.expect("\\right",false);var n=this.parseFunction();return new h("leftright",{body:r,left:a.value.value,right:n.value.value},this.mode)}else if(t==="\\begin"){var s=this.parseFunction(e);var o=s.value.name;if(!i.hasOwnProperty(o)){throw new u("No such environment: "+o,this.lexer,s.value.namepos)}var p=i[o];var c=this.parseArguments("\\begin{"+o+"}",p);var v={mode:this.mode,envName:o,parser:this,lexer:this.lexer,positions:c.pop()};var m=p.handler(v,c);this.expect("\\end",false);var g=this.parseFunction();if(g.value.name!==o){throw new u("Mismatch: \\begin{"+o+"} matched "+"by \\end{"+g.value.name+"}",this.lexer)}m.position=g.position;return m}else if(l.contains(f,t)){r=this.parseExpression(false);return new h("sizing",{size:"size"+(l.indexOf(f,t)+1),value:r},this.mode)}else if(l.contains(d,t)){r=this.parseExpression(true);return new h("styling",{style:t.slice(1,t.length-5),value:r},this.mode)}else{return this.parseFunction(e)}};p.prototype.parseFunction=function(e){if(!e){e=this.parseGroup()}if(e){if(e.isFunction){var t=e.result;var r=a[t];if(this.mode==="text"&&!r.allowedInText){throw new u("Can't use function '"+t+"' in text mode",this.lexer,e.position)}var i=this.parseArguments(t,r);var n=this.callFunction(t,i,i.pop());return new h(n.type,n,this.mode)}else{return e.result}}else{return null}};p.prototype.callFunction=function(e,t,r){var i={funcName:e,parser:this,lexer:this.lexer,positions:r};return a[e].handler(i,t)};p.prototype.parseArguments=function(e,t){var r=t.numArgs+t.numOptionalArgs;if(r===0){return[[this.pos]]}var i=t.greediness;var n=[this.pos];var s=[];for(var l=0;l<r;l++){var o=t.argTypes&&t.argTypes[l];var p;if(l<t.numOptionalArgs){if(o){p=this.parseSpecialGroup(o,true)}else{p=this.parseOptionalGroup()}if(!p){s.push(null);n.push(this.pos);continue}}else{if(o){p=this.parseSpecialGroup(o)}else{p=this.parseGroup()}if(!p){if(!this.settings.throwOnError&&this.nextToken.text[0]==="\\"){p=new c(this.handleUnsupportedCmd(this.nextToken.text),false)}else{throw new u("Expected group after '"+e+"'",this.lexer,this.pos)}}}var h;if(p.isFunction){var v=a[p.result].greediness;if(v>i){h=this.parseFunction(p)}else{throw new u("Got function '"+p.result+"' as "+"argument to '"+e+"'",this.lexer,this.pos-1)}}else{h=p.result}s.push(h);n.push(this.pos)}s.push(n);return s};p.prototype.parseSpecialGroup=function(e,t){var r=this.mode;if(e==="original"){e=r}if(e==="color"||e==="size"){var a=this.nextToken;if(t&&a.text!=="["){return null}this.mode=e;this.expect(t?"[":"{");var i=this.nextToken;this.mode=r;var n;if(e==="color"){n=i.text}else{n=i.data}this.consume();this.expect(t?"]":"}");return new c(new h(e,n,r),false)}else if(e==="text"){var s=this.lexer.lex(this.pos,"whitespace");this.pos=s.position}this.mode=e;this.nextToken=this.lexer.lex(this.pos,e);var l;if(t){l=this.parseOptionalGroup()}else{l=this.parseGroup()}this.mode=r;this.nextToken=this.lexer.lex(this.pos,r);return l};p.prototype.parseGroup=function(){if(this.nextToken.text==="{"){this.consume();var e=this.parseExpression(false);this.expect("}");return new c(new h("ordgroup",e,this.mode),false)}else{return this.parseSymbol()}};p.prototype.parseOptionalGroup=function(){if(this.nextToken.text==="["){this.consume();var e=this.parseExpression(false,"]");this.expect("]");return new c(new h("ordgroup",e,this.mode),false)}else{return null}};p.prototype.parseSymbol=function(){var e=this.nextToken;if(a[e.text]){this.consume();return new c(e.text,true)}else if(s[this.mode][e.text]){this.consume();return new c(new h(s[this.mode][e.text].group,e.text,this.mode),false)}else{return null}};p.prototype.ParseNode=h;t.exports=p},{"./Lexer":3,"./ParseError":5,"./environments":15,"./functions":18,"./parseData":20,"./symbols":22,"./utils":23}],7:[function(e,t,r){function a(e,t){return e===undefined?t:e}function i(e){e=e||{};this.displayMode=a(e.displayMode,false);this.throwOnError=a(e.throwOnError,true);this.errorColor=a(e.errorColor,"#cc0000")}t.exports=i},{}],8:[function(e,t,r){function a(e,t,r,a){this.id=e;this.size=t;this.cramped=a;this.sizeMultiplier=r}a.prototype.sup=function(){return m[f[this.id]]};a.prototype.sub=function(){return m[d[this.id]]};a.prototype.fracNum=function(){return m[g[this.id]]};a.prototype.fracDen=function(){return m[y[this.id]]};a.prototype.cramp=function(){return m[b[this.id]]};a.prototype.cls=function(){return c[this.size]+(this.cramped?" cramped":" uncramped")};a.prototype.reset=function(){return v[this.size]};var i=0;var n=1;var s=2;var l=3;var o=4;var u=5;var p=6;var h=7;var c=["displaystyle textstyle","textstyle","scriptstyle","scriptscriptstyle"];var v=["reset-textstyle","reset-textstyle","reset-scriptstyle","reset-scriptscriptstyle"];var m=[new a(i,0,1,false),new a(n,0,1,true),new a(s,1,1,false),new a(l,1,1,true),new a(o,2,.7,false),new a(u,2,.7,true),new a(p,3,.5,false),new a(h,3,.5,true)];var f=[o,u,o,u,p,h,p,h];var d=[u,u,u,u,h,h,h,h];var g=[s,l,o,u,p,h,p,h];var y=[l,l,u,u,h,h,h,h];var b=[n,n,l,l,u,u,h,h];t.exports={DISPLAY:m[i],TEXT:m[s],SCRIPT:m[o],SCRIPTSCRIPT:m[p]}},{}],9:[function(e,t,r){var a=e("./domTree");var i=e("./fontMetrics");var n=e("./symbols");var s=e("./utils");var l=["\\Gamma","\\Delta","\\Theta","\\Lambda","\\Xi","\\Pi","\\Sigma","\\Upsilon","\\Phi","\\Psi","\\Omega"];var o=["\u0131","\u0237"];var u=function(e,t,r,s,l){if(n[r][e]&&n[r][e].replace){e=n[r][e].replace}var o=i.getCharacterMetrics(e,t);var u;if(o){u=new a.symbolNode(e,o.height,o.depth,o.italic,o.skew,l)}else{typeof console!=="undefined"&&console.warn("No character metrics for '"+e+"' in style '"+t+"'");u=new a.symbolNode(e,0,0,0,0,l)}if(s){u.style.color=s}return u};var p=function(e,t,r,a){if(e==="\\"||n[t][e].font==="main"){return u(e,"Main-Regular",t,r,a)}else{return u(e,"AMS-Regular",t,r,a.concat(["amsrm"]))}};var h=function(e,t,r,a,i){if(i==="mathord"){return c(e,t,r,a)}else if(i==="textord"){return u(e,"Main-Regular",t,r,a.concat(["mathrm"]))}else{throw new Error("unexpected type: "+i+" in mathDefault")}};var c=function(e,t,r,a){if(/[0-9]/.test(e.charAt(0))||s.contains(o,e)||s.contains(l,e)){return u(e,"Main-Italic",t,r,a.concat(["mainit"]))}else{return u(e,"Math-Italic",t,r,a.concat(["mathit"]))}};var v=function(e,t,r){var a=e.mode;var l=e.value;if(n[a][l]&&n[a][l].replace){l=n[a][l].replace}var p=["mord"];var v=t.getColor();var m=t.font;if(m){if(m==="mathit"||s.contains(o,l)){return c(l,a,v,p)}else{var f=w[m].fontName;if(i.getCharacterMetrics(l,f)){return u(l,f,a,v,p.concat([m]))}else{return h(l,a,v,p,r)}}}else{return h(l,a,v,p,r)}};var m=function(e){var t=0;var r=0;var a=0;if(e.children){for(var i=0;i<e.children.length;i++){if(e.children[i].height>t){t=e.children[i].height}if(e.children[i].depth>r){r=e.children[i].depth}if(e.children[i].maxFontSize>a){a=e.children[i].maxFontSize}}}e.height=t;e.depth=r;e.maxFontSize=a};var f=function(e,t,r){var i=new a.span(e,t);m(i);if(r){i.style.color=r}return i};var d=function(e){var t=new a.documentFragment(e);m(t);return t};var g=function(e,t){var r=f([],[new a.symbolNode("\u200b")]);r.style.fontSize=t/e.style.sizeMultiplier+"em";var i=f(["fontsize-ensurer","reset-"+e.size,"size5"],[r]);return i};var y=function(e,t,r,i){var n;var s;var l;if(t==="individualShift"){var o=e;e=[o[0]];n=-o[0].shift-o[0].elem.depth;s=n;for(l=1;l<o.length;l++){var u=-o[l].shift-s-o[l].elem.depth;var p=u-(o[l-1].elem.height+o[l-1].elem.depth);s=s+u;e.push({type:"kern",size:p});e.push(o[l])}}else if(t==="top"){var h=r;for(l=0;l<e.length;l++){if(e[l].type==="kern"){h-=e[l].size}else{h-=e[l].elem.height+e[l].elem.depth}}n=h}else if(t==="bottom"){n=-r}else if(t==="shift"){n=-e[0].elem.depth-r}else if(t==="firstBaseline"){n=-e[0].elem.depth}else{n=0}var c=0;for(l=0;l<e.length;l++){if(e[l].type==="elem"){c=Math.max(c,e[l].elem.maxFontSize)}}var v=g(i,c);var m=[];s=n;for(l=0;l<e.length;l++){if(e[l].type==="kern"){s+=e[l].size}else{var d=e[l].elem;var y=-d.depth-s;s+=d.height+d.depth;var b=f([],[v,d]);b.height-=y;b.depth+=y;b.style.top=y+"em";m.push(b)}}var x=f(["baseline-fix"],[v,new a.symbolNode("\u200b")]);m.push(x);var w=f(["vlist"],m);w.height=Math.max(s,w.height);w.depth=Math.max(-n,w.depth);return w};var b={size1:.5,size2:.7,size3:.8,size4:.9,size5:1,size6:1.2,size7:1.44,size8:1.73,size9:2.07,size10:2.49};var x={"\\qquad":{size:"2em",className:"qquad"},"\\quad":{size:"1em",className:"quad"},"\\enspace":{size:"0.5em",className:"enspace"},"\\;":{size:"0.277778em",className:"thickspace"},"\\:":{size:"0.22222em",className:"mediumspace"},"\\,":{size:"0.16667em",className:"thinspace"},"\\!":{size:"-0.16667em",className:"negativethinspace"}};var w={mathbf:{variant:"bold",fontName:"Main-Bold"},mathrm:{variant:"normal",fontName:"Main-Regular"},mathbb:{variant:"double-struck",fontName:"AMS-Regular"},mathcal:{variant:"script",fontName:"Caligraphic-Regular"},mathfrak:{variant:"fraktur",fontName:"Fraktur-Regular"},mathscr:{variant:"script",fontName:"Script-Regular"},mathsf:{variant:"sans-serif",fontName:"SansSerif-Regular"},mathtt:{variant:"monospace",fontName:"Typewriter-Regular"}};t.exports={fontMap:w,makeSymbol:u,mathsym:p,makeSpan:f,makeFragment:d,makeVList:y,makeOrd:v,sizingMultiplier:b,spacingFunctions:x}},{"./domTree":14,"./fontMetrics":16,"./symbols":22,"./utils":23}],10:[function(e,t,r){var a=e("./ParseError");var i=e("./Style");var n=e("./buildCommon");var s=e("./delimiter");var l=e("./domTree");var o=e("./fontMetrics");var u=e("./utils");var p=n.makeSpan;var h=function(e,t,r){var a=[];for(var i=0;i<e.length;i++){var n=e[i];a.push(b(n,t,r));r=n}return a};var c={mathord:"mord",textord:"mord",bin:"mbin",rel:"mrel",text:"mord",open:"mopen",close:"mclose",inner:"minner",genfrac:"mord",array:"mord",spacing:"mord",punct:"mpunct",ordgroup:"mord",op:"mop",katex:"mord",overline:"mord",underline:"mord",rule:"mord",leftright:"minner",sqrt:"mord",accent:"mord"};var v=function(e){if(e==null){return c.mathord}else if(e.type==="supsub"){return v(e.value.base)}else if(e.type==="llap"||e.type==="rlap"){return v(e.value)}else if(e.type==="color"){return v(e.value.value)}else if(e.type==="sizing"){return v(e.value.value)}else if(e.type==="styling"){return v(e.value.value)}else if(e.type==="delimsizing"){return c[e.value.delimType]}else{return c[e.type]}};var m=function(e,t){if(!e){return false}else if(e.type==="op"){return e.value.limits&&(t.style.size===i.DISPLAY.size||e.value.alwaysHandleSupSub)}else if(e.type==="accent"){return d(e.value.base)}else{return null}};var f=function(e){if(!e){return false}else if(e.type==="ordgroup"){if(e.value.length===1){return f(e.value[0])}else{return e}}else if(e.type==="color"){if(e.value.value.length===1){return f(e.value.value[0])}else{return e}}else{return e}};var d=function(e){var t=f(e);return t.type==="mathord"||t.type==="textord"||t.type==="bin"||t.type==="rel"||t.type==="inner"||t.type==="open"||t.type==="close"||t.type==="punct"};var g=function(e){return p(["sizing","reset-"+e.size,"size5",e.style.reset(),i.TEXT.cls(),"nulldelimiter"])};var y={};y.mathord=function(e,t,r){return n.makeOrd(e,t,"mathord")};y.textord=function(e,t,r){return n.makeOrd(e,t,"textord")};y.bin=function(e,t,r){var a="mbin";var i=r;while(i&&i.type==="color"){var s=i.value.value;i=s[s.length-1]}if(!r||u.contains(["mbin","mopen","mrel","mop","mpunct"],v(i))){e.type="textord";a="mord"}return n.mathsym(e.value,e.mode,t.getColor(),[a])};y.rel=function(e,t,r){return n.mathsym(e.value,e.mode,t.getColor(),["mrel"])};y.open=function(e,t,r){return n.mathsym(e.value,e.mode,t.getColor(),["mopen"])};y.close=function(e,t,r){return n.mathsym(e.value,e.mode,t.getColor(),["mclose"])};y.inner=function(e,t,r){return n.mathsym(e.value,e.mode,t.getColor(),["minner"])};y.punct=function(e,t,r){return n.mathsym(e.value,e.mode,t.getColor(),["mpunct"])};y.ordgroup=function(e,t,r){return p(["mord",t.style.cls()],h(e.value,t.reset()))};y.text=function(e,t,r){return p(["text","mord",t.style.cls()],h(e.value.body,t.reset()))};y.color=function(e,t,r){var a=h(e.value.value,t.withColor(e.value.color),r);return new n.makeFragment(a)};y.supsub=function(e,t,r){if(m(e.value.base,t)){return y[e.value.base.type](e,t,r)}var a=b(e.value.base,t.reset());var s;var u;var h;var c;if(e.value.sup){h=b(e.value.sup,t.withStyle(t.style.sup()));s=p([t.style.reset(),t.style.sup().cls()],[h])}if(e.value.sub){c=b(e.value.sub,t.withStyle(t.style.sub()));u=p([t.style.reset(),t.style.sub().cls()],[c])}var f;var g;if(d(e.value.base)){f=0;g=0}else{f=a.height-o.metrics.supDrop;g=a.depth+o.metrics.subDrop}var x;if(t.style===i.DISPLAY){x=o.metrics.sup1}else if(t.style.cramped){x=o.metrics.sup3}else{x=o.metrics.sup2}var w=i.TEXT.sizeMultiplier*t.style.sizeMultiplier;var k=.5/o.metrics.ptPerEm/w+"em";var z;if(!e.value.sup){g=Math.max(g,o.metrics.sub1,c.height-.8*o.metrics.xHeight);z=n.makeVList([{type:"elem",elem:u}],"shift",g,t);z.children[0].style.marginRight=k;if(a instanceof l.symbolNode){z.children[0].style.marginLeft=-a.italic+"em"}}else if(!e.value.sub){f=Math.max(f,x,h.depth+.25*o.metrics.xHeight);z=n.makeVList([{type:"elem",elem:s}],"shift",-f,t);z.children[0].style.marginRight=k}else{f=Math.max(f,x,h.depth+.25*o.metrics.xHeight);g=Math.max(g,o.metrics.sub2);var S=o.metrics.defaultRuleThickness;if(f-h.depth-(c.height-g)<4*S){g=4*S-(f-h.depth)+c.height;var M=.8*o.metrics.xHeight-(f-h.depth);if(M>0){f+=M;g-=M}}z=n.makeVList([{type:"elem",elem:u,shift:g},{type:"elem",elem:s,shift:-f}],"individualShift",null,t);if(a instanceof l.symbolNode){z.children[0].style.marginLeft=-a.italic+"em"}z.children[0].style.marginRight=k;z.children[1].style.marginRight=k}return p([v(e.value.base)],[a,z])};y.genfrac=function(e,t,r){var a=t.style;if(e.value.size==="display"){a=i.DISPLAY}else if(e.value.size==="text"){a=i.TEXT}var l=a.fracNum();var u=a.fracDen();var h=b(e.value.numer,t.withStyle(l));var c=p([a.reset(),l.cls()],[h]);var v=b(e.value.denom,t.withStyle(u));var m=p([a.reset(),u.cls()],[v]);var f;if(e.value.hasBarLine){f=o.metrics.defaultRuleThickness/t.style.sizeMultiplier}else{f=0}var d;var y;var x;if(a.size===i.DISPLAY.size){d=o.metrics.num1;if(f>0){y=3*f}else{y=7*o.metrics.defaultRuleThickness}x=o.metrics.denom1}else{if(f>0){d=o.metrics.num2;y=f}else{d=o.metrics.num3;y=3*o.metrics.defaultRuleThickness}x=o.metrics.denom2}var w;if(f===0){var k=d-h.depth-(v.height-x);if(k<y){d+=.5*(y-k);x+=.5*(y-k)}w=n.makeVList([{type:"elem",elem:m,shift:x},{type:"elem",elem:c,shift:-d}],"individualShift",null,t)}else{var z=o.metrics.axisHeight;if(d-h.depth-(z+.5*f)<y){d+=y-(d-h.depth-(z+.5*f))}if(z-.5*f-(v.height-x)<y){x+=y-(z-.5*f-(v.height-x))}var S=p([t.style.reset(),i.TEXT.cls(),"frac-line"]);S.height=f;var M=-(z-.5*f);w=n.makeVList([{type:"elem",elem:m,shift:x},{type:"elem",elem:S,shift:M},{type:"elem",elem:c,shift:-d}],"individualShift",null,t)}w.height*=a.sizeMultiplier/t.style.sizeMultiplier;w.depth*=a.sizeMultiplier/t.style.sizeMultiplier;var T;if(a.size===i.DISPLAY.size){T=o.metrics.delim1}else{T=o.metrics.getDelim2(a)}var N;var q;if(e.value.leftDelim==null){N=g(t)}else{N=s.customSizedDelim(e.value.leftDelim,T,true,t.withStyle(a),e.mode)}if(e.value.rightDelim==null){q=g(t)}else{q=s.customSizedDelim(e.value.rightDelim,T,true,t.withStyle(a),e.mode)}return p(["mord",t.style.reset(),a.cls()],[N,p(["mfrac"],[w]),q],t.getColor())};y.array=function(e,t,r){var i;var s;var l=e.value.body.length;var h=0;var c=new Array(l);var v=1/o.metrics.ptPerEm;var m=5*v;var f=12*v;var d=u.deflt(e.value.arraystretch,1);var g=d*f;var y=.7*g;var x=.3*g;var w=0;for(i=0;i<e.value.body.length;++i){var k=e.value.body[i];var z=y;var S=x;if(h<k.length){h=k.length}var M=new Array(k.length);for(s=0;s<k.length;++s){var T=b(k[s],t);if(S<T.depth){S=T.depth}if(z<T.height){z=T.height}M[s]=T}var N=0;if(e.value.rowGaps[i]){N=e.value.rowGaps[i].value;switch(N.unit){case"em":N=N.number;break;case"ex":N=N.number*o.metrics.emPerEx;break;default:console.error("Can't handle unit "+N.unit);N=0}if(N>0){N+=x;if(S<N){S=N}N=0}}M.height=z;M.depth=S;w+=z;M.pos=w;w+=S+N;c[i]=M}var q=w/2+o.metrics.axisHeight;var A=e.value.cols||[];var C=[];var R;var E;for(s=0,E=0;s<h||E<A.length;++s,++E){var P=A[E]||{};var D=true;while(P.type==="separator"){if(!D){R=p(["arraycolsep"],[]);R.style.width=o.metrics.doubleRuleSep+"em";C.push(R)}if(P.separator==="|"){var L=p(["vertical-separator"],[]);L.style.height=w+"em";L.style.verticalAlign=-(w-q)+"em";C.push(L)}else{throw new a("Invalid separator type: "+P.separator)}E++;P=A[E]||{};D=false}if(s>=h){continue}var O;if(s>0||e.value.hskipBeforeAndAfter){O=u.deflt(P.pregap,m);if(O!==0){R=p(["arraycolsep"],[]);R.style.width=O+"em";C.push(R)}}var I=[];for(i=0;i<l;++i){var B=c[i];var F=B[s];if(!F){continue}var _=B.pos-q;F.depth=B.depth;F.height=B.height;I.push({type:"elem",elem:F,shift:_})}I=n.makeVList(I,"individualShift",null,t);I=p(["col-align-"+(P.align||"c")],[I]);C.push(I);if(s<h-1||e.value.hskipBeforeAndAfter){O=u.deflt(P.postgap,m);if(O!==0){R=p(["arraycolsep"],[]);R.style.width=O+"em";C.push(R)}}}c=p(["mtable"],C);return p(["mord"],[c],t.getColor())};y.spacing=function(e,t,r){if(e.value==="\\ "||e.value==="\\space"||e.value===" "||e.value==="~"){return p(["mord","mspace"],[n.mathsym(e.value,e.mode)])}else{return p(["mord","mspace",n.spacingFunctions[e.value].className])}};y.llap=function(e,t,r){var a=p(["inner"],[b(e.value.body,t.reset())]);var i=p(["fix"],[]);return p(["llap",t.style.cls()],[a,i])};y.rlap=function(e,t,r){var a=p(["inner"],[b(e.value.body,t.reset())]);var i=p(["fix"],[]);return p(["rlap",t.style.cls()],[a,i])};y.op=function(e,t,r){var a;var s;var l=false;if(e.type==="supsub"){a=e.value.sup;s=e.value.sub;e=e.value.base;l=true}var h=["\\smallint"];var c=false;if(t.style.size===i.DISPLAY.size&&e.value.symbol&&!u.contains(h,e.value.body)){c=true}var v;var m=0;var f=0;if(e.value.symbol){var d=c?"Size2-Regular":"Size1-Regular";v=n.makeSymbol(e.value.body,d,"math",t.getColor(),["op-symbol",c?"large-op":"small-op","mop"]);m=(v.height-v.depth)/2-o.metrics.axisHeight*t.style.sizeMultiplier;f=v.italic}else{var g=[];for(var y=1;y<e.value.body.length;y++){g.push(n.mathsym(e.value.body[y],e.mode))}v=p(["mop"],g,t.getColor())}if(l){v=p([],[v]);var x;var w;var k;var z;if(a){var S=b(a,t.withStyle(t.style.sup()));x=p([t.style.reset(),t.style.sup().cls()],[S]);w=Math.max(o.metrics.bigOpSpacing1,o.metrics.bigOpSpacing3-S.depth)}if(s){var M=b(s,t.withStyle(t.style.sub()));k=p([t.style.reset(),t.style.sub().cls()],[M]);z=Math.max(o.metrics.bigOpSpacing2,o.metrics.bigOpSpacing4-M.height)}var T;var N;var q;if(!a){N=v.height-m;T=n.makeVList([{type:"kern",size:o.metrics.bigOpSpacing5},{type:"elem",elem:k},{type:"kern",size:z},{type:"elem",elem:v}],"top",N,t);T.children[0].style.marginLeft=-f+"em"}else if(!s){q=v.depth+m;T=n.makeVList([{type:"elem",elem:v},{type:"kern",size:w},{type:"elem",elem:x},{type:"kern",size:o.metrics.bigOpSpacing5}],"bottom",q,t);T.children[1].style.marginLeft=f+"em"}else if(!a&&!s){return v}else{q=o.metrics.bigOpSpacing5+k.height+k.depth+z+v.depth+m;T=n.makeVList([{type:"kern",size:o.metrics.bigOpSpacing5},{type:"elem",elem:k},{type:"kern",size:z},{type:"elem",elem:v},{type:"kern",size:w},{type:"elem",elem:x},{type:"kern",size:o.metrics.bigOpSpacing5}],"bottom",q,t);T.children[0].style.marginLeft=-f+"em";T.children[2].style.marginLeft=f+"em"}return p(["mop","op-limits"],[T])}else{if(e.value.symbol){v.style.top=m+"em"}return v}};y.katex=function(e,t,r){var a=p(["k"],[n.mathsym("K",e.mode)]);var i=p(["a"],[n.mathsym("A",e.mode)]);i.height=(i.height+.2)*.75;i.depth=(i.height-.2)*.75;var s=p(["t"],[n.mathsym("T",e.mode)]);var l=p(["e"],[n.mathsym("E",e.mode)]);l.height=l.height-.2155;l.depth=l.depth+.2155;var o=p(["x"],[n.mathsym("X",e.mode)]);return p(["katex-logo","mord"],[a,i,s,l,o],t.getColor())};y.overline=function(e,t,r){var a=b(e.value.body,t.withStyle(t.style.cramp()));var s=o.metrics.defaultRuleThickness/t.style.sizeMultiplier;var l=p([t.style.reset(),i.TEXT.cls(),"overline-line"]);l.height=s;l.maxFontSize=1;var u=n.makeVList([{type:"elem",elem:a},{type:"kern",size:3*s},{type:"elem",elem:l},{type:"kern",size:s}],"firstBaseline",null,t);return p(["overline","mord"],[u],t.getColor())};y.underline=function(e,t,r){var a=b(e.value.body,t);var s=o.metrics.defaultRuleThickness/t.style.sizeMultiplier;var l=p([t.style.reset(),i.TEXT.cls(),"underline-line"]);l.height=s;l.maxFontSize=1;var u=n.makeVList([{type:"kern",size:s},{type:"elem",elem:l},{type:"kern",size:3*s},{type:"elem",elem:a}],"top",a.height,t);return p(["underline","mord"],[u],t.getColor())};y.sqrt=function(e,t,r){var a=b(e.value.body,t.withStyle(t.style.cramp()));var l=o.metrics.defaultRuleThickness/t.style.sizeMultiplier;var u=p([t.style.reset(),i.TEXT.cls(),"sqrt-line"],[],t.getColor());u.height=l;u.maxFontSize=1;var h=l;if(t.style.id<i.TEXT.id){h=o.metrics.xHeight}var c=l+h/4;var v=(a.height+a.depth)*t.style.sizeMultiplier;var m=v+c+l;var f=p(["sqrt-sign"],[s.customSizedDelim("\\surd",m,false,t,e.mode)],t.getColor());var d=f.height+f.depth-l;if(d>a.height+a.depth+c){c=(c+d-a.height-a.depth)/2}var g=-(a.height+c+l)+f.height;f.style.top=g+"em";f.height-=g;f.depth+=g;var y;if(a.height===0&&a.depth===0){y=p()}else{y=n.makeVList([{type:"elem",elem:a},{type:"kern",size:c},{type:"elem",elem:u},{type:"kern",size:l}],"firstBaseline",null,t)}if(!e.value.index){return p(["sqrt","mord"],[f,y])}else{var x=b(e.value.index,t.withStyle(i.SCRIPTSCRIPT));var w=p([t.style.reset(),i.SCRIPTSCRIPT.cls()],[x]);var k=Math.max(f.height,y.height);var z=Math.max(f.depth,y.depth);var S=.6*(k-z);var M=n.makeVList([{type:"elem",elem:w}],"shift",-S,t);var T=p(["root"],[M]);return p(["sqrt","mord"],[T,f,y]);
+
+}};y.sizing=function(e,t,r){var a=h(e.value.value,t.withSize(e.value.size),r);var i=p(["mord"],[p(["sizing","reset-"+t.size,e.value.size,t.style.cls()],a)]);var s=n.sizingMultiplier[e.value.size];i.maxFontSize=s*t.style.sizeMultiplier;return i};y.styling=function(e,t,r){var a={display:i.DISPLAY,text:i.TEXT,script:i.SCRIPT,scriptscript:i.SCRIPTSCRIPT};var n=a[e.value.style];var s=h(e.value.value,t.withStyle(n),r);return p([t.style.reset(),n.cls()],s)};y.font=function(e,t,r){var a=e.value.font;return b(e.value.body,t.withFont(a),r)};y.delimsizing=function(e,t,r){var a=e.value.value;if(a==="."){return p([c[e.value.delimType]])}return p([c[e.value.delimType]],[s.sizedDelim(a,e.value.size,t,e.mode)])};y.leftright=function(e,t,r){var a=h(e.value.body,t.reset());var i=0;var n=0;for(var l=0;l<a.length;l++){i=Math.max(a[l].height,i);n=Math.max(a[l].depth,n)}i*=t.style.sizeMultiplier;n*=t.style.sizeMultiplier;var o;if(e.value.left==="."){o=g(t)}else{o=s.leftRightDelim(e.value.left,i,n,t,e.mode)}a.unshift(o);var u;if(e.value.right==="."){u=g(t)}else{u=s.leftRightDelim(e.value.right,i,n,t,e.mode)}a.push(u);return p(["minner",t.style.cls()],a,t.getColor())};y.rule=function(e,t,r){var a=p(["mord","rule"],[],t.getColor());var i=0;if(e.value.shift){i=e.value.shift.number;if(e.value.shift.unit==="ex"){i*=o.metrics.xHeight}}var n=e.value.width.number;if(e.value.width.unit==="ex"){n*=o.metrics.xHeight}var s=e.value.height.number;if(e.value.height.unit==="ex"){s*=o.metrics.xHeight}i/=t.style.sizeMultiplier;n/=t.style.sizeMultiplier;s/=t.style.sizeMultiplier;a.style.borderRightWidth=n+"em";a.style.borderTopWidth=s+"em";a.style.bottom=i+"em";a.width=n;a.height=s+i;a.depth=-i;return a};y.accent=function(e,t,r){var a=e.value.base;var i;if(e.type==="supsub"){var s=e;e=s.value.base;a=e.value.base;s.value.base=a;i=b(s,t.reset(),r)}var l=b(a,t.withStyle(t.style.cramp()));var u;if(d(a)){var h=f(a);var c=b(h,t.withStyle(t.style.cramp()));u=c.skew}else{u=0}var v=Math.min(l.height,o.metrics.xHeight);var m=n.makeSymbol(e.value.accent,"Main-Regular","math",t.getColor());m.italic=0;var g=e.value.accent==="\\vec"?"accent-vec":null;var y=p(["accent-body",g],[p([],[m])]);y=n.makeVList([{type:"elem",elem:l},{type:"kern",size:-v},{type:"elem",elem:y}],"firstBaseline",null,t);y.children[1].style.marginLeft=2*u+"em";var x=p(["mord","accent"],[y]);if(i){i.children[0]=x;i.height=Math.max(x.height,i.height);i.classes[0]="mord";return i}else{return x}};y.phantom=function(e,t,r){var a=h(e.value.value,t.withPhantom(),r);return new n.makeFragment(a)};var b=function(e,t,r){if(!e){return p()}if(y[e.type]){var i=y[e.type](e,t,r);var s;if(t.style!==t.parentStyle){s=t.style.sizeMultiplier/t.parentStyle.sizeMultiplier;i.height*=s;i.depth*=s}if(t.size!==t.parentSize){s=n.sizingMultiplier[t.size]/n.sizingMultiplier[t.parentSize];i.height*=s;i.depth*=s}return i}else{throw new a("Got group of unknown type: '"+e.type+"'")}};var x=function(e,t){e=JSON.parse(JSON.stringify(e));var r=h(e,t);var a=p(["base",t.style.cls()],r);var i=p(["strut"]);var n=p(["strut","bottom"]);i.style.height=a.height+"em";n.style.height=a.height+a.depth+"em";n.style.verticalAlign=-a.depth+"em";var s=p(["katex-html"],[i,n,a]);s.setAttribute("aria-hidden","true");return s};t.exports=x},{"./ParseError":5,"./Style":8,"./buildCommon":9,"./delimiter":13,"./domTree":14,"./fontMetrics":16,"./utils":23}],11:[function(e,t,r){var a=e("./buildCommon");var i=e("./fontMetrics");var n=e("./mathMLTree");var s=e("./ParseError");var l=e("./symbols");var o=e("./utils");var u=a.makeSpan;var p=a.fontMap;var h=function(e,t){if(l[t][e]&&l[t][e].replace){e=l[t][e].replace}return new n.TextNode(e)};var c=function(e,t){var r=t.font;if(!r){return null}var a=e.mode;if(r==="mathit"){return"italic"}var n=e.value;if(o.contains(["\\imath","\\jmath"],n)){return null}if(l[a][n]&&l[a][n].replace){n=l[a][n].replace}var s=p[r].fontName;if(i.getCharacterMetrics(n,s)){return p[t.font].variant}return null};var v={};v.mathord=function(e,t){var r=new n.MathNode("mi",[h(e.value,e.mode)]);var a=c(e,t);if(a){r.setAttribute("mathvariant",a)}return r};v.textord=function(e,t){var r=h(e.value,e.mode);var a=c(e,t)||"normal";var i;if(/[0-9]/.test(e.value)){i=new n.MathNode("mn",[r]);if(t.font){i.setAttribute("mathvariant",a)}}else{i=new n.MathNode("mi",[r]);i.setAttribute("mathvariant",a)}return i};v.bin=function(e){var t=new n.MathNode("mo",[h(e.value,e.mode)]);return t};v.rel=function(e){var t=new n.MathNode("mo",[h(e.value,e.mode)]);return t};v.open=function(e){var t=new n.MathNode("mo",[h(e.value,e.mode)]);return t};v.close=function(e){var t=new n.MathNode("mo",[h(e.value,e.mode)]);return t};v.inner=function(e){var t=new n.MathNode("mo",[h(e.value,e.mode)]);return t};v.punct=function(e){var t=new n.MathNode("mo",[h(e.value,e.mode)]);t.setAttribute("separator","true");return t};v.ordgroup=function(e,t){var r=m(e.value,t);var a=new n.MathNode("mrow",r);return a};v.text=function(e,t){var r=m(e.value.body,t);var a=new n.MathNode("mtext",r);return a};v.color=function(e,t){var r=m(e.value.value,t);var a=new n.MathNode("mstyle",r);a.setAttribute("mathcolor",e.value.color);return a};v.supsub=function(e,t){var r=[f(e.value.base,t)];if(e.value.sub){r.push(f(e.value.sub,t))}if(e.value.sup){r.push(f(e.value.sup,t))}var a;if(!e.value.sub){a="msup"}else if(!e.value.sup){a="msub"}else{a="msubsup"}var i=new n.MathNode(a,r);return i};v.genfrac=function(e,t){var r=new n.MathNode("mfrac",[f(e.value.numer,t),f(e.value.denom,t)]);if(!e.value.hasBarLine){r.setAttribute("linethickness","0px")}if(e.value.leftDelim!=null||e.value.rightDelim!=null){var a=[];if(e.value.leftDelim!=null){var i=new n.MathNode("mo",[new n.TextNode(e.value.leftDelim)]);i.setAttribute("fence","true");a.push(i)}a.push(r);if(e.value.rightDelim!=null){var s=new n.MathNode("mo",[new n.TextNode(e.value.rightDelim)]);s.setAttribute("fence","true");a.push(s)}var l=new n.MathNode("mrow",a);return l}return r};v.array=function(e,t){return new n.MathNode("mtable",e.value.body.map(function(e){return new n.MathNode("mtr",e.map(function(e){return new n.MathNode("mtd",[f(e,t)])}))}))};v.sqrt=function(e,t){var r;if(e.value.index){r=new n.MathNode("mroot",[f(e.value.body,t),f(e.value.index,t)])}else{r=new n.MathNode("msqrt",[f(e.value.body,t)])}return r};v.leftright=function(e,t){var r=m(e.value.body,t);if(e.value.left!=="."){var a=new n.MathNode("mo",[h(e.value.left,e.mode)]);a.setAttribute("fence","true");r.unshift(a)}if(e.value.right!=="."){var i=new n.MathNode("mo",[h(e.value.right,e.mode)]);i.setAttribute("fence","true");r.push(i)}var s=new n.MathNode("mrow",r);return s};v.accent=function(e,t){var r=new n.MathNode("mo",[h(e.value.accent,e.mode)]);var a=new n.MathNode("mover",[f(e.value.base,t),r]);a.setAttribute("accent","true");return a};v.spacing=function(e){var t;if(e.value==="\\ "||e.value==="\\space"||e.value===" "||e.value==="~"){t=new n.MathNode("mtext",[new n.TextNode("\xa0")])}else{t=new n.MathNode("mspace");t.setAttribute("width",a.spacingFunctions[e.value].size)}return t};v.op=function(e){var t;if(e.value.symbol){t=new n.MathNode("mo",[h(e.value.body,e.mode)])}else{t=new n.MathNode("mi",[new n.TextNode(e.value.body.slice(1))])}return t};v.katex=function(e){var t=new n.MathNode("mtext",[new n.TextNode("KaTeX")]);return t};v.font=function(e,t){var r=e.value.font;return f(e.value.body,t.withFont(r))};v.delimsizing=function(e){var t=[];if(e.value.value!=="."){t.push(h(e.value.value,e.mode))}var r=new n.MathNode("mo",t);if(e.value.delimType==="open"||e.value.delimType==="close"){r.setAttribute("fence","true")}else{r.setAttribute("fence","false")}return r};v.styling=function(e,t){var r=m(e.value.value,t);var a=new n.MathNode("mstyle",r);var i={display:["0","true"],text:["0","false"],script:["1","false"],scriptscript:["2","false"]};var s=i[e.value.style];a.setAttribute("scriptlevel",s[0]);a.setAttribute("displaystyle",s[1]);return a};v.sizing=function(e,t){var r=m(e.value.value,t);var i=new n.MathNode("mstyle",r);i.setAttribute("mathsize",a.sizingMultiplier[e.value.size]+"em");return i};v.overline=function(e,t){var r=new n.MathNode("mo",[new n.TextNode("\u203e")]);r.setAttribute("stretchy","true");var a=new n.MathNode("mover",[f(e.value.body,t),r]);a.setAttribute("accent","true");return a};v.underline=function(e,t){var r=new n.MathNode("mo",[new n.TextNode("\u203e")]);r.setAttribute("stretchy","true");var a=new n.MathNode("munder",[f(e.value.body,t),r]);a.setAttribute("accentunder","true");return a};v.rule=function(e){var t=new n.MathNode("mrow");return t};v.llap=function(e,t){var r=new n.MathNode("mpadded",[f(e.value.body,t)]);r.setAttribute("lspace","-1width");r.setAttribute("width","0px");return r};v.rlap=function(e,t){var r=new n.MathNode("mpadded",[f(e.value.body,t)]);r.setAttribute("width","0px");return r};v.phantom=function(e,t,r){var a=m(e.value.value,t);return new n.MathNode("mphantom",a)};var m=function(e,t){var r=[];for(var a=0;a<e.length;a++){var i=e[a];r.push(f(i,t))}return r};var f=function(e,t){if(!e){return new n.MathNode("mrow")}if(v[e.type]){return v[e.type](e,t)}else{throw new s("Got group of unknown type: '"+e.type+"'")}};var d=function(e,t,r){var a=m(e,r);var i=new n.MathNode("mrow",a);var s=new n.MathNode("annotation",[new n.TextNode(t)]);s.setAttribute("encoding","application/x-tex");var l=new n.MathNode("semantics",[i,s]);var o=new n.MathNode("math",[l]);return u(["katex-mathml"],[o])};t.exports=d},{"./ParseError":5,"./buildCommon":9,"./fontMetrics":16,"./mathMLTree":19,"./symbols":22,"./utils":23}],12:[function(e,t,r){var a=e("./buildHTML");var i=e("./buildMathML");var n=e("./buildCommon");var s=e("./Options");var l=e("./Settings");var o=e("./Style");var u=n.makeSpan;var p=function(e,t,r){r=r||new l({});var n=o.TEXT;if(r.displayMode){n=o.DISPLAY}var p=new s({style:n,size:"size5"});var h=i(e,t,p);var c=a(e,p);var v=u(["katex"],[h,c]);if(r.displayMode){return u(["katex-display"],[v])}else{return v}};t.exports=p},{"./Options":4,"./Settings":7,"./Style":8,"./buildCommon":9,"./buildHTML":10,"./buildMathML":11}],13:[function(e,t,r){var a=e("./ParseError");var i=e("./Style");var n=e("./buildCommon");var s=e("./fontMetrics");var l=e("./symbols");var o=e("./utils");var u=n.makeSpan;var p=function(e,t){if(l.math[e]&&l.math[e].replace){return s.getCharacterMetrics(l.math[e].replace,t)}else{return s.getCharacterMetrics(e,t)}};var h=function(e,t,r){return n.makeSymbol(e,"Size"+t+"-Regular",r)};var c=function(e,t,r){var a=u(["style-wrap",r.style.reset(),t.cls()],[e]);var i=t.sizeMultiplier/r.style.sizeMultiplier;a.height*=i;a.depth*=i;a.maxFontSize=t.sizeMultiplier;return a};var v=function(e,t,r,a,i){var l=n.makeSymbol(e,"Main-Regular",i);var o=c(l,t,a);if(r){var u=(1-a.style.sizeMultiplier/t.sizeMultiplier)*s.metrics.axisHeight;o.style.top=u+"em";o.height-=u;o.depth+=u}return o};var m=function(e,t,r,a,n){var l=h(e,t,n);var o=c(u(["delimsizing","size"+t],[l],a.getColor()),i.TEXT,a);if(r){var p=(1-a.style.sizeMultiplier)*s.metrics.axisHeight;o.style.top=p+"em";o.height-=p;o.depth+=p}return o};var f=function(e,t,r){var a;if(t==="Size1-Regular"){a="delim-size1"}else if(t==="Size4-Regular"){a="delim-size4"}var i=u(["delimsizinginner",a],[u([],[n.makeSymbol(e,t,r)])]);return{type:"elem",elem:i}};var d=function(e,t,r,a,l){var o;var h;var v;var m;o=v=m=e;h=null;var d="Size1-Regular";if(e==="\\uparrow"){v=m="\u23d0"}else if(e==="\\Uparrow"){v=m="\u2016"}else if(e==="\\downarrow"){o=v="\u23d0"}else if(e==="\\Downarrow"){o=v="\u2016"}else if(e==="\\updownarrow"){o="\\uparrow";v="\u23d0";m="\\downarrow"}else if(e==="\\Updownarrow"){o="\\Uparrow";v="\u2016";m="\\Downarrow"}else if(e==="["||e==="\\lbrack"){o="\u23a1";v="\u23a2";m="\u23a3";d="Size4-Regular"}else if(e==="]"||e==="\\rbrack"){o="\u23a4";v="\u23a5";m="\u23a6";d="Size4-Regular"}else if(e==="\\lfloor"){v=o="\u23a2";m="\u23a3";d="Size4-Regular"}else if(e==="\\lceil"){o="\u23a1";v=m="\u23a2";d="Size4-Regular"}else if(e==="\\rfloor"){v=o="\u23a5";m="\u23a6";d="Size4-Regular"}else if(e==="\\rceil"){o="\u23a4";v=m="\u23a5";d="Size4-Regular"}else if(e==="("){o="\u239b";v="\u239c";m="\u239d";d="Size4-Regular"}else if(e===")"){o="\u239e";v="\u239f";m="\u23a0";d="Size4-Regular"}else if(e==="\\{"||e==="\\lbrace"){o="\u23a7";h="\u23a8";m="\u23a9";v="\u23aa";d="Size4-Regular"}else if(e==="\\}"||e==="\\rbrace"){o="\u23ab";h="\u23ac";m="\u23ad";v="\u23aa";d="Size4-Regular"}else if(e==="\\lgroup"){o="\u23a7";m="\u23a9";v="\u23aa";d="Size4-Regular"}else if(e==="\\rgroup"){o="\u23ab";m="\u23ad";v="\u23aa";d="Size4-Regular"}else if(e==="\\lmoustache"){o="\u23a7";m="\u23ad";v="\u23aa";d="Size4-Regular"}else if(e==="\\rmoustache"){o="\u23ab";m="\u23a9";v="\u23aa";d="Size4-Regular"}else if(e==="\\surd"){o="\ue001";m="\u23b7";v="\ue000";d="Size4-Regular"}var g=p(o,d);var y=g.height+g.depth;var b=p(v,d);var x=b.height+b.depth;var w=p(m,d);var k=w.height+w.depth;var z=0;var S=1;if(h!==null){var M=p(h,d);z=M.height+M.depth;S=2}var T=y+k+z;var N=Math.ceil((t-T)/(S*x));var q=T+N*S*x;var A=s.metrics.axisHeight;if(r){A*=a.style.sizeMultiplier}var C=q/2-A;var R=[];R.push(f(m,d,l));var E;if(h===null){for(E=0;E<N;E++){R.push(f(v,d,l))}}else{for(E=0;E<N;E++){R.push(f(v,d,l))}R.push(f(h,d,l));for(E=0;E<N;E++){R.push(f(v,d,l))}}R.push(f(o,d,l));var P=n.makeVList(R,"bottom",C,a);return c(u(["delimsizing","mult"],[P],a.getColor()),i.TEXT,a)};var g=["(",")","[","\\lbrack","]","\\rbrack","\\{","\\lbrace","\\}","\\rbrace","\\lfloor","\\rfloor","\\lceil","\\rceil","\\surd"];var y=["\\uparrow","\\downarrow","\\updownarrow","\\Uparrow","\\Downarrow","\\Updownarrow","|","\\|","\\vert","\\Vert","\\lvert","\\rvert","\\lVert","\\rVert","\\lgroup","\\rgroup","\\lmoustache","\\rmoustache"];var b=["<",">","\\langle","\\rangle","/","\\backslash","\\lt","\\gt"];var x=[0,1.2,1.8,2.4,3];var w=function(e,t,r,i){if(e==="<"||e==="\\lt"){e="\\langle"}else if(e===">"||e==="\\gt"){e="\\rangle"}if(o.contains(g,e)||o.contains(b,e)){return m(e,t,false,r,i)}else if(o.contains(y,e)){return d(e,x[t],false,r,i)}else{throw new a("Illegal delimiter: '"+e+"'")}};var k=[{type:"small",style:i.SCRIPTSCRIPT},{type:"small",style:i.SCRIPT},{type:"small",style:i.TEXT},{type:"large",size:1},{type:"large",size:2},{type:"large",size:3},{type:"large",size:4}];var z=[{type:"small",style:i.SCRIPTSCRIPT},{type:"small",style:i.SCRIPT},{type:"small",style:i.TEXT},{type:"stack"}];var S=[{type:"small",style:i.SCRIPTSCRIPT},{type:"small",style:i.SCRIPT},{type:"small",style:i.TEXT},{type:"large",size:1},{type:"large",size:2},{type:"large",size:3},{type:"large",size:4},{type:"stack"}];var M=function(e){if(e.type==="small"){return"Main-Regular"}else if(e.type==="large"){return"Size"+e.size+"-Regular"}else if(e.type==="stack"){return"Size4-Regular"}};var T=function(e,t,r,a){var i=Math.min(2,3-a.style.size);for(var n=i;n<r.length;n++){if(r[n].type==="stack"){break}var s=p(e,M(r[n]));var l=s.height+s.depth;if(r[n].type==="small"){l*=r[n].style.sizeMultiplier}if(l>t){return r[n]}}return r[r.length-1]};var N=function(e,t,r,a,i){if(e==="<"||e==="\\lt"){e="\\langle"}else if(e===">"||e==="\\gt"){e="\\rangle"}var n;if(o.contains(b,e)){n=k}else if(o.contains(g,e)){n=S}else{n=z}var s=T(e,t,n,a);if(s.type==="small"){return v(e,s.style,r,a,i)}else if(s.type==="large"){return m(e,s.size,r,a,i)}else if(s.type==="stack"){return d(e,t,r,a,i)}};var q=function(e,t,r,a,i){var n=s.metrics.axisHeight*a.style.sizeMultiplier;var l=901;var o=5/s.metrics.ptPerEm;var u=Math.max(t-n,r+n);var p=Math.max(u/500*l,2*u-o);return N(e,p,true,a,i)};t.exports={sizedDelim:w,customSizedDelim:N,leftRightDelim:q}},{"./ParseError":5,"./Style":8,"./buildCommon":9,"./fontMetrics":16,"./symbols":22,"./utils":23}],14:[function(e,t,r){var a=e("./utils");var i=function(e){e=e.slice();for(var t=e.length-1;t>=0;t--){if(!e[t]){e.splice(t,1)}}return e.join(" ")};function n(e,t,r,a,i,n){this.classes=e||[];this.children=t||[];this.height=r||0;this.depth=a||0;this.maxFontSize=i||0;this.style=n||{};this.attributes={}}n.prototype.setAttribute=function(e,t){this.attributes[e]=t};n.prototype.toNode=function(){var e=document.createElement("span");e.className=i(this.classes);for(var t in this.style){if(Object.prototype.hasOwnProperty.call(this.style,t)){e.style[t]=this.style[t]}}for(var r in this.attributes){if(Object.prototype.hasOwnProperty.call(this.attributes,r)){e.setAttribute(r,this.attributes[r])}}for(var a=0;a<this.children.length;a++){e.appendChild(this.children[a].toNode())}return e};n.prototype.toMarkup=function(){var e="<span";if(this.classes.length){e+=' class="';e+=a.escape(i(this.classes));e+='"'}var t="";for(var r in this.style){if(this.style.hasOwnProperty(r)){t+=a.hyphenate(r)+":"+this.style[r]+";"}}if(t){e+=' style="'+a.escape(t)+'"'}for(var n in this.attributes){if(Object.prototype.hasOwnProperty.call(this.attributes,n)){e+=" "+n+'="';e+=a.escape(this.attributes[n]);e+='"'}}e+=">";for(var s=0;s<this.children.length;s++){e+=this.children[s].toMarkup()}e+="</span>";return e};function s(e,t,r,a){this.children=e||[];this.height=t||0;this.depth=r||0;this.maxFontSize=a||0}s.prototype.toNode=function(){var e=document.createDocumentFragment();for(var t=0;t<this.children.length;t++){e.appendChild(this.children[t].toNode())}return e};s.prototype.toMarkup=function(){var e="";for(var t=0;t<this.children.length;t++){e+=this.children[t].toMarkup()}return e};function l(e,t,r,a,i,n,s){this.value=e||"";this.height=t||0;this.depth=r||0;this.italic=a||0;this.skew=i||0;this.classes=n||[];this.style=s||{};this.maxFontSize=0}l.prototype.toNode=function(){var e=document.createTextNode(this.value);var t=null;if(this.italic>0){t=document.createElement("span");t.style.marginRight=this.italic+"em"}if(this.classes.length>0){t=t||document.createElement("span");t.className=i(this.classes)}for(var r in this.style){if(this.style.hasOwnProperty(r)){t=t||document.createElement("span");t.style[r]=this.style[r]}}if(t){t.appendChild(e);return t}else{return e}};l.prototype.toMarkup=function(){var e=false;var t="<span";if(this.classes.length){e=true;t+=' class="';t+=a.escape(i(this.classes));t+='"'}var r="";if(this.italic>0){r+="margin-right:"+this.italic+"em;"}for(var n in this.style){if(this.style.hasOwnProperty(n)){r+=a.hyphenate(n)+":"+this.style[n]+";"}}if(r){e=true;t+=' style="'+a.escape(r)+'"'}var s=a.escape(this.value);if(e){t+=">";t+=s;t+="</span>";return t}else{return s}};t.exports={span:n,documentFragment:s,symbolNode:l}},{"./utils":23}],15:[function(e,t,r){var a=e("./fontMetrics");var i=e("./parseData");var n=e("./ParseError");var s=i.ParseNode;function l(e,t){var r=[];var a=[r];var i=[];while(true){var l=e.parseExpression(false,null);r.push(new s("ordgroup",l,e.mode));var o=e.nextToken.text;if(o==="&"){e.consume()}else if(o==="\\end"){break}else if(o==="\\\\"||o==="\\cr"){var u=e.parseFunction();i.push(u.value.size);r=[];a.push(r)}else{var p=Math.min(e.pos+1,e.lexer._input.length);throw new n("Expected & or \\\\ or \\end",e.lexer,p)}}t.body=a;t.rowGaps=i;return new s(t.type,t,e.mode)}function o(e,r,a){if(typeof e==="string"){e=[e]}if(typeof r==="number"){r={numArgs:r}}var i={numArgs:r.numArgs||0,argTypes:r.argTypes,greediness:1,allowedInText:!!r.allowedInText,numOptionalArgs:r.numOptionalArgs||0,handler:a};for(var n=0;n<e.length;++n){t.exports[e[n]]=i}}o("array",{numArgs:1},function(e,t){var r=t[0];r=r.value.map?r.value:[r];var a=r.map(function(t){var r=t.value;if("lcr".indexOf(r)!==-1){return{type:"align",align:r}}else if(r==="|"){return{type:"separator",separator:"|"}}throw new n("Unknown column alignment: "+t.value,e.lexer,e.positions[1])});var i={type:"array",cols:a,hskipBeforeAndAfter:true};i=l(e.parser,i);return i});o(["matrix","pmatrix","bmatrix","Bmatrix","vmatrix","Vmatrix"],{},function(e){var t={matrix:null,pmatrix:["(",")"],bmatrix:["[","]"],Bmatrix:["\\{","\\}"],vmatrix:["|","|"],Vmatrix:["\\Vert","\\Vert"]}[e.envName];var r={type:"array",hskipBeforeAndAfter:false};r=l(e.parser,r);if(t){r=new s("leftright",{body:[r],left:t[0],right:t[1]},e.mode)}return r});o("cases",{},function(e){var t={type:"array",arraystretch:1.2,cols:[{type:"align",align:"l",pregap:0,postgap:a.metrics.quad},{type:"align",align:"l",pregap:0,postgap:0}]};t=l(e.parser,t);t=new s("leftright",{body:[t],left:"\\{",right:"."},e.mode);return t});o("aligned",{},function(e){var t={type:"array",cols:[]};t=l(e.parser,t);var r=new s("ordgroup",[],e.mode);var a=0;t.value.body.forEach(function(e){var t;for(t=1;t<e.length;t+=2){e[t].value.unshift(r)}if(a<e.length){a=e.length}});for(var i=0;i<a;++i){var n="r";var o=0;if(i%2===1){n="l"}else if(i>0){o=2}t.value.cols[i]={type:"align",align:n,pregap:o,postgap:0}}return t})},{"./ParseError":5,"./fontMetrics":16,"./parseData":20}],16:[function(e,t,r){var a=e("./Style");var i=.025;var n=0;var s=0;var l=0;var o=.431;var u=1;var p=0;var h=.677;var c=.394;var v=.444;var m=.686;var f=.345;var d=.413;var g=.363;var y=.289;var b=.15;var x=.247;var w=.386;var k=.05;var z=2.39;var S=1.01;var M=.81;var T=.71;var N=.25;var q=0;var A=0;var C=0;var R=0;var E=.431;var P=1;var D=0;var L=.04;var O=.111;var I=.166;var B=.2;var F=.6;var _=.1;var V=10;var G=2/V;var H={xHeight:o,quad:u,num1:h,num2:c,num3:v,denom1:m,denom2:f,sup1:d,sup2:g,sup3:y,sub1:b,sub2:x,supDrop:w,subDrop:k,axisHeight:N,defaultRuleThickness:L,bigOpSpacing1:O,bigOpSpacing2:I,bigOpSpacing3:B,bigOpSpacing4:F,bigOpSpacing5:_,ptPerEm:V,emPerEx:o/u,doubleRuleSep:G,delim1:z,getDelim2:function(e){if(e.size===a.TEXT.size){return S}else if(e.size===a.SCRIPT.size){return M}else if(e.size===a.SCRIPTSCRIPT.size){return T}throw new Error("Unexpected style size: "+e.size)}};var X=e("./fontMetricsData");var U=function(e,t){var r=X[t][e.charCodeAt(0)];if(r){return{depth:r[0],height:r[1],italic:r[2],skew:r[3],width:r[4]}}};t.exports={metrics:H,getCharacterMetrics:U}},{"./Style":8,"./fontMetricsData":17}],17:[function(e,t,r){t.exports={"AMS-Regular":{65:[0,.68889,0,0],66:[0,.68889,0,0],67:[0,.68889,0,0],68:[0,.68889,0,0],69:[0,.68889,0,0],70:[0,.68889,0,0],71:[0,.68889,0,0],72:[0,.68889,0,0],73:[0,.68889,0,0],74:[.16667,.68889,0,0],75:[0,.68889,0,0],76:[0,.68889,0,0],77:[0,.68889,0,0],78:[0,.68889,0,0],79:[.16667,.68889,0,0],80:[0,.68889,0,0],81:[.16667,.68889,0,0],82:[0,.68889,0,0],83:[0,.68889,0,0],84:[0,.68889,0,0],85:[0,.68889,0,0],86:[0,.68889,0,0],87:[0,.68889,0,0],88:[0,.68889,0,0],89:[0,.68889,0,0],90:[0,.68889,0,0],107:[0,.68889,0,0],165:[0,.675,.025,0],174:[.15559,.69224,0,0],240:[0,.68889,0,0],295:[0,.68889,0,0],710:[0,.825,0,0],732:[0,.9,0,0],770:[0,.825,0,0],771:[0,.9,0,0],989:[.08167,.58167,0,0],1008:[0,.43056,.04028,0],8245:[0,.54986,0,0],8463:[0,.68889,0,0],8487:[0,.68889,0,0],8498:[0,.68889,0,0],8502:[0,.68889,0,0],8503:[0,.68889,0,0],8504:[0,.68889,0,0],8513:[0,.68889,0,0],8592:[-.03598,.46402,0,0],8594:[-.03598,.46402,0,0],8602:[-.13313,.36687,0,0],8603:[-.13313,.36687,0,0],8606:[.01354,.52239,0,0],8608:[.01354,.52239,0,0],8610:[.01354,.52239,0,0],8611:[.01354,.52239,0,0],8619:[0,.54986,0,0],8620:[0,.54986,0,0],8621:[-.13313,.37788,0,0],8622:[-.13313,.36687,0,0],8624:[0,.69224,0,0],8625:[0,.69224,0,0],8630:[0,.43056,0,0],8631:[0,.43056,0,0],8634:[.08198,.58198,0,0],8635:[.08198,.58198,0,0],8638:[.19444,.69224,0,0],8639:[.19444,.69224,0,0],8642:[.19444,.69224,0,0],8643:[.19444,.69224,0,0],8644:[.1808,.675,0,0],8646:[.1808,.675,0,0],8647:[.1808,.675,0,0],8648:[.19444,.69224,0,0],8649:[.1808,.675,0,0],8650:[.19444,.69224,0,0],8651:[.01354,.52239,0,0],8652:[.01354,.52239,0,0],8653:[-.13313,.36687,0,0],8654:[-.13313,.36687,0,0],8655:[-.13313,.36687,0,0],8666:[.13667,.63667,0,0],8667:[.13667,.63667,0,0],8669:[-.13313,.37788,0,0],8672:[-.064,.437,0,0],8674:[-.064,.437,0,0],8705:[0,.825,0,0],8708:[0,.68889,0,0],8709:[.08167,.58167,0,0],8717:[0,.43056,0,0],8722:[-.03598,.46402,0,0],8724:[.08198,.69224,0,0],8726:[.08167,.58167,0,0],8733:[0,.69224,0,0],8736:[0,.69224,0,0],8737:[0,.69224,0,0],8738:[.03517,.52239,0,0],8739:[.08167,.58167,0,0],8740:[.25142,.74111,0,0],8741:[.08167,.58167,0,0],8742:[.25142,.74111,0,0],8756:[0,.69224,0,0],8757:[0,.69224,0,0],8764:[-.13313,.36687,0,0],8765:[-.13313,.37788,0,0],8769:[-.13313,.36687,0,0],8770:[-.03625,.46375,0,0],8774:[.30274,.79383,0,0],8776:[-.01688,.48312,0,0],8778:[.08167,.58167,0,0],8782:[.06062,.54986,0,0],8783:[.06062,.54986,0,0],8785:[.08198,.58198,0,0],8786:[.08198,.58198,0,0],8787:[.08198,.58198,0,0],8790:[0,.69224,0,0],8791:[.22958,.72958,0,0],8796:[.08198,.91667,0,0],8806:[.25583,.75583,0,0],8807:[.25583,.75583,0,0],8808:[.25142,.75726,0,0],8809:[.25142,.75726,0,0],8812:[.25583,.75583,0,0],8814:[.20576,.70576,0,0],8815:[.20576,.70576,0,0],8816:[.30274,.79383,0,0],8817:[.30274,.79383,0,0],8818:[.22958,.72958,0,0],8819:[.22958,.72958,0,0],8822:[.1808,.675,0,0],8823:[.1808,.675,0,0],8828:[.13667,.63667,0,0],8829:[.13667,.63667,0,0],8830:[.22958,.72958,0,0],8831:[.22958,.72958,0,0],8832:[.20576,.70576,0,0],8833:[.20576,.70576,0,0],8840:[.30274,.79383,0,0],8841:[.30274,.79383,0,0],8842:[.13597,.63597,0,0],8843:[.13597,.63597,0,0],8847:[.03517,.54986,0,0],8848:[.03517,.54986,0,0],8858:[.08198,.58198,0,0],8859:[.08198,.58198,0,0],8861:[.08198,.58198,0,0],8862:[0,.675,0,0],8863:[0,.675,0,0],8864:[0,.675,0,0],8865:[0,.675,0,0],8872:[0,.69224,0,0],8873:[0,.69224,0,0],8874:[0,.69224,0,0],8876:[0,.68889,0,0],8877:[0,.68889,0,0],8878:[0,.68889,0,0],8879:[0,.68889,0,0],8882:[.03517,.54986,0,0],8883:[.03517,.54986,0,0],8884:[.13667,.63667,0,0],8885:[.13667,.63667,0,0],8888:[0,.54986,0,0],8890:[.19444,.43056,0,0],8891:[.19444,.69224,0,0],8892:[.19444,.69224,0,0],8901:[0,.54986,0,0],8903:[.08167,.58167,0,0],8905:[.08167,.58167,0,0],8906:[.08167,.58167,0,0],8907:[0,.69224,0,0],8908:[0,.69224,0,0],8909:[-.03598,.46402,0,0],8910:[0,.54986,0,0],8911:[0,.54986,0,0],8912:[.03517,.54986,0,0],8913:[.03517,.54986,0,0],8914:[0,.54986,0,0],8915:[0,.54986,0,0],8916:[0,.69224,0,0],8918:[.0391,.5391,0,0],8919:[.0391,.5391,0,0],8920:[.03517,.54986,0,0],8921:[.03517,.54986,0,0],8922:[.38569,.88569,0,0],8923:[.38569,.88569,0,0],8926:[.13667,.63667,0,0],8927:[.13667,.63667,0,0],8928:[.30274,.79383,0,0],8929:[.30274,.79383,0,0],8934:[.23222,.74111,0,0],8935:[.23222,.74111,0,0],8936:[.23222,.74111,0,0],8937:[.23222,.74111,0,0],8938:[.20576,.70576,0,0],8939:[.20576,.70576,0,0],8940:[.30274,.79383,0,0],8941:[.30274,.79383,0,0],8994:[.19444,.69224,0,0],8995:[.19444,.69224,0,0],9416:[.15559,.69224,0,0],9484:[0,.69224,0,0],9488:[0,.69224,0,0],9492:[0,.37788,0,0],9496:[0,.37788,0,0],9585:[.19444,.68889,0,0],9586:[.19444,.74111,0,0],9632:[0,.675,0,0],9633:[0,.675,0,0],9650:[0,.54986,0,0],9651:[0,.54986,0,0],9654:[.03517,.54986,0,0],9660:[0,.54986,0,0],9661:[0,.54986,0,0],9664:[.03517,.54986,0,0],9674:[.11111,.69224,0,0],9733:[.19444,.69224,0,0],10003:[0,.69224,0,0],10016:[0,.69224,0,0],10731:[.11111,.69224,0,0],10846:[.19444,.75583,0,0],10877:[.13667,.63667,0,0],10878:[.13667,.63667,0,0],10885:[.25583,.75583,0,0],10886:[.25583,.75583,0,0],10887:[.13597,.63597,0,0],10888:[.13597,.63597,0,0],10889:[.26167,.75726,0,0],10890:[.26167,.75726,0,0],10891:[.48256,.98256,0,0],10892:[.48256,.98256,0,0],10901:[.13667,.63667,0,0],10902:[.13667,.63667,0,0],10933:[.25142,.75726,0,0],10934:[.25142,.75726,0,0],10935:[.26167,.75726,0,0],10936:[.26167,.75726,0,0],10937:[.26167,.75726,0,0],10938:[.26167,.75726,0,0],10949:[.25583,.75583,0,0],10950:[.25583,.75583,0,0],10955:[.28481,.79383,0,0],10956:[.28481,.79383,0,0],57350:[.08167,.58167,0,0],57351:[.08167,.58167,0,0],57352:[.08167,.58167,0,0],57353:[0,.43056,.04028,0],57356:[.25142,.75726,0,0],57357:[.25142,.75726,0,0],57358:[.41951,.91951,0,0],57359:[.30274,.79383,0,0],57360:[.30274,.79383,0,0],57361:[.41951,.91951,0,0],57366:[.25142,.75726,0,0],57367:[.25142,.75726,0,0],57368:[.25142,.75726,0,0],57369:[.25142,.75726,0,0],57370:[.13597,.63597,0,0],57371:[.13597,.63597,0,0]},"Caligraphic-Regular":{48:[0,.43056,0,0],49:[0,.43056,0,0],50:[0,.43056,0,0],51:[.19444,.43056,0,0],52:[.19444,.43056,0,0],53:[.19444,.43056,0,0],54:[0,.64444,0,0],55:[.19444,.43056,0,0],56:[0,.64444,0,0],57:[.19444,.43056,0,0],65:[0,.68333,0,.19445],66:[0,.68333,.03041,.13889],67:[0,.68333,.05834,.13889],68:[0,.68333,.02778,.08334],69:[0,.68333,.08944,.11111],70:[0,.68333,.09931,.11111],71:[.09722,.68333,.0593,.11111],72:[0,.68333,.00965,.11111],73:[0,.68333,.07382,0],74:[.09722,.68333,.18472,.16667],75:[0,.68333,.01445,.05556],76:[0,.68333,0,.13889],77:[0,.68333,0,.13889],78:[0,.68333,.14736,.08334],79:[0,.68333,.02778,.11111],80:[0,.68333,.08222,.08334],81:[.09722,.68333,0,.11111],82:[0,.68333,0,.08334],83:[0,.68333,.075,.13889],84:[0,.68333,.25417,0],85:[0,.68333,.09931,.08334],86:[0,.68333,.08222,0],87:[0,.68333,.08222,.08334],88:[0,.68333,.14643,.13889],89:[.09722,.68333,.08222,.08334],90:[0,.68333,.07944,.13889]},"Fraktur-Regular":{33:[0,.69141,0,0],34:[0,.69141,0,0],38:[0,.69141,0,0],39:[0,.69141,0,0],40:[.24982,.74947,0,0],41:[.24982,.74947,0,0],42:[0,.62119,0,0],43:[.08319,.58283,0,0],44:[0,.10803,0,0],45:[.08319,.58283,0,0],46:[0,.10803,0,0],47:[.24982,.74947,0,0],48:[0,.47534,0,0],49:[0,.47534,0,0],50:[0,.47534,0,0],51:[.18906,.47534,0,0],52:[.18906,.47534,0,0],53:[.18906,.47534,0,0],54:[0,.69141,0,0],55:[.18906,.47534,0,0],56:[0,.69141,0,0],57:[.18906,.47534,0,0],58:[0,.47534,0,0],59:[.12604,.47534,0,0],61:[-.13099,.36866,0,0],63:[0,.69141,0,0],65:[0,.69141,0,0],66:[0,.69141,0,0],67:[0,.69141,0,0],68:[0,.69141,0,0],69:[0,.69141,0,0],70:[.12604,.69141,0,0],71:[0,.69141,0,0],72:[.06302,.69141,0,0],73:[0,.69141,0,0],74:[.12604,.69141,0,0],75:[0,.69141,0,0],76:[0,.69141,0,0],77:[0,.69141,0,0],78:[0,.69141,0,0],79:[0,.69141,0,0],80:[.18906,.69141,0,0],81:[.03781,.69141,0,0],82:[0,.69141,0,0],83:[0,.69141,0,0],84:[0,.69141,0,0],85:[0,.69141,0,0],86:[0,.69141,0,0],87:[0,.69141,0,0],88:[0,.69141,0,0],89:[.18906,.69141,0,0],90:[.12604,.69141,0,0],91:[.24982,.74947,0,0],93:[.24982,.74947,0,0],94:[0,.69141,0,0],97:[0,.47534,0,0],98:[0,.69141,0,0],99:[0,.47534,0,0],100:[0,.62119,0,0],101:[0,.47534,0,0],102:[.18906,.69141,0,0],103:[.18906,.47534,0,0],104:[.18906,.69141,0,0],105:[0,.69141,0,0],106:[0,.69141,0,0],107:[0,.69141,0,0],108:[0,.69141,0,0],109:[0,.47534,0,0],110:[0,.47534,0,0],111:[0,.47534,0,0],112:[.18906,.52396,0,0],113:[.18906,.47534,0,0],114:[0,.47534,0,0],115:[0,.47534,0,0],116:[0,.62119,0,0],117:[0,.47534,0,0],118:[0,.52396,0,0],119:[0,.52396,0,0],120:[.18906,.47534,0,0],121:[.18906,.47534,0,0],122:[.18906,.47534,0,0],8216:[0,.69141,0,0],8217:[0,.69141,0,0],58112:[0,.62119,0,0],58113:[0,.62119,0,0],58114:[.18906,.69141,0,0],58115:[.18906,.69141,0,0],58116:[.18906,.47534,0,0],58117:[0,.69141,0,0],58118:[0,.62119,0,0],58119:[0,.47534,0,0]},"Main-Bold":{33:[0,.69444,0,0],34:[0,.69444,0,0],35:[.19444,.69444,0,0],36:[.05556,.75,0,0],37:[.05556,.75,0,0],38:[0,.69444,0,0],39:[0,.69444,0,0],40:[.25,.75,0,0],41:[.25,.75,0,0],42:[0,.75,0,0],43:[.13333,.63333,0,0],44:[.19444,.15556,0,0],45:[0,.44444,0,0],46:[0,.15556,0,0],47:[.25,.75,0,0],48:[0,.64444,0,0],49:[0,.64444,0,0],50:[0,.64444,0,0],51:[0,.64444,0,0],52:[0,.64444,0,0],53:[0,.64444,0,0],54:[0,.64444,0,0],55:[0,.64444,0,0],56:[0,.64444,0,0],57:[0,.64444,0,0],58:[0,.44444,0,0],59:[.19444,.44444,0,0],60:[.08556,.58556,0,0],61:[-.10889,.39111,0,0],62:[.08556,.58556,0,0],63:[0,.69444,0,0],64:[0,.69444,0,0],65:[0,.68611,0,0],66:[0,.68611,0,0],67:[0,.68611,0,0],68:[0,.68611,0,0],69:[0,.68611,0,0],70:[0,.68611,0,0],71:[0,.68611,0,0],72:[0,.68611,0,0],73:[0,.68611,0,0],74:[0,.68611,0,0],75:[0,.68611,0,0],76:[0,.68611,0,0],77:[0,.68611,0,0],78:[0,.68611,0,0],79:[0,.68611,0,0],80:[0,.68611,0,0],81:[.19444,.68611,0,0],82:[0,.68611,0,0],83:[0,.68611,0,0],84:[0,.68611,0,0],85:[0,.68611,0,0],86:[0,.68611,.01597,0],87:[0,.68611,.01597,0],88:[0,.68611,0,0],89:[0,.68611,.02875,0],90:[0,.68611,0,0],91:[.25,.75,0,0],92:[.25,.75,0,0],93:[.25,.75,0,0],94:[0,.69444,0,0],95:[.31,.13444,.03194,0],96:[0,.69444,0,0],97:[0,.44444,0,0],98:[0,.69444,0,0],99:[0,.44444,0,0],100:[0,.69444,0,0],101:[0,.44444,0,0],102:[0,.69444,.10903,0],103:[.19444,.44444,.01597,0],104:[0,.69444,0,0],105:[0,.69444,0,0],106:[.19444,.69444,0,0],107:[0,.69444,0,0],108:[0,.69444,0,0],109:[0,.44444,0,0],
+110:[0,.44444,0,0],111:[0,.44444,0,0],112:[.19444,.44444,0,0],113:[.19444,.44444,0,0],114:[0,.44444,0,0],115:[0,.44444,0,0],116:[0,.63492,0,0],117:[0,.44444,0,0],118:[0,.44444,.01597,0],119:[0,.44444,.01597,0],120:[0,.44444,0,0],121:[.19444,.44444,.01597,0],122:[0,.44444,0,0],123:[.25,.75,0,0],124:[.25,.75,0,0],125:[.25,.75,0,0],126:[.35,.34444,0,0],168:[0,.69444,0,0],172:[0,.44444,0,0],175:[0,.59611,0,0],176:[0,.69444,0,0],177:[.13333,.63333,0,0],180:[0,.69444,0,0],215:[.13333,.63333,0,0],247:[.13333,.63333,0,0],305:[0,.44444,0,0],567:[.19444,.44444,0,0],710:[0,.69444,0,0],711:[0,.63194,0,0],713:[0,.59611,0,0],714:[0,.69444,0,0],715:[0,.69444,0,0],728:[0,.69444,0,0],729:[0,.69444,0,0],730:[0,.69444,0,0],732:[0,.69444,0,0],768:[0,.69444,0,0],769:[0,.69444,0,0],770:[0,.69444,0,0],771:[0,.69444,0,0],772:[0,.59611,0,0],774:[0,.69444,0,0],775:[0,.69444,0,0],776:[0,.69444,0,0],778:[0,.69444,0,0],779:[0,.69444,0,0],780:[0,.63194,0,0],824:[.19444,.69444,0,0],915:[0,.68611,0,0],916:[0,.68611,0,0],920:[0,.68611,0,0],923:[0,.68611,0,0],926:[0,.68611,0,0],928:[0,.68611,0,0],931:[0,.68611,0,0],933:[0,.68611,0,0],934:[0,.68611,0,0],936:[0,.68611,0,0],937:[0,.68611,0,0],8211:[0,.44444,.03194,0],8212:[0,.44444,.03194,0],8216:[0,.69444,0,0],8217:[0,.69444,0,0],8220:[0,.69444,0,0],8221:[0,.69444,0,0],8224:[.19444,.69444,0,0],8225:[.19444,.69444,0,0],8242:[0,.55556,0,0],8407:[0,.72444,.15486,0],8463:[0,.69444,0,0],8465:[0,.69444,0,0],8467:[0,.69444,0,0],8472:[.19444,.44444,0,0],8476:[0,.69444,0,0],8501:[0,.69444,0,0],8592:[-.10889,.39111,0,0],8593:[.19444,.69444,0,0],8594:[-.10889,.39111,0,0],8595:[.19444,.69444,0,0],8596:[-.10889,.39111,0,0],8597:[.25,.75,0,0],8598:[.19444,.69444,0,0],8599:[.19444,.69444,0,0],8600:[.19444,.69444,0,0],8601:[.19444,.69444,0,0],8636:[-.10889,.39111,0,0],8637:[-.10889,.39111,0,0],8640:[-.10889,.39111,0,0],8641:[-.10889,.39111,0,0],8656:[-.10889,.39111,0,0],8657:[.19444,.69444,0,0],8658:[-.10889,.39111,0,0],8659:[.19444,.69444,0,0],8660:[-.10889,.39111,0,0],8661:[.25,.75,0,0],8704:[0,.69444,0,0],8706:[0,.69444,.06389,0],8707:[0,.69444,0,0],8709:[.05556,.75,0,0],8711:[0,.68611,0,0],8712:[.08556,.58556,0,0],8715:[.08556,.58556,0,0],8722:[.13333,.63333,0,0],8723:[.13333,.63333,0,0],8725:[.25,.75,0,0],8726:[.25,.75,0,0],8727:[-.02778,.47222,0,0],8728:[-.02639,.47361,0,0],8729:[-.02639,.47361,0,0],8730:[.18,.82,0,0],8733:[0,.44444,0,0],8734:[0,.44444,0,0],8736:[0,.69224,0,0],8739:[.25,.75,0,0],8741:[.25,.75,0,0],8743:[0,.55556,0,0],8744:[0,.55556,0,0],8745:[0,.55556,0,0],8746:[0,.55556,0,0],8747:[.19444,.69444,.12778,0],8764:[-.10889,.39111,0,0],8768:[.19444,.69444,0,0],8771:[.00222,.50222,0,0],8776:[.02444,.52444,0,0],8781:[.00222,.50222,0,0],8801:[.00222,.50222,0,0],8804:[.19667,.69667,0,0],8805:[.19667,.69667,0,0],8810:[.08556,.58556,0,0],8811:[.08556,.58556,0,0],8826:[.08556,.58556,0,0],8827:[.08556,.58556,0,0],8834:[.08556,.58556,0,0],8835:[.08556,.58556,0,0],8838:[.19667,.69667,0,0],8839:[.19667,.69667,0,0],8846:[0,.55556,0,0],8849:[.19667,.69667,0,0],8850:[.19667,.69667,0,0],8851:[0,.55556,0,0],8852:[0,.55556,0,0],8853:[.13333,.63333,0,0],8854:[.13333,.63333,0,0],8855:[.13333,.63333,0,0],8856:[.13333,.63333,0,0],8857:[.13333,.63333,0,0],8866:[0,.69444,0,0],8867:[0,.69444,0,0],8868:[0,.69444,0,0],8869:[0,.69444,0,0],8900:[-.02639,.47361,0,0],8901:[-.02639,.47361,0,0],8902:[-.02778,.47222,0,0],8968:[.25,.75,0,0],8969:[.25,.75,0,0],8970:[.25,.75,0,0],8971:[.25,.75,0,0],8994:[-.13889,.36111,0,0],8995:[-.13889,.36111,0,0],9651:[.19444,.69444,0,0],9657:[-.02778,.47222,0,0],9661:[.19444,.69444,0,0],9667:[-.02778,.47222,0,0],9711:[.19444,.69444,0,0],9824:[.12963,.69444,0,0],9825:[.12963,.69444,0,0],9826:[.12963,.69444,0,0],9827:[.12963,.69444,0,0],9837:[0,.75,0,0],9838:[.19444,.69444,0,0],9839:[.19444,.69444,0,0],10216:[.25,.75,0,0],10217:[.25,.75,0,0],10815:[0,.68611,0,0],10927:[.19667,.69667,0,0],10928:[.19667,.69667,0,0]},"Main-Italic":{33:[0,.69444,.12417,0],34:[0,.69444,.06961,0],35:[.19444,.69444,.06616,0],37:[.05556,.75,.13639,0],38:[0,.69444,.09694,0],39:[0,.69444,.12417,0],40:[.25,.75,.16194,0],41:[.25,.75,.03694,0],42:[0,.75,.14917,0],43:[.05667,.56167,.03694,0],44:[.19444,.10556,0,0],45:[0,.43056,.02826,0],46:[0,.10556,0,0],47:[.25,.75,.16194,0],48:[0,.64444,.13556,0],49:[0,.64444,.13556,0],50:[0,.64444,.13556,0],51:[0,.64444,.13556,0],52:[.19444,.64444,.13556,0],53:[0,.64444,.13556,0],54:[0,.64444,.13556,0],55:[.19444,.64444,.13556,0],56:[0,.64444,.13556,0],57:[0,.64444,.13556,0],58:[0,.43056,.0582,0],59:[.19444,.43056,.0582,0],61:[-.13313,.36687,.06616,0],63:[0,.69444,.1225,0],64:[0,.69444,.09597,0],65:[0,.68333,0,0],66:[0,.68333,.10257,0],67:[0,.68333,.14528,0],68:[0,.68333,.09403,0],69:[0,.68333,.12028,0],70:[0,.68333,.13305,0],71:[0,.68333,.08722,0],72:[0,.68333,.16389,0],73:[0,.68333,.15806,0],74:[0,.68333,.14028,0],75:[0,.68333,.14528,0],76:[0,.68333,0,0],77:[0,.68333,.16389,0],78:[0,.68333,.16389,0],79:[0,.68333,.09403,0],80:[0,.68333,.10257,0],81:[.19444,.68333,.09403,0],82:[0,.68333,.03868,0],83:[0,.68333,.11972,0],84:[0,.68333,.13305,0],85:[0,.68333,.16389,0],86:[0,.68333,.18361,0],87:[0,.68333,.18361,0],88:[0,.68333,.15806,0],89:[0,.68333,.19383,0],90:[0,.68333,.14528,0],91:[.25,.75,.1875,0],93:[.25,.75,.10528,0],94:[0,.69444,.06646,0],95:[.31,.12056,.09208,0],97:[0,.43056,.07671,0],98:[0,.69444,.06312,0],99:[0,.43056,.05653,0],100:[0,.69444,.10333,0],101:[0,.43056,.07514,0],102:[.19444,.69444,.21194,0],103:[.19444,.43056,.08847,0],104:[0,.69444,.07671,0],105:[0,.65536,.1019,0],106:[.19444,.65536,.14467,0],107:[0,.69444,.10764,0],108:[0,.69444,.10333,0],109:[0,.43056,.07671,0],110:[0,.43056,.07671,0],111:[0,.43056,.06312,0],112:[.19444,.43056,.06312,0],113:[.19444,.43056,.08847,0],114:[0,.43056,.10764,0],115:[0,.43056,.08208,0],116:[0,.61508,.09486,0],117:[0,.43056,.07671,0],118:[0,.43056,.10764,0],119:[0,.43056,.10764,0],120:[0,.43056,.12042,0],121:[.19444,.43056,.08847,0],122:[0,.43056,.12292,0],126:[.35,.31786,.11585,0],163:[0,.69444,0,0],305:[0,.43056,0,.02778],567:[.19444,.43056,0,.08334],768:[0,.69444,0,0],769:[0,.69444,.09694,0],770:[0,.69444,.06646,0],771:[0,.66786,.11585,0],772:[0,.56167,.10333,0],774:[0,.69444,.10806,0],775:[0,.66786,.11752,0],776:[0,.66786,.10474,0],778:[0,.69444,0,0],779:[0,.69444,.1225,0],780:[0,.62847,.08295,0],915:[0,.68333,.13305,0],916:[0,.68333,0,0],920:[0,.68333,.09403,0],923:[0,.68333,0,0],926:[0,.68333,.15294,0],928:[0,.68333,.16389,0],931:[0,.68333,.12028,0],933:[0,.68333,.11111,0],934:[0,.68333,.05986,0],936:[0,.68333,.11111,0],937:[0,.68333,.10257,0],8211:[0,.43056,.09208,0],8212:[0,.43056,.09208,0],8216:[0,.69444,.12417,0],8217:[0,.69444,.12417,0],8220:[0,.69444,.1685,0],8221:[0,.69444,.06961,0],8463:[0,.68889,0,0]},"Main-Regular":{32:[0,0,0,0],33:[0,.69444,0,0],34:[0,.69444,0,0],35:[.19444,.69444,0,0],36:[.05556,.75,0,0],37:[.05556,.75,0,0],38:[0,.69444,0,0],39:[0,.69444,0,0],40:[.25,.75,0,0],41:[.25,.75,0,0],42:[0,.75,0,0],43:[.08333,.58333,0,0],44:[.19444,.10556,0,0],45:[0,.43056,0,0],46:[0,.10556,0,0],47:[.25,.75,0,0],48:[0,.64444,0,0],49:[0,.64444,0,0],50:[0,.64444,0,0],51:[0,.64444,0,0],52:[0,.64444,0,0],53:[0,.64444,0,0],54:[0,.64444,0,0],55:[0,.64444,0,0],56:[0,.64444,0,0],57:[0,.64444,0,0],58:[0,.43056,0,0],59:[.19444,.43056,0,0],60:[.0391,.5391,0,0],61:[-.13313,.36687,0,0],62:[.0391,.5391,0,0],63:[0,.69444,0,0],64:[0,.69444,0,0],65:[0,.68333,0,0],66:[0,.68333,0,0],67:[0,.68333,0,0],68:[0,.68333,0,0],69:[0,.68333,0,0],70:[0,.68333,0,0],71:[0,.68333,0,0],72:[0,.68333,0,0],73:[0,.68333,0,0],74:[0,.68333,0,0],75:[0,.68333,0,0],76:[0,.68333,0,0],77:[0,.68333,0,0],78:[0,.68333,0,0],79:[0,.68333,0,0],80:[0,.68333,0,0],81:[.19444,.68333,0,0],82:[0,.68333,0,0],83:[0,.68333,0,0],84:[0,.68333,0,0],85:[0,.68333,0,0],86:[0,.68333,.01389,0],87:[0,.68333,.01389,0],88:[0,.68333,0,0],89:[0,.68333,.025,0],90:[0,.68333,0,0],91:[.25,.75,0,0],92:[.25,.75,0,0],93:[.25,.75,0,0],94:[0,.69444,0,0],95:[.31,.12056,.02778,0],96:[0,.69444,0,0],97:[0,.43056,0,0],98:[0,.69444,0,0],99:[0,.43056,0,0],100:[0,.69444,0,0],101:[0,.43056,0,0],102:[0,.69444,.07778,0],103:[.19444,.43056,.01389,0],104:[0,.69444,0,0],105:[0,.66786,0,0],106:[.19444,.66786,0,0],107:[0,.69444,0,0],108:[0,.69444,0,0],109:[0,.43056,0,0],110:[0,.43056,0,0],111:[0,.43056,0,0],112:[.19444,.43056,0,0],113:[.19444,.43056,0,0],114:[0,.43056,0,0],115:[0,.43056,0,0],116:[0,.61508,0,0],117:[0,.43056,0,0],118:[0,.43056,.01389,0],119:[0,.43056,.01389,0],120:[0,.43056,0,0],121:[.19444,.43056,.01389,0],122:[0,.43056,0,0],123:[.25,.75,0,0],124:[.25,.75,0,0],125:[.25,.75,0,0],126:[.35,.31786,0,0],160:[0,0,0,0],168:[0,.66786,0,0],172:[0,.43056,0,0],175:[0,.56778,0,0],176:[0,.69444,0,0],177:[.08333,.58333,0,0],180:[0,.69444,0,0],215:[.08333,.58333,0,0],247:[.08333,.58333,0,0],305:[0,.43056,0,0],567:[.19444,.43056,0,0],710:[0,.69444,0,0],711:[0,.62847,0,0],713:[0,.56778,0,0],714:[0,.69444,0,0],715:[0,.69444,0,0],728:[0,.69444,0,0],729:[0,.66786,0,0],730:[0,.69444,0,0],732:[0,.66786,0,0],768:[0,.69444,0,0],769:[0,.69444,0,0],770:[0,.69444,0,0],771:[0,.66786,0,0],772:[0,.56778,0,0],774:[0,.69444,0,0],775:[0,.66786,0,0],776:[0,.66786,0,0],778:[0,.69444,0,0],779:[0,.69444,0,0],780:[0,.62847,0,0],824:[.19444,.69444,0,0],915:[0,.68333,0,0],916:[0,.68333,0,0],920:[0,.68333,0,0],923:[0,.68333,0,0],926:[0,.68333,0,0],928:[0,.68333,0,0],931:[0,.68333,0,0],933:[0,.68333,0,0],934:[0,.68333,0,0],936:[0,.68333,0,0],937:[0,.68333,0,0],8211:[0,.43056,.02778,0],8212:[0,.43056,.02778,0],8216:[0,.69444,0,0],8217:[0,.69444,0,0],8220:[0,.69444,0,0],8221:[0,.69444,0,0],8224:[.19444,.69444,0,0],8225:[.19444,.69444,0,0],8230:[0,.12,0,0],8242:[0,.55556,0,0],8407:[0,.71444,.15382,0],8463:[0,.68889,0,0],8465:[0,.69444,0,0],8467:[0,.69444,0,.11111],8472:[.19444,.43056,0,.11111],8476:[0,.69444,0,0],8501:[0,.69444,0,0],8592:[-.13313,.36687,0,0],8593:[.19444,.69444,0,0],8594:[-.13313,.36687,0,0],8595:[.19444,.69444,0,0],8596:[-.13313,.36687,0,0],8597:[.25,.75,0,0],8598:[.19444,.69444,0,0],8599:[.19444,.69444,0,0],8600:[.19444,.69444,0,0],8601:[.19444,.69444,0,0],8614:[.011,.511,0,0],8617:[.011,.511,0,0],8618:[.011,.511,0,0],8636:[-.13313,.36687,0,0],8637:[-.13313,.36687,0,0],8640:[-.13313,.36687,0,0],8641:[-.13313,.36687,0,0],8652:[.011,.671,0,0],8656:[-.13313,.36687,0,0],8657:[.19444,.69444,0,0],8658:[-.13313,.36687,0,0],8659:[.19444,.69444,0,0],8660:[-.13313,.36687,0,0],8661:[.25,.75,0,0],8704:[0,.69444,0,0],8706:[0,.69444,.05556,.08334],8707:[0,.69444,0,0],8709:[.05556,.75,0,0],8711:[0,.68333,0,0],8712:[.0391,.5391,0,0],8715:[.0391,.5391,0,0],8722:[.08333,.58333,0,0],8723:[.08333,.58333,0,0],8725:[.25,.75,0,0],8726:[.25,.75,0,0],8727:[-.03472,.46528,0,0],8728:[-.05555,.44445,0,0],8729:[-.05555,.44445,0,0],8730:[.2,.8,0,0],8733:[0,.43056,0,0],8734:[0,.43056,0,0],8736:[0,.69224,0,0],8739:[.25,.75,0,0],8741:[.25,.75,0,0],8743:[0,.55556,0,0],8744:[0,.55556,0,0],8745:[0,.55556,0,0],8746:[0,.55556,0,0],8747:[.19444,.69444,.11111,0],8764:[-.13313,.36687,0,0],8768:[.19444,.69444,0,0],8771:[-.03625,.46375,0,0],8773:[-.022,.589,0,0],8776:[-.01688,.48312,0,0],8781:[-.03625,.46375,0,0],8784:[-.133,.67,0,0],8800:[.215,.716,0,0],8801:[-.03625,.46375,0,0],8804:[.13597,.63597,0,0],8805:[.13597,.63597,0,0],8810:[.0391,.5391,0,0],8811:[.0391,.5391,0,0],8826:[.0391,.5391,0,0],8827:[.0391,.5391,0,0],8834:[.0391,.5391,0,0],8835:[.0391,.5391,0,0],8838:[.13597,.63597,0,0],8839:[.13597,.63597,0,0],8846:[0,.55556,0,0],8849:[.13597,.63597,0,0],8850:[.13597,.63597,0,0],8851:[0,.55556,0,0],8852:[0,.55556,0,0],8853:[.08333,.58333,0,0],8854:[.08333,.58333,0,0],8855:[.08333,.58333,0,0],8856:[.08333,.58333,0,0],8857:[.08333,.58333,0,0],8866:[0,.69444,0,0],8867:[0,.69444,0,0],8868:[0,.69444,0,0],8869:[0,.69444,0,0],8872:[.249,.75,0,0],8900:[-.05555,.44445,0,0],8901:[-.05555,.44445,0,0],8902:[-.03472,.46528,0,0],8904:[.005,.505,0,0],8942:[.03,.9,0,0],8943:[-.19,.31,0,0],8945:[-.1,.82,0,0],8968:[.25,.75,0,0],8969:[.25,.75,0,0],8970:[.25,.75,0,0],8971:[.25,.75,0,0],8994:[-.14236,.35764,0,0],8995:[-.14236,.35764,0,0],9136:[.244,.744,0,0],9137:[.244,.744,0,0],9651:[.19444,.69444,0,0],9657:[-.03472,.46528,0,0],9661:[.19444,.69444,0,0],9667:[-.03472,.46528,0,0],9711:[.19444,.69444,0,0],9824:[.12963,.69444,0,0],9825:[.12963,.69444,0,0],9826:[.12963,.69444,0,0],9827:[.12963,.69444,0,0],9837:[0,.75,0,0],9838:[.19444,.69444,0,0],9839:[.19444,.69444,0,0],10216:[.25,.75,0,0],10217:[.25,.75,0,0],10222:[.244,.744,0,0],10223:[.244,.744,0,0],10229:[.011,.511,0,0],10230:[.011,.511,0,0],10231:[.011,.511,0,0],10232:[.024,.525,0,0],10233:[.024,.525,0,0],10234:[.024,.525,0,0],10236:[.011,.511,0,0],10815:[0,.68333,0,0],10927:[.13597,.63597,0,0],10928:[.13597,.63597,0,0]},"Math-BoldItalic":{47:[.19444,.69444,0,0],65:[0,.68611,0,0],66:[0,.68611,.04835,0],67:[0,.68611,.06979,0],68:[0,.68611,.03194,0],69:[0,.68611,.05451,0],70:[0,.68611,.15972,0],71:[0,.68611,0,0],72:[0,.68611,.08229,0],73:[0,.68611,.07778,0],74:[0,.68611,.10069,0],75:[0,.68611,.06979,0],76:[0,.68611,0,0],77:[0,.68611,.11424,0],78:[0,.68611,.11424,0],79:[0,.68611,.03194,0],80:[0,.68611,.15972,0],81:[.19444,.68611,0,0],82:[0,.68611,.00421,0],83:[0,.68611,.05382,0],84:[0,.68611,.15972,0],85:[0,.68611,.11424,0],86:[0,.68611,.25555,0],87:[0,.68611,.15972,0],88:[0,.68611,.07778,0],89:[0,.68611,.25555,0],90:[0,.68611,.06979,0],97:[0,.44444,0,0],98:[0,.69444,0,0],99:[0,.44444,0,0],100:[0,.69444,0,0],101:[0,.44444,0,0],102:[.19444,.69444,.11042,0],103:[.19444,.44444,.03704,0],104:[0,.69444,0,0],105:[0,.69326,0,0],106:[.19444,.69326,.0622,0],107:[0,.69444,.01852,0],108:[0,.69444,.0088,0],109:[0,.44444,0,0],110:[0,.44444,0,0],111:[0,.44444,0,0],112:[.19444,.44444,0,0],113:[.19444,.44444,.03704,0],114:[0,.44444,.03194,0],115:[0,.44444,0,0],116:[0,.63492,0,0],117:[0,.44444,0,0],118:[0,.44444,.03704,0],119:[0,.44444,.02778,0],120:[0,.44444,0,0],121:[.19444,.44444,.03704,0],122:[0,.44444,.04213,0],915:[0,.68611,.15972,0],916:[0,.68611,0,0],920:[0,.68611,.03194,0],923:[0,.68611,0,0],926:[0,.68611,.07458,0],928:[0,.68611,.08229,0],931:[0,.68611,.05451,0],933:[0,.68611,.15972,0],934:[0,.68611,0,0],936:[0,.68611,.11653,0],937:[0,.68611,.04835,0],945:[0,.44444,0,0],946:[.19444,.69444,.03403,0],947:[.19444,.44444,.06389,0],948:[0,.69444,.03819,0],949:[0,.44444,0,0],950:[.19444,.69444,.06215,0],951:[.19444,.44444,.03704,0],952:[0,.69444,.03194,0],953:[0,.44444,0,0],954:[0,.44444,0,0],955:[0,.69444,0,0],956:[.19444,.44444,0,0],957:[0,.44444,.06898,0],958:[.19444,.69444,.03021,0],959:[0,.44444,0,0],960:[0,.44444,.03704,0],961:[.19444,.44444,0,0],962:[.09722,.44444,.07917,0],963:[0,.44444,.03704,0],964:[0,.44444,.13472,0],965:[0,.44444,.03704,0],966:[.19444,.44444,0,0],967:[.19444,.44444,0,0],968:[.19444,.69444,.03704,0],969:[0,.44444,.03704,0],977:[0,.69444,0,0],981:[.19444,.69444,0,0],982:[0,.44444,.03194,0],1009:[.19444,.44444,0,0],1013:[0,.44444,0,0]},"Math-Italic":{47:[.19444,.69444,0,0],65:[0,.68333,0,.13889],66:[0,.68333,.05017,.08334],67:[0,.68333,.07153,.08334],68:[0,.68333,.02778,.05556],69:[0,.68333,.05764,.08334],70:[0,.68333,.13889,.08334],71:[0,.68333,0,.08334],72:[0,.68333,.08125,.05556],73:[0,.68333,.07847,.11111],74:[0,.68333,.09618,.16667],75:[0,.68333,.07153,.05556],76:[0,.68333,0,.02778],77:[0,.68333,.10903,.08334],78:[0,.68333,.10903,.08334],79:[0,.68333,.02778,.08334],80:[0,.68333,.13889,.08334],81:[.19444,.68333,0,.08334],82:[0,.68333,.00773,.08334],83:[0,.68333,.05764,.08334],84:[0,.68333,.13889,.08334],85:[0,.68333,.10903,.02778],86:[0,.68333,.22222,0],87:[0,.68333,.13889,0],88:[0,.68333,.07847,.08334],89:[0,.68333,.22222,0],90:[0,.68333,.07153,.08334],97:[0,.43056,0,0],98:[0,.69444,0,0],99:[0,.43056,0,.05556],100:[0,.69444,0,.16667],101:[0,.43056,0,.05556],102:[.19444,.69444,.10764,.16667],103:[.19444,.43056,.03588,.02778],104:[0,.69444,0,0],105:[0,.65952,0,0],106:[.19444,.65952,.05724,0],107:[0,.69444,.03148,0],108:[0,.69444,.01968,.08334],109:[0,.43056,0,0],110:[0,.43056,0,0],111:[0,.43056,0,.05556],112:[.19444,.43056,0,.08334],113:[.19444,.43056,.03588,.08334],114:[0,.43056,.02778,.05556],115:[0,.43056,0,.05556],116:[0,.61508,0,.08334],117:[0,.43056,0,.02778],118:[0,.43056,.03588,.02778],119:[0,.43056,.02691,.08334],120:[0,.43056,0,.02778],121:[.19444,.43056,.03588,.05556],122:[0,.43056,.04398,.05556],915:[0,.68333,.13889,.08334],916:[0,.68333,0,.16667],920:[0,.68333,.02778,.08334],923:[0,.68333,0,.16667],926:[0,.68333,.07569,.08334],928:[0,.68333,.08125,.05556],931:[0,.68333,.05764,.08334],933:[0,.68333,.13889,.05556],934:[0,.68333,0,.08334],936:[0,.68333,.11,.05556],937:[0,.68333,.05017,.08334],945:[0,.43056,.0037,.02778],946:[.19444,.69444,.05278,.08334],947:[.19444,.43056,.05556,0],948:[0,.69444,.03785,.05556],949:[0,.43056,0,.08334],950:[.19444,.69444,.07378,.08334],951:[.19444,.43056,.03588,.05556],952:[0,.69444,.02778,.08334],953:[0,.43056,0,.05556],954:[0,.43056,0,0],955:[0,.69444,0,0],956:[.19444,.43056,0,.02778],957:[0,.43056,.06366,.02778],958:[.19444,.69444,.04601,.11111],959:[0,.43056,0,.05556],960:[0,.43056,.03588,0],961:[.19444,.43056,0,.08334],962:[.09722,.43056,.07986,.08334],963:[0,.43056,.03588,0],964:[0,.43056,.1132,.02778],965:[0,.43056,.03588,.02778],966:[.19444,.43056,0,.08334],967:[.19444,.43056,0,.05556],968:[.19444,.69444,.03588,.11111],969:[0,.43056,.03588,0],977:[0,.69444,0,.08334],981:[.19444,.69444,0,.08334],982:[0,.43056,.02778,0],1009:[.19444,.43056,0,.08334],1013:[0,.43056,0,.05556]},"Math-Regular":{65:[0,.68333,0,.13889],66:[0,.68333,.05017,.08334],67:[0,.68333,.07153,.08334],68:[0,.68333,.02778,.05556],69:[0,.68333,.05764,.08334],70:[0,.68333,.13889,.08334],71:[0,.68333,0,.08334],72:[0,.68333,.08125,.05556],73:[0,.68333,.07847,.11111],74:[0,.68333,.09618,.16667],75:[0,.68333,.07153,.05556],76:[0,.68333,0,.02778],77:[0,.68333,.10903,.08334],78:[0,.68333,.10903,.08334],79:[0,.68333,.02778,.08334],80:[0,.68333,.13889,.08334],81:[.19444,.68333,0,.08334],82:[0,.68333,.00773,.08334],83:[0,.68333,.05764,.08334],84:[0,.68333,.13889,.08334],85:[0,.68333,.10903,.02778],86:[0,.68333,.22222,0],87:[0,.68333,.13889,0],88:[0,.68333,.07847,.08334],89:[0,.68333,.22222,0],90:[0,.68333,.07153,.08334],97:[0,.43056,0,0],98:[0,.69444,0,0],99:[0,.43056,0,.05556],100:[0,.69444,0,.16667],101:[0,.43056,0,.05556],102:[.19444,.69444,.10764,.16667],103:[.19444,.43056,.03588,.02778],104:[0,.69444,0,0],105:[0,.65952,0,0],106:[.19444,.65952,.05724,0],107:[0,.69444,.03148,0],108:[0,.69444,.01968,.08334],109:[0,.43056,0,0],110:[0,.43056,0,0],111:[0,.43056,0,.05556],112:[.19444,.43056,0,.08334],113:[.19444,.43056,.03588,.08334],114:[0,.43056,.02778,.05556],115:[0,.43056,0,.05556],116:[0,.61508,0,.08334],117:[0,.43056,0,.02778],118:[0,.43056,.03588,.02778],119:[0,.43056,.02691,.08334],120:[0,.43056,0,.02778],121:[.19444,.43056,.03588,.05556],122:[0,.43056,.04398,.05556],915:[0,.68333,.13889,.08334],916:[0,.68333,0,.16667],920:[0,.68333,.02778,.08334],923:[0,.68333,0,.16667],926:[0,.68333,.07569,.08334],928:[0,.68333,.08125,.05556],931:[0,.68333,.05764,.08334],933:[0,.68333,.13889,.05556],934:[0,.68333,0,.08334],936:[0,.68333,.11,.05556],937:[0,.68333,.05017,.08334],945:[0,.43056,.0037,.02778],946:[.19444,.69444,.05278,.08334],947:[.19444,.43056,.05556,0],948:[0,.69444,.03785,.05556],949:[0,.43056,0,.08334],950:[.19444,.69444,.07378,.08334],951:[.19444,.43056,.03588,.05556],952:[0,.69444,.02778,.08334],953:[0,.43056,0,.05556],954:[0,.43056,0,0],955:[0,.69444,0,0],956:[.19444,.43056,0,.02778],957:[0,.43056,.06366,.02778],958:[.19444,.69444,.04601,.11111],959:[0,.43056,0,.05556],960:[0,.43056,.03588,0],961:[.19444,.43056,0,.08334],962:[.09722,.43056,.07986,.08334],963:[0,.43056,.03588,0],964:[0,.43056,.1132,.02778],965:[0,.43056,.03588,.02778],966:[.19444,.43056,0,.08334],967:[.19444,.43056,0,.05556],968:[.19444,.69444,.03588,.11111],969:[0,.43056,.03588,0],977:[0,.69444,0,.08334],981:[.19444,.69444,0,.08334],982:[0,.43056,.02778,0],1009:[.19444,.43056,0,.08334],1013:[0,.43056,0,.05556]},"SansSerif-Regular":{33:[0,.69444,0,0],34:[0,.69444,0,0],35:[.19444,.69444,0,0],36:[.05556,.75,0,0],37:[.05556,.75,0,0],38:[0,.69444,0,0],39:[0,.69444,0,0],40:[.25,.75,0,0],41:[.25,.75,0,0],42:[0,.75,0,0],43:[.08333,.58333,0,0],44:[.125,.08333,0,0],45:[0,.44444,0,0],46:[0,.08333,0,0],47:[.25,.75,0,0],48:[0,.65556,0,0],49:[0,.65556,0,0],50:[0,.65556,0,0],51:[0,.65556,0,0],52:[0,.65556,0,0],53:[0,.65556,0,0],54:[0,.65556,0,0],55:[0,.65556,0,0],56:[0,.65556,0,0],57:[0,.65556,0,0],58:[0,.44444,0,0],59:[.125,.44444,0,0],61:[-.13,.37,0,0],63:[0,.69444,0,0],64:[0,.69444,0,0],65:[0,.69444,0,0],66:[0,.69444,0,0],67:[0,.69444,0,0],68:[0,.69444,0,0],69:[0,.69444,0,0],70:[0,.69444,0,0],71:[0,.69444,0,0],72:[0,.69444,0,0],73:[0,.69444,0,0],74:[0,.69444,0,0],75:[0,.69444,0,0],76:[0,.69444,0,0],77:[0,.69444,0,0],78:[0,.69444,0,0],79:[0,.69444,0,0],80:[0,.69444,0,0],81:[.125,.69444,0,0],82:[0,.69444,0,0],83:[0,.69444,0,0],84:[0,.69444,0,0],85:[0,.69444,0,0],86:[0,.69444,.01389,0],87:[0,.69444,.01389,0],88:[0,.69444,0,0],89:[0,.69444,.025,0],90:[0,.69444,0,0],91:[.25,.75,0,0],93:[.25,.75,0,0],94:[0,.69444,0,0],95:[.35,.09444,.02778,0],97:[0,.44444,0,0],98:[0,.69444,0,0],99:[0,.44444,0,0],100:[0,.69444,0,0],101:[0,.44444,0,0],102:[0,.69444,.06944,0],103:[.19444,.44444,.01389,0],104:[0,.69444,0,0],105:[0,.67937,0,0],106:[.19444,.67937,0,0],107:[0,.69444,0,0],108:[0,.69444,0,0],109:[0,.44444,0,0],110:[0,.44444,0,0],111:[0,.44444,0,0],112:[.19444,.44444,0,0],113:[.19444,.44444,0,0],114:[0,.44444,.01389,0],115:[0,.44444,0,0],116:[0,.57143,0,0],117:[0,.44444,0,0],118:[0,.44444,.01389,0],119:[0,.44444,.01389,0],120:[0,.44444,0,0],121:[.19444,.44444,.01389,0],122:[0,.44444,0,0],126:[.35,.32659,0,0],305:[0,.44444,0,0],567:[.19444,.44444,0,0],768:[0,.69444,0,0],769:[0,.69444,0,0],770:[0,.69444,0,0],771:[0,.67659,0,0],772:[0,.60889,0,0],774:[0,.69444,0,0],775:[0,.67937,0,0],776:[0,.67937,0,0],778:[0,.69444,0,0],779:[0,.69444,0,0],780:[0,.63194,0,0],915:[0,.69444,0,0],916:[0,.69444,0,0],920:[0,.69444,0,0],923:[0,.69444,0,0],926:[0,.69444,0,0],928:[0,.69444,0,0],931:[0,.69444,0,0],933:[0,.69444,0,0],934:[0,.69444,0,0],936:[0,.69444,0,0],937:[0,.69444,0,0],8211:[0,.44444,.02778,0],8212:[0,.44444,.02778,0],8216:[0,.69444,0,0],8217:[0,.69444,0,0],8220:[0,.69444,0,0],8221:[0,.69444,0,0]},"Script-Regular":{65:[0,.7,.22925,0],66:[0,.7,.04087,0],67:[0,.7,.1689,0],68:[0,.7,.09371,0],69:[0,.7,.18583,0],70:[0,.7,.13634,0],71:[0,.7,.17322,0],72:[0,.7,.29694,0],73:[0,.7,.19189,0],74:[.27778,.7,.19189,0],75:[0,.7,.31259,0],76:[0,.7,.19189,0],77:[0,.7,.15981,0],78:[0,.7,.3525,0],79:[0,.7,.08078,0],80:[0,.7,.08078,0],81:[0,.7,.03305,0],82:[0,.7,.06259,0],83:[0,.7,.19189,0],84:[0,.7,.29087,0],85:[0,.7,.25815,0],86:[0,.7,.27523,0],87:[0,.7,.27523,0],88:[0,.7,.26006,0],89:[0,.7,.2939,0],90:[0,.7,.24037,0]},"Size1-Regular":{40:[.35001,.85,0,0],41:[.35001,.85,0,0],47:[.35001,.85,0,0],91:[.35001,.85,0,0],92:[.35001,.85,0,0],93:[.35001,.85,0,0],123:[.35001,.85,0,0],125:[.35001,.85,0,0],710:[0,.72222,0,0],732:[0,.72222,0,0],770:[0,.72222,0,0],771:[0,.72222,0,0],8214:[-99e-5,.601,0,0],8593:[1e-5,.6,0,0],8595:[1e-5,.6,0,0],8657:[1e-5,.6,0,0],8659:[1e-5,.6,0,0],8719:[.25001,.75,0,0],8720:[.25001,.75,0,0],8721:[.25001,.75,0,0],8730:[.35001,.85,0,0],8739:[-.00599,.606,0,0],8741:[-.00599,.606,0,0],8747:[.30612,.805,.19445,0],8748:[.306,.805,.19445,0],8749:[.306,.805,.19445,0],8750:[.30612,.805,.19445,0],8896:[.25001,.75,0,0],8897:[.25001,.75,0,0],8898:[.25001,.75,0,0],8899:[.25001,.75,0,0],8968:[.35001,.85,0,0],8969:[.35001,.85,0,0],8970:[.35001,.85,0,0],8971:[.35001,.85,0,0],9168:[-99e-5,.601,0,0],10216:[.35001,.85,0,0],10217:[.35001,.85,0,0],10752:[.25001,.75,0,0],10753:[.25001,.75,0,0],10754:[.25001,.75,0,0],10756:[.25001,.75,0,0],10758:[.25001,.75,0,0]},"Size2-Regular":{40:[.65002,1.15,0,0],41:[.65002,1.15,0,0],47:[.65002,1.15,0,0],91:[.65002,1.15,0,0],92:[.65002,1.15,0,0],93:[.65002,1.15,0,0],123:[.65002,1.15,0,0],125:[.65002,1.15,0,0],710:[0,.75,0,0],732:[0,.75,0,0],770:[0,.75,0,0],771:[0,.75,0,0],8719:[.55001,1.05,0,0],8720:[.55001,1.05,0,0],8721:[.55001,1.05,0,0],8730:[.65002,1.15,0,0],8747:[.86225,1.36,.44445,0],8748:[.862,1.36,.44445,0],8749:[.862,1.36,.44445,0],8750:[.86225,1.36,.44445,0],8896:[.55001,1.05,0,0],8897:[.55001,1.05,0,0],8898:[.55001,1.05,0,0],8899:[.55001,1.05,0,0],8968:[.65002,1.15,0,0],8969:[.65002,1.15,0,0],8970:[.65002,1.15,0,0],8971:[.65002,1.15,0,0],10216:[.65002,1.15,0,0],10217:[.65002,1.15,0,0],10752:[.55001,1.05,0,0],10753:[.55001,1.05,0,0],10754:[.55001,1.05,0,0],10756:[.55001,1.05,0,0],10758:[.55001,1.05,0,0]},"Size3-Regular":{40:[.95003,1.45,0,0],41:[.95003,1.45,0,0],47:[.95003,1.45,0,0],91:[.95003,1.45,0,0],92:[.95003,1.45,0,0],93:[.95003,1.45,0,0],123:[.95003,1.45,0,0],125:[.95003,1.45,0,0],710:[0,.75,0,0],732:[0,.75,0,0],770:[0,.75,0,0],771:[0,.75,0,0],8730:[.95003,1.45,0,0],8968:[.95003,1.45,0,0],8969:[.95003,1.45,0,0],8970:[.95003,1.45,0,0],8971:[.95003,1.45,0,0],10216:[.95003,1.45,0,0],10217:[.95003,1.45,0,0]},"Size4-Regular":{40:[1.25003,1.75,0,0],41:[1.25003,1.75,0,0],47:[1.25003,1.75,0,0],91:[1.25003,1.75,0,0],92:[1.25003,1.75,0,0],93:[1.25003,1.75,0,0],123:[1.25003,1.75,0,0],125:[1.25003,1.75,0,0],710:[0,.825,0,0],732:[0,.825,0,0],770:[0,.825,0,0],771:[0,.825,0,0],8730:[1.25003,1.75,0,0],8968:[1.25003,1.75,0,0],8969:[1.25003,1.75,0,0],8970:[1.25003,1.75,0,0],8971:[1.25003,1.75,0,0],9115:[.64502,1.155,0,0],9116:[1e-5,.6,0,0],9117:[.64502,1.155,0,0],9118:[.64502,1.155,0,0],9119:[1e-5,.6,0,0],9120:[.64502,1.155,0,0],9121:[.64502,1.155,0,0],9122:[-99e-5,.601,0,0],9123:[.64502,1.155,0,0],9124:[.64502,1.155,0,0],9125:[-99e-5,.601,0,0],9126:[.64502,1.155,0,0],9127:[1e-5,.9,0,0],9128:[.65002,1.15,0,0],9129:[.90001,0,0,0],9130:[0,.3,0,0],9131:[1e-5,.9,0,0],9132:[.65002,1.15,0,0],9133:[.90001,0,0,0],9143:[.88502,.915,0,0],10216:[1.25003,1.75,0,0],10217:[1.25003,1.75,0,0],57344:[-.00499,.605,0,0],57345:[-.00499,.605,0,0],57680:[0,.12,0,0],57681:[0,.12,0,0],57682:[0,.12,0,0],57683:[0,.12,0,0]},"Typewriter-Regular":{33:[0,.61111,0,0],34:[0,.61111,0,0],35:[0,.61111,0,0],36:[.08333,.69444,0,0],37:[.08333,.69444,0,0],38:[0,.61111,0,0],39:[0,.61111,0,0],40:[.08333,.69444,0,0],41:[.08333,.69444,0,0],42:[0,.52083,0,0],43:[-.08056,.53055,0,0],44:[.13889,.125,0,0],45:[-.08056,.53055,0,0],46:[0,.125,0,0],47:[.08333,.69444,0,0],48:[0,.61111,0,0],49:[0,.61111,0,0],50:[0,.61111,0,0],51:[0,.61111,0,0],52:[0,.61111,0,0],53:[0,.61111,0,0],54:[0,.61111,0,0],55:[0,.61111,0,0],56:[0,.61111,0,0],57:[0,.61111,0,0],58:[0,.43056,0,0],59:[.13889,.43056,0,0],60:[-.05556,.55556,0,0],61:[-.19549,.41562,0,0],62:[-.05556,.55556,0,0],63:[0,.61111,0,0],64:[0,.61111,0,0],65:[0,.61111,0,0],66:[0,.61111,0,0],67:[0,.61111,0,0],68:[0,.61111,0,0],69:[0,.61111,0,0],70:[0,.61111,0,0],71:[0,.61111,0,0],72:[0,.61111,0,0],73:[0,.61111,0,0],74:[0,.61111,0,0],75:[0,.61111,0,0],76:[0,.61111,0,0],77:[0,.61111,0,0],78:[0,.61111,0,0],79:[0,.61111,0,0],80:[0,.61111,0,0],81:[.13889,.61111,0,0],82:[0,.61111,0,0],83:[0,.61111,0,0],84:[0,.61111,0,0],85:[0,.61111,0,0],86:[0,.61111,0,0],87:[0,.61111,0,0],88:[0,.61111,0,0],89:[0,.61111,0,0],90:[0,.61111,0,0],91:[.08333,.69444,0,0],92:[.08333,.69444,0,0],93:[.08333,.69444,0,0],94:[0,.61111,0,0],95:[.09514,0,0,0],96:[0,.61111,0,0],97:[0,.43056,0,0],98:[0,.61111,0,0],99:[0,.43056,0,0],100:[0,.61111,0,0],101:[0,.43056,0,0],102:[0,.61111,0,0],103:[.22222,.43056,0,0],104:[0,.61111,0,0],105:[0,.61111,0,0],106:[.22222,.61111,0,0],107:[0,.61111,0,0],108:[0,.61111,0,0],109:[0,.43056,0,0],110:[0,.43056,0,0],111:[0,.43056,0,0],112:[.22222,.43056,0,0],113:[.22222,.43056,0,0],114:[0,.43056,0,0],115:[0,.43056,0,0],116:[0,.55358,0,0],117:[0,.43056,0,0],118:[0,.43056,0,0],119:[0,.43056,0,0],120:[0,.43056,0,0],121:[.22222,.43056,0,0],122:[0,.43056,0,0],123:[.08333,.69444,0,0],124:[.08333,.69444,0,0],125:[.08333,.69444,0,0],126:[0,.61111,0,0],127:[0,.61111,0,0],305:[0,.43056,0,0],567:[.22222,.43056,0,0],768:[0,.61111,0,0],769:[0,.61111,0,0],770:[0,.61111,0,0],771:[0,.61111,0,0],772:[0,.56555,0,0],774:[0,.61111,0,0],776:[0,.61111,0,0],778:[0,.61111,0,0],780:[0,.56597,0,0],915:[0,.61111,0,0],916:[0,.61111,0,0],920:[0,.61111,0,0],923:[0,.61111,0,0],926:[0,.61111,0,0],928:[0,.61111,0,0],931:[0,.61111,0,0],933:[0,.61111,0,0],934:[0,.61111,0,0],936:[0,.61111,0,0],937:[0,.61111,0,0],2018:[0,.61111,0,0],2019:[0,.61111,0,0],8242:[0,.61111,0,0]}}},{}],18:[function(e,t,r){var a=e("./utils");var i=e("./ParseError");function n(e,r,a){if(typeof e==="string"){e=[e]}if(typeof r==="number"){r={numArgs:r}}var i={numArgs:r.numArgs,argTypes:r.argTypes,greediness:r.greediness===undefined?1:r.greediness,allowedInText:!!r.allowedInText,numOptionalArgs:r.numOptionalArgs||0,handler:a};for(var n=0;n<e.length;++n){t.exports[e[n]]=i}}n("\\sqrt",{numArgs:1,numOptionalArgs:1},function(e,t){var r=t[0];var a=t[1];return{type:"sqrt",body:a,index:r}});n("\\text",{numArgs:1,argTypes:["text"],greediness:2},function(e,t){var r=t[0];var a;if(r.type==="ordgroup"){a=r.value}else{a=[r]}return{type:"text",body:a}});n("\\color",{numArgs:2,allowedInText:true,greediness:3,argTypes:["color","original"]},function(e,t){var r=t[0];var a=t[1];var i;if(a.type==="ordgroup"){i=a.value}else{i=[a]}return{type:"color",color:r.value,value:i}});n("\\overline",{numArgs:1},function(e,t){var r=t[0];return{type:"overline",body:r}});n("\\underline",{numArgs:1},function(e,t){var r=t[0];return{type:"underline",body:r}});n("\\rule",{numArgs:2,numOptionalArgs:1,argTypes:["size","size","size"]},function(e,t){var r=t[0];var a=t[1];var i=t[2];return{type:"rule",shift:r&&r.value,width:a.value,height:i.value}});n("\\KaTeX",{numArgs:0},function(e){return{type:"katex"}});n("\\phantom",{numArgs:1},function(e,t){var r=t[0];var a;if(r.type==="ordgroup"){a=r.value}else{a=[r]}return{type:"phantom",value:a}});var s={"\\bigl":{type:"open",size:1},"\\Bigl":{type:"open",size:2},"\\biggl":{type:"open",size:3},"\\Biggl":{type:"open",size:4},"\\bigr":{type:"close",size:1},"\\Bigr":{type:"close",size:2},"\\biggr":{type:"close",size:3},"\\Biggr":{type:"close",size:4},"\\bigm":{type:"rel",size:1},"\\Bigm":{type:"rel",size:2},"\\biggm":{type:"rel",size:3},"\\Biggm":{type:"rel",size:4},"\\big":{type:"textord",size:1},"\\Big":{type:"textord",size:2},"\\bigg":{type:"textord",size:3},"\\Bigg":{type:"textord",size:4}};var l=["(",")","[","\\lbrack","]","\\rbrack","\\{","\\lbrace","\\}","\\rbrace","\\lfloor","\\rfloor","\\lceil","\\rceil","<",">","\\langle","\\rangle","\\lt","\\gt","\\lvert","\\rvert","\\lVert","\\rVert","\\lgroup","\\rgroup","\\lmoustache","\\rmoustache","/","\\backslash","|","\\vert","\\|","\\Vert","\\uparrow","\\Uparrow","\\downarrow","\\Downarrow","\\updownarrow","\\Updownarrow","."];var o={"\\Bbb":"\\mathbb","\\bold":"\\mathbf","\\frak":"\\mathfrak"};n(["\\blue","\\orange","\\pink","\\red","\\green","\\gray","\\purple","\\blueA","\\blueB","\\blueC","\\blueD","\\blueE","\\tealA","\\tealB","\\tealC","\\tealD","\\tealE","\\greenA","\\greenB","\\greenC","\\greenD","\\greenE","\\goldA","\\goldB","\\goldC","\\goldD","\\goldE","\\redA","\\redB","\\redC","\\redD","\\redE","\\maroonA","\\maroonB","\\maroonC","\\maroonD","\\maroonE","\\purpleA","\\purpleB","\\purpleC","\\purpleD","\\purpleE","\\mintA","\\mintB","\\mintC","\\grayA","\\grayB","\\grayC","\\grayD","\\grayE","\\grayF","\\grayG","\\grayH","\\grayI","\\kaBlue","\\kaGreen"],{numArgs:1,allowedInText:true,greediness:3},function(e,t){var r=t[0];var a;if(r.type==="ordgroup"){a=r.value}else{a=[r]}return{type:"color",color:"katex-"+e.funcName.slice(1),value:a}});n(["\\arcsin","\\arccos","\\arctan","\\arg","\\cos","\\cosh","\\cot","\\coth","\\csc","\\deg","\\dim","\\exp","\\hom","\\ker","\\lg","\\ln","\\log","\\sec","\\sin","\\sinh","\\tan","\\tanh"],{numArgs:0},function(e){return{type:"op",limits:false,symbol:false,body:e.funcName}});n(["\\det","\\gcd","\\inf","\\lim","\\liminf","\\limsup","\\max","\\min","\\Pr","\\sup"],{numArgs:0},function(e){return{type:"op",limits:true,symbol:false,body:e.funcName}});n(["\\int","\\iint","\\iiint","\\oint"],{numArgs:0},function(e){return{type:"op",limits:false,symbol:true,body:e.funcName}});n(["\\coprod","\\bigvee","\\bigwedge","\\biguplus","\\bigcap","\\bigcup","\\intop","\\prod","\\sum","\\bigotimes","\\bigoplus","\\bigodot","\\bigsqcup","\\smallint"],{
+numArgs:0},function(e){return{type:"op",limits:true,symbol:true,body:e.funcName}});n(["\\dfrac","\\frac","\\tfrac","\\dbinom","\\binom","\\tbinom"],{numArgs:2,greediness:2},function(e,t){var r=t[0];var a=t[1];var i;var n=null;var s=null;var l="auto";switch(e.funcName){case"\\dfrac":case"\\frac":case"\\tfrac":i=true;break;case"\\dbinom":case"\\binom":case"\\tbinom":i=false;n="(";s=")";break;default:throw new Error("Unrecognized genfrac command")}switch(e.funcName){case"\\dfrac":case"\\dbinom":l="display";break;case"\\tfrac":case"\\tbinom":l="text";break}return{type:"genfrac",numer:r,denom:a,hasBarLine:i,leftDelim:n,rightDelim:s,size:l}});n(["\\llap","\\rlap"],{numArgs:1,allowedInText:true},function(e,t){var r=t[0];return{type:e.funcName.slice(1),body:r}});n(["\\bigl","\\Bigl","\\biggl","\\Biggl","\\bigr","\\Bigr","\\biggr","\\Biggr","\\bigm","\\Bigm","\\biggm","\\Biggm","\\big","\\Big","\\bigg","\\Bigg","\\left","\\right"],{numArgs:1},function(e,t){var r=t[0];if(!a.contains(l,r.value)){throw new i("Invalid delimiter: '"+r.value+"' after '"+e.funcName+"'",e.lexer,e.positions[1])}if(e.funcName==="\\left"||e.funcName==="\\right"){return{type:"leftright",value:r.value}}else{return{type:"delimsizing",size:s[e.funcName].size,delimType:s[e.funcName].type,value:r.value}}});n(["\\tiny","\\scriptsize","\\footnotesize","\\small","\\normalsize","\\large","\\Large","\\LARGE","\\huge","\\Huge"],0,null);n(["\\displaystyle","\\textstyle","\\scriptstyle","\\scriptscriptstyle"],0,null);n(["\\mathrm","\\mathit","\\mathbf","\\mathbb","\\mathcal","\\mathfrak","\\mathscr","\\mathsf","\\mathtt","\\Bbb","\\bold","\\frak"],{numArgs:1,greediness:2},function(e,t){var r=t[0];var a=e.funcName;if(a in o){a=o[a]}return{type:"font",font:a.slice(1),body:r}});n(["\\acute","\\grave","\\ddot","\\tilde","\\bar","\\breve","\\check","\\hat","\\vec","\\dot"],{numArgs:1},function(e,t){var r=t[0];return{type:"accent",accent:e.funcName,base:r}});n(["\\over","\\choose"],{numArgs:0},function(e){var t;switch(e.funcName){case"\\over":t="\\frac";break;case"\\choose":t="\\binom";break;default:throw new Error("Unrecognized infix genfrac command")}return{type:"infix",replaceWith:t}});n(["\\\\","\\cr"],{numArgs:0,numOptionalArgs:1,argTypes:["size"]},function(e,t){var r=t[0];return{type:"cr",size:r}});n(["\\begin","\\end"],{numArgs:1,argTypes:["text"]},function(e,t){var r=t[0];if(r.type!=="ordgroup"){throw new i("Invalid environment name",e.lexer,e.positions[1])}var a="";for(var n=0;n<r.value.length;++n){a+=r.value[n].value}return{type:"environment",name:a,namepos:e.positions[1]}})},{"./ParseError":5,"./utils":23}],19:[function(e,t,r){var a=e("./utils");function i(e,t){this.type=e;this.attributes={};this.children=t||[]}i.prototype.setAttribute=function(e,t){this.attributes[e]=t};i.prototype.toNode=function(){var e=document.createElementNS("http://www.w3.org/1998/Math/MathML",this.type);for(var t in this.attributes){if(Object.prototype.hasOwnProperty.call(this.attributes,t)){e.setAttribute(t,this.attributes[t])}}for(var r=0;r<this.children.length;r++){e.appendChild(this.children[r].toNode())}return e};i.prototype.toMarkup=function(){var e="<"+this.type;for(var t in this.attributes){if(Object.prototype.hasOwnProperty.call(this.attributes,t)){e+=" "+t+'="';e+=a.escape(this.attributes[t]);e+='"'}}e+=">";for(var r=0;r<this.children.length;r++){e+=this.children[r].toMarkup()}e+="</"+this.type+">";return e};function n(e){this.text=e}n.prototype.toNode=function(){return document.createTextNode(this.text)};n.prototype.toMarkup=function(){return a.escape(this.text)};t.exports={MathNode:i,TextNode:n}},{"./utils":23}],20:[function(e,t,r){function a(e,t,r){this.type=e;this.value=t;this.mode=r}t.exports={ParseNode:a}},{}],21:[function(e,t,r){var a=e("./Parser");var i=function(e,t){var r=new a(e,t);return r.parse()};t.exports=i},{"./Parser":6}],22:[function(e,t,r){t.exports={math:{},text:{}};function a(e,r,a,i,n){t.exports[e][n]={font:r,group:a,replace:i}}var i="math";var n="text";var s="main";var l="ams";var o="accent";var u="bin";var p="close";var h="inner";var c="mathord";var v="op";var m="open";var f="punct";var d="rel";var g="spacing";var y="textord";a(i,s,d,"\u2261","\\equiv");a(i,s,d,"\u227a","\\prec");a(i,s,d,"\u227b","\\succ");a(i,s,d,"\u223c","\\sim");a(i,s,d,"\u22a5","\\perp");a(i,s,d,"\u2aaf","\\preceq");a(i,s,d,"\u2ab0","\\succeq");a(i,s,d,"\u2243","\\simeq");a(i,s,d,"\u2223","\\mid");a(i,s,d,"\u226a","\\ll");a(i,s,d,"\u226b","\\gg");a(i,s,d,"\u224d","\\asymp");a(i,s,d,"\u2225","\\parallel");a(i,s,d,"\u22c8","\\bowtie");a(i,s,d,"\u2323","\\smile");a(i,s,d,"\u2291","\\sqsubseteq");a(i,s,d,"\u2292","\\sqsupseteq");a(i,s,d,"\u2250","\\doteq");a(i,s,d,"\u2322","\\frown");a(i,s,d,"\u220b","\\ni");a(i,s,d,"\u221d","\\propto");a(i,s,d,"\u22a2","\\vdash");a(i,s,d,"\u22a3","\\dashv");a(i,s,d,"\u220b","\\owns");a(i,s,f,".","\\ldotp");a(i,s,f,"\u22c5","\\cdotp");a(i,s,y,"#","\\#");a(i,s,y,"&","\\&");a(i,s,y,"\u2135","\\aleph");a(i,s,y,"\u2200","\\forall");a(i,s,y,"\u210f","\\hbar");a(i,s,y,"\u2203","\\exists");a(i,s,y,"\u2207","\\nabla");a(i,s,y,"\u266d","\\flat");a(i,s,y,"\u2113","\\ell");a(i,s,y,"\u266e","\\natural");a(i,s,y,"\u2663","\\clubsuit");a(i,s,y,"\u2118","\\wp");a(i,s,y,"\u266f","\\sharp");a(i,s,y,"\u2662","\\diamondsuit");a(i,s,y,"\u211c","\\Re");a(i,s,y,"\u2661","\\heartsuit");a(i,s,y,"\u2111","\\Im");a(i,s,y,"\u2660","\\spadesuit");a(i,s,y,"\u2020","\\dag");a(i,s,y,"\u2021","\\ddag");a(i,s,p,"\u23b1","\\rmoustache");a(i,s,m,"\u23b0","\\lmoustache");a(i,s,p,"\u27ef","\\rgroup");a(i,s,m,"\u27ee","\\lgroup");a(i,s,u,"\u2213","\\mp");a(i,s,u,"\u2296","\\ominus");a(i,s,u,"\u228e","\\uplus");a(i,s,u,"\u2293","\\sqcap");a(i,s,u,"\u2217","\\ast");a(i,s,u,"\u2294","\\sqcup");a(i,s,u,"\u25ef","\\bigcirc");a(i,s,u,"\u2219","\\bullet");a(i,s,u,"\u2021","\\ddagger");a(i,s,u,"\u2240","\\wr");a(i,s,u,"\u2a3f","\\amalg");a(i,s,d,"\u27f5","\\longleftarrow");a(i,s,d,"\u21d0","\\Leftarrow");a(i,s,d,"\u27f8","\\Longleftarrow");a(i,s,d,"\u27f6","\\longrightarrow");a(i,s,d,"\u21d2","\\Rightarrow");a(i,s,d,"\u27f9","\\Longrightarrow");a(i,s,d,"\u2194","\\leftrightarrow");a(i,s,d,"\u27f7","\\longleftrightarrow");a(i,s,d,"\u21d4","\\Leftrightarrow");a(i,s,d,"\u27fa","\\Longleftrightarrow");a(i,s,d,"\u21a6","\\mapsto");a(i,s,d,"\u27fc","\\longmapsto");a(i,s,d,"\u2197","\\nearrow");a(i,s,d,"\u21a9","\\hookleftarrow");a(i,s,d,"\u21aa","\\hookrightarrow");a(i,s,d,"\u2198","\\searrow");a(i,s,d,"\u21bc","\\leftharpoonup");a(i,s,d,"\u21c0","\\rightharpoonup");a(i,s,d,"\u2199","\\swarrow");a(i,s,d,"\u21bd","\\leftharpoondown");a(i,s,d,"\u21c1","\\rightharpoondown");a(i,s,d,"\u2196","\\nwarrow");a(i,s,d,"\u21cc","\\rightleftharpoons");a(i,l,d,"\u226e","\\nless");a(i,l,d,"\ue010","\\nleqslant");a(i,l,d,"\ue011","\\nleqq");a(i,l,d,"\u2a87","\\lneq");a(i,l,d,"\u2268","\\lneqq");a(i,l,d,"\ue00c","\\lvertneqq");a(i,l,d,"\u22e6","\\lnsim");a(i,l,d,"\u2a89","\\lnapprox");a(i,l,d,"\u2280","\\nprec");a(i,l,d,"\u22e0","\\npreceq");a(i,l,d,"\u22e8","\\precnsim");a(i,l,d,"\u2ab9","\\precnapprox");a(i,l,d,"\u2241","\\nsim");a(i,l,d,"\ue006","\\nshortmid");a(i,l,d,"\u2224","\\nmid");a(i,l,d,"\u22ac","\\nvdash");a(i,l,d,"\u22ad","\\nvDash");a(i,l,d,"\u22ea","\\ntriangleleft");a(i,l,d,"\u22ec","\\ntrianglelefteq");a(i,l,d,"\u228a","\\subsetneq");a(i,l,d,"\ue01a","\\varsubsetneq");a(i,l,d,"\u2acb","\\subsetneqq");a(i,l,d,"\ue017","\\varsubsetneqq");a(i,l,d,"\u226f","\\ngtr");a(i,l,d,"\ue00f","\\ngeqslant");a(i,l,d,"\ue00e","\\ngeqq");a(i,l,d,"\u2a88","\\gneq");a(i,l,d,"\u2269","\\gneqq");a(i,l,d,"\ue00d","\\gvertneqq");a(i,l,d,"\u22e7","\\gnsim");a(i,l,d,"\u2a8a","\\gnapprox");a(i,l,d,"\u2281","\\nsucc");a(i,l,d,"\u22e1","\\nsucceq");a(i,l,d,"\u22e9","\\succnsim");a(i,l,d,"\u2aba","\\succnapprox");a(i,l,d,"\u2246","\\ncong");a(i,l,d,"\ue007","\\nshortparallel");a(i,l,d,"\u2226","\\nparallel");a(i,l,d,"\u22af","\\nVDash");a(i,l,d,"\u22eb","\\ntriangleright");a(i,l,d,"\u22ed","\\ntrianglerighteq");a(i,l,d,"\ue018","\\nsupseteqq");a(i,l,d,"\u228b","\\supsetneq");a(i,l,d,"\ue01b","\\varsupsetneq");a(i,l,d,"\u2acc","\\supsetneqq");a(i,l,d,"\ue019","\\varsupsetneqq");a(i,l,d,"\u22ae","\\nVdash");a(i,l,d,"\u2ab5","\\precneqq");a(i,l,d,"\u2ab6","\\succneqq");a(i,l,d,"\ue016","\\nsubseteqq");a(i,l,u,"\u22b4","\\unlhd");a(i,l,u,"\u22b5","\\unrhd");a(i,l,d,"\u219a","\\nleftarrow");a(i,l,d,"\u219b","\\nrightarrow");a(i,l,d,"\u21cd","\\nLeftarrow");a(i,l,d,"\u21cf","\\nRightarrow");a(i,l,d,"\u21ae","\\nleftrightarrow");a(i,l,d,"\u21ce","\\nLeftrightarrow");a(i,l,d,"\u25b3","\\vartriangle");a(i,l,y,"\u210f","\\hslash");a(i,l,y,"\u25bd","\\triangledown");a(i,l,y,"\u25ca","\\lozenge");a(i,l,y,"\u24c8","\\circledS");a(i,l,y,"\xae","\\circledR");a(i,l,y,"\u2221","\\measuredangle");a(i,l,y,"\u2204","\\nexists");a(i,l,y,"\u2127","\\mho");a(i,l,y,"\u2132","\\Finv");a(i,l,y,"\u2141","\\Game");a(i,l,y,"k","\\Bbbk");a(i,l,y,"\u2035","\\backprime");a(i,l,y,"\u25b2","\\blacktriangle");a(i,l,y,"\u25bc","\\blacktriangledown");a(i,l,y,"\u25a0","\\blacksquare");a(i,l,y,"\u29eb","\\blacklozenge");a(i,l,y,"\u2605","\\bigstar");a(i,l,y,"\u2222","\\sphericalangle");a(i,l,y,"\u2201","\\complement");a(i,l,y,"\xf0","\\eth");a(i,l,y,"\u2571","\\diagup");a(i,l,y,"\u2572","\\diagdown");a(i,l,y,"\u25a1","\\square");a(i,l,y,"\u25a1","\\Box");a(i,l,y,"\u25ca","\\Diamond");a(i,l,y,"\xa5","\\yen");a(i,l,y,"\u2713","\\checkmark");a(i,l,y,"\u2136","\\beth");a(i,l,y,"\u2138","\\daleth");a(i,l,y,"\u2137","\\gimel");a(i,l,y,"\u03dd","\\digamma");a(i,l,y,"\u03f0","\\varkappa");a(i,l,m,"\u250c","\\ulcorner");a(i,l,p,"\u2510","\\urcorner");a(i,l,m,"\u2514","\\llcorner");a(i,l,p,"\u2518","\\lrcorner");a(i,l,d,"\u2266","\\leqq");a(i,l,d,"\u2a7d","\\leqslant");a(i,l,d,"\u2a95","\\eqslantless");a(i,l,d,"\u2272","\\lesssim");a(i,l,d,"\u2a85","\\lessapprox");a(i,l,d,"\u224a","\\approxeq");a(i,l,u,"\u22d6","\\lessdot");a(i,l,d,"\u22d8","\\lll");a(i,l,d,"\u2276","\\lessgtr");a(i,l,d,"\u22da","\\lesseqgtr");a(i,l,d,"\u2a8b","\\lesseqqgtr");a(i,l,d,"\u2251","\\doteqdot");a(i,l,d,"\u2253","\\risingdotseq");a(i,l,d,"\u2252","\\fallingdotseq");a(i,l,d,"\u223d","\\backsim");a(i,l,d,"\u22cd","\\backsimeq");a(i,l,d,"\u2ac5","\\subseteqq");a(i,l,d,"\u22d0","\\Subset");a(i,l,d,"\u228f","\\sqsubset");a(i,l,d,"\u227c","\\preccurlyeq");a(i,l,d,"\u22de","\\curlyeqprec");a(i,l,d,"\u227e","\\precsim");a(i,l,d,"\u2ab7","\\precapprox");a(i,l,d,"\u22b2","\\vartriangleleft");a(i,l,d,"\u22b4","\\trianglelefteq");a(i,l,d,"\u22a8","\\vDash");a(i,l,d,"\u22aa","\\Vvdash");a(i,l,d,"\u2323","\\smallsmile");a(i,l,d,"\u2322","\\smallfrown");a(i,l,d,"\u224f","\\bumpeq");a(i,l,d,"\u224e","\\Bumpeq");a(i,l,d,"\u2267","\\geqq");a(i,l,d,"\u2a7e","\\geqslant");a(i,l,d,"\u2a96","\\eqslantgtr");a(i,l,d,"\u2273","\\gtrsim");a(i,l,d,"\u2a86","\\gtrapprox");a(i,l,u,"\u22d7","\\gtrdot");a(i,l,d,"\u22d9","\\ggg");a(i,l,d,"\u2277","\\gtrless");a(i,l,d,"\u22db","\\gtreqless");a(i,l,d,"\u2a8c","\\gtreqqless");a(i,l,d,"\u2256","\\eqcirc");a(i,l,d,"\u2257","\\circeq");a(i,l,d,"\u225c","\\triangleq");a(i,l,d,"\u223c","\\thicksim");a(i,l,d,"\u2248","\\thickapprox");a(i,l,d,"\u2ac6","\\supseteqq");a(i,l,d,"\u22d1","\\Supset");a(i,l,d,"\u2290","\\sqsupset");a(i,l,d,"\u227d","\\succcurlyeq");a(i,l,d,"\u22df","\\curlyeqsucc");a(i,l,d,"\u227f","\\succsim");a(i,l,d,"\u2ab8","\\succapprox");a(i,l,d,"\u22b3","\\vartriangleright");a(i,l,d,"\u22b5","\\trianglerighteq");a(i,l,d,"\u22a9","\\Vdash");a(i,l,d,"\u2223","\\shortmid");a(i,l,d,"\u2225","\\shortparallel");a(i,l,d,"\u226c","\\between");a(i,l,d,"\u22d4","\\pitchfork");a(i,l,d,"\u221d","\\varpropto");a(i,l,d,"\u25c0","\\blacktriangleleft");a(i,l,d,"\u2234","\\therefore");a(i,l,d,"\u220d","\\backepsilon");a(i,l,d,"\u25b6","\\blacktriangleright");a(i,l,d,"\u2235","\\because");a(i,l,d,"\u22d8","\\llless");a(i,l,d,"\u22d9","\\gggtr");a(i,l,u,"\u22b2","\\lhd");a(i,l,u,"\u22b3","\\rhd");a(i,l,d,"\u2242","\\eqsim");a(i,s,d,"\u22c8","\\Join");a(i,l,d,"\u2251","\\Doteq");a(i,l,u,"\u2214","\\dotplus");a(i,l,u,"\u2216","\\smallsetminus");a(i,l,u,"\u22d2","\\Cap");a(i,l,u,"\u22d3","\\Cup");a(i,l,u,"\u2a5e","\\doublebarwedge");a(i,l,u,"\u229f","\\boxminus");a(i,l,u,"\u229e","\\boxplus");a(i,l,u,"\u22c7","\\divideontimes");a(i,l,u,"\u22c9","\\ltimes");a(i,l,u,"\u22ca","\\rtimes");a(i,l,u,"\u22cb","\\leftthreetimes");a(i,l,u,"\u22cc","\\rightthreetimes");a(i,l,u,"\u22cf","\\curlywedge");a(i,l,u,"\u22ce","\\curlyvee");a(i,l,u,"\u229d","\\circleddash");a(i,l,u,"\u229b","\\circledast");a(i,l,u,"\u22c5","\\centerdot");a(i,l,u,"\u22ba","\\intercal");a(i,l,u,"\u22d2","\\doublecap");a(i,l,u,"\u22d3","\\doublecup");a(i,l,u,"\u22a0","\\boxtimes");a(i,l,d,"\u21e2","\\dashrightarrow");a(i,l,d,"\u21e0","\\dashleftarrow");a(i,l,d,"\u21c7","\\leftleftarrows");a(i,l,d,"\u21c6","\\leftrightarrows");a(i,l,d,"\u21da","\\Lleftarrow");a(i,l,d,"\u219e","\\twoheadleftarrow");a(i,l,d,"\u21a2","\\leftarrowtail");a(i,l,d,"\u21ab","\\looparrowleft");a(i,l,d,"\u21cb","\\leftrightharpoons");a(i,l,d,"\u21b6","\\curvearrowleft");a(i,l,d,"\u21ba","\\circlearrowleft");a(i,l,d,"\u21b0","\\Lsh");a(i,l,d,"\u21c8","\\upuparrows");a(i,l,d,"\u21bf","\\upharpoonleft");a(i,l,d,"\u21c3","\\downharpoonleft");a(i,l,d,"\u22b8","\\multimap");a(i,l,d,"\u21ad","\\leftrightsquigarrow");a(i,l,d,"\u21c9","\\rightrightarrows");a(i,l,d,"\u21c4","\\rightleftarrows");a(i,l,d,"\u21a0","\\twoheadrightarrow");a(i,l,d,"\u21a3","\\rightarrowtail");a(i,l,d,"\u21ac","\\looparrowright");a(i,l,d,"\u21b7","\\curvearrowright");a(i,l,d,"\u21bb","\\circlearrowright");a(i,l,d,"\u21b1","\\Rsh");a(i,l,d,"\u21ca","\\downdownarrows");a(i,l,d,"\u21be","\\upharpoonright");a(i,l,d,"\u21c2","\\downharpoonright");a(i,l,d,"\u21dd","\\rightsquigarrow");a(i,l,d,"\u21dd","\\leadsto");a(i,l,d,"\u21db","\\Rrightarrow");a(i,l,d,"\u21be","\\restriction");a(i,s,y,"\u2018","`");a(i,s,y,"$","\\$");a(i,s,y,"%","\\%");a(i,s,y,"_","\\_");a(i,s,y,"\u2220","\\angle");a(i,s,y,"\u221e","\\infty");a(i,s,y,"\u2032","\\prime");a(i,s,y,"\u25b3","\\triangle");a(i,s,y,"\u0393","\\Gamma");a(i,s,y,"\u0394","\\Delta");a(i,s,y,"\u0398","\\Theta");a(i,s,y,"\u039b","\\Lambda");a(i,s,y,"\u039e","\\Xi");a(i,s,y,"\u03a0","\\Pi");a(i,s,y,"\u03a3","\\Sigma");a(i,s,y,"\u03a5","\\Upsilon");a(i,s,y,"\u03a6","\\Phi");a(i,s,y,"\u03a8","\\Psi");a(i,s,y,"\u03a9","\\Omega");a(i,s,y,"\xac","\\neg");a(i,s,y,"\xac","\\lnot");a(i,s,y,"\u22a4","\\top");a(i,s,y,"\u22a5","\\bot");a(i,s,y,"\u2205","\\emptyset");a(i,l,y,"\u2205","\\varnothing");a(i,s,c,"\u03b1","\\alpha");a(i,s,c,"\u03b2","\\beta");a(i,s,c,"\u03b3","\\gamma");a(i,s,c,"\u03b4","\\delta");a(i,s,c,"\u03f5","\\epsilon");a(i,s,c,"\u03b6","\\zeta");a(i,s,c,"\u03b7","\\eta");a(i,s,c,"\u03b8","\\theta");a(i,s,c,"\u03b9","\\iota");a(i,s,c,"\u03ba","\\kappa");a(i,s,c,"\u03bb","\\lambda");a(i,s,c,"\u03bc","\\mu");a(i,s,c,"\u03bd","\\nu");a(i,s,c,"\u03be","\\xi");a(i,s,c,"o","\\omicron");a(i,s,c,"\u03c0","\\pi");a(i,s,c,"\u03c1","\\rho");a(i,s,c,"\u03c3","\\sigma");a(i,s,c,"\u03c4","\\tau");a(i,s,c,"\u03c5","\\upsilon");a(i,s,c,"\u03d5","\\phi");a(i,s,c,"\u03c7","\\chi");a(i,s,c,"\u03c8","\\psi");a(i,s,c,"\u03c9","\\omega");a(i,s,c,"\u03b5","\\varepsilon");a(i,s,c,"\u03d1","\\vartheta");a(i,s,c,"\u03d6","\\varpi");a(i,s,c,"\u03f1","\\varrho");a(i,s,c,"\u03c2","\\varsigma");a(i,s,c,"\u03c6","\\varphi");a(i,s,u,"\u2217","*");a(i,s,u,"+","+");a(i,s,u,"\u2212","-");a(i,s,u,"\u22c5","\\cdot");a(i,s,u,"\u2218","\\circ");a(i,s,u,"\xf7","\\div");a(i,s,u,"\xb1","\\pm");a(i,s,u,"\xd7","\\times");a(i,s,u,"\u2229","\\cap");a(i,s,u,"\u222a","\\cup");a(i,s,u,"\u2216","\\setminus");a(i,s,u,"\u2227","\\land");a(i,s,u,"\u2228","\\lor");a(i,s,u,"\u2227","\\wedge");a(i,s,u,"\u2228","\\vee");a(i,s,y,"\u221a","\\surd");a(i,s,m,"(","(");a(i,s,m,"[","[");a(i,s,m,"\u27e8","\\langle");a(i,s,m,"\u2223","\\lvert");a(i,s,m,"\u2225","\\lVert");a(i,s,p,")",")");a(i,s,p,"]","]");a(i,s,p,"?","?");a(i,s,p,"!","!");a(i,s,p,"\u27e9","\\rangle");a(i,s,p,"\u2223","\\rvert");a(i,s,p,"\u2225","\\rVert");a(i,s,d,"=","=");a(i,s,d,"<","<");a(i,s,d,">",">");a(i,s,d,":",":");a(i,s,d,"\u2248","\\approx");a(i,s,d,"\u2245","\\cong");a(i,s,d,"\u2265","\\ge");a(i,s,d,"\u2265","\\geq");a(i,s,d,"\u2190","\\gets");a(i,s,d,">","\\gt");a(i,s,d,"\u2208","\\in");a(i,s,d,"\u2209","\\notin");a(i,s,d,"\u2282","\\subset");a(i,s,d,"\u2283","\\supset");a(i,s,d,"\u2286","\\subseteq");a(i,s,d,"\u2287","\\supseteq");a(i,l,d,"\u2288","\\nsubseteq");a(i,l,d,"\u2289","\\nsupseteq");a(i,s,d,"\u22a8","\\models");a(i,s,d,"\u2190","\\leftarrow");a(i,s,d,"\u2264","\\le");a(i,s,d,"\u2264","\\leq");a(i,s,d,"<","\\lt");a(i,s,d,"\u2260","\\ne");a(i,s,d,"\u2260","\\neq");a(i,s,d,"\u2192","\\rightarrow");a(i,s,d,"\u2192","\\to");a(i,l,d,"\u2271","\\ngeq");a(i,l,d,"\u2270","\\nleq");a(i,s,g,null,"\\!");a(i,s,g,"\xa0","\\ ");a(i,s,g,"\xa0","~");a(i,s,g,null,"\\,");a(i,s,g,null,"\\:");a(i,s,g,null,"\\;");a(i,s,g,null,"\\enspace");a(i,s,g,null,"\\qquad");a(i,s,g,null,"\\quad");a(i,s,g,"\xa0","\\space");a(i,s,f,",",",");a(i,s,f,";",";");a(i,s,f,":","\\colon");a(i,l,u,"\u22bc","\\barwedge");a(i,l,u,"\u22bb","\\veebar");a(i,s,u,"\u2299","\\odot");a(i,s,u,"\u2295","\\oplus");a(i,s,u,"\u2297","\\otimes");a(i,s,y,"\u2202","\\partial");a(i,s,u,"\u2298","\\oslash");a(i,l,u,"\u229a","\\circledcirc");a(i,l,u,"\u22a1","\\boxdot");a(i,s,u,"\u25b3","\\bigtriangleup");a(i,s,u,"\u25bd","\\bigtriangledown");a(i,s,u,"\u2020","\\dagger");a(i,s,u,"\u22c4","\\diamond");a(i,s,u,"\u22c6","\\star");a(i,s,u,"\u25c3","\\triangleleft");a(i,s,u,"\u25b9","\\triangleright");a(i,s,m,"{","\\{");a(i,s,p,"}","\\}");a(i,s,m,"{","\\lbrace");a(i,s,p,"}","\\rbrace");a(i,s,m,"[","\\lbrack");a(i,s,p,"]","\\rbrack");a(i,s,m,"\u230a","\\lfloor");a(i,s,p,"\u230b","\\rfloor");a(i,s,m,"\u2308","\\lceil");a(i,s,p,"\u2309","\\rceil");a(i,s,y,"\\","\\backslash");a(i,s,y,"\u2223","|");a(i,s,y,"\u2223","\\vert");a(i,s,y,"\u2225","\\|");a(i,s,y,"\u2225","\\Vert");a(i,s,d,"\u2191","\\uparrow");a(i,s,d,"\u21d1","\\Uparrow");a(i,s,d,"\u2193","\\downarrow");a(i,s,d,"\u21d3","\\Downarrow");a(i,s,d,"\u2195","\\updownarrow");a(i,s,d,"\u21d5","\\Updownarrow");a(i,i,v,"\u2210","\\coprod");a(i,i,v,"\u22c1","\\bigvee");a(i,i,v,"\u22c0","\\bigwedge");a(i,i,v,"\u2a04","\\biguplus");a(i,i,v,"\u22c2","\\bigcap");a(i,i,v,"\u22c3","\\bigcup");a(i,i,v,"\u222b","\\int");a(i,i,v,"\u222b","\\intop");a(i,i,v,"\u222c","\\iint");a(i,i,v,"\u222d","\\iiint");a(i,i,v,"\u220f","\\prod");a(i,i,v,"\u2211","\\sum");a(i,i,v,"\u2a02","\\bigotimes");a(i,i,v,"\u2a01","\\bigoplus");a(i,i,v,"\u2a00","\\bigodot");a(i,i,v,"\u222e","\\oint");a(i,i,v,"\u2a06","\\bigsqcup");a(i,i,v,"\u222b","\\smallint");a(i,s,h,"\u2026","\\ldots");a(i,s,h,"\u22ef","\\cdots");a(i,s,h,"\u22f1","\\ddots");a(i,s,y,"\u22ee","\\vdots");a(i,s,o,"\xb4","\\acute");a(i,s,o,"`","\\grave");a(i,s,o,"\xa8","\\ddot");a(i,s,o,"~","\\tilde");a(i,s,o,"\xaf","\\bar");a(i,s,o,"\u02d8","\\breve");a(i,s,o,"\u02c7","\\check");a(i,s,o,"^","\\hat");a(i,s,o,"\u20d7","\\vec");a(i,s,o,"\u02d9","\\dot");a(i,s,c,"\u0131","\\imath");a(i,s,c,"\u0237","\\jmath");a(n,s,g,"\xa0","\\ ");a(n,s,g,"\xa0"," ");a(n,s,g,"\xa0","~");var b;var x;var w='0123456789/@."';for(b=0;b<w.length;b++){x=w.charAt(b);a(i,s,y,x,x)}var k="0123456789`!@*()-=+[]'\";:?/.,";for(b=0;b<k.length;b++){x=k.charAt(b);a(n,s,y,x,x)}var z="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";for(b=0;b<z.length;b++){x=z.charAt(b);a(i,s,c,x,x);a(n,s,y,x,x)}},{}],23:[function(e,t,r){var a=Array.prototype.indexOf;var i=function(e,t){if(e==null){return-1}if(a&&e.indexOf===a){return e.indexOf(t)}var r=0;var i=e.length;for(;r<i;r++){if(e[r]===t){return r}}return-1};var n=function(e,t){return i(e,t)!==-1};var s=function(e,t){return e===undefined?t:e};var l=/([A-Z])/g;var o=function(e){return e.replace(l,"-$1").toLowerCase()};var u={"&":"&amp;",">":"&gt;","<":"&lt;",'"':"&quot;","'":"&#x27;"};var p=/[&><"']/g;function h(e){return u[e]}function c(e){return(""+e).replace(p,h)}var v;if(typeof document!=="undefined"){var m=document.createElement("span");if("textContent"in m){v=function(e,t){e.textContent=t}}else{v=function(e,t){e.innerText=t}}}function f(e){v(e,"")}t.exports={contains:n,deflt:s,escape:c,hyphenate:o,indexOf:i,setTextContent:v,clearNode:f}},{}]},{},[1])(1)});
\ No newline at end of file

From 7f8733796e5fa3ddb790bb01065ad67756889275 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Wed, 25 May 2016 17:09:39 +0900
Subject: [PATCH 060/109] Detail

---
 browser/components/CodeEditor.js              | 133 ++++-----
 browser/components/MarkdownEditor.js          |  81 ++++++
 browser/components/MarkdownEditor.styl        |  23 ++
 browser/components/MarkdownPreview.js         | 239 ++++-------------
 browser/components/markdown.styl              | 252 ++++++++++++++++++
 browser/lib/Repository.js                     |  26 +-
 browser/lib/markdown.js                       |  18 +-
 .../NoteDetail.styl => Detail/Detail.styl}    |   2 +-
 browser/main/Detail/NoteDetail.js             | 155 +++++++++++
 browser/main/Detail/NoteDetail.styl           |  38 +++
 browser/main/Detail/index.js                  |  65 +++++
 browser/main/Main.js                          |  12 +-
 browser/main/NoteDetail/ArticleEditor.js      | 243 -----------------
 browser/main/NoteDetail/index.js              |  45 ----
 browser/main/NoteList/index.js                | 146 +++++-----
 browser/main/lib/queue.js                     |  57 ++++
 browser/main/store.js                         |  16 ++
 17 files changed, 901 insertions(+), 650 deletions(-)
 create mode 100644 browser/components/MarkdownEditor.js
 create mode 100644 browser/components/MarkdownEditor.styl
 create mode 100644 browser/components/markdown.styl
 rename browser/main/{NoteDetail/NoteDetail.styl => Detail/Detail.styl} (100%)
 create mode 100644 browser/main/Detail/NoteDetail.js
 create mode 100644 browser/main/Detail/NoteDetail.styl
 create mode 100644 browser/main/Detail/index.js
 delete mode 100644 browser/main/NoteDetail/ArticleEditor.js
 delete mode 100644 browser/main/NoteDetail/index.js
 create mode 100644 browser/main/lib/queue.js

diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js
index 8ecf1851..b837c206 100644
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -2,31 +2,20 @@ import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import modes from '../lib/modes'
 import _ from 'lodash'
-import fetchConfig from '../lib/fetchConfig'
-
-const electron = require('electron')
-const remote = electron.remote
-const ipc = electron.ipcRenderer
 
 const ace = window.ace
 
-let config = fetchConfig()
-ipc.on('config-apply', function (e, newConfig) {
-  config = newConfig
-})
-
 export default class CodeEditor extends React.Component {
   constructor (props) {
     super(props)
 
-    this.configApplyHandler = (e, config) => this.handleConfigApply(e, config)
-    this.changeHandler = e => this.handleChange(e)
+    this.changeHandler = (e) => this.handleChange(e)
     this.blurHandler = (e) => {
       if (e.relatedTarget === null) {
         return
       }
 
-      let isFocusingToSearch = e.relatedTarget.className && e.relatedTarget.className.split(' ').some(clss => {
+      let isFocusingToSearch = e.relatedTarget.className && e.relatedTarget.className.split(' ').some((clss) => {
         return clss === 'ace_search_field' || clss === 'ace_searchbtn' || clss === 'ace_replacebtn' || clss === 'ace_searchbtn_close' || clss === 'ace_text-input'
       })
       if (isFocusingToSearch) {
@@ -38,7 +27,7 @@ export default class CodeEditor extends React.Component {
 
     this.killedBuffer = ''
     this.execHandler = (e) => {
-      console.log(e.command.name)
+      console.info('ACE COMMAND >> %s', e.command.name)
       switch (e.command.name) {
         case 'gotolinestart':
           e.preventDefault()
@@ -84,7 +73,7 @@ export default class CodeEditor extends React.Component {
     this.afterExecHandler = (e) => {
       switch (e.command.name) {
         case 'find':
-          Array.prototype.forEach.call(ReactDOM.findDOMNode(this).querySelectorAll('.ace_search_field, .ace_searchbtn, .ace_replacebtn, .ace_searchbtn_close'), el => {
+          Array.prototype.forEach.call(ReactDOM.findDOMNode(this).querySelectorAll('.ace_search_field, .ace_searchbtn, .ace_replacebtn, .ace_searchbtn_close'), (el) => {
             el.removeEventListener('blur', this.blurHandler)
             el.addEventListener('blur', this.blurHandler)
           })
@@ -93,11 +82,6 @@ export default class CodeEditor extends React.Component {
     }
 
     this.state = {
-      fontSize: config['editor-font-size'],
-      fontFamily: config['editor-font-family'],
-      indentType: config['editor-indent-type'],
-      indentSize: config['editor-indent-size'],
-      themeSyntax: config['theme-syntax']
     }
 
     this.silentChange = false
@@ -110,15 +94,15 @@ export default class CodeEditor extends React.Component {
   }
 
   componentDidMount () {
-    let { article } = this.props
-    var el = ReactDOM.findDOMNode(this)
-    var editor = this.editor = ace.edit(el)
+    let { mode, value } = this.props
+    let el = ReactDOM.findDOMNode(this)
+    let editor = this.editor = ace.edit(el)
     editor.$blockScrolling = Infinity
     editor.renderer.setShowGutter(true)
-    editor.setTheme('ace/theme/' + this.state.themeSyntax)
+    editor.setTheme('ace/theme/xcode')
     editor.moveCursorTo(0, 0)
     editor.setReadOnly(!!this.props.readOnly)
-    editor.setFontSize(this.state.fontSize)
+    editor.setFontSize('14')
 
     editor.on('blur', this.blurHandler)
 
@@ -132,31 +116,19 @@ export default class CodeEditor extends React.Component {
       readOnly: true
     })
     editor.commands.addCommand({
-      name: 'Emacs cursor up',
+      name: 'Emacs kill buffer',
       bindKey: {mac: 'Ctrl-Y'},
       exec: function (editor) {
         editor.insert(this.killedBuffer)
       }.bind(this),
       readOnly: true
     })
-    editor.commands.addCommand({
-      name: 'Focus title',
-      bindKey: {win: 'Esc', mac: 'Esc'},
-      exec: function (editor, e) {
-        let currentWindow = remote.getCurrentWebContents()
-        if (config['switch-preview'] === 'rightclick') {
-          currentWindow.send('detail-preview')
-        }
-        currentWindow.send('list-focus')
-      },
-      readOnly: true
-    })
 
     editor.commands.on('exec', this.execHandler)
     editor.commands.on('afterExec', this.afterExecHandler)
 
     var session = editor.getSession()
-    let mode = _.findWhere(modes, {name: article.mode})
+    mode = _.find(modes, {name: mode})
     let syntaxMode = mode != null
       ? mode.mode
       : 'text'
@@ -166,15 +138,12 @@ export default class CodeEditor extends React.Component {
     session.setTabSize(!isNaN(this.state.indentSize) ? parseInt(this.state.indentSize, 10) : 4)
     session.setOption('useWorker', false)
     session.setUseWrapMode(true)
-    session.setValue(this.props.article.content)
+    session.setValue(_.isString(value) ? value : '')
 
     session.on('change', this.changeHandler)
-
-    ipc.on('config-apply', this.configApplyHandler)
   }
 
   componentWillUnmount () {
-    ipc.removeListener('config-apply', this.configApplyHandler)
     this.editor.getSession().removeListener('change', this.changeHandler)
     this.editor.removeListener('blur', this.blurHandler)
     this.editor.commands.removeListener('exec', this.execHandler)
@@ -183,41 +152,37 @@ export default class CodeEditor extends React.Component {
 
   componentDidUpdate (prevProps, prevState) {
     var session = this.editor.getSession()
-    if (this.props.article.key !== prevProps.article.key) {
-      session.removeListener('change', this.changeHandler)
-      session.setValue(this.props.article.content)
-      session.getUndoManager().reset()
-      session.on('change', this.changeHandler)
-    }
-    if (prevProps.article.mode !== this.props.article.mode) {
-      let mode = _.findWhere(modes, {name: this.props.article.mode})
+
+    if (prevProps.mode !== this.props.mode) {
+      let mode = _.find(modes, {name: this.props.mode})
       let syntaxMode = mode != null
         ? mode.mode
         : 'text'
-      session.setMode('ace/mode/' + syntaxMode)
+      session.setMode('ace/mode' + syntaxMode)
     }
   }
 
   handleConfigApply (e, config) {
-    this.setState({
-      fontSize: config['editor-font-size'],
-      fontFamily: config['editor-font-family'],
-      indentType: config['editor-indent-type'],
-      indentSize: config['editor-indent-size'],
-      themeSyntax: config['theme-syntax']
-    }, function () {
-      var editor = this.editor
-      editor.setTheme('ace/theme/' + this.state.themeSyntax)
+    // this.setState({
+    //   fontSize: config['editor-font-size'],
+    //   fontFamily: config['editor-font-family'],
+    //   indentType: config['editor-indent-type'],
+    //   indentSize: config['editor-indent-size'],
+    //   themeSyntax: config['theme-syntax']
+    // }, function () {
+    //   var editor = this.editor
+    //   editor.setTheme('ace/theme/' + this.state.themeSyntax)
 
-      var session = editor.getSession()
-      session.setUseSoftTabs(this.state.indentType === 'space')
-      session.setTabSize(!isNaN(this.state.indentSize) ? parseInt(this.state.indentSize, 10) : 4)
-    })
+    //   var session = editor.getSession()
+    //   session.setUseSoftTabs(this.state.indentType === 'space')
+    //   session.setTabSize(!isNaN(this.state.indentSize) ? parseInt(this.state.indentSize, 10) : 4)
+    // })
   }
+
   handleChange (e) {
     if (this.props.onChange) {
-      var value = this.editor.getValue()
-      this.props.onChange(value)
+      this.value = this.editor.getValue()
+      this.props.onChange(e)
     }
   }
 
@@ -237,13 +202,34 @@ export default class CodeEditor extends React.Component {
     this.editor.scrollToLine(num, false, false)
   }
 
+  focus () {
+    this.editor.focus()
+  }
+
+  blur () {
+    this.editor.blur()
+  }
+
+  reload () {
+    let session = this.editor.getSession()
+    session.removeListener('change', this.changeHandler)
+    session.setValue(this.props.value)
+    session.getUndoManager().reset()
+    session.on('change', this.changeHandler)
+  }
+
   render () {
+    let { className } = this.props
+
     return (
       <div
-        className={this.props.className == null ? 'CodeEditor' : 'CodeEditor ' + this.props.className}
+        className={className == null
+          ? 'CodeEditor'
+          : `CodeEditor ${className}`
+        }
         style={{
-          fontSize: this.state.fontSize,
-          fontFamily: this.state.fontFamily.trim() + ', monospace'
+          fontSize: '14px',
+          fontFamily: 'monospace'
         }}
       />
     )
@@ -251,11 +237,8 @@ export default class CodeEditor extends React.Component {
 }
 
 CodeEditor.propTypes = {
-  article: PropTypes.shape({
-    content: PropTypes.string,
-    mode: PropTypes.string,
-    key: PropTypes.string
-  }),
+  value: PropTypes.string,
+  mode: PropTypes.string,
   className: PropTypes.string,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
new file mode 100644
index 00000000..c2e359d8
--- /dev/null
+++ b/browser/components/MarkdownEditor.js
@@ -0,0 +1,81 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './MarkdownEditor.styl'
+import CodeEditor from 'browser/components/CodeEditor'
+import MarkdownPreview from 'browser/components/MarkdownPreview'
+
+class MarkdownEditor extends React.Component {
+  constructor (props) {
+    super(props)
+    
+    this.state = {
+      status: 'CODE'
+    }
+  }
+
+  handleChange (e) {
+    this.value = this.refs.code.value
+    this.props.onChange(e)
+  }
+
+  handleContextMenu (e) {
+    let newStatus = this.state.status === 'PREVIEW'
+      ? 'CODE'
+      : 'PREVIEW'
+    this.setState({
+      status: newStatus
+    }, () => {
+      if (newStatus === 'CODE') {
+        this.refs.code.focus()
+      } else {
+        this.refs.code.blur()
+        this.refs.preview.focus()
+      }
+    })
+  }
+
+  reload () {
+    this.refs.code.reload()
+  }
+
+  render () {
+    let { className, value } = this.props
+
+    return (
+      <div className={className == null
+          ? 'MarkdownEditor'
+          : `MarkdownEditor ${className}`
+        }
+        onContextMenu={(e) => this.handleContextMenu(e)}
+      >
+        <CodeEditor styleName='codeEditor'
+          ref='code'
+          mode='markdown'
+          value={value}
+          onChange={(e) => this.handleChange(e)}
+        />
+        <MarkdownPreview styleName={this.state.status === 'PREVIEW'
+            ? 'preview'
+            : 'preview--hide'
+          }
+          style={this.props.ignorePreviewPointerEvents
+            ? {pointerEvents: 'none'} : {}
+          }
+          ref='preview'
+          onContextMenu={(e) => this.handleContextMenu(e)}
+          tabIndex='0'
+          value={value}
+        />
+      </div>
+    )
+  }
+}
+
+MarkdownEditor.propTypes = {
+  className: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  ignorePreviewPointerEvents: PropTypes.bool
+}
+
+export default CSSModules(MarkdownEditor, styles)
diff --git a/browser/components/MarkdownEditor.styl b/browser/components/MarkdownEditor.styl
new file mode 100644
index 00000000..d62114ac
--- /dev/null
+++ b/browser/components/MarkdownEditor.styl
@@ -0,0 +1,23 @@
+.root
+  position relative
+
+.codeEditor
+  absolute top bottom left right
+
+.codeEditor--hide
+  @extend .codeEditor
+
+.preview
+  display block
+  absolute top bottom left right
+  z-index 100
+  background-color white
+  height 100%
+  width 100%
+
+.preview--hide
+  @extend .preview
+  z-index 0
+  opacity 0
+  pointer-events none
+
diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index f4c00971..edcbadce 100644
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -1,214 +1,81 @@
 import React, { PropTypes } from 'react'
-import markdown from '../lib/markdown'
-import ReactDOM from 'react-dom'
-import sanitizeHtml from '@rokt33r/sanitize-html'
-import _ from 'lodash'
-import fetchConfig from '../lib/fetchConfig'
+import markdown from 'browser/lib/markdown'
 
-const electron = require('electron')
-const shell = electron.shell
-const ipc = electron.ipcRenderer
-
-const katex = window.katex
-
-const OSX = global.process.platform === 'darwin'
-
-const sanitizeOpts = {
-  allowedTags: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
-  'nl', 'li', 'b', 'i', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div',
-  'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'img', 'span', 'cite', 'del', 'u', 'sub', 'sup', 's', 'input', 'label' ],
-  allowedClasses: {
-    'a': ['lineAnchor'],
-    'div': ['math'],
-    'pre': ['hljs'],
-    'span': ['math', 'hljs-*', 'lineNumber'],
-    'code': ['language-*']
-  },
-  allowedAttributes: {
-    a: ['href', 'data-key'],
-    img: [ 'src' ],
-    label: ['for'],
-    input: ['checked', 'type'],
-    '*': ['id', 'name']
-  },
-  transformTags: {
-    '*': function (tagName, attribs) {
-      let href = attribs.href
-      if (tagName === 'input' && attribs.type !== 'checkbox') {
-        return false
-      }
-      if (_.isString(href) && href.match(/^#.+$/)) attribs.href = href.replace(/^#/, '#md-anchor-')
-      if (attribs.id) attribs.id = 'md-anchor-' + attribs.id
-      if (attribs.name) attribs.name = 'md-anchor-' + attribs.name
-      if (attribs.for) attribs.for = 'md-anchor-' + attribs.for
-      return {
-        tagName: tagName,
-        attribs: attribs
-      }
-    }
-  }
-}
-
-function handleAnchorClick (e) {
-  if (this.attributes.href && this.attributes.href.nodeValue.match(/^#.+/)) {
-    return
-  }
+const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
+const { shell } = require('electron')
+const goExternal = function (e) {
   e.preventDefault()
-  e.stopPropagation()
-  let href = this.href
-  if (href && href.match(/^http:\/\/|https:\/\/|mailto:\/\//)) {
-    shell.openExternal(href)
-  }
+  shell.openExternal(e.target.href)
 }
 
-function stopPropagation (e) {
-  e.preventDefault()
-  e.stopPropagation()
-}
-
-function math2Katex (display) {
-  return function (el) {
-    try {
-      katex.render(el.innerHTML.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&amp;/g, '&'), el, {display: display})
-      el.className = 'math-rendered'
-    } catch (e) {
-      el.innerHTML = e.message
-      el.className = 'math-failed'
-    }
-  }
-}
-
-let config = fetchConfig()
-ipc.on('config-apply', function (e, newConfig) {
-  config = newConfig
-})
-
 export default class MarkdownPreview extends React.Component {
   constructor (props) {
     super(props)
 
-    this.configApplyHandler = (e, config) => this.handleConfigApply(e, config)
-
-    this.state = {
-      fontSize: config['preview-font-size'],
-      fontFamily: config['preview-font-family'],
-      lineNumber: config['preview-line-number']
-    }
+    this.contextMenuHandler = (e) => this.handleContextMenu(e)
   }
+
+  handleContextMenu (e) {
+    this.props.onContextMenu(e)
+  }
+
   componentDidMount () {
-    this.addListener()
-    this.renderMath()
-    ipc.on('config-apply', this.configApplyHandler)
-  }
-
-  componentDidUpdate () {
-    this.addListener()
-    this.renderMath()
+    this.refs.root.setAttribute('sandbox', 'allow-same-origin')
+    this.refs.root.contentWindow.document.body.addEventListener('contextmenu', this.contextMenuHandler)
+    this.rewriteIframe()
   }
 
   componentWillUnmount () {
-    this.removeListener()
-    ipc.removeListener('config-apply', this.configApplyHandler)
+    this.refs.root.contentWindow.document.body.removeEventListener('contextmenu', this.contextMenuHandler)
   }
 
-  componentWillUpdate () {
-    this.removeListener()
+  componentDidUpdate (prevProps) {
+    if (prevProps.value !== this.props.value) this.rewriteIframe()
   }
 
-  renderMath () {
-    let inline = ReactDOM.findDOMNode(this).querySelectorAll('span.math')
-    Array.prototype.forEach.call(inline, math2Katex(false))
-    let block = ReactDOM.findDOMNode(this).querySelectorAll('div.math')
-    Array.prototype.forEach.call(block, math2Katex(true))
-  }
-
-  addListener () {
-    var anchors = ReactDOM.findDOMNode(this).querySelectorAll('a:not(.lineAnchor)')
-    var inputs = ReactDOM.findDOMNode(this).querySelectorAll('input')
-
-    Array.prototype.forEach.call(anchors, anchor => {
-      anchor.addEventListener('click', handleAnchorClick)
-      anchor.addEventListener('mousedown', stopPropagation)
-      anchor.addEventListener('mouseup', stopPropagation)
+  rewriteIframe () {
+    Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.removeEventListener('click', goExternal)
     })
-    Array.prototype.forEach.call(inputs, input => {
-      input.addEventListener('click', stopPropagation)
+
+    let { value } = this.props
+    this.refs.root.contentWindow.document.head.innerHTML = `
+      <style>
+        @font-face {
+          font-family: 'Lato';
+          src: url('../resources/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
+               url('../resources/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
+               url('../resources/fonts/Lato-Regular.ttf') format('truetype');
+          font-style: normal;
+          font-weight: normal;
+          text-rendering: optimizeLegibility;
+        }
+        ${markdownStyle}
+      </style>
+      <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css" id="hljs-css">
+      <link rel="stylesheet" href="../resources/katex.min.css">
+    `
+    this.refs.root.contentWindow.document.body.innerHTML = markdown(value)
+
+    Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.addEventListener('click', goExternal)
     })
   }
 
-  removeListener () {
-    var anchors = ReactDOM.findDOMNode(this).querySelectorAll('a:not(.lineAnchor)')
-    var inputs = ReactDOM.findDOMNode(this).querySelectorAll('input')
-
-    Array.prototype.forEach.call(anchors, anchor => {
-      anchor.removeEventListener('click', handleAnchorClick)
-      anchor.removeEventListener('mousedown', stopPropagation)
-      anchor.removeEventListener('mouseup', stopPropagation)
-    })
-    Array.prototype.forEach.call(inputs, input => {
-      input.removeEventListener('click', stopPropagation)
-    })
-  }
-
-  handleClick (e) {
-    if (this.props.onClick) {
-      this.props.onClick(e)
-    }
-  }
-
-  handleDoubleClick (e) {
-    if (this.props.onDoubleClick) {
-      this.props.onDoubleClick(e)
-    }
-  }
-
-  handleMouseDown (e) {
-    if (this.props.onMouseDown) {
-      this.props.onMouseDown(e)
-    }
-  }
-
-  handleMouseUp (e) {
-    if (this.props.onMouseUp) {
-      this.props.onMouseUp(e)
-    }
-  }
-
-  handleMouseMove (e) {
-    if (this.props.onMouseMove) {
-      this.props.onMouseMove(e)
-    }
-  }
-
-  handleConfigApply (e, config) {
-    this.setState({
-      fontSize: config['preview-font-size'],
-      fontFamily: config['preview-font-family'],
-      lineNumber: config['preview-line-number']
-    })
+  focus () {
+    this.refs.root.focus()
   }
 
   render () {
-    let isEmpty = this.props.content.trim().length === 0
-    let content = isEmpty
-      ? '(Empty content)'
-      : this.props.content
-    content = markdown(content)
-    content = sanitizeHtml(content, sanitizeOpts)
-
+    let { className, style, tabIndex } = this.props
     return (
-      <div
-        className={'MarkdownPreview' + (this.props.className != null ? ' ' + this.props.className : '') + (isEmpty ? ' empty' : '') + (this.state.lineNumber ? ' lineNumbered' : '')}
-        onClick={e => this.handleClick(e)}
-        onDoubleClick={e => this.handleDoubleClick(e)}
-        onMouseDown={e => this.handleMouseDown(e)}
-        onMouseMove={e => this.handleMouseMove(e)}
-        onMouseUp={e => this.handleMouseUp(e)}
-        dangerouslySetInnerHTML={{__html: ' ' + content}}
-        style={{
-          fontSize: this.state.fontSize,
-          fontFamily: this.state.fontFamily.trim() + (OSX ? '' : ', meiryo, \'Microsoft YaHei\'') + ', helvetica, arial, sans-serif'
-        }}
+      <iframe className={className != null
+          ? 'MarkdownPreview ' + className
+          : 'MarkdownPreview'
+        }
+        style={style}
+        tabIndex={tabIndex}
+        ref='root'
       />
     )
   }
@@ -221,5 +88,5 @@ MarkdownPreview.propTypes = {
   onMouseDown: PropTypes.func,
   onMouseMove: PropTypes.func,
   className: PropTypes.string,
-  content: PropTypes.string
+  value: PropTypes.string
 }
diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl
new file mode 100644
index 00000000..70eb65b0
--- /dev/null
+++ b/browser/components/markdown.styl
@@ -0,0 +1,252 @@
+global-reset()
+
+borderColor = #D0D0D0 // using
+highlightenBorderColor = darken(borderColor, 20%)
+invBorderColor = #404849
+brandBorderColor = #3FB399
+
+focusBorderColor = #369DCD
+
+buttonBorderColor = #4C4C4C
+
+lightButtonColor = #898989
+
+hoverBackgroundColor= transparentify(#444, 4%) // using
+
+inactiveTextColor = #888 // using
+textColor = #4D4D4D // using
+backgroundColor= white
+fontSize= 14px // using
+
+shadowColor= #C5C5C5
+
+invBackgroundColor = #4C4C4C
+invTextColor = white
+
+btnColor = #888
+btnHighlightenColor = #000
+
+brandColor = #2BAC8F
+
+popupShadow = 0 0 5px 0 #888
+
+
+tableHeadBgColor = white
+tableOddBgColor = #F9F9F9
+tableEvenBgColor = white
+
+facebookColor= #3b5998
+githubBtn= #201F1F
+
+// using
+successBackgroundColor= #E0F0D9
+successTextColor= #3E753F
+errorBackgroundColor= #F2DEDE
+errorTextColor= #A64444
+infoBackgroundColor= #D9EDF7
+infoTextColor= #34708E
+
+popupZIndex= 500
+
+body
+  font-size 16px
+  padding 15px
+  font-family helvetica, arial, sans-serif
+  line-height 1.6
+  overflow-x hidden
+  .katex
+    font 400 1.2em 'KaTeX_Main'
+    line-height 1.2em
+    white-space nowrap
+    text-indent 0
+  .katex .mfrac>.vlist>span:nth-child(2)
+    top 0 !important
+  .katex-error
+    background-color errorBackgroundColor
+    color errorTextColor
+    padding 5px
+    margin -5px
+    border-radius 5px
+div.math-rendered
+  text-align center
+.math-failed
+  background-color alpha(red, 0.1)
+  color darken(red, 15%)
+  padding 5px
+  margin 5px 0
+  border-radius 5px
+sup
+  position relative
+  top -.4em
+  font-size 0.8em
+  vertical-align top
+sub
+  position relative
+  bottom -.4em
+  font-size 0.8em
+  vertical-align top
+a
+  color brandColor
+  text-decoration none
+  padding 5px
+  border-radius 5px
+  margin -5px
+  transition .1s
+  display inline-block
+  img
+    vertical-align sub
+  &:hover
+    color lighten(brandColor, 5%)
+    text-decoration underline
+    background-color alpha(#FFC95C, 0.3)
+  &:visited
+    color brandColor
+  &.lineAnchor
+    padding 0
+    margin 0
+    display block
+    font-size 0
+    height 0
+hr
+  border-top none
+  border-bottom solid 1px borderColor
+  margin 15px 0
+h1, h2, h3, h4, h5, h6
+  font-weight bold
+h1
+  font-size 2.25em
+  padding-bottom 0.3em
+  line-height 1.2em
+  border-bottom solid 1px borderColor
+  margin 1em 0 0.44em
+  &:first-child
+    margin-top 0
+h2
+  font-size 1.75em
+  padding-bottom 0.3em
+  line-height 1.225em
+  border-bottom solid 1px borderColor
+  margin 1em 0 0.57em
+  &:first-child
+    margin-top 0
+h3
+  font-size 1.5em
+  line-height 1.43em
+  margin 1em 0 0.66em
+h4
+  font-size 1.25em
+  line-height 1.4em
+  margin 1em 0 0.8em
+h5
+  font-size 1em
+  line-height 1.4em
+  margin 1em 0 1em
+h6
+  font-size 1em
+  line-height 1.4em
+  margin 1em 0 1em
+  color #777
+
+*:not(a.lineAnchor) + p, *:not(a.lineAnchor) + blockquote, *:not(a.lineAnchor) + ul, *:not(a.lineAnchor) + ol, *:not(a.lineAnchor) + pre
+  margin-top 1em
+p
+  line-height 1.6em
+  margin 0 0 1em
+  white-space pre-line
+img
+  max-width 100%
+strong, b
+  font-weight bold
+em, i
+  font-style italic
+s, del, strike
+  text-decoration line-through
+u
+  text-decoration underline
+blockquote
+  border-left solid 4px brandBorderColor
+  margin 0 0 1em
+  padding 0 25px
+ul
+  list-style-type disc
+  padding-left 2em
+  margin-bottom 1em
+  li
+    display list-item
+  &>li>ul, &>li>ol
+    margin 0
+  &>li>ul
+    list-style-type circle
+    &>li>ul
+      list-style-type square
+ol
+  list-style-type decimal
+  padding-left 2em
+  margin-bottom 1em
+  li
+    display list-item
+  &>li>ul, &>li>ol
+    margin 0
+code
+  font-family Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace
+  padding 0.2em 0.4em
+  background-color #f7f7f7
+  border-radius 3px
+  font-size 0.85em
+  text-decoration none
+  margin-right 2px
+*:not(a.lineAnchor) + code
+  margin-left 2px
+pre
+  padding 1em !important
+  background-color #f7f7f7 !important
+  border-radius 5px
+  overflow-x auto
+  margin 0 0 1em
+  line-height 1.35
+  code
+    margin 0
+    padding 0
+    border none
+    border-radius 0
+    pre
+      border none
+      margin -5px
+  &>span.lineNumber
+    font-family Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace
+    display none
+    float left
+    margin 0 0.5em 0 -0.5em
+    border-right 1px solid
+    text-align right
+    &>span
+      display block
+      padding 0 .5em 0 1em
+table
+  display block
+  width 100%
+  margin 0 0 1em
+  thead
+    tr
+      background-color tableHeadBgColor
+    th
+      border-style solid
+      padding 6px 13px
+      line-height 1.6
+      border-width 1px 0 2px 1px
+      border-color borderColor
+      &:last-child
+        border-right solid 1px borderColor
+  tbody
+    tr:nth-child(2n + 1)
+      background-color tableOddBgColor
+    tr:nth-child(2n)
+      background-color tableEvenBgColor
+    td
+      border-style solid
+      padding 6px 13px
+      line-height 1.6
+      border-width 0 0 1px 1px
+      border-color borderColor
+      &:last-child
+        border-right solid 1px borderColor
diff --git a/browser/lib/Repository.js b/browser/lib/Repository.js
index b23e497d..a3c0edc2 100644
--- a/browser/lib/Repository.js
+++ b/browser/lib/Repository.js
@@ -149,16 +149,16 @@ class Repository {
     let fetchNotes = () => {
       let noteNames = fs.readdirSync(dataPath)
       let notes = noteNames
-        .map((noteName) => {
-          let notePath = path.join(dataPath, noteName)
-
+        .map((noteName) => path.join(dataPath, noteName))
+        .filter((notePath) => CSON.isObjectPath(notePath))
+        .map((notePath) => {
           return new Promise(function (resolve, reject) {
             CSON.readFile(notePath, function (err, obj) {
               if (err != null) {
                 console.log(err)
                 return resolve(null)
               }
-              obj.key = path.basename(noteName, '.cson')
+              obj.key = path.basename(notePath, '.cson')
               return resolve(obj)
             })
           })
@@ -427,24 +427,16 @@ class Repository {
   }
 
   updateNote (noteKey, override) {
-    let note = _.find(this.notes, {key: noteKey})
-    let isNew = false
-    if (note == null) {
-      note = override
-      isNew = true
-    }
-
-    if (!this.constructor.validateNote(note)) {
+    if (!this.constructor.validateNote(override)) {
       return Promise.reject(new Error('Invalid input'))
     }
 
-    if (isNew) this.notes.push(note)
-    note.updatedAt = new Date()
-
+    override.updatedAt = new Date()
     return new Promise((resolve, reject) => {
-      CSON.writeFile(path.join(this.cached.path, 'data', note.key + '.cson'), _.omit(note, ['key']), function (err) {
+      CSON.writeFile(path.join(this.cached.path, 'data', noteKey + '.cson'), _.omit(override, ['key']), function (err) {
         if (err != null) return reject(err)
-        resolve(note)
+        override.key = noteKey
+        resolve(override)
       })
     })
   }
diff --git a/browser/lib/markdown.js b/browser/lib/markdown.js
index d8636f8e..9667bf80 100644
--- a/browser/lib/markdown.js
+++ b/browser/lib/markdown.js
@@ -3,6 +3,8 @@ import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
 import hljs from 'highlight.js'
 
+const katex = window.katex
+
 function createGutter (str) {
   let lc = (str.match(/\n/g) || []).length
   let lines = []
@@ -39,10 +41,22 @@ md.use(emoji, {
 })
 md.use(math, {
   inlineRenderer: function (str) {
-    return `<span class='math'>${str}</span>`
+    let output = ''
+    try {
+      output = katex.renderToString(str.trim())
+    } catch (err) {
+      output = `<span class="katex-error">${err.message}</span>`
+    }
+    return output
   },
   blockRenderer: function (str) {
-    return `<div class='math'>${str}</div>`
+    let output = ''
+    try {
+      output = katex.renderToString(str.trim(), {displayMode: true})
+    } catch (err) {
+      output = `<div class="katex-error">${err.message}</div>`
+    }
+    return output
   }
 })
 md.use(require('markdown-it-checkbox'))
diff --git a/browser/main/NoteDetail/NoteDetail.styl b/browser/main/Detail/Detail.styl
similarity index 100%
rename from browser/main/NoteDetail/NoteDetail.styl
rename to browser/main/Detail/Detail.styl
index 3a641159..8d2374ce 100644
--- a/browser/main/NoteDetail/NoteDetail.styl
+++ b/browser/main/Detail/Detail.styl
@@ -8,10 +8,10 @@
   height 320px
   display flex
   align-items center
+
 .empty-message
   width 100%
   font-size 42px
   line-height 72px
   text-align center
   color $ui-inactive-text-color
-
diff --git a/browser/main/Detail/NoteDetail.js b/browser/main/Detail/NoteDetail.js
new file mode 100644
index 00000000..b0b55f7d
--- /dev/null
+++ b/browser/main/Detail/NoteDetail.js
@@ -0,0 +1,155 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './NoteDetail.styl'
+import MarkdownEditor from 'browser/components/MarkdownEditor'
+import queue from 'browser/main/lib/queue'
+
+class NoteDetail extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      note: Object.assign({}, props.note),
+      isDispatchQueued: false
+    }
+    this.dispatchTimer = null
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.note.key !== this.props.note.key) {
+      if (this.state.isDispatchQueued) {
+        this.dispatch()
+      }
+      this.setState({
+        note: Object.assign({}, nextProps.note),
+        isDispatchQueued: false
+      }, () => {
+        this.refs.content.reload()
+      })
+    }
+  }
+
+  findTitle (value) {
+    let splitted = value.split('\n')
+    let title = null
+
+    for (let i = 0; i < splitted.length; i++) {
+      let trimmedLine = splitted[i].trim()
+      if (trimmedLine.match(/^# .+/)) {
+        title = trimmedLine.substring(1, trimmedLine.length).trim()
+        break
+      }
+    }
+
+    if (title == null) {
+      for (let i = 0; i < splitted.length; i++) {
+        let trimmedLine = splitted[i].trim()
+        if (trimmedLine.length > 0) {
+          title = trimmedLine
+          break
+        }
+      }
+      if (title == null) {
+        title = ''
+      }
+    }
+
+    return title
+  }
+
+  handleChange (e) {
+    let { note } = this.state
+
+    note.content = this.refs.content.value
+
+    this.setState({
+      note,
+      isDispatchQueued: true
+    }, () => {
+      this.queueDispatch()
+    })
+  }
+
+  cancelDispatchQueue () {
+    if (this.dispatchTimer != null) {
+      window.clearTimeout(this.dispatchTimer)
+      this.dispatchTimer = null
+    }
+  }
+
+  queueDispatch () {
+    this.cancelDispatchQueue()
+
+    this.dispatchTimer = window.setTimeout(() => {
+      this.dispatch()
+      this.setState({
+        isDispatchQueued: false
+      })
+    }, 500)
+  }
+
+  dispatch () {
+    let { note } = this.state
+    note = Object.assign({}, note)
+    let repoKey = note._repository.key
+    note.title = this.findTitle(note.content)
+
+    let { dispatch } = this.props
+    dispatch({
+      type: 'SAVE_NOTE',
+      repository: repoKey,
+      note: note
+    })
+    queue.save(repoKey, note)
+  }
+
+  render () {
+    return (
+      <div className='NoteDetail'
+        style={this.props.style}
+        styleName='root'
+      >
+        <div styleName='info'>
+          <div styleName='info-left'>
+            <div styleName='info-left-folderSelect'>FOLDER SELECT</div>
+            <div styleName='info-left-tagSelect'>TAG SELECT</div>
+          </div>
+          <div styleName='info-right'>
+            <button styleName='info-right-button'>
+              <i className='fa fa-clipboard fa-fw'/>
+            </button>
+            <button styleName='info-right-button'>
+              <i className='fa fa-share-alt fa-fw'/>
+            </button>
+            <button styleName='info-right-button'>
+              <i className='fa fa-ellipsis-v'/>
+            </button>
+          </div>
+        </div>
+        <div styleName='body'>
+          <MarkdownEditor
+            ref='content'
+            styleName='body-noteEditor'
+            value={this.state.note.content}
+            onChange={(e) => this.handleChange(e)}
+            ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+NoteDetail.propTypes = {
+  dispatch: PropTypes.func,
+  repositories: PropTypes.array,
+  style: PropTypes.shape({
+    left: PropTypes.number
+  }),
+  ignorePreviewPointerEvents: PropTypes.bool
+}
+
+export default CSSModules(NoteDetail, styles)
diff --git a/browser/main/Detail/NoteDetail.styl b/browser/main/Detail/NoteDetail.styl
new file mode 100644
index 00000000..8cd7235a
--- /dev/null
+++ b/browser/main/Detail/NoteDetail.styl
@@ -0,0 +1,38 @@
+.root
+  absolute top bottom right
+  border-width 1px 0
+  border-style solid
+  border-color $ui-borderColor
+
+.info
+  absolute top left right
+  height 50px
+  border-bottom $ui-border
+  background-color $ui-backgroundColor
+
+.info-left
+  float left
+
+.info-right
+  float right
+
+.info-right-button
+  width 34px
+  height 34px
+  border-radius 17px
+  navButtonColor()
+  border $ui-border
+  font-size 14px
+  margin 8px 2px
+  padding 0
+  &:active
+    border-color $ui-button--active-backgroundColor
+  &:hover .left-control-newPostButton-tooltip
+    display block
+
+.body
+  absolute bottom left right
+  top 50px
+
+.body-noteEditor
+  absolute top bottom left right
diff --git a/browser/main/Detail/index.js b/browser/main/Detail/index.js
new file mode 100644
index 00000000..e536b857
--- /dev/null
+++ b/browser/main/Detail/index.js
@@ -0,0 +1,65 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './Detail.styl'
+import _ from 'lodash'
+import NoteDetail from './NoteDetail'
+
+const electron = require('electron')
+
+const OSX = global.process.platform === 'darwin'
+
+class Detail extends React.Component {
+  componentDidUpdate (prevProps, prevState) {
+  }
+
+  render () {
+    let { repositories, location } = this.props
+    let note = null
+    if (location.query.key != null) {
+      let splitted = location.query.key.split('-')
+      let repoKey = splitted.shift()
+      let noteKey = splitted.shift()
+      let repo = _.find(repositories, {key: repoKey})
+      if (_.isObject(repo) && _.isArray(repo.notes)) {
+        note = _.find(repo.notes, {key: noteKey})
+      }
+    }
+
+    if (note == null) {
+      return (
+        <div className='Detail'
+          style={this.props.style}
+          styleName='root'
+          tabIndex='0'
+        >
+          <div styleName='empty'>
+            <div styleName='empty-message'>{OSX ? 'Command(⌘)' : 'Ctrl(^)'} + N<br/>to create a new post</div>
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <NoteDetail
+        note={note}
+        {..._.pick(this.props, [
+          'dispatch',
+          'repositories',
+          'style',
+          'ignorePreviewPointerEvents'
+        ])}
+      />
+    )
+  }
+}
+
+Detail.propTypes = {
+  dispatch: PropTypes.func,
+  repositories: PropTypes.array,
+  style: PropTypes.shape({
+    left: PropTypes.number
+  }),
+  ignorePreviewPointerEvents: PropTypes.bool
+}
+
+export default CSSModules(Detail, styles)
diff --git a/browser/main/Main.js b/browser/main/Main.js
index c3489f87..c0aa045f 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 import SideNav from './SideNav'
 import TopBar from './TopBar'
 import NoteList from './NoteList'
-import NoteDetail from './NoteDetail'
+import Detail from './Detail'
 import Repository from 'browser/lib/Repository'
 import StatusBar from './StatusBar'
 import _ from 'lodash'
@@ -111,8 +111,16 @@ class Main extends React.Component {
           >
             <div styleName='slider-hitbox'/>
           </div>
-          <NoteDetail
+          <Detail
             style={{left: this.state.listWidth + 1}}
+            {..._.pick(this.props, [
+              'dispatch',
+              'repositories',
+              'config',
+              'params',
+              'location'
+            ])}
+            ignorePreviewPointerEvents={this.state.isSliderFocused}
           />
         </div>
         <StatusBar
diff --git a/browser/main/NoteDetail/ArticleEditor.js b/browser/main/NoteDetail/ArticleEditor.js
deleted file mode 100644
index e7a4b00d..00000000
--- a/browser/main/NoteDetail/ArticleEditor.js
+++ /dev/null
@@ -1,243 +0,0 @@
-import React, { PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import MarkdownPreview from 'browser/components/MarkdownPreview'
-import CodeEditor from 'browser/components/CodeEditor'
-import activityRecord from 'browser/lib/activityRecord'
-import fetchConfig from 'browser/lib/fetchConfig'
-
-const electron = require('electron')
-const ipc = electron.ipcRenderer
-
-export const PREVIEW_MODE = 'PREVIEW_MODE'
-export const EDIT_MODE = 'EDIT_MODE'
-
-let config = fetchConfig()
-ipc.on('config-apply', function (e, newConfig) {
-  config = newConfig
-})
-
-export default class ArticleEditor extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.configApplyHandler = (e, config) => this.handleConfigApply(e, config)
-    this.isMouseDown = false
-    this.state = {
-      status: PREVIEW_MODE,
-      cursorPosition: null,
-      firstVisibleRow: null,
-      switchPreview: config['switch-preview'],
-      isTemporary: false
-    }
-  }
-
-  componentDidMount () {
-    ipc.on('config-apply', this.configApplyHandler)
-  }
-
-  componentWillUnmount () {
-    ipc.removeListener('config-apply', this.configApplyHandler)
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.article.key !== this.props.article.key) {
-      this.setState({
-        content: this.props.article.content
-      })
-    }
-  }
-
-  handleConfigApply (e, newConfig) {
-    this.setState({
-      switchPreview: newConfig['switch-preview']
-    })
-  }
-
-  resetCursorPosition () {
-    this.setState({
-      cursorPosition: null,
-      firstVisibleRow: null
-    }, function () {
-      let previewEl = ReactDOM.findDOMNode(this.refs.preview)
-      if (previewEl) previewEl.scrollTop = 0
-    })
-  }
-
-  switchPreviewMode (isTemporary = false) {
-    if (this.props.article.mode !== 'markdown') return true
-    let cursorPosition = this.refs.editor.getCursorPosition()
-    let firstVisibleRow = this.refs.editor.getFirstVisibleRow()
-    this.setState({
-      status: PREVIEW_MODE,
-      cursorPosition,
-      firstVisibleRow,
-      isTemporary: isTemporary
-    }, function () {
-      let previewEl = ReactDOM.findDOMNode(this.refs.preview)
-      let anchors = previewEl.querySelectorAll('.lineAnchor')
-      for (let i = 0; i < anchors.length; i++) {
-        if (parseInt(anchors[i].dataset.key, 10) > cursorPosition.row || i === anchors.length - 1) {
-          var targetAnchor = anchors[i > 0 ? i - 1 : 0]
-          previewEl.scrollTop = targetAnchor.offsetTop - 100
-          break
-        }
-      }
-    })
-  }
-
-  switchEditMode (isTemporary = false) {
-    this.setState({
-      status: EDIT_MODE,
-      isTemporary: false
-    }, function () {
-      if (this.state.cursorPosition != null) {
-        this.refs.editor.moveCursorTo(this.state.cursorPosition.row, this.state.cursorPosition.column)
-        this.refs.editor.scrollToLine(this.state.firstVisibleRow)
-      }
-      this.refs.editor.editor.focus()
-
-      if (!isTemporary) activityRecord.emit('ARTICLE_UPDATE', this.props.article)
-    })
-  }
-
-  handleBlurCodeEditor (e) {
-    let isFocusingToThis = e.relatedTarget === ReactDOM.findDOMNode(this)
-    if (isFocusingToThis || this.state.switchPreview !== 'blur') {
-      return
-    }
-
-    let { article } = this.props
-    if (article.mode === 'markdown') {
-      this.switchPreviewMode()
-    }
-  }
-
-  handleCodeEditorChange (value) {
-    this.props.onChange(value)
-  }
-
-  handleRightClick (e) {
-    let { article } = this.props
-    if (this.state.switchPreview === 'rightclick' && article.mode === 'markdown') {
-      if (this.state.status === EDIT_MODE) this.switchPreviewMode()
-      else this.switchEditMode()
-    }
-  }
-
-  handleMouseUp (e) {
-    let { article } = this.props
-    let showPreview = article.mode === 'markdown' && this.state.status === PREVIEW_MODE
-    if (!showPreview) {
-      return false
-    }
-
-    switch (this.state.switchPreview) {
-      case 'blur':
-        switch (e.button) {
-          case 0:
-            this.isMouseDown = false
-            this.moveCount = 0
-            if (!this.isDrag) {
-              this.switchEditMode()
-            }
-            break
-          case 2:
-            if (this.state.isTemporary) this.switchEditMode(true)
-        }
-        break
-      case 'rightclick':
-    }
-  }
-
-  handleMouseMove (e) {
-    let { article } = this.props
-    let showPreview = article.mode === 'markdown' && this.state.status === PREVIEW_MODE
-    if (!showPreview) {
-      return false
-    }
-
-    if (this.state.switchPreview === 'blur' && this.isMouseDown) {
-      this.moveCount++
-      if (this.moveCount > 5) {
-        this.isDrag = true
-      }
-    }
-  }
-
-  handleMouseDowm (e) {
-    let { article } = this.props
-    let showPreview = article.mode === 'markdown' && this.state.status === PREVIEW_MODE
-    if (!showPreview) {
-      return false
-    }
-
-    switch (this.state.switchPreview) {
-      case 'blur':
-        switch (e.button) {
-          case 0:
-            this.isDrag = false
-            this.isMouseDown = true
-            this.moveCount = 0
-            break
-          case 2:
-            if (this.state.status === EDIT_MODE && this.props.article.mode === 'markdown') {
-              this.switchPreviewMode(true)
-            }
-        }
-        break
-      case 'rightclick':
-    }
-  }
-
-  render () {
-    let { article } = this.props
-    let showPreview = article.mode === 'markdown' && this.state.status === PREVIEW_MODE
-
-    return (
-      <div
-        tabIndex='5'
-        onContextMenu={e => this.handleRightClick(e)}
-        onMouseUp={e => this.handleMouseUp(e)}
-        onMouseMove={e => this.handleMouseMove(e)}
-        onMouseDown={e => this.handleMouseDowm(e)}
-        className='ArticleEditor'
-      >
-        {showPreview
-          ? <MarkdownPreview
-              ref='preview'
-              content={article.content}
-            />
-          : <CodeEditor
-              ref='editor'
-              onBlur={e => this.handleBlurCodeEditor(e)}
-              onChange={value => this.handleCodeEditorChange(value)}
-              article={article}
-            />
-        }
-        {article.mode === 'markdown'
-          ? <div className='ArticleDetail-panel-content-tooltip' children={
-              showPreview
-                ? this.state.switchPreview === 'blur'
-                  ? 'Click to Edit'
-                  : 'Right Click to Edit'
-                : this.state.switchPreview === 'blur'
-                  ? 'Press ESC to Watch Preview'
-                  : 'Right Click to Watch Preview'
-              }
-            />
-          : null
-        }
-      </div>
-    )
-  }
-}
-
-ArticleEditor.propTypes = {
-  article: PropTypes.shape({
-    content: PropTypes.string,
-    key: PropTypes.string,
-    mode: PropTypes.string
-  }),
-  onChange: PropTypes.func,
-  parent: PropTypes.object
-}
diff --git a/browser/main/NoteDetail/index.js b/browser/main/NoteDetail/index.js
deleted file mode 100644
index 3d9b7c56..00000000
--- a/browser/main/NoteDetail/index.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { PropTypes } from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './NoteDetail.styl'
-const electron = require('electron')
-
-const OSX = global.process.platform === 'darwin'
-
-class NoteDetail extends React.Component {
-  componentDidUpdate (prevProps, prevState) {
-  }
-
-  renderEmpty () {
-    return (
-      <div styleName='empty'>
-        <div styleName='empty-message'>{OSX ? 'Command(⌘)' : 'Ctrl(^)'} + N<br/>to create a new post</div>
-      </div>
-    )
-  }
-
-  render () {
-    let isEmpty = true
-    let view = isEmpty
-      ? this.renderEmpty()
-      : null
-    return (
-      <div className='NoteDetail'
-        style={this.props.style}
-        styleName='root'
-        tabIndex='0'
-      >
-        {view}
-      </div>
-    )
-  }
-}
-
-NoteDetail.propTypes = {
-  dispatch: PropTypes.func,
-  repositories: PropTypes.array,
-  style: PropTypes.shape({
-    left: PropTypes.number
-  })
-}
-
-export default CSSModules(NoteDetail, styles)
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index a4896d47..51993214 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -1,15 +1,9 @@
 import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './NoteList.styl'
-import ReactDOM from 'react-dom'
-import ModeIcon from 'browser/components/ModeIcon'
 import moment from 'moment'
 import _ from 'lodash'
 
-const electron = require('electron')
-const remote = electron.remote
-const ipc = electron.ipcRenderer
-
 class NoteList extends React.Component {
   constructor (props) {
     super(props)
@@ -64,63 +58,56 @@ class NoteList extends React.Component {
 
   // 移動ができなかったらfalseを返す:
   selectPriorArticle () {
-    let { articles, activeArticle, dispatch } = this.props
-    let targetIndex = articles.indexOf(activeArticle) - 1
-    let targetArticle = articles[targetIndex]
-    return false
+    // let { articles, activeArticle, dispatch } = this.props
+    // let targetIndex = articles.indexOf(activeArticle) - 1
+    // let targetArticle = articles[targetIndex]
+    // return false
   }
 
   selectNextArticle () {
-    let { articles, activeArticle, dispatch } = this.props
-    let targetIndex = articles.indexOf(activeArticle) + 1
-    let targetArticle = articles[targetIndex]
+    // let { articles, activeArticle, dispatch } = this.props
+    // let targetIndex = articles.indexOf(activeArticle) + 1
+    // let targetArticle = articles[targetIndex]
 
-    if (targetArticle != null) {
-      dispatch(switchArticle(targetArticle.key))
-      return true
-    }
-    return false
-  }
-
-  handleArticleClick (article) {
-    let { dispatch } = this.props
-    return function (e) {
-      dispatch(switchArticle(article.key))
-    }
+    // if (targetArticle != null) {
+    //   dispatch(switchArticle(targetArticle.key))
+    //   return true
+    // }
+    // return false
   }
 
   handleNoteListKeyDown (e) {
     if (e.metaKey || e.ctrlKey) return true
 
-    if (e.keyCode === 65 && !e.shiftKey) {
-      e.preventDefault()
-      remote.getCurrentWebContents().send('top-new-post')
-    }
+    // if (e.keyCode === 65 && !e.shiftKey) {
+    //   e.preventDefault()
+    //   remote.getCurrentWebContents().send('top-new-post')
+    // }
 
-    if (e.keyCode === 65 && e.shiftKey) {
-      e.preventDefault()
-      remote.getCurrentWebContents().send('nav-new-folder')
-    }
+    // if (e.keyCode === 65 && e.shiftKey) {
+    //   e.preventDefault()
+    //   remote.getCurrentWebContents().send('nav-new-folder')
+    // }
 
-    if (e.keyCode === 68) {
-      e.preventDefault()
-      remote.getCurrentWebContents().send('detail-delete')
-    }
+    // if (e.keyCode === 68) {
+    //   e.preventDefault()
+    //   remote.getCurrentWebContents().send('detail-delete')
+    // }
 
-    if (e.keyCode === 84) {
-      e.preventDefault()
-      remote.getCurrentWebContents().send('detail-title')
-    }
+    // if (e.keyCode === 84) {
+    //   e.preventDefault()
+    //   remote.getCurrentWebContents().send('detail-title')
+    // }
 
-    if (e.keyCode === 69) {
-      e.preventDefault()
-      remote.getCurrentWebContents().send('detail-edit')
-    }
+    // if (e.keyCode === 69) {
+    //   e.preventDefault()
+    //   remote.getCurrentWebContents().send('detail-edit')
+    // }
 
-    if (e.keyCode === 83) {
-      e.preventDefault()
-      remote.getCurrentWebContents().send('detail-save')
-    }
+    // if (e.keyCode === 83) {
+    //   e.preventDefault()
+    //   remote.getCurrentWebContents().send('detail-save')
+    // }
 
     if (e.keyCode === 38) {
       e.preventDefault()
@@ -186,41 +173,42 @@ class NoteList extends React.Component {
   render () {
     let { location } = this.props
     let notes = this.notes = this.getNotes()
-    let noteElements = notes.map((note) => {
-      let folder = _.find(note._repository.folders, {key: note.folder})
-      let tagElements = note.tags.map((tag) => {
-        return <span key='tag'>{tag}</span>
-      })
-      let key = `${note._repository.key}-${note.key}`
-      let isActive = location.query.key === key
-      return (
-        <div styleName={isActive
-            ? 'item--active'
-            : 'item'
-          }
-          key={key}
-          onClick={(e) => this.handleNoteClick(key)(e)}
-        >
-          <div styleName='item-border'/>
-          <div styleName='item-info'>
+    let noteElements = notes
+      .map((note) => {
+        let folder = _.find(note._repository.folders, {key: note.folder})
+        let tagElements = note.tags.map((tag) => {
+          return <span key='tag'>{tag}</span>
+        })
+        let key = `${note._repository.key}-${note.key}`
+        let isActive = location.query.key === key
+        return (
+          <div styleName={isActive
+              ? 'item--active'
+              : 'item'
+            }
+            key={key}
+            onClick={(e) => this.handleNoteClick(key)(e)}
+          >
+            <div styleName='item-border'/>
+            <div styleName='item-info'>
+
+              <div styleName='item-info-left'>
+                <i className='fa fa-cube fa-fw' style={{color: folder.color}}/> {folder.name}
+              </div>
+
+              <div styleName='item-info-right'>
+                {moment(note.createdAt).fromNow()}
+              </div>
 
-            <div styleName='item-info-left'>
-              <i className='fa fa-cube fa-fw' style={{color: folder.color}}/> {folder.name}
             </div>
 
-            <div styleName='item-info-right'>
-              {moment(note.createdAt).fromNow()}
-            </div>
+            <div styleName='item-title'>{note.title}</div>
+
+            <div styleName='item-tags'><i className='fa fa-tags fa-fw'/>{tagElements.length > 0 ? tagElements : <span>Not tagged yet</span>}</div>
 
           </div>
-
-          <div styleName='item-title'>{note.title}</div>
-
-          <div styleName='item-tags'><i className='fa fa-tags fa-fw'/>{tagElements.length > 0 ? tagElements : <span>Not tagged yet</span>}</div>
-
-        </div>
-      )
-    })
+        )
+      })
 
     return (
       <div className='NoteList'
diff --git a/browser/main/lib/queue.js b/browser/main/lib/queue.js
new file mode 100644
index 00000000..c0554b48
--- /dev/null
+++ b/browser/main/lib/queue.js
@@ -0,0 +1,57 @@
+import Repository from 'browser/lib/Repository'
+import _ from 'lodash'
+
+let tasks = []
+
+function _save (task, repoKey, note) {
+  delete note._repository
+
+  task.status = 'process'
+
+  Repository
+    .find(repoKey)
+    .then((repo) => {
+      return repo.updateNote(note.key, note)
+    })
+    .then((note) => {
+      tasks.splice(tasks.indexOf(task), 1)
+      console.log(tasks)
+      console.info('Note saved', note)
+    })
+    .catch((err) => {
+      tasks.splice(tasks.indexOf(task), 1)
+      console.error('Failed to save note', note)
+      console.error(err)
+    })
+}
+
+const queueSaving = function (repoKey, note) {
+  let key = `${repoKey}-${note.key}`
+
+  let taskIndex = _.findIndex(tasks, {
+    type: 'SAVE_NOTE',
+    key: key,
+    status: 'idle'
+  })
+  let task = tasks[taskIndex]
+  if (taskIndex < 0) {
+    task = {
+      type: 'SAVE_NOTE',
+      key: key,
+      status: 'idle',
+      timer: null
+    }
+  } else {
+    tasks.splice(taskIndex, 1)
+    window.clearTimeout(task.timer)
+  }
+
+  task.timer = window.setTimeout(() => {
+    _save(task, repoKey, note)
+  }, 1500)
+  tasks.push(task)
+}
+
+export default {
+  save: queueSaving
+}
diff --git a/browser/main/store.js b/browser/main/store.js
index 3b315308..df0678b0 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -115,6 +115,22 @@ function repositories (state = initialRepositories, action) {
         if (targetRepo == null) return state
         targetRepo.notes.push(action.note)
 
+        return repos
+      }
+    case 'SAVE_NOTE':
+      {
+        let repos = state.slice()
+        let targetRepo = _.find(repos, {key: action.repository})
+
+        if (targetRepo == null) return state
+
+        let targetNoteIndex = _.findIndex(targetRepo.notes, {key: action.note.key})
+        if (targetNoteIndex > -1) {
+          targetRepo.notes.splice(targetNoteIndex, 1, action.note)
+        } else {
+          targetRepo.notes.push(action.note)
+        }
+
         return repos
       }
   }

From 913e649e5dc78c8745fa065c7fb1266de52ba2f3 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sun, 29 May 2016 01:09:32 +0900
Subject: [PATCH 061/109] fix overflow style of item in folded SideNav

---
 browser/main/SideNav/FolderItem.styl        |  4 ++--
 browser/main/SideNav/RepositorySection.styl | 14 +++++++-------
 browser/main/SideNav/SideNav.styl           |  4 ++--
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/browser/main/SideNav/FolderItem.styl b/browser/main/SideNav/FolderItem.styl
index e138c160..d2d16d50 100644
--- a/browser/main/SideNav/FolderItem.styl
+++ b/browser/main/SideNav/FolderItem.styl
@@ -70,7 +70,7 @@
 
 .root--folded
   @extend .root
-  width 44px
+  width 44px - 1
   &:hover .label-name
     width 100px
   .label
@@ -78,7 +78,7 @@
     text-align center
     right 0
   .label-icon
-    width 44px
+    width 44px - 1
   .label-name
     position fixed
     height 34px
diff --git a/browser/main/SideNav/RepositorySection.styl b/browser/main/SideNav/RepositorySection.styl
index f9e7e9fe..ac6b6135 100644
--- a/browser/main/SideNav/RepositorySection.styl
+++ b/browser/main/SideNav/RepositorySection.styl
@@ -103,9 +103,9 @@
 
 .root-folded
   @extend .root
-  width 44px
+  width 44px - 1
   .header, .header--active
-    width 44px
+    width 44px - 1
     text-align center
     overflow hidden
     &:hover
@@ -116,13 +116,13 @@
         width 35px
         padding-right 5px
   .header-name
-    width 44px
+    width 44px - 1
     padding-left 0
   .header-name-label
     position fixed
     display inline-block
     height 34px
-    left 44px
+    left 44px - 1
     width 0
     box-sizing border-box
     margin-left 0
@@ -142,7 +142,7 @@
     top inherit
     bottom inherit
     z-index 11
-    left 43px
+    left 44px - 1
     box-sizing border-box
     overflow hidden
   .header-control-button
@@ -153,13 +153,13 @@
     &:hover
       background-color $ui-tooltip-button--hover-backgroundColor
   .newFolderButton
-    width 44px
+    width 44px - 1
     padding 0
     &:hover .newFolderButton-label
       width 100px
   .newFolderButton-icon
     text-align center
-    width 44px
+    width 44px - 1
   .newFolderButton-label
     position fixed
     display inline-block
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index e4249119..5d772855 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -75,7 +75,7 @@
     white-space nowrap
     transform rotate(90deg)
   .top-menu
-    width 44px
+    width 44px - 1
     text-align center
     &:hover .top-menu-label
       width 100px
@@ -97,7 +97,7 @@
     transition width 0.15s
     pointer-events none
   .menu-button, .menu-button--active
-    width 44px
+    width 44px - 1
     text-align center
     &:hover .menu-button-label
       width 100px

From 903979b3f2317bbee21e34bd2cc50bf91998d5b7 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sun, 29 May 2016 02:26:26 +0900
Subject: [PATCH 062/109] set updatedAt when dispatching SAVE_NOTE

---
 browser/main/store.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/browser/main/store.js b/browser/main/store.js
index df0678b0..cc4194a4 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -125,6 +125,7 @@ function repositories (state = initialRepositories, action) {
         if (targetRepo == null) return state
 
         let targetNoteIndex = _.findIndex(targetRepo.notes, {key: action.note.key})
+        action.note.updatedAt = Date.now()
         if (targetNoteIndex > -1) {
           targetRepo.notes.splice(targetNoteIndex, 1, action.note)
         } else {

From 14abbee3fbfee48fceba18da489a25e1d29bd77a Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sun, 29 May 2016 02:27:41 +0900
Subject: [PATCH 063/109] fix item of NoteList

add key to tag
replace createdAt with updatedAt
---
 browser/main/NoteList/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index 51993214..82da69d7 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -177,7 +177,7 @@ class NoteList extends React.Component {
       .map((note) => {
         let folder = _.find(note._repository.folders, {key: note.folder})
         let tagElements = note.tags.map((tag) => {
-          return <span key='tag'>{tag}</span>
+          return <span key={tag}>{tag}</span>
         })
         let key = `${note._repository.key}-${note.key}`
         let isActive = location.query.key === key
@@ -197,7 +197,7 @@ class NoteList extends React.Component {
               </div>
 
               <div styleName='item-info-right'>
-                {moment(note.createdAt).fromNow()}
+                {moment(note.updatedAt).fromNow()}
               </div>
 
             </div>

From 7c346d62eb2375a132c20417e108fb81d60af495 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sun, 29 May 2016 02:53:28 +0900
Subject: [PATCH 064/109] remove old TagSelect

---
 browser/components/TagSelect.js | 165 --------------------------------
 1 file changed, 165 deletions(-)
 delete mode 100644 browser/components/TagSelect.js

diff --git a/browser/components/TagSelect.js b/browser/components/TagSelect.js
deleted file mode 100644
index 2e631bef..00000000
--- a/browser/components/TagSelect.js
+++ /dev/null
@@ -1,165 +0,0 @@
-import React, { PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import _ from 'lodash'
-
-function isNotEmptyString (str) {
-  return _.isString(str) && str.length > 0
-}
-
-export default class TagSelect extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      input: '',
-      isInputFocused: false
-    }
-  }
-
-  componentDidMount () {
-    this.blurInputBlurHandler = e => {
-      if (ReactDOM.findDOMNode(this.refs.tagInput) !== document.activeElement) {
-        this.setState({isInputFocused: false})
-      }
-    }
-    window.addEventListener('click', this.blurInputBlurHandler)
-  }
-
-  componentWillUnmount (e) {
-    window.removeEventListener('click', this.blurInputBlurHandler)
-  }
-
-  // Suggestは必ずInputの下に位置するようにする
-  componentDidUpdate () {
-    if (this.shouldShowSuggest()) {
-      let inputRect = ReactDOM.findDOMNode(this.refs.tagInput).getBoundingClientRect()
-      let suggestElement = ReactDOM.findDOMNode(this.refs.suggestTags)
-      if (suggestElement != null) {
-        suggestElement.style.top = inputRect.top + 20 + 'px'
-        suggestElement.style.left = inputRect.left + 'px'
-      }
-    }
-  }
-
-  shouldShowSuggest () {
-    return this.state.isInputFocused && isNotEmptyString(this.state.input)
-  }
-
-  addTag (tag, clearInput = true) {
-    let tags = this.props.tags.slice(0)
-    let newTag = tag.trim()
-
-    if (newTag.length === 0 && clearInput) {
-      this.setState({input: ''})
-      return
-    }
-
-    tags.push(newTag)
-    tags = _.uniq(tags)
-
-    if (_.isFunction(this.props.onChange)) {
-      this.props.onChange(newTag, tags)
-    }
-    if (clearInput) this.setState({input: ''})
-  }
-
-  handleKeyDown (e) {
-    switch (e.keyCode) {
-      case 8:
-        {
-          if (this.state.input.length > 0) break
-          e.preventDefault()
-
-          let tags = this.props.tags.slice(0)
-          tags.pop()
-
-          this.props.onChange(null, tags)
-        }
-        break
-      case 13:
-        {
-          e.preventDefault()
-          this.addTag(this.state.input)
-        }
-    }
-  }
-
-  handleThisClick (e) {
-    ReactDOM.findDOMNode(this.refs.tagInput).focus()
-  }
-
-  handleInputFocus (e) {
-    this.setState({isInputFocused: true})
-  }
-
-  handleItemRemoveButton (tag) {
-    return e => {
-      e.stopPropagation()
-
-      let tags = this.props.tags.slice(0)
-      tags.splice(tags.indexOf(tag), 1)
-
-      if (_.isFunction(this.props.onChange)) {
-        this.props.onChange(null, tags)
-      }
-    }
-  }
-
-  handleSuggestClick (tag) {
-    return e => {
-      this.addTag(tag)
-    }
-  }
-
-  render () {
-    let { tags, suggestTags } = this.props
-
-    let tagElements = _.isArray(tags)
-      ? this.props.tags.map(tag => (
-        <div key={tag} className='TagSelect-tags-item'>
-          <button onClick={e => this.handleItemRemoveButton(tag)(e)} className='TagSelect-tags-item-remove'><i className='fa fa-fw fa-times'/></button>
-          <div className='TagSelect-tags-item-label'>{tag}</div>
-        </div>))
-      : null
-
-    let suggestElements = this.shouldShowSuggest() ? suggestTags
-        .filter(tag => {
-          return tag.match(this.state.input)
-        })
-        .map(tag => {
-          return <button onClick={e => this.handleSuggestClick(tag)(e)} key={tag}>{tag}</button>
-        })
-      : null
-
-    return (
-      <div className='TagSelect' onClick={e => this.handleThisClick(e)}>
-        <div className='TagSelect-tags'>
-          {tagElements}
-          <input
-            type='text'
-            onKeyDown={e => this.handleKeyDown(e)}
-            ref='tagInput'
-            valueLink={this.linkState('input')}
-            placeholder='Click here to add tags'
-            className='TagSelect-input'
-            onFocus={e => this.handleInputFocus(e)}
-          />
-        </div>
-        {suggestElements != null && suggestElements.length > 0
-          ? (
-            <div ref='suggestTags' className='TagSelect-suggest'>
-              {suggestElements}
-            </div>
-          )
-          : null
-        }
-      </div>
-    )
-  }
-}
-
-TagSelect.propTypes = {
-  tags: PropTypes.arrayOf(PropTypes.string),
-  onChange: PropTypes.func,
-  suggestTags: PropTypes.array
-}

From 4292583d73e639bb9e5edbe9509f8dde5bb728d6 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sun, 29 May 2016 02:54:01 +0900
Subject: [PATCH 065/109] TagSelect

---
 browser/main/Detail/NoteDetail.js   |  23 ++++-
 browser/main/Detail/NoteDetail.styl |  19 +++-
 browser/main/Detail/TagSelect.js    | 143 ++++++++++++++++++++++++++++
 browser/main/Detail/TagSelect.styl  |  66 +++++++++++++
 browser/styles/index.styl           |   1 +
 5 files changed, 244 insertions(+), 8 deletions(-)
 create mode 100644 browser/main/Detail/TagSelect.js
 create mode 100644 browser/main/Detail/TagSelect.styl

diff --git a/browser/main/Detail/NoteDetail.js b/browser/main/Detail/NoteDetail.js
index b0b55f7d..b6b1a737 100644
--- a/browser/main/Detail/NoteDetail.js
+++ b/browser/main/Detail/NoteDetail.js
@@ -3,6 +3,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './NoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
 import queue from 'browser/main/lib/queue'
+import TagSelect from './TagSelect'
 
 class NoteDetail extends React.Component {
   constructor (props) {
@@ -15,9 +16,6 @@ class NoteDetail extends React.Component {
     this.dispatchTimer = null
   }
 
-  componentDidUpdate (prevProps, prevState) {
-  }
-
   componentWillReceiveProps (nextProps) {
     if (nextProps.note.key !== this.props.note.key) {
       if (this.state.isDispatchQueued) {
@@ -28,6 +26,7 @@ class NoteDetail extends React.Component {
         isDispatchQueued: false
       }, () => {
         this.refs.content.reload()
+        this.refs.tags.reset()
       })
     }
   }
@@ -64,6 +63,7 @@ class NoteDetail extends React.Component {
     let { note } = this.state
 
     note.content = this.refs.content.value
+    note.tags = this.refs.tags.value
 
     this.setState({
       note,
@@ -114,8 +114,21 @@ class NoteDetail extends React.Component {
       >
         <div styleName='info'>
           <div styleName='info-left'>
-            <div styleName='info-left-folderSelect'>FOLDER SELECT</div>
-            <div styleName='info-left-tagSelect'>TAG SELECT</div>
+
+            <div styleName='info-left-top'>
+              <button styleName='info-left-top-starButton'>
+                <i className='fa fa-star-o fa-fw'/>
+              </button>
+              <div styleName='info-left-top-folderSelect'>FolderSelect</div>
+            </div>
+            <div styleName='info-left-bottom'>
+              <TagSelect
+                styleName='info-left-bottom-tagSelect'
+                ref='tags'
+                value={this.state.note.tags}
+                onChange={(e) => this.handleChange(e)}
+              />
+            </div>
           </div>
           <div styleName='info-right'>
             <button styleName='info-right-button'>
diff --git a/browser/main/Detail/NoteDetail.styl b/browser/main/Detail/NoteDetail.styl
index 8cd7235a..5a6d6430 100644
--- a/browser/main/Detail/NoteDetail.styl
+++ b/browser/main/Detail/NoteDetail.styl
@@ -1,3 +1,5 @@
+$info-height = 80px
+
 .root
   absolute top bottom right
   border-width 1px 0
@@ -6,13 +8,22 @@
 
 .info
   absolute top left right
-  height 50px
+  height $info-height
   border-bottom $ui-border
   background-color $ui-backgroundColor
 
 .info-left
   float left
 
+.info-left-top
+  height 40px
+
+.info-left-bottom
+  height 40px
+
+.info-left-bottom-tagSelect
+  height 40px
+
 .info-right
   float right
 
@@ -26,13 +37,15 @@
   margin 8px 2px
   padding 0
   &:active
-    border-color $ui-button--active-backgroundColor
+    border-color $ui-button--focus-borderColor
   &:hover .left-control-newPostButton-tooltip
     display block
+  &:focus
+    border-color $ui-button--focus-borderColor
 
 .body
   absolute bottom left right
-  top 50px
+  top $info-height
 
 .body-noteEditor
   absolute top bottom left right
diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js
new file mode 100644
index 00000000..ef5de13b
--- /dev/null
+++ b/browser/main/Detail/TagSelect.js
@@ -0,0 +1,143 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TagSelect.styl'
+import _ from 'lodash'
+
+class TagSelect extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      newTag: ''
+    }
+  }
+
+  componentDidMount () {
+    this.value = this.props.value
+  }
+
+  componentDidUpdate () {
+    this.value = this.props.value
+  }
+
+  handleNewTagInputKeyDown (e) {
+    console.log(e.keyCode)
+    switch (e.keyCode) {
+      case 13:
+        this.submitTag()
+        break
+      case 8:
+        if (this.refs.newTag.value.length === 0) {
+          this.removeLastTag()
+        }
+    }
+  }
+
+  removeLastTag () {
+    let { value } = this.props
+
+    value = value.slice()
+    value.pop()
+    value = _.uniq(value)
+
+    this.value = value
+    this.props.onChange()
+  }
+
+  reset () {
+    this.setState({
+      newTag: ''
+    })
+  }
+
+  submitTag () {
+    let { value } = this.props
+    let newTag = this.refs.newTag.value.trim()
+
+    if (newTag.length <= 0) {
+      this.setState({
+        newTag: ''
+      })
+      return
+    }
+
+    value = value.slice()
+    value.push(newTag)
+    value = _.uniq(value)
+
+    this.setState({
+      newTag: ''
+    }, () => {
+      this.value = value
+      this.props.onChange()
+    })
+  }
+
+  handleNewTagInputChange (e) {
+    this.setState({
+      newTag: this.refs.newTag.value
+    })
+  }
+
+  handleTagRemoveButtonClick (tag) {
+    return (e) => {
+      let { value } = this.props
+
+      value.splice(value.indexOf(tag), 1)
+      value = _.uniq(value)
+
+      this.value = value
+      this.props.onChange()
+    }
+  }
+
+  render () {
+    let { value, className } = this.props
+
+    let tagList = value.map((tag) => {
+      return (
+        <span styleName='tag'
+          key={tag}
+        >
+          <button styleName='tag-removeButton'
+            onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
+          >
+            <i className='fa fa-times fa-fw'/>
+          </button>
+          <span styleName='tag-label'>{tag}</span>
+        </span>
+      )
+    })
+
+    return (
+      <div className={_.isString(className)
+          ? 'TagSelect ' + className
+          : 'TagSelect'
+        }
+        styleName='root'
+      >
+        <i styleName='icon'
+          className='fa fa-tags'
+        />
+          {tagList}
+        <input styleName='newTag'
+          ref='newTag'
+          value={this.state.newTag}
+          placeholder='Add tag...'
+          onChange={(e) => this.handleNewTagInputChange(e)}
+          onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
+        />
+
+      </div>
+    )
+  }
+}
+
+TagSelect.propTypes = {
+  className: PropTypes.string,
+  value: PropTypes.arrayOf(PropTypes.string).isRequired,
+  onChange: PropTypes.func
+
+}
+
+export default CSSModules(TagSelect, styles)
diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl
new file mode 100644
index 00000000..2b82d459
--- /dev/null
+++ b/browser/main/Detail/TagSelect.styl
@@ -0,0 +1,66 @@
+.root
+  position relative
+  line-height 40px
+  user-select none
+
+.icon
+  display inline-block
+  width 30px
+  line-height 40px
+  vertical-align top
+  text-align center
+
+.tag
+  display inline-block
+  margin 0 2px
+  vertical-align middle
+  height 20px
+  clearfix()
+
+.tag-removeButton
+  float left
+  height 20px
+  width 18px
+  margin 0
+  padding 0
+  border $ui-border
+  border-top-left-radius 5px
+  border-bottom-left-radius 5px
+  line-height 18px
+  background-color transparent
+  color $ui-button-color
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+  &:active, &:active:hover
+    color $ui-button--active-color
+    background-color $ui-button--active-backgroundColor
+    border-color $ui-button--focus-borderColor
+  &:focus
+    border-color $ui-button--focus-borderColor
+
+.tag-label
+  float left
+  height 20px
+  line-height 18px
+  border-top $ui-border
+  border-right $ui-border
+  border-bottom $ui-border
+  border-top-right-radius 5px
+  border-bottom-right-radius 5px
+  padding 0 6px
+
+.newTag
+  display inline-block
+  margin 0 2px
+  vertical-align middle
+  height 24px
+  box-sizing borde-box
+  border none
+  border-bottom $ui-border
+  background-color transparent
+  outline none
+  padding 0 4px
+  &:focus
+    border-color $ui-input--focus-borderColor = #369DCD
+  &:disabled
+    background-color $ui-input--disabled-backgroundColor = #DDD
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index db3636a7..2a809e97 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -22,6 +22,7 @@ $ui-button-color = #939395
 $ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08)
 $ui-button--active-color = white
 $ui-button--active-backgroundColor = #6AA5E9
+$ui-button--focus-borderColor = lighten(#369DCD, 25%)
 
 // UI Tooltip
 $ui-tooltip-text-color = white

From dbfd25bb8ed7a4d344a1df43661b421a1fc2c6e8 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sun, 29 May 2016 02:54:39 +0900
Subject: [PATCH 066/109] `value` attribute of Editor must be set after
 mounting

---
 browser/components/CodeEditor.js     | 1 +
 browser/components/MarkdownEditor.js | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js
index b837c206..2c439c9b 100644
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -95,6 +95,7 @@ export default class CodeEditor extends React.Component {
 
   componentDidMount () {
     let { mode, value } = this.props
+    this.value = value
     let el = ReactDOM.findDOMNode(this)
     let editor = this.editor = ace.edit(el)
     editor.$blockScrolling = Infinity
diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
index c2e359d8..198c3ef4 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -7,12 +7,16 @@ import MarkdownPreview from 'browser/components/MarkdownPreview'
 class MarkdownEditor extends React.Component {
   constructor (props) {
     super(props)
-    
+
     this.state = {
       status: 'CODE'
     }
   }
 
+  componentDidMount () {
+    this.value = this.refs.code.value
+  }
+
   handleChange (e) {
     this.value = this.refs.code.value
     this.props.onChange(e)

From eb210e9072a04ea47cf3d873ffa58766f02a2d51 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sun, 29 May 2016 05:22:37 +0900
Subject: [PATCH 067/109] update readme

---
 readme-ko.md | 47 ++++++++++++++++++++++++++++++++++++++++
 readme.md    | 60 +++++++++-------------------------------------------
 2 files changed, 57 insertions(+), 50 deletions(-)
 create mode 100644 readme-ko.md

diff --git a/readme-ko.md b/readme-ko.md
new file mode 100644
index 00000000..ffbdc35e
--- /dev/null
+++ b/readme-ko.md
@@ -0,0 +1,47 @@
+# Boostnote
+
+오픈소스 노트 앱
+
+## Goal
+
+그냥 글쓰는게 즐거워지셨으면 좋겠어요. :grinning:
+
+- 타겟 OS : OSX, Windows, Linux(나중엔 모바일까지도!)
+- Cloud : Google drive, Dropbox, One drive, iCloud...
+- 오픈소스로 남을 것!
+
+## 영감받은 앱/서비스
+
+- Atom
+- Quiver
+- Evernote
+- GitKraken
+- GitBook
+
+## Using stack
+
+- Electron
+- React
+- Webpack
+- Redux
+- CSSModules
+
+## Codestyle
+
+[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
+
+## Author
+
+[Rokt33r(Dick Choi of MAISIN&CO.)](https://github.com/rokt33r)
+
+## Contributors
+
+- [dojineko](https://github.com/dojineko)
+- [Romain Bazile](https://github.com/gromain)
+- [Bruno Paz](https://github.com/brpaz)
+
+## Copyright & License
+
+Copyright (C) 2016 MAISIN&CO.
+
+[GPL v3](./LICENSE).
diff --git a/readme.md b/readme.md
index 597af87a..d46d4fec 100644
--- a/readme.md
+++ b/readme.md
@@ -1,6 +1,14 @@
 # Boostnote
 
-Simple note app
+Simple opensource note app for developer.
+
+## Goal
+
+We just want you to enjoying writing anything. :grinning:
+
+- Target OS : OSX, Windows, Linux(also mobile somewhen!)
+- Cloud : Google drive, Dropbox, One drive, iCloud...
+- Remaining opensource forever!
 
 ## Inspired by
 
@@ -10,51 +18,6 @@ Simple note app
 - GitKraken
 - GitBook
 
-## System requirement
-
-This app is built on Electron.
-
-You can check it from [here](https://github.com/electron/electron/blob/master/docs/tutorial/supported-platforms.md).
-
-Currently, I'm testing this app on Windows 10(64bit), OS X El Capitan, Ubuntu Linux, Arch Linux.
-
-## Develop
-
-1. turn on HMR server
-
-  ```
-  npm run webpack
-  ```
-
-2. run hot mode
-
-  ```
-  npm run hot
-  ```
-
-> `npm start` is using compiled scripts. see [Build](#Build) to compile scripts.
-
-## Build
-
-1. Compile scripts
-
-  compile all browser stuff(Javascript, Stylus).
-
-  ```
-  grunt compile
-  ```
-
-2. Build executable
-
-  build `Boostnote.app` (OS X) / `Boostnote.exe` (Windows)
-
-  ```
-  grunt pack:osx
-  grunt pack:windows
-  ```
-
-Also there are some tasks for CodeSign(OS X) and Authenticode(Windows). To use these tasks, you need to aquire your own certifications.
-
 ## Using stack
 
 - Electron
@@ -63,7 +26,6 @@ Also there are some tasks for CodeSign(OS X) and Authenticode(Windows). To use t
 - Redux
 - CSSModules
 
-
 ## Codestyle
 
 [![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
@@ -82,6 +44,4 @@ Also there are some tasks for CodeSign(OS X) and Authenticode(Windows). To use t
 
 Copyright (C) 2016 MAISIN&CO.
 
-[Check here](./LICENSE).
-
-
+[GPL v3](./LICENSE).

From 5a26fc812d5b3fb865c6f6a906e0bfea0a8f06d0 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sun, 29 May 2016 13:08:02 +0900
Subject: [PATCH 068/109] Star a note

---
 browser/lib/Repository.js           | 24 ++++++++++-
 browser/main/Detail/NoteDetail.js   | 44 +++++++++++++++++--
 browser/main/Detail/NoteDetail.styl | 13 ++++++
 browser/main/Detail/StarButton.js   | 66 +++++++++++++++++++++++++++++
 browser/main/Detail/StarButton.styl | 19 +++++++++
 browser/main/NoteList/index.js      | 15 +++++++
 browser/main/store.js               | 28 ++++++++++++
 7 files changed, 205 insertions(+), 4 deletions(-)
 create mode 100644 browser/main/Detail/StarButton.js
 create mode 100644 browser/main/Detail/StarButton.styl

diff --git a/browser/lib/Repository.js b/browser/lib/Repository.js
index a3c0edc2..6a47b101 100644
--- a/browser/lib/Repository.js
+++ b/browser/lib/Repository.js
@@ -441,6 +441,27 @@ class Repository {
     })
   }
 
+  starNote (noteKey) {
+    let note = _.find(this.notes, {key: noteKey})
+    if (note != null) {
+      let json = this.json
+      json.starred.push(noteKey)
+
+      return this.saveJSON(json)
+    }
+  }
+
+  unstarNote (noteKey) {
+    let note = _.find(this.notes, {key: noteKey})
+    if (note != null) {
+      let json = this.json
+      json.starred = json.starred
+        .filter((starredKey) => starredKey !== noteKey)
+
+      return this.saveJSON(json)
+    }
+  }
+
   removeNote (noteKey) {
     let noteIndex = _.findIndex(this.notes, {key: noteKey})
 
@@ -473,7 +494,8 @@ class Repository {
         key: keygen(),
         name: 'general',
         color: this.randomColor()
-      }]
+      }],
+      starred: []
     }, override)
   }
 
diff --git a/browser/main/Detail/NoteDetail.js b/browser/main/Detail/NoteDetail.js
index b6b1a737..ebce7262 100644
--- a/browser/main/Detail/NoteDetail.js
+++ b/browser/main/Detail/NoteDetail.js
@@ -3,7 +3,9 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './NoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
 import queue from 'browser/main/lib/queue'
+import StarButton from './StarButton'
 import TagSelect from './TagSelect'
+import Repository from 'browser/lib/Repository'
 
 class NoteDetail extends React.Component {
   constructor (props) {
@@ -106,7 +108,42 @@ class NoteDetail extends React.Component {
     queue.save(repoKey, note)
   }
 
+  handleStarButtonClick (e) {
+    let { note } = this.state
+    let { dispatch } = this.props
+    let isStarred = note._repository.starred.some((starredKey) => starredKey === note.key)
+
+    if (isStarred) {
+      Repository
+        .find(note._repository.key)
+        .then((repo) => {
+          return repo.unstarNote(note.key)
+        })
+
+      dispatch({
+        type: 'UNSTAR_NOTE',
+        repository: note._repository.key,
+        note: note.key
+      })
+    } else {
+      Repository
+        .find(note._repository.key)
+        .then((repo) => {
+          return repo.starNote(note.key)
+        })
+
+      dispatch({
+        type: 'STAR_NOTE',
+        repository: note._repository.key,
+        note: note.key
+      })
+    }
+  }
+
   render () {
+    let { note } = this.state
+    let isStarred = note._repository.starred.some((starredKey) => starredKey === note.key)
+
     return (
       <div className='NoteDetail'
         style={this.props.style}
@@ -116,9 +153,10 @@ class NoteDetail extends React.Component {
           <div styleName='info-left'>
 
             <div styleName='info-left-top'>
-              <button styleName='info-left-top-starButton'>
-                <i className='fa fa-star-o fa-fw'/>
-              </button>
+              <StarButton styleName='info-left-top-starButton'
+                onClick={(e) => this.handleStarButtonClick(e)}
+                isActive={isStarred}
+              />
               <div styleName='info-left-top-folderSelect'>FolderSelect</div>
             </div>
             <div styleName='info-left-bottom'>
diff --git a/browser/main/Detail/NoteDetail.styl b/browser/main/Detail/NoteDetail.styl
index 5a6d6430..7d424c6b 100644
--- a/browser/main/Detail/NoteDetail.styl
+++ b/browser/main/Detail/NoteDetail.styl
@@ -18,6 +18,19 @@ $info-height = 80px
 .info-left-top
   height 40px
 
+.info-left-top-starButton
+  display inline-block
+  height 40px
+  width 40px
+  line-height 40px
+  vertical-align top
+
+.info-left-top-folderSelect
+  display inline-block
+  height 40px
+  width 100px
+  vertical-align top
+
 .info-left-bottom
   height 40px
 
diff --git a/browser/main/Detail/StarButton.js b/browser/main/Detail/StarButton.js
new file mode 100644
index 00000000..e3f98a97
--- /dev/null
+++ b/browser/main/Detail/StarButton.js
@@ -0,0 +1,66 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './StarButton.styl'
+import _ from 'lodash'
+
+class StarButton extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isActive: false
+    }
+  }
+
+  handleMouseDown (e) {
+    this.setState({
+      isActive: true
+    })
+  }
+
+  handleMouseUp (e) {
+    this.setState({
+      isActive: false
+    })
+  }
+
+  handleMouseLeave (e) {
+    this.setState({
+      isActive: false
+    })
+  }
+
+  render () {
+    let { className } = this.props
+
+    return (
+      <button className={_.isString(className)
+          ? 'StarButton ' + className
+          : 'StarButton'
+        }
+        styleName={this.state.isActive || this.props.isActive
+          ? 'root--active'
+          : 'root'
+        }
+        onMouseDown={(e) => this.handleMouseDown(e)}
+        onMouseUp={(e) => this.handleMouseUp(e)}
+        onMouseLeave={(e) => this.handleMouseLeave(e)}
+        onClick={this.props.onClick}
+      >
+        <i className={this.state.isActive || this.props.isActive
+          ? 'fa fa-star'
+          : 'fa fa-star-o'
+        }
+        />
+      </button>
+    )
+  }
+}
+
+StarButton.propTypes = {
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func,
+  className: PropTypes.string
+}
+
+export default CSSModules(StarButton, styles)
diff --git a/browser/main/Detail/StarButton.styl b/browser/main/Detail/StarButton.styl
new file mode 100644
index 00000000..acd92035
--- /dev/null
+++ b/browser/main/Detail/StarButton.styl
@@ -0,0 +1,19 @@
+.root
+  position relative
+  color $ui-inactive-text-color
+  font-size 18px
+  text-align center
+  background-color transparent
+  border none
+  padding 0
+  transition transform 0.15s
+  &:hover
+    color $ui-text-color
+    transform rotate(-72deg)
+
+.root--active
+  @extend .root
+  color $ui-active-color
+  transform rotate(-72deg)
+  &:hover
+    color $ui-active-color
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index 82da69d7..15988da5 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -136,6 +136,21 @@ class NoteList extends React.Component {
       }, [])
     }
 
+    if (location.pathname.match(/\/starred/)) {
+      return repositories
+      .reduce((sum, repository) => {
+        return sum.concat(repository.starred
+          .map((starredKey) => {
+            return _.find(repository.notes, {key: starredKey})
+          })
+          .filter((note) => _.isObject(note))
+          .map((note) => {
+            note._repository = repository
+            return note
+          }))
+      }, [])
+    }
+
     let repository = _.find(repositories, {key: repositoryKey})
     if (repository == null) return []
 
diff --git a/browser/main/store.js b/browser/main/store.js
index cc4194a4..3eba7c04 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -132,6 +132,34 @@ function repositories (state = initialRepositories, action) {
           targetRepo.notes.push(action.note)
         }
 
+        return repos
+      }
+    case 'STAR_NOTE':
+      {
+        let repos = state.slice()
+        let targetRepo = _.find(repos, {key: action.repository})
+
+        if (targetRepo == null) return state
+
+        let targetNoteIndex = _.findIndex(targetRepo.notes, {key: action.note})
+        if (targetNoteIndex > -1) {
+          targetRepo.starred.push(action.note)
+        } else {
+          return state
+        }
+
+        return repos
+      }
+    case 'UNSTAR_NOTE':
+      {
+        let repos = state.slice()
+        let targetRepo = _.find(repos, {key: action.repository})
+
+        if (targetRepo == null) return state
+
+        targetRepo.starred = targetRepo.starred
+          .filter((starredKey) => starredKey !== action.note)
+
         return repos
       }
   }

From 999d4633abd261e646733c65518e7e584a3948a7 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sun, 29 May 2016 13:14:18 +0900
Subject: [PATCH 069/109] add readme-ja.md

---
 readme-ja.md | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 readme.md    |  3 +++
 2 files changed, 50 insertions(+)
 create mode 100644 readme-ja.md

diff --git a/readme-ja.md b/readme-ja.md
new file mode 100644
index 00000000..b133d6be
--- /dev/null
+++ b/readme-ja.md
@@ -0,0 +1,47 @@
+# Boostnote
+
+オープンソースノートアプリ
+
+## Goal
+
+単に何かを書くのが楽しくなってほしいです。 :grinning:
+
+- ターゲット OS : OSX, Windows, Linux(後々はモバイルも!)
+- Cloud : Google drive, Dropbox, One drive, iCloud...
+- オープンソースで残ること!
+
+## 印象を受けたアプリ/サービス
+
+- Atom
+- Quiver
+- Evernote
+- GitKraken
+- GitBook
+
+## Using stack
+
+- Electron
+- React
+- Webpack
+- Redux
+- CSSModules
+
+## Codestyle
+
+[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
+
+## Author
+
+[Rokt33r(Dick Choi of MAISIN&CO.)](https://github.com/rokt33r)
+
+## Contributors
+
+- [dojineko](https://github.com/dojineko)
+- [Romain Bazile](https://github.com/gromain)
+- [Bruno Paz](https://github.com/brpaz)
+
+## Copyright & License
+
+Copyright (C) 2016 MAISIN&CO.
+
+[GPL v3](./LICENSE).
diff --git a/readme.md b/readme.md
index d46d4fec..0224e38c 100644
--- a/readme.md
+++ b/readme.md
@@ -2,6 +2,9 @@
 
 Simple opensource note app for developer.
 
+- [日本語](./readme-ja.md)
+- [한국어](./readme-ko.md)
+
 ## Goal
 
 We just want you to enjoying writing anything. :grinning:

From 431ac5a40353a0fcf5f056990ab52c120f230e6e Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sun, 29 May 2016 13:52:17 +0900
Subject: [PATCH 070/109] prevent duplication of starred

---
 browser/lib/Repository.js | 2 ++
 browser/main/store.js     | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/browser/lib/Repository.js b/browser/lib/Repository.js
index 6a47b101..083f5c5a 100644
--- a/browser/lib/Repository.js
+++ b/browser/lib/Repository.js
@@ -446,6 +446,7 @@ class Repository {
     if (note != null) {
       let json = this.json
       json.starred.push(noteKey)
+      json.starred = _.uniq(json.starred)
 
       return this.saveJSON(json)
     }
@@ -457,6 +458,7 @@ class Repository {
       let json = this.json
       json.starred = json.starred
         .filter((starredKey) => starredKey !== noteKey)
+      json.starred = _.uniq(json.starred)
 
       return this.saveJSON(json)
     }
diff --git a/browser/main/store.js b/browser/main/store.js
index 3eba7c04..3f41ad5c 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -144,6 +144,7 @@ function repositories (state = initialRepositories, action) {
         let targetNoteIndex = _.findIndex(targetRepo.notes, {key: action.note})
         if (targetNoteIndex > -1) {
           targetRepo.starred.push(action.note)
+          targetRepo.starred = _.uniq(targetRepo.starred)
         } else {
           return state
         }
@@ -159,6 +160,7 @@ function repositories (state = initialRepositories, action) {
 
         targetRepo.starred = targetRepo.starred
           .filter((starredKey) => starredKey !== action.note)
+        targetRepo.starred = _.uniq(targetRepo.starred)
 
         return repos
       }

From 409a3de901622285a1bf6928fa573bae17180477 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sun, 29 May 2016 14:02:23 +0900
Subject: [PATCH 071/109] update NoteList

sort by updatedAt
improve style
add auto-scrolling
---
 browser/main/NoteList/NoteList.styl | 21 ++++++++++-
 browser/main/NoteList/index.js      | 57 +++++++++++++++++++----------
 2 files changed, 57 insertions(+), 21 deletions(-)

diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index dd4043c6..dec5da35 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -49,9 +49,26 @@
   font-weight bold
   overflow ellipsis
 
-.item-tags
+.item-tagList
   height 30px
   font-size 12px
   line-height 30px
-  color $ui-inactive-text-color
   overflow ellipsis
+
+.item-tagList-icon
+  vertical-align middle
+  color $ui-button-color
+
+.item-tagList-item
+  margin 2px
+  padding 0 4px
+  height 20px
+  border-radius 5px
+  vertical-align middle
+  border $ui-border
+  color $ui-button-color
+
+.item-tagList-empty
+  color $ui-inactive-text-color
+  vertical-align middle
+
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index 15988da5..3509b625 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -32,24 +32,29 @@ class NoteList extends React.Component {
           key: `${this.notes[0]._repository.key}-${this.notes[0].key}`
         }
       })
+      return
     }
-    // return false
-    // var index = articles.indexOf(null)
-    // var el = ReactDOM.findDOMNode(this)
-    // var li = el.querySelectorAll('.NoteList>div')[index]
 
-    // if (li == null) {
-    //   return
-    // }
+    // Auto scroll
+    let targetIndex = _.findIndex(this.notes, (note) => {
+      let splitted = location.query.key.split('-')
+      let repoKey = splitted[0]
+      let noteKey = splitted[1]
+      return repoKey === note._repository.key && noteKey === note.key
+    })
+    if (targetIndex > -1) {
+      let list = this.refs.root
+      let item = list.childNodes[targetIndex]
 
-    // var overflowBelow = el.clientHeight + el.scrollTop < li.offsetTop + li.clientHeight
-    // if (overflowBelow) {
-    //   el.scrollTop = li.offsetTop + li.clientHeight - el.clientHeight
-    // }
-    // var overflowAbove = el.scrollTop > li.offsetTop
-    // if (overflowAbove) {
-    //   el.scrollTop = li.offsetTop
-    // }
+      let overflowBelow = list.clientHeight + list.scrollTop < item.offsetTop + list.clientHeight
+      if (overflowBelow) {
+        list.scrollTop = item.offsetTop + item.clientHeight - list.clientHeight
+      }
+      let overflowAbove = list.scrollTop > item.offsetTop
+      if (overflowAbove) {
+        list.scrollTop = item.offsetTop
+      }
+    }
   }
 
   focus () {
@@ -187,12 +192,18 @@ class NoteList extends React.Component {
 
   render () {
     let { location } = this.props
-    let notes = this.notes = this.getNotes()
+    let notes = this.notes = this.getNotes().sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
+
     let noteElements = notes
       .map((note) => {
         let folder = _.find(note._repository.folders, {key: note.folder})
         let tagElements = note.tags.map((tag) => {
-          return <span key={tag}>{tag}</span>
+          return (
+            <span styleName='item-tagList-item'
+              key={tag}>
+              {tag}
+            </span>
+          )
         })
         let key = `${note._repository.key}-${note.key}`
         let isActive = location.query.key === key
@@ -219,8 +230,15 @@ class NoteList extends React.Component {
 
             <div styleName='item-title'>{note.title}</div>
 
-            <div styleName='item-tags'><i className='fa fa-tags fa-fw'/>{tagElements.length > 0 ? tagElements : <span>Not tagged yet</span>}</div>
-
+            <div styleName='item-tagList'>
+              <i styleName='item-tagList-icon'
+                className='fa fa-tags fa-fw'
+              />
+              {tagElements.length > 0
+                ? tagElements
+                : <span styleName='item-tagList-empty'>Not tagged yet</span>
+              }
+            </div>
           </div>
         )
       })
@@ -228,6 +246,7 @@ class NoteList extends React.Component {
     return (
       <div className='NoteList'
         styleName='root'
+        ref='root'
         tabIndex='0'
         onKeyDown={(e) => this.handleNoteListKeyDown(e)}
         style={this.props.style}

From 549930b48ce27f344b49385465af0df08abccbcf Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sun, 29 May 2016 14:14:58 +0900
Subject: [PATCH 072/109] Enhance Tag style

---
 browser/main/Detail/TagSelect.styl  | 18 +++++++++---------
 browser/main/NoteList/NoteList.styl |  9 ++++++---
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl
index 2b82d459..10e7285e 100644
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -9,12 +9,16 @@
   line-height 40px
   vertical-align top
   text-align center
+  color $ui-button-color
 
 .tag
   display inline-block
   margin 0 2px
   vertical-align middle
   height 20px
+  background-color white
+  border-radius 3px
+  overflow hidden
   clearfix()
 
 .tag-removeButton
@@ -23,9 +27,9 @@
   width 18px
   margin 0
   padding 0
-  border $ui-border
-  border-top-left-radius 5px
-  border-bottom-left-radius 5px
+  border-style solid
+  border-color $ui-borderColor
+  border-width 0 0 0 3px
   line-height 18px
   background-color transparent
   color $ui-button-color
@@ -41,13 +45,9 @@
 .tag-label
   float left
   height 20px
-  line-height 18px
-  border-top $ui-border
-  border-right $ui-border
-  border-bottom $ui-border
-  border-top-right-radius 5px
-  border-bottom-right-radius 5px
+  line-height 20px
   padding 0 6px
+  color $ui-button-color
 
 .newTag
   display inline-block
diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index dec5da35..85dacef2 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -60,13 +60,16 @@
   color $ui-button-color
 
 .item-tagList-item
-  margin 2px
+  margin 0 4px
   padding 0 4px
   height 20px
-  border-radius 5px
+  border-radius 3px
   vertical-align middle
-  border $ui-border
+  border-style solid
+  border-color $ui-borderColor
+  border-width 0 0 0 3px
   color $ui-button-color
+  background-color $ui-backgroundColor
 
 .item-tagList-empty
   color $ui-inactive-text-color

From 4fdb72f93cd1302473eb0978fe8f6afd226e1609 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Tue, 31 May 2016 14:29:01 +0900
Subject: [PATCH 073/109] add FolderSelect

---
 browser/main/Detail/FolderSelect.js   | 267 ++++++++++++++++++++++++++
 browser/main/Detail/FolderSelect.styl |  74 +++++++
 browser/main/Detail/NoteDetail.js     |  14 +-
 browser/main/Detail/NoteDetail.styl   |  14 +-
 browser/main/NoteList/index.js        |  26 +--
 browser/main/lib/queue.js             |   2 +-
 browser/main/store.js                 |   8 +
 7 files changed, 376 insertions(+), 29 deletions(-)
 create mode 100644 browser/main/Detail/FolderSelect.js
 create mode 100644 browser/main/Detail/FolderSelect.styl

diff --git a/browser/main/Detail/FolderSelect.js b/browser/main/Detail/FolderSelect.js
new file mode 100644
index 00000000..ec38d63f
--- /dev/null
+++ b/browser/main/Detail/FolderSelect.js
@@ -0,0 +1,267 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './FolderSelect.styl'
+import _ from 'lodash'
+
+class FolderSelect extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      status: 'IDLE',
+      search: '',
+      optionIndex: -1
+    }
+  }
+
+  componentDidMount () {
+    this.value = this.props.value
+  }
+
+  componentDidUpdate () {
+    this.value = this.props.value
+  }
+
+  handleClick (e) {
+    this.setState({
+      status: 'SEARCH',
+      optionIndex: -1
+    }, () => {
+      this.refs.search.focus()
+    })
+  }
+
+  handleFocus (e) {
+    if (this.state.status === 'IDLE') {
+      this.setState({
+        status: 'FOCUS'
+      })
+    }
+  }
+
+  handleBlur (e) {
+    if (this.state.status === 'FOCUS') {
+      this.setState({
+        status: 'IDLE'
+      })
+    }
+  }
+
+  handleKeyDown (e) {
+    switch (e.keyCode) {
+      case 13:
+        if (this.state.status === 'FOCUS') {
+          this.setState({
+            status: 'SEARCH',
+            optionIndex: -1
+          }, () => {
+            this.refs.search.focus()
+          })
+        }
+        break
+      case 40:
+      case 38:
+        if (this.state.status === 'FOCUS') {
+          this.setState({
+            status: 'SEARCH',
+            optionIndex: 0
+          }, () => {
+            this.refs.search.focus()
+          })
+        }
+        break
+      case 9:
+        if (e.shiftKey) {
+          e.preventDefault()
+          let tabbable = document.querySelectorAll('a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])')
+          let previousEl = tabbable[Array.prototype.indexOf.call(tabbable, this.refs.root) - 1]
+          if (previousEl != null) previousEl.focus()
+        }
+    }
+  }
+
+  handleSearchInputBlur (e) {
+    if (e.relatedTarget !== this.refs.root) {
+      this.setState({
+        status: 'IDLE'
+      })
+    }
+  }
+
+  handleSearchInputChange (e) {
+    let { folders } = this.props
+    let search = this.refs.search.value
+    let optionIndex = search.length > 0
+      ? _.findIndex(folders, (folder) => {
+        return folder.name.match(new RegExp('^' + _.escapeRegExp(search), 'i'))
+      })
+      : -1
+
+    this.setState({
+      search: this.refs.search.value,
+      optionIndex: optionIndex
+    })
+  }
+
+  handleSearchInputKeyDown (e) {
+    switch (e.keyCode) {
+      case 40:
+        e.stopPropagation()
+        this.nextOption()
+        break
+      case 38:
+        e.stopPropagation()
+        this.previousOption()
+        break
+      case 13:
+        e.stopPropagation()
+        this.selectOption()
+        break
+      case 27:
+        e.stopPropagation()
+        this.setState({
+          status: 'FOCUS'
+        }, () => {
+          this.refs.root.focus()
+        })
+    }
+  }
+
+  nextOption () {
+    let { folders } = this.props
+    let { optionIndex } = this.state
+
+    optionIndex++
+    if (optionIndex >= folders.length) optionIndex = 0
+
+    this.setState({
+      optionIndex
+    })
+  }
+
+  previousOption () {
+    let { folders } = this.props
+    let { optionIndex } = this.state
+
+    optionIndex--
+    if (optionIndex < 0) optionIndex = folders.length - 1
+
+    this.setState({
+      optionIndex
+    })
+  }
+
+  selectOption () {
+    let { folders } = this.props
+    let optionIndex = this.state.optionIndex
+
+    let folder = folders[optionIndex]
+    if (folder != null) {
+      this.setState({
+        status: 'FOCUS'
+      }, () => {
+        this.setValue(folder.key)
+        this.refs.root.focus()
+      })
+    }
+  }
+
+  handleOptionClick (folderKey) {
+    return (e) => {
+      e.stopPropagation()
+      this.setState({
+        status: 'FOCUS'
+      }, () => {
+        this.setValue(folderKey)
+        this.refs.root.focus()
+      })
+    }
+  }
+
+  setValue (folderKey) {
+    this.value = folderKey
+    this.props.onChange()
+  }
+
+  render () {
+    let { className, folders, value } = this.props
+    let currentFolder = _.find(folders, {key: value})
+    let optionList = folders.map((folder, index) => {
+      return (
+        <div styleName={index === this.state.optionIndex
+            ? 'search-optionList-item--active'
+            : 'search-optionList-item'
+          }
+          key={folder.key}
+          onClick={(e) => this.handleOptionClick(folder.key)(e)}
+        >
+          <i style={{color: folder.color}}
+            className='fa fa-fw fa-cube'
+          />&nbsp;
+          {folder.name}
+        </div>
+      )
+    })
+
+    return (
+      <div className={_.isString(className)
+          ? 'FolderSelect ' + className
+          : 'FolderSelect'
+        }
+        styleName={this.state.status === 'SEARCH'
+          ? 'root--search'
+          : this.state.status === 'FOCUS'
+          ? 'root--focus'
+          : 'root'
+        }
+        ref='root'
+        tabIndex='0'
+        onClick={(e) => this.handleClick(e)}
+        onFocus={(e) => this.handleFocus(e)}
+        onBlur={(e) => this.handleBlur(e)}
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
+        {this.state.status === 'SEARCH'
+          ? <div styleName='search'>
+            <input styleName='search-input'
+              ref='search'
+              value={this.state.search}
+              placeholder='Folder...'
+              onChange={(e) => this.handleSearchInputChange(e)}
+              onBlur={(e) => this.handleSearchInputBlur(e)}
+              onKeyDown={(e) => this.handleSearchInputKeyDown(e)}
+            />
+            <div styleName='search-optionList'
+              ref='optionList'
+            >
+              {optionList}
+            </div>
+          </div>
+          : <div styleName='idle'>
+            <div styleName='idle-label'>
+              <i style={{color: currentFolder.color}}
+                className='fa fa-fw fa-cube'
+              />&nbsp;
+              {currentFolder.name}
+            </div>
+            <i styleName='idle-caret' className='fa fa-fw fa-caret-down'/>
+          </div>
+        }
+
+      </div>
+    )
+  }
+}
+
+FolderSelect.propTypes = {
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  folders: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    name: PropTypes.string,
+    color: PropTypes.string
+  }))
+}
+
+export default CSSModules(FolderSelect, styles)
diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl
new file mode 100644
index 00000000..7fb7b2ca
--- /dev/null
+++ b/browser/main/Detail/FolderSelect.styl
@@ -0,0 +1,74 @@
+.root
+  position relative
+  border solid 1px transparent
+  line-height 34px
+  vertical-align middle
+  border-radius 5px
+  transition 0.15s
+  user-select none
+  &:hover
+    background-color white
+    border-color $ui-borderColor
+
+.root--search, .root--focus
+  @extend .root
+  background-color white
+  border-color $ui-input--focus-borderColor
+  &:hover
+    background-color white
+    border-color $ui-input--focus-borderColor
+
+.idle
+  position relative
+  cursor pointer
+.idle-label
+  absolute left top
+  padding 0 0 0 5px
+  right 20px
+  overflow ellipsis
+
+.idle-caret
+  absolute right top
+  height 34px
+  width 20px
+  line-height 34px
+
+.search
+  absolute top left right bottom
+  line-height 34px
+
+.search-input
+  vertical-align middle
+  position relative
+  top -2px
+  outline none
+  border none
+  height 20px
+  line-height 20px
+  background-color transparent
+  padding 0 10px
+
+.search-optionList
+  position fixed
+  border $ui-border
+  z-index 10
+  background-color white
+  border-radius 5px
+
+.search-optionList-item
+  height 34px
+  width 120px
+  box-sizing border-box
+  padding 0 5px
+  overflow ellipsis
+  cursor pointer
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+
+.search-optionList-item--active
+  @extend .search-optionList-item
+  background-color $ui-button--active-backgroundColor
+  color $ui-button--active-color
+  &:hover
+    background-color $ui-button--active-backgroundColor
+    color $ui-button--active-color
diff --git a/browser/main/Detail/NoteDetail.js b/browser/main/Detail/NoteDetail.js
index ebce7262..ef3d23dd 100644
--- a/browser/main/Detail/NoteDetail.js
+++ b/browser/main/Detail/NoteDetail.js
@@ -5,6 +5,7 @@ import MarkdownEditor from 'browser/components/MarkdownEditor'
 import queue from 'browser/main/lib/queue'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
+import FolderSelect from './FolderSelect'
 import Repository from 'browser/lib/Repository'
 
 class NoteDetail extends React.Component {
@@ -66,6 +67,7 @@ class NoteDetail extends React.Component {
 
     note.content = this.refs.content.value
     note.tags = this.refs.tags.value
+    note.folder = this.refs.folder.value
 
     this.setState({
       note,
@@ -111,6 +113,7 @@ class NoteDetail extends React.Component {
   handleStarButtonClick (e) {
     let { note } = this.state
     let { dispatch } = this.props
+
     let isStarred = note._repository.starred.some((starredKey) => starredKey === note.key)
 
     if (isStarred) {
@@ -143,6 +146,7 @@ class NoteDetail extends React.Component {
   render () {
     let { note } = this.state
     let isStarred = note._repository.starred.some((starredKey) => starredKey === note.key)
+    let folders = note._repository.folders
 
     return (
       <div className='NoteDetail'
@@ -157,7 +161,12 @@ class NoteDetail extends React.Component {
                 onClick={(e) => this.handleStarButtonClick(e)}
                 isActive={isStarred}
               />
-              <div styleName='info-left-top-folderSelect'>FolderSelect</div>
+              <FolderSelect styleName='info-left-top-folderSelect'
+                value={this.state.note.folder}
+                ref='folder'
+                folders={folders}
+                onChange={() => this.handleChange()}
+              />
             </div>
             <div styleName='info-left-bottom'>
               <TagSelect
@@ -197,6 +206,9 @@ class NoteDetail extends React.Component {
 NoteDetail.propTypes = {
   dispatch: PropTypes.func,
   repositories: PropTypes.array,
+  note: PropTypes.shape({
+
+  }),
   style: PropTypes.shape({
     left: PropTypes.number
   }),
diff --git a/browser/main/Detail/NoteDetail.styl b/browser/main/Detail/NoteDetail.styl
index 7d424c6b..31ab252f 100644
--- a/browser/main/Detail/NoteDetail.styl
+++ b/browser/main/Detail/NoteDetail.styl
@@ -1,4 +1,4 @@
-$info-height = 80px
+$info-height = 75px
 
 .root
   absolute top bottom right
@@ -17,6 +17,7 @@ $info-height = 80px
 
 .info-left-top
   height 40px
+  line-height 40px
 
 .info-left-top-starButton
   display inline-block
@@ -27,15 +28,16 @@ $info-height = 80px
 
 .info-left-top-folderSelect
   display inline-block
-  height 40px
-  width 100px
-  vertical-align top
+  height 34px
+  width 120px
+  vertical-align middle
 
 .info-left-bottom
-  height 40px
+  height 30px
 
 .info-left-bottom-tagSelect
-  height 40px
+  height 30px
+  line-height 30px
 
 .info-right
   float right
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index 3509b625..71734328 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -36,10 +36,10 @@ class NoteList extends React.Component {
     }
 
     // Auto scroll
+    let splitted = location.query.key.split('-')
+    let repoKey = splitted[0]
+    let noteKey = splitted[1]
     let targetIndex = _.findIndex(this.notes, (note) => {
-      let splitted = location.query.key.split('-')
-      let repoKey = splitted[0]
-      let noteKey = splitted[1]
       return repoKey === note._repository.key && noteKey === note.key
     })
     if (targetIndex > -1) {
@@ -133,11 +133,7 @@ class NoteList extends React.Component {
     if (location.pathname.match(/\/home/)) {
       return repositories
       .reduce((sum, repository) => {
-        return sum.concat(repository.notes
-          .map((note) => {
-            note._repository = repository
-            return note
-          }))
+        return sum.concat(repository.notes)
       }, [])
     }
 
@@ -148,11 +144,7 @@ class NoteList extends React.Component {
           .map((starredKey) => {
             return _.find(repository.notes, {key: starredKey})
           })
-          .filter((note) => _.isObject(note))
-          .map((note) => {
-            note._repository = repository
-            return note
-          }))
+          .filter((note) => _.isObject(note)))
       }, [])
     }
 
@@ -162,18 +154,10 @@ class NoteList extends React.Component {
     let folder = _.find(repository.folders, {key: folderKey})
     if (folder == null) {
       return repository.notes
-        .map((note) => {
-          note._repository = repository
-          return note
-        })
     }
 
     return repository.notes
       .filter((note) => note.folder === folderKey)
-      .map((note) => {
-        note._repository = repository
-        return note
-      })
   }
 
   handleNoteClick (key) {
diff --git a/browser/main/lib/queue.js b/browser/main/lib/queue.js
index c0554b48..8e70ae0c 100644
--- a/browser/main/lib/queue.js
+++ b/browser/main/lib/queue.js
@@ -4,6 +4,7 @@ import _ from 'lodash'
 let tasks = []
 
 function _save (task, repoKey, note) {
+  note = Object.assign({}, note)
   delete note._repository
 
   task.status = 'process'
@@ -15,7 +16,6 @@ function _save (task, repoKey, note) {
     })
     .then((note) => {
       tasks.splice(tasks.indexOf(task), 1)
-      console.log(tasks)
       console.info('Note saved', note)
     })
     .catch((err) => {
diff --git a/browser/main/store.js b/browser/main/store.js
index 3f41ad5c..8050466d 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -33,6 +33,11 @@ function repositories (state = initialRepositories, action) {
   console.info('REDUX >> ', action)
   switch (action.type) {
     case 'INIT_ALL':
+      action.data.forEach((repo) => {
+        repo.notes.forEach((note) => {
+          note._repository = repo
+        })
+      })
       return action.data.slice()
     case 'ADD_REPOSITORY':
       {
@@ -113,6 +118,7 @@ function repositories (state = initialRepositories, action) {
         let targetRepo = _.find(repos, {key: action.repository})
 
         if (targetRepo == null) return state
+        action.note._repository = targetRepo
         targetRepo.notes.push(action.note)
 
         return repos
@@ -126,6 +132,8 @@ function repositories (state = initialRepositories, action) {
 
         let targetNoteIndex = _.findIndex(targetRepo.notes, {key: action.note.key})
         action.note.updatedAt = Date.now()
+        action.note._repository = targetRepo
+
         if (targetNoteIndex > -1) {
           targetRepo.notes.splice(targetNoteIndex, 1, action.note)
         } else {

From cb18b8f347f3b0163816863b002d5eb0b8aef129 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Tue, 31 May 2016 14:29:49 +0900
Subject: [PATCH 074/109] fix style

---
 browser/main/Detail/StarButton.styl | 2 ++
 browser/main/Detail/TagSelect.styl  | 5 +----
 browser/main/NoteList/NoteList.styl | 1 -
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/browser/main/Detail/StarButton.styl b/browser/main/Detail/StarButton.styl
index acd92035..655f9b30 100644
--- a/browser/main/Detail/StarButton.styl
+++ b/browser/main/Detail/StarButton.styl
@@ -7,6 +7,8 @@
   border none
   padding 0
   transition transform 0.15s
+  &:focus
+    color $ui-active-color
   &:hover
     color $ui-text-color
     transform rotate(-72deg)
diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl
index 10e7285e..613d5072 100644
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -1,13 +1,11 @@
 .root
   position relative
-  line-height 40px
   user-select none
 
 .icon
   display inline-block
   width 30px
-  line-height 40px
-  vertical-align top
+  vertical-align middle
   text-align center
   color $ui-button-color
 
@@ -47,7 +45,6 @@
   height 20px
   line-height 20px
   padding 0 6px
-  color $ui-button-color
 
 .newTag
   display inline-block
diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index 85dacef2..3cad990c 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -68,7 +68,6 @@
   border-style solid
   border-color $ui-borderColor
   border-width 0 0 0 3px
-  color $ui-button-color
   background-color $ui-backgroundColor
 
 .item-tagList-empty

From d171078ca4d8e3ea2a77f20295fee08d3daaa488 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Tue, 31 May 2016 21:37:06 +0900
Subject: [PATCH 075/109] fix z-index of option

---
 browser/main/Detail/FolderSelect.styl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl
index 7fb7b2ca..2593334b 100644
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -51,7 +51,7 @@
 .search-optionList
   position fixed
   border $ui-border
-  z-index 10
+  z-index 200
   background-color white
   border-radius 5px
 

From d9096424c52b4568990c7d01eee60d97e9e8755a Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Tue, 31 May 2016 21:38:34 +0900
Subject: [PATCH 076/109] set value when updating

---
 browser/components/CodeEditor.js     | 2 ++
 browser/components/MarkdownEditor.js | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js
index 2c439c9b..c7128600 100644
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -152,6 +152,8 @@ export default class CodeEditor extends React.Component {
   }
 
   componentDidUpdate (prevProps, prevState) {
+    let { value } = this.props
+    this.value = value
     var session = this.editor.getSession()
 
     if (prevProps.mode !== this.props.mode) {
diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
index 198c3ef4..a3787ec8 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -17,6 +17,10 @@ class MarkdownEditor extends React.Component {
     this.value = this.refs.code.value
   }
 
+  componentDidUpdate () {
+    this.value = this.refs.code.value
+  }
+
   handleChange (e) {
     this.value = this.refs.code.value
     this.props.onChange(e)

From eeda6b02082b272ac248d8ff3787adbf0bef9045 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Tue, 31 May 2016 21:38:47 +0900
Subject: [PATCH 077/109] remove unnecessary log

---
 browser/main/Detail/TagSelect.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js
index ef5de13b..8c872a44 100644
--- a/browser/main/Detail/TagSelect.js
+++ b/browser/main/Detail/TagSelect.js
@@ -21,7 +21,6 @@ class TagSelect extends React.Component {
   }
 
   handleNewTagInputKeyDown (e) {
-    console.log(e.keyCode)
     switch (e.keyCode) {
       case 13:
         this.submitTag()

From 0c2226b3fc1b148fe5926cb2ade616fcedd1017c Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Tue, 31 May 2016 21:39:42 +0900
Subject: [PATCH 078/109] cancel dispatch queue before focrcing & shorter
 dispatch latency

---
 browser/main/Detail/NoteDetail.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/browser/main/Detail/NoteDetail.js b/browser/main/Detail/NoteDetail.js
index ef3d23dd..fe2ee491 100644
--- a/browser/main/Detail/NoteDetail.js
+++ b/browser/main/Detail/NoteDetail.js
@@ -22,6 +22,7 @@ class NoteDetail extends React.Component {
   componentWillReceiveProps (nextProps) {
     if (nextProps.note.key !== this.props.note.key) {
       if (this.state.isDispatchQueued) {
+        this.cancelDispatchQueue()
         this.dispatch()
       }
       this.setState({
@@ -92,7 +93,7 @@ class NoteDetail extends React.Component {
       this.setState({
         isDispatchQueued: false
       })
-    }, 500)
+    }, 100)
   }
 
   dispatch () {

From c691af97125846c280817b212e503e56cff34da5 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Wed, 1 Jun 2016 09:35:48 +0900
Subject: [PATCH 079/109] debug autoscroll

---
 browser/main/NoteList/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index 71734328..d00fd150 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -46,7 +46,7 @@ class NoteList extends React.Component {
       let list = this.refs.root
       let item = list.childNodes[targetIndex]
 
-      let overflowBelow = list.clientHeight + list.scrollTop < item.offsetTop + list.clientHeight
+      let overflowBelow = item.offsetTop + item.clientHeight - list.clientHeight - list.scrollTop > 0
       if (overflowBelow) {
         list.scrollTop = item.offsetTop + item.clientHeight - list.clientHeight
       }

From 45212e7e14e384c3a3f004095cd923183c629061 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Wed, 1 Jun 2016 10:19:36 +0900
Subject: [PATCH 080/109] redirect when create new note

---
 browser/main/Main.js         |  3 ++-
 browser/main/TopBar/index.js | 16 +++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/browser/main/Main.js b/browser/main/Main.js
index c0aa045f..90a18a47 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -89,7 +89,8 @@ class Main extends React.Component {
             'dispatch',
             'repositories',
             'config',
-            'params'
+            'params',
+            'location'
           ])}
         />
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
diff --git a/browser/main/TopBar/index.js b/browser/main/TopBar/index.js
index e1071520..e36087ab 100644
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -65,12 +65,20 @@ class TopBar extends React.Component {
         return repo.addNote(newNote)
       })
       .then((note) => {
-        let { dispatch } = this.props
+        let { dispatch, location } = this.props
+        let { router } = this.context
         dispatch({
           type: 'ADD_NOTE',
           repository: repositoryKey,
           note: note
         })
+
+        router.push({
+          pathname: location.pathname,
+          query: {
+            key: `${note._repository.key}-${note.key}`
+          }
+        })
       })
       .catch((err) => {
         console.error(err)
@@ -139,6 +147,12 @@ class TopBar extends React.Component {
   }
 }
 
+TopBar.contextTypes = {
+  router: PropTypes.shape({
+    push: PropTypes.func
+  })
+}
+
 TopBar.propTypes = {
   dispatch: PropTypes.func,
   config: PropTypes.shape({

From eb1a0ba49fd2daf0badfedcdf2755334c77149ed Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Wed, 1 Jun 2016 11:50:58 +0900
Subject: [PATCH 081/109] switch note by arrow buttons

---
 browser/main/NoteList/index.js | 69 +++++++++++++++++++++++++---------
 1 file changed, 52 insertions(+), 17 deletions(-)

diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index d00fd150..10a6488c 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -61,24 +61,59 @@ class NoteList extends React.Component {
     // ReactDOM.findDOMNode(this).focus()
   }
 
-  // 移動ができなかったらfalseを返す:
-  selectPriorArticle () {
-    // let { articles, activeArticle, dispatch } = this.props
-    // let targetIndex = articles.indexOf(activeArticle) - 1
-    // let targetArticle = articles[targetIndex]
-    // return false
+  selectPriorNote () {
+    if (this.notes == null || this.notes.length === 0) {
+      return
+    }
+    let { router } = this.context
+    let { location } = this.props
+    let splitted = location.query.key.split('-')
+    let repoKey = splitted[0]
+    let noteKey = splitted[1]
+    let targetIndex = _.findIndex(this.notes, (note) => {
+      return repoKey === note._repository.key && noteKey === note.key
+    })
+
+    if (targetIndex === 0) {
+      return
+    }
+    targetIndex--
+    if (targetIndex < 0) targetIndex = 0
+
+    router.push({
+      pathname: location.pathname,
+      query: {
+        key: `${this.notes[targetIndex]._repository.key}-${this.notes[targetIndex].key}`
+      }
+    })
   }
 
-  selectNextArticle () {
-    // let { articles, activeArticle, dispatch } = this.props
-    // let targetIndex = articles.indexOf(activeArticle) + 1
-    // let targetArticle = articles[targetIndex]
+  selectNextNote () {
+    if (this.notes == null || this.notes.length === 0) {
+      return
+    }
+    let { router } = this.context
+    let { location } = this.props
+    let splitted = location.query.key.split('-')
+    let repoKey = splitted[0]
+    let noteKey = splitted[1]
+    let targetIndex = _.findIndex(this.notes, (note) => {
+      return repoKey === note._repository.key && noteKey === note.key
+    })
 
-    // if (targetArticle != null) {
-    //   dispatch(switchArticle(targetArticle.key))
-    //   return true
-    // }
-    // return false
+    if (targetIndex === this.notes.length - 1) {
+      return
+    }
+    targetIndex++
+    if (targetIndex < 0) targetIndex = 0
+    else if (targetIndex > this.notes.length - 1) targetIndex === this.notes.length - 1
+
+    router.push({
+      pathname: location.pathname,
+      query: {
+        key: `${this.notes[targetIndex]._repository.key}-${this.notes[targetIndex].key}`
+      }
+    })
   }
 
   handleNoteListKeyDown (e) {
@@ -116,12 +151,12 @@ class NoteList extends React.Component {
 
     if (e.keyCode === 38) {
       e.preventDefault()
-      this.selectPriorArticle()
+      this.selectPriorNote()
     }
 
     if (e.keyCode === 40) {
       e.preventDefault()
-      this.selectNextArticle()
+      this.selectNextNote()
     }
   }
 

From ce915df2b245ef2c79fd2e8baded2c815f794c52 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sun, 12 Jun 2016 19:55:39 +0900
Subject: [PATCH 082/109] focus content editor after create new Note

---
 browser/components/MarkdownEditor.js | 12 +++++++++++
 browser/main/Detail/NoteDetail.js    | 16 ++++++++++++++
 browser/main/Main.js                 |  1 +
 browser/main/NoteList/index.js       |  7 ++-----
 browser/main/TopBar/TopBar.styl      |  2 +-
 browser/main/TopBar/index.js         |  3 ++-
 browser/main/lib/Commander.js        | 31 ++++++++++++++++++++++++++++
 7 files changed, 65 insertions(+), 7 deletions(-)
 create mode 100644 browser/main/lib/Commander.js

diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
index a3787ec8..c3ee4733 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -42,6 +42,18 @@ class MarkdownEditor extends React.Component {
     })
   }
 
+  focus () {
+    if (this.state.status === 'PREVIEW') {
+      this.setState({
+        status: 'CODE'
+      }, () => {
+        this.refs.code.focus()
+      })
+    } else {
+      this.refs.code.focus()
+    }
+  }
+
   reload () {
     this.refs.code.reload()
   }
diff --git a/browser/main/Detail/NoteDetail.js b/browser/main/Detail/NoteDetail.js
index fe2ee491..3264203b 100644
--- a/browser/main/Detail/NoteDetail.js
+++ b/browser/main/Detail/NoteDetail.js
@@ -7,6 +7,7 @@ import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
 import Repository from 'browser/lib/Repository'
+import Commander from 'browser/main/lib/Commander'
 
 class NoteDetail extends React.Component {
   constructor (props) {
@@ -19,6 +20,21 @@ class NoteDetail extends React.Component {
     this.dispatchTimer = null
   }
 
+  componentDidMount () {
+    Commander.bind('note-detail', this)
+  }
+
+  componentWillUnmount () {
+    Commander.release(this)
+  }
+
+  fire (command) {
+    switch (command) {
+      case 'focus':
+        this.refs.content.focus()
+    }
+  }
+
   componentWillReceiveProps (nextProps) {
     if (nextProps.note.key !== this.props.note.key) {
       if (this.state.isDispatchQueued) {
diff --git a/browser/main/Main.js b/browser/main/Main.js
index 90a18a47..69310426 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -22,6 +22,7 @@ class Main extends React.Component {
       listWidth: config.listWidth
     }
   }
+
   componentDidMount () {
     let { dispatch } = this.props
 
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index 10a6488c..ece93ebf 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -12,14 +12,11 @@ class NoteList extends React.Component {
   }
 
   componentDidMount () {
-    // this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
-    // ipc.on('list-focus', this.focusHandler)
-    // this.focus()
+    this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
   }
 
   componentWillUnmount () {
-    // clearInterval(this.refreshTimer)
-    // ipc.removeListener('list-focus', this.focusHandler)
+    clearInterval(this.refreshTimer)
   }
 
   componentDidUpdate () {
diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl
index 56ad9c72..d8fb11dc 100644
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -63,7 +63,7 @@
   background-color $ui-tooltip-backgroundColor
   color $ui-tooltip-text-color
   font-size 10px
-  margin-left -35px
+  margin-left -25px
   margin-top 5px
   padding 5px
   z-index 1
diff --git a/browser/main/TopBar/index.js b/browser/main/TopBar/index.js
index e36087ab..76d71988 100644
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -4,6 +4,7 @@ import styles from './TopBar.styl'
 import activityRecord from 'browser/lib/activityRecord'
 import Repository from 'browser/lib/Repository'
 import _ from 'lodash'
+import Commander from 'browser/main/lib/Commander'
 
 const OSX = window.process.platform === 'darwin'
 
@@ -61,7 +62,6 @@ class TopBar extends React.Component {
     Repository
       .find(repositoryKey)
       .then((repo) => {
-        console.log(repo)
         return repo.addNote(newNote)
       })
       .then((note) => {
@@ -79,6 +79,7 @@ class TopBar extends React.Component {
             key: `${note._repository.key}-${note.key}`
           }
         })
+        Commander.fire('note-detail:focus')
       })
       .catch((err) => {
         console.error(err)
diff --git a/browser/main/lib/Commander.js b/browser/main/lib/Commander.js
new file mode 100644
index 00000000..959de5f0
--- /dev/null
+++ b/browser/main/lib/Commander.js
@@ -0,0 +1,31 @@
+let callees = []
+
+function bind (name, el) {
+  callees.push({
+    name: name,
+    element: el
+  })
+}
+
+function release (el) {
+  callees = callees.filter((callee) => callee.element !== el)
+}
+
+function fire (command) {
+  console.info('COMMAND >>', command)
+  let splitted = command.split(':')
+  let target = splitted[0]
+  let targetCommand = splitted[1]
+  let targetCallees = callees
+    .filter((callee) => callee.name === target)
+
+  targetCallees.forEach((callee) => {
+    callee.element.fire(targetCommand)
+  })
+}
+
+export default {
+  bind,
+  release,
+  fire
+}

From 9ff70c4aefb257ce50ce4447fb90d06ca9d48836 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Thu, 14 Jul 2016 13:57:09 +0900
Subject: [PATCH 083/109] display updater error logs

---
 lib/main-app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/main-app.js b/lib/main-app.js
index 278ad34c..890b7d1c 100644
--- a/lib/main-app.js
+++ b/lib/main-app.js
@@ -131,7 +131,7 @@ function checkUpdate () {
   updater.check((err, status) => {
     if (err) {
       var isLatest = err.message === 'There is no newer version.'
-      if (!isLatest && !versionNotified) notify('Updater error!', err.message)
+      if (!isLatest && !versionNotified) console.error('Updater error! %s', err.message)
     }
     if (!err) {
       if (status) {

From 44f270f408af404e99757631f8ea06e7eee0b4b6 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Thu, 14 Jul 2016 13:58:14 +0900
Subject: [PATCH 084/109] rewite whole code

add dataApi
renew PreferencesModal
---
 browser/components/CodeEditor.js              |  62 +-
 browser/components/MarkdownEditor.js          |  52 +-
 browser/components/MarkdownPreview.js         |  38 +-
 browser/components/markdown.styl              |   3 +-
 browser/lib/Repository.js                     | 636 ------------------
 browser/main/Detail/FolderSelect.js           |  61 +-
 browser/main/Detail/FolderSelect.styl         |  13 +-
 browser/main/Detail/NoteDetail.js             | 145 ++--
 browser/main/Detail/NoteDetail.styl           |  10 +-
 browser/main/Detail/StarButton.styl           |  10 -
 browser/main/Detail/TagSelect.js              |  38 +-
 browser/main/Detail/index.js                  |  23 +-
 browser/main/Main.js                          |  27 +-
 browser/main/NoteList/NoteList.styl           |   4 +
 browser/main/NoteList/index.js                |  86 +--
 browser/main/SideNav/FolderItem.js            | 244 -------
 browser/main/SideNav/FolderItem.styl          | 115 ----
 browser/main/SideNav/RepositorySection.js     | 219 ------
 browser/main/SideNav/RepositorySection.styl   | 184 -----
 browser/main/SideNav/SideNav.styl             |   8 +-
 browser/main/SideNav/StorageItem.js           |  95 +++
 browser/main/SideNav/StorageItem.styl         |  89 +++
 browser/main/SideNav/index.js                 |  58 +-
 browser/main/TopBar/index.js                  |  72 +-
 browser/main/global.styl                      |  73 ++
 browser/main/index.js                         |   7 +-
 browser/main/lib/ConfigManager.js             |  29 +-
 browser/main/lib/dataApi.js                   | 380 +++++++++++
 browser/main/lib/queue.js                     |  20 +-
 .../main/modals/Preferences/AppSettingTab.js  | 242 -------
 browser/main/modals/Preferences/ContactTab.js |  20 -
 browser/main/modals/Preferences/index.js      |  84 ---
 .../main/modals/PreferencesModal/ConfigTab.js | 416 ++++++++++++
 .../modals/PreferencesModal/ConfigTab.styl    |  80 +++
 .../main/modals/PreferencesModal/InfoTab.js   |  39 ++
 .../main/modals/PreferencesModal/InfoTab.styl |  13 +
 .../PreferencesModal/PreferencesModal.styl    |  37 +
 .../modals/PreferencesModal/StorageItem.js    | 299 ++++++++
 .../modals/PreferencesModal/StorageItem.styl  |  97 +++
 .../modals/PreferencesModal/StoragesTab.js    | 223 ++++++
 .../modals/PreferencesModal/StoragesTab.styl  | 115 ++++
 browser/main/modals/PreferencesModal/index.js |  98 +++
 browser/main/store.js                         | 208 ++----
 browser/styles/index.styl                     |  27 +-
 browser/styles/main/index.styl                |  25 +-
 .../styles/main/modal/DeleteArticleModal.styl |  33 -
 browser/styles/main/modal/Preferences.styl    | 186 -----
 browser/styles/main/modal/modal.styl          |  21 -
 package.json                                  |   3 +-
 webpack-skeleton.js                           |   1 +
 50 files changed, 2572 insertions(+), 2496 deletions(-)
 delete mode 100644 browser/lib/Repository.js
 delete mode 100644 browser/main/SideNav/FolderItem.js
 delete mode 100644 browser/main/SideNav/FolderItem.styl
 delete mode 100644 browser/main/SideNav/RepositorySection.js
 delete mode 100644 browser/main/SideNav/RepositorySection.styl
 create mode 100644 browser/main/SideNav/StorageItem.js
 create mode 100644 browser/main/SideNav/StorageItem.styl
 create mode 100644 browser/main/global.styl
 create mode 100644 browser/main/lib/dataApi.js
 delete mode 100644 browser/main/modals/Preferences/AppSettingTab.js
 delete mode 100644 browser/main/modals/Preferences/ContactTab.js
 delete mode 100644 browser/main/modals/Preferences/index.js
 create mode 100644 browser/main/modals/PreferencesModal/ConfigTab.js
 create mode 100644 browser/main/modals/PreferencesModal/ConfigTab.styl
 create mode 100644 browser/main/modals/PreferencesModal/InfoTab.js
 create mode 100644 browser/main/modals/PreferencesModal/InfoTab.styl
 create mode 100644 browser/main/modals/PreferencesModal/PreferencesModal.styl
 create mode 100644 browser/main/modals/PreferencesModal/StorageItem.js
 create mode 100644 browser/main/modals/PreferencesModal/StorageItem.styl
 create mode 100644 browser/main/modals/PreferencesModal/StoragesTab.js
 create mode 100644 browser/main/modals/PreferencesModal/StoragesTab.styl
 create mode 100644 browser/main/modals/PreferencesModal/index.js
 delete mode 100644 browser/styles/main/modal/DeleteArticleModal.styl
 delete mode 100644 browser/styles/main/modal/Preferences.styl
 delete mode 100644 browser/styles/main/modal/modal.styl

diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js
index c7128600..ea1d2db4 100644
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -5,6 +5,8 @@ import _ from 'lodash'
 
 const ace = window.ace
 
+const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
+
 export default class CodeEditor extends React.Component {
   constructor (props) {
     super(props)
@@ -94,16 +96,16 @@ export default class CodeEditor extends React.Component {
   }
 
   componentDidMount () {
-    let { mode, value } = this.props
+    let { mode, value, theme, fontSize } = this.props
     this.value = value
     let el = ReactDOM.findDOMNode(this)
     let editor = this.editor = ace.edit(el)
     editor.$blockScrolling = Infinity
     editor.renderer.setShowGutter(true)
-    editor.setTheme('ace/theme/xcode')
+    editor.setTheme('ace/theme/' + theme)
     editor.moveCursorTo(0, 0)
     editor.setReadOnly(!!this.props.readOnly)
-    editor.setFontSize('14')
+    editor.setFontSize(fontSize)
 
     editor.on('blur', this.blurHandler)
 
@@ -135,9 +137,9 @@ export default class CodeEditor extends React.Component {
       : 'text'
     session.setMode('ace/mode/' + syntaxMode)
 
-    session.setUseSoftTabs(this.state.indentType === 'space')
-    session.setTabSize(!isNaN(this.state.indentSize) ? parseInt(this.state.indentSize, 10) : 4)
-    session.setOption('useWorker', false)
+    session.setUseSoftTabs(this.props.indentType === 'space')
+    session.setTabSize(this.props.indentSize)
+    session.setOption('useWorker', true)
     session.setUseWrapMode(true)
     session.setValue(_.isString(value) ? value : '')
 
@@ -154,7 +156,8 @@ export default class CodeEditor extends React.Component {
   componentDidUpdate (prevProps, prevState) {
     let { value } = this.props
     this.value = value
-    var session = this.editor.getSession()
+    let editor = this.editor
+    let session = this.editor.getSession()
 
     if (prevProps.mode !== this.props.mode) {
       let mode = _.find(modes, {name: this.props.mode})
@@ -163,23 +166,18 @@ export default class CodeEditor extends React.Component {
         : 'text'
       session.setMode('ace/mode' + syntaxMode)
     }
-  }
-
-  handleConfigApply (e, config) {
-    // this.setState({
-    //   fontSize: config['editor-font-size'],
-    //   fontFamily: config['editor-font-family'],
-    //   indentType: config['editor-indent-type'],
-    //   indentSize: config['editor-indent-size'],
-    //   themeSyntax: config['theme-syntax']
-    // }, function () {
-    //   var editor = this.editor
-    //   editor.setTheme('ace/theme/' + this.state.themeSyntax)
-
-    //   var session = editor.getSession()
-    //   session.setUseSoftTabs(this.state.indentType === 'space')
-    //   session.setTabSize(!isNaN(this.state.indentSize) ? parseInt(this.state.indentSize, 10) : 4)
-    // })
+    if (prevProps.theme !== this.props.theme) {
+      editor.setTheme('ace/theme/' + this.props.theme)
+    }
+    if (prevProps.fontSize !== this.props.fontSize) {
+      editor.setFontSize(this.props.fontSize)
+    }
+    if (prevProps.indentSize !== this.props.indentSize) {
+      session.setTabSize(this.props.indentSize)
+    }
+    if (prevProps.indentType !== this.props.indentType) {
+      session.setUseSoftTabs(this.props.indentType === 'space')
+    }
   }
 
   handleChange (e) {
@@ -222,8 +220,10 @@ export default class CodeEditor extends React.Component {
   }
 
   render () {
-    let { className } = this.props
-
+    let { className, fontFamily } = this.props
+    fontFamily = _.isString(fontFamily) && fontFamily.length > 0
+      ? [fontFamily].concat(defaultEditorFontFamily)
+      : defaultEditorFontFamily
     return (
       <div
         className={className == null
@@ -231,8 +231,7 @@ export default class CodeEditor extends React.Component {
           : `CodeEditor ${className}`
         }
         style={{
-          fontSize: '14px',
-          fontFamily: 'monospace'
+          fontFamily: fontFamily.join(', ')
         }}
       />
     )
@@ -249,7 +248,12 @@ CodeEditor.propTypes = {
 }
 
 CodeEditor.defaultProps = {
-  readOnly: false
+  readOnly: false,
+  theme: 'xcode',
+  fontSize: 14,
+  fontFamily: 'Monaco, Consolas',
+  indentSize: 4,
+  indentType: 'space'
 }
 
 export default CodeEditor
diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
index c3ee4733..bf520bfb 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -27,19 +27,22 @@ class MarkdownEditor extends React.Component {
   }
 
   handleContextMenu (e) {
-    let newStatus = this.state.status === 'PREVIEW'
-      ? 'CODE'
-      : 'PREVIEW'
-    this.setState({
-      status: newStatus
-    }, () => {
-      if (newStatus === 'CODE') {
-        this.refs.code.focus()
-      } else {
-        this.refs.code.blur()
-        this.refs.preview.focus()
-      }
-    })
+    let { config } = this.props
+    if (config.editor.switchPreview === 'RIGHTCLICK') {
+      let newStatus = this.state.status === 'PREVIEW'
+        ? 'CODE'
+        : 'PREVIEW'
+      this.setState({
+        status: newStatus
+      }, () => {
+        if (newStatus === 'CODE') {
+          this.refs.code.focus()
+        } else {
+          this.refs.code.blur()
+          this.refs.preview.focus()
+        }
+      })
+    }
   }
 
   focus () {
@@ -59,7 +62,14 @@ class MarkdownEditor extends React.Component {
   }
 
   render () {
-    let { className, value } = this.props
+    let { className, value, config } = this.props
+    let editorFontSize = parseInt(config.editor.fontSize, 10)
+    if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
+    let editorIndentSize = parseInt(config.editor.indentSize, 10)
+    if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
+
+    let previewStyle = {}
+    if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
 
     return (
       <div className={className == null
@@ -72,15 +82,23 @@ class MarkdownEditor extends React.Component {
           ref='code'
           mode='markdown'
           value={value}
+          theme={config.editor.theme}
+          fontFamily={config.editor.fontFamily}
+          fontSize={editorFontSize}
+          indentType={config.editor.indentType}
+          indentSize={editorIndentSize}
           onChange={(e) => this.handleChange(e)}
         />
         <MarkdownPreview styleName={this.state.status === 'PREVIEW'
             ? 'preview'
             : 'preview--hide'
           }
-          style={this.props.ignorePreviewPointerEvents
-            ? {pointerEvents: 'none'} : {}
-          }
+          style={previewStyle}
+          fontSize={config.preview.fontSize}
+          fontFamily={config.preview.fontFamily}
+          codeBlockTheme={config.preview.theme}
+          codeBlockFontFamily={config.editor.fontFamily}
+          lineNumber={config.preview.lineNumber}
           ref='preview'
           onContextMenu={(e) => this.handleContextMenu(e)}
           tabIndex='0'
diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index edcbadce..8619cddf 100644
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react'
 import markdown from 'browser/lib/markdown'
+import _ from 'lodash'
 
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
 const { shell } = require('electron')
@@ -8,6 +9,15 @@ const goExternal = function (e) {
   shell.openExternal(e.target.href)
 }
 
+const OSX = global.process.platform === 'darwin'
+
+const defaultFontFamily = ['helvetica', 'arial', 'sans-serif']
+if (!OSX) {
+  defaultFontFamily.unshift('\'Microsoft YaHei\'')
+  defaultFontFamily.unshift('meiryo')
+}
+const defaultCodeBlockFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
+
 export default class MarkdownPreview extends React.Component {
   constructor (props) {
     super(props)
@@ -30,7 +40,12 @@ export default class MarkdownPreview extends React.Component {
   }
 
   componentDidUpdate (prevProps) {
-    if (prevProps.value !== this.props.value) this.rewriteIframe()
+    if (prevProps.value !== this.props.value ||
+      prevProps.fontFamily !== this.props.fontFamily ||
+      prevProps.fontSize !== this.props.fontSize ||
+      prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
+      prevProps.lineNumber !== this.props.lineNumber
+    ) this.rewriteIframe()
   }
 
   rewriteIframe () {
@@ -38,7 +53,14 @@ export default class MarkdownPreview extends React.Component {
       el.removeEventListener('click', goExternal)
     })
 
-    let { value } = this.props
+    let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber } = this.props
+    fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
+      ? [fontFamily].concat(defaultFontFamily)
+      : defaultFontFamily
+    codeBlockFontFamily = _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
+      ? [codeBlockFontFamily].concat(defaultCodeBlockFontFamily)
+      : defaultCodeBlockFontFamily
+
     this.refs.root.contentWindow.document.head.innerHTML = `
       <style>
         @font-face {
@@ -51,6 +73,18 @@ export default class MarkdownPreview extends React.Component {
           text-rendering: optimizeLegibility;
         }
         ${markdownStyle}
+        body {
+          font-family: ${fontFamily.join(', ')};
+          font-size: ${fontSize}px;
+        }
+        code {
+          font-family: ${codeBlockFontFamily.join(', ')};
+        }
+        .lineNumber {
+          ${lineNumber && 'display: block !important;'}
+          font-family: ${codeBlockFontFamily.join(', ')};
+          opacity: 0.5;
+        }
       </style>
       <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css" id="hljs-css">
       <link rel="stylesheet" href="../resources/katex.min.css">
diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl
index 70eb65b0..e31a1919 100644
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -188,7 +188,6 @@ ol
   &>li>ul, &>li>ol
     margin 0
 code
-  font-family Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace
   padding 0.2em 0.4em
   background-color #f7f7f7
   border-radius 3px
@@ -213,9 +212,9 @@ pre
       border none
       margin -5px
   &>span.lineNumber
-    font-family Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace
     display none
     float left
+    font-size 0.85em
     margin 0 0.5em 0 -0.5em
     border-right 1px solid
     text-align right
diff --git a/browser/lib/Repository.js b/browser/lib/Repository.js
deleted file mode 100644
index 083f5c5a..00000000
--- a/browser/lib/Repository.js
+++ /dev/null
@@ -1,636 +0,0 @@
-const keygen = require('browser/lib/keygen')
-const fs = require('fs')
-const path = require('path')
-const CSON = require('season')
-const _ = require('lodash')
-const consts = require('browser/lib/consts')
-
-let repositories = []
-
-/**
- * # Repository
- *
- * ## Life cycle
- *
- * ```js
- * // Add reposiotry
- * var repo = new Repository({name: 'test', path: '/Users/somebody/test'})
- * repo
- *   .mount()
- *   .then(() => repo.load())
- *
- * // Update Cached
- * repo.saveCache({name: 'renamed'})
- *
- * // Update JSON
- * repo.saveJSON({author: 'Other user'})
- *
- * // Remove repository
- * repo.unmount()
- * ```
- *
- * ## `this.cached`
- *
- * Information of a Repository. It stores in `repoStats` key of localStorage
- *
- * ```js
- * this.cached = {
- *   "key":"523280a789404d430ce571ab9148fdd1343336cb",
- *   "name":"test",
- *   "path":"/Users/dickchoi/test"
- * }
- * ```
- *
- * ## `this.json`
- *
- * Parsed object from `boostrepo.json`. See `boostrepo.json`.
- *
- * ## Repository file structure
- *
- * The root directory of a Repository. It has several files and folders.
- *
- * ```
- * root
- *  |- data
- *      |-note1.cson
- *      |-note2.cson
- *      |-note3.cson
- *  |- boostrepo.json
- * ```
- *
- * #### `boostrepo.json`
- *
- * ```js
- * {
- *   name: String,
- *   author: String, // Same convention of package.json, `John Doe <email@example.com> (http://example.com)`
- *   remotes: [{
- *     name: String,
- *     url: String, // url of git remote
- *     branch: String // if branch isn't set, it will try to use `master` branch.
- *   }],
- *   folders: [{
- *     key: String // Unique sha1 hash key to identify folder,
- *     name: String,
- *     color: String // All CSS color formats available.
- *   }]
- * }
- * ```
- *
- * #### `data` directory
- *
- * Every note will be saved here as a single CSON file to `git diff` efficiently.
- * > This is because CSON supports Multiline string.
- * File name of each cson file will be used to identify note.
- * Commonly, Boostnote will automatically generate sha1 key and use it as a file name when creating a new note.
- *
- * ##### `note.cson`
- *
- * ```cson
- * tags: [String] // tags
- * folder: String // hash key of folder
- * mode: String // syntax mode
- * title: String
- * content: String
- * createdAt: Date
- * updatedAt: Date
- * ```
- *
- * ### Full data
- *
- * Full data of a Repository. It includes not only information also all data(notes). Redux will directly handle this data.
- *
- * ```js
- * var repo = Object.assign({}, repoJSON, notesData, cached, {status: 'READY'})
- *
- * // repo
- * {
- *   {...repoJSON}
- *   "key": "523280a789404d430ce571ab9148fdd1343336cb",
- *   "name": "test",
- *   "path": "/Users/dickchoi/test",
- *   "notes": [], // See `note.cson`
- *   "status": "READY" // If Boostnote failed to fetch data, It will be set `ERROR`
- * }
- * ```
- */
-
-class Repository {
-  constructor (cached) {
-    this.cached = _.pick(cached, ['key', 'name', 'path'])
-    this.status = 'IDLE'
-    this.isMount = false
-  }
-
-  /**
-   * Reload and set all data of a repository
-   * @return {Promise} full data of a repository
-   */
-  load () {
-    if (!_.isString(this.cached.key)) {
-      console.warn('The key of this repository doesn\'t seem to be valid. You should input this data to Redux reducer after setting the key properly.')
-    }
-    let name = this.cached.name
-    let targetPath = this.cached.path
-
-    targetPath = path.join(targetPath)
-    let dataPath = path.join(targetPath, 'data')
-
-    let initializeRepository = () => {
-      let resolveDataDirectory = this.constructor.resolveDirectory(path.join(targetPath, 'data'))
-      let resolveBoostrepoJSON = this.constructor.resolveJSON(path.join(targetPath, 'boostrepo.json'), {name: name})
-      return Promise.all([resolveDataDirectory, resolveBoostrepoJSON])
-        .then((data) => {
-          this.json = data[1]
-          return true
-        })
-    }
-
-    let fetchNotes = () => {
-      let noteNames = fs.readdirSync(dataPath)
-      let notes = noteNames
-        .map((noteName) => path.join(dataPath, noteName))
-        .filter((notePath) => CSON.isObjectPath(notePath))
-        .map((notePath) => {
-          return new Promise(function (resolve, reject) {
-            CSON.readFile(notePath, function (err, obj) {
-              if (err != null) {
-                console.log(err)
-                return resolve(null)
-              }
-              obj.key = path.basename(notePath, '.cson')
-              return resolve(obj)
-            })
-          })
-        })
-        .filter((note) => note != null)
-
-      return Promise.all(notes)
-        .then((notes) => {
-          this.notes = notes
-          return true
-        })
-    }
-
-    return this.constructor.resolveDirectory(targetPath)
-      .then(initializeRepository)
-      .then(fetchNotes)
-      .then(() => {
-        this.status = 'READY'
-
-        return this.getData()
-      })
-      .catch((err) => {
-        this.status = 'ERROR'
-        this.error = err
-        console.error(err)
-        return this
-      })
-  }
-
-  /**
-   * Add repository to localStorage
-   * If key doesn't exist, it will generate it.
-   * If a cache having same key extists in localStorage, override it.
-   *
-   * @return {Promise} added cache data
-   */
-  mount () {
-    let allCached = this.constructor.getAllCached()
-
-    // If key is not set, generate new one.
-    if (!_.isString(this.cached.key)) {
-      this.cached.key = keygen()
-      // Repeat utill generated key becomes unique.
-      while (_.findIndex(allCached, {key: this.cached.key}) > -1) {
-        this.cached.key = keygen()
-      }
-    }
-
-    let targetCachedIndex = _.findIndex(allCached, {key: this.cached.key})
-    if (targetCachedIndex > -1) {
-      allCached.splice(targetCachedIndex, 1, this.cached)
-    } else {
-      allCached.push(this.cached)
-    }
-    this.constructor.saveAllCached(allCached)
-    this.isMount = true
-
-    // Put in `repositories` array if it isn't in.
-    let targetIndex = _.findIndex(repositories, (repo) => {
-      this.cached.key === repo.cached.key
-    })
-    if (targetIndex < 0) {
-      repositories.push(this)
-    }
-
-    return Promise.resolve(this.cached)
-  }
-
-  /**
-   * Remove repository from localStorage
-   * @return {Promise} remoded cache data
-   */
-  unmount () {
-    let allCached = this.constructor.getAllCached()
-
-    let targetCachedIndex = _.findIndex(allCached, {key: this.cached.key})
-    if (targetCachedIndex > -1) {
-      allCached.splice(targetCachedIndex, 1)
-    }
-    this.constructor.saveAllCached(allCached)
-    this.isMount = false
-
-    // Discard from `repositories` array if it is in.
-    let targetIndex = _.findIndex(repositories, (repo) => {
-      this.cached.key === repo.cached.key
-    })
-    if (targetIndex > -1) {
-      repositories.splice(targetIndex, 1)
-    }
-
-    return Promise.resolve(this.cached)
-  }
-
-  /**
-   * Get all data of a repository
-   *
-   * If data is not ready, try to load it.
-   *
-   * @return {Promise} all data of a repository
-   */
-  getData () {
-    function carbonCopy (obj) {
-      return JSON.parse(JSON.stringify(obj))
-    }
-    if (this.status === 'IDLE') {
-      return this.load()
-    }
-
-    if (this.status === 'ERROR') {
-      return Promise.resolve(carbonCopy(Object.assign({}, this.json, this.cached, {
-        status: this.status
-      })))
-    }
-
-    return Promise.resolve(carbonCopy(Object.assign({}, this.json, this.cached, {
-      status: this.status,
-      notes: this.notes
-    })))
-  }
-
-  /**
-   * Save Cached
-   * @param  {Object} newCached
-   * @return {Promies} updated Cached
-   */
-  saveCached (newCached) {
-    if (_.isObject(newCached)) {
-      Object.assign(this.cached, _.pick(newCached, ['name', 'path']))
-    }
-
-    if (this.isMount) {
-      this.mount()
-    }
-
-    return Promise.resolve(this.cached)
-  }
-
-  /**
-   * Save JSON
-   * @param  {Object}  newJSON
-   * @return {Promise} updated JSON
-   */
-  saveJSON (newJSON) {
-    let jsonPath = path.join(this.cached.path, 'boostrepo.json')
-    if (_.isObject(newJSON)) {
-      Object.assign(this.json, newJSON)
-    }
-
-    return new Promise((resolve, reject) => {
-      CSON
-        .writeFile(jsonPath, this.json, (err) => {
-          if (err != null) return reject(err)
-          resolve(this.json)
-        })
-    })
-  }
-
-  /**
-   * Save both Cached and JSON
-   * @return {Promise} resolve array have cached and JSON
-   */
-  save () {
-    return Promise.all([this.saveCached(), this.saveJSON()])
-  }
-
-  /**
-   * Add a folder
-   * @param {Object} newFolder
-   * @return {Promise} new folder
-   */
-  addFolder (newFolder) {
-    let { folders } = this.json
-
-    newFolder = _.pick(newFolder, ['color', 'name'])
-    if (!_.isString(newFolder.name) || newFolder.name.trim().length === 0) newFolder.name = 'unnamed'
-    else newFolder.name = newFolder.name.trim()
-
-    if (!_.isString(newFolder.color)) newFolder.color = this.constructor.randomColor()
-
-    newFolder.key = keygen()
-    while (_.findIndex(folders, {key: newFolder.key}) > -1) {
-      newFolder.key = keygen()
-    }
-
-    folders.push(newFolder)
-
-    return this.saveJSON(this.json)
-      .then(() => newFolder)
-  }
-
-  /**
-   * Update a folder
-   * @param  {String} folderKey [description]
-   * @param  {Object} override   [description]
-   * @return {[type]}           [description]
-   */
-  updateFolder (folderKey, override) {
-    let { folders } = this.json
-
-    let targetFolder = _.find(folders, {key: folderKey})
-    if (targetFolder == null) {
-      return this.addFolder(override)
-    }
-    if (_.isString(override.name) && override.name.trim().length > 0) targetFolder.name = override.name.trim()
-    if (_.isString(override.color)) targetFolder.color = override.color
-
-    return this.saveJSON(this.json)
-      .then(() => targetFolder)
-  }
-
-  /**
-   * Remove a folder
-   * @param  {String} folderKey
-   * @return {Promise} removed folder
-   */
-  removeFolder (folderKey) {
-    let { folders } = this.json
-    let targetFolder = null
-
-    let targetIndex = _.findIndex(folders, {key: folderKey})
-    if (targetIndex > -1) {
-      targetFolder = folders.splice(targetIndex, 1)[0]
-    }
-
-    return this.saveJSON(null)
-      .then(() => targetFolder)
-  }
-
-  addNote (newNote) {
-    newNote = Object.assign({}, _.pick(newNote, ['content', 'tags', 'folder', 'mode', 'title']))
-
-    if (!this.constructor.validateNote(newNote)) {
-      return Promise.reject(new Error('Invalid input'))
-    }
-
-    newNote.key = keygen()
-    while (_.find(this.notes, {key: newNote.key}) != null) {
-      newNote.key = keygen()
-    }
-    newNote.createdAt = new Date()
-    newNote.updatedAt = new Date()
-    this.notes.push(newNote)
-
-    return new Promise((resolve, reject) => {
-      CSON.writeFile(path.join(this.cached.path, 'data', newNote.key + '.cson'), _.omit(newNote, ['key']), function (err) {
-        if (err != null) return reject(err)
-        resolve(newNote)
-      })
-    })
-  }
-
-  static validateNote (note) {
-    if (!_.isString(note.title)) return false
-    if (!_.isString(note.content)) return false
-    if (!_.isArray(note.tags)) return false
-    if (!note.tags.every((tag) => _.isString(tag))) return false
-    if (!_.isString(note.folder)) return false
-    if (!_.isString(note.mode)) return false
-    return true
-  }
-
-  getNote (noteKey) {
-    let note = _.find(this.notes, {key: noteKey})
-
-    return Promise.resolve(note)
-  }
-
-  updateNote (noteKey, override) {
-    if (!this.constructor.validateNote(override)) {
-      return Promise.reject(new Error('Invalid input'))
-    }
-
-    override.updatedAt = new Date()
-    return new Promise((resolve, reject) => {
-      CSON.writeFile(path.join(this.cached.path, 'data', noteKey + '.cson'), _.omit(override, ['key']), function (err) {
-        if (err != null) return reject(err)
-        override.key = noteKey
-        resolve(override)
-      })
-    })
-  }
-
-  starNote (noteKey) {
-    let note = _.find(this.notes, {key: noteKey})
-    if (note != null) {
-      let json = this.json
-      json.starred.push(noteKey)
-      json.starred = _.uniq(json.starred)
-
-      return this.saveJSON(json)
-    }
-  }
-
-  unstarNote (noteKey) {
-    let note = _.find(this.notes, {key: noteKey})
-    if (note != null) {
-      let json = this.json
-      json.starred = json.starred
-        .filter((starredKey) => starredKey !== noteKey)
-      json.starred = _.uniq(json.starred)
-
-      return this.saveJSON(json)
-    }
-  }
-
-  removeNote (noteKey) {
-    let noteIndex = _.findIndex(this.notes, {key: noteKey})
-
-    if (noteIndex < 0) return Promise.resolve(null)
-
-    let note = this.notes[noteIndex]
-    this.notes.splice(noteIndex, 1)
-
-    return new Promise((resolve, reject) => {
-      fs.unlink(path.join(this.cached.path, 'data', noteKey + '.cson'), function (err) {
-        if (err != null) return reject(err)
-        resolve(note)
-      })
-    })
-  }
-
-  getAllNotes () {
-    return Promise.resolve(this.notes)
-  }
-
-  /**
-   * Static Methods
-   */
-
-  static generateDefaultJSON (override) {
-    return Object.assign({
-      name: 'unnamed',
-      remotes: [],
-      folders: [{
-        key: keygen(),
-        name: 'general',
-        color: this.randomColor()
-      }],
-      starred: []
-    }, override)
-  }
-
-  /**
-   * # Resolve Repository JSON
-   *
-   * Fetch and parse JSON from given path.
-   * If boostrepo.json doesn't exist, create new one.
-   *
-   * @param  {String} targetPath [description]
-   * @param  {Object} defaultOverrides Overrided to default value of RepoJSON when creating new one.
-   * @return {Promise} resolving parsed data
-   */
-  static resolveJSON (targetPath, defaultOverrides) {
-    return (new Promise((resolve, reject) => {
-      let writeNew = () => {
-        let newRepoJSON = this.generateDefaultJSON(defaultOverrides)
-        CSON.writeFile(targetPath, newRepoJSON, (err) => {
-          if (err != null) return reject(err)
-          resolve(newRepoJSON)
-        })
-      }
-      // If JSON doesn't exist, make a new one.
-      if (CSON.resolve(targetPath) == null) {
-        writeNew()
-      } else {
-        CSON.readFile(targetPath, (err, obj) => {
-          if (err != null) return reject(err)
-          if (obj == null) {
-            writeNew()
-          } else {
-            resolve(obj)
-          }
-        })
-      }
-    }))
-  }
-
-  /**
-   * # Resolve directory.
-   *
-   * Make sure the directory exists.
-   * If directory doesn't exist, it will try to make a new one.
-   * If failed, it return rejected promise
-   *
-   * @param  {String} targetPath Target path of directory
-   * @return {Promise} resolving targetPath
-   */
-  static resolveDirectory (targetPath) {
-    return new Promise(function (resolve, reject) {
-      // check the directory exists
-      fs.stat(targetPath, function (err, stat) {
-        // Reject errors except `ENOENT`
-        if (err != null && err.code !== 'ENOENT') {
-          return reject(err)
-        }
-
-        // Handle no suchfile error only
-        // Make new Folder by given path
-        if (err != null) {
-          return fs.mkdir(targetPath, function (err, stat) {
-            // If failed to make a new directory, reject it.
-            if (err != null) {
-              return reject(err)
-            }
-            resolve(targetPath)
-          })
-        }
-
-        // Check the target is not a directory
-        if (!stat.isDirectory()) {
-          return reject(new Error(targetPath + ' path is not a directory'))
-        }
-        resolve(targetPath)
-      })
-    })
-  }
-
-  /**
-   * Get all repository stats from localStorage
-   * it is stored to `repositories` key.
-   * if the data is corrupted, re-intialize it.
-   *
-   * @return {Array} registered repositories
-   * ```
-   * [{
-   *   key: String,
-   *   name: String,
-   *   path: String // path of repository
-   * }]
-   * ```
-   */
-  static getAllCached () {
-    let data
-    try {
-      data = JSON.parse(localStorage.getItem('repositories'))
-      if (!_.isArray(data)) {
-        throw new Error('Data is corrupted. it must be an array.')
-      }
-    } catch (err) {
-      data = []
-      this.saveAllCached(data)
-    }
-    return data
-  }
-
-  static saveAllCached (allCached) {
-    console.info('cach updated > ', allCached)
-    localStorage.setItem('repositories', JSON.stringify(allCached))
-  }
-
-  static loadAll () {
-    repositories = []
-    return Promise.all(this.getAllCached().map((cached) => {
-      let repo = new this(cached)
-      repositories.push(repo)
-
-      return repo.load()
-    }))
-  }
-
-  static list () {
-    return Promise.resolve(repositories)
-  }
-
-  static find (repoKey) {
-    let repository = _.find(repositories, {cached: {key: repoKey}})
-    return Promise.resolve(repository)
-  }
-
-  static randomColor () {
-    return consts.FOLDER_COLORS[Math.floor(Math.random() * consts.FOLDER_COLORS.length)]
-  }
-}
-
-export default Repository
diff --git a/browser/main/Detail/FolderSelect.js b/browser/main/Detail/FolderSelect.js
index ec38d63f..eff89d10 100644
--- a/browser/main/Detail/FolderSelect.js
+++ b/browser/main/Detail/FolderSelect.js
@@ -128,7 +128,7 @@ class FolderSelect extends React.Component {
   }
 
   nextOption () {
-    let { folders } = this.props
+    let { storages } = this.props
     let { optionIndex } = this.state
 
     optionIndex++
@@ -184,25 +184,41 @@ class FolderSelect extends React.Component {
   }
 
   render () {
-    let { className, folders, value } = this.props
-    let currentFolder = _.find(folders, {key: value})
-    let optionList = folders.map((folder, index) => {
-      return (
-        <div styleName={index === this.state.optionIndex
-            ? 'search-optionList-item--active'
-            : 'search-optionList-item'
-          }
-          key={folder.key}
-          onClick={(e) => this.handleOptionClick(folder.key)(e)}
-        >
-          <i style={{color: folder.color}}
-            className='fa fa-fw fa-cube'
-          />&nbsp;
-          {folder.name}
-        </div>
-      )
+    let { className, storages, value } = this.props
+    let splitted = value.split('-')
+    let storageKey = splitted.shift()
+    let folderKey = splitted.shift()
+    let options = []
+    storages.forEach((storage, index) => {
+      storage.folders.forEach((folder) => {
+        options.push({
+          storage: storage,
+          folder: folder
+        })
+      })
     })
 
+    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+
+    let optionList = options
+      .map((option, index) => {
+        return (
+          <div styleName={index === this.state.optionIndex
+              ? 'search-optionList-item--active'
+              : 'search-optionList-item'
+            }
+            key={option.storage.key + '-' + option.folder.key}
+            onClick={(e) => this.handleOptionClick(option.folder.key)(e)}
+          >
+            <span styleName='search-optionList-item-name'
+              style={{borderColor: option.folder.color}}
+            >
+              {option.storage.name}/{option.folder.name}
+            </span>
+          </div>
+        )
+      })
+
     return (
       <div className={_.isString(className)
           ? 'FolderSelect ' + className
@@ -239,10 +255,11 @@ class FolderSelect extends React.Component {
           </div>
           : <div styleName='idle'>
             <div styleName='idle-label'>
-              <i style={{color: currentFolder.color}}
-                className='fa fa-fw fa-cube'
-              />&nbsp;
-              {currentFolder.name}
+              <span styleName='idle-label-name'
+                style={{borderColor: currentOption.folder.color}}
+              >
+                {currentOption.storage.name}/{currentOption.folder.name}
+              </span>
             </div>
             <i styleName='idle-caret' className='fa fa-fw fa-caret-down'/>
           </div>
diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl
index 2593334b..64ecb35b 100644
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -3,7 +3,7 @@
   border solid 1px transparent
   line-height 34px
   vertical-align middle
-  border-radius 5px
+  border-radius 2px
   transition 0.15s
   user-select none
   &:hover
@@ -27,6 +27,10 @@
   right 20px
   overflow ellipsis
 
+.idle-label-name
+  border-left solid 4px transparent
+  padding 2px 5px
+
 .idle-caret
   absolute right top
   height 34px
@@ -53,11 +57,11 @@
   border $ui-border
   z-index 200
   background-color white
-  border-radius 5px
+  border-radius 2px
 
 .search-optionList-item
   height 34px
-  width 120px
+  width 250px
   box-sizing border-box
   padding 0 5px
   overflow ellipsis
@@ -72,3 +76,6 @@
   &:hover
     background-color $ui-button--active-backgroundColor
     color $ui-button--active-color
+.search-optionList-item-name
+  border-left solid 4px transparent
+  padding 2px 5px
diff --git a/browser/main/Detail/NoteDetail.js b/browser/main/Detail/NoteDetail.js
index 3264203b..25f989ab 100644
--- a/browser/main/Detail/NoteDetail.js
+++ b/browser/main/Detail/NoteDetail.js
@@ -2,19 +2,26 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './NoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
-import queue from 'browser/main/lib/queue'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
-import Repository from 'browser/lib/Repository'
 import Commander from 'browser/main/lib/Commander'
+import dataApi from 'browser/main/lib/dataApi'
+
+const electron = require('electron')
+const { remote } = electron
+const Menu = remote.Menu
+const MenuItem = remote.MenuItem
 
 class NoteDetail extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
-      note: Object.assign({}, props.note),
+      note: Object.assign({
+        title: '',
+        content: ''
+      }, props.note),
       isDispatchQueued: false
     }
     this.dispatchTimer = null
@@ -84,86 +91,74 @@ class NoteDetail extends React.Component {
 
     note.content = this.refs.content.value
     note.tags = this.refs.tags.value
-    note.folder = this.refs.folder.value
+    note.title = this.findTitle(note.content)
+    note.updatedAt = new Date()
 
     this.setState({
-      note,
-      isDispatchQueued: true
+      note
     }, () => {
-      this.queueDispatch()
+      this.save()
     })
   }
 
-  cancelDispatchQueue () {
-    if (this.dispatchTimer != null) {
-      window.clearTimeout(this.dispatchTimer)
-      this.dispatchTimer = null
-    }
-  }
+  save () {
+    let { note, dispatch } = this.props
 
-  queueDispatch () {
-    this.cancelDispatchQueue()
-
-    this.dispatchTimer = window.setTimeout(() => {
-      this.dispatch()
-      this.setState({
-        isDispatchQueued: false
-      })
-    }, 100)
-  }
-
-  dispatch () {
-    let { note } = this.state
-    note = Object.assign({}, note)
-    let repoKey = note._repository.key
-    note.title = this.findTitle(note.content)
-
-    let { dispatch } = this.props
     dispatch({
-      type: 'SAVE_NOTE',
-      repository: repoKey,
-      note: note
+      type: 'UPDATE_NOTE',
+      note: this.state.note
     })
-    queue.save(repoKey, note)
+
+    dataApi
+      .updateNote(note.storage, note.folder, note.key, this.state.note)
+  }
+
+  handleFolderChange (e) {
+
   }
 
   handleStarButtonClick (e) {
     let { note } = this.state
-    let { dispatch } = this.props
 
-    let isStarred = note._repository.starred.some((starredKey) => starredKey === note.key)
+    note.isStarred = !note.isStarred
 
-    if (isStarred) {
-      Repository
-        .find(note._repository.key)
-        .then((repo) => {
-          return repo.unstarNote(note.key)
-        })
+    this.setState({
+      note
+    }, () => {
+      this.save()
+    })
+  }
 
-      dispatch({
-        type: 'UNSTAR_NOTE',
-        repository: note._repository.key,
-        note: note.key
-      })
-    } else {
-      Repository
-        .find(note._repository.key)
-        .then((repo) => {
-          return repo.starNote(note.key)
-        })
+  exportAsFile () {
 
-      dispatch({
-        type: 'STAR_NOTE',
-        repository: note._repository.key,
-        note: note.key
-      })
-    }
+  }
+
+  handleShareButtonClick (e) {
+    let menu = new Menu()
+    menu.append(new MenuItem({
+      label: 'Export as a File',
+      click: (e) => this.handlePreferencesButtonClick(e)
+    }))
+    menu.append(new MenuItem({
+      label: 'Export to Web',
+      disabled: true,
+      click: (e) => this.handlePreferencesButtonClick(e)
+    }))
+    menu.popup(remote.getCurrentWindow())
+  }
+
+  handleContextButtonClick (e) {
+    let menu = new Menu()
+    menu.append(new MenuItem({
+      label: 'Delete',
+      click: (e) => this.handlePreferencesButtonClick(e)
+    }))
+    menu.popup(remote.getCurrentWindow())
   }
 
   render () {
+    let { storages, config } = this.props
     let { note } = this.state
-    let isStarred = note._repository.starred.some((starredKey) => starredKey === note.key)
-    let folders = note._repository.folders
 
     return (
       <div className='NoteDetail'
@@ -174,15 +169,11 @@ class NoteDetail extends React.Component {
           <div styleName='info-left'>
 
             <div styleName='info-left-top'>
-              <StarButton styleName='info-left-top-starButton'
-                onClick={(e) => this.handleStarButtonClick(e)}
-                isActive={isStarred}
-              />
               <FolderSelect styleName='info-left-top-folderSelect'
-                value={this.state.note.folder}
+                value={this.state.note.storage + '-' + this.state.note.folder}
                 ref='folder'
-                folders={folders}
-                onChange={() => this.handleChange()}
+                storages={storages}
+                onChange={(e) => this.handleFolderChange(e)}
               />
             </div>
             <div styleName='info-left-bottom'>
@@ -195,13 +186,18 @@ class NoteDetail extends React.Component {
             </div>
           </div>
           <div styleName='info-right'>
-            <button styleName='info-right-button'>
-              <i className='fa fa-clipboard fa-fw'/>
-            </button>
-            <button styleName='info-right-button'>
+            <StarButton styleName='info-right-button'
+              onClick={(e) => this.handleStarButtonClick(e)}
+              isActive={note.isStarred}
+            />
+            <button styleName='info-right-button'
+              onClick={(e) => this.handleShareButtonClick(e)}
+            >
               <i className='fa fa-share-alt fa-fw'/>
             </button>
-            <button styleName='info-right-button'>
+            <button styleName='info-right-button'
+              onClick={(e) => this.handleContextButtonClick(e)}
+            >
               <i className='fa fa-ellipsis-v'/>
             </button>
           </div>
@@ -210,6 +206,7 @@ class NoteDetail extends React.Component {
           <MarkdownEditor
             ref='content'
             styleName='body-noteEditor'
+            config={config}
             value={this.state.note.content}
             onChange={(e) => this.handleChange(e)}
             ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
diff --git a/browser/main/Detail/NoteDetail.styl b/browser/main/Detail/NoteDetail.styl
index 31ab252f..1b8ebe83 100644
--- a/browser/main/Detail/NoteDetail.styl
+++ b/browser/main/Detail/NoteDetail.styl
@@ -14,22 +14,16 @@ $info-height = 75px
 
 .info-left
   float left
+  padding 0 5px
 
 .info-left-top
   height 40px
   line-height 40px
 
-.info-left-top-starButton
-  display inline-block
-  height 40px
-  width 40px
-  line-height 40px
-  vertical-align top
-
 .info-left-top-folderSelect
   display inline-block
   height 34px
-  width 120px
+  width 200px
   vertical-align middle
 
 .info-left-bottom
diff --git a/browser/main/Detail/StarButton.styl b/browser/main/Detail/StarButton.styl
index 655f9b30..add3a354 100644
--- a/browser/main/Detail/StarButton.styl
+++ b/browser/main/Detail/StarButton.styl
@@ -1,21 +1,11 @@
 .root
   position relative
-  color $ui-inactive-text-color
-  font-size 18px
-  text-align center
-  background-color transparent
-  border none
   padding 0
   transition transform 0.15s
-  &:focus
-    color $ui-active-color
   &:hover
-    color $ui-text-color
     transform rotate(-72deg)
 
 .root--active
   @extend .root
   color $ui-active-color
   transform rotate(-72deg)
-  &:hover
-    color $ui-active-color
diff --git a/browser/main/Detail/TagSelect.js b/browser/main/Detail/TagSelect.js
index 8c872a44..06ba4f31 100644
--- a/browser/main/Detail/TagSelect.js
+++ b/browser/main/Detail/TagSelect.js
@@ -35,7 +35,9 @@ class TagSelect extends React.Component {
   removeLastTag () {
     let { value } = this.props
 
-    value = value.slice()
+    value = _.isArray(value)
+      ? value.slice()
+      : []
     value.pop()
     value = _.uniq(value)
 
@@ -60,7 +62,9 @@ class TagSelect extends React.Component {
       return
     }
 
-    value = value.slice()
+    value = _.isArray(value)
+      ? value.slice()
+      : []
     value.push(newTag)
     value = _.uniq(value)
 
@@ -93,20 +97,22 @@ class TagSelect extends React.Component {
   render () {
     let { value, className } = this.props
 
-    let tagList = value.map((tag) => {
-      return (
-        <span styleName='tag'
-          key={tag}
-        >
-          <button styleName='tag-removeButton'
-            onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
+    let tagList = _.isArray(value)
+      ? value.map((tag) => {
+        return (
+          <span styleName='tag'
+            key={tag}
           >
-            <i className='fa fa-times fa-fw'/>
-          </button>
-          <span styleName='tag-label'>{tag}</span>
-        </span>
-      )
-    })
+            <button styleName='tag-removeButton'
+              onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
+            >
+              <i className='fa fa-times fa-fw'/>
+            </button>
+            <span styleName='tag-label'>{tag}</span>
+          </span>
+        )
+      })
+      : []
 
     return (
       <div className={_.isString(className)
@@ -134,7 +140,7 @@ class TagSelect extends React.Component {
 
 TagSelect.propTypes = {
   className: PropTypes.string,
-  value: PropTypes.arrayOf(PropTypes.string).isRequired,
+  value: PropTypes.arrayOf(PropTypes.string),
   onChange: PropTypes.func
 
 }
diff --git a/browser/main/Detail/index.js b/browser/main/Detail/index.js
index e536b857..d3d28aa2 100644
--- a/browser/main/Detail/index.js
+++ b/browser/main/Detail/index.js
@@ -13,23 +13,25 @@ class Detail extends React.Component {
   }
 
   render () {
-    let { repositories, location } = this.props
+    let { storages, location, notes, config } = this.props
     let note = null
     if (location.query.key != null) {
       let splitted = location.query.key.split('-')
-      let repoKey = splitted.shift()
+      let storageKey = splitted.shift()
+      let folderKey = splitted.shift()
       let noteKey = splitted.shift()
-      let repo = _.find(repositories, {key: repoKey})
-      if (_.isObject(repo) && _.isArray(repo.notes)) {
-        note = _.find(repo.notes, {key: noteKey})
-      }
+
+      note = _.find(notes, {
+        storage: storageKey,
+        folder: folderKey,
+        key: noteKey
+      })
     }
 
     if (note == null) {
       return (
-        <div className='Detail'
+        <div styleName='root'
           style={this.props.style}
-          styleName='root'
           tabIndex='0'
         >
           <div styleName='empty'>
@@ -42,9 +44,10 @@ class Detail extends React.Component {
     return (
       <NoteDetail
         note={note}
+        config={config}
         {..._.pick(this.props, [
           'dispatch',
-          'repositories',
+          'storages',
           'style',
           'ignorePreviewPointerEvents'
         ])}
@@ -55,7 +58,7 @@ class Detail extends React.Component {
 
 Detail.propTypes = {
   dispatch: PropTypes.func,
-  repositories: PropTypes.array,
+  storages: PropTypes.array,
   style: PropTypes.shape({
     left: PropTypes.number
   }),
diff --git a/browser/main/Main.js b/browser/main/Main.js
index 69310426..1de611b3 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -6,7 +6,7 @@ import SideNav from './SideNav'
 import TopBar from './TopBar'
 import NoteList from './NoteList'
 import Detail from './Detail'
-import Repository from 'browser/lib/Repository'
+import dataApi from 'browser/main/lib/dataApi'
 import StatusBar from './StatusBar'
 import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
@@ -27,9 +27,13 @@ class Main extends React.Component {
     let { dispatch } = this.props
 
     // Reload all data
-    Repository.loadAll()
-      .then((allData) => {
-        dispatch({type: 'INIT_ALL', data: allData})
+    dataApi.init()
+      .then((data) => {
+        dispatch({
+          type: 'INIT_ALL',
+          storages: data.storages,
+          notes: data.notes
+        })
       })
   }
 
@@ -83,12 +87,17 @@ class Main extends React.Component {
         onMouseUp={(e) => this.handleMouseUp(e)}
       >
         <SideNav
-          {..._.pick(this.props, ['dispatch', 'repositories', 'config', 'location'])}
+          {..._.pick(this.props, [
+            'dispatch',
+            'storages',
+            'config',
+            'location'
+          ])}
         />
         <TopBar
           {..._.pick(this.props, [
             'dispatch',
-            'repositories',
+            'storages',
             'config',
             'params',
             'location'
@@ -100,7 +109,8 @@ class Main extends React.Component {
           <NoteList style={{width: this.state.listWidth}}
             {..._.pick(this.props, [
               'dispatch',
-              'repositories',
+              'storages',
+              'notes',
               'config',
               'params',
               'location'
@@ -117,7 +127,8 @@ class Main extends React.Component {
             style={{left: this.state.listWidth + 1}}
             {..._.pick(this.props, [
               'dispatch',
-              'repositories',
+              'storages',
+              'notes',
               'config',
               'params',
               'location'
diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index 3cad990c..46023735 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -39,6 +39,10 @@
   float left
   overflow ellipsis
 
+.item-info-left-folder
+  border-left 4px solid transparent
+  padding 2px 5px
+
 .item-info-right
   float right
 
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index ece93ebf..3582dd71 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -26,30 +26,32 @@ class NoteList extends React.Component {
       router.replace({
         pathname: location.pathname,
         query: {
-          key: `${this.notes[0]._repository.key}-${this.notes[0].key}`
+          key: this.notes[0].uniqueKey
         }
       })
       return
     }
 
     // Auto scroll
-    let splitted = location.query.key.split('-')
-    let repoKey = splitted[0]
-    let noteKey = splitted[1]
-    let targetIndex = _.findIndex(this.notes, (note) => {
-      return repoKey === note._repository.key && noteKey === note.key
-    })
-    if (targetIndex > -1) {
-      let list = this.refs.root
-      let item = list.childNodes[targetIndex]
+    if (_.isString(location.query.key)) {
+      let splitted = location.query.key.split('/')
+      let repoKey = splitted[0]
+      let noteKey = splitted[1]
+      let targetIndex = _.findIndex(this.notes, (note) => {
+        return repoKey === note.storage && noteKey === note.key
+      })
+      if (targetIndex > -1) {
+        let list = this.refs.root
+        let item = list.childNodes[targetIndex]
 
-      let overflowBelow = item.offsetTop + item.clientHeight - list.clientHeight - list.scrollTop > 0
-      if (overflowBelow) {
-        list.scrollTop = item.offsetTop + item.clientHeight - list.clientHeight
-      }
-      let overflowAbove = list.scrollTop > item.offsetTop
-      if (overflowAbove) {
-        list.scrollTop = item.offsetTop
+        let overflowBelow = item.offsetTop + item.clientHeight - list.clientHeight - list.scrollTop > 0
+        if (overflowBelow) {
+          list.scrollTop = item.offsetTop + item.clientHeight - list.clientHeight
+        }
+        let overflowAbove = list.scrollTop > item.offsetTop
+        if (overflowAbove) {
+          list.scrollTop = item.offsetTop
+        }
       }
     }
   }
@@ -68,7 +70,7 @@ class NoteList extends React.Component {
     let repoKey = splitted[0]
     let noteKey = splitted[1]
     let targetIndex = _.findIndex(this.notes, (note) => {
-      return repoKey === note._repository.key && noteKey === note.key
+      return repoKey === note.storage && noteKey === note.key
     })
 
     if (targetIndex === 0) {
@@ -80,7 +82,7 @@ class NoteList extends React.Component {
     router.push({
       pathname: location.pathname,
       query: {
-        key: `${this.notes[targetIndex]._repository.key}-${this.notes[targetIndex].key}`
+        key: this.notes[targetIndex].uniqueKey
       }
     })
   }
@@ -108,7 +110,7 @@ class NoteList extends React.Component {
     router.push({
       pathname: location.pathname,
       query: {
-        key: `${this.notes[targetIndex]._repository.key}-${this.notes[targetIndex].key}`
+        key: this.notes[targetIndex].uniqueKey
       }
     })
   }
@@ -192,7 +194,7 @@ class NoteList extends React.Component {
       .filter((note) => note.folder === folderKey)
   }
 
-  handleNoteClick (key) {
+  handleNoteClick (uniqueKey) {
     return (e) => {
       let { router } = this.context
       let { location } = this.props
@@ -200,42 +202,50 @@ class NoteList extends React.Component {
       router.push({
         pathname: location.pathname,
         query: {
-          key: key
+          key: uniqueKey
         }
       })
     }
   }
 
   render () {
-    let { location } = this.props
-    let notes = this.notes = this.getNotes().sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
+    let { location, storages, notes } = this.props
+    this.notes = notes
+    // this.notes = this.getNotes()
 
     let noteElements = notes
+      .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
       .map((note) => {
-        let folder = _.find(note._repository.folders, {key: note.folder})
-        let tagElements = note.tags.map((tag) => {
-          return (
-            <span styleName='item-tagList-item'
-              key={tag}>
-              {tag}
-            </span>
-          )
-        })
-        let key = `${note._repository.key}-${note.key}`
-        let isActive = location.query.key === key
+        let storage = _.find(storages, {key: note.storage})
+        let folder = _.find(storage.folders, {key: note.folder})
+        let tagElements = _.isArray(note.tags)
+          ? note.tags.map((tag) => {
+            return (
+              <span styleName='item-tagList-item'
+                key={tag}>
+                {tag}
+              </span>
+            )
+          })
+          : []
+        let isActive = location.query.key === note.uniqueKey
         return (
           <div styleName={isActive
               ? 'item--active'
               : 'item'
             }
-            key={key}
-            onClick={(e) => this.handleNoteClick(key)(e)}
+            key={note.uniqueKey}
+            onClick={(e) => this.handleNoteClick(note.uniqueKey)(e)}
           >
             <div styleName='item-border'/>
             <div styleName='item-info'>
 
               <div styleName='item-info-left'>
-                <i className='fa fa-cube fa-fw' style={{color: folder.color}}/> {folder.name}
+                <span styleName='item-info-left-folder'
+                  style={{borderColor: folder.color}}
+                >
+                  {storage.name}/{folder.name}
+                </span>
               </div>
 
               <div styleName='item-info-right'>
diff --git a/browser/main/SideNav/FolderItem.js b/browser/main/SideNav/FolderItem.js
deleted file mode 100644
index 937c0397..00000000
--- a/browser/main/SideNav/FolderItem.js
+++ /dev/null
@@ -1,244 +0,0 @@
-import React, { PropTypes } from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './FolderItem.styl'
-import store from 'browser/main/store'
-import Repository from 'browser/lib/Repository'
-import consts from 'browser/lib/consts'
-
-const electron = require('electron')
-const { remote } = electron
-const { Menu, MenuItem } = remote
-
-class FolderItem extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      isEditing: false,
-      isUpdating: false,
-      name: props.folder.name
-    }
-  }
-
-  handleColorButtonClick (color) {
-    return (e) => {
-      let { repository, folder } = this.props
-      this.setState({
-        isUpdating: true
-      }, () => {
-        Repository.find(repository.key)
-          .then((repository) => {
-            console.log(repository)
-            return repository.updateFolder(folder.key, {color: color})
-          })
-          .then((folder) => {
-            store.dispatch({
-              type: 'EDIT_FOLDER',
-              key: repository.key,
-              folder: folder
-            })
-            this.setState({
-              isEditing: false,
-              isUpdating: false
-            })
-          })
-          .catch((err) => {
-            console.error(err)
-            this.setState({
-              isEditing: false,
-              isUpdating: false
-            })
-          })
-      })
-    }
-  }
-
-  handleContextButtonClick (e) {
-    e.stopPropagation()
-    if (this.state.isUpdating) {
-      return
-    }
-
-    var menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'New Note'
-    }))
-    menu.append(new MenuItem({ type: 'separator' }))
-    menu.append(new MenuItem({
-      label: 'Rename',
-      click: () => this.handleRenameButtonClick(e)
-    }))
-    var colorMenu = new Menu()
-    consts.FOLDER_COLORS.forEach((color, index) => {
-      colorMenu.append(new MenuItem({
-        label: consts.FOLDER_COLOR_NAMES[index],
-        click: (e) => this.handleColorButtonClick(color)(e)
-      }))
-    })
-    menu.append(new MenuItem({
-      label: 'Recolor',
-      submenu: colorMenu
-    }))
-    menu.append(new MenuItem({ type: 'separator' }))
-    menu.append(new MenuItem({
-      label: 'Delete',
-      click: () => this.handleDeleteButtonClick(e)
-    }))
-
-    menu.popup(remote.getCurrentWindow())
-  }
-
-  handleRenameButtonClick (e) {
-    this.setState({
-      isEditing: true,
-      name: this.props.folder.name
-    }, () => {
-      this.refs.nameInput.focus()
-      this.refs.nameInput.select()
-    })
-  }
-
-  handleDeleteButtonClick (e) {
-    let { repository, folder } = this.props
-
-    this.setState({
-      isUpdating: true
-    }, () => {
-      Repository.find(repository.key)
-        .then((repository) => {
-          console.log(repository)
-          return repository.removeFolder(folder.key)
-        })
-        .then(() => {
-          store.dispatch({
-            type: 'REMOVE_FOLDER',
-            repository: repository.key,
-            folder: folder.key
-          })
-        })
-        .catch((err) => {
-          console.error(err)
-          this.setState({
-            isUpdating: false
-          })
-        })
-    })
-  }
-
-  handleClick (e) {
-    let { folder, repository } = this.props
-    let { router } = this.context
-
-    router.push('/repositories/' + repository.key + '/folders/' + folder.key)
-  }
-
-  renderIdle () {
-    let { folder, repository, isFolded } = this.props
-    let { router } = this.context
-
-    let isActive = router.isActive('/repositories/' + repository.key + '/folders/' + folder.key)
-
-    return (
-      <div styleName={isFolded
-          ? isActive ? 'root--folded--active' : 'root--folded'
-          : isActive ? 'root--active' : 'root'
-        }
-        onClick={(e) => this.handleClick(e)}
-        onContextMenu={(e) => this.handleContextButtonClick(e)}
-      >
-        <div styleName='label'>
-          <i styleName='label-icon'
-            className='fa fa-cube'
-            style={{color: folder.color}}
-          />
-          <span styleName='label-name'>{folder.name}</span>
-        </div>
-        <div styleName='control'>
-          <button styleName='control-button'
-            onClick={(e) => this.handleContextButtonClick(e)}
-          >
-            <i className='fa fa-ellipsis-v'/>
-          </button>
-        </div>
-      </div>
-    )
-  }
-
-  handleNameInputChange (e) {
-    this.setState({
-      name: e.target.value
-    })
-  }
-
-  handleNameInputBlur (e) {
-    let { folder, repository } = this.props
-
-    this.setState({
-      isUpdating: true
-    }, () => {
-      Repository.find(repository.key)
-        .then((repository) => {
-          console.log(repository)
-          return repository.updateFolder(folder.key, {name: this.state.name})
-        })
-        .then((folder) => {
-          store.dispatch({
-            type: 'EDIT_FOLDER',
-            key: repository.key,
-            folder: folder
-          })
-          this.setState({
-            isEditing: false,
-            isUpdating: false
-          })
-        })
-        .catch((err) => {
-          console.error(err)
-          this.setState({
-            isEditing: false,
-            isUpdating: false
-          })
-        })
-    })
-  }
-
-  renderEdit () {
-    let { isFolded } = this.props
-    return (
-      <div styleName={isFolded
-          ? 'root--edit--folded'
-          : 'root--edit'
-        }
-      >
-        <input styleName='nameInput'
-          ref='nameInput'
-          value={this.state.name}
-          onChange={(e) => this.handleNameInputChange(e)}
-          onBlur={(e) => this.handleNameInputBlur(e)}
-          disabled={this.state.isUpdating}
-        />
-      </div>
-    )
-  }
-
-  render () {
-    return this.state.isEditing ? this.renderEdit() : this.renderIdle()
-  }
-}
-
-FolderItem.contextTypes = {
-  router: PropTypes.object
-}
-
-FolderItem.propTypes = {
-  folder: PropTypes.shape({
-    name: PropTypes.string,
-    color: PropTypes.string
-  }),
-  repository: PropTypes.shape({
-    key: PropTypes.string
-  }),
-  isFolded: PropTypes.bool
-}
-
-export default CSSModules(FolderItem, styles)
diff --git a/browser/main/SideNav/FolderItem.styl b/browser/main/SideNav/FolderItem.styl
deleted file mode 100644
index d2d16d50..00000000
--- a/browser/main/SideNav/FolderItem.styl
+++ /dev/null
@@ -1,115 +0,0 @@
-.root
-  height 33px
-  width 100%
-  position relative
-  cursor pointer
-  navButtonColor()
-
-.root--active
-  @extend .root
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
-  .control-button
-    opacity 1
-    color white
-    &:hover
-      background-color alpha(white, 30%)
-    &:active, &:hover:active
-      background-color alpha(white, 15%)
-
-.label
-  position absolute
-  left 0
-  top 0
-  bottom 0
-  right 48px
-  padding-left 20px
-  line-height 33px
-  overflow-x hidden
-
-.label-name
-  margin-left 5px
-
-.control
-  position absolute
-  top 0
-  bottom 0
-  right 5px
-  width 24px
-
-.control-button
-  opacity 0
-  navButtonColor()
-  width 24px
-  height 24px
-  margin-top 4.5px
-  border-radius 5px
-  transition opacity 0.15s
-
-.root--edit
-  @extend .root
-
-.nameInput
-  absolute top bottom
-  left 10px
-  right 10px
-  height 33px
-  padding 0 10px
-  border-radius 5px
-  border $ui-border
-  outline none
-  background-color white
-  z-index 1
-  &:focus
-    border-color $ui-input--focus-borderColor
-  &:disabled
-    background-color $ui-input--disabled-backgroundColor
-
-.root--folded
-  @extend .root
-  width 44px - 1
-  &:hover .label-name
-    width 100px
-  .label
-    padding-left 0
-    text-align center
-    right 0
-  .label-icon
-    width 44px - 1
-  .label-name
-    position fixed
-    height 34px
-    left 44px
-    width 0
-    box-sizing border-box
-    margin-left 0
-    overflow ellipsis
-    background-color $ui-tooltip-backgroundColor
-    z-index 10
-    color white
-    line-height 34px
-    border-top-right-radius 5px
-    border-bottom-right-radius 5px
-    transition width 0.15s
-    pointer-events none
-  .control
-    display none
-
-.root--folded--active
-  @extend .root--folded
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
-
-.root--edit--folded
-  @extend .root--edit
-  .nameInput
-    position fixed
-    top inherit
-    bottom inherit
-    width 100px
diff --git a/browser/main/SideNav/RepositorySection.js b/browser/main/SideNav/RepositorySection.js
deleted file mode 100644
index a643d9e8..00000000
--- a/browser/main/SideNav/RepositorySection.js
+++ /dev/null
@@ -1,219 +0,0 @@
-import React, { PropTypes } from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './RepositorySection.styl'
-import Repository from 'browser/lib/Repository'
-import FolderItem from './FolderItem'
-
-const electron = require('electron')
-const { remote } = electron
-const { Menu, MenuItem } = remote
-
-class RepositorySection extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      isOpen: true,
-      isCreatingFolder: false,
-      isSaving: false,
-      newFolder: {
-        name: ''
-      }
-    }
-  }
-
-  getRepository () {
-    let { repository } = this.props
-    return Repository.find(repository.key)
-  }
-
-  handleUnlinkButtonClick () {
-    let { dispatch, repository } = this.props
-
-    this.getRepository()
-      .then((repositoryInstance) => {
-        return repositoryInstance.unmount()
-      })
-      .then(() => {
-        dispatch({
-          type: 'REMOVE_REPOSITORY',
-          key: repository.key
-        })
-      })
-  }
-
-  handleToggleButtonClick (e) {
-    e.stopPropagation()
-    this.setState({
-      isOpen: !this.state.isOpen
-    })
-  }
-
-  handleHeaderClick (e) {
-    let { repository } = this.props
-    let { router } = this.context
-    router.push('/repositories/' + repository.key)
-  }
-
-  handleContextButtonClick (e) {
-    e.stopPropagation()
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'New Folder',
-      click: () => this.handleNewFolderButtonClick()
-    }))
-    menu.append(new MenuItem({ type: 'separator' }))
-    menu.append(new MenuItem({
-      label: 'Unmount',
-      click: () => this.handleUnlinkButtonClick()
-    }))
-
-    menu.popup(remote.getCurrentWindow())
-  }
-
-  handleNewFolderButtonClick (e) {
-    this.setState({
-      isCreatingFolder: true,
-      newFolder: {
-        name: 'New Folder'
-      }
-    }, () => {
-      this.refs.nameInput.select()
-      this.refs.nameInput.focus()
-    })
-  }
-
-  handleNewFolderFormChange (e) {
-    let newFolder = this.state.newFolder
-    newFolder.name = this.refs.nameInput.value
-
-    this.setState({
-      newFolder
-    })
-  }
-
-  handleNameInputBlur (e) {
-    let { dispatch, repository } = this.props
-
-    this.setState({
-      isSaving: true
-    }, () => {
-      this.getRepository()
-        .then((repositoryInstance) => {
-          return repositoryInstance.addFolder({
-            name: this.state.newFolder.name
-          })
-        })
-        .then((folder) => {
-          dispatch({
-            type: 'ADD_FOLDER',
-            key: repository.key,
-            folder: folder
-          })
-
-          this.setState({
-            isCreatingFolder: false,
-            isSaving: false
-          })
-        })
-        .catch((err) => {
-          console.error(err)
-
-          this.setState({
-            isCreatingFolder: false,
-            isSaving: false
-          })
-        })
-    })
-  }
-
-  render () {
-    let { repository, isFolded } = this.props
-    let { router } = this.context
-
-    let isActive = router.isActive('/repositories/' + repository.key, true)
-
-    let folderElements = repository.folders.map((folder) => {
-      return (
-        <FolderItem
-          key={folder.key}
-          folder={folder}
-          repository={repository}
-          isFolded={isFolded}
-        />
-      )
-    })
-
-    let toggleButtonIconClassName = this.state.isOpen
-      ? 'fa fa-minus'
-      : 'fa fa-plus'
-
-    return (
-      <div
-        className='RepositorySection'
-        styleName={isFolded ? 'root-folded' : 'root'}
-      >
-        <div styleName={isActive ? 'header--active' : 'header'}
-          onClick={(e) => this.handleHeaderClick(e)}
-          onContextMenu={(e) => this.handleContextButtonClick(e)}
-        >
-          <div styleName='header-name'>
-            <i className='fa fa-archive fa-fw'/>
-            <span styleName='header-name-label'>{repository.name}</span>
-          </div>
-
-          <div styleName='header-control'>
-            <button styleName='header-control-button'
-              onClick={(e) => this.handleContextButtonClick(e)}
-            >
-              <i className='fa fa-ellipsis-v fa-fw'/>
-            </button>
-            <button styleName='header-control-button--show'
-              onClick={(e) => this.handleToggleButtonClick(e)}
-            >
-              <i className={toggleButtonIconClassName}/>
-            </button>
-          </div>
-        </div>
-        {this.state.isOpen && <div>
-          {folderElements}
-
-          {this.state.isCreatingFolder
-            ? <div styleName='newFolderForm'>
-              <input styleName='newFolderForm-nameInput'
-                ref='nameInput'
-                disabled={this.state.isSaving}
-                value={this.state.newFolder.name}
-                onChange={(e) => this.handleNewFolderFormChange(e)}
-                onBlur={(e) => this.handleNameInputBlur(e)}
-              />
-            </div>
-            : <button styleName='newFolderButton'
-              onClick={(e) => this.handleNewFolderButtonClick(e)}
-            >
-              <i styleName='newFolderButton-icon' className='fa fa-plus fa-fw'/>
-              <span styleName='newFolderButton-label'>New Folder</span>
-            </button>
-          }
-        </div>}
-      </div>
-    )
-  }
-}
-
-RepositorySection.contextTypes = {
-  router: PropTypes.object
-}
-
-RepositorySection.propTypes = {
-  repository: PropTypes.shape({
-    name: PropTypes.string,
-    folders: PropTypes.arrayOf(PropTypes.shape({
-      name: PropTypes.string
-    }))
-  }),
-  dispatch: PropTypes.func,
-  isFolded: PropTypes.bool
-}
-
-export default CSSModules(RepositorySection, styles)
diff --git a/browser/main/SideNav/RepositorySection.styl b/browser/main/SideNav/RepositorySection.styl
deleted file mode 100644
index ac6b6135..00000000
--- a/browser/main/SideNav/RepositorySection.styl
+++ /dev/null
@@ -1,184 +0,0 @@
-.root
-  user-select none
-  color $nav-text-color
-
-.header
-  position relative
-  width 100%
-  height 33px
-  cursor pointer
-  text-align left
-  font-size 14px
-  color $ui-inactive-text-color
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-  &:hover .header-control-button
-    opacity 1
-  &:active
-    background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
-    .header-control-button, .header-control-button--show
-      color white
-
-.header--active, .header--active:hover, .header--active:active
-  @extend .header
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-  .header-control-button,
-  .header-control-button--show
-    color white
-    opacity 1
-    &:hover
-      background-color alpha(white, 30%)
-    &:active
-      background-color alpha(white, 15%)
-
-.header-name
-  position absolute
-  left 0
-  top 0
-  bottom 0
-  right 72px
-  padding-left 10px
-  line-height 33px
-
-.header-name-label
-  margin-left 5px
-
-.header-control
-  position absolute
-  top 0
-  bottom 0
-  right 5px
-  width 48px
-
-.header-control-button
-  border none
-  background-color transparent
-  width 24px
-  height 24px
-  padding 0
-  margin-top 4.5px
-  border-radius 5px
-  opacity 0
-  color $ui-inactive-text-color
-  transition color background-color 0.15s
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-
-.header-control-button--show
-  @extend .header-control-button
-  opacity 1
-
-.newFolderForm
-  width 100%
-  padding 0 15px
-  height 33px
-
-.newFolderForm-nameInput
-  width 100%
-  height 33px
-  padding 0 10px
-  border-radius 5px
-  border $ui-border
-  outline none
-  &:focus
-    border-color $ui-input--focus-borderColor
-  &:disabled
-    background-color $ui-input--disabled-backgroundColor
-
-.newFolderButton
-  navButtonColor()
-  height 34px
-  width 100%
-  border none
-  padding 0 0 0 20px
-  text-align left
-  line-height 34px
-
-.newFolderButton-label
-  margin-left 0
-
-.root-folded
-  @extend .root
-  width 44px - 1
-  .header, .header--active
-    width 44px - 1
-    text-align center
-    overflow hidden
-    &:hover
-      .header-name-label
-        width 134px
-        padding-left 34px
-      .header-control
-        width 35px
-        padding-right 5px
-  .header-name
-    width 44px - 1
-    padding-left 0
-  .header-name-label
-    position fixed
-    display inline-block
-    height 34px
-    left 44px - 1
-    width 0
-    box-sizing border-box
-    margin-left 0
-    overflow ellipsis
-    background-color $ui-tooltip-backgroundColor
-    z-index 10
-    color white
-    line-height 34px
-    border-top-right-radius 5px
-    border-bottom-right-radius 5px
-    transition width 0.15s
-    pointer-events none
-  .header-control
-    position fixed
-    width 0
-    height 33px
-    top inherit
-    bottom inherit
-    z-index 11
-    left 44px - 1
-    box-sizing border-box
-    overflow hidden
-  .header-control-button
-    display none
-  .header-control-button--show
-    float right
-    background-color $ui-tooltip-button-backgroundColor
-    &:hover
-      background-color $ui-tooltip-button--hover-backgroundColor
-  .newFolderButton
-    width 44px - 1
-    padding 0
-    &:hover .newFolderButton-label
-      width 100px
-  .newFolderButton-icon
-    text-align center
-    width 44px - 1
-  .newFolderButton-label
-    position fixed
-    display inline-block
-    height 34px
-    left 44px
-    width 0
-    box-sizing border-box
-    margin-left 0
-    overflow ellipsis
-    background-color $ui-tooltip-backgroundColor
-    z-index 10
-    color white
-    line-height 34px
-    border-top-right-radius 5px
-    border-bottom-right-radius 5px
-    transition width 0.15s
-    pointer-events none
-    font-size 14px
-    text-align center
-  .newFolderForm-nameInput
-    position fixed
-    width 100px
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 5d772855..6d7e8417 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -44,13 +44,13 @@
 .menu-button-label
   margin-left 5px
 
-.repositoryList
+.storageList
   absolute left right
   bottom 44px
   top 178px
   overflow-y auto
 
-.repositoryList-empty
+.storageList-empty
   padding 0 10px
   margin-top 15px
   line-height 24px
@@ -68,10 +68,10 @@
   line-height 32px
   padding 0
 
-.root-folded
+.root--folded
   @extend .root
   width 44px
-  .repositoryList-empty
+  .storageList-empty
     white-space nowrap
     transform rotate(90deg)
   .top-menu
diff --git a/browser/main/SideNav/StorageItem.js b/browser/main/SideNav/StorageItem.js
new file mode 100644
index 00000000..8bed86cd
--- /dev/null
+++ b/browser/main/SideNav/StorageItem.js
@@ -0,0 +1,95 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './StorageItem.styl'
+import { hashHistory } from 'react-router'
+
+class StorageItem extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isOpen: false
+    }
+  }
+
+  handleToggleButtonClick (e) {
+    this.setState({
+      isOpen: !this.state.isOpen
+    })
+  }
+
+  handleHeaderInfoClick (e) {
+    let { storage } = this.props
+    hashHistory.push('/storages/' + storage.key)
+  }
+
+  handleFolderButtonClick (folderKey) {
+    return (e) => {
+      let { storage } = this.props
+      hashHistory.push('/storages/' + storage.key + '/folders/' + folderKey)
+    }
+  }
+
+  render () {
+    let { storage, location } = this.props
+    let folderList = storage.folders.map((folder) => {
+      let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key))
+      return <button styleName={isActive
+          ? 'folderList-item--active'
+          : 'folderList-item'
+        }
+        key={folder.key}
+        onClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
+      >
+        <span styleName='folderList-item-name'
+          style={{borderColor: folder.color}}
+        >
+          {folder.name}
+        </span>
+      </button>
+    })
+
+    let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '$'))
+
+    return (
+      <div styleName='root'
+        key={storage.key}
+      >
+        <div styleName={isActive
+              ? 'header--active'
+              : 'header'
+            }>
+          <button styleName='header-toggleButton'
+            onMouseDown={(e) => this.handleToggleButtonClick(e)}
+          >
+            <i className={this.state.isOpen
+                ? 'fa fa-caret-down'
+                : 'fa fa-caret-right'
+              }
+            />
+          </button>
+          <button styleName='header-info'
+            onClick={(e) => this.handleHeaderInfoClick(e)}
+          >
+            <span styleName='header-info-name'>
+              {storage.name}
+            </span>
+            <span styleName='header-info-path'>
+              ({storage.path})
+            </span>
+          </button>
+        </div>
+        {this.state.isOpen &&
+          <div styleName='folderList' >
+            {folderList}
+          </div>
+        }
+      </div>
+    )
+  }
+}
+
+StorageItem.propTypes = {
+}
+
+export default CSSModules(StorageItem, styles)
diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl
new file mode 100644
index 00000000..7901ca98
--- /dev/null
+++ b/browser/main/SideNav/StorageItem.styl
@@ -0,0 +1,89 @@
+.root
+  width 100%
+  user-select none
+.header
+  position relative
+  height 30px
+  width 100%
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+  &:active
+    .header-toggleButton
+      color white
+.header--active
+  @extend .header
+  .header-info
+    color $ui-button--active-color
+    background-color $ui-button--active-backgroundColor
+  .header-toggleButton
+    color white
+    &:active
+      color white
+
+.header-toggleButton
+  position absolute
+  left 0
+  width 25px
+  height 30px
+  padding 0
+  border none
+  color $ui-inactive-text-color
+  background-color transparent
+  &:hover
+    color $ui-text-color
+  &:active
+    color $ui-active-color
+
+.header-info
+  display block
+  width 100%
+  height 30px
+  padding-left 25px
+  padding-right 10px
+  line-height 30px
+  cursor pointer
+  font-size 14px
+  border none
+  overflow ellipsis
+  text-align left
+  background-color transparent
+  color $ui-inactive-text-color
+  &:active
+    color $ui-button--active-color
+    background-color $ui-button--active-backgroundColor
+
+.header-info-path
+  font-size 10px
+  margin 0 5px
+
+.folderList-item
+  display block
+  width 100%
+  height 3 0px
+  background-color transparent
+  color $ui-inactive-text-color
+  padding 0
+  margin 2px 0
+  text-align left
+  border none
+  font-size 14px
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+  &:active
+    color $ui-button--active-color
+    background-color $ui-button--active-backgroundColor
+.folderList-item--active
+  @extend .folderList-item
+  color $ui-button--active-color
+  background-color $ui-button--active-backgroundColor
+  &:hover
+    color $ui-button--active-color
+    background-color $ui-button--active-backgroundColor
+.folderList-item-name
+  display block
+  padding 0 10px
+  height 30px
+  line-height 30px
+  border-width 0 0 0 6px
+  border-style solid
+  border-color transparent
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 05411f16..d12ab9c9 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -2,43 +2,22 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SideNav.styl'
 import { openModal } from 'browser/main/lib/modal'
-import Preferences from '../modals/Preferences'
-import RepositorySection from './RepositorySection'
-import NewRepositoryModal from '../modals/NewRepositoryModal'
+import PreferencesModal from '../modals/PreferencesModal'
 import ConfigManager from 'browser/main/lib/ConfigManager'
+import StorageItem from './StorageItem'
 
 const electron = require('electron')
 const { remote } = electron
-const Menu = remote.Menu
-const MenuItem = remote.MenuItem
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
   handleMenuButtonClick (e) {
-    var menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Preferences',
-      click: (e) => this.handlePreferencesButtonClick(e)
-    }))
-    menu.append(new MenuItem({ type: 'separator' }))
-    menu.append(new MenuItem({
-      label: 'Mount Repository',
-      click: (e) => this.handleNewRepositoryButtonClick(e)
-    }))
-    menu.popup(remote.getCurrentWindow())
-  }
-
-  handleNewRepositoryButtonClick (e) {
-    openModal(NewRepositoryModal)
-  }
-
-  handlePreferencesButtonClick (e) {
-    openModal(Preferences)
+    openModal(PreferencesModal)
   }
 
   handleHomeButtonClick (e) {
     let { router } = this.context
-    router.push('/repositories')
+    router.push('/home')
   }
 
   handleStarredButtonClick (e) {
@@ -57,25 +36,22 @@ class SideNav extends React.Component {
   }
 
   render () {
-    let { repositories, dispatch, location, config } = this.props
+    let { storages, location, config } = this.props
 
     let isFolded = config.isSideNavFolded
     let isHomeActive = location.pathname.match(/^\/home$/)
     let isStarredActive = location.pathname.match(/^\/starred$/)
-
-    let repositorieElements = repositories
-      .map((repo) => {
-        return <RepositorySection
-          key={repo.key}
-          repository={repo}
-          dispatch={dispatch}
-          isFolded={isFolded}
-        />
-      })
+    let storageList = storages.map((storage) => {
+      return <StorageItem
+        key={storage.key}
+        storage={storage}
+        location={location}
+      />
+    })
 
     return (
       <div className='SideNav'
-        styleName={isFolded ? 'root-folded' : 'root'}
+        styleName={isFolded ? 'root--folded' : 'root'}
         tabIndex='1'
       >
         <div styleName='top'>
@@ -102,9 +78,9 @@ class SideNav extends React.Component {
           </button>
         </div>
 
-        <div styleName='repositoryList'>
-          {repositories.length > 0 ? repositorieElements : (
-            <div styleName='repositoryList-empty'>No repository mount.</div>
+        <div styleName='storageList'>
+          {storageList.length > 0 ? storageList : (
+            <div styleName='storageList-empty'>No storage mount.</div>
           )}
         </div>
 
@@ -127,7 +103,7 @@ SideNav.contextTypes = {
 
 SideNav.propTypes = {
   dispatch: PropTypes.func,
-  repositories: PropTypes.array,
+  storages: PropTypes.array,
   config: PropTypes.shape({
     isSideNavFolded: PropTypes.bool
   }),
diff --git a/browser/main/TopBar/index.js b/browser/main/TopBar/index.js
index 76d71988..a74d7157 100644
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -2,9 +2,9 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TopBar.styl'
 import activityRecord from 'browser/lib/activityRecord'
-import Repository from 'browser/lib/Repository'
 import _ from 'lodash'
 import Commander from 'browser/main/lib/Commander'
+import dataApi from 'browser/main/lib/dataApi'
 
 const OSX = window.process.platform === 'darwin'
 
@@ -33,65 +33,31 @@ class TopBar extends React.Component {
   }
 
   handleNewPostButtonClick (e) {
-    activityRecord.emit('ARTICLE_CREATE')
-
-    let { params, repositories } = this.props
-
-    let folderKey = params.folderKey
-    let repositoryKey = params.repositoryKey
-    if (folderKey == null) {
-      let repository = _.find(repositories, {key: repositoryKey})
-      if (repository == null) {
-        repository = repositories[0]
-      }
-      if (repository != null) {
-        repositoryKey = repository.key
-        folderKey = repository.folders[0] != null && repository.folders[0].key
-      }
-      if (folderKey == null) throw new Error('no folder exists')
-    }
-
-    let newNote = {
-      title: 'New Note',
-      content: '',
-      folder: folderKey,
-      tags: [],
-      mode: 'markdown'
-    }
-
-    Repository
-      .find(repositoryKey)
-      .then((repo) => {
-        return repo.addNote(newNote)
+    let { storages, params, dispatch } = this.props
+    let storage = _.find(storages, {key: params.storageKey})
+    if (storage == null) storage = storages[0]
+    if (storage == null) throw new Error('No storage to create a note')
+    let folder = _.find(storage.folders, {key: params.folderKey})
+    if (folder == null) folder = storage.folders[0]
+    if (folder == null) throw new Error('No folder to craete a note')
+    // activityRecord.emit('ARTICLE_CREATE')
+    console.log(storage, folder)
+    dataApi
+      .createNote(storage.key, folder.key, {
+        title: '',
+        content: ''
       })
       .then((note) => {
-        let { dispatch, location } = this.props
-        let { router } = this.context
         dispatch({
-          type: 'ADD_NOTE',
-          repository: repositoryKey,
+          type: 'CREATE_NOTE',
           note: note
         })
-
-        router.push({
-          pathname: location.pathname,
-          query: {
-            key: `${note._repository.key}-${note.key}`
-          }
-        })
-        Commander.fire('note-detail:focus')
-      })
-      .catch((err) => {
-        console.error(err)
       })
   }
 
   handleTutorialButtonClick (e) {
   }
 
-  handleLinksButton (e) {
-  }
-
   render () {
     let { config } = this.props
     return (
@@ -124,7 +90,7 @@ class TopBar extends React.Component {
               onClick={(e) => this.handleNewPostButtonClick(e)}>
               <i className='fa fa-plus'/>
               <span styleName='left-control-newPostButton-tooltip'>
-                New Post {OSX ? '⌘' : '^'} + n
+                New Note {OSX ? '⌘' : '^'} + n
               </span>
             </button>
           </div>
@@ -137,11 +103,7 @@ class TopBar extends React.Component {
           >
             ?<span styleName='left-control-newPostButton-tooltip'>How to use</span>
           </button>
-          <button styleName='right-linksButton'
-            onClick={(e) => this.handleLinksButton(e)}
-          >
-            <img src='../resources/app.png' width='44' height='44'/>
-          </button>
+
         </div>
       </div>
     )
diff --git a/browser/main/global.styl b/browser/main/global.styl
new file mode 100644
index 00000000..cfeb0495
--- /dev/null
+++ b/browser/main/global.styl
@@ -0,0 +1,73 @@
+global-reset()
+
+DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif
+
+html, body
+  width 100%
+  height 100%
+  overflow hidden
+
+body
+  font-family DEFAULT_FONTS
+  color textColor
+  font-size fontSize
+  font-weight 400
+
+button, input, select, textarea
+  font-family DEFAULT_FONTS
+
+div, span, a, button, input, textarea
+  box-sizing border-box
+
+a
+  color $brand-color
+  &:hover
+    color lighten($brand-color, 5%)
+  &:visited
+    color $brand-color
+
+hr
+  border-top none
+  border-bottom solid 1px $border-color
+  margin 15px 0
+
+button
+  font-weight 400
+  cursor pointer
+  font-size 12px
+  &:focus, &.focus
+    outline none
+
+.noSelect
+  noSelect()
+
+.text-center
+  text-align center
+
+.form-group
+  margin-bottom 15px
+  &>label
+    display block
+    margin-bottom 5px
+
+textarea.block-input
+  resize vertical
+  height 125px
+  border-radius 5px
+  padding 5px 10px
+
+#content
+  fullsize()
+
+modalZIndex= 1000
+modalBackColor = transparentify(white, 65%)
+
+.ModalBase
+  fixed top left bottom right
+  z-index modalZIndex
+  &.hide
+    display none
+  .modalBack
+    absolute top left bottom right
+    background-color modalBackColor
+    z-index modalZIndex + 1
diff --git a/browser/main/index.js b/browser/main/index.js
index fedef081..9e0abe3f 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -3,7 +3,7 @@ import Main from './Main'
 import store from './store'
 import React from 'react'
 import ReactDOM from 'react-dom'
-require('!!style!css!stylus?sourceMap!../styles/main/index.styl')
+require('!!style!css!stylus?sourceMap!./global.styl')
 import activityRecord from 'browser/lib/activityRecord'
 import fetchConfig from '../lib/fetchConfig'
 import { Router, Route, IndexRoute, IndexRedirect, hashHistory } from 'react-router'
@@ -84,11 +84,10 @@ ReactDOM.render((
         <IndexRedirect to='/home'/>
         <Route path='home'/>
         <Route path='starred'/>
-        <Route path='repositories'>
+        <Route path='storages'>
           <IndexRedirect to='/home'/>
-          <Route path=':repositoryKey'>
+          <Route path=':storageKey'>
             <IndexRoute/>
-            <Route path='settings'/>
             <Route path='folders/:folderKey'/>
           </Route>
         </Route>
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index e715da61..dbc8c59d 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -1,9 +1,33 @@
 import _ from 'lodash'
 
+const OSX = global.process.platform === 'darwin'
+
 const defaultConfig = {
   zoom: 1,
   isSideNavFolded: false,
-  listWidth: 250
+  listWidth: 250,
+  hotkey: {
+    toggleFinder: OSX ? 'Cmd + Alt + S' : 'Super + Alt + S',
+    toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E'
+  },
+  ui: {
+    theme: 'default',
+    disableDirectWrite: false
+  },
+  editor: {
+    theme: 'xcode',
+    fontSize: '14',
+    fontFamily: 'Monaco, Consolas',
+    indentType: 'space',
+    indentSize: '4',
+    switchPreview: 'RIGHTCLICK'
+  },
+  preview: {
+    fontSize: '14',
+    fontFamily: 'Lato',
+    codeBlockTheme: 'xcode',
+    lineNumber: true
+  }
 }
 
 function validate (config) {
@@ -16,6 +40,7 @@ function validate (config) {
 }
 
 function _save (config) {
+  console.log(config)
   window.localStorage.setItem('config', JSON.stringify(config))
 }
 
@@ -23,7 +48,7 @@ function get () {
   let config = window.localStorage.getItem('config')
 
   try {
-    config = JSON.parse(config)
+    config = Object.assign({}, defaultConfig, JSON.parse(config))
     if (!validate(config)) throw new Error('INVALID CONFIG')
   } catch (err) {
     console.warn('Boostnote resets the malformed configuration.')
diff --git a/browser/main/lib/dataApi.js b/browser/main/lib/dataApi.js
new file mode 100644
index 00000000..2a19a257
--- /dev/null
+++ b/browser/main/lib/dataApi.js
@@ -0,0 +1,380 @@
+const keygen = require('browser/lib/keygen')
+const CSON = require('season')
+const path = require('path')
+const _ = require('lodash')
+const sander = require('sander')
+
+let storages = []
+let notes = []
+
+let queuedTasks = []
+
+function queueSaveFolder (storageKey, folderKey) {
+  let storage = _.find(storages, {key: storageKey})
+  if (storage == null) throw new Error('Failed to queue: Storage doesn\'t exist.')
+
+  let targetTasks = queuedTasks.filter((task) => task.storage === storageKey && task.folder === folderKey)
+  targetTasks.forEach((task) => {
+    clearTimeout(task.timer)
+  })
+  queuedTasks = queuedTasks.filter((task) => task.storage !== storageKey || task.folder !== folderKey)
+
+  let newTimer = setTimeout(() => {
+    let folderNotes = notes.filter((note) => note.storage === storageKey && note.folder === folderKey)
+    sander
+      .writeFile(path.join(storage.cache.path, folderKey, 'data.json'), JSON.stringify({
+        notes: folderNotes
+      }))
+  }, 1500)
+
+  queuedTasks.push({
+    storage: storageKey,
+    folder: folderKey,
+    timer: newTimer
+  })
+}
+
+class Storage {
+  constructor (cache) {
+    this.key = cache.key
+    this.cache = cache
+  }
+
+  loadJSONData () {
+    return new Promise((resolve, reject) => {
+      try {
+        let data = CSON.readFileSync(path.join(this.cache.path, 'boostnote.json'))
+        this.data = data
+        resolve(this)
+      } catch (err) {
+        reject(err)
+      }
+    })
+  }
+
+  toJSON () {
+    return Object.assign({}, this.cache, this.data)
+  }
+
+  initStorage () {
+    return this.loadJSONData()
+      .catch((err) => {
+        console.error(err.code)
+        if (err.code === 'ENOENT') {
+          let initialStorage = {
+            folders: []
+          }
+          return sander.writeFile(path.join(this.cache.path, 'boostnote.json'), JSON.stringify(initialStorage))
+        } else throw err
+      })
+      .then(() => this.loadJSONData())
+  }
+
+  saveData () {
+    return sander
+      .writeFile(path.join(this.cache.path, 'boostnote.json'), JSON.stringify(this.data))
+      .then(() => this)
+  }
+
+  saveCache () {
+    _saveCaches()
+  }
+
+  static forge (cache) {
+    let instance = new this(cache)
+    return instance
+  }
+}
+
+class Note {
+  constructor (note) {
+    this.storage = note.storage
+    this.folder = note.folder
+    this.key = note.key
+    this.uniqueKey = `${note.storage}-${note.folder}-${note.key}`
+    this.data = note
+  }
+
+  toJSON () {
+    return Object.assign({}, this.data, {
+      uniqueKey: this.uniqueKey
+    })
+  }
+
+  save () {
+    let storage = _.find(storages, {key: this.storage})
+    if (storage == null) return Promise.reject(new Error('Storage doesn\'t exist.'))
+    let folder = _.find(storage.data.folders, {key: this.folder})
+    if (folder == null) return Promise.reject(new Error('Storage doesn\'t exist.'))
+
+    // FS MUST BE MANIPULATED BY ASYNC METHOD
+    queueSaveFolder(storage.key, folder.key)
+    return Promise.resolve(this)
+  }
+
+  static forge (note) {
+    let instance = new this(note)
+
+    return Promise.resolve(instance)
+  }
+}
+
+function init () {
+  let fetchStorages = function () {
+    let caches
+    try {
+      caches = JSON.parse(localStorage.getItem('storages'))
+    } catch (e) {
+      console.error(e)
+      caches = []
+      localStorage.getItem('storages', JSON.stringify(caches))
+    }
+
+    return caches.map((cache) => {
+      return Storage
+        .forge(cache)
+        .loadJSONData()
+        .catch((err) => {
+          console.error(err)
+          console.error('Failed to load a storage JSON File: %s', cache)
+          return null
+        })
+    })
+  }
+
+  let fetchNotes = function (storages) {
+    let notes = []
+    let modifiedStorages = []
+    storages
+      .forEach((storage) => {
+        storage.data.folders.forEach((folder) => {
+          let dataPath = path.join(storage.cache.path, folder.key, 'data.json')
+          let data
+          try {
+            data = CSON.readFileSync(dataPath)
+          } catch (e) {
+            // Remove folder if fetching failed.
+            console.error('Failed to load data: %s', dataPath)
+            storage.data.folders = storage.data.folders.filter((_folder) => _folder.key !== folder.key)
+            if (modifiedStorages.some((modified) => modified.key === storage.key)) modifiedStorages.push(storage)
+            return
+          }
+          data.notes.forEach((note) => {
+            note.storage = storage.key
+            note.folder = folder.key
+            notes.push(Note.forge(note))
+          })
+        })
+      }, [])
+    return Promise
+      .all(modifiedStorages.map((storage) => storage.saveData()))
+      .then(() => Promise.all(notes))
+  }
+
+  return Promise.all(fetchStorages())
+    .then((_storages) => {
+      storages = _storages.filter((storage) => {
+        if (!_.isObject(storage)) return false
+        return true
+      })
+      _saveCaches()
+
+      return storages
+    })
+    .then(fetchNotes)
+    .then((_notes) => {
+      notes = _notes
+      return {
+        storages: storages.map((storage) => storage.toJSON()),
+        notes: notes.map((note) => note.toJSON())
+      }
+    })
+}
+
+function _saveCaches () {
+  localStorage.setItem('storages', JSON.stringify(storages.map((storage) => storage.cache)))
+}
+
+function addStorage (input) {
+  if (!_.isString(input.path) || !input.path.match(/^\//)) {
+    return Promise.reject(new Error('Path must be absolute.'))
+  }
+
+  let key = keygen()
+  while (storages.some((storage) => storage.key === key)) {
+    key = keygen()
+  }
+
+  return Storage
+    .forge({
+      name: input.name,
+      key: key,
+      type: input.type,
+      path: input.path
+    })
+    .initStorage()
+    .then((storage) => {
+      let _notes = []
+      let isFolderRemoved = false
+      storage.data.folders.forEach((folder) => {
+        let dataPath = path.join(storage.cache.path, folder.key, 'data.json')
+        let data
+        try {
+          data = CSON.readFileSync(dataPath)
+        } catch (e) {
+          // Remove folder if fetching failed.
+          console.error('Failed to load data: %s', dataPath)
+          storage.data.folders = storage.data.folders.filter((_folder) => _folder.key !== folder.key)
+          isFolderRemoved = true
+          return true
+        }
+        data.notes.forEach((note) => {
+          note.storage = storage.key
+          note.folder = folder.key
+          _notes.push(Note.forge(note))
+        })
+
+        notes = notes.slice().concat(_notes)
+      })
+
+      return Promise.all(notes)
+        .then((notes) => {
+          let data = {
+            storage: storage,
+            notes: notes
+          }
+          return isFolderRemoved
+            ? storage.saveData().then(() => data)
+            : data
+        })
+    })
+    .then((data) => {
+      storages = storages.filter((storage) => storage.key !== data.storage.key)
+      storages.push(data.storage)
+      _saveCaches()
+      return {
+        storage: data.storage.toJSON(),
+        notes: data.notes.map((note) => note.toJSON())
+      }
+    })
+}
+
+function removeStorage (key) {
+  storages = storages.filter((storage) => storage.key !== key)
+  _saveCaches()
+  notes = notes.filter((note) => note.storage !== key)
+  return Promise.resolve(true)
+}
+
+function createFolder (key, input) {
+  let storage = _.find(storages, {key: key})
+  if (storage == null) throw new Error('Storage doesn\'t exist.')
+
+  let folderKey = keygen()
+  while (storage.data.folders.some((folder) => folder.key === folderKey)) {
+    folderKey = keygen()
+  }
+
+  let newFolder = {
+    key: folderKey,
+    name: input.name,
+    color: input.color
+  }
+
+  const defaultData = {notes: []}
+  // FS MUST BE MANIPULATED BY ASYNC METHOD
+  return sander
+    .writeFile(path.join(storage.cache.path, folderKey, 'data.json'), JSON.stringify(defaultData))
+    .then(() => {
+      storage.data.folders.push(newFolder)
+      return storage
+        .saveData()
+        .then((storage) => storage.toJSON())
+    })
+}
+
+function updateFolder (storageKey, folderKey, input) {
+  let storage = _.find(storages, {key: storageKey})
+  if (storage == null) throw new Error('Storage doesn\'t exist.')
+  let folder = _.find(storage.data.folders, {key: folderKey})
+  folder.color = input.color
+  folder.name = input.name
+
+  return storage
+    .saveData()
+    .then((storage) => storage.toJSON())
+}
+
+function removeFolder (storageKey, folderKey) {
+  let storage = _.find(storages, {key: storageKey})
+  if (storage == null) throw new Error('Storage doesn\'t exist.')
+  storage.data.folders = storage.data.folders.filter((folder) => folder.key !== folderKey)
+  notes = notes.filter((note) => note.storage !== storageKey || note.folder !== folderKey)
+
+  // FS MUST BE MANIPULATED BY ASYNC METHOD
+  return sander
+    .rimraf(path.join(storage.cache.path, folderKey))
+    .catch((err) => {
+      if (err.code === 'ENOENT') return true
+      else throw err
+    })
+    .then(() => storage.saveData())
+    .then((storage) => storage.toJSON())
+}
+
+function createNote (storageKey, folderKey, input) {
+  let key = keygen()
+  while (notes.some((note) => note.storage === storageKey && note.folder === folderKey && note.key === key)) {
+    key = keygen()
+  }
+
+  let newNote = new Note(Object.assign({
+    type: 'MARKDOWN_NOTE',
+    tags: [],
+    title: '',
+    content: ''
+  }, input, {
+    storage: storageKey,
+    folder: folderKey,
+    key: key,
+    isStarred: false,
+    createdAt: new Date(),
+    updatedAt: new Date()
+  }))
+  notes.push(newNote)
+
+  return newNote
+    .save()
+    .then(() => newNote.toJSON())
+}
+
+function updateNote (storageKey, folderKey, noteKey, input) {
+  let note = _.find(notes, {
+    key: noteKey,
+    storage: storageKey,
+    folder: folderKey
+  })
+  note.data.title = input.title
+  note.data.tags = input.tags
+  note.data.content = input.content
+  note.data.updatedAt = input.updatedAt
+
+  return note.save()
+    .then(() => note.toJSON())
+}
+
+function removeNote (storageKey, folderKey, noteKey, input) {
+
+}
+
+export default {
+  init,
+  addStorage,
+  removeStorage,
+  createFolder,
+  updateFolder,
+  removeFolder,
+  createNote,
+  updateNote,
+  removeNote
+}
diff --git a/browser/main/lib/queue.js b/browser/main/lib/queue.js
index 8e70ae0c..e4adcbfb 100644
--- a/browser/main/lib/queue.js
+++ b/browser/main/lib/queue.js
@@ -1,18 +1,18 @@
-import Repository from 'browser/lib/Repository'
+import Storage from 'browser/lib/Storage'
 import _ from 'lodash'
 
 let tasks = []
 
-function _save (task, repoKey, note) {
+function _save (task, storageKey, note) {
   note = Object.assign({}, note)
-  delete note._repository
+  delete note._storage
 
   task.status = 'process'
 
-  Repository
-    .find(repoKey)
-    .then((repo) => {
-      return repo.updateNote(note.key, note)
+  Storage
+    .find(storageKey)
+    .then((storage) => {
+      return storage.updateNote(note.key, note)
     })
     .then((note) => {
       tasks.splice(tasks.indexOf(task), 1)
@@ -25,8 +25,8 @@ function _save (task, repoKey, note) {
     })
 }
 
-const queueSaving = function (repoKey, note) {
-  let key = `${repoKey}-${note.key}`
+const queueSaving = function (storageKey, note) {
+  let key = `${storageKey}-${note.key}`
 
   let taskIndex = _.findIndex(tasks, {
     type: 'SAVE_NOTE',
@@ -47,7 +47,7 @@ const queueSaving = function (repoKey, note) {
   }
 
   task.timer = window.setTimeout(() => {
-    _save(task, repoKey, note)
+    _save(task, storageKey, note)
   }, 1500)
   tasks.push(task)
 }
diff --git a/browser/main/modals/Preferences/AppSettingTab.js b/browser/main/modals/Preferences/AppSettingTab.js
deleted file mode 100644
index 51ddef2e..00000000
--- a/browser/main/modals/Preferences/AppSettingTab.js
+++ /dev/null
@@ -1,242 +0,0 @@
-import React, { PropTypes } from 'react'
-import fetchConfig from 'browser/lib/fetchConfig'
-import hljsTheme from 'browser/lib/hljsThemes'
-
-const electron = require('electron')
-const ipc = electron.ipcRenderer
-const remote = electron.remote
-const ace = window.ace
-
-const OSX = global.process.platform === 'darwin'
-
-export default class AppSettingTab extends React.Component {
-  constructor (props) {
-    super(props)
-    let keymap = Object.assign({}, remote.getGlobal('keymap'))
-    let config = Object.assign({}, fetchConfig())
-    let userName = props.user != null ? props.user.name : null
-
-    this.state = {
-      user: {
-        name: userName,
-        alert: null
-      },
-      userAlert: null,
-      keymap: keymap,
-      keymapAlert: null,
-      config: config,
-      configAlert: null
-    }
-  }
-
-  componentDidMount () {
-    this.handleSettingDone = () => {
-      this.setState({keymapAlert: {
-        type: 'success',
-        message: 'Successfully done!'
-      }})
-    }
-    this.handleSettingError = (err) => {
-      this.setState({keymapAlert: {
-        type: 'error',
-        message: err.message != null ? err.message : 'Error occurs!'
-      }})
-    }
-    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)
-  }
-
-  submitHotKey () {
-    ipc.send('hotkeyUpdated', this.state.keymap)
-  }
-
-  submitConfig () {
-    ipc.send('configUpdated', this.state.config)
-  }
-
-  handleSaveButtonClick (e) {
-    this.submitHotKey()
-  }
-
-  handleConfigSaveButtonClick (e) {
-    this.submitConfig()
-  }
-
-  handleKeyDown (e) {
-    if (e.keyCode === 13) {
-      this.submitHotKey()
-    }
-  }
-
-  handleConfigKeyDown (e) {
-    if (e.keyCode === 13) {
-      this.submitConfig()
-    }
-  }
-
-  handleLineNumberingClick (e) {
-    let config = this.state.config
-
-    config['preview-line-number'] = e.target.checked
-    this.setState({
-      config
-    })
-  }
-
-  handleDisableDirectWriteClick (e) {
-    let config = this.state.config
-    config['disable-direct-write'] = e.target.checked
-    this.setState({
-      config
-    })
-  }
-
-  render () {
-    let keymapAlert = this.state.keymapAlert
-    let keymapAlertElement = keymapAlert != null
-      ? <p className={`alert ${keymapAlert.type}`}>
-        {keymapAlert.message}
-      </p>
-      : null
-    let aceThemeList = ace.require('ace/ext/themelist')
-    let hljsThemeList = hljsTheme()
-
-    return (
-      <div className='AppSettingTab content'>
-        <div className='section'>
-          <div className='sectionTitle'>Editor</div>
-          <div className='sectionInput'>
-            <label>Editor Font Size</label>
-            <input valueLink={this.linkState('config.editor-font-size')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
-          </div>
-          <div className='sectionInput'>
-            <label>Editor Font Family</label>
-            <input valueLink={this.linkState('config.editor-font-family')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
-          </div>
-          <div className='sectionMultiSelect'>
-            <label>Editor Indent Style</label>
-            <div className='sectionMultiSelect-input'>
-              type
-              <select valueLink={this.linkState('config.editor-indent-type')}>
-                <option value='space'>Space</option>
-                <option value='tab'>Tab</option>
-              </select>
-              size
-              <select valueLink={this.linkState('config.editor-indent-size')}>
-                <option value='2'>2</option>
-                <option value='4'>4</option>
-                <option value='8'>8</option>
-              </select>
-            </div>
-          </div>
-          <div className='sectionTitle'>Preview</div>
-          <div className='sectionInput'>
-            <label>Preview Font Size</label>
-            <input valueLink={this.linkState('config.preview-font-size')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
-          </div>
-          <div className='sectionInput'>
-            <label>Preview Font Family</label>
-            <input valueLink={this.linkState('config.preview-font-family')} onKeyDown={(e) => this.handleConfigKeyDown(e)} type='text'/>
-          </div>
-          <div className='sectionSelect'>
-            <label>Switching Preview</label>
-            <select valueLink={this.linkState('config.switch-preview')}>
-              <option value='blur'>When Editor Blurred</option>
-              <option value='rightclick'>When Right Clicking</option>
-            </select>
-          </div>
-          <div className='sectionCheck'>
-            <label><input onChange={e => this.handleLineNumberingClick(e)} checked={this.state.config['preview-line-number']} type='checkbox'/>Code block line numbering</label>
-          </div>
-          {
-            global.process.platform === 'win32'
-            ? (
-              <div className='sectionCheck'>
-                <label><input onChange={e => this.handleDisableDirectWriteClick(e)} checked={this.state.config['disable-direct-write']} disabled={OSX} type='checkbox'/>Disable Direct Write<span className='sectionCheck-warn'>It will be applied after restarting</span></label>
-              </div>
-            )
-            : null
-          }
-          <div className='sectionTitle'>Theme</div>
-          <div className='sectionSelect'>
-            <label>UI Theme</label>
-            <select valueLink={this.linkState('config.theme-ui')}>
-              <option value='light'>Light</option>
-              <option value='dark'>Dark</option>
-            </select>
-          </div>
-          <div className='sectionSelect'>
-            <label>Code block Theme</label>
-            <select valueLink={this.linkState('config.theme-code')}>
-              {
-                hljsThemeList.map((theme) => {
-                  return (<option value={theme.name} key={theme.name}>{theme.caption}</option>)
-                })
-              }
-            </select>
-          </div>
-          <div className='sectionSelect'>
-            <label>Editor Theme</label>
-            <select valueLink={this.linkState('config.theme-syntax')}>
-              {
-                aceThemeList.themes.map((theme) => {
-                  return (<option value={theme.name} key={theme.name}>{theme.caption}</option>)
-                })
-              }
-            </select>
-          </div>
-          <div className='sectionConfirm'>
-            <button onClick={(e) => this.handleConfigSaveButtonClick(e)}>Save</button>
-          </div>
-        </div>
-        <div className='section'>
-          <div className='sectionTitle'>Hotkey</div>
-          <div className='sectionInput'>
-            <label>Toggle Main</label>
-            <input onKeyDown={(e) => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleMain')} type='text'/>
-          </div>
-          <div className='sectionInput'>
-            <label>Toggle Finder(popup)</label>
-            <input onKeyDown={(e) => this.handleKeyDown(e)} valueLink={this.linkState('keymap.toggleFinder')} type='text'/>
-          </div>
-          <div className='sectionConfirm'>
-            <button onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
-            {keymapAlertElement}
-          </div>
-          <div className='description'>
-            <ul>
-              <li><code>0</code> to <code>9</code></li>
-              <li><code>A</code> to <code>Z</code></li>
-              <li><code>F1</code> to <code>F24</code></li>
-              <li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
-              <li><code>Plus</code></li>
-              <li><code>Space</code></li>
-              <li><code>Backspace</code></li>
-              <li><code>Delete</code></li>
-              <li><code>Insert</code></li>
-              <li><code>Return</code> (or <code>Enter</code> as alias)</li>
-              <li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
-              <li><code>Home</code> and <code>End</code></li>
-              <li><code>PageUp</code> and <code>PageDown</code></li>
-              <li><code>Escape</code> (or <code>Esc</code> for short)</li>
-              <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
-              <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-AppSettingTab.propTypes = {
-  user: PropTypes.shape({
-    name: PropTypes.string
-  }),
-  dispatch: PropTypes.func
-}
diff --git a/browser/main/modals/Preferences/ContactTab.js b/browser/main/modals/Preferences/ContactTab.js
deleted file mode 100644
index edc1dd9a..00000000
--- a/browser/main/modals/Preferences/ContactTab.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-
-export default class ContactTab extends React.Component {
-  componentDidMount () {
-    let titleInput = ReactDOM.findDOMNode(this.refs.title)
-    if (titleInput != null) titleInput.focus()
-  }
-
-  render () {
-    return (
-      <div className='ContactTab content'>
-        <div className='title'>Contact</div>
-        <p>
-          - Issues: <a href='https://github.com/BoostIO/Boostnote/issues'>https://github.com/BoostIO/Boostnote/issues</a>
-        </p>
-      </div>
-    )
-  }
-}
diff --git a/browser/main/modals/Preferences/index.js b/browser/main/modals/Preferences/index.js
deleted file mode 100644
index 77222077..00000000
--- a/browser/main/modals/Preferences/index.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { PropTypes } from 'react'
-import { connect } from 'react-redux'
-import AppSettingTab from './AppSettingTab'
-import ContactTab from './ContactTab'
-import { closeModal } from 'browser/main/lib/modal'
-
-const APP = 'APP'
-const CONTACT = 'CONTACT'
-
-class Preferences extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      currentTab: APP
-    }
-  }
-
-  switchTeam (teamId) {
-    this.setState({currentTeamId: teamId})
-  }
-
-  handleNavButtonClick (tab) {
-    return (e) => {
-      this.setState({currentTab: tab})
-    }
-  }
-
-  render () {
-    let content = this.renderContent()
-
-    let tabs = [
-      {target: APP, label: 'Preferences'},
-      {target: CONTACT, label: 'Contact'}
-    ]
-
-    let navButtons = tabs.map((tab) => (
-      <button key={tab.target} onClick={(e) => this.handleNavButtonClick(tab.target)(e)} className={this.state.currentTab === tab.target ? 'active' : ''}>{tab.label}</button>
-    ))
-
-    return (
-      <div className='Preferences modal'>
-        <div className='header'>
-          <div className='title'>Setting</div>
-          <button onClick={(e) => closeModal()} className='closeBtn'>Done</button>
-        </div>
-
-        <div className='nav'>
-          {navButtons}
-        </div>
-
-        {content}
-      </div>
-    )
-  }
-
-  renderContent () {
-    let { user, dispatch } = this.props
-
-    switch (this.state.currentTab) {
-      case CONTACT:
-        return (
-          <ContactTab/>
-        )
-      case APP:
-      default:
-        return (
-          <AppSettingTab
-            user={user}
-            dispatch={dispatch}
-          />
-        )
-    }
-  }
-}
-
-Preferences.propTypes = {
-  user: PropTypes.shape({
-    name: PropTypes.string
-  }),
-  dispatch: PropTypes.func
-}
-
-export default connect((x) => x)(Preferences)
diff --git a/browser/main/modals/PreferencesModal/ConfigTab.js b/browser/main/modals/PreferencesModal/ConfigTab.js
new file mode 100644
index 00000000..4ff94320
--- /dev/null
+++ b/browser/main/modals/PreferencesModal/ConfigTab.js
@@ -0,0 +1,416 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ConfigTab.styl'
+import fetchConfig from 'browser/lib/fetchConfig'
+import hljsTheme from 'browser/lib/hljsThemes'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import store from 'browser/main/store'
+
+const electron = require('electron')
+const ipc = electron.ipcRenderer
+const remote = electron.remote
+const ace = window.ace
+
+const OSX = global.process.platform === 'darwin'
+
+class ConfigTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isHotkeyHintOpen: false,
+      config: props.config
+    }
+  }
+
+  componentDidMount () {
+    this.handleSettingDone = () => {
+      this.setState({keymapAlert: {
+        type: 'success',
+        message: 'Successfully done!'
+      }})
+    }
+    this.handleSettingError = (err) => {
+      this.setState({keymapAlert: {
+        type: 'error',
+        message: err.message != null ? err.message : 'Error occurs!'
+      }})
+    }
+    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)
+  }
+
+  submitHotKey () {
+    ipc.send('hotkeyUpdated', this.state.keymap)
+  }
+
+  submitConfig () {
+    ipc.send('configUpdated', this.state.config)
+  }
+
+  handleSaveButtonClick (e) {
+    this.submitHotKey()
+  }
+
+  handleConfigSaveButtonClick (e) {
+    this.submitConfig()
+  }
+
+  handleKeyDown (e) {
+    if (e.keyCode === 13) {
+      this.submitHotKey()
+    }
+  }
+
+  handleConfigKeyDown (e) {
+    if (e.keyCode === 13) {
+      this.submitConfig()
+    }
+  }
+
+  handleLineNumberingClick (e) {
+    let config = this.state.config
+
+    config['preview-line-number'] = e.target.checked
+    this.setState({
+      config
+    })
+  }
+
+  handleDisableDirectWriteClick (e) {
+    let config = this.state.config
+    config['disable-direct-write'] = e.target.checked
+    this.setState({
+      config
+    })
+  }
+
+  handleHintToggleButtonClick (e) {
+    this.setState({
+      isHotkeyHintOpen: !this.state.isHotkeyHintOpen
+    })
+  }
+
+  handleHotkeyChange (e) {
+    let { config } = this.state
+    config.hotkey = {
+      toggleFinder: this.refs.toggleFinder.value,
+      toggleMain: this.refs.toggleMain.value
+    }
+    this.setState({
+      config
+    })
+  }
+
+  handleUIChange (e) {
+    let { config } = this.state
+
+    config.ui = {
+      theme: this.refs.uiTheme.value,
+      disableDirectWrite: this.refs.uiD2w != null
+        ? this.refs.uiD2w.checked
+        : false
+    }
+    config.editor = {
+      theme: this.refs.editorTheme.value,
+      fontSize: this.refs.editorFontSize.value,
+      fontFamily: this.refs.editorFontFamily.value,
+      indentType: this.refs.editorIndentType.value,
+      indentSize: this.refs.editorIndentSize.value,
+      switchPreview: this.refs.editorSwitchPreview.value
+    }
+    config.preview = {
+      fontSize: this.refs.previewFontSize.value,
+      fontFamily: this.refs.previewFontFamily.value,
+      codeBlockTheme: this.refs.previewCodeBlockTheme.value,
+      lineNumber: this.refs.previewLineNumber.checked
+    }
+
+    this.setState({
+      config
+    })
+  }
+
+  handleSaveUIClick (e) {
+    let newConfig = {
+      ui: this.state.config.ui,
+      editor: this.state.config.editor,
+      preview: this.state.config.preview
+    }
+
+    ConfigManager.set(newConfig)
+
+    store.dispatch({
+      type: 'SET_UI',
+      config: newConfig
+    })
+  }
+
+  render () {
+    let keymapAlert = this.state.keymapAlert
+    let keymapAlertElement = keymapAlert != null
+      ? <p className={`alert ${keymapAlert.type}`}>
+        {keymapAlert.message}
+      </p>
+      : null
+    let aceThemeList = ace.require('ace/ext/themelist')
+    let hljsThemeList = hljsTheme()
+    let { config } = this.state
+
+    return (
+      <div styleName='root'>
+        <div styleName='group'>
+          <div styleName='group-header'>Hotkey</div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>Toggle Main</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleHotkeyChange(e)}
+                ref='toggleMain'
+                value={config.hotkey.toggleMain}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>Toggle Finder(popup)</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleHotkeyChange(e)}
+                ref='toggleFinder'
+                value={config.hotkey.toggleFinder}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-control'>
+            <button styleName='group-control-leftButton'
+              onClick={(e) => this.handleHintToggleButtonClick(e)}
+            >
+              {this.state.isHotkeyHintOpen
+                ? 'Hide Hint'
+                : 'Show Hint'
+              }
+            </button>
+            <button styleName='group-control-rightButton'
+              onClick={(e) => this.handleSaveButtonClick(e)}>Save Hotkey
+            </button>
+            {keymapAlertElement}
+          </div>
+          {this.state.isHotkeyHintOpen &&
+            <div styleName='group-hint'>
+              <p>Available Keys</p>
+              <ul>
+                <li><code>0</code> to <code>9</code></li>
+                <li><code>A</code> to <code>Z</code></li>
+                <li><code>F1</code> to <code>F24</code></li>
+                <li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
+                <li><code>Plus</code></li>
+                <li><code>Space</code></li>
+                <li><code>Backspace</code></li>
+                <li><code>Delete</code></li>
+                <li><code>Insert</code></li>
+                <li><code>Return</code> (or <code>Enter</code> as alias)</li>
+                <li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
+                <li><code>Home</code> and <code>End</code></li>
+                <li><code>PageUp</code> and <code>PageDown</code></li>
+                <li><code>Escape</code> (or <code>Esc</code> for short)</li>
+                <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
+                <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
+              </ul>
+            </div>
+          }
+        </div>
+
+        <div styleName='group'>
+          <div styleName='group-header'>UI</div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>Theme</div>
+            <div styleName='group-section-control'>
+              <select value={config.ui.theme}
+                onChange={(e) => this.handleUIChange(e)}
+                ref='uiTheme'
+                disabled
+              >
+                <option value='default'>Light</option>
+                <option value='dark'>Dark</option>
+              </select>
+            </div>
+          </div>
+          {
+            global.process.platform === 'win32'
+            ? <div styleName='group-checkBoxSection'>
+              <label>
+                <input onChange={(e) => this.handleUIChange(e)}
+                  checked={this.state.config.ui.disableDirectWrite}
+                  refs='uiD2w'
+                  disabled={OSX}
+                  type='checkbox'
+                />
+                Disable Direct Write(It will be applied after restarting)
+              </label>
+            </div>
+            : null
+          }
+          <div styleName='group-header2'>Editor</div>
+
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              Editor Theme
+            </div>
+            <div styleName='group-section-control'>
+              <select value={config.editor.theme}
+                ref='editorTheme'
+                onChange={(e) => this.handleUIChange(e)}
+              >
+                {
+                  aceThemeList.themes.map((theme) => {
+                    return (<option value={theme.name} key={theme.name}>{theme.caption}</option>)
+                  })
+                }
+              </select>
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              Editor Font Size
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                ref='editorFontSize'
+                value={config.editor.fontSize}
+                onChange={(e) => this.handleUIChange(e)}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              Editor Font Family
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                ref='editorFontFamily'
+                value={config.editor.fontFamily}
+                onChange={(e) => this.handleUIChange(e)}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              Editor Indent Style
+            </div>
+            <div styleName='group-section-control'>
+              <select value={config.editor.indentSize}
+                ref='editorIndentSize'
+                onChange={(e) => this.handleUIChange(e)}
+              >
+                <option value='1'>1</option>
+                <option value='2'>2</option>
+                <option value='4'>4</option>
+                <option value='8'>8</option>
+              </select>&nbsp;
+              <select value={config.editor.indentType}
+                ref='editorIndentType'
+                onChange={(e) => this.handleUIChange(e)}
+              >
+                <option value='space'>Spaces</option>
+                <option value='tab'>Tabs</option>
+              </select>
+            </div>
+          </div>
+
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              Switching Preview
+            </div>
+            <div styleName='group-section-control'>
+              <select value={config.editor.switchPreview}
+                ref='editorSwitchPreview'
+                onChange={(e) => this.handleUIChange(e)}
+              >
+                <option value='BLUR'>When Editor Blurred</option>
+                <option value='RIGHTCLICK'>When Right Clicking</option>
+              </select>
+            </div>
+          </div>
+          <div styleName='group-header2'>Preview</div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              Preview Font Size
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                value={config.preview.fontSize}
+                ref='previewFontSize'
+                onChange={(e) => this.handleUIChange(e)}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              Preview Font Family
+            </div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                ref='previewFontFamily'
+                value={config.preview.fontFamily}
+                onChange={(e) => this.handleUIChange(e)}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>Code block Theme</div>
+            <div styleName='group-section-control'>
+              <select value={config.preview.codeBlockTheme}
+                ref='previewCodeBlockTheme'
+                onChange={(e) => this.handleUIChange(e)}
+              >
+                {
+                  hljsThemeList.map((theme) => {
+                    return (<option value={theme.name} key={theme.name}>{theme.caption}</option>)
+                  })
+                }
+              </select>
+            </div>
+          </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.lineNumber}
+                ref='previewLineNumber'
+                type='checkbox'
+              />&nbsp;
+              Code block line numbering
+            </label>
+          </div>
+
+          <div className='group-control'>
+            <button styleName='group-control-rightButton'
+              onClick={(e) => this.handleSaveUIClick(e)}
+            >
+              Save UI Config
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+ConfigTab.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string
+  }),
+  dispatch: PropTypes.func
+}
+
+export default CSSModules(ConfigTab, styles)
diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl
new file mode 100644
index 00000000..b847ba8a
--- /dev/null
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -0,0 +1,80 @@
+.root
+  padding 15px
+  color $ui-text-color
+.group
+  margin-bottom 45px
+.group-header
+  font-size 24px
+  color $ui-text-color
+  padding 5px
+  border-bottom $default-border
+  margin-bottom 15px
+
+.group-header2
+  font-size 18px
+  color $ui-text-color
+  padding 5px
+  margin-bottom 15px
+
+.group-section
+  margin-bottom 15px
+  display flex
+  line-height 30px
+.group-section-label
+  width 150px
+  text-align right
+  margin-right 10px
+.group-section-control
+  flex 1
+.group-section-control-input
+  height 30px
+  vertical-align middle
+  width 150px
+  font-size 12px
+  border solid 1px $border-color
+  border-radius 2px
+  padding 0 5px
+
+.group-checkBoxSection
+  margin-bottom 15px
+  display flex
+  line-height 30px
+  padding-left 15px
+
+.group-control
+  border-top $default-border
+  padding-top 10px
+  box-sizing border-box
+  height 40px
+  text-align right
+.group-control-leftButton
+  float left
+  colorDefaultButton()
+  border $default-border
+  border-radius 2px
+  height 30px
+  padding 0 15px
+  margin-right 5px
+.group-control-rightButton
+  float right
+  colorPrimaryButton()
+  border none
+  border-radius 2px
+  height 30px
+  padding 0 15px
+  margin-right 5px
+.group-hint
+  border $ui-border
+  padding 10px 15px
+  margin 15px 0
+  border-radius 5px
+  background-color $ui-backgroundColor
+  color $ui-inactive-text-color
+  ul
+    list-style inherit
+    padding-left 1em
+    line-height 1.2
+  p
+    line-height 1.2
+
+
diff --git a/browser/main/modals/PreferencesModal/InfoTab.js b/browser/main/modals/PreferencesModal/InfoTab.js
new file mode 100644
index 00000000..ee1bdef9
--- /dev/null
+++ b/browser/main/modals/PreferencesModal/InfoTab.js
@@ -0,0 +1,39 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './InfoTab.styl'
+
+const appVersion = global.process.version
+
+class InfoTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+    }
+  }
+
+  render () {
+    return (
+      <div styleName='root'>
+        <div styleName='top'>
+          <img styleName='icon' src='../resources/app.png' width='150' height='150'/>
+          <div styleName='appId'>Boostnote {appVersion}</div>
+          <div styleName='madeBy'>Made by MAISIN&CO.</div>
+        </div>
+        <ul>
+          <li>
+            - License : GPLv3
+          </li>
+          <li>
+            - Issue Tracker : <a href='https://github.com/BoostIO/Boostnote/issues'>https://github.com/BoostIO/Boostnote/issues</a>
+          </li>
+        </ul>
+      </div>
+    )
+  }
+}
+
+InfoTab.propTypes = {
+}
+
+export default CSSModules(InfoTab, styles)
diff --git a/browser/main/modals/PreferencesModal/InfoTab.styl b/browser/main/modals/PreferencesModal/InfoTab.styl
new file mode 100644
index 00000000..11d8f198
--- /dev/null
+++ b/browser/main/modals/PreferencesModal/InfoTab.styl
@@ -0,0 +1,13 @@
+.root
+  padding 15px
+  white-space pre
+  line-height 1.4
+  color $ui-text-color
+.top
+  text-align center
+  margin-bottom 25px
+.appId
+  font-size 18px
+.madeBy
+  font-size 12px
+  $ui-inactive-text-color
diff --git a/browser/main/modals/PreferencesModal/PreferencesModal.styl b/browser/main/modals/PreferencesModal/PreferencesModal.styl
new file mode 100644
index 00000000..f48c93e9
--- /dev/null
+++ b/browser/main/modals/PreferencesModal/PreferencesModal.styl
@@ -0,0 +1,37 @@
+.root
+  modal()
+  max-width 540px
+  min-height 400px
+  height 80%
+  overflow hidden
+  position relative
+
+.nav
+  absolute top left right
+  height 50px
+  background-color $ui-backgroundColor
+  border-bottom solid 1px $ui-borderColor
+
+.nav-button
+  width 80px
+  height 50px
+  border none
+  background-color transparent
+  color #939395
+  font-size 14px
+  &:hover
+    color #515151
+
+.nav-button--active
+  @extend .nav-button
+  color #6AA5E9
+  &:hover
+    color #6AA5E9
+
+.nav-button-icon
+  display block
+
+.content
+  absolute left right bottom
+  top 50px
+  overflow-y auto
diff --git a/browser/main/modals/PreferencesModal/StorageItem.js b/browser/main/modals/PreferencesModal/StorageItem.js
new file mode 100644
index 00000000..292095ed
--- /dev/null
+++ b/browser/main/modals/PreferencesModal/StorageItem.js
@@ -0,0 +1,299 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './StorageItem.styl'
+import consts from 'browser/lib/consts'
+import dataApi from 'browser/main/lib/dataApi'
+import store from 'browser/main/store'
+
+const electron = require('electron')
+const { shell, remote } = electron
+const { Menu, MenuItem } = remote
+
+class UnstyledFolderItem extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      status: 'IDLE',
+      folder: {
+        color: props.color,
+        name: props.name
+      }
+    }
+  }
+
+  handleEditChange (e) {
+    let { folder } = this.state
+
+    folder.name = this.refs.nameInput.value
+    this.setState({
+      folder
+    })
+  }
+
+  handleConfirmButtonClick (e) {
+    let { storage, folder } = this.props
+    dataApi
+      .updateFolder(storage.key, folder.key, {
+        color: this.state.folder.color,
+        name: this.state.folder.name
+      })
+      .then((storage) => {
+        store.dispatch({
+          type: 'UPDATE_STORAGE',
+          storage: storage
+        })
+        this.setState({
+          status: 'IDLE'
+        })
+      })
+  }
+
+  handleColorButtonClick (e) {
+    var menu = new Menu()
+
+    consts.FOLDER_COLORS.forEach((color, index) => {
+      menu.append(new MenuItem({
+        label: consts.FOLDER_COLOR_NAMES[index],
+        click: (e) => {
+          let { folder } = this.state
+          folder.color = color
+          this.setState({
+            folder
+          })
+        }
+      }))
+    })
+
+    menu.popup(remote.getCurrentWindow())
+  }
+
+  handleCancelButtonClick (e) {
+    this.setState({
+      status: 'IDLE'
+    })
+  }
+
+  renderEdit (e) {
+    return (
+      <div styleName='folderList-item'>
+        <div styleName='folderList-item-left'>
+          <button styleName='folderList-item-left-colorButton' style={{color: this.state.folder.color}}
+            onClick={(e) => this.handleColorButtonClick(e)}
+          >
+            <i className='fa fa-square'/>
+          </button>
+          <input styleName='folderList-item-left-nameInput'
+            value={this.state.folder.name}
+            ref='nameInput'
+            onChange={(e) => this.handleEditChange(e)}
+          />
+        </div>
+        <div styleName='folderList-item-right'>
+          <button styleName='folderList-item-right-confirmButton'
+            onClick={(e) => this.handleConfirmButtonClick(e)}
+          >
+            Confirm
+          </button>
+          <button styleName='folderList-item-right-button'
+            onClick={(e) => this.handleCancelButtonClick(e)}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  handleDeleteConfirmButtonClick (e) {
+    let { storage, folder } = this.props
+    dataApi
+      .removeFolder(storage.key, folder.key)
+      .then((storage) => {
+        store.dispatch({
+          type: 'REMOVE_FOLDER',
+          key: folder.key,
+          storage: storage
+        })
+      })
+  }
+
+  renderDelete () {
+    return (
+      <div styleName='folderList-item'>
+        <div styleName='folderList-item-left'>
+          Are you sure to <span styleName='folderList-item-left-danger'>delete</span> this folder?
+        </div>
+        <div styleName='folderList-item-right'>
+          <button styleName='folderList-item-right-dangerButton'
+            onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
+          >
+            Confirm
+          </button>
+          <button styleName='folderList-item-right-button'
+            onClick={(e) => this.handleCancelButtonClick(e)}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  handleEditButtonClick (e) {
+    let { folder } = this.props
+    this.setState({
+      status: 'EDIT',
+      folder: {
+        color: folder.color,
+        name: folder.name
+      }
+    }, () => {
+      this.refs.nameInput.select()
+    })
+  }
+
+  handleDeleteButtonClick (e) {
+    this.setState({
+      status: 'DELETE'
+    })
+  }
+
+  renderIdle () {
+    let { folder } = this.props
+    return (
+      <div styleName='folderList-item'
+        onDoubleClick={(e) => this.handleEditButtonClick(e)}
+      >
+        <div styleName='folderList-item-left'
+          style={{borderColor: folder.color}}
+        >
+          <span styleName='folderList-item-left-name'>{folder.name}</span>
+          <span styleName='folderList-item-left-key'>({folder.key})</span>
+        </div>
+        <div styleName='folderList-item-right'>
+          <button styleName='folderList-item-right-button'
+            onClick={(e) => this.handleEditButtonClick(e)}
+          >
+            Edit
+          </button>
+          <button styleName='folderList-item-right-button'
+            onClick={(e) => this.handleDeleteButtonClick(e)}
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+
+    )
+  }
+
+  render () {
+    switch (this.state.status) {
+      case 'DELETE':
+        return this.renderDelete()
+      case 'EDIT':
+        return this.renderEdit()
+      case 'IDLE':
+      default:
+        return this.renderIdle()
+    }
+  }
+}
+
+const FolderItem = CSSModules(UnstyledFolderItem, styles)
+
+class StorageItem extends React.Component {
+  handleNewFolderButtonClick (e) {
+    let { storage } = this.props
+    let input = {
+      name: 'Untitled',
+      color: consts.FOLDER_COLORS[Math.floor(Math.random() * 7)]
+    }
+
+    dataApi.createFolder(storage.key, input)
+      .then((storage) => {
+        store.dispatch({
+          type: 'ADD_FOLDER',
+          storage: storage
+        })
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+  }
+
+  handleExternalButtonClick () {
+    let { storage } = this.props
+    shell.showItemInFolder(storage.path)
+  }
+
+  handleUnlinkButtonClick (e) {
+    let { storage } = this.props
+    dataApi.removeStorage(storage.key)
+      .then(() => {
+        store.dispatch({
+          type: 'REMOVE_STORAGE',
+          key: storage.key
+        })
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+  }
+
+  render () {
+    let { storage } = this.props
+    let folderList = storage.folders.map((folder) => {
+      return <FolderItem key={folder.key}
+        folder={folder}
+        storage={storage}
+      />
+    })
+    return (
+      <div styleName='root' key={storage.key}>
+        <div styleName='header'>
+          <i className='fa fa-folder-open'/>&nbsp;
+          {storage.name}&nbsp;
+          <span styleName='header-path'>({storage.path})</span>
+          <div styleName='header-control'>
+            <button styleName='header-control-button'
+              onClick={(e) => this.handleNewFolderButtonClick(e)}
+            >
+              <i className='fa fa-plus'/>
+            </button>
+            <button styleName='header-control-button'
+              onClick={(e) => this.handleExternalButtonClick(e)}
+            >
+              <i className='fa fa-external-link'/>
+            </button>
+            <button styleName='header-control-button'
+              onClick={(e) => this.handleUnlinkButtonClick(e)}
+            >
+              <i className='fa fa-unlink'/>
+            </button>
+          </div>
+        </div>
+        <div styleName='folderList'>
+          {folderList.length > 0
+            ? folderList
+            : <div styleName='folderList-empty'>No Folders</div>
+          }
+        </div>
+      </div>
+    )
+  }
+}
+
+StorageItem.propTypes = {
+  storage: PropTypes.shape({
+    key: PropTypes.string
+  }),
+  folder: PropTypes.shape({
+    key: PropTypes.string,
+    color: PropTypes.string,
+    name: PropTypes.string
+  })
+}
+
+export default CSSModules(StorageItem, styles)
diff --git a/browser/main/modals/PreferencesModal/StorageItem.styl b/browser/main/modals/PreferencesModal/StorageItem.styl
new file mode 100644
index 00000000..724109d7
--- /dev/null
+++ b/browser/main/modals/PreferencesModal/StorageItem.styl
@@ -0,0 +1,97 @@
+.root
+  position relative
+  margin-bottom 15px
+
+.header
+  height 35px
+  line-height 30px
+  padding 0 10px 5px
+  box-sizing border-box
+  border-bottom $default-border
+  margin-bottom 5px
+
+.header-path
+  color $ui-inactive-text-color
+  font-size 10px
+  margin 0 5px
+
+.header-control
+  float right
+
+.header-control-button
+  width 30px
+  height 25px
+  colorDefaultButton()
+  border-radius 2px
+  border $ui-border
+  margin-right 5px
+  &:last-child
+    margin-right 0
+
+.folderList-item
+  height 35px
+  box-sizing border-box
+  padding 2.5px 15px
+  &:hover
+    background-color darken(white, 3%)
+.folderList-item-left
+  height 30px
+  border-left solid 6px transparent
+  padding 0 10px
+  line-height 30px
+  float left
+.folderList-item-left-danger
+  color $danger-color
+  font-weight bold
+
+.folderList-item-left-key
+  color $ui-inactive-text-color
+  font-size 10px
+  margin 0 5px
+  border none
+
+.folderList-item-left-colorButton
+  colorDefaultButton()
+  height 25px
+  width 25px
+  line-height 23px
+  padding 0
+  box-sizing border-box
+  vertical-align middle
+  border $ui-border
+  border-radius 2px
+  margin-right 5px
+  margin-left -15px
+
+.folderList-item-left-nameInput
+  height 25px
+  box-sizing border-box
+  vertical-align middle
+  border $ui-border
+  border-radius 2px
+  padding 0 5px
+
+.folderList-item-right
+  float right
+
+.folderList-item-right-button
+  vertical-align middle
+  height 25px
+  margin-top 2.5px
+  colorDefaultButton()
+  border-radius 2px
+  border $ui-border
+  margin-right 5px
+  padding 0 5px
+  &:last-child
+    margin-right 0
+
+.folderList-item-right-confirmButton
+  @extend .folderList-item-right-button
+  border none
+  colorPrimaryButton()
+
+.folderList-item-right-dangerButton
+  @extend .folderList-item-right-button
+  border none
+  colorDangerButton()
diff --git a/browser/main/modals/PreferencesModal/StoragesTab.js b/browser/main/modals/PreferencesModal/StoragesTab.js
new file mode 100644
index 00000000..f9a7183c
--- /dev/null
+++ b/browser/main/modals/PreferencesModal/StoragesTab.js
@@ -0,0 +1,223 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './StoragesTab.styl'
+import dataApi from 'browser/main/lib/dataApi'
+import StorageItem from './StorageItem'
+
+const electron = require('electron')
+const remote = electron.remote
+
+function browseFolder () {
+  let dialog = remote.dialog
+
+  let defaultPath = remote.app.getPath('home')
+  return new Promise((resolve, reject) => {
+    dialog.showOpenDialog({
+      title: 'Select Directory',
+      defaultPath,
+      properties: ['openDirectory', 'createDirectory']
+    }, function (targetPaths) {
+      if (targetPaths == null) return resolve('')
+      resolve(targetPaths[0])
+    })
+  })
+}
+
+class StoragesTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      page: 'LIST',
+      newStorage: {
+        name: 'Unnamed',
+        type: 'FILESYSTEM',
+        path: ''
+      }
+    }
+  }
+
+  handleAddStorageButton (e) {
+    this.setState({
+      page: 'ADD_STORAGE',
+      newStorage: {
+        name: 'Unnamed',
+        type: 'FILESYSTEM',
+        path: ''
+      }
+    }, () => {
+      this.refs.addStorageName.select()
+    })
+  }
+
+  renderList () {
+    let { storages } = this.props
+
+    let storageList = storages.map((storage) => {
+      return <StorageItem
+        key={storage.key}
+        storage={storage}
+      />
+    })
+    return (
+      <div styleName='list'>
+        {storageList.length > 0
+          ? storageList
+          : <div styleName='list-empty'>No storage found.</div>
+        }
+        <div styleName='list-control'>
+          <button styleName='list-control-addStorageButton'
+            onClick={(e) => this.handleAddStorageButton(e)}
+          >
+            <i className='fa fa-plus'/> Add Storage
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  handleAddStorageBrowseButtonClick (e) {
+    browseFolder()
+      .then((targetPath) => {
+        if (targetPath.length > 0) {
+          let { newStorage } = this.state
+          newStorage.path = targetPath
+          this.setState({
+            newStorage
+          })
+        }
+      })
+      .catch((err) => {
+        console.error('BrowseFAILED')
+        console.error(err)
+      })
+  }
+
+  handleAddStorageChange (e) {
+    let { newStorage } = this.state
+    newStorage.name = this.refs.addStorageName.value
+    newStorage.path = this.refs.addStoragePath.value
+    this.setState({
+      newStorage
+    })
+  }
+
+  handleAddStorageCreateButton (e) {
+    dataApi
+      .addStorage({
+        name: this.state.newStorage.name,
+        path: this.state.newStorage.path
+      })
+      .then((data) => {
+        let { dispatch } = this.props
+        dispatch({
+          type: 'ADD_STORAGE',
+          storage: data.storage,
+          notes: data.notes
+        })
+        this.setState({
+          page: 'LIST'
+        })
+      })
+  }
+
+  handleAddStorageCancelButton (e) {
+    this.setState({
+      page: 'LIST'
+    })
+  }
+
+  renderAddStorage () {
+    return (
+      <div styleName='addStorage'>
+
+        <div styleName='addStorage-header'>Add Storage</div>
+
+        <div styleName='addStorage-body'>
+
+          <div styleName='addStorage-body-section'>
+            <div styleName='addStorage-body-section-label'>
+              Name
+            </div>
+            <div styleName='addStorage-body-section-name'>
+              <input styleName='addStorage-body-section-name-input'
+                ref='addStorageName'
+                value={this.state.newStorage.name}
+                onChange={(e) => this.handleAddStorageChange(e)}
+              />
+            </div>
+          </div>
+
+          <div styleName='addStorage-body-section'>
+            <div styleName='addStorage-body-section-label'>Type</div>
+            <div styleName='addStorage-body-section-type'>
+              <select styleName='addStorage-body-section-type-select'
+                value={this.state.newStorage.type}
+                readOnly
+              >
+                <option value='FILESYSTEM'>File System</option>
+              </select>
+              <div styleName='addStorage-body-section-type-description'>
+                3rd party cloud integration(such as Google Drive and Dropbox) will be available soon.
+              </div>
+            </div>
+          </div>
+
+          <div styleName='addStorage-body-section'>
+            <div styleName='addStorage-body-section-label'>Location
+            </div>
+            <div styleName='addStorage-body-section-path'>
+              <input styleName='addStorage-body-section-path-input'
+                ref='addStoragePath'
+                placeholder='Select Folder'
+                value={this.state.newStorage.path}
+                onChange={(e) => this.handleAddStorageChange(e)}
+              />
+              <button styleName='addStorage-body-section-path-button'
+                onClick={(e) => this.handleAddStorageBrowseButtonClick(e)}
+              >
+                ...
+              </button>
+            </div>
+          </div>
+
+          <div styleName='addStorage-body-control'>
+            <button styleName='addStorage-body-control-createButton'
+              onClick={(e) => this.handleAddStorageCreateButton(e)}
+            >Create</button>
+            <button styleName='addStorage-body-control-cancelButton'
+              onClick={(e) => this.handleAddStorageCancelButton(e)}
+            >Cancel</button>
+          </div>
+
+        </div>
+
+      </div>
+    )
+  }
+
+  renderContent () {
+    switch (this.state.page) {
+      case 'ADD_STORAGE':
+      case 'ADD_FOLDER':
+        return this.renderAddStorage()
+      case 'LIST':
+      default:
+        return this.renderList()
+    }
+  }
+
+  render () {
+    return (
+      <div styleName='root'>
+        {this.renderContent()}
+      </div>
+    )
+  }
+}
+
+StoragesTab.propTypes = {
+  dispatch: PropTypes.func
+}
+
+export default CSSModules(StoragesTab, styles)
diff --git a/browser/main/modals/PreferencesModal/StoragesTab.styl b/browser/main/modals/PreferencesModal/StoragesTab.styl
new file mode 100644
index 00000000..513048c5
--- /dev/null
+++ b/browser/main/modals/PreferencesModal/StoragesTab.styl
@@ -0,0 +1,115 @@
+.root
+  padding 15px
+  color $ui-text-color
+
+.list
+  margin-bottom 15px
+  font-size 14px
+
+.folderList
+  padding 0 15px
+
+.folderList-item
+  height 30px
+  line-height 30px
+  border-bottom $ui-border
+
+.folderList-empty
+  height 30px
+  line-height 30px
+  font-size 12px
+  color $ui-inactive-text-color
+
+.list-empty
+  height 30px
+  color $ui-inactive-text-color
+.list-control
+  height 30px
+.list-control-addStorageButton
+  height 30px
+  padding 0 15px
+  border $ui-border
+  colorDefaultButton()
+  border-radius 2px
+
+.addStorage
+  margin-bottom 15px
+
+.addStorage-header
+  font-size 24px
+  color $ui-text-color
+  padding 5px
+  border-bottom $default-border
+  margin-bottom 15px
+
+.addStorage-body-section
+  margin-bottom 15px
+  display flex
+  line-height 30px
+
+.addStorage-body-section-label
+  width 150px
+  text-align right
+  margin-right 10px
+
+.addStorage-body-section-name
+  flex 1
+.addStorage-body-section-name-input
+  height 30px
+  vertical-align middle
+  width 150px
+  font-size 12px
+  border solid 1px $border-color
+  border-radius 2px
+  padding 0 5px
+
+.addStorage-body-section-type
+  flex 1
+.addStorage-body-section-type-select
+  height 30px
+.addStorage-body-section-type-description
+  margin 5px
+  font-size 12px
+  color $ui-inactive-text-color
+  line-height 16px
+
+.addStorage-body-section-path
+  flex 1
+.addStorage-body-section-path-input
+  height 30px
+  vertical-align middle
+  width 150px
+  font-size 12px
+  border-style solid
+  border-width 1px 0 1px 1px
+  border-color $border-color
+  border-top-left-radius 2px
+  border-bottom-left-radius 2px
+  padding 0 5px
+.addStorage-body-section-path-button
+  height 30px
+  border none
+  border-top-right-radius 2px
+  border-bottom-right-radius 2px
+  colorPrimaryButton()
+  vertical-align middle
+.addStorage-body-control
+  border-top $default-border
+  padding-top 10px
+  box-sizing border-box
+  height 40px
+  text-align right
+
+.addStorage-body-control-createButton
+  colorPrimaryButton()
+  border none
+  border-radius 2px
+  height 30px
+  padding 0 15px
+  margin-right 5px
+.addStorage-body-control-cancelButton
+  colorDefaultButton()
+  border $default-border
+  border-radius 2px
+  height 30px
+  padding 0 15px
diff --git a/browser/main/modals/PreferencesModal/index.js b/browser/main/modals/PreferencesModal/index.js
new file mode 100644
index 00000000..adbd1869
--- /dev/null
+++ b/browser/main/modals/PreferencesModal/index.js
@@ -0,0 +1,98 @@
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import ConfigTab from './ConfigTab'
+import InfoTab from './InfoTab'
+import StoragesTab from './StoragesTab'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './PreferencesModal.styl'
+
+class Preferences extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      currentTab: 'STORAGES'
+    }
+  }
+
+  switchTeam (teamId) {
+    this.setState({currentTeamId: teamId})
+  }
+
+  handleNavButtonClick (tab) {
+    return (e) => {
+      this.setState({currentTab: tab})
+    }
+  }
+
+  renderContent () {
+    let { dispatch, config, storages } = this.props
+
+    switch (this.state.currentTab) {
+      case 'INFO':
+        return <InfoTab/>
+      case 'CONFIG':
+        return (
+          <ConfigTab
+            dispatch={dispatch}
+            config={config}
+          />
+        )
+      case 'STORAGES':
+      default:
+        return (
+          <StoragesTab
+            dispatch={dispatch}
+            storages={storages}
+          />
+        )
+    }
+  }
+
+  render () {
+    let content = this.renderContent()
+
+    let tabs = [
+      {target: 'STORAGES', label: 'Storages', icon: 'database'},
+      {target: 'CONFIG', label: 'Config', icon: 'cogs'},
+      {target: 'INFO', label: 'Info', icon: 'info-circle'}
+    ]
+
+    let navButtons = tabs.map((tab) => {
+      let isActive = this.state.currentTab === tab.target
+      return (
+        <button styleName={isActive
+            ? 'nav-button--active'
+            : 'nav-button'
+          }
+          key={tab.target}
+          onClick={(e) => this.handleNavButtonClick(tab.target)(e)}
+        >
+          <i styleName='nav-button-icon'
+            className={'fa fa-' + tab.icon}
+          />
+          <span styleName='nav-button-label'>
+            {tab.label}
+          </span>
+        </button>
+      )
+    })
+
+    return (
+      <div styleName='root'>
+        <div styleName='nav'>
+          {navButtons}
+        </div>
+        <div styleName='content'>
+          {content}
+        </div>
+      </div>
+    )
+  }
+}
+
+Preferences.propTypes = {
+  dispatch: PropTypes.func
+}
+
+export default connect((x) => x)(CSSModules(Preferences, styles))
diff --git a/browser/main/store.js b/browser/main/store.js
index 8050466d..93060405 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -1,176 +1,83 @@
 import { combineReducers, createStore } from 'redux'
-import _ from 'lodash'
 import { routerReducer } from 'react-router-redux'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 
-/**
- * Repositories
- * ```
- * repositories = [{
- *   key: String,
- *   name: String,
- *   path: String, // path of repository
- *   status: String, // status of repository [IDLE, LOADING, READY, ERROR]
- *   folders: {
- *     name: String,
- *     color: String
- *   },
- *   notes: [{
- *     key: String,
- *     title: String,
- *     content: String,
- *     folder: String,
- *     tags: [String],
- *     createdAt: Date,
- *     updatedAt: Date
- *   }]
- * }]
- * ```
- */
-const initialRepositories = []
-
-function repositories (state = initialRepositories, action) {
+function storages (state = [], action) {
   console.info('REDUX >> ', action)
   switch (action.type) {
     case 'INIT_ALL':
-      action.data.forEach((repo) => {
-        repo.notes.forEach((note) => {
-          note._repository = repo
-        })
-      })
-      return action.data.slice()
-    case 'ADD_REPOSITORY':
+      return action.storages
+    case 'ADD_STORAGE':
       {
-        let repos = state.slice()
+        let storages = state.slice()
 
-        repos.push(action.repository)
+        storages.push(action.storage)
 
-        return repos
-      }
-    case 'REMOVE_REPOSITORY':
-      {
-        let repos = state.slice()
-
-        let targetIndex = _.findIndex(repos, {key: action.key})
-        if (targetIndex > -1) {
-          repos.splice(targetIndex, 1)
-        }
-
-        return repos
+        return storages
       }
     case 'ADD_FOLDER':
+    case 'REMOVE_FOLDER':
+    case 'UPDATE_STORAGE':
       {
-        let repos = state.slice()
-        let targetRepo = _.find(repos, {key: action.key})
+        let storages = state.slice()
+        storages = storages
+          .filter((storage) => storage.key !== action.storage.key)
+        storages.push(action.storage)
 
-        if (targetRepo == null) return state
-
-        let targetFolderIndex = _.findIndex(targetRepo.folders, {key: action.folder.key})
-        if (targetFolderIndex < 0) {
-          targetRepo.folders.push(action.folder)
-        } else {
-          targetRepo.folders.splice(targetFolderIndex, 1, action.folder)
-        }
-
-        return repos
+        return storages
       }
-    case 'EDIT_FOLDER':
+    case 'REMOVE_STORAGE':
       {
-        let repos = state.slice()
-        let targetRepo = _.find(repos, {key: action.key})
+        let storages = state.slice()
+        storages = storages
+          .filter((storage) => storage.key !== action.key)
 
-        if (targetRepo == null) return state
-
-        let targetFolderIndex = _.findIndex(targetRepo.folders, {key: action.folder.key})
-        if (targetFolderIndex < 0) {
-          targetRepo.folders.push(action.folder)
-        } else {
-          targetRepo.folders.splice(targetFolderIndex, 1, action.folder)
-        }
-
-        return repos
+        return storages
+      }
+  }
+  return state
+}
+
+function notes (state = [], action) {
+  switch (action.type) {
+    case 'INIT_ALL':
+      return action.notes
+    case 'ADD_STORAGE':
+      {
+        let notes = state.slice()
+
+        notes.concat(action.notes)
+
+        return notes
+      }
+    case 'REMOVE_STORAGE':
+      {
+        let notes = state.slice()
+        notes = notes
+          .filter((note) => note.storage !== action.key)
+
+        return notes
       }
-    /**
-     *  Remove a folder from the repository
-     * {
-     *  type: 'REMOVE_FOLDER',
-     *  repository: repositoryKey,
-     *  folder: folderKey
-     * }
-     */
     case 'REMOVE_FOLDER':
       {
-        let repos = state.slice()
-        let targetRepo = _.find(repos, {key: action.repository})
+        let notes = state.slice()
+        notes = notes
+          .filter((note) => note.storage !== action.storage.key || note.folder !== action.key)
 
-        if (targetRepo == null) return state
-
-        let targetFolderIndex = _.findIndex(targetRepo.folders, {key: action.folder})
-        if (targetFolderIndex > -1) {
-          targetRepo.folders.splice(targetFolderIndex, 1)
-        }
-
-        return repos
+        return notes
       }
-    case 'ADD_NOTE':
+    case 'CREATE_NOTE':
       {
-        let repos = state.slice()
-        let targetRepo = _.find(repos, {key: action.repository})
-
-        if (targetRepo == null) return state
-        action.note._repository = targetRepo
-        targetRepo.notes.push(action.note)
-
-        return repos
+        let notes = state.slice()
+        notes.push(action.note)
+        return notes
       }
-    case 'SAVE_NOTE':
+    case 'UPDATE_NOTE':
       {
-        let repos = state.slice()
-        let targetRepo = _.find(repos, {key: action.repository})
-
-        if (targetRepo == null) return state
-
-        let targetNoteIndex = _.findIndex(targetRepo.notes, {key: action.note.key})
-        action.note.updatedAt = Date.now()
-        action.note._repository = targetRepo
-
-        if (targetNoteIndex > -1) {
-          targetRepo.notes.splice(targetNoteIndex, 1, action.note)
-        } else {
-          targetRepo.notes.push(action.note)
-        }
-
-        return repos
-      }
-    case 'STAR_NOTE':
-      {
-        let repos = state.slice()
-        let targetRepo = _.find(repos, {key: action.repository})
-
-        if (targetRepo == null) return state
-
-        let targetNoteIndex = _.findIndex(targetRepo.notes, {key: action.note})
-        if (targetNoteIndex > -1) {
-          targetRepo.starred.push(action.note)
-          targetRepo.starred = _.uniq(targetRepo.starred)
-        } else {
-          return state
-        }
-
-        return repos
-      }
-    case 'UNSTAR_NOTE':
-      {
-        let repos = state.slice()
-        let targetRepo = _.find(repos, {key: action.repository})
-
-        if (targetRepo == null) return state
-
-        targetRepo.starred = targetRepo.starred
-          .filter((starredKey) => starredKey !== action.note)
-        targetRepo.starred = _.uniq(targetRepo.starred)
-
-        return repos
+        let notes = state.slice()
+        notes = notes.filter((note) => note.key !== action.note.key || note.folder !== action.note.folder || note.storage !== action.note.storage)
+        notes.push(action.note)
+        return notes
       }
   }
   return state
@@ -191,12 +98,15 @@ function config (state = defaultConfig, action) {
       return Object.assign({}, state)
     case 'SET_CONFIG':
       return Object.assign({}, state, action.config)
+    case 'SET_UI':
+      return Object.assign({}, state, action.config)
   }
   return state
 }
 
 let reducer = combineReducers({
-  repositories,
+  storages,
+  notes,
   config,
   routing: routerReducer
 })
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 2a809e97..9322259f 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -1,7 +1,7 @@
 $brand-color = #6AA5E9
 
-$danger-color = red
-$danger-lighten-color = #FFE5E6
+$danger-color = #c9302c
+$danger-lighten-color = lighten(#c9302c, 5%)
 
 // Layouts
 $statusBar-height = 24px
@@ -65,16 +65,32 @@ colorDefaultButton()
 // Primary button(Brand color)
 $primary-button-background = $brand-color
 $primary-button-background--hover = darken($brand-color, 5%)
-$primary-button-background--hover = darken($brand-color, 10%)
+$primary-button-background--active = darken($brand-color, 10%)
 
 colorPrimaryButton()
+  color white
   background-color $primary-button-background
   &:hover
     background-color $primary-button-background--hover
   &:active
     background-color $primary-button-background--active
   &:active:hover
-    background-color $primary-button-background--active
+    background-color $primary-button-background--activ
+
+// Danger button(Brand color)
+$danger-button-background = #c9302c
+$danger-button-background--hover = darken(#c9302c, 5%)
+$danger-button-background--active = darken(#c9302c, 10%)
+
+colorDangerButton()
+  color white
+  background-color $danger-button-background
+  &:hover
+    background-color $danger-button-background--hover
+  &:active
+    background-color $danger-button-background--active
+  &:active:hover
+    background-color $danger-button-background--active
 
 /**
 * Nav
@@ -101,7 +117,7 @@ navButtonColor()
 
 $modal-z-index = 1002
 $modal-background = white
-$modal-margin = 64px auto 0
+$modal-margin = 64px auto 64px
 $modal-border-radius = 5px
 
 modal()
@@ -111,3 +127,4 @@ modal()
   background-color $modal-background
   overflow hidden
   border-radius $modal-border-radius
+  box-shadow 2px 2px 10px gray
diff --git a/browser/styles/main/index.styl b/browser/styles/main/index.styl
index 46d6b19c..84389e6b 100644
--- a/browser/styles/main/index.styl
+++ b/browser/styles/main/index.styl
@@ -1,8 +1,6 @@
 @import '../vars'
 @import '../mixins/*'
 global-reset()
-@import '../shared/*'
-@import './modal/*'
 @import '../theme/*'
 
 DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif
@@ -86,3 +84,26 @@ textarea.block-input
 
 #content
   fullsize()
+
+modalZIndex= 1000
+modalBackColor = transparentify(black, 65%)
+
+.ModalBase
+  fixed top left bottom right
+  z-index modalZIndex
+  &.hide
+    display none
+  .modalBack
+    absolute top left bottom right
+    background-color modalBackColor
+    z-index modalZIndex + 1
+  .modal
+    position relative
+    width 650px
+    margin 50px auto 0
+    z-index modalZIndex + 2
+    background-color white
+    padding 15px
+    color #666666
+    border-radius 5px
+
diff --git a/browser/styles/main/modal/DeleteArticleModal.styl b/browser/styles/main/modal/DeleteArticleModal.styl
deleted file mode 100644
index 741224a8..00000000
--- a/browser/styles/main/modal/DeleteArticleModal.styl
+++ /dev/null
@@ -1,33 +0,0 @@
-.DeleteArticleModal.modal
-  width 350px !important
-  top 100px
-  user-select none
-  .title
-    font-size 24px
-    margin-bottom 15px
-  .message
-    font-size 14px
-    margin-bottom 15px
-  .control
-    text-align right
-    button
-      border-radius 5px
-      height 33px
-      padding 0 15px
-      font-size 14px
-      background-color white
-      border 1px solid borderColor
-      border-radius 5px
-      margin-left 5px
-      &:hover
-        background-color darken(white, 10%)
-      &:focus
-        border-color focusBorderColor
-      &.danger
-        border-color #E9432A
-        background-color #E9432A
-        color white
-        &:hover
-          background-color lighten(#E9432A, 15%)
-        &:focus
-          background-color lighten(#E9432A, 15%)
diff --git a/browser/styles/main/modal/Preferences.styl b/browser/styles/main/modal/Preferences.styl
deleted file mode 100644
index 9239f571..00000000
--- a/browser/styles/main/modal/Preferences.styl
+++ /dev/null
@@ -1,186 +0,0 @@
-menuColor = #808080
-menuBgColor = #E6E6E6
-closeBtnBgColor = #1790C6
-iptFocusBorderColor = #369DCD
-
-.Preferences.modal
-  padding 0
-  border-radius 5px
-  overflow hidden
-  width 720px
-  height 600px
-  &>.header
-    absolute top left right
-    height 50px
-    border-bottom 1px solid borderColor
-    background-color menuBgColor
-    &>.title
-      font-size 22px
-      font-weight bold
-      float left
-      padding-left 30px
-      line-height 50px
-    &>.closeBtn
-      float right
-      font-size 14px
-      background-color closeBtnBgColor
-      color white
-      padding 0 15px
-      height 33px
-      margin-top 9px
-      margin-right 15px
-      border none
-      border-radius 5px
-  &>.nav
-    absolute left bottom
-    top 50px
-    width 180px
-    background-color menuBgColor
-    border-right 1px solid borderColor
-    &>button
-      width 100%
-      height 44px
-      font-size 18px
-      color menuColor
-      border none
-      background-color transparent
-      transition 0.1s
-      text-align left
-      padding-left 15px
-      &:hover
-        background-color darken(menuBgColor, 10%)
-      &.active, &:active
-        background-color brandColor
-        color white
-  &>.content
-    absolute right bottom
-    top 50px
-    left 180px
-    overflow-y auto
-    &>.section
-      padding 10px 20px
-      border-bottom 1px solid borderColor
-      overflow-y auto
-      &:nth-last-child(1)
-        border-bottom none
-      &>.sectionTitle
-        font-size 18px
-        margin 10px 0 5px
-        color brandColor
-      &>.sectionCheck
-        margin-bottom 5px
-        height 33px
-        label
-          width 150px
-          padding-left 15px
-          line-height 33px
-          .sectionCheck-warn
-            font-size 12px
-            margin-left 10px
-            border-left 2px solid brandColor
-            padding-left 5px
-      &>.sectionInput
-        margin-bottom 5px
-        clearfix()
-        height 33px
-        label
-          width 150px
-          padding-left 15px
-          float left
-          line-height 33px
-        input
-          width 250px
-          float left
-          height 33px
-          border-radius 5px
-          border 1px solid borderColor
-          padding 0 10px
-          font-size 14px
-          outline none
-          &:focus
-            border-color iptFocusBorderColor
-      &>.sectionSelect
-        margin-bottom 5px
-        clearfix()
-        height 33px
-        label
-          width 150px
-          padding-left 15px
-          float left
-          line-height 33px
-        select
-          float left
-          width 200px
-          height 25px
-          margin-top 4px
-          border-radius 5px
-          border 1px solid borderColor
-          padding 0 10px
-          font-size 14px
-          outline none
-          &:focus
-            border-color iptFocusBorderColor
-      &>.sectionMultiSelect
-        margin-bottom 5px
-        clearfix()
-        height 33px
-        label
-          width 150px
-          padding-left 15px
-          float left
-          line-height 33px
-        .sectionMultiSelect-input
-          float left
-          select
-            width 80px
-            height 25px
-            margin-top 4px
-            border-radius 5px
-            border 1px solid borderColor
-            padding 0 10px
-            font-size 14px
-            outline none
-            margin-left 5px
-            margin-right 15px
-            &:focus
-              border-color iptFocusBorderColor
-      &>.sectionConfirm
-        clearfix()
-        padding 5px 15px
-        button
-          float right
-          background-color brandColor
-          color white
-          border none
-          border-radius 5px
-          height 33px
-          padding 0 15px
-          font-size 14px
-        .alert
-          float right
-          width 250px
-          padding 10px 15px
-          margin 0 10px 0
-    .alert
-      color infoTextColor
-      background-color infoBackgroundColor
-      font-size 14px
-      padding 15px 15px
-      width 330px
-      border-radius 5px
-      margin 10px auto
-      &.error
-        color errorTextColor
-        background-color errorBackgroundColor
-    &.ContactTab
-      padding 10px
-      .title
-        font-size 18px
-        color brandColor
-        margin-top 10px
-        margin-bottom 10px
-      p
-        line-height 2
-    &.AppSettingTab
-      .description
-        marked()
diff --git a/browser/styles/main/modal/modal.styl b/browser/styles/main/modal/modal.styl
deleted file mode 100644
index 005ac7b3..00000000
--- a/browser/styles/main/modal/modal.styl
+++ /dev/null
@@ -1,21 +0,0 @@
-modalZIndex= 1000
-modalBackColor = transparentify(black, 65%)
-
-.ModalBase
-  fixed top left bottom right
-  z-index modalZIndex
-  &.hide
-    display none
-  .modalBack
-    absolute top left bottom right
-    background-color modalBackColor
-    z-index modalZIndex + 1
-  .modal
-    position relative
-    width 650px
-    margin 50px auto 0
-    z-index modalZIndex + 2
-    background-color white
-    padding 15px
-    color #666666
-    border-radius 5px
diff --git a/package.json b/package.json
index e11d8bf3..fd60f8e8 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "markdown-it-emoji": "^1.1.1",
     "md5": "^2.0.0",
     "moment": "^2.10.3",
+    "sander": "^0.5.1",
     "season": "^5.3.0",
     "superagent": "^1.2.0",
     "superagent-promise": "^1.0.3"
@@ -66,7 +67,7 @@
     "css-loader": "^0.19.0",
     "devtron": "^1.1.0",
     "electron-packager": "^6.0.0",
-    "electron-prebuilt": "^1.0.2",
+    "electron-prebuilt": "^1.1.3",
     "electron-release": "^2.2.0",
     "grunt": "^0.4.5",
     "grunt-electron-installer": "^1.2.0",
diff --git a/webpack-skeleton.js b/webpack-skeleton.js
index 1f46bc49..063a5c01 100644
--- a/webpack-skeleton.js
+++ b/webpack-skeleton.js
@@ -42,6 +42,7 @@ var config = {
     'markdown-it-checkbox',
     'season',
     'devtron',
+    'sander',
     {
       react: 'var React',
       'react-dom': 'var ReactDOM',

From 2d46d12628a18294e3fa10936577d53e5749f219 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Thu, 14 Jul 2016 14:37:14 +0900
Subject: [PATCH 085/109] Codeblock theme of markdown preview

---
 browser/components/MarkdownEditor.js  | 2 +-
 browser/components/MarkdownPreview.js | 7 +++++--
 browser/components/markdown.styl      | 3 ++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
index bf520bfb..1d82cece 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -96,7 +96,7 @@ class MarkdownEditor extends React.Component {
           style={previewStyle}
           fontSize={config.preview.fontSize}
           fontFamily={config.preview.fontFamily}
-          codeBlockTheme={config.preview.theme}
+          codeBlockTheme={config.preview.codeBlockTheme}
           codeBlockFontFamily={config.editor.fontFamily}
           lineNumber={config.preview.lineNumber}
           ref='preview'
diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index 8619cddf..192e12e1 100644
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
 import markdown from 'browser/lib/markdown'
 import _ from 'lodash'
+import hljsTheme from 'browser/lib/hljsThemes'
 
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
 const { shell } = require('electron')
@@ -44,6 +45,7 @@ export default class MarkdownPreview extends React.Component {
       prevProps.fontFamily !== this.props.fontFamily ||
       prevProps.fontSize !== this.props.fontSize ||
       prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
+      prevProps.codeBlockTheme !== this.props.codeBlockTheme ||
       prevProps.lineNumber !== this.props.lineNumber
     ) this.rewriteIframe()
   }
@@ -53,13 +55,14 @@ export default class MarkdownPreview extends React.Component {
       el.removeEventListener('click', goExternal)
     })
 
-    let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber } = this.props
+    let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
       ? [fontFamily].concat(defaultFontFamily)
       : defaultFontFamily
     codeBlockFontFamily = _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
       ? [codeBlockFontFamily].concat(defaultCodeBlockFontFamily)
       : defaultCodeBlockFontFamily
+    codeBlockTheme = hljsTheme().some((theme) => theme.name === codeBlockTheme) ? codeBlockTheme : 'xcode'
 
     this.refs.root.contentWindow.document.head.innerHTML = `
       <style>
@@ -86,7 +89,7 @@ export default class MarkdownPreview extends React.Component {
           opacity: 0.5;
         }
       </style>
-      <link rel="stylesheet" href="../node_modules/highlight.js/styles/xcode.css" id="hljs-css">
+      <link rel="stylesheet" href="../node_modules/highlight.js/styles/${codeBlockTheme}.css">
       <link rel="stylesheet" href="../resources/katex.min.css">
     `
     this.refs.root.contentWindow.document.body.innerHTML = markdown(value)
diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl
index e31a1919..446bab24 100644
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -198,13 +198,14 @@ code
   margin-left 2px
 pre
   padding 1em !important
-  background-color #f7f7f7 !important
+  border solid 1px alpha(borderColor, 0.5)
   border-radius 5px
   overflow-x auto
   margin 0 0 1em
   line-height 1.35
   code
     margin 0
+    background-color inherit
     padding 0
     border none
     border-radius 0

From 922ae7a274962fb449af3b2bef96c424f721c3db Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Thu, 14 Jul 2016 14:37:26 +0900
Subject: [PATCH 086/109] clean old codes

---
 browser/lib/fetchConfig.js                    | 24 --------
 browser/main/index.js                         | 17 ------
 browser/main/lib/queue.js                     | 57 -------------------
 .../main/modals/PreferencesModal/ConfigTab.js |  2 -
 .../main/modals/PreferencesModal/InfoTab.js   | 11 +++-
 5 files changed, 10 insertions(+), 101 deletions(-)
 delete mode 100644 browser/lib/fetchConfig.js
 delete mode 100644 browser/main/lib/queue.js

diff --git a/browser/lib/fetchConfig.js b/browser/lib/fetchConfig.js
deleted file mode 100644
index e1d40dd4..00000000
--- a/browser/lib/fetchConfig.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const electron = require('electron')
-const remote = electron.remote
-const jetpack = require('fs-jetpack')
-
-const userDataPath = remote.app.getPath('userData')
-const configFile = 'config.json'
-
-const defaultConfig = {
-  'editor-font-size': '14',
-  'editor-font-family': 'Monaco, Consolas',
-  'editor-indent-type': 'space',
-  'editor-indent-size': '4',
-  'preview-font-size': '14',
-  'preview-font-family': 'Lato',
-  'switch-preview': 'blur',
-  'disable-direct-write': false,
-  'theme-ui': 'light',
-  'theme-code': 'xcode',
-  'theme-syntax': 'xcode'
-}
-
-export default function fetchConfig () {
-  return Object.assign({}, defaultConfig, JSON.parse(jetpack.cwd(userDataPath).read(configFile, 'utf-8')))
-}
diff --git a/browser/main/index.js b/browser/main/index.js
index 9e0abe3f..015dffed 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -5,7 +5,6 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 require('!!style!css!stylus?sourceMap!./global.styl')
 import activityRecord from 'browser/lib/activityRecord'
-import fetchConfig from '../lib/fetchConfig'
 import { Router, Route, IndexRoute, IndexRedirect, hashHistory } from 'react-router'
 import { syncHistoryWithStore } from 'react-router-redux'
 
@@ -14,22 +13,6 @@ const ipc = electron.ipcRenderer
 const path = require('path')
 const remote = electron.remote
 
-let config = fetchConfig()
-applyConfig(config)
-
-ipc.on('config-apply', function (e, newConfig) {
-  config = newConfig
-  applyConfig(config)
-})
-
-function applyConfig (config) {
-  let body = document.body
-  body.setAttribute('data-theme', config['theme-ui'])
-
-  let hljsCss = document.getElementById('hljs-css')
-  hljsCss.setAttribute('href', '../node_modules/highlight.js/styles/' + config['theme-code'] + '.css')
-}
-
 if (process.env.NODE_ENV !== 'production') {
   window.addEventListener('keydown', function (e) {
     if (e.keyCode === 73 && e.metaKey && e.altKey) {
diff --git a/browser/main/lib/queue.js b/browser/main/lib/queue.js
deleted file mode 100644
index e4adcbfb..00000000
--- a/browser/main/lib/queue.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import Storage from 'browser/lib/Storage'
-import _ from 'lodash'
-
-let tasks = []
-
-function _save (task, storageKey, note) {
-  note = Object.assign({}, note)
-  delete note._storage
-
-  task.status = 'process'
-
-  Storage
-    .find(storageKey)
-    .then((storage) => {
-      return storage.updateNote(note.key, note)
-    })
-    .then((note) => {
-      tasks.splice(tasks.indexOf(task), 1)
-      console.info('Note saved', note)
-    })
-    .catch((err) => {
-      tasks.splice(tasks.indexOf(task), 1)
-      console.error('Failed to save note', note)
-      console.error(err)
-    })
-}
-
-const queueSaving = function (storageKey, note) {
-  let key = `${storageKey}-${note.key}`
-
-  let taskIndex = _.findIndex(tasks, {
-    type: 'SAVE_NOTE',
-    key: key,
-    status: 'idle'
-  })
-  let task = tasks[taskIndex]
-  if (taskIndex < 0) {
-    task = {
-      type: 'SAVE_NOTE',
-      key: key,
-      status: 'idle',
-      timer: null
-    }
-  } else {
-    tasks.splice(taskIndex, 1)
-    window.clearTimeout(task.timer)
-  }
-
-  task.timer = window.setTimeout(() => {
-    _save(task, storageKey, note)
-  }, 1500)
-  tasks.push(task)
-}
-
-export default {
-  save: queueSaving
-}
diff --git a/browser/main/modals/PreferencesModal/ConfigTab.js b/browser/main/modals/PreferencesModal/ConfigTab.js
index 4ff94320..af789ff4 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.js
+++ b/browser/main/modals/PreferencesModal/ConfigTab.js
@@ -1,14 +1,12 @@
 import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './ConfigTab.styl'
-import fetchConfig from 'browser/lib/fetchConfig'
 import hljsTheme from 'browser/lib/hljsThemes'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import store from 'browser/main/store'
 
 const electron = require('electron')
 const ipc = electron.ipcRenderer
-const remote = electron.remote
 const ace = window.ace
 
 const OSX = global.process.platform === 'darwin'
diff --git a/browser/main/modals/PreferencesModal/InfoTab.js b/browser/main/modals/PreferencesModal/InfoTab.js
index ee1bdef9..001773b2 100644
--- a/browser/main/modals/PreferencesModal/InfoTab.js
+++ b/browser/main/modals/PreferencesModal/InfoTab.js
@@ -3,6 +3,8 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoTab.styl'
 
 const appVersion = global.process.version
+const electron = require('electron')
+const { shell } = electron
 
 class InfoTab extends React.Component {
   constructor (props) {
@@ -12,6 +14,11 @@ class InfoTab extends React.Component {
     }
   }
 
+  handleLinkClick (e) {
+    shell.openExternal(e.currentTarget.href)
+    e.preventDefault()
+  }
+
   render () {
     return (
       <div styleName='root'>
@@ -25,7 +32,9 @@ class InfoTab extends React.Component {
             - License : GPLv3
           </li>
           <li>
-            - Issue Tracker : <a href='https://github.com/BoostIO/Boostnote/issues'>https://github.com/BoostIO/Boostnote/issues</a>
+            - Issue Tracker : <a href='https://github.com/BoostIO/Boostnote/issues'
+              onClick={(e) => this.handleLinkClick(e)}
+            >https://github.com/BoostIO/Boostnote/issues</a>
           </li>
         </ul>
       </div>

From 9b98035ee7606a96ae39c65c3d59b1d9d4019bbf Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Thu, 14 Jul 2016 14:42:20 +0900
Subject: [PATCH 087/109] smaller padding of code block

---
 browser/components/markdown.styl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl
index 446bab24..3556f53c 100644
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -197,7 +197,7 @@ code
 *:not(a.lineAnchor) + code
   margin-left 2px
 pre
-  padding 1em !important
+  padding 0.5em !important
   border solid 1px alpha(borderColor, 0.5)
   border-radius 5px
   overflow-x auto

From 8452a95114833807f2b18a24aff57e224ed48da2 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Fri, 15 Jul 2016 10:21:21 +0900
Subject: [PATCH 088/109] hide sidenav toggle button temporarily

---
 browser/main/SideNav/index.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index d12ab9c9..d688b9d3 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -83,15 +83,16 @@ class SideNav extends React.Component {
             <div styleName='storageList-empty'>No storage mount.</div>
           )}
         </div>
-
-        <button styleName='navToggle'
-          onClick={(e) => this.handleToggleButtonClick(e)}
-        >
-          {isFolded
-            ? <i className='fa fa-angle-double-right'/>
-            : <i className='fa fa-angle-double-left'/>
-          }
-        </button>
+        {false &&
+          <button styleName='navToggle'
+            onClick={(e) => this.handleToggleButtonClick(e)}
+          >
+            {isFolded
+              ? <i className='fa fa-angle-double-right'/>
+              : <i className='fa fa-angle-double-left'/>
+            }
+          </button>
+        }
       </div>
     )
   }

From 0ccfd36a83830ef7fcc7f067f8ecfddde288710c Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Fri, 15 Jul 2016 10:21:34 +0900
Subject: [PATCH 089/109] smaller storage name

---
 browser/main/Detail/FolderSelect.js   | 6 ++++--
 browser/main/Detail/FolderSelect.styl | 9 ++++++++-
 browser/main/NoteList/NoteList.styl   | 6 +++++-
 browser/main/NoteList/index.js        | 7 ++++---
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/browser/main/Detail/FolderSelect.js b/browser/main/Detail/FolderSelect.js
index eff89d10..a937275a 100644
--- a/browser/main/Detail/FolderSelect.js
+++ b/browser/main/Detail/FolderSelect.js
@@ -213,7 +213,8 @@ class FolderSelect extends React.Component {
             <span styleName='search-optionList-item-name'
               style={{borderColor: option.folder.color}}
             >
-              {option.storage.name}/{option.folder.name}
+              {option.folder.name}
+              <span styleName='search-optionList-item-name-surfix'>in {option.storage.name}</span>
             </span>
           </div>
         )
@@ -258,7 +259,8 @@ class FolderSelect extends React.Component {
               <span styleName='idle-label-name'
                 style={{borderColor: currentOption.folder.color}}
               >
-                {currentOption.storage.name}/{currentOption.folder.name}
+                {currentOption.folder.name}
+                <span styleName='idle-label-name-surfix'>in {currentOption.storage.name}</span>
               </span>
             </div>
             <i styleName='idle-caret' className='fa fa-fw fa-caret-down'/>
diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl
index 64ecb35b..7aa61364 100644
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -30,7 +30,10 @@
 .idle-label-name
   border-left solid 4px transparent
   padding 2px 5px
-
+.idle-label-name-surfix
+  font-size 10px
+  color $ui-inactive-text-color
+  margin-left 5px
 .idle-caret
   absolute right top
   height 34px
@@ -79,3 +82,7 @@
 .search-optionList-item-name
   border-left solid 4px transparent
   padding 2px 5px
+.search-optionList-item-name-surfix
+  font-size 10px
+  color $ui-inactive-text-color
+  margin-left 5px
diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index 46023735..642b5d4b 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -42,7 +42,11 @@
 .item-info-left-folder
   border-left 4px solid transparent
   padding 2px 5px
-
+  color $ui-text-color
+.item-info-left-folder-surfix
+  font-size 10px
+  margin-left 5px
+  color $ui-inactive-text-color
 .item-info-right
   float right
 
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index 3582dd71..d46439ab 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -213,7 +213,7 @@ class NoteList extends React.Component {
     this.notes = notes
     // this.notes = this.getNotes()
 
-    let noteElements = notes
+    let noteList = notes
       .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
       .map((note) => {
         let storage = _.find(storages, {key: note.storage})
@@ -244,7 +244,8 @@ class NoteList extends React.Component {
                 <span styleName='item-info-left-folder'
                   style={{borderColor: folder.color}}
                 >
-                  {storage.name}/{folder.name}
+                  {folder.name}
+                  <span styleName='item-info-left-folder-surfix'>in {storage.name}</span>
                 </span>
               </div>
 
@@ -277,7 +278,7 @@ class NoteList extends React.Component {
         onKeyDown={(e) => this.handleNoteListKeyDown(e)}
         style={this.props.style}
       >
-        {noteElements}
+        {noteList}
       </div>
     )
   }

From 4f45ba16804a0ec5c4d1d9cb8127e5c02879d334 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Fri, 15 Jul 2016 10:34:52 +0900
Subject: [PATCH 090/109] embed navigating, filterring to notelist

---
 browser/main/NoteList/index.js | 57 ++++++++++++----------------------
 1 file changed, 19 insertions(+), 38 deletions(-)

diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index d46439ab..2c90c9c9 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -7,8 +7,6 @@ import _ from 'lodash'
 class NoteList extends React.Component {
   constructor (props) {
     super(props)
-
-    // this.focusHandler = (e) => this.focus()
   }
 
   componentDidMount () {
@@ -34,11 +32,8 @@ class NoteList extends React.Component {
 
     // Auto scroll
     if (_.isString(location.query.key)) {
-      let splitted = location.query.key.split('/')
-      let repoKey = splitted[0]
-      let noteKey = splitted[1]
       let targetIndex = _.findIndex(this.notes, (note) => {
-        return repoKey === note.storage && noteKey === note.key
+        return note.uniqueKey === location.query.key
       })
       if (targetIndex > -1) {
         let list = this.refs.root
@@ -66,11 +61,9 @@ class NoteList extends React.Component {
     }
     let { router } = this.context
     let { location } = this.props
-    let splitted = location.query.key.split('-')
-    let repoKey = splitted[0]
-    let noteKey = splitted[1]
+
     let targetIndex = _.findIndex(this.notes, (note) => {
-      return repoKey === note.storage && noteKey === note.key
+      return note.uniqueKey === location.query.key
     })
 
     if (targetIndex === 0) {
@@ -93,11 +86,9 @@ class NoteList extends React.Component {
     }
     let { router } = this.context
     let { location } = this.props
-    let splitted = location.query.key.split('-')
-    let repoKey = splitted[0]
-    let noteKey = splitted[1]
+
     let targetIndex = _.findIndex(this.notes, (note) => {
-      return repoKey === note._repository.key && noteKey === note.key
+      return note.uniqueKey === location.query.key
     })
 
     if (targetIndex === this.notes.length - 1) {
@@ -140,7 +131,6 @@ class NoteList extends React.Component {
 
     // if (e.keyCode === 69) {
     //   e.preventDefault()
-    //   remote.getCurrentWebContents().send('detail-edit')
     // }
 
     // if (e.keyCode === 83) {
@@ -160,37 +150,29 @@ class NoteList extends React.Component {
   }
 
   getNotes () {
-    let { repositories, params, location } = this.props
-    let repositoryKey = params.repositoryKey
-    let folderKey = params.folderKey
+    let { storages, notes, params, location } = this.props
 
     if (location.pathname.match(/\/home/)) {
-      return repositories
-      .reduce((sum, repository) => {
-        return sum.concat(repository.notes)
-      }, [])
+      return notes
     }
 
     if (location.pathname.match(/\/starred/)) {
-      return repositories
-      .reduce((sum, repository) => {
-        return sum.concat(repository.starred
-          .map((starredKey) => {
-            return _.find(repository.notes, {key: starredKey})
-          })
-          .filter((note) => _.isObject(note)))
-      }, [])
+      return notes
+        .filter((note) => note.isStarred)
     }
 
-    let repository = _.find(repositories, {key: repositoryKey})
-    if (repository == null) return []
+    let storageKey = params.storageKey
+    let folderKey = params.folderKey
+    let storage = _.find(storages, {key: storageKey})
+    if (storage == null) return []
 
-    let folder = _.find(repository.folders, {key: folderKey})
+    let folder = _.find(storage.folders, {key: folderKey})
     if (folder == null) {
-      return repository.notes
+      return notes
+        .filter((note) => note.storage === storageKey)
     }
 
-    return repository.notes
+    return notes
       .filter((note) => note.folder === folderKey)
   }
 
@@ -210,11 +192,10 @@ class NoteList extends React.Component {
 
   render () {
     let { location, storages, notes } = this.props
-    this.notes = notes
-    // this.notes = this.getNotes()
+    this.notes = notes = this.getNotes()
+      .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
 
     let noteList = notes
-      .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
       .map((note) => {
         let storage = _.find(storages, {key: note.storage})
         let folder = _.find(storage.folders, {key: note.folder})

From 9a5653f1e3f47eae50738a5f7d90203fd8610a43 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Tue, 19 Jul 2016 02:38:23 +0900
Subject: [PATCH 091/109] preview on blur

---
 browser/components/CodeEditor.js      | 23 ++++++++++---------
 browser/components/MarkdownEditor.js  | 32 ++++++++++++++++++++++++++-
 browser/components/MarkdownPreview.js | 19 +++++++++++++++-
 3 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js
index ea1d2db4..83bb8025 100644
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -13,18 +13,19 @@ export default class CodeEditor extends React.Component {
 
     this.changeHandler = (e) => this.handleChange(e)
     this.blurHandler = (e) => {
-      if (e.relatedTarget === null) {
-        return
+      e.stopPropagation()
+      let el = e.relatedTarget
+      let isStillFocused = false
+      while (el != null) {
+        if (el === this.refs.root) {
+          isStillFocused = true
+          break
+        }
+        el = el.parentNode
       }
+      console.log(isStillFocused)
 
-      let isFocusingToSearch = e.relatedTarget.className && e.relatedTarget.className.split(' ').some((clss) => {
-        return clss === 'ace_search_field' || clss === 'ace_searchbtn' || clss === 'ace_replacebtn' || clss === 'ace_searchbtn_close' || clss === 'ace_text-input'
-      })
-      if (isFocusingToSearch) {
-        return
-      }
-
-      if (this.props.onBlur) this.props.onBlur(e)
+      if (!isStillFocused && this.props.onBlur != null) this.props.onBlur(e)
     }
 
     this.killedBuffer = ''
@@ -230,6 +231,8 @@ export default class CodeEditor extends React.Component {
           ? 'CodeEditor'
           : `CodeEditor ${className}`
         }
+        ref='root'
+        tabIndex='-1'
         style={{
           fontFamily: fontFamily.join(', ')
         }}
diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
index 1d82cece..f99f6f77 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -9,7 +9,7 @@ class MarkdownEditor extends React.Component {
     super(props)
 
     this.state = {
-      status: 'CODE'
+      status: 'PREVIEW'
     }
   }
 
@@ -45,6 +45,32 @@ class MarkdownEditor extends React.Component {
     }
   }
 
+  handleBlur (e) {
+    let { config } = this.props
+    if (config.editor.switchPreview === 'BLUR') {
+      this.setState({
+        status: 'PREVIEW'
+      }, () => {
+        this.refs.preview.focus()
+      })
+    }
+  }
+
+  handlePreviewMouseDown (e) {
+    this.previewMouseDownedAt = new Date()
+  }
+
+  handlePreviewMouseUp (e) {
+    let { config } = this.props
+    if (config.editor.switchPreview === 'BLUR' && new Date() - this.previewMouseDownedAt < 150) {
+      this.setState({
+        status: 'CODE'
+      }, () => {
+        this.refs.code.focus()
+      })
+    }
+  }
+
   focus () {
     if (this.state.status === 'PREVIEW') {
       this.setState({
@@ -77,6 +103,7 @@ class MarkdownEditor extends React.Component {
           : `MarkdownEditor ${className}`
         }
         onContextMenu={(e) => this.handleContextMenu(e)}
+        tabIndex='-1'
       >
         <CodeEditor styleName='codeEditor'
           ref='code'
@@ -88,6 +115,7 @@ class MarkdownEditor extends React.Component {
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
           onChange={(e) => this.handleChange(e)}
+          onBlur={(e) => this.handleBlur(e)}
         />
         <MarkdownPreview styleName={this.state.status === 'PREVIEW'
             ? 'preview'
@@ -103,6 +131,8 @@ class MarkdownEditor extends React.Component {
           onContextMenu={(e) => this.handleContextMenu(e)}
           tabIndex='0'
           value={value}
+          onMouseUp={(e) => this.handlePreviewMouseUp(e)}
+          onMouseDown={(e) => this.handlePreviewMouseDown(e)}
         />
       </div>
     )
diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index 192e12e1..97108c3f 100644
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -7,6 +7,7 @@ const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
 const { shell } = require('electron')
 const goExternal = function (e) {
   e.preventDefault()
+  e.stopPropagation()
   shell.openExternal(e.target.href)
 }
 
@@ -24,20 +25,35 @@ export default class MarkdownPreview extends React.Component {
     super(props)
 
     this.contextMenuHandler = (e) => this.handleContextMenu(e)
+    this.mouseDownHandler = (e) => this.handleMouseDown(e)
+    this.mouseUpHandler = (e) => this.handleMouseUp(e)
   }
 
   handleContextMenu (e) {
     this.props.onContextMenu(e)
   }
 
+  handleMouseDown (e) {
+    if (this.props.onMouseDown != null) this.props.onMouseDown(e)
+  }
+
+  handleMouseUp (e) {
+    if (this.props.onMouseUp != null) this.props.onMouseUp(e)
+  }
+
   componentDidMount () {
     this.refs.root.setAttribute('sandbox', 'allow-same-origin')
     this.refs.root.contentWindow.document.body.addEventListener('contextmenu', this.contextMenuHandler)
     this.rewriteIframe()
+
+    this.refs.root.contentWindow.document.addEventListener('mousedown', this.mouseDownHandler)
+    this.refs.root.contentWindow.document.addEventListener('mouseup', this.mouseUpHandler)
   }
 
   componentWillUnmount () {
     this.refs.root.contentWindow.document.body.removeEventListener('contextmenu', this.contextMenuHandler)
+    this.refs.root.contentWindow.document.removeEventListener('mousedown', this.mouseDownHandler)
+    this.refs.root.contentWindow.document.removeEventListener('mouseup', this.mouseUpHandler)
   }
 
   componentDidUpdate (prevProps) {
@@ -55,6 +71,7 @@ export default class MarkdownPreview extends React.Component {
       el.removeEventListener('click', goExternal)
     })
 
+
     let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
       ? [fontFamily].concat(defaultFontFamily)
@@ -95,7 +112,7 @@ export default class MarkdownPreview extends React.Component {
     this.refs.root.contentWindow.document.body.innerHTML = markdown(value)
 
     Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
-      el.addEventListener('click', goExternal)
+      el.addEventListener('mousedown', goExternal)
     })
   }
 

From 890207daee94b8d7d72ae92b2610b6789dec7f95 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Tue, 19 Jul 2016 08:59:47 +0900
Subject: [PATCH 092/109] auto scroll

---
 browser/components/MarkdownEditor.js  |  4 +++-
 browser/components/MarkdownPreview.js | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/browser/components/MarkdownEditor.js b/browser/components/MarkdownEditor.js
index f99f6f77..2e07bc39 100644
--- a/browser/components/MarkdownEditor.js
+++ b/browser/components/MarkdownEditor.js
@@ -48,10 +48,12 @@ class MarkdownEditor extends React.Component {
   handleBlur (e) {
     let { config } = this.props
     if (config.editor.switchPreview === 'BLUR') {
+      let cursorPosition = this.refs.code.getCursorPosition()
       this.setState({
         status: 'PREVIEW'
       }, () => {
         this.refs.preview.focus()
+        this.refs.preview.scrollTo(cursorPosition.row)
       })
     }
   }
@@ -62,7 +64,7 @@ class MarkdownEditor extends React.Component {
 
   handlePreviewMouseUp (e) {
     let { config } = this.props
-    if (config.editor.switchPreview === 'BLUR' && new Date() - this.previewMouseDownedAt < 150) {
+    if (config.editor.switchPreview === 'BLUR' && new Date() - this.previewMouseDownedAt < 200) {
       this.setState({
         status: 'CODE'
       }, () => {
diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index 97108c3f..45304c11 100644
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -120,6 +120,24 @@ export default class MarkdownPreview extends React.Component {
     this.refs.root.focus()
   }
 
+  getWindow () {
+    return this.refs.root.contentWindow
+  }
+
+  scrollTo (targetRow) {
+    let lineAnchors = this.getWindow().document.querySelectorAll('a.lineAnchor')
+
+    for (let index = 0; index < lineAnchors.length; index++) {
+      let lineAnchor = lineAnchors[index]
+      let row = parseInt(lineAnchor.getAttribute('data-key'))
+      if (row > targetRow) {
+        let targetAnchor = lineAnchors[index - 1]
+        this.getWindow().scrollTo(0, targetAnchor.offsetTop)
+        break
+      }
+    }
+  }
+
   render () {
     let { className, style, tabIndex } = this.props
     return (

From af7476f79a209b6e05453e0b8bc03d7ffaec4764 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Tue, 19 Jul 2016 13:28:18 +0900
Subject: [PATCH 093/109] use flex layout to center modal

---
 browser/main/global.styl  | 4 ++++
 browser/styles/index.styl | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/browser/main/global.styl b/browser/main/global.styl
index cfeb0495..1dee7526 100644
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -65,6 +65,10 @@ modalBackColor = transparentify(white, 65%)
 .ModalBase
   fixed top left bottom right
   z-index modalZIndex
+  display flex
+  align-items center
+  justify-content center
+
   &.hide
     display none
   .modalBack
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 9322259f..6a911bae 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -123,7 +123,7 @@ $modal-border-radius = 5px
 modal()
   position relative
   z-index $modal-z-index
-  margin $modal-margin
+  width 100%
   background-color $modal-background
   overflow hidden
   border-radius $modal-border-radius

From f36f2029e5822da6bf9d593679ad320fa8fa66ca Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Tue, 19 Jul 2016 13:29:05 +0900
Subject: [PATCH 094/109] change layout

---
 browser/main/Main.js                |  18 ++---
 browser/main/Main.styl              |   3 +-
 browser/main/NoteList/NoteList.styl |   3 +-
 browser/main/SideNav/SideNav.styl   |   4 +-
 browser/main/TopBar/TopBar.styl     | 117 +++++++++-------------------
 browser/main/TopBar/index.js        |  77 ++++++++----------
 browser/styles/index.styl           |   2 +-
 7 files changed, 85 insertions(+), 139 deletions(-)

diff --git a/browser/main/Main.js b/browser/main/Main.js
index 1de611b3..265c996b 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -94,18 +94,18 @@ class Main extends React.Component {
             'location'
           ])}
         />
-        <TopBar
-          {..._.pick(this.props, [
-            'dispatch',
-            'storages',
-            'config',
-            'params',
-            'location'
-          ])}
-        />
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
           ref='body'
         >
+          <TopBar style={{width: this.state.listWidth}}
+            {..._.pick(this.props, [
+              'dispatch',
+              'storages',
+              'config',
+              'params',
+              'location'
+            ])}
+          />
           <NoteList style={{width: this.state.listWidth}}
             {..._.pick(this.props, [
               'dispatch',
diff --git a/browser/main/Main.styl b/browser/main/Main.styl
index a30454ed..426d4e62 100644
--- a/browser/main/Main.styl
+++ b/browser/main/Main.styl
@@ -2,9 +2,8 @@
   absolute top left bottom right
 
 .body
-  absolute right
+  absolute right top
   bottom $statusBar-height - 1
-  top $topBar-height - 1
   left $sideNav-width
 
 .body--expanded
diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index 642b5d4b..e31819b4 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -1,8 +1,9 @@
 .root
-  absolute top left bottom
+  absolute left bottom
   border-top $ui-border
   border-bottom $ui-border
   overflow auto
+  top $topBar-height - 1
 
 .item
   position relative
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 6d7e8417..7d9dc948 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -9,12 +9,12 @@
   color $ui-text-color
 
 .top
-  height 60px
+  height $topBar-height
   border-bottom $ui-border
 
 .top-menu
   navButtonColor()
-  height 59px
+  height $topBar-height - 1
   padding 0 10px
   font-size 14px
   width 100%
diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl
index d8fb11dc..947de031 100644
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -1,55 +1,50 @@
 .root
-  absolute top right
-  background-color $ui-backgroundColor
-  left $sideNav-width
-  height $topBar-height -1
-  clearfix()
-
-.left
-  float left
-  height $topBar-height - 1
-  line-height $topBar-height
-
-.left-search
-  margin-top 12px
-  margin-left 25px
-  height 34px
-  width 200px
-  float left
-  border-radius 22px
   position relative
-  background-color white
-  border $ui-border
+  width 100%
+  background-color $ui-backgroundColor
+  height $topBar-height - 1
 
-.left-search-icon
-  absolute left
-  width 36px
-  height 32px
-  padding 0
+$control-height = 34px
+
+.control
+  position absolute
+  top 8px
+  left 8px
+  right 8px
+  height $control-height
+  border $ui-border
+  border-radius 20px
+  overflow hidden
+.control-search
+  absolute top left bottom
+  right 40px
+  background-color white
+
+.control-search-icon
+  absolute top bottom left
   line-height 32px
+  width 35px
   color $ui-inactive-text-color
 
-.left-search-input
+.control-search-input
+  display block
   absolute top bottom right
-  height 32px
-  left 34px
-  border none
-  outline none
-  font-size 14px
+  left 30px
+  input
+    width 100%
+    height 100%
+    outline none
+    border none
 
-.left-control
-  float left
-  margin-left 15px
-
-.left-control-newPostButton
-  width 34px
-  height 34px
-  margin-top 12px
-  border-radius 17px
+.control-newPostButton
+  display block
+  absolute top right bottom
+  width 40px
+  height $control-height - 2
   navButtonColor()
-  border $ui-border
+  border-left $ui-border
   font-size 14px
-  line-height 32px
+  line-height 28px
   padding 0
   &:active
     border-color $ui-button--active-backgroundColor
@@ -57,7 +52,7 @@
     display block
 
 
-.left-control-newPostButton-tooltip
+.control-newPostButton-tooltip
   position fixed
   line-height 1.4
   background-color $ui-tooltip-backgroundColor
@@ -70,39 +65,3 @@
   border-radius 5px
   display none
   pointer-events none
-
-.right
-  float right
-  height $topBar-height -1
-  clearfix()
-
-.right-helpButton
-  width 24px
-  height 24px
-  border-radius 12px
-  navButtonColor()
-  border $ui-border
-  line-height 22px
-  font-size 12px
-  padding 0
-  float left
-  margin-top 17px
-
-.right-linksButton
-  float left
-  height 44px
-  width 44px
-  border-radius 17px
-  background-color transparent
-  border none
-  margin-top 7px
-  margin-left 5px
-  margin-right 15px
-  opacity 0.8
-  &:hover, &:active
-    opacity 1
-
-.root--expanded
-  @extend .root
-  absolute top right
-  left $sideNav--folded-width
diff --git a/browser/main/TopBar/index.js b/browser/main/TopBar/index.js
index a74d7157..966ab934 100644
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -5,6 +5,8 @@ import activityRecord from 'browser/lib/activityRecord'
 import _ from 'lodash'
 import Commander from 'browser/main/lib/Commander'
 import dataApi from 'browser/main/lib/dataApi'
+import modal from 'browser/main/lib/modal'
+import NewNoteModal from 'browser/main/modals/NewNoteModal'
 
 const OSX = window.process.platform === 'darwin'
 
@@ -33,49 +35,46 @@ class TopBar extends React.Component {
   }
 
   handleNewPostButtonClick (e) {
-    let { storages, params, dispatch } = this.props
+    let { storages, params, dispatch, location } = this.props
     let storage = _.find(storages, {key: params.storageKey})
     if (storage == null) storage = storages[0]
     if (storage == null) throw new Error('No storage to create a note')
     let folder = _.find(storage.folders, {key: params.folderKey})
     if (folder == null) folder = storage.folders[0]
     if (folder == null) throw new Error('No folder to craete a note')
-    // activityRecord.emit('ARTICLE_CREATE')
-    console.log(storage, folder)
-    dataApi
-      .createNote(storage.key, folder.key, {
-        title: '',
-        content: ''
-      })
-      .then((note) => {
-        dispatch({
-          type: 'CREATE_NOTE',
-          note: note
-        })
-      })
+
+    modal.open(NewNoteModal, {
+      storage: storage.key,
+      folder: folder.key,
+      dispatch,
+      location
+    })
   }
 
   handleTutorialButtonClick (e) {
   }
 
   render () {
-    let { config } = this.props
+    let { config, style } = this.props
     return (
       <div className='TopBar'
         styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}
+        style={style}
       >
-        <div styleName='left'>
-          <div styleName='left-search'>
-            <i styleName='left-search-icon' className='fa fa-search fa-fw'/>
-            <input styleName='left-search-input'
-              ref='searchInput'
-              onFocus={(e) => this.handleSearchChange(e)}
-              onBlur={(e) => this.handleSearchChange(e)}
-              value={this.state.search}
-              onChange={(e) => this.handleSearchChange(e)}
-              placeholder='Search'
-              type='text'
-            />
+        <div styleName='control'>
+          <div styleName='control-search'>
+            <i styleName='control-search-icon' className='fa fa-search fa-fw'/>
+            <div styleName='control-search-input'>
+              <input
+                ref='searchInput'
+                onFocus={(e) => this.handleSearchChange(e)}
+                onBlur={(e) => this.handleSearchChange(e)}
+                value={this.state.search}
+                onChange={(e) => this.handleSearchChange(e)}
+                placeholder='Search'
+                type='text'
+              />
+            </div>
             {this.state.search > 0 &&
               <button styleName='left-search-clearButton'
                 onClick={(e) => this.handleSearchClearButton(e)}
@@ -83,27 +82,15 @@ class TopBar extends React.Component {
                 <i className='fa fa-times'/>
               </button>
             }
-          </div>
 
-          <div styleName='left-control'>
-            <button styleName='left-control-newPostButton'
-              onClick={(e) => this.handleNewPostButtonClick(e)}>
-              <i className='fa fa-plus'/>
-              <span styleName='left-control-newPostButton-tooltip'>
-                New Note {OSX ? '⌘' : '^'} + n
-              </span>
-            </button>
           </div>
-        </div>
-
-        <div styleName='right'>
-          <button styleName='right-helpButton'
-            onClick={(e) => this.handleTutorialButtonClick(e)}
-            disabled
-          >
-            ?<span styleName='left-control-newPostButton-tooltip'>How to use</span>
+          <button styleName='control-newPostButton'
+            onClick={(e) => this.handleNewPostButtonClick(e)}>
+            <i className='fa fa-plus'/>
+            <span styleName='control-newPostButton-tooltip'>
+              New Note {OSX ? '⌘' : '^'} + n
+            </span>
           </button>
-
         </div>
       </div>
     )
diff --git a/browser/styles/index.styl b/browser/styles/index.styl
index 6a911bae..14d50946 100644
--- a/browser/styles/index.styl
+++ b/browser/styles/index.styl
@@ -7,7 +7,7 @@ $danger-lighten-color = lighten(#c9302c, 5%)
 $statusBar-height = 24px
 $sideNav-width = 200px
 $sideNav--folded-width = 44px
-$topBar-height = 60px
+$topBar-height = 50px
 
 // UI default
 $ui-text-color = #515151

From 69d11b5cd0985e361c0126075f3a2db1808840f2 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Wed, 20 Jul 2016 00:47:25 +0900
Subject: [PATCH 095/109] fix css bugs

content of rendered preview should be selectable
the hit box of width slider should has the highest z-index
---
 browser/components/markdown.styl | 1 +
 browser/main/Main.styl           | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl
index 3556f53c..2cd0f3e2 100644
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -54,6 +54,7 @@ body
   font-family helvetica, arial, sans-serif
   line-height 1.6
   overflow-x hidden
+  user-select all
   .katex
     font 400 1.2em 'KaTeX_Main'
     line-height 1.2em
diff --git a/browser/main/Main.styl b/browser/main/Main.styl
index 426d4e62..f16a583c 100644
--- a/browser/main/Main.styl
+++ b/browser/main/Main.styl
@@ -17,7 +17,6 @@
   border-width 0
   border-style solid
   border-color $ui-borderColor
-  cursor col-resize
 
 .slider--active
   @extend .slider
@@ -27,3 +26,5 @@
   absolute top bottom left right
   width 7px
   left -3px
+  z-index 10
+  cursor col-resize

From b6d34472fe6ea0578c2fad91e5a966a1e99d6538 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Thu, 21 Jul 2016 01:17:53 +0900
Subject: [PATCH 096/109] snippet note

---
 browser/components/MarkdownPreview.js         |   1 -
 browser/lib/modes.js                          | 159 ++++---
 .../{NoteDetail.js => MarkdownNoteDetail.js}  |   8 +-
 ...oteDetail.styl => MarkdownNoteDetail.styl} |   2 +-
 browser/main/Detail/SnippetNoteDetail.js      | 410 ++++++++++++++++++
 browser/main/Detail/SnippetNoteDetail.styl    | 139 ++++++
 browser/main/Detail/index.js                  |  22 +-
 browser/main/NoteList/NoteList.styl           |  10 +-
 browser/main/NoteList/index.js                |  11 +-
 browser/main/SideNav/StorageItem.js           |   2 +-
 browser/main/lib/dataApi.js                   |  38 +-
 browser/main/modals/NewNoteModal.js           | 128 ++++++
 browser/main/modals/NewNoteModal.styl         |  56 +++
 13 files changed, 890 insertions(+), 96 deletions(-)
 rename browser/main/Detail/{NoteDetail.js => MarkdownNoteDetail.js} (96%)
 rename browser/main/Detail/{NoteDetail.styl => MarkdownNoteDetail.styl} (97%)
 create mode 100644 browser/main/Detail/SnippetNoteDetail.js
 create mode 100644 browser/main/Detail/SnippetNoteDetail.styl
 create mode 100644 browser/main/modals/NewNoteModal.js
 create mode 100644 browser/main/modals/NewNoteModal.styl

diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index 45304c11..6d5183ae 100644
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -71,7 +71,6 @@ export default class MarkdownPreview extends React.Component {
       el.removeEventListener('click', goExternal)
     })
 
-
     let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
       ? [fontFamily].concat(defaultFontFamily)
diff --git a/browser/lib/modes.js b/browser/lib/modes.js
index 256769cf..2ea68258 100644
--- a/browser/lib/modes.js
+++ b/browser/lib/modes.js
@@ -1,90 +1,9 @@
 const modes = [
-  // Major
   {
     name: 'text',
     label: 'Plain text',
     mode: 'text'
   },
-  {
-    name: 'markdown',
-    label: 'Markdown',
-    alias: ['md'],
-    mode: 'markdown'
-  },
-  {
-    name: 'javascript',
-    label: 'JavaScript',
-    alias: ['js', 'jscript', 'babel', 'es'],
-    mode: 'javascript'
-  },
-  {
-    name: 'html',
-    label: 'HTML',
-    alias: [],
-    mode: 'html'
-  },
-  {
-    name: 'css',
-    label: 'CSS',
-    alias: ['cascade', 'stylesheet'],
-    mode: 'css'
-  },
-  {
-    name: 'php',
-    label: 'PHP',
-    alias: [],
-    mode: 'php'
-  },
-  {
-    name: 'python',
-    label: 'Python',
-    alias: ['py'],
-    mode: 'python'
-  },
-  {
-    name: 'ruby',
-    label: 'Ruby',
-    alias: ['rb'],
-    mode: 'ruby'
-  },
-  {
-    name: 'java',
-    label: 'Java',
-    alias: [],
-    mode: 'java'
-  },
-  {
-    name: 'c',
-    label: 'C',
-    alias: ['c', 'h', 'clang', 'clang'],
-    mode: 'c_cpp'
-  },
-  {
-    name: 'cpp',
-    label: 'C++',
-    alias: ['cc', 'cpp', 'cxx', 'hh', 'c++', 'cplusplus'],
-    mode: 'c_cpp'
-  },
-  {
-    name: 'csharp',
-    label: 'C#',
-    alias: ['cs', 'c#'],
-    mode: 'csharp'
-  },
-  {
-    name: 'swift',
-    label: 'Swift',
-    alias: [],
-    mode: 'swift'
-  },
-  {
-    name: 'golang',
-    label: 'Go',
-    alias: ['go'],
-    mode: 'golang'
-  },
-
-  // Minor
   {
     name: 'abap',
     label: 'ABAP',
@@ -145,6 +64,12 @@ const modes = [
     alias: ['dos', 'windows', 'bat', 'cmd', 'btm'],
     mode: 'batchfile'
   },
+  {
+    name: 'c',
+    label: 'C',
+    alias: ['c', 'h', 'clang', 'clang'],
+    mode: 'c_cpp'
+  },
   {
     name: 'cirru',
     label: 'Cirru',
@@ -175,6 +100,24 @@ const modes = [
     alias: ['cfm', 'cfc'],
     mode: 'coldfusion'
   },
+  {
+    name: 'cpp',
+    label: 'C++',
+    alias: ['cc', 'cpp', 'cxx', 'hh', 'c++', 'cplusplus'],
+    mode: 'c_cpp'
+  },
+  {
+    name: 'csharp',
+    label: 'C#',
+    alias: ['cs', 'c#'],
+    mode: 'csharp'
+  },
+  {
+    name: 'css',
+    label: 'CSS',
+    alias: ['cascade', 'stylesheet'],
+    mode: 'css'
+  },
   {
     name: 'curly',
     label: 'Curly',
@@ -283,6 +226,12 @@ const modes = [
     alias: ['opengl', 'shading'],
     mode: 'glsl'
   },
+  {
+    name: 'golang',
+    label: 'Go',
+    alias: ['go'],
+    mode: 'golang'
+  },
   {
     name: 'groovy',
     label: 'Groovy',
@@ -313,6 +262,12 @@ const modes = [
     alias: ['hx', 'hxml'],
     mode: 'haxe'
   },
+  {
+    name: 'html',
+    label: 'HTML',
+    alias: [],
+    mode: 'html'
+  },
   {
     name: 'html_ruby',
     label: 'HTML (Ruby)',
@@ -355,6 +310,18 @@ const modes = [
     alias: [],
     mode: 'jade'
   },
+  {
+    name: 'java',
+    label: 'Java',
+    alias: [],
+    mode: 'java'
+  },
+  {
+    name: 'javascript',
+    label: 'JavaScript',
+    alias: ['js', 'jscript', 'babel', 'es'],
+    mode: 'javascript'
+  },
   {
     name: 'json',
     label: 'JSON',
@@ -451,6 +418,12 @@ const modes = [
     alias: [],
     mode: 'makefile'
   },
+  {
+    name: 'markdown',
+    label: 'Markdown',
+    alias: ['md'],
+    mode: 'markdown'
+  },
   {
     name: 'mask',
     label: 'Mask',
@@ -529,6 +502,12 @@ const modes = [
     alias: ['postgres'],
     mode: 'pgsql'
   },
+  {
+    name: 'php',
+    label: 'PHP',
+    alias: [],
+    mode: 'php'
+  },
   {
     name: 'powershell',
     label: 'PowerShell',
@@ -559,6 +538,12 @@ const modes = [
     alias: ['protocol', 'buffers'],
     mode: 'protobuf'
   },
+  {
+    name: 'python',
+    label: 'Python',
+    alias: ['py'],
+    mode: 'python'
+  },
   {
     name: 'r',
     label: 'R',
@@ -571,6 +556,12 @@ const modes = [
     alias: [],
     mode: 'rdoc'
   },
+  {
+    name: 'ruby',
+    label: 'Ruby',
+    alias: ['rb'],
+    mode: 'ruby'
+  },
   {
     name: 'rust',
     label: 'Rust',
@@ -667,6 +658,12 @@ const modes = [
     alias: [],
     mode: 'svg'
   },
+  {
+    name: 'swift',
+    label: 'Swift',
+    alias: [],
+    mode: 'swift'
+  },
   {
     name: 'swig',
     label: 'SWIG',
diff --git a/browser/main/Detail/NoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
similarity index 96%
rename from browser/main/Detail/NoteDetail.js
rename to browser/main/Detail/MarkdownNoteDetail.js
index 25f989ab..f888a795 100644
--- a/browser/main/Detail/NoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
-import styles from './NoteDetail.styl'
+import styles from './MarkdownNoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
@@ -13,7 +13,7 @@ const { remote } = electron
 const Menu = remote.Menu
 const MenuItem = remote.MenuItem
 
-class NoteDetail extends React.Component {
+class MarkdownNoteDetail extends React.Component {
   constructor (props) {
     super(props)
 
@@ -217,7 +217,7 @@ class NoteDetail extends React.Component {
   }
 }
 
-NoteDetail.propTypes = {
+MarkdownNoteDetail.propTypes = {
   dispatch: PropTypes.func,
   repositories: PropTypes.array,
   note: PropTypes.shape({
@@ -229,4 +229,4 @@ NoteDetail.propTypes = {
   ignorePreviewPointerEvents: PropTypes.bool
 }
 
-export default CSSModules(NoteDetail, styles)
+export default CSSModules(MarkdownNoteDetail, styles)
diff --git a/browser/main/Detail/NoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
similarity index 97%
rename from browser/main/Detail/NoteDetail.styl
rename to browser/main/Detail/MarkdownNoteDetail.styl
index 1b8ebe83..8d6236ef 100644
--- a/browser/main/Detail/NoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -2,7 +2,7 @@ $info-height = 75px
 
 .root
   absolute top bottom right
-  border-width 1px 0
+  border-width 0 0 1px
   border-style solid
   border-color $ui-borderColor
 
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
new file mode 100644
index 00000000..d6181b67
--- /dev/null
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -0,0 +1,410 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SnippetNoteDetail.styl'
+import CodeEditor from 'browser/components/CodeEditor'
+import StarButton from './StarButton'
+import TagSelect from './TagSelect'
+import FolderSelect from './FolderSelect'
+import Commander from 'browser/main/lib/Commander'
+import dataApi from 'browser/main/lib/dataApi'
+import modes from 'browser/lib/modes'
+
+const electron = require('electron')
+const { remote } = electron
+const Menu = remote.Menu
+const MenuItem = remote.MenuItem
+
+class SnippetNoteDetail extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      snippetIndex: 0,
+      note: Object.assign({
+        description: ''
+      }, props.note, {
+        snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet))
+      })
+    }
+  }
+
+  componentDidMount () {
+    Commander.bind('note-detail', this)
+  }
+
+  componentWillUnmount () {
+    Commander.release(this)
+  }
+
+  fire (command) {
+    switch (command) {
+      case 'focus':
+        this.refs.description.focus()
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.note.key !== this.props.note.key) {
+      this.setState({
+        snippetIndex: 0,
+        note: Object.assign({
+          description: ''
+        }, nextProps.note, {
+          snippets: nextProps.note.snippets.map((snippet) => Object.assign({}, snippet))
+        })
+      }, () => {
+        let { snippets } = this.state.note
+        snippets.forEach((snippet, index) => {
+          this.refs['code-' + index].reload()
+        })
+        this.refs.tags.reset()
+      })
+    }
+  }
+
+  findTitle (value) {
+    let splitted = value.split('\n')
+    let title = null
+
+    for (let i = 0; i < splitted.length; i++) {
+      let trimmedLine = splitted[i].trim()
+      if (trimmedLine.match(/^# .+/)) {
+        title = trimmedLine.substring(1, trimmedLine.length).trim()
+        break
+      }
+    }
+
+    if (title == null) {
+      for (let i = 0; i < splitted.length; i++) {
+        let trimmedLine = splitted[i].trim()
+        if (trimmedLine.length > 0) {
+          title = trimmedLine
+          break
+        }
+      }
+      if (title == null) {
+        title = ''
+      }
+    }
+
+    return title
+  }
+
+  handleChange (e) {
+    let { note } = this.state
+
+    note.tags = this.refs.tags.value
+    note.description = this.refs.description.value
+    note.updatedAt = new Date()
+    note.title = this.findTitle(note.description)
+
+    this.setState({
+      note
+    }, () => {
+      this.save()
+    })
+  }
+
+  save () {
+    let { note, dispatch } = this.props
+
+    dispatch({
+      type: 'UPDATE_NOTE',
+      note: this.state.note
+    })
+
+    dataApi
+      .updateNote(note.storage, note.folder, note.key, this.state.note)
+  }
+
+  handleFolderChange (e) {
+
+  }
+
+  handleStarButtonClick (e) {
+    let { note } = this.state
+
+    note.isStarred = !note.isStarred
+
+    this.setState({
+      note
+    }, () => {
+      this.save()
+    })
+  }
+
+  exportAsFile () {
+
+  }
+
+  handleShareButtonClick (e) {
+    let menu = new Menu()
+    menu.append(new MenuItem({
+      label: 'Export as a File',
+      click: (e) => this.handlePreferencesButtonClick(e)
+    }))
+    menu.append(new MenuItem({
+      label: 'Export to Web',
+      disabled: true,
+      click: (e) => this.handlePreferencesButtonClick(e)
+    }))
+    menu.popup(remote.getCurrentWindow())
+  }
+
+  handleContextButtonClick (e) {
+    let menu = new Menu()
+    menu.append(new MenuItem({
+      label: 'Delete',
+      click: (e) => this.handlePreferencesButtonClick(e)
+    }))
+    menu.popup(remote.getCurrentWindow())
+  }
+
+  handleTabPlusButtonClick (e) {
+    let { note } = this.state
+
+    note.snippets = note.snippets.concat([{
+      name: '',
+      mode: 'text',
+      content: ''
+    }])
+
+    this.setState({
+      note
+    })
+  }
+
+  handleTabButtonClick (index) {
+    return (e) => {
+      this.setState({
+        snippetIndex: index
+      })
+    }
+  }
+
+  handleTabDeleteButtonClick (index) {
+    return (e) => {
+      if (this.state.note.snippets.length > 1) {
+        let snippets = this.state.note.snippets.slice()
+        snippets.splice(index, 1)
+        this.state.note.snippets = snippets
+        this.setState({
+          note: this.state.note
+        })
+      }
+    }
+  }
+
+  handleNameInputChange (index) {
+    return (e) => {
+      let snippets = this.state.note.snippets.slice()
+      snippets[index].name = e.target.value
+      this.state.note.snippets = snippets
+
+      this.setState({
+        note: this.state.note
+      }, () => {
+        this.save()
+      })
+    }
+  }
+
+  handleModeButtonClick (index) {
+    return (e) => {
+      let menu = new Menu()
+      modes.forEach((mode) => {
+        menu.append(new MenuItem({
+          label: mode.label,
+          click: (e) => this.handleModeOptionClick(index, mode.name)(e)
+        }))
+      })
+      menu.popup(remote.getCurrentWindow())
+    }
+  }
+
+  handleModeOptionClick (index, name) {
+    return (e) => {
+      let snippets = this.state.note.snippets.slice()
+      snippets[index].mode = name
+      this.state.note.snippets = snippets
+
+      this.setState({
+        note: this.state.note
+      }, () => {
+        this.save()
+      })
+    }
+  }
+
+  handleCodeChange (index) {
+    return (e) => {
+      let snippets = this.state.note.snippets.slice()
+      snippets[index].content = this.refs['code-' + index].value
+      this.state.note.snippets = snippets
+      this.setState({
+        note: this.state.note
+      }, () => {
+        this.save()
+      })
+    }
+  }
+
+  render () {
+    let { storages, config } = this.props
+    let { note } = this.state
+
+    let editorFontSize = parseInt(config.editor.fontSize, 10)
+    if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
+    let editorIndentSize = parseInt(config.editor.indentSize, 10)
+    if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
+
+    let tabList = note.snippets.map((snippet, index) => {
+      let isActive = this.state.snippetIndex === index
+      return <div styleName={isActive
+          ? 'tabList-item--active'
+          : 'tabList-item'
+        }
+        key={index}
+      >
+        <button styleName='tabList-item-button'
+          onClick={(e) => this.handleTabButtonClick(index)(e)}
+        >
+          {snippet.name.trim().length > 0
+            ? snippet.name
+            : <span styleName='tabList-item-unnamed'>
+              Unnamed
+            </span>
+          }
+        </button>
+        {note.snippets.length > 1 &&
+          <button styleName='tabList-item-deleteButton'
+            onClick={(e) => this.handleTabDeleteButtonClick(index)(e)}
+          >
+            <i className='fa fa-times'/>
+          </button>
+        }
+      </div>
+    })
+    let viewList = note.snippets.map((snippet, index) => {
+      let isActive = this.state.snippetIndex === index
+      let mode = snippet.mode === 'text'
+        ? null
+        : modes.filter((mode) => mode.name === snippet.mode)[0]
+
+      return <div styleName='tabView'
+        key={index}
+        style={{zIndex: isActive ? 5 : 4}}
+      >
+        <div styleName='tabView-top'>
+          <input styleName='tabView-top-name'
+            placeholder='Filename including extensions...'
+            value={snippet.name}
+            onChange={(e) => this.handleNameInputChange(index)(e)}
+          />
+          <button styleName='tabView-top-mode'
+            onClick={(e) => this.handleModeButtonClick(index)(e)}
+          >
+            {mode == null
+              ? 'Select Syntax...'
+              : mode.label
+            }&nbsp;
+            <i className='fa fa-caret-down'/>
+          </button>
+        </div>
+        <CodeEditor styleName='tabView-content'
+          mode={snippet.mode}
+          value={snippet.content}
+          theme={config.editor.theme}
+          fontFamily={config.editor.fontFamily}
+          fontSize={editorFontSize}
+          indentType={config.editor.indentType}
+          indentSize={editorIndentSize}
+          onChange={(e) => this.handleCodeChange(index)(e)}
+          ref={'code-' + index}
+        />
+      </div>
+    })
+
+    return (
+      <div className='NoteDetail'
+        style={this.props.style}
+        styleName='root'
+      >
+        <div styleName='info'>
+          <div styleName='info-left'>
+
+            <div styleName='info-left-top'>
+              <FolderSelect styleName='info-left-top-folderSelect'
+                value={this.state.note.storage + '-' + this.state.note.folder}
+                ref='folder'
+                storages={storages}
+                onChange={(e) => this.handleFolderChange(e)}
+              />
+            </div>
+            <div styleName='info-left-bottom'>
+              <TagSelect
+                styleName='info-left-bottom-tagSelect'
+                ref='tags'
+                value={this.state.note.tags}
+                onChange={(e) => this.handleChange(e)}
+              />
+            </div>
+          </div>
+          <div styleName='info-right'>
+            <StarButton styleName='info-right-button'
+              onClick={(e) => this.handleStarButtonClick(e)}
+              isActive={note.isStarred}
+            />
+            <button styleName='info-right-button'
+              onClick={(e) => this.handleShareButtonClick(e)}
+            >
+              <i className='fa fa-share-alt fa-fw'/>
+            </button>
+            <button styleName='info-right-button'
+              onClick={(e) => this.handleContextButtonClick(e)}
+            >
+              <i className='fa fa-ellipsis-v'/>
+            </button>
+          </div>
+        </div>
+        <div styleName='body'>
+          <div styleName='body-description'>
+            <textarea styleName='body-description-textarea'
+              style={{
+                fontFamily: config.preview.fontFamily,
+                fontSize: parseInt(config.preview.fontSize, 10)
+              }}
+              ref='description'
+              placeholder='Description...'
+              value={this.state.note.description}
+              onChange={(e) => this.handleChange(e)}
+            />
+          </div>
+          <div styleName='tabList'>
+            {tabList}
+            <button styleName='tabList-plusButton'
+              onClick={(e) => this.handleTabPlusButtonClick(e)}
+            >
+              <i className='fa fa-plus'/>
+            </button>
+          </div>
+          {viewList}
+        </div>
+      </div>
+    )
+  }
+}
+
+SnippetNoteDetail.propTypes = {
+  dispatch: PropTypes.func,
+  repositories: PropTypes.array,
+  note: PropTypes.shape({
+
+  }),
+  style: PropTypes.shape({
+    left: PropTypes.number
+  }),
+  ignorePreviewPointerEvents: PropTypes.bool
+}
+
+export default CSSModules(SnippetNoteDetail, styles)
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
new file mode 100644
index 00000000..f3287205
--- /dev/null
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -0,0 +1,139 @@
+$info-height = 75px
+
+.root
+  absolute top bottom right
+  border-width 0 0 1px
+  border-style solid
+  border-color $ui-borderColor
+
+.info
+  absolute top left right
+  height $info-height
+  border-bottom $ui-border
+  background-color $ui-backgroundColor
+
+.info-left
+  float left
+  padding 0 5px
+
+.info-left-top
+  height 40px
+  line-height 40px
+
+.info-left-top-folderSelect
+  display inline-block
+  height 34px
+  width 200px
+  vertical-align middle
+
+.info-left-bottom
+  height 30px
+
+.info-left-bottom-tagSelect
+  height 30px
+  line-height 30px
+
+.info-right
+  float right
+
+.info-right-button
+  width 34px
+  height 34px
+  border-radius 17px
+  navButtonColor()
+  border $ui-border
+  font-size 14px
+  margin 8px 2px
+  padding 0
+  &:active
+    border-color $ui-button--focus-borderColor
+  &:hover .left-control-newPostButton-tooltip
+    display block
+  &:focus
+    border-color $ui-button--focus-borderColor
+
+.body
+  absolute bottom left right
+  top $info-height
+
+.body-description
+  absolute top left right
+  height 80px
+  border-bottom $ui-border
+
+.body-description-textarea
+  display block
+  height 100%
+  width 100%
+  resize none
+  border none
+  padding 10px
+
+.tabList
+  absolute left right
+  top 80px
+  height 30px
+  border-bottom $ui-border
+  display flex
+  background-color $ui-backgroundColor
+.tabList-item
+  position relative
+  flex 1
+  border-right $ui-border
+  &:hover
+    .tabList-item-deleteButton
+      color $ui-inactive-text-color
+      &:hover
+        background-color darken($ui-backgroundColor, 15%)
+      &:active
+        color white
+        background-color $ui-active-color
+.tabList-item--active
+  @extend .tabList-item
+  .tabList-item-button
+    border-color $brand-color
+.tabList-item-button
+  width 100%
+  height 100%
+  navButtonColor()
+  border-left 4px solid transparent
+.tabList-item-deleteButton
+  position absolute
+  top 5px
+  height 20px
+  right 5px
+  width 20px
+  text-align center
+  border none
+  padding 0
+  color transparent
+  background-color transparent
+  border-radius 2px
+.tabList-plusButton
+  navButtonColor()
+  width 30px
+.tabView
+  absolute left right bottom
+  top 110px
+.tabView-top
+  absolute top left right
+  height 30px
+  border-bottom $ui-border
+  display flex
+.tabView-top-name
+  flex 1
+  border none
+  padding 0 10px
+  font-size 14px
+.tabView-top-mode
+  width 110px
+  padding 0
+  border none
+  border-left $ui-border
+  colorDefaultButton()
+  color $ui-inactive-text-color
+  &:hover
+    color $ui-text-color
+.tabView-content
+  absolute left right bottom
+  top 30px
diff --git a/browser/main/Detail/index.js b/browser/main/Detail/index.js
index d3d28aa2..22239ccf 100644
--- a/browser/main/Detail/index.js
+++ b/browser/main/Detail/index.js
@@ -2,7 +2,8 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './Detail.styl'
 import _ from 'lodash'
-import NoteDetail from './NoteDetail'
+import MarkdownNoteDetail from './MarkdownNoteDetail'
+import SnippetNoteDetail from './SnippetNoteDetail'
 
 const electron = require('electron')
 
@@ -13,7 +14,7 @@ class Detail extends React.Component {
   }
 
   render () {
-    let { storages, location, notes, config } = this.props
+    let { location, notes, config } = this.props
     let note = null
     if (location.query.key != null) {
       let splitted = location.query.key.split('-')
@@ -41,8 +42,23 @@ class Detail extends React.Component {
       )
     }
 
+    if (note.type === 'SNIPPET_NOTE') {
+      return (
+        <SnippetNoteDetail
+          note={note}
+          config={config}
+          {..._.pick(this.props, [
+            'dispatch',
+            'storages',
+            'style',
+            'ignorePreviewPointerEvents'
+          ])}
+        />
+      )
+    }
+
     return (
-      <NoteDetail
+      <MarkdownNoteDetail
         note={note}
         config={config}
         {..._.pick(this.props, [
diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index e31819b4..d7166f9e 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -54,9 +54,17 @@
 .item-title
   height 20px
   line-height 20px
-  padding 0 5px
+  padding 0 5px 0 0
   font-weight bold
   overflow ellipsis
+  color $ui-text-color
+.item-title-icon
+  font-size 12px
+  color $ui-inactive-text-color
+  padding-right 3px
+.item-title-empty
+  font-weight normal
+  color $ui-inactive-text-color
 
 .item-tagList
   height 30px
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index 2c90c9c9..2dc52e24 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -236,7 +236,16 @@ class NoteList extends React.Component {
 
             </div>
 
-            <div styleName='item-title'>{note.title}</div>
+            <div styleName='item-title'>
+              {note.type === 'SNIPPET_NOTE'
+                ? <i styleName='item-title-icon' className='fa fa-fw fa-code'/>
+                : <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o'/>
+              }
+              {note.title.trim().length > 0
+                ? note.title
+                : <span styleName='item-title-empty'>Empty</span>
+              }
+            </div>
 
             <div styleName='item-tagList'>
               <i styleName='item-tagList-icon'
diff --git a/browser/main/SideNav/StorageItem.js b/browser/main/SideNav/StorageItem.js
index 8bed86cd..3fb5caf0 100644
--- a/browser/main/SideNav/StorageItem.js
+++ b/browser/main/SideNav/StorageItem.js
@@ -8,7 +8,7 @@ class StorageItem extends React.Component {
     super(props)
 
     this.state = {
-      isOpen: false
+      isOpen: true
     }
   }
 
diff --git a/browser/main/lib/dataApi.js b/browser/main/lib/dataApi.js
index 2a19a257..10362b64 100644
--- a/browser/main/lib/dataApi.js
+++ b/browser/main/lib/dataApi.js
@@ -322,18 +322,49 @@ function removeFolder (storageKey, folderKey) {
     .then((storage) => storage.toJSON())
 }
 
-function createNote (storageKey, folderKey, input) {
+function createMarkdownNote (storageKey, folderKey, input) {
   let key = keygen()
   while (notes.some((note) => note.storage === storageKey && note.folder === folderKey && note.key === key)) {
     key = keygen()
   }
 
   let newNote = new Note(Object.assign({
-    type: 'MARKDOWN_NOTE',
     tags: [],
     title: '',
     content: ''
   }, input, {
+    type: 'MARKDOWN_NOTE',
+    storage: storageKey,
+    folder: folderKey,
+    key: key,
+    isStarred: false,
+    createdAt: new Date(),
+    updatedAt: new Date()
+  }))
+  notes.push(newNote)
+
+  return newNote
+    .save()
+    .then(() => newNote.toJSON())
+}
+
+function createSnippetNote (storageKey, folderKey, input) {
+  let key = keygen()
+  while (notes.some((note) => note.storage === storageKey && note.folder === folderKey && note.key === key)) {
+    key = keygen()
+  }
+
+  let newNote = new Note(Object.assign({
+    tags: [],
+    title: '',
+    description: '',
+    snippets: [{
+      name: '',
+      mode: 'text',
+      content: ''
+    }]
+  }, input, {
+    type: 'SNIPPET_NOTE',
     storage: storageKey,
     folder: folderKey,
     key: key,
@@ -374,7 +405,8 @@ export default {
   createFolder,
   updateFolder,
   removeFolder,
-  createNote,
+  createMarkdownNote,
+  createSnippetNote,
   updateNote,
   removeNote
 }
diff --git a/browser/main/modals/NewNoteModal.js b/browser/main/modals/NewNoteModal.js
new file mode 100644
index 00000000..72a5fd3e
--- /dev/null
+++ b/browser/main/modals/NewNoteModal.js
@@ -0,0 +1,128 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './NewNoteModal.styl'
+import dataApi from 'browser/main/lib/dataApi'
+import { hashHistory } from 'react-router'
+
+class NewNoteModal extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+    }
+  }
+
+  componentDidMount () {
+    this.refs.markdownButton.focus()
+  }
+
+  handleCloseButtonClick (e) {
+    this.props.close()
+  }
+
+  handleMarkdownNoteButtonClick (e) {
+    let { storage, folder, dispatch, location } = this.props
+    dataApi
+      .createMarkdownNote(storage, folder, {
+        title: '',
+        content: ''
+      })
+      .then((note) => {
+        dispatch({
+          type: 'CREATE_NOTE',
+          note: note
+        })
+        hashHistory.push({
+          pathname: location.pathname,
+          query: {key: note.uniqueKey}
+        })
+        this.props.close()
+      })
+  }
+  handleMarkdownNoteButtonKeyDown (e) {
+    if (e.keyCode === 9) {
+      e.preventDefault()
+      this.refs.snippetButton.focus()
+    }
+  }
+
+  handleSnippetNoteButtonClick (e) {
+    let { storage, folder, dispatch, location } = this.props
+    dataApi
+      .createSnippetNote(storage, folder, {
+        title: '',
+        description: '',
+        snippets: [{
+          name: '',
+          mode: 'text',
+          content: ''
+        }]
+      })
+      .then((note) => {
+        dispatch({
+          type: 'CREATE_NOTE',
+          note: note
+        })
+        hashHistory.push({
+          pathname: location.pathname,
+          query: {key: note.uniqueKey}
+        })
+        this.props.close()
+      })
+  }
+
+  handleSnippetNoteButtonKeyDown (e) {
+    if (e.keyCode === 9) {
+      e.preventDefault()
+      this.refs.markdownButton.focus()
+    }
+  }
+
+  render () {
+    return (
+      <div styleName='root'>
+        <div styleName='header'>
+          <div styleName='title'>New Note</div>
+        </div>
+        <button styleName='closeButton'
+          onClick={(e) => this.handleCloseButtonClick(e)}
+        >Close</button>
+
+        <div styleName='control'>
+          <button styleName='control-button'
+            onClick={(e) => this.handleMarkdownNoteButtonClick(e)}
+            onKeyDown={(e) => this.handleMarkdownNoteButtonKeyDown(e)}
+            ref='markdownButton'
+          >
+            <i styleName='control-button-icon'
+              className='fa fa-file-text-o'
+            /><br/>
+            <span styleName='control-button-label'>Markdown Note</span><br/>
+            <span styleName='control-button-description'>It is good for any type of documents. Check List, Code block and Latex block are available.</span>
+          </button>
+
+          <button styleName='control-button'
+            onClick={(e) => this.handleSnippetNoteButtonClick(e)}
+            onKeyDown={(e) => this.handleSnippetNoteButtonKeyDown(e)}
+            ref='snippetButton'
+          >
+            <i styleName='control-button-icon'
+              className='fa fa-code'
+            /><br/>
+            <span styleName='control-button-label'>Snippet Note</span><br/>
+            <span styleName='control-button-description'>This format is specialized on managing snippets like Gist. Multiple snippets can be grouped as a note.
+            </span>
+          </button>
+
+        </div>
+        <div styleName='description'><i className='fa fa-arrows-h'/> Tab to switch format</div>
+
+      </div>
+    )
+  }
+}
+
+NewNoteModal.propTypes = {
+}
+
+export default CSSModules(NewNoteModal, styles)
diff --git a/browser/main/modals/NewNoteModal.styl b/browser/main/modals/NewNoteModal.styl
new file mode 100644
index 00000000..7973a463
--- /dev/null
+++ b/browser/main/modals/NewNoteModal.styl
@@ -0,0 +1,56 @@
+.root
+  modal()
+  max-width 540px
+  overflow hidden
+  position relative
+
+.header
+  height 50px
+  font-size 18px
+  line-height 50px
+  padding 0 15px
+  background-color $ui-backgroundColor
+  border-bottom solid 1px $ui-borderColor
+  color $ui-text-color
+
+.closeButton
+  position absolute
+  top 10px
+  right 10px
+  height 30px
+  width 0 25px
+  border $ui-border
+  border-radius 2px
+  color $ui-text-color
+  colorDefaultButton()
+
+.control
+  padding 25px 15px 15px
+  text-align center
+
+.control-button
+  width 220px
+  height 220px
+  margin 0 15px
+  border $ui-border
+  border-radius 5px
+  color $ui-text-color
+  colorDefaultButton()
+  padding 10px
+  &:focus
+    colorPrimaryButton()
+
+.control-button-icon
+  font-size 50px
+  margin-bottom 15px
+
+.control-button-label
+  font-size 18px
+  line-height 32px
+.control-button-description
+  font-size 12px
+
+.description
+  color $ui-inactive-text-color
+  text-align center
+  margin-bottom 25px

From 6c67b96e30059138f2fb2d47ade6bf417f4bf7a4 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Thu, 21 Jul 2016 03:21:53 +0900
Subject: [PATCH 097/109] search

---
 browser/main/Main.js            |   1 +
 browser/main/TopBar/TopBar.styl |  41 +++++++++-
 browser/main/TopBar/index.js    | 128 ++++++++++++++++++++++++++------
 3 files changed, 148 insertions(+), 22 deletions(-)

diff --git a/browser/main/Main.js b/browser/main/Main.js
index 265c996b..33e770a0 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -102,6 +102,7 @@ class Main extends React.Component {
               'dispatch',
               'storages',
               'config',
+              'notes',
               'params',
               'location'
             ])}
diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl
index 947de031..ae6a18e9 100644
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -36,6 +36,46 @@ $control-height = 34px
     outline none
     border none
 
+.control-search-optionList
+  position fixed
+  z-index 200
+  width 275px
+  height 175px
+  overflow-y auto
+  background-color $modal-background
+  border-radius 2px
+  box-shadow 2px 2px 10px gray
+
+.control-search-optionList-item
+  height 50px
+  border-bottom $ui-border
+  transition background-color 0.15s
+  padding 5px
+  cursor pointer
+  overflow ellipsis
+  &:hover
+    background-color alpha($ui-active-color, 10%)
+.control-search-optionList-item-folder
+  border-left 4px solid transparent
+  padding 2px 5px
+  color $ui-text-color
+  overflow ellipsis
+  font-size 12px
+  height 16px
+  margin-bottom 4px
+.control-search-optionList-item-folder-surfix
+  font-size 10px
+  margin-left 5px
+  color $ui-inactive-text-color
+.control-search-optionList-item-type
+  font-size 12px
+  color $ui-inactive-text-color
+  padding-right 3px
+.control-search-optionList-empty
+  height 150px
+  color $ui-inactive-text-color
+  line-height 150px
+  text-align center
 .control-newPostButton
   display block
   absolute top right bottom
@@ -51,7 +91,6 @@ $control-height = 34px
   &:hover .left-control-newPostButton-tooltip
     display block
 
-
 .control-newPostButton-tooltip
   position fixed
   line-height 1.4
diff --git a/browser/main/TopBar/index.js b/browser/main/TopBar/index.js
index 966ab934..1dc64ace 100644
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -7,6 +7,7 @@ import Commander from 'browser/main/lib/Commander'
 import dataApi from 'browser/main/lib/dataApi'
 import modal from 'browser/main/lib/modal'
 import NewNoteModal from 'browser/main/modals/NewNoteModal'
+import { hashHistory } from 'react-router'
 
 const OSX = window.process.platform === 'darwin'
 
@@ -15,25 +16,12 @@ class TopBar extends React.Component {
     super(props)
 
     this.state = {
-      search: ''
+      search: '',
+      searchOptions: [],
+      searchPopupOpen: false
     }
   }
 
-  isInputFocused () {
-    return document.activeElement === this.refs.searchInput
-  }
-
-  escape () {
-  }
-
-  focusInput () {
-    this.searchInput.focus()
-  }
-
-  blurInput () {
-    this.searchInput.blur()
-  }
-
   handleNewPostButtonClick (e) {
     let { storages, params, dispatch, location } = this.props
     let storage = _.find(storages, {key: params.storageKey})
@@ -51,11 +39,98 @@ class TopBar extends React.Component {
     })
   }
 
-  handleTutorialButtonClick (e) {
+  handleSearchChange (e) {
+    this.setState({
+      search: this.refs.searchInput.value
+    })
+  }
+
+  getOptions () {
+    let { notes } = this.props
+    let { search } = this.state
+    if (search.trim().length === 0) return []
+    let searchBlocks = search.split(' ')
+    searchBlocks.forEach((block) => {
+      if (block.match(/^#.+/)) {
+        let tag = block.match(/#(.+)/)[1]
+        notes = notes.filter((note) => note.tags.some((_tag) => _tag === tag))
+      }
+      notes = notes.filter((note) => {
+        if (note.type === 'SNIPPET_NOTE') {
+          return note.description.match(block)
+        } else if (note.type === 'MARKDOWN_NOTE') {
+          return note.content.match(block)
+        }
+        return false
+      })
+    })
+
+    return notes
+  }
+
+  handleOptionClick (uniqueKey) {
+    return (e) => {
+      this.setState({
+        searchPopupOpen: false
+      }, () => {
+        let { location } = this.props
+        hashHistory.push({
+          pathname: location.pathname,
+          query: {
+            key: uniqueKey
+          }
+        })
+      })
+    }
+  }
+
+  handleSearchFocus (e) {
+    this.setState({
+      searchPopupOpen: true
+    })
+  }
+  handleSearchBlur (e) {
+    e.stopPropagation()
+
+    let el = e.relatedTarget
+    let isStillFocused = false
+    while (el != null) {
+      if (el === this.refs.search) {
+        isStillFocused = true
+        break
+      }
+      el = el.parentNode
+    }
+    if (!isStillFocused) {
+      this.setState({
+        searchPopupOpen: false
+      })
+    }
   }
 
   render () {
-    let { config, style } = this.props
+    let { config, style, storages } = this.props
+    let searchOptionList = this.getOptions()
+      .map((note) => {
+        let storage = _.find(storages, {key: note.storage})
+        let folder = _.find(storage.folders, {key: note.folder})
+        return <div styleName='control-search-optionList-item'
+          key={note.uniqueKey}
+          onClick={(e) => this.handleOptionClick(note.uniqueKey)(e)}
+        >
+          <div styleName='control-search-optionList-item-folder'
+            style={{borderColor: folder.color}}>
+            {folder.name}
+            <span styleName='control-search-optionList-item-folder-surfix'>in {storage.name}</span>
+          </div>
+          {note.type === 'SNIPPET_NOTE'
+            ? <i styleName='control-search-optionList-item-type' className='fa fa-code'/>
+            : <i styleName='control-search-optionList-item-type' className='fa fa-file-text-o'/>
+          }&nbsp;
+          {note.title}
+        </div>
+      })
+
     return (
       <div className='TopBar'
         styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}
@@ -64,16 +139,27 @@ class TopBar extends React.Component {
         <div styleName='control'>
           <div styleName='control-search'>
             <i styleName='control-search-icon' className='fa fa-search fa-fw'/>
-            <div styleName='control-search-input'>
+            <div styleName='control-search-input'
+              onFocus={(e) => this.handleSearchFocus(e)}
+              onBlur={(e) => this.handleSearchBlur(e)}
+              tabIndex='-1'
+              ref='search'
+            >
               <input
                 ref='searchInput'
-                onFocus={(e) => this.handleSearchChange(e)}
-                onBlur={(e) => this.handleSearchChange(e)}
                 value={this.state.search}
                 onChange={(e) => this.handleSearchChange(e)}
                 placeholder='Search'
                 type='text'
               />
+              {this.state.searchPopupOpen &&
+                <div styleName='control-search-optionList'>
+                  {searchOptionList.length > 0
+                    ? searchOptionList
+                    : <div styleName='control-search-optionList-empty'>Empty List</div>
+                  }
+                </div>
+              }
             </div>
             {this.state.search > 0 &&
               <button styleName='left-search-clearButton'

From 3882df41f194d3daffc7891fe8cf2bb742b28b5e Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Thu, 21 Jul 2016 22:51:18 +0900
Subject: [PATCH 098/109] fix tag search bug

---
 browser/main/TopBar/index.js | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/browser/main/TopBar/index.js b/browser/main/TopBar/index.js
index 1dc64ace..cf435e93 100644
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -1,10 +1,7 @@
 import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TopBar.styl'
-import activityRecord from 'browser/lib/activityRecord'
 import _ from 'lodash'
-import Commander from 'browser/main/lib/Commander'
-import dataApi from 'browser/main/lib/dataApi'
 import modal from 'browser/main/lib/modal'
 import NewNoteModal from 'browser/main/modals/NewNoteModal'
 import { hashHistory } from 'react-router'
@@ -53,16 +50,23 @@ class TopBar extends React.Component {
     searchBlocks.forEach((block) => {
       if (block.match(/^#.+/)) {
         let tag = block.match(/#(.+)/)[1]
-        notes = notes.filter((note) => note.tags.some((_tag) => _tag === tag))
+        notes = notes
+          .filter((note) => {
+            if (!_.isArray(note.tags)) return false
+            return note.tags.some((_tag) => {
+              return _tag === tag
+            })
+          })
+      } else {
+        notes = notes.filter((note) => {
+          if (note.type === 'SNIPPET_NOTE') {
+            return note.description.match(block)
+          } else if (note.type === 'MARKDOWN_NOTE') {
+            return note.content.match(block)
+          }
+          return false
+        })
       }
-      notes = notes.filter((note) => {
-        if (note.type === 'SNIPPET_NOTE') {
-          return note.description.match(block)
-        } else if (note.type === 'MARKDOWN_NOTE') {
-          return note.content.match(block)
-        }
-        return false
-      })
     })
 
     return notes

From a6e3dbd825ccf9a5380098b587f67ecc5157a94e Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Thu, 21 Jul 2016 23:44:00 +0900
Subject: [PATCH 099/109] change folder

---
 browser/main/Detail/FolderSelect.js       | 10 ++---
 browser/main/Detail/MarkdownNoteDetail.js | 45 ++++++++++++++++++-----
 browser/main/Detail/SnippetNoteDetail.js  | 30 +++++++++++++++
 browser/main/Detail/index.js              |  7 +++-
 browser/main/lib/dataApi.js               | 39 ++++++++++++++++++--
 browser/main/store.js                     |  7 ++++
 6 files changed, 118 insertions(+), 20 deletions(-)

diff --git a/browser/main/Detail/FolderSelect.js b/browser/main/Detail/FolderSelect.js
index a937275a..dd23616c 100644
--- a/browser/main/Detail/FolderSelect.js
+++ b/browser/main/Detail/FolderSelect.js
@@ -166,20 +166,20 @@ class FolderSelect extends React.Component {
     }
   }
 
-  handleOptionClick (folderKey) {
+  handleOptionClick (storageKey, folderKey) {
     return (e) => {
       e.stopPropagation()
       this.setState({
         status: 'FOCUS'
       }, () => {
-        this.setValue(folderKey)
+        this.setValue(storageKey + '-' + folderKey)
         this.refs.root.focus()
       })
     }
   }
 
-  setValue (folderKey) {
-    this.value = folderKey
+  setValue (value) {
+    this.value = value
     this.props.onChange()
   }
 
@@ -208,7 +208,7 @@ class FolderSelect extends React.Component {
               : 'search-optionList-item'
             }
             key={option.storage.key + '-' + option.folder.key}
-            onClick={(e) => this.handleOptionClick(option.folder.key)(e)}
+            onClick={(e) => this.handleOptionClick(option.storage.key, option.folder.key)(e)}
           >
             <span styleName='search-optionList-item-name'
               style={{borderColor: option.folder.color}}
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index f888a795..9478bb87 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -7,6 +7,7 @@ import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
 import Commander from 'browser/main/lib/Commander'
 import dataApi from 'browser/main/lib/dataApi'
+import { hashHistory } from 'react-router'
 
 const electron = require('electron')
 const { remote } = electron
@@ -20,9 +21,9 @@ class MarkdownNoteDetail extends React.Component {
     this.state = {
       note: Object.assign({
         title: '',
-        content: ''
-      }, props.note),
-      isDispatchQueued: false
+        content: '',
+        isMovingNote: false
+      }, props.note)
     }
     this.dispatchTimer = null
   }
@@ -43,14 +44,9 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   componentWillReceiveProps (nextProps) {
-    if (nextProps.note.key !== this.props.note.key) {
-      if (this.state.isDispatchQueued) {
-        this.cancelDispatchQueue()
-        this.dispatch()
-      }
+    if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
       this.setState({
-        note: Object.assign({}, nextProps.note),
-        isDispatchQueued: false
+        note: Object.assign({}, nextProps.note)
       }, () => {
         this.refs.content.reload()
         this.refs.tags.reset()
@@ -114,7 +110,36 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleFolderChange (e) {
+    let { note } = this.state
+    let value = this.refs.folder.value
+    let splitted = value.split('-')
+    let newStorageKey = splitted.shift()
+    let newFolderKey = splitted.shift()
 
+    dataApi
+      .moveNote(note.storage, note.folder, note.key, newStorageKey, newFolderKey)
+      .then((newNote) => {
+        this.setState({
+          isMovingNote: true,
+          note: Object.assign({}, newNote)
+        }, () => {
+          let { dispatch, location } = this.props
+          dispatch({
+            type: 'MOVE_NOTE',
+            note: note,
+            newNote: newNote
+          })
+          hashHistory.replace({
+            pathname: location.pathname,
+            query: {
+              key: newNote.uniqueKey
+            }
+          })
+          this.setState({
+            isMovingNote: false
+          })
+        })
+      })
   }
 
   handleStarButtonClick (e) {
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index d6181b67..b3bb6443 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -8,6 +8,7 @@ import FolderSelect from './FolderSelect'
 import Commander from 'browser/main/lib/Commander'
 import dataApi from 'browser/main/lib/dataApi'
 import modes from 'browser/lib/modes'
+import { hashHistory } from 'react-router'
 
 const electron = require('electron')
 const { remote } = electron
@@ -118,7 +119,36 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleFolderChange (e) {
+    let { note } = this.state
+    let value = this.refs.folder.value
+    let splitted = value.split('-')
+    let newStorageKey = splitted.shift()
+    let newFolderKey = splitted.shift()
 
+    dataApi
+      .moveNote(note.storage, note.folder, note.key, newStorageKey, newFolderKey)
+      .then((newNote) => {
+        this.setState({
+          isMovingNote: true,
+          note: Object.assign({}, newNote)
+        }, () => {
+          let { dispatch, location } = this.props
+          dispatch({
+            type: 'MOVE_NOTE',
+            note: note,
+            newNote: newNote
+          })
+          hashHistory.replace({
+            pathname: location.pathname,
+            query: {
+              key: newNote.uniqueKey
+            }
+          })
+          this.setState({
+            isMovingNote: false
+          })
+        })
+      })
   }
 
   handleStarButtonClick (e) {
diff --git a/browser/main/Detail/index.js b/browser/main/Detail/index.js
index 22239ccf..c9139ce5 100644
--- a/browser/main/Detail/index.js
+++ b/browser/main/Detail/index.js
@@ -4,6 +4,7 @@ import styles from './Detail.styl'
 import _ from 'lodash'
 import MarkdownNoteDetail from './MarkdownNoteDetail'
 import SnippetNoteDetail from './SnippetNoteDetail'
+import dataApi from 'browser/main/lib/dataApi'
 
 const electron = require('electron')
 
@@ -51,7 +52,8 @@ class Detail extends React.Component {
             'dispatch',
             'storages',
             'style',
-            'ignorePreviewPointerEvents'
+            'ignorePreviewPointerEvents',
+            'location'
           ])}
         />
       )
@@ -65,7 +67,8 @@ class Detail extends React.Component {
           'dispatch',
           'storages',
           'style',
-          'ignorePreviewPointerEvents'
+          'ignorePreviewPointerEvents',
+          'location'
         ])}
       />
     )
diff --git a/browser/main/lib/dataApi.js b/browser/main/lib/dataApi.js
index 10362b64..010e03d4 100644
--- a/browser/main/lib/dataApi.js
+++ b/browser/main/lib/dataApi.js
@@ -18,12 +18,15 @@ function queueSaveFolder (storageKey, folderKey) {
     clearTimeout(task.timer)
   })
   queuedTasks = queuedTasks.filter((task) => task.storage !== storageKey || task.folder !== folderKey)
-
   let newTimer = setTimeout(() => {
     let folderNotes = notes.filter((note) => note.storage === storageKey && note.folder === folderKey)
     sander
       .writeFile(path.join(storage.cache.path, folderKey, 'data.json'), JSON.stringify({
-        notes: folderNotes
+        notes: folderNotes.map((note) => {
+          let json = note.toJSON()
+          delete json.storage
+          return json
+        })
       }))
   }, 1500)
 
@@ -398,6 +401,35 @@ function removeNote (storageKey, folderKey, noteKey, input) {
 
 }
 
+function moveNote (storageKey, folderKey, noteKey, newStorageKey, newFolderKey) {
+  let note = _.find(notes, {
+    key: noteKey,
+    storage: storageKey,
+    folder: folderKey
+  })
+  if (note == null) throw new Error('Note doesn\'t exist.')
+
+  let storage = _.find(storages, {key: newStorageKey})
+  if (storage == null) throw new Error('Storage doesn\'t exist.')
+  let folder = _.find(storage.data.folders, {key: newFolderKey})
+  if (folder == null) throw new Error('Folder doesn\'t exist.')
+  note.storage = storage.key
+  note.data.storage = storage.key
+  note.folder = folder.key
+  note.data.folder = folder.key
+  let key = note.key
+  while (notes.some((note) => note.storage === storage.key && note.folder === folder.key && note.key === key)) {
+    key = keygen()
+  }
+  note.key = key
+  note.data.key = key
+  note.uniqueKey = `${note.storage}-${note.folder}-${note.key}`
+  console.log(note.uniqueKey)
+  queueSaveFolder(storageKey, folderKey)
+  return note.save()
+    .then(() => note.toJSON())
+}
+
 export default {
   init,
   addStorage,
@@ -408,5 +440,6 @@ export default {
   createMarkdownNote,
   createSnippetNote,
   updateNote,
-  removeNote
+  removeNote,
+  moveNote
 }
diff --git a/browser/main/store.js b/browser/main/store.js
index 93060405..85dac683 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -79,6 +79,13 @@ function notes (state = [], action) {
         notes.push(action.note)
         return notes
       }
+    case 'MOVE_NOTE':
+      {
+        let notes = state.slice()
+        notes = notes.filter((note) => note.key !== action.note.key || note.folder !== action.note.folder || note.storage !== action.note.storage)
+        notes.push(action.newNote)
+        return notes
+      }
   }
   return state
 }

From 40410eb10f8c54b3114562bbf8c84225a27c34de Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Fri, 22 Jul 2016 08:39:25 +0900
Subject: [PATCH 100/109] hotkey config

---
 browser/main/global.styl                      |  6 +-
 browser/main/lib/ConfigManager.js             | 11 ++++
 .../main/modals/PreferencesModal/ConfigTab.js | 24 ++++---
 .../modals/PreferencesModal/ConfigTab.styl    |  8 +++
 .../main/modals/PreferencesModal/InfoTab.js   |  4 +-
 lib/hotkey.js                                 | 64 ++-----------------
 6 files changed, 43 insertions(+), 74 deletions(-)

diff --git a/browser/main/global.styl b/browser/main/global.styl
index 1dee7526..2726a551 100644
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -37,7 +37,11 @@ button
   font-size 12px
   &:focus, &.focus
     outline none
-
+  &:disabled
+    cursor not-allowed
+input
+  &:disabled
+    cursor not-allowed
 .noSelect
   noSelect()
 
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index dbc8c59d..b353a043 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -1,6 +1,8 @@
 import _ from 'lodash'
 
 const OSX = global.process.platform === 'darwin'
+const electron = require('electron')
+const { ipcRenderer } = electron
 
 const defaultConfig = {
   zoom: 1,
@@ -64,8 +66,17 @@ function set (updates) {
   let newConfig = Object.assign({}, defaultConfig, currentConfig, updates)
   if (!validate(newConfig)) throw new Error('INVALID CONFIG')
   _save(newConfig)
+  ipcRenderer.send('CONFIG_RENEW', {
+    config: get(),
+    silent: false
+  })
 }
 
+ipcRenderer.send('CONFIG_RENEW', {
+  config: get(),
+  silent: true
+})
+
 export default {
   get,
   set,
diff --git a/browser/main/modals/PreferencesModal/ConfigTab.js b/browser/main/modals/PreferencesModal/ConfigTab.js
index af789ff4..ade253c4 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.js
+++ b/browser/main/modals/PreferencesModal/ConfigTab.js
@@ -25,7 +25,7 @@ class ConfigTab extends React.Component {
     this.handleSettingDone = () => {
       this.setState({keymapAlert: {
         type: 'success',
-        message: 'Successfully done!'
+        message: 'Successfully applied!'
       }})
     }
     this.handleSettingError = (err) => {
@@ -43,20 +43,17 @@ class ConfigTab extends React.Component {
     ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError)
   }
 
-  submitHotKey () {
-    ipc.send('hotkeyUpdated', this.state.keymap)
-  }
-
-  submitConfig () {
-    ipc.send('configUpdated', this.state.config)
-  }
-
   handleSaveButtonClick (e) {
-    this.submitHotKey()
-  }
+    let newConfig = {
+      hotkey: this.state.config.hotkey
+    }
 
-  handleConfigSaveButtonClick (e) {
-    this.submitConfig()
+    ConfigManager.set(newConfig)
+
+    store.dispatch({
+      type: 'SET_UI',
+      config: newConfig
+    })
   }
 
   handleKeyDown (e) {
@@ -183,6 +180,7 @@ class ConfigTab extends React.Component {
                 ref='toggleFinder'
                 value={config.hotkey.toggleFinder}
                 type='text'
+                disabled
               />
             </div>
           </div>
diff --git a/browser/main/modals/PreferencesModal/ConfigTab.styl b/browser/main/modals/PreferencesModal/ConfigTab.styl
index b847ba8a..51ed9776 100644
--- a/browser/main/modals/PreferencesModal/ConfigTab.styl
+++ b/browser/main/modals/PreferencesModal/ConfigTab.styl
@@ -34,6 +34,8 @@
   border solid 1px $border-color
   border-radius 2px
   padding 0 5px
+  &:disabled
+    background-color $ui-input--disabled-backgroundColor
 
 .group-checkBoxSection
   margin-bottom 15px
@@ -47,6 +49,12 @@
   box-sizing border-box
   height 40px
   text-align right
+  :global
+    .alert
+      font-size 12px
+      line-height 30px
+      padding 0 5px
+      float right
 .group-control-leftButton
   float left
   colorDefaultButton()
diff --git a/browser/main/modals/PreferencesModal/InfoTab.js b/browser/main/modals/PreferencesModal/InfoTab.js
index 001773b2..5980774b 100644
--- a/browser/main/modals/PreferencesModal/InfoTab.js
+++ b/browser/main/modals/PreferencesModal/InfoTab.js
@@ -2,9 +2,9 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoTab.styl'
 
-const appVersion = global.process.version
 const electron = require('electron')
-const { shell } = electron
+const { shell, remote } = electron
+const appVersion = remote.app.getVersion()
 
 class InfoTab extends React.Component {
   constructor (props) {
diff --git a/lib/hotkey.js b/lib/hotkey.js
index 3573174d..063305c4 100644
--- a/lib/hotkey.js
+++ b/lib/hotkey.js
@@ -1,43 +1,9 @@
 const electron = require('electron')
-const app = electron.app
 const ipc = electron.ipcMain
 const Menu = electron.Menu
 const globalShortcut = electron.globalShortcut
-const jetpack = require('fs-jetpack')
 const mainWindow = require('./main-window')
 const nodeIpc = require('@rokt33r/node-ipc')
-const _ = require('lodash')
-
-const OSX = global.process.platform === 'darwin'
-
-const defaultKeymap = {
-  toggleFinder: OSX ? 'Cmd + Alt + S' : 'Super + Alt + S',
-  toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E'
-}
-const keymapFilename = 'keymap.json'
-
-var userDataPath = app.getPath('userData')
-
-function getKeymap () {
-  var userDataPath = app.getPath('userData')
-  if (jetpack.cwd(userDataPath).exists(keymapFilename)) {
-    try {
-      return JSON.parse(jetpack.cwd(userDataPath).read(keymapFilename, 'utf-8'))
-    } catch (err) {}
-  }
-  return {}
-}
-
-function saveKeymap () {
-  var content
-  try {
-    content = JSON.stringify(global.keymap)
-  } catch (e) {
-    global.keymap = {}
-    content = JSON.stringify(global.keymap)
-  }
-  jetpack.cwd(userDataPath).file(keymapFilename, { content })
-}
 
 function emitToFinder (type, data) {
   var payload = {
@@ -71,31 +37,22 @@ function toggleMain () {
   }
 }
 
-// Init
-global.keymap = Object.assign({}, defaultKeymap, getKeymap())
-
-function registerKey (name, callback) {
-  if (_.isString(global.keymap[name]) && global.keymap[name].trim().length > 0) {
-    globalShortcut.register(global.keymap[name], callback)
-  }
-}
-
-function registerAllKeys (broadcast) {
-  if (broadcast == null) broadcast = true
+ipc.on('CONFIG_RENEW', (e, payload) => {
+  globalShortcut.unregisterAll()
+  var { config } = payload
 
   var errors = []
   try {
-    registerKey('toggleFinder', toggleFinder)
+    globalShortcut.register(config.hotkey.toggleFinder, toggleFinder)
   } catch (err) {
     errors.push('toggleFinder')
   }
   try {
-    registerKey('toggleMain', toggleMain)
+    globalShortcut.register(config.hotkey.toggleMain, toggleMain)
   } catch (err) {
     errors.push('toggleMain')
   }
-
-  if (broadcast) {
+  if (!config.silent) {
     if (errors.length === 0) {
       mainWindow.webContents.send('APP_SETTING_DONE', {})
     } else {
@@ -104,13 +61,4 @@ function registerAllKeys (broadcast) {
       })
     }
   }
-}
-
-registerAllKeys(false)
-
-ipc.on('hotkeyUpdated', function (event, newKeymap) {
-  global.keymap = Object.assign({}, defaultKeymap, global.keymap, newKeymap)
-  saveKeymap()
-  globalShortcut.unregisterAll()
-  registerAllKeys()
 })

From d6d130b8f9ac097d9d89929ce3f0d2fbc2a20ef3 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Fri, 22 Jul 2016 08:45:04 +0900
Subject: [PATCH 101/109] app won't quit before Ctrl+ Q

---
 lib/config.js   | 82 -------------------------------------------------
 lib/main-app.js |  8 +++--
 2 files changed, 6 insertions(+), 84 deletions(-)
 delete mode 100644 lib/config.js

diff --git a/lib/config.js b/lib/config.js
deleted file mode 100644
index d4a42d80..00000000
--- a/lib/config.js
+++ /dev/null
@@ -1,82 +0,0 @@
-const electron = require('electron')
-const app = electron.app
-const ipc = electron.ipcMain
-const jetpack = require('fs-jetpack')
-const nodeIpc = require('@rokt33r/node-ipc')
-
-const defaultConfig = {
-  'editor-font-size': '14',
-  'editor-font-family': 'Monaco, Consolas',
-  'editor-indent-type': 'space',
-  'editor-indent-size': '4',
-  'preview-font-size': '14',
-  'preview-font-family': 'Lato',
-  'switch-preview': 'blur',
-  'disable-direct-write': false,
-  'theme-ui': 'light',
-  'theme-code': 'xcode',
-  'theme-syntax': 'xcode',
-  'preview-line-number': false
-}
-const configFile = 'config.json'
-
-var userDataPath = app.getPath('userData')
-
-function getConfig () {
-  var userDataPath = app.getPath('userData')
-  if (jetpack.cwd(userDataPath).exists(configFile)) {
-    try {
-      return JSON.parse(jetpack.cwd(userDataPath).read(configFile, 'utf-8'))
-    } catch (err) {}
-  }
-  return null
-}
-
-var config = null
-
-function saveConfig () {
-  var content
-  try {
-    content = JSON.stringify(config)
-  } catch (e) {
-    config = {}
-    content = JSON.stringify(config)
-  }
-  jetpack.cwd(userDataPath).file(configFile, { content })
-}
-
-// Init
-config = getConfig()
-if (config == null) {
-  config = Object.assign({}, defaultConfig)
-  saveConfig()
-}
-
-config = Object.assign({}, defaultConfig, config)
-
-if (config['disable-direct-write']) {
-  app.commandLine.appendSwitch('disable-direct-write')
-}
-
-function emitToFinder (type, data) {
-  var payload = {
-    type: type,
-    data: data
-  }
-
-  nodeIpc.server.broadcast('message', payload)
-}
-
-app.on('ready', function () {
-  const mainWindow = require('./main-window')
-  function applyConfig () {
-    mainWindow.webContents.send('config-apply', config)
-    emitToFinder('config-apply', config)
-  }
-
-  ipc.on('configUpdated', function (event, newConfig) {
-    config = Object.assign({}, defaultConfig, config, newConfig)
-    saveConfig()
-    applyConfig()
-  })
-})
diff --git a/lib/main-app.js b/lib/main-app.js
index 890b7d1c..40a8b73c 100644
--- a/lib/main-app.js
+++ b/lib/main-app.js
@@ -10,7 +10,6 @@ const nodeIpc = require('@rokt33r/node-ipc')
 const GhReleases = require('electron-gh-releases')
 // electron.crashReporter.start()
 
-require('./config')
 var mainWindow = null
 var finderProcess = null
 var finderWindow = null
@@ -273,7 +272,12 @@ app.on('ready', function () {
     mainWindow.setMenu(menu)
   }
   mainWindow.on('close', function (e) {
-    app.quit()
+    if (appQuit) {
+      app.quit()
+    } else {
+      mainWindow.hide()
+      e.preventDefault()
+    }
   })
   switch (process.platform) {
     case 'darwin':

From 70ec9f50ab505ba8947a0e8c5f14e39b24fe281e Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Fri, 22 Jul 2016 08:45:13 +0900
Subject: [PATCH 102/109] disable finder temporary

---
 lib/main-app.js | 58 ++++++++++++++++++++++++-------------------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/lib/main-app.js b/lib/main-app.js
index 40a8b73c..991552cb 100644
--- a/lib/main-app.js
+++ b/lib/main-app.js
@@ -210,12 +210,12 @@ function handleIpcEvent (payload) {
 }
 
 function spawnFinder() {
-  if (process.platform === 'darwin') {
-    var finderArgv = [path.join(__dirname, 'finder-app.js'), '--finder']
-    if (_.find(process.argv, a => a === '--hot')) finderArgv.push('--hot')
-    finderProcess = ChildProcess
-      .execFile(process.execPath, finderArgv)
-  }
+  // if (process.platform === 'darwin') {
+  //   var finderArgv = [path.join(__dirname, 'finder-app.js'), '--finder']
+  //   if (_.find(process.argv, a => a === '--hot')) finderArgv.push('--hot')
+  //   finderProcess = ChildProcess
+  //     .execFile(process.execPath, finderArgv)
+  // }
 }
 
 function quitApp () {
@@ -279,29 +279,29 @@ app.on('ready', function () {
       e.preventDefault()
     }
   })
-  switch (process.platform) {
-    case 'darwin':
-      spawnFinder()
-      break
-    case 'win32':
-      finderWindow = require('./finder-window')
-      finderWindow.on('close', function (e) {
-        if (appQuit) return true
-        e.preventDefault()
-        finderWindow.hide()
-      })
-      break
-    case 'linux':
-      if (process.env.DESKTOP_SESSION === 'cinnamon') {
-        finderWindow = require('./finder-window')
-        finderWindow.on('close', function (e) {
-          if (appQuit) return true
-          e.preventDefault()
-          finderWindow.hide()
-        })
-      }
-      // Do nothing.
-  }
+  // switch (process.platform) {
+  //   case 'darwin':
+  //     spawnFinder()
+  //     break
+  //   case 'win32':
+  //     finderWindow = require('./finder-window')
+  //     finderWindow.on('close', function (e) {
+  //       if (appQuit) return true
+  //       e.preventDefault()
+  //       finderWindow.hide()
+  //     })
+  //     break
+  //   case 'linux':
+  //     if (process.env.DESKTOP_SESSION === 'cinnamon') {
+  //       finderWindow = require('./finder-window')
+  //       finderWindow.on('close', function (e) {
+  //         if (appQuit) return true
+  //         e.preventDefault()
+  //         finderWindow.hide()
+  //       })
+  //     }
+  //     // Do nothing.
+  // }
 
   nodeIpc.server.start(function (err) {
     if (err.code === 'EADDRINUSE') {

From f628ed55cf82d938d2caf469b0c501dcec8b6cb0 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sat, 23 Jul 2016 01:41:31 +0900
Subject: [PATCH 103/109] update infotab

---
 .../main/modals/PreferencesModal/InfoTab.js   | 18 ++++++++++----
 .../main/modals/PreferencesModal/InfoTab.styl | 24 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/browser/main/modals/PreferencesModal/InfoTab.js b/browser/main/modals/PreferencesModal/InfoTab.js
index 5980774b..ae3d52d0 100644
--- a/browser/main/modals/PreferencesModal/InfoTab.js
+++ b/browser/main/modals/PreferencesModal/InfoTab.js
@@ -25,14 +25,24 @@ class InfoTab extends React.Component {
         <div styleName='top'>
           <img styleName='icon' src='../resources/app.png' width='150' height='150'/>
           <div styleName='appId'>Boostnote {appVersion}</div>
-          <div styleName='madeBy'>Made by MAISIN&CO.</div>
+          <div styleName='description'>
+            A simple markdown/snippet note app for developer.
+          </div>
+          <div styleName='madeBy'>Made by&nbsp;
+            <a href='http://maisin.co/'
+              onClick={(e) => this.handleLinkClick(e)}
+            >MAISIN&CO.</a></div>
+          <div styleName='copyright'>Copyright 2016 MAISIN&CO. All rights reserved.</div>
         </div>
-        <ul>
+        <ul styleName='list'>
           <li>
-            - License : GPLv3
+            The codes of this app is published under GPLv3 license.
           </li>
           <li>
-            - Issue Tracker : <a href='https://github.com/BoostIO/Boostnote/issues'
+            Any kinds of feedback, creating a new issue or a pull request, would be welcomed.
+          </li>
+          <li>
+            Issue Tracker : <a href='https://github.com/BoostIO/Boostnote/issues'
               onClick={(e) => this.handleLinkClick(e)}
             >https://github.com/BoostIO/Boostnote/issues</a>
           </li>
diff --git a/browser/main/modals/PreferencesModal/InfoTab.styl b/browser/main/modals/PreferencesModal/InfoTab.styl
index 11d8f198..7dba4eef 100644
--- a/browser/main/modals/PreferencesModal/InfoTab.styl
+++ b/browser/main/modals/PreferencesModal/InfoTab.styl
@@ -3,11 +3,33 @@
   white-space pre
   line-height 1.4
   color $ui-text-color
+  width 100%
+
 .top
   text-align center
   margin-bottom 25px
+
 .appId
-  font-size 18px
+  font-size 24px
+
+.description
+  overflow hidden
+  white-space normal
+  line-height 1.5
+  margin 5px auto 10px
+  font-size 14px
+  text-align center
+
 .madeBy
   font-size 12px
   $ui-inactive-text-color
+
+.copyright
+  font-size 12px
+  $ui-inactive-text-color
+
+.list
+  list-style square
+  padding-left 2em
+  li
+    white-space normal

From b2d34ab95dbd871837e32c768cacc4a2f1c513d2 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sat, 23 Jul 2016 12:14:01 +0900
Subject: [PATCH 104/109] add initialization modal & migration func

---
 browser/main/Main.js                          |   6 +
 browser/main/lib/ConfigManager.js             |   2 +-
 browser/main/lib/dataApi.js                   | 110 ++++++++-
 browser/main/modals/InitModal.js              | 212 ++++++++++++++++++
 browser/main/modals/InitModal.styl            |  86 +++++++
 browser/main/modals/NewRepositoryModal.js     | 193 ----------------
 browser/main/modals/NewRepositoryModal.styl   | 133 -----------
 .../modals/PreferencesModal/StorageItem.js    |   2 +-
 browser/main/store.js                         |   5 +-
 9 files changed, 410 insertions(+), 339 deletions(-)
 create mode 100644 browser/main/modals/InitModal.js
 create mode 100644 browser/main/modals/InitModal.styl
 delete mode 100644 browser/main/modals/NewRepositoryModal.js
 delete mode 100644 browser/main/modals/NewRepositoryModal.styl

diff --git a/browser/main/Main.js b/browser/main/Main.js
index 33e770a0..8c688833 100644
--- a/browser/main/Main.js
+++ b/browser/main/Main.js
@@ -10,6 +10,8 @@ import dataApi from 'browser/main/lib/dataApi'
 import StatusBar from './StatusBar'
 import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
+import modal from 'browser/main/lib/modal'
+import InitModal from 'browser/main/modals/InitModal'
 
 class Main extends React.Component {
   constructor (props) {
@@ -34,6 +36,10 @@ class Main extends React.Component {
           storages: data.storages,
           notes: data.notes
         })
+
+        if (data.storages.length < 1) {
+          modal.open(InitModal)
+        }
       })
   }
 
diff --git a/browser/main/lib/ConfigManager.js b/browser/main/lib/ConfigManager.js
index b353a043..075ac8e1 100644
--- a/browser/main/lib/ConfigManager.js
+++ b/browser/main/lib/ConfigManager.js
@@ -22,7 +22,7 @@ const defaultConfig = {
     fontFamily: 'Monaco, Consolas',
     indentType: 'space',
     indentSize: '4',
-    switchPreview: 'RIGHTCLICK'
+    switchPreview: 'BLUR' // Available value: RIGHTCLICK, BLUR
   },
   preview: {
     fontSize: '14',
diff --git a/browser/main/lib/dataApi.js b/browser/main/lib/dataApi.js
index 010e03d4..8c475f07 100644
--- a/browser/main/lib/dataApi.js
+++ b/browser/main/lib/dataApi.js
@@ -3,6 +3,7 @@ const CSON = require('season')
 const path = require('path')
 const _ = require('lodash')
 const sander = require('sander')
+const consts = require('browser/lib/consts')
 
 let storages = []
 let notes = []
@@ -67,6 +68,7 @@ class Storage {
           let initialStorage = {
             folders: []
           }
+
           return sander.writeFile(path.join(this.cache.path, 'boostnote.json'), JSON.stringify(initialStorage))
         } else throw err
       })
@@ -127,10 +129,11 @@ function init () {
     let caches
     try {
       caches = JSON.parse(localStorage.getItem('storages'))
+      if (!_.isArray(caches)) throw new Error('Cached data is not valid.')
     } catch (e) {
       console.error(e)
       caches = []
-      localStorage.getItem('storages', JSON.stringify(caches))
+      localStorage.setItem('storages', JSON.stringify(caches))
     }
 
     return caches.map((cache) => {
@@ -236,15 +239,14 @@ function addStorage (input) {
           note.folder = folder.key
           _notes.push(Note.forge(note))
         })
-
-        notes = notes.slice().concat(_notes)
       })
 
-      return Promise.all(notes)
-        .then((notes) => {
+      return Promise.all(_notes)
+        .then((_notes) => {
+          notes = notes.concat(_notes)
           let data = {
             storage: storage,
-            notes: notes
+            notes: _notes
           }
           return isFolderRemoved
             ? storage.saveData().then(() => data)
@@ -255,6 +257,17 @@ function addStorage (input) {
       storages = storages.filter((storage) => storage.key !== data.storage.key)
       storages.push(data.storage)
       _saveCaches()
+
+      if (data.storage.data.folders.length < 1) {
+        return createFolder(data.storage.key, {
+          name: 'Default',
+          color: consts.FOLDER_COLORS[0]
+        }).then(() => data)
+      }
+
+      return data
+    })
+    .then((data) => {
       return {
         storage: data.storage.toJSON(),
         notes: data.notes.map((note) => note.toJSON())
@@ -269,6 +282,88 @@ function removeStorage (key) {
   return Promise.resolve(true)
 }
 
+function migrateFromV5 (key, data) {
+  let oldFolders = data.folders
+  let oldArticles = data.articles
+  let storage = _.find(storages, {key: key})
+  if (storage == null) throw new Error('Storage doesn\'t exist.')
+
+  let migrateFolders = oldFolders.map((oldFolder) => {
+    let folderKey = keygen()
+    while (storage.data.folders.some((folder) => folder.key === folderKey)) {
+      folderKey = keygen()
+    }
+    let newFolder = {
+      key: folderKey,
+      name: oldFolder.name,
+      color: consts.FOLDER_COLORS[Math.floor(Math.random() * 7) % 7]
+    }
+    storage.data.folders.push(newFolder)
+    let articles = oldArticles.filter((article) => article.FolderKey === oldFolder.key)
+    let folderNotes = []
+    articles.forEach((article) => {
+      let noteKey = keygen()
+      while (notes.some((note) => note.storage === key && note.folder === folderKey && note.key === noteKey)) {
+        key = keygen()
+      }
+      if (article.mode === 'markdown') {
+        let newNote = new Note({
+          tags: article.tags,
+          createdAt: article.createdAt,
+          updatedAt: article.updatedAt,
+          folder: folderKey,
+          storage: key,
+          type: 'MARKDOWN_NOTE',
+          isStarred: false,
+          title: article.title,
+          content: '# ' + article.title + '\n\n' + article.content,
+          key: noteKey
+        })
+        notes.push(newNote)
+        folderNotes.push(newNote)
+      } else {
+        let newNote = new Note({
+          tags: article.tags,
+          createdAt: article.createdAt,
+          updatedAt: article.updatedAt,
+          folder: folderKey,
+          storage: key,
+          type: 'SNIPPET_NOTE',
+          isStarred: false,
+          title: article.title,
+          description: article.title,
+          key: noteKey,
+          snippets: [{
+            name: article.mode,
+            mode: article.mode,
+            content: article.content
+          }]
+        })
+        notes.push(newNote)
+        folderNotes.push(newNote)
+      }
+    })
+
+    return sander
+      .writeFile(path.join(storage.cache.path, folderKey, 'data.json'), JSON.stringify({
+        notes: folderNotes.map((note) => {
+          let json = note.toJSON()
+          delete json.storage
+          return json
+        })
+      }))
+  })
+  return Promise.all(migrateFolders)
+    .then(() => storage.saveData())
+    .then(() => {
+      return {
+        storage: storage.toJSON(),
+        notes: notes.filter((note) => note.storage === key)
+          .map((note) => note.toJSON())
+      }
+    })
+}
+
 function createFolder (key, input) {
   let storage = _.find(storages, {key: key})
   if (storage == null) throw new Error('Storage doesn\'t exist.')
@@ -441,5 +536,6 @@ export default {
   createSnippetNote,
   updateNote,
   removeNote,
-  moveNote
+  moveNote,
+  migrateFromV5
 }
diff --git a/browser/main/modals/InitModal.js b/browser/main/modals/InitModal.js
new file mode 100644
index 00000000..739f3e5f
--- /dev/null
+++ b/browser/main/modals/InitModal.js
@@ -0,0 +1,212 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './InitModal.styl'
+import dataApi from 'browser/main/lib/dataApi'
+import store from 'browser/main/store'
+import { hashHistory } from 'react-router'
+import _ from 'lodash'
+
+const CSON = require('season')
+const path = require('path')
+const electron = require('electron')
+const { remote } = electron
+
+function browseFolder () {
+  let dialog = remote.dialog
+
+  let defaultPath = remote.app.getPath('home')
+  return new Promise((resolve, reject) => {
+    dialog.showOpenDialog({
+      title: 'Select Directory',
+      defaultPath,
+      properties: ['openDirectory', 'createDirectory']
+    }, function (targetPaths) {
+      if (targetPaths == null) return resolve('')
+      resolve(targetPaths[0])
+    })
+  })
+}
+
+class InitModal extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      path: path.join(remote.app.getPath('home'), 'Boostnote'),
+      migrationRequested: true,
+      isLoading: true,
+      data: null,
+      legacyStorageExists: false
+    }
+  }
+
+  handleCloseButtonClick (e) {
+    this.props.close()
+  }
+
+  handlePathChange (e) {
+    this.setState({
+      path: e.target.value
+    })
+  }
+
+  componentDidMount () {
+    let data = null
+    try {
+      data = CSON.readFileSync(path.join(remote.app.getPath('userData'), 'local.json'))
+    } catch (err) {
+      if (err.code === 'ENOENT') {
+        return
+      }
+      console.error(err)
+    }
+    let newState = {
+      isLoading: false
+    }
+    if (data != null) {
+      newState.legacyStorageExists = true
+      newState.data = data
+    }
+    this.setState(newState)
+  }
+
+  handlePathBrowseButtonClick (e) {
+    browseFolder()
+      .then((targetPath) => {
+        if (targetPath.length > 0) {
+          this.setState({
+            path: targetPath
+          })
+        }
+      })
+      .catch((err) => {
+        console.error('BrowseFAILED')
+        console.error(err)
+      })
+  }
+
+  handleSubmitButtonClick (e) {
+    dataApi
+      .addStorage({
+        name: 'My Storage',
+        path: this.state.path
+      })
+      .then((data) => {
+        if (this.state.migrationRequested && _.isObject(this.state.data) && _.isArray(this.state.data.folders) && _.isArray(this.state.data.articles)) {
+          return dataApi.migrateFromV5(data.storage.key, this.state.data)
+        }
+        return data
+      })
+      .then((data) => {
+        store.dispatch({
+          type: 'ADD_STORAGE',
+          storage: data.storage,
+          notes: data.notes
+        })
+
+        let defaultMarkdownNote = dataApi
+          .createMarkdownNote(data.storage.key, data.storage.folders[0].key, {
+            title: 'Welcome to Boostnote :)',
+            content: '# Welcome to Boostnote :)\nThis is a markdown note.\n\nClick to edit this note.'
+          })
+          .then((note) => {
+            store.dispatch({
+              type: 'CREATE_NOTE',
+              note: note
+            })
+          })
+        let defaultSnippetNote = dataApi
+          .createSnippetNote(data.storage.key, data.storage.folders[0].key, {
+            title: 'Snippet note example',
+            description: 'Snippet note example\nYou can store a series of snippet as a single note like Gist.',
+            snippets: [
+              {
+                name: 'example.html',
+                mode: 'html',
+                content: '<html>\n<body>\n<h1 id=\'hello\'>Hello World</h1>\n</body>\n</html>'
+              },
+              {
+                name: 'example.js',
+                mode: 'javascript',
+                content: 'var html = document.getElementById(\'hello\').innerHTML\n\nconsole.log(html)'
+              }
+            ]
+          })
+          .then((note) => {
+            store.dispatch({
+              type: 'CREATE_NOTE',
+              note: note
+            })
+          })
+
+        return Promise.resolve(defaultSnippetNote)
+          .then(defaultMarkdownNote)
+          .then(() => data.storage)
+      })
+      .then((storage) => {
+        hashHistory.push('/storages/' + storage.key)
+        this.props.close()
+      })
+  }
+
+  handleMigrationRequestedChange (e) {
+    this.setState({
+      migrationRequested: e.target.checked
+    })
+  }
+
+  render () {
+    if (this.state.isLoading) {
+      return <div styleName='root--loading'>
+        <i styleName='spinner' className='fa fa-spin fa-spinner'/>
+        <div styleName='loadingMessage'>Preparing initialization...</div>
+      </div>
+    }
+    return (
+      <div styleName='root'>
+
+        <div styleName='header'>
+          <div styleName='header-title'>Initialize Storage</div>
+        </div>
+        <button styleName='closeButton'
+          onClick={(e) => this.handleCloseButtonClick(e)}
+        >Close</button>
+        <div styleName='body'>
+          <div styleName='body-welcome'>
+            Welcome you!
+          </div>
+          <div styleName='body-description'>
+            Boostnote will use this directory as a default storage.
+          </div>
+          <div styleName='body-path'>
+            <input styleName='body-path-input'
+              placeholder='Select Folder'
+              value={this.state.path}
+              onChange={(e) => this.handlePathChange(e)}
+            />
+            <button styleName='body-path-button'
+              onClick={(e) => this.handlePathBrowseButtonClick(e)}
+            >
+              ...
+            </button>
+          </div>
+          <div styleName='body-migration'>
+            <label><input type='checkbox' checked={this.state.migrationRequested} onChange={(e) => this.handleMigrationRequestedChange(e)}/> Migrate old data from the legacy app v0.5</label>
+          </div>
+
+          <div styleName='body-control'>
+            <button styleName='body-control-createButton'
+              onClick={(e) => this.handleSubmitButtonClick(e)}
+            >Let's Go!</button>
+          </div>
+        </div>
+
+      </div>
+    )
+  }
+}
+
+InitModal.propTypes = {
+}
+
+export default CSSModules(InitModal, styles)
diff --git a/browser/main/modals/InitModal.styl b/browser/main/modals/InitModal.styl
new file mode 100644
index 00000000..7c612f10
--- /dev/null
+++ b/browser/main/modals/InitModal.styl
@@ -0,0 +1,86 @@
+.root
+  modal()
+  max-width 540px
+  overflow hidden
+  position relative
+.root--loading
+  @extend .root
+  text-align center
+.spinner
+  font-size 100px
+  margin 35px auto
+  color $ui-text-color
+.loadingMessage
+  color $ui-text-color
+  margin 15px auto 35px
+.header
+  height 50px
+  font-size 18px
+  line-height 50px
+  padding 0 15px
+  background-color $ui-backgroundColor
+  border-bottom solid 1px $ui-borderColor
+  color $ui-text-color
+
+.closeButton
+  position absolute
+  top 10px
+  right 10px
+  height 30px
+  width 0 25px
+  border $ui-border
+  border-radius 2px
+  color $ui-text-color
+  colorDefaultButton()
+
+.body
+  padding 30px
+
+.body-welcome
+  text-align center
+  margin-bottom 25px
+  font-size 32px
+  color $ui-text-color
+
+.body-description
+  font-size 14px
+  color $ui-text-color
+  text-align center
+  margin-bottom 25px
+
+.body-path
+  margin 0 auto 25px
+  width 280px
+
+.body-path-input
+  height 30px
+  vertical-align middle
+  width 250px
+  font-size 12px
+  border-style solid
+  border-width 1px 0 1px 1px
+  border-color $border-color
+  border-top-left-radius 2px
+  border-bottom-left-radius 2px
+  padding 0 5px
+
+.body-path-button
+  height 30px
+  border none
+  border-top-right-radius 2px
+  border-bottom-right-radius 2px
+  colorPrimaryButton()
+  vertical-align middle
+.body-migration
+  margin 0 auto 25px
+  text-align center
+
+.body-control
+  text-align center
+
+.body-control-createButton
+  colorPrimaryButton()
+  border none
+  border-radius 2px
+  height 40px
+  padding 0 25px
diff --git a/browser/main/modals/NewRepositoryModal.js b/browser/main/modals/NewRepositoryModal.js
deleted file mode 100644
index b777278a..00000000
--- a/browser/main/modals/NewRepositoryModal.js
+++ /dev/null
@@ -1,193 +0,0 @@
-import React, { PropTypes } from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './NewRepositoryModal.styl'
-import Repository from 'browser/lib/Repository'
-import store from 'browser/main/store'
-
-const electron = require('electron')
-const remote = electron.remote
-
-function browseFolder () {
-  let dialog = remote.dialog
-
-  let defaultPath = remote.app.getPath('home')
-  return new Promise((resolve, reject) => {
-    dialog.showOpenDialog({
-      title: 'Select Directory',
-      defaultPath,
-      properties: ['openDirectory', 'createDirectory']
-    }, function (targetPaths) {
-      if (targetPaths == null) return resolve('')
-      resolve(targetPaths[0])
-    })
-  })
-}
-
-class NewRepositoryModal extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      name: '',
-      path: '',
-      isPathSectionFocused: false,
-      error: null,
-      isBrowsingPath: false
-    }
-  }
-
-  componentDidMount () {
-    this.refs.nameInput.focus()
-  }
-
-  handleCloseButtonClick (e) {
-    this.props.close()
-  }
-
-  handlePathFocus (e) {
-    this.setState({
-      isPathSectionFocused: true
-    })
-  }
-
-  handlePathBlur (e) {
-    if (e.relatedTarget !== this.refs.pathInput && e.relatedTarget !== this.refs.browseButton) {
-      this.setState({
-        isPathSectionFocused: false
-      })
-    }
-  }
-
-  handleBrowseButtonClick (e) {
-    this.setState({
-      isBrowsingPath: true
-    }, () => {
-      browseFolder()
-        .then((targetPath) => {
-          this.setState({
-            path: targetPath,
-            isBrowsingPath: false
-          })
-        })
-        .catch((err) => {
-          console.error('BrowseFAILED')
-          console.error(err)
-          this.setState({
-            isBrowsingPath: false
-          })
-        })
-    })
-  }
-
-  handleConfirmButtonClick (e) {
-    let targetPath = this.state.path
-    let name = this.state.name
-
-    let repository = new Repository({
-      name: name,
-      path: targetPath
-    })
-
-    repository
-      .mount()
-      .then(() => repository.load())
-      .then((data) => {
-        store.dispatch({
-          type: 'ADD_REPOSITORY',
-          repository: data
-        })
-        this.props.close()
-      })
-      .catch((err) => {
-        console.error(err)
-        this.setState({
-          error: err.message
-        })
-      })
-  }
-
-  handleChange (e) {
-    let name = this.refs.nameInput.value
-    let path = this.refs.pathInput.value
-    this.setState({
-      name,
-      path
-    })
-  }
-
-  render () {
-    return (
-      <div className='NewRepositoryModal'
-        styleName='root'
-      >
-        <div styleName='header'>
-          <div styleName='header-title'>New Repository</div>
-          <button styleName='header-closeButton'
-            onClick={(e) => this.handleCloseButtonClick(e)}
-          >
-            <i className='fa fa-times'/>
-          </button>
-        </div>
-        <div styleName='body'>
-          <div styleName='body-section'>
-            <div styleName='body-section-label'>Repository Name</div>
-            <input styleName='body-section-input'
-              ref='nameInput'
-              value={this.state.name}
-              onChange={(e) => this.handleChange(e)}
-            />
-          </div>
-
-          <div styleName='body-section'>
-            <div styleName='body-section-label'>Repository Path</div>
-            <div styleName={!this.state.isPathSectionFocused ? 'body-section-path' : 'body-section-path--focus'}>
-              <input styleName='body-section-path-input'
-                ref='pathInput'
-                value={this.state.path}
-                style={styles.body_section_path_input}
-                onFocus={(e) => this.handlePathFocus(e)}
-                onBlur={(e) => this.handlePathBlur(e)}
-                disabled={this.state.isBrowsingPath}
-                onChange={(e) => this.handleChange(e)}
-              />
-              <button styleName='body-section-path-button'
-                onClick={(e) => this.handleBrowseButtonClick(e)}
-                onFocus={(e) => this.handlePathFocus(e)}
-                onBlur={(e) => this.handlePathBlur(e)}
-                disabled={this.state.isBrowsingPath}
-              >
-                ...
-              </button>
-            </div>
-          </div>
-          {
-            this.state.error != null && (
-              <div styleName='body-error'>
-                {this.state.error}
-              </div>
-            )
-          }
-        </div>
-
-        <div styleName='footer'>
-          <button styleName='footer-cancelButton'
-            onClick={(e) => this.handleCloseButtonClick(e)}
-          >
-            <i className='fa fa-times'/> Cancel
-          </button>
-          <button styleName='footer-confirmButton'
-            onClick={(e) => this.handleConfirmButtonClick(e)}
-          >
-            <i className='fa fa-check'/> Confirm
-          </button>
-        </div>
-      </div>
-    )
-  }
-}
-
-NewRepositoryModal.propTypes = {
-  close: PropTypes.func
-}
-
-export default CSSModules(NewRepositoryModal, styles)
diff --git a/browser/main/modals/NewRepositoryModal.styl b/browser/main/modals/NewRepositoryModal.styl
deleted file mode 100644
index 9f555f9c..00000000
--- a/browser/main/modals/NewRepositoryModal.styl
+++ /dev/null
@@ -1,133 +0,0 @@
-$modal-width = 550px
-$modal-header-color = #F2F2F2
-$body-button-background-color = #2BAC8F
-
-.root
-  modal()
-  width $modal-width
-  height 310px
-
-.header
-  height 50px
-  background-color $modal-header-color
-
-.header-title
-  font-size 24px
-  line-height 50px
-  padding-left 15px
-
-.header-closeButton
-  position absolute
-  top 8.5px
-  right 8.5px
-  width 33px
-  height 33px
-  font-size 20px
-  background-color transparent
-  border none
-  color #AAA
-  &:hover
-    color #4D4D4D
-
-.body
-  absolute left right
-  top 50px
-  bottom 50px
-  padding 35px 0
-
-.body-section
-  height 33px
-  margin-bottom 15px
-  position relative
-
-.body-section-label
-  absolute top bottom left
-  width 175px
-  text-align right
-  line-height 33px
-  padding-right 15px
-
-.body-section-input
-  absolute top bottom
-  left 175px
-  width 315px
-  padding 0 10px
-  border $default-border
-  border-radius 5px
-  outline none
-  &:focus
-    border $active-border
-
-.body-section-path
-  absolute top bottom
-  left 175px
-  width 315px
-  padding 0 10px
-  border $default-border
-  border-radius 5px
-  outline none
-  overflow hidden
-
-.body-section-path--focus
-  @extend .body-section-path
-  border $active-border
-
-.body-section-path-input
-  absolute top left bottom
-  width 265px
-  border none
-  outline none
-  padding 0 10px
-
-.body-section-path-button
-  absolute top right bottom
-  width 50px
-  border none
-  border-left $default-border
-  outline none
-  color white
-  background-color $body-button-background-color
-  transition 0.15s
-  &:hover
-    background-color lighten($body-button-background-color, 7%)
-  &:disabled
-    background-color lighten(gray, 15%)
-
-.body-error
-  height 33px
-  margin 35px auto 0
-  width 320px
-  border-radius 5px
-  text-align center
-  line-height 33px
-  color $danger-color
-  background-color $danger-lighten-color
-
-.footer
-  absolute left right bottom
-  height 50px
-
-.footer-cancelButton
-  position absolute
-  height 33px
-  right 85.5px
-  width 72px
-  top 8.5px
-  border-radius 5px
-  border $default-border
-  background-color darken(white, 0.03)
-  &:hover
-    background-color white
-
-.footer-confirmButton
-  position absolute
-  height 33px
-  right 8.5px
-  width 72px
-  top 8.5px
-  color white
-  border-radius 5px
-  border none
-  background-color #2BAC8F
-  &:hover
-    background-color lighten($body-button-background-color, 7%)
diff --git a/browser/main/modals/PreferencesModal/StorageItem.js b/browser/main/modals/PreferencesModal/StorageItem.js
index 292095ed..42f2f73b 100644
--- a/browser/main/modals/PreferencesModal/StorageItem.js
+++ b/browser/main/modals/PreferencesModal/StorageItem.js
@@ -208,7 +208,7 @@ class StorageItem extends React.Component {
     let { storage } = this.props
     let input = {
       name: 'Untitled',
-      color: consts.FOLDER_COLORS[Math.floor(Math.random() * 7)]
+      color: consts.FOLDER_COLORS[Math.floor(Math.random() * 7) % 7]
     }
 
     dataApi.createFolder(storage.key, input)
diff --git a/browser/main/store.js b/browser/main/store.js
index 85dac683..2105ceec 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -44,10 +44,7 @@ function notes (state = [], action) {
       return action.notes
     case 'ADD_STORAGE':
       {
-        let notes = state.slice()
-
-        notes.concat(action.notes)
-
+        let notes = state.concat(action.notes)
         return notes
       }
     case 'REMOVE_STORAGE':

From 45b1cd3942eadc715e45b053f1ea0787c0c34d89 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sat, 23 Jul 2016 15:28:17 +0900
Subject: [PATCH 105/109] delete note

---
 browser/components/CodeEditor.js              |   3 +-
 browser/main/ArticleList.js                   | 144 -----------------
 browser/main/Detail/MarkdownNoteDetail.js     | 134 ++++++++++------
 browser/main/Detail/MarkdownNoteDetail.styl   |  30 ++++
 browser/main/Detail/SnippetNoteDetail.js      | 145 +++++++++++-------
 browser/main/Detail/SnippetNoteDetail.styl    |  31 ++++
 browser/main/Detail/index.js                  |  22 ++-
 browser/main/NoteList/index.js                |  19 ++-
 browser/main/global.styl                      |   6 +-
 browser/main/lib/dataApi.js                   |  34 +++-
 browser/main/lib/eventEmitter.js              |  26 ++++
 browser/main/modals/InitModal.js              | 139 +++++++++--------
 browser/main/modals/InitModal.styl            |   2 +-
 browser/main/modals/NewNoteModal.js           |   3 +
 .../modals/PreferencesModal/StorageItem.js    |  58 ++++++-
 .../modals/PreferencesModal/StorageItem.styl  |  24 ++-
 browser/main/store.js                         |   7 +
 17 files changed, 498 insertions(+), 329 deletions(-)
 delete mode 100644 browser/main/ArticleList.js
 create mode 100644 browser/main/lib/eventEmitter.js

diff --git a/browser/components/CodeEditor.js b/browser/components/CodeEditor.js
index 83bb8025..6ca06ab3 100644
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -23,7 +23,6 @@ export default class CodeEditor extends React.Component {
         }
         el = el.parentNode
       }
-      console.log(isStillFocused)
 
       if (!isStillFocused && this.props.onBlur != null) this.props.onBlur(e)
     }
@@ -165,7 +164,7 @@ export default class CodeEditor extends React.Component {
       let syntaxMode = mode != null
         ? mode.mode
         : 'text'
-      session.setMode('ace/mode' + syntaxMode)
+      session.setMode('ace/mode/' + syntaxMode)
     }
     if (prevProps.theme !== this.props.theme) {
       editor.setTheme('ace/theme/' + this.props.theme)
diff --git a/browser/main/ArticleList.js b/browser/main/ArticleList.js
deleted file mode 100644
index bcc7d6c3..00000000
--- a/browser/main/ArticleList.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import React, { PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import ModeIcon from 'browser/components/ModeIcon'
-import moment from 'moment'
-import FolderMark from 'browser/components/FolderMark'
-import _ from 'lodash'
-
-const electron = require('electron')
-const remote = electron.remote
-const ipc = electron.ipcRenderer
-
-export default class ArticleList extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.focusHandler = (e) => this.focus()
-  }
-
-  componentDidMount () {
-    this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
-    ipc.on('list-focus', this.focusHandler)
-    this.focus()
-  }
-
-  componentWillUnmount () {
-    clearInterval(this.refreshTimer)
-    ipc.removeListener('list-focus', this.focusHandler)
-  }
-
-  componentDidUpdate () {
-    return false
-    var index = articles.indexOf(null)
-    var el = ReactDOM.findDOMNode(this)
-    var li = el.querySelectorAll('.ArticleList>div')[index]
-
-    if (li == null) {
-      return
-    }
-
-    var overflowBelow = el.clientHeight + el.scrollTop < li.offsetTop + li.clientHeight
-    if (overflowBelow) {
-      el.scrollTop = li.offsetTop + li.clientHeight - el.clientHeight
-    }
-    var overflowAbove = el.scrollTop > li.offsetTop
-    if (overflowAbove) {
-      el.scrollTop = li.offsetTop
-    }
-  }
-
-  focus () {
-    ReactDOM.findDOMNode(this).focus()
-  }
-
-  // 移動ができなかったらfalseを返す:
-  selectPriorArticle () {
-    let { articles, activeArticle, dispatch } = this.props
-    let targetIndex = articles.indexOf(activeArticle) - 1
-    let targetArticle = articles[targetIndex]
-
-    if (targetArticle != null) {
-      dispatch(switchArticle(targetArticle.key))
-      return true
-    }
-    return false
-  }
-
-  selectNextArticle () {
-    let { articles, activeArticle, dispatch } = this.props
-    let targetIndex = articles.indexOf(activeArticle) + 1
-    let targetArticle = articles[targetIndex]
-
-    if (targetArticle != null) {
-      dispatch(switchArticle(targetArticle.key))
-      return true
-    }
-    return false
-  }
-
-  handleArticleClick (article) {
-    let { dispatch } = this.props
-    return function (e) {
-      dispatch(switchArticle(article.key))
-    }
-  }
-
-  handleArticleListKeyDown (e) {
-    if (e.metaKey || e.ctrlKey) return true
-
-    if (e.keyCode === 65 && !e.shiftKey) {
-      e.preventDefault()
-      remote.getCurrentWebContents().send('top-new-post')
-    }
-
-    if (e.keyCode === 65 && e.shiftKey) {
-      e.preventDefault()
-      remote.getCurrentWebContents().send('nav-new-folder')
-    }
-
-    if (e.keyCode === 68) {
-      e.preventDefault()
-      remote.getCurrentWebContents().send('detail-delete')
-    }
-
-    if (e.keyCode === 84) {
-      e.preventDefault()
-      remote.getCurrentWebContents().send('detail-title')
-    }
-
-    if (e.keyCode === 69) {
-      e.preventDefault()
-      remote.getCurrentWebContents().send('detail-edit')
-    }
-
-    if (e.keyCode === 83) {
-      e.preventDefault()
-      remote.getCurrentWebContents().send('detail-save')
-    }
-
-    if (e.keyCode === 38) {
-      e.preventDefault()
-      this.selectPriorArticle()
-    }
-
-    if (e.keyCode === 40) {
-      e.preventDefault()
-      this.selectNextArticle()
-    }
-  }
-
-  render () {
-    let articleElements = []
-
-    return (
-      <div tabIndex='3' onKeyDown={(e) => this.handleArticleListKeyDown(e)} className='ArticleList'>
-        {articleElements}
-      </div>
-    )
-  }
-}
-
-ArticleList.propTypes = {
-  dispatch: PropTypes.func,
-  repositories: PropTypes.array
-}
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 9478bb87..6cb7ede3 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -5,9 +5,9 @@ import MarkdownEditor from 'browser/components/MarkdownEditor'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
-import Commander from 'browser/main/lib/Commander'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
+import ee from 'browser/main/lib/eventEmitter'
 
 const electron = require('electron')
 const { remote } = electron
@@ -22,31 +22,22 @@ class MarkdownNoteDetail extends React.Component {
       note: Object.assign({
         title: '',
         content: '',
-        isMovingNote: false
+        isMovingNote: false,
+        isDeleting: false
       }, props.note)
     }
     this.dispatchTimer = null
   }
 
-  componentDidMount () {
-    Commander.bind('note-detail', this)
-  }
-
-  componentWillUnmount () {
-    Commander.release(this)
-  }
-
-  fire (command) {
-    switch (command) {
-      case 'focus':
-        this.refs.content.focus()
-    }
+  focus () {
+    this.refs.content.focus()
   }
 
   componentWillReceiveProps (nextProps) {
     if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
       this.setState({
-        note: Object.assign({}, nextProps.note)
+        note: Object.assign({}, nextProps.note),
+        isDeleting: false
       }, () => {
         this.refs.content.reload()
         this.refs.tags.reset()
@@ -176,11 +167,39 @@ class MarkdownNoteDetail extends React.Component {
     let menu = new Menu()
     menu.append(new MenuItem({
       label: 'Delete',
-      click: (e) => this.handlePreferencesButtonClick(e)
+      click: (e) => this.handleDeleteMenuClick(e)
     }))
     menu.popup(remote.getCurrentWindow())
   }
 
+  handleDeleteMenuClick (e) {
+    this.setState({
+      isDeleting: true
+    })
+  }
+
+  handleDeleteConfirmButtonClick (e) {
+    let { note, dispatch } = this.props
+    dataApi
+      .removeNote(note.storage, note.folder, note.key)
+      .then(() => {
+        let dispatchHandler = () => {
+          dispatch({
+            type: 'REMOVE_NOTE',
+            note: note
+          })
+        }
+        ee.once('list:moved', dispatchHandler)
+        ee.emit('list:next')
+      })
+  }
+
+  handleDeleteCancelButtonClick (e) {
+    this.setState({
+      isDeleting: false
+    })
+  }
+
   render () {
     let { storages, config } = this.props
     let { note } = this.state
@@ -190,43 +209,58 @@ class MarkdownNoteDetail extends React.Component {
         style={this.props.style}
         styleName='root'
       >
-        <div styleName='info'>
-          <div styleName='info-left'>
+        {this.state.isDeleting
+          ? <div styleName='info'>
+            <div styleName='info-delete'>
 
-            <div styleName='info-left-top'>
-              <FolderSelect styleName='info-left-top-folderSelect'
-                value={this.state.note.storage + '-' + this.state.note.folder}
-                ref='folder'
-                storages={storages}
-                onChange={(e) => this.handleFolderChange(e)}
-              />
-            </div>
-            <div styleName='info-left-bottom'>
-              <TagSelect
-                styleName='info-left-bottom-tagSelect'
-                ref='tags'
-                value={this.state.note.tags}
-                onChange={(e) => this.handleChange(e)}
-              />
+              <span styleName='info-delete-message'>
+                Are you sure to delete this note?
+              </span>
+              <button styleName='info-delete-cancelButton'
+                onClick={(e) => this.handleDeleteCancelButtonClick(e)}
+              >Cancel</button>
+              <button styleName='info-delete-confirmButton'
+                onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
+              >Confirm</button>
             </div>
           </div>
-          <div styleName='info-right'>
-            <StarButton styleName='info-right-button'
-              onClick={(e) => this.handleStarButtonClick(e)}
-              isActive={note.isStarred}
-            />
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleShareButtonClick(e)}
-            >
-              <i className='fa fa-share-alt fa-fw'/>
-            </button>
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleContextButtonClick(e)}
-            >
-              <i className='fa fa-ellipsis-v'/>
-            </button>
+          : <div styleName='info'>
+            <div styleName='info-left'>
+              <div styleName='info-left-top'>
+                <FolderSelect styleName='info-left-top-folderSelect'
+                  value={this.state.note.storage + '-' + this.state.note.folder}
+                  ref='folder'
+                  storages={storages}
+                  onChange={(e) => this.handleFolderChange(e)}
+                />
+              </div>
+              <div styleName='info-left-bottom'>
+                <TagSelect
+                  styleName='info-left-bottom-tagSelect'
+                  ref='tags'
+                  value={this.state.note.tags}
+                  onChange={(e) => this.handleChange(e)}
+                />
+              </div>
+            </div>
+            <div styleName='info-right'>
+              <StarButton styleName='info-right-button'
+                onClick={(e) => this.handleStarButtonClick(e)}
+                isActive={note.isStarred}
+              />
+              <button styleName='info-right-button'
+                onClick={(e) => this.handleShareButtonClick(e)}
+              >
+                <i className='fa fa-share-alt fa-fw'/>
+              </button>
+              <button styleName='info-right-button'
+                onClick={(e) => this.handleContextButtonClick(e)}
+              >
+                <i className='fa fa-ellipsis-v'/>
+              </button>
+            </div>
           </div>
-        </div>
+        }
         <div styleName='body'>
           <MarkdownEditor
             ref='content'
diff --git a/browser/main/Detail/MarkdownNoteDetail.styl b/browser/main/Detail/MarkdownNoteDetail.styl
index 8d6236ef..0def79e6 100644
--- a/browser/main/Detail/MarkdownNoteDetail.styl
+++ b/browser/main/Detail/MarkdownNoteDetail.styl
@@ -12,6 +12,36 @@ $info-height = 75px
   border-bottom $ui-border
   background-color $ui-backgroundColor
 
+.info-delete
+  height 80px
+  clearfix()
+
+.info-delete-message
+  height 80px
+  line-height 80px
+  padding 0 25px
+  float left
+
+.info-delete-confirmButton
+  float right
+  margin 25px 5px 0
+  height 30px
+  padding 0 25px
+  border-radius 2px
+  border none
+  color $ui-text-color
+  colorDangerButton()
+
+.info-delete-cancelButton
+  float right
+  height 30px
+  margin 25px 5px 0
+  padding 0 25px
+  border $ui-border
+  border-radius 2px
+  color $ui-text-color
+  colorDefaultButton()
+
 .info-left
   float left
   padding 0 5px
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index b3bb6443..d53a33dd 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -5,10 +5,10 @@ import CodeEditor from 'browser/components/CodeEditor'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
-import Commander from 'browser/main/lib/Commander'
 import dataApi from 'browser/main/lib/dataApi'
 import modes from 'browser/lib/modes'
 import { hashHistory } from 'react-router'
+import ee from 'browser/main/lib/eventEmitter'
 
 const electron = require('electron')
 const { remote } = electron
@@ -25,34 +25,26 @@ class SnippetNoteDetail extends React.Component {
         description: ''
       }, props.note, {
         snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet))
-      })
+      }),
+      isDeleting: false
     }
   }
 
-  componentDidMount () {
-    Commander.bind('note-detail', this)
-  }
-
-  componentWillUnmount () {
-    Commander.release(this)
-  }
-
-  fire (command) {
-    switch (command) {
-      case 'focus':
-        this.refs.description.focus()
-    }
+  focus () {
+    this.refs.description.focus()
   }
 
   componentWillReceiveProps (nextProps) {
     if (nextProps.note.key !== this.props.note.key) {
+      let nextNote = Object.assign({
+        description: ''
+      }, nextProps.note, {
+        snippets: nextProps.note.snippets.map((snippet) => Object.assign({}, snippet))
+      })
       this.setState({
         snippetIndex: 0,
-        note: Object.assign({
-          description: ''
-        }, nextProps.note, {
-          snippets: nextProps.note.snippets.map((snippet) => Object.assign({}, snippet))
-        })
+        note: nextNote,
+        isDeleting: false
       }, () => {
         let { snippets } = this.state.note
         snippets.forEach((snippet, index) => {
@@ -171,6 +163,7 @@ class SnippetNoteDetail extends React.Component {
     let menu = new Menu()
     menu.append(new MenuItem({
       label: 'Export as a File',
+      disabled: true,
       click: (e) => this.handlePreferencesButtonClick(e)
     }))
     menu.append(new MenuItem({
@@ -185,11 +178,39 @@ class SnippetNoteDetail extends React.Component {
     let menu = new Menu()
     menu.append(new MenuItem({
       label: 'Delete',
-      click: (e) => this.handlePreferencesButtonClick(e)
+      click: (e) => this.handleDeleteMenuClick(e)
     }))
     menu.popup(remote.getCurrentWindow())
   }
 
+  handleDeleteMenuClick (e) {
+    this.setState({
+      isDeleting: true
+    })
+  }
+
+  handleDeleteConfirmButtonClick (e) {
+    let { note, dispatch } = this.props
+    dataApi
+      .removeNote(note.storage, note.folder, note.key)
+      .then(() => {
+        let dispatchHandler = () => {
+          dispatch({
+            type: 'REMOVE_NOTE',
+            note: note
+          })
+        }
+        ee.once('list:moved', dispatchHandler)
+        ee.emit('list:next')
+      })
+  }
+
+  handleDeleteCancelButtonClick (e) {
+    this.setState({
+      isDeleting: false
+    })
+  }
+
   handleTabPlusButtonClick (e) {
     let { note } = this.state
 
@@ -360,43 +381,59 @@ class SnippetNoteDetail extends React.Component {
         style={this.props.style}
         styleName='root'
       >
-        <div styleName='info'>
-          <div styleName='info-left'>
+        {this.state.isDeleting
+          ? <div styleName='info'>
+            <div styleName='info-delete'>
 
-            <div styleName='info-left-top'>
-              <FolderSelect styleName='info-left-top-folderSelect'
-                value={this.state.note.storage + '-' + this.state.note.folder}
-                ref='folder'
-                storages={storages}
-                onChange={(e) => this.handleFolderChange(e)}
-              />
-            </div>
-            <div styleName='info-left-bottom'>
-              <TagSelect
-                styleName='info-left-bottom-tagSelect'
-                ref='tags'
-                value={this.state.note.tags}
-                onChange={(e) => this.handleChange(e)}
-              />
+              <span styleName='info-delete-message'>
+                Are you sure to delete this note?
+              </span>
+              <button styleName='info-delete-cancelButton'
+                onClick={(e) => this.handleDeleteCancelButtonClick(e)}
+              >Cancel</button>
+              <button styleName='info-delete-confirmButton'
+                onClick={(e) => this.handleDeleteConfirmButtonClick(e)}
+              >Confirm</button>
             </div>
           </div>
-          <div styleName='info-right'>
-            <StarButton styleName='info-right-button'
-              onClick={(e) => this.handleStarButtonClick(e)}
-              isActive={note.isStarred}
-            />
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleShareButtonClick(e)}
-            >
-              <i className='fa fa-share-alt fa-fw'/>
-            </button>
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleContextButtonClick(e)}
-            >
-              <i className='fa fa-ellipsis-v'/>
-            </button>
+          : <div styleName='info'>
+            <div styleName='info-left'>
+              <div styleName='info-left-top'>
+                <FolderSelect styleName='info-left-top-folderSelect'
+                  value={this.state.note.storage + '-' + this.state.note.folder}
+                  ref='folder'
+                  storages={storages}
+                  onChange={(e) => this.handleFolderChange(e)}
+                />
+              </div>
+              <div styleName='info-left-bottom'>
+                <TagSelect
+                  styleName='info-left-bottom-tagSelect'
+                  ref='tags'
+                  value={this.state.note.tags}
+                  onChange={(e) => this.handleChange(e)}
+                />
+              </div>
+            </div>
+            <div styleName='info-right'>
+              <StarButton styleName='info-right-button'
+                onClick={(e) => this.handleStarButtonClick(e)}
+                isActive={note.isStarred}
+              />
+              <button styleName='info-right-button'
+                onClick={(e) => this.handleShareButtonClick(e)}
+              >
+                <i className='fa fa-share-alt fa-fw'/>
+              </button>
+              <button styleName='info-right-button'
+                onClick={(e) => this.handleContextButtonClick(e)}
+              >
+                <i className='fa fa-ellipsis-v'/>
+              </button>
+            </div>
           </div>
-        </div>
+        }
+
         <div styleName='body'>
           <div styleName='body-description'>
             <textarea styleName='body-description-textarea'
diff --git a/browser/main/Detail/SnippetNoteDetail.styl b/browser/main/Detail/SnippetNoteDetail.styl
index f3287205..f64e0a9c 100644
--- a/browser/main/Detail/SnippetNoteDetail.styl
+++ b/browser/main/Detail/SnippetNoteDetail.styl
@@ -12,6 +12,36 @@ $info-height = 75px
   border-bottom $ui-border
   background-color $ui-backgroundColor
 
+.info-delete
+  height 80px
+  clearfix()
+
+.info-delete-message
+  height 80px
+  line-height 80px
+  padding 0 25px
+  float left
+
+.info-delete-confirmButton
+  float right
+  margin 25px 5px 0
+  height 30px
+  padding 0 25px
+  border-radius 2px
+  border none
+  color $ui-text-color
+  colorDangerButton()
+
+.info-delete-cancelButton
+  float right
+  height 30px
+  margin 25px 5px 0
+  padding 0 25px
+  border $ui-border
+  border-radius 2px
+  color $ui-text-color
+  colorDefaultButton()
+
 .info-left
   float left
   padding 0 5px
@@ -68,6 +98,7 @@ $info-height = 75px
   resize none
   border none
   padding 10px
+  line-height 1.6
 
 .tabList
   absolute left right
diff --git a/browser/main/Detail/index.js b/browser/main/Detail/index.js
index c9139ce5..7368fe73 100644
--- a/browser/main/Detail/index.js
+++ b/browser/main/Detail/index.js
@@ -4,14 +4,25 @@ import styles from './Detail.styl'
 import _ from 'lodash'
 import MarkdownNoteDetail from './MarkdownNoteDetail'
 import SnippetNoteDetail from './SnippetNoteDetail'
-import dataApi from 'browser/main/lib/dataApi'
-
-const electron = require('electron')
+import ee from 'browser/main/lib/eventEmitter'
 
 const OSX = global.process.platform === 'darwin'
 
 class Detail extends React.Component {
-  componentDidUpdate (prevProps, prevState) {
+  constructor (props) {
+    super(props)
+
+    this.focusHandler = () => {
+      this.refs.root.focus()
+    }
+  }
+
+  componentDidMount () {
+    ee.on('detail:focus', this.focusHandler)
+  }
+
+  componentWillUnmount () {
+    ee.off('detail:focus', this.focusHandler)
   }
 
   render () {
@@ -35,6 +46,7 @@ class Detail extends React.Component {
         <div styleName='root'
           style={this.props.style}
           tabIndex='0'
+          ref='root'
         >
           <div styleName='empty'>
             <div styleName='empty-message'>{OSX ? 'Command(⌘)' : 'Ctrl(^)'} + N<br/>to create a new post</div>
@@ -48,6 +60,7 @@ class Detail extends React.Component {
         <SnippetNoteDetail
           note={note}
           config={config}
+          ref='root'
           {..._.pick(this.props, [
             'dispatch',
             'storages',
@@ -63,6 +76,7 @@ class Detail extends React.Component {
       <MarkdownNoteDetail
         note={note}
         config={config}
+        ref='root'
         {..._.pick(this.props, [
           'dispatch',
           'storages',
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index 2dc52e24..f60a45da 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -3,18 +3,32 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './NoteList.styl'
 import moment from 'moment'
 import _ from 'lodash'
+import ee from 'browser/main/lib/eventEmitter'
 
 class NoteList extends React.Component {
   constructor (props) {
     super(props)
+
+    this.selectNextNoteHandler = () => {
+      console.log('fired next')
+      this.selectNextNote()
+    }
+    this.selectPriorNoteHandler = () => {
+      this.selectPriorNote()
+    }
   }
 
   componentDidMount () {
     this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
+    ee.on('list:next', this.selectNextNoteHandler)
+    ee.on('list:prior', this.selectPriorNoteHandler)
   }
 
   componentWillUnmount () {
     clearInterval(this.refreshTimer)
+
+    ee.off('list:next', this.selectNextNoteHandler)
+    ee.off('list:prior', this.selectPriorNoteHandler)
   }
 
   componentDidUpdate () {
@@ -51,10 +65,6 @@ class NoteList extends React.Component {
     }
   }
 
-  focus () {
-    // ReactDOM.findDOMNode(this).focus()
-  }
-
   selectPriorNote () {
     if (this.notes == null || this.notes.length === 0) {
       return
@@ -104,6 +114,7 @@ class NoteList extends React.Component {
         key: this.notes[targetIndex].uniqueKey
       }
     })
+    ee.emit('list:moved')
   }
 
   handleNoteListKeyDown (e) {
diff --git a/browser/main/global.styl b/browser/main/global.styl
index 2726a551..d4073aff 100644
--- a/browser/main/global.styl
+++ b/browser/main/global.styl
@@ -65,7 +65,11 @@ textarea.block-input
 
 modalZIndex= 1000
 modalBackColor = transparentify(white, 65%)
-
+.ace_focus
+  outline-color rgb(59, 153, 252)
+  outline-offset 0px
+  outline-style auto
+  outline-width 5px
 .ModalBase
   fixed top left bottom right
   z-index modalZIndex
diff --git a/browser/main/lib/dataApi.js b/browser/main/lib/dataApi.js
index 8c475f07..77a3d04e 100644
--- a/browser/main/lib/dataApi.js
+++ b/browser/main/lib/dataApi.js
@@ -282,6 +282,15 @@ function removeStorage (key) {
   return Promise.resolve(true)
 }
 
+function renameStorage (key, name) {
+  let storage = _.find(storages, {key: key})
+  if (storage == null) throw new Error('Storage doesn\'t exist.')
+  storage.cache.name = name
+  storage.saveCache()
+
+  return Promise.resolve(storage.toJSON())
+}
+
 function migrateFromV5 (key, data) {
   let oldFolders = data.folders
   let oldArticles = data.articles
@@ -483,17 +492,31 @@ function updateNote (storageKey, folderKey, noteKey, input) {
     storage: storageKey,
     folder: folderKey
   })
-  note.data.title = input.title
-  note.data.tags = input.tags
-  note.data.content = input.content
-  note.data.updatedAt = input.updatedAt
+
+  switch (note.data.type) {
+    case 'MARKDOWN_NOTE':
+      note.data.title = input.title
+      note.data.tags = input.tags
+      note.data.content = input.content
+      note.data.updatedAt = input.updatedAt
+      break
+    case 'SNIPPET_NOTE':
+      note.data.title = input.title
+      note.data.tags = input.tags
+      note.data.description = input.description
+      note.data.snippets = input.snippets
+      note.data.updatedAt = input.updatedAt
+  }
 
   return note.save()
     .then(() => note.toJSON())
 }
 
-function removeNote (storageKey, folderKey, noteKey, input) {
+function removeNote (storageKey, folderKey, noteKey) {
+  notes = notes.filter((note) => note.storage !== storageKey || note.folder !== folderKey || note.key !== noteKey)
+  queueSaveFolder(storageKey, folderKey)
 
+  return Promise.resolve(null)
 }
 
 function moveNote (storageKey, folderKey, noteKey, newStorageKey, newFolderKey) {
@@ -529,6 +552,7 @@ export default {
   init,
   addStorage,
   removeStorage,
+  renameStorage,
   createFolder,
   updateFolder,
   removeFolder,
diff --git a/browser/main/lib/eventEmitter.js b/browser/main/lib/eventEmitter.js
new file mode 100644
index 00000000..de08f078
--- /dev/null
+++ b/browser/main/lib/eventEmitter.js
@@ -0,0 +1,26 @@
+const electron = require('electron')
+const { ipcRenderer, remote } = electron
+
+function on (name, listener) {
+  ipcRenderer.on(name, listener)
+}
+
+function off (name, listener) {
+  ipcRenderer.removeListener(name, listener)
+}
+
+function once (name, listener) {
+  ipcRenderer.once(name, listener)
+}
+
+function emit (name, ...args) {
+  console.log(name)
+  remote.getCurrentWindow().webContents.send(name, ...args)
+}
+
+export default {
+  emit,
+  on,
+  off,
+  once
+}
diff --git a/browser/main/modals/InitModal.js b/browser/main/modals/InitModal.js
index 739f3e5f..17e7d78e 100644
--- a/browser/main/modals/InitModal.js
+++ b/browser/main/modals/InitModal.js
@@ -36,7 +36,8 @@ class InitModal extends React.Component {
       migrationRequested: true,
       isLoading: true,
       data: null,
-      legacyStorageExists: false
+      legacyStorageExists: false,
+      isSending: false
     }
   }
 
@@ -86,67 +87,77 @@ class InitModal extends React.Component {
   }
 
   handleSubmitButtonClick (e) {
-    dataApi
-      .addStorage({
-        name: 'My Storage',
-        path: this.state.path
-      })
-      .then((data) => {
-        if (this.state.migrationRequested && _.isObject(this.state.data) && _.isArray(this.state.data.folders) && _.isArray(this.state.data.articles)) {
-          return dataApi.migrateFromV5(data.storage.key, this.state.data)
-        }
-        return data
-      })
-      .then((data) => {
-        store.dispatch({
-          type: 'ADD_STORAGE',
-          storage: data.storage,
-          notes: data.notes
+    this.setState({
+      isSending: true
+    }, () => {
+      dataApi
+        .addStorage({
+          name: 'My Storage',
+          path: this.state.path
         })
-
-        let defaultMarkdownNote = dataApi
-          .createMarkdownNote(data.storage.key, data.storage.folders[0].key, {
-            title: 'Welcome to Boostnote :)',
-            content: '# Welcome to Boostnote :)\nThis is a markdown note.\n\nClick to edit this note.'
-          })
-          .then((note) => {
-            store.dispatch({
-              type: 'CREATE_NOTE',
-              note: note
-            })
-          })
-        let defaultSnippetNote = dataApi
-          .createSnippetNote(data.storage.key, data.storage.folders[0].key, {
-            title: 'Snippet note example',
-            description: 'Snippet note example\nYou can store a series of snippet as a single note like Gist.',
-            snippets: [
-              {
-                name: 'example.html',
-                mode: 'html',
-                content: '<html>\n<body>\n<h1 id=\'hello\'>Hello World</h1>\n</body>\n</html>'
-              },
-              {
-                name: 'example.js',
-                mode: 'javascript',
-                content: 'var html = document.getElementById(\'hello\').innerHTML\n\nconsole.log(html)'
-              }
-            ]
-          })
-          .then((note) => {
-            store.dispatch({
-              type: 'CREATE_NOTE',
-              note: note
-            })
+        .then((data) => {
+          if (this.state.migrationRequested && _.isObject(this.state.data) && _.isArray(this.state.data.folders) && _.isArray(this.state.data.articles)) {
+            return dataApi.migrateFromV5(data.storage.key, this.state.data)
+          }
+          return data
+        })
+        .then((data) => {
+          store.dispatch({
+            type: 'ADD_STORAGE',
+            storage: data.storage,
+            notes: data.notes
           })
 
-        return Promise.resolve(defaultSnippetNote)
-          .then(defaultMarkdownNote)
-          .then(() => data.storage)
-      })
-      .then((storage) => {
-        hashHistory.push('/storages/' + storage.key)
-        this.props.close()
-      })
+          let defaultMarkdownNote = dataApi
+            .createMarkdownNote(data.storage.key, data.storage.folders[0].key, {
+              title: 'Welcome to Boostnote :)',
+              content: '# Welcome to Boostnote :)\nThis is a markdown note.\n\nClick to edit this note.'
+            })
+            .then((note) => {
+              store.dispatch({
+                type: 'CREATE_NOTE',
+                note: note
+              })
+            })
+          let defaultSnippetNote = dataApi
+            .createSnippetNote(data.storage.key, data.storage.folders[0].key, {
+              title: 'Snippet note example',
+              description: 'Snippet note example\nYou can store a series of snippet as a single note like Gist.',
+              snippets: [
+                {
+                  name: 'example.html',
+                  mode: 'html',
+                  content: '<html>\n<body>\n<h1 id=\'hello\'>Hello World</h1>\n</body>\n</html>'
+                },
+                {
+                  name: 'example.js',
+                  mode: 'javascript',
+                  content: 'var html = document.getElementById(\'hello\').innerHTML\n\nconsole.log(html)'
+                }
+              ]
+            })
+            .then((note) => {
+              store.dispatch({
+                type: 'CREATE_NOTE',
+                note: note
+              })
+            })
+
+          return Promise.resolve(defaultSnippetNote)
+            .then(defaultMarkdownNote)
+            .then(() => data.storage)
+        })
+        .then((storage) => {
+          hashHistory.push('/storages/' + storage.key)
+          this.props.close()
+        })
+        .catch((err) => {
+          this.setState({
+            isSending: false
+          })
+          throw err
+        })
+    })
   }
 
   handleMigrationRequestedChange (e) {
@@ -197,7 +208,15 @@ class InitModal extends React.Component {
           <div styleName='body-control'>
             <button styleName='body-control-createButton'
               onClick={(e) => this.handleSubmitButtonClick(e)}
-            >Let's Go!</button>
+              disabled={this.state.isSending}
+            >
+              {this.state.isSending
+                ? <span>
+                  <i className='fa fa-spin fa-spinner'/> Loading...
+                </span>
+                : 'Let\'s Go!'
+              }
+            </button>
           </div>
         </div>
 
diff --git a/browser/main/modals/InitModal.styl b/browser/main/modals/InitModal.styl
index 7c612f10..551fd1d0 100644
--- a/browser/main/modals/InitModal.styl
+++ b/browser/main/modals/InitModal.styl
@@ -27,7 +27,7 @@
   top 10px
   right 10px
   height 30px
-  width 0 25px
+  padding 0 25px
   border $ui-border
   border-radius 2px
   color $ui-text-color
diff --git a/browser/main/modals/NewNoteModal.js b/browser/main/modals/NewNoteModal.js
index 72a5fd3e..115e0a63 100644
--- a/browser/main/modals/NewNoteModal.js
+++ b/browser/main/modals/NewNoteModal.js
@@ -3,6 +3,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './NewNoteModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
+import ee from 'browser/main/lib/eventEmitter'
 
 class NewNoteModal extends React.Component {
   constructor (props) {
@@ -36,6 +37,7 @@ class NewNoteModal extends React.Component {
           pathname: location.pathname,
           query: {key: note.uniqueKey}
         })
+        ee.emit('detail:focus')
         this.props.close()
       })
   }
@@ -67,6 +69,7 @@ class NewNoteModal extends React.Component {
           pathname: location.pathname,
           query: {key: note.uniqueKey}
         })
+        ee.emit('detail:focus')
         this.props.close()
       })
   }
diff --git a/browser/main/modals/PreferencesModal/StorageItem.js b/browser/main/modals/PreferencesModal/StorageItem.js
index 42f2f73b..9744e6c9 100644
--- a/browser/main/modals/PreferencesModal/StorageItem.js
+++ b/browser/main/modals/PreferencesModal/StorageItem.js
@@ -204,6 +204,14 @@ class UnstyledFolderItem extends React.Component {
 const FolderItem = CSSModules(UnstyledFolderItem, styles)
 
 class StorageItem extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isLabelEditing: false
+    }
+  }
+
   handleNewFolderButtonClick (e) {
     let { storage } = this.props
     let input = {
@@ -242,6 +250,35 @@ class StorageItem extends React.Component {
       })
   }
 
+  handleLabelClick (e) {
+    let { storage } = this.props
+    this.setState({
+      isLabelEditing: true,
+      name: storage.name
+    }, () => {
+      this.refs.label.focus()
+    })
+  }
+  handleLabelChange (e) {
+    this.setState({
+      name: this.refs.label.value
+    })
+  }
+  handleLabelBlur (e) {
+    let { storage } = this.props
+    dataApi
+      .renameStorage(storage.key, this.state.name)
+      .then((storage) => {
+        store.dispatch({
+          type: 'RENAME_STORAGE',
+          storage: storage
+        })
+        this.setState({
+          isLabelEditing: false
+        })
+      })
+  }
+
   render () {
     let { storage } = this.props
     let folderList = storage.folders.map((folder) => {
@@ -253,9 +290,24 @@ class StorageItem extends React.Component {
     return (
       <div styleName='root' key={storage.key}>
         <div styleName='header'>
-          <i className='fa fa-folder-open'/>&nbsp;
-          {storage.name}&nbsp;
-          <span styleName='header-path'>({storage.path})</span>
+          {this.state.isLabelEditing
+            ? <div styleName='header-label--edit'>
+              <input styleName='header-label-input'
+                value={this.state.name}
+                ref='label'
+                onChange={(e) => this.handleLabelChange(e)}
+                onBlur={(e) => this.handleLabelBlur(e)}
+              />
+            </div>
+            : <div styleName='header-label'
+              onClick={(e) => this.handleLabelClick(e)}
+            >
+              <i className='fa fa-folder-open'/>&nbsp;
+              {storage.name}&nbsp;
+              <span styleName='header-label-path'>({storage.path})</span>&nbsp;
+              <i styleName='header-label-editButton' className='fa fa-pencil'/>
+            </div>
+          }
           <div styleName='header-control'>
             <button styleName='header-control-button'
               onClick={(e) => this.handleNewFolderButtonClick(e)}
diff --git a/browser/main/modals/PreferencesModal/StorageItem.styl b/browser/main/modals/PreferencesModal/StorageItem.styl
index 724109d7..e5f74756 100644
--- a/browser/main/modals/PreferencesModal/StorageItem.styl
+++ b/browser/main/modals/PreferencesModal/StorageItem.styl
@@ -10,10 +10,32 @@
   border-bottom $default-border
   margin-bottom 5px
 
-.header-path
+.header-label
+  float left
+  cursor pointer
+  &:hover
+    .header-label-editButton
+      opacity 1
+
+.header-label-path
   color $ui-inactive-text-color
   font-size 10px
   margin 0 5px
+.header-label-editButton
+  color $ui-text-color
+  opacity 0
+  transition 0.2s
+.header-label--edit
+  @extend .header-label
+
+.header-label-input
+  height 25px
+  box-sizing border-box
+  vertical-align middle
+  border $ui-border
+  border-radius 2px
+  padding 0 5px
+
 
 .header-control
   float right
diff --git a/browser/main/store.js b/browser/main/store.js
index 2105ceec..b1c2e68b 100644
--- a/browser/main/store.js
+++ b/browser/main/store.js
@@ -18,6 +18,7 @@ function storages (state = [], action) {
     case 'ADD_FOLDER':
     case 'REMOVE_FOLDER':
     case 'UPDATE_STORAGE':
+    case 'RENAME_STORAGE':
       {
         let storages = state.slice()
         storages = storages
@@ -83,6 +84,12 @@ function notes (state = [], action) {
         notes.push(action.newNote)
         return notes
       }
+    case 'REMOVE_NOTE':
+      {
+        let notes = state.slice()
+        notes = notes.filter((note) => note.key !== action.note.key || note.folder !== action.note.folder || note.storage !== action.note.storage)
+        return notes
+      }
   }
   return state
 }

From 286739f770b6eb5a4c5a822811911a1dccdf7c0a Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sat, 23 Jul 2016 15:41:30 +0900
Subject: [PATCH 106/109] cleanup

---
 browser/main/Detail/index.js |  8 +++-
 browser/main/TopBar/index.js | 13 +++++++
 lib/hotkey.js                |  4 +-
 lib/main-app.js              | 73 ++++++++++++++++++------------------
 lib/main-menu.js             | 29 ++------------
 package.json                 |  2 -
 webpack-skeleton.js          |  1 -
 7 files changed, 61 insertions(+), 69 deletions(-)

diff --git a/browser/main/Detail/index.js b/browser/main/Detail/index.js
index 7368fe73..d2c96726 100644
--- a/browser/main/Detail/index.js
+++ b/browser/main/Detail/index.js
@@ -13,16 +13,21 @@ class Detail extends React.Component {
     super(props)
 
     this.focusHandler = () => {
-      this.refs.root.focus()
+      this.refs.root != null && this.refs.root.focus()
+    }
+    this.deleteHandler = () => {
+      this.refs.root != null && this.refs.root.handleDeleteMenuClick()
     }
   }
 
   componentDidMount () {
     ee.on('detail:focus', this.focusHandler)
+    ee.on('detail:delete', this.deleteHandler)
   }
 
   componentWillUnmount () {
     ee.off('detail:focus', this.focusHandler)
+    ee.off('detail:delete', this.deleteHandler)
   }
 
   render () {
@@ -46,7 +51,6 @@ class Detail extends React.Component {
         <div styleName='root'
           style={this.props.style}
           tabIndex='0'
-          ref='root'
         >
           <div styleName='empty'>
             <div styleName='empty-message'>{OSX ? 'Command(⌘)' : 'Ctrl(^)'} + N<br/>to create a new post</div>
diff --git a/browser/main/TopBar/index.js b/browser/main/TopBar/index.js
index cf435e93..e575056d 100644
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -5,6 +5,7 @@ import _ from 'lodash'
 import modal from 'browser/main/lib/modal'
 import NewNoteModal from 'browser/main/modals/NewNoteModal'
 import { hashHistory } from 'react-router'
+import ee from 'browser/main/lib/eventEmitter'
 
 const OSX = window.process.platform === 'darwin'
 
@@ -17,6 +18,18 @@ class TopBar extends React.Component {
       searchOptions: [],
       searchPopupOpen: false
     }
+
+    this.newNoteHandler = () => {
+      this.handleNewPostButtonClick()
+    }
+  }
+
+  componentDidMount () {
+    ee.on('top:new-note', this.newNoteHandler)
+  }
+
+  componentWillUnmount () {
+    ee.off('top:new-note', this.newNoteHandler)
   }
 
   handleNewPostButtonClick (e) {
diff --git a/lib/hotkey.js b/lib/hotkey.js
index 063305c4..4cb61ea4 100644
--- a/lib/hotkey.js
+++ b/lib/hotkey.js
@@ -3,7 +3,7 @@ const ipc = electron.ipcMain
 const Menu = electron.Menu
 const globalShortcut = electron.globalShortcut
 const mainWindow = require('./main-window')
-const nodeIpc = require('@rokt33r/node-ipc')
+// const nodeIpc = require('@rokt33r/node-ipc')
 
 function emitToFinder (type, data) {
   var payload = {
@@ -11,7 +11,7 @@ function emitToFinder (type, data) {
     data: data
   }
 
-  nodeIpc.server.broadcast('message', payload)
+  // nodeIpc.server.broadcast('message', payload)
 }
 
 function toggleFinder () {
diff --git a/lib/main-app.js b/lib/main-app.js
index 991552cb..263ba7dd 100644
--- a/lib/main-app.js
+++ b/lib/main-app.js
@@ -6,7 +6,6 @@ const autoUpdater = electron.autoUpdater
 const path = require('path')
 const ChildProcess = require('child_process')
 const _ = require('lodash')
-const nodeIpc = require('@rokt33r/node-ipc')
 const GhReleases = require('electron-gh-releases')
 // electron.crashReporter.start()
 
@@ -154,37 +153,37 @@ updater.on('update-downloaded', (info) => {
   }
 })
 
-nodeIpc.config.id = 'node'
-nodeIpc.config.retry = 1500
-nodeIpc.config.silent = true
+// nodeIpc.config.id = 'node'
+// nodeIpc.config.retry = 1500
+// nodeIpc.config.silent = true
 
-nodeIpc.serve(
-  path.join(app.getPath('userData'), 'boost.service'),
-  function () {
-    nodeIpc.server.on(
-      'connect',
-      function (socket) {
-        socket.on('close', function () {
-          console.log('socket dead')
-          if (!appQuit) spawnFinder()
-        })
-      }
-    )
-    nodeIpc.server.on(
-      'message',
-      function (data, socket) {
-        console.log('>>', data)
-        handleIpcEvent(data)
-      }
-    )
-    nodeIpc.server.on(
-      'error',
-      function (err) {
-        console.log('>>', err)
-      }
-    )
-  }
-)
+// nodeIpc.serve(
+//   path.join(app.getPath('userData'), 'boost.service'),
+//   function () {
+//     nodeIpc.server.on(
+//       'connect',
+//       function (socket) {
+//         socket.on('close', function () {
+//           console.log('socket dead')
+//           if (!appQuit) spawnFinder()
+//         })
+//       }
+//     )
+//     nodeIpc.server.on(
+//       'message',
+//       function (data, socket) {
+//         console.log('>>', data)
+//         handleIpcEvent(data)
+//       }
+//     )
+//     nodeIpc.server.on(
+//       'error',
+//       function (err) {
+//         console.log('>>', err)
+//       }
+//     )
+//   }
+// )
 
 function handleIpcEvent (payload) {
   switch (payload.type) {
@@ -303,12 +302,12 @@ app.on('ready', function () {
   //     // Do nothing.
   // }
 
-  nodeIpc.server.start(function (err) {
-    if (err.code === 'EADDRINUSE') {
-      notify('Error occurs!', 'You have to kill other Boostnote processes.')
-      quitApp()
-    }
-  })
+  // nodeIpc.server.start(function (err) {
+  //   if (err.code === 'EADDRINUSE') {
+  //     notify('Error occurs!', 'You have to kill other Boostnote processes.')
+  //     quitApp()
+  //   }
+  // })
 
   require('./hotkey')
 })
diff --git a/lib/main-menu.js b/lib/main-menu.js
index 767f5ac6..66d03bfe 100644
--- a/lib/main-menu.js
+++ b/lib/main-menu.js
@@ -49,14 +49,7 @@ var file = {
       label: 'New Post',
       accelerator: OSX ? 'Command + N' : 'Control + N',
       click: function () {
-        mainWindow.webContents.send('top-new-post')
-      }
-    },
-    {
-      label: 'New Folder',
-      accelerator: OSX ? 'Command + Shift + N' : 'Control + Shift + N',
-      click: function () {
-        mainWindow.webContents.send('nav-new-folder')
+        mainWindow.webContents.send('top:new-note')
       }
     },
     {
@@ -66,7 +59,7 @@ var file = {
       label: 'Delete Post',
       accelerator: OSX ? 'Control + Backspace' : 'Control + Delete',
       click: function () {
-        mainWindow.webContents.send('detail-delete')
+        mainWindow.webContents.send('detail:delete')
       }
     }
   ]
@@ -127,16 +120,6 @@ var edit = {
 var view = {
   label: 'View',
   submenu: [
-    {
-      label: 'Focus Search',
-      accelerator: 'Control + Alt + F',
-      click: function () {
-        mainWindow.webContents.send('top-focus-search')
-      }
-    },
-    {
-      type: 'separator'
-    },
     {
       label: 'Reload',
       accelerator: (function () {
@@ -192,12 +175,8 @@ var help = {
       click: function () { shell.openExternal('https://b00st.io/') }
     },
     {
-      label: 'Tutorial page',
-      click: function () { shell.openExternal('https://b00st.io/tutorial.html') }
-    },
-    {
-      label: 'Discussions',
-      click: function () { shell.openExternal('https://github.com/BoostIO/boost-app-discussions/issues') }
+      label: 'Issue Tracker',
+      click: function () { shell.openExternal('https://github.com/BoostIO/Boostnote/issues') }
     },
     {
       label: 'Changelog',
diff --git a/package.json b/package.json
index fd60f8e8..42cb37df 100644
--- a/package.json
+++ b/package.json
@@ -38,8 +38,6 @@
   "homepage": "https://b00st.io",
   "dependencies": {
     "@rokt33r/markdown-it-math": "^4.0.1",
-    "@rokt33r/node-ipc": "^5.0.4",
-    "@rokt33r/sanitize-html": "^1.11.2",
     "ace-builds": "git+https://git@github.com/ajaxorg/ace-builds.git",
     "devicon": "^2.0.0",
     "electron-gh-releases": "^2.0.2",
diff --git a/webpack-skeleton.js b/webpack-skeleton.js
index 063a5c01..ae3eec22 100644
--- a/webpack-skeleton.js
+++ b/webpack-skeleton.js
@@ -38,7 +38,6 @@ var config = {
     'markdown-it-emoji',
     'fs-jetpack',
     '@rokt33r/markdown-it-math',
-    '@rokt33r/sanitize-html',
     'markdown-it-checkbox',
     'season',
     'devtron',

From 1ff33378e1c919b272a1bed8cfdf2f2298178c4e Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sat, 23 Jul 2016 15:45:21 +0900
Subject: [PATCH 107/109] esc to close modal

---
 browser/main/modals/InitModal.js              | 16 ++++++++++++++--
 browser/main/modals/NewNoteModal.js           | 11 ++++++++++-
 browser/main/modals/PreferencesModal/index.js | 16 +++++++++++++++-
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/browser/main/modals/InitModal.js b/browser/main/modals/InitModal.js
index 17e7d78e..906373d6 100644
--- a/browser/main/modals/InitModal.js
+++ b/browser/main/modals/InitModal.js
@@ -68,7 +68,9 @@ class InitModal extends React.Component {
       newState.legacyStorageExists = true
       newState.data = data
     }
-    this.setState(newState)
+    this.setState(newState, () => {
+      this.refs.createButton.focus()
+    })
   }
 
   handlePathBrowseButtonClick (e) {
@@ -166,6 +168,12 @@ class InitModal extends React.Component {
     })
   }
 
+  handleKeyDown (e) {
+    if (e.keyCode === 27) {
+      this.props.close()
+    }
+  }
+
   render () {
     if (this.state.isLoading) {
       return <div styleName='root--loading'>
@@ -174,7 +182,10 @@ class InitModal extends React.Component {
       </div>
     }
     return (
-      <div styleName='root'>
+      <div styleName='root'
+        tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
 
         <div styleName='header'>
           <div styleName='header-title'>Initialize Storage</div>
@@ -207,6 +218,7 @@ class InitModal extends React.Component {
 
           <div styleName='body-control'>
             <button styleName='body-control-createButton'
+              ref='createButton'
               onClick={(e) => this.handleSubmitButtonClick(e)}
               disabled={this.state.isSending}
             >
diff --git a/browser/main/modals/NewNoteModal.js b/browser/main/modals/NewNoteModal.js
index 115e0a63..f8793fdc 100644
--- a/browser/main/modals/NewNoteModal.js
+++ b/browser/main/modals/NewNoteModal.js
@@ -81,9 +81,18 @@ class NewNoteModal extends React.Component {
     }
   }
 
+  handleKeyDown (e) {
+    if (e.keyCode === 27) {
+      this.props.close()
+    }
+  }
+
   render () {
     return (
-      <div styleName='root'>
+      <div styleName='root'
+        tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
         <div styleName='header'>
           <div styleName='title'>New Note</div>
         </div>
diff --git a/browser/main/modals/PreferencesModal/index.js b/browser/main/modals/PreferencesModal/index.js
index adbd1869..90c2718e 100644
--- a/browser/main/modals/PreferencesModal/index.js
+++ b/browser/main/modals/PreferencesModal/index.js
@@ -15,6 +15,10 @@ class Preferences extends React.Component {
     }
   }
 
+  componentDidMount () {
+    this.refs.root.focus()
+  }
+
   switchTeam (teamId) {
     this.setState({currentTeamId: teamId})
   }
@@ -49,6 +53,12 @@ class Preferences extends React.Component {
     }
   }
 
+  handleKeyDown (e) {
+    if (e.keyCode === 27) {
+      this.props.close()
+    }
+  }
+
   render () {
     let content = this.renderContent()
 
@@ -79,7 +89,11 @@ class Preferences extends React.Component {
     })
 
     return (
-      <div styleName='root'>
+      <div styleName='root'
+        ref='root'
+        tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
         <div styleName='nav'>
           {navButtons}
         </div>

From e70d09ebbfe77815873f055792e32a91a6119a81 Mon Sep 17 00:00:00 2001
From: Dick Choi <fluke8259@gmail.com>
Date: Sat, 23 Jul 2016 15:51:36 +0900
Subject: [PATCH 108/109] modify smaller border for folder item

---
 browser/main/SideNav/StorageItem.styl                 | 2 +-
 browser/main/modals/PreferencesModal/StorageItem.styl | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/main/SideNav/StorageItem.styl b/browser/main/SideNav/StorageItem.styl
index 7901ca98..171aacc3 100644
--- a/browser/main/SideNav/StorageItem.styl
+++ b/browser/main/SideNav/StorageItem.styl
@@ -84,6 +84,6 @@
   padding 0 10px
   height 30px
   line-height 30px
-  border-width 0 0 0 6px
+  border-width 0 0 0 4px
   border-style solid
   border-color transparent
diff --git a/browser/main/modals/PreferencesModal/StorageItem.styl b/browser/main/modals/PreferencesModal/StorageItem.styl
index e5f74756..48184101 100644
--- a/browser/main/modals/PreferencesModal/StorageItem.styl
+++ b/browser/main/modals/PreferencesModal/StorageItem.styl
@@ -58,7 +58,7 @@
     background-color darken(white, 3%)
 .folderList-item-left
   height 30px
-  border-left solid 6px transparent
+  border-left solid 4px transparent
   padding 0 10px
   line-height 30px
   float left

From 173640d0b45d174b6f872993178de4f92405566f Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sat, 23 Jul 2016 20:28:01 +0900
Subject: [PATCH 109/109] ready to pack

---
 package.json        | 2 +-
 webpack-skeleton.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 42cb37df..f48fb0b0 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "vendor": "oh-my-cdn"
   },
   "config": {
-    "electron-version": "0.36.11"
+    "electron-version": "1.1.3"
   },
   "repository": {
     "type": "git",
diff --git a/webpack-skeleton.js b/webpack-skeleton.js
index ae3eec22..50f7dfeb 100644
--- a/webpack-skeleton.js
+++ b/webpack-skeleton.js
@@ -41,7 +41,6 @@ var config = {
     'markdown-it-checkbox',
     'season',
     'devtron',
-    'sander',
     {
       react: 'var React',
       'react-dom': 'var ReactDOM',