fix path validation for Windows

content of rendered preview should be selectable
the hit box of width slider should has the highest z-index

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["react", "es2015"],
+  "env": {
+    "development": {
+      "presets": ["react-hmre"]
+    }
+  }
+}

.gitignore

@@ -1,5 +1,10 @@
-/build
+.DS_Store
-/node_modules
-/electron_build
 .env
-dist/
+Desktop.ini
+Thumbs.db
+node_modules/*
+!node_modules/boost
+/dist
+/compiled
+/secret
+*.log

Gulpfile.js

@@ -1,161 +0,0 @@
-require('dotenv').load()
-var env = process.env
-
-var gulp = require('gulp')
-var styl = require('gulp-stylus')
-var autoprefixer = require('gulp-autoprefixer')
-var templateCache = require('gulp-angular-templatecache')
-var globby = require('globby')
-var template = require('gulp-template')
-var del = require('del')
-var runSequence = require('run-sequence')
-var plumber = require('gulp-plumber')
-var notify = require('gulp-notify')
-var changed = require('gulp-changed')
-var livereload = require('gulp-livereload')
-
-// for Dist
-var rev = require('gulp-rev')
-var ngAnnotate = require('gulp-ng-annotate')
-var uglify = require('gulp-uglify')
-var minifyCss = require('gulp-minify-css')
-var merge = require('merge-stream')
-var concat = require('gulp-concat')
-var streamqueue = require('streamqueue')
-var minifyHtml = require('gulp-minify-html')
-
-var config = require('./build.config.js')
-
-gulp.task('js', function () {
-  return streamqueue({objectMode: true},
-    gulp.src('tpls/env.js')
-      .pipe(template({
-        apiUrl: env.BUILD_API_URL
-      })),
-    gulp.src(['src/**/*.js'])
-  )
-  .pipe(changed('build'))
-  .pipe(gulp.dest('build'))
-})
-
-gulp.task('dist', function () {
-  var js = streamqueue({objectMode: true},
-    gulp.src(['src/**/*.js']),
-    gulp.src('tpls/env.js')
-      .pipe(template({
-        apiUrl: env.DIST_API_URL
-      })),
-    gulp.src('src/**/*.tpl.html')
-      .pipe(templateCache())
-  )
-  .pipe(ngAnnotate())
-  .pipe(uglify())
-  .pipe(concat('app.js'))
-  .pipe(gulp.dest('dist'))
-
-  var css = gulp.src('src/styles/main.styl')
-    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
-    .pipe(styl())
-    .pipe(autoprefixer())
-    .pipe(minifyCss())
-    .pipe(gulp.dest('dist'))
-
-  var index = gulp.src('src/index.html')
-      .pipe(template({
-        scripts: ['app.js'],
-        styles: ['main.css'],
-        env: 'dist'
-      }))
-      .pipe(minifyHtml())
-      .pipe(gulp.dest('dist'))
-
-  return merge(js, css, index)
-})
-
-gulp.task('styl', function () {
-  return gulp.src('src/styles/main.styl')
-    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
-    .pipe(styl())
-    .pipe(autoprefixer())
-    .pipe(gulp.dest('build'))
-    .pipe(notify('Stylus!!'))
-    .pipe(livereload())
-})
-
-gulp.task('tpls', function () {
-  return gulp.src('src/**/*.tpl.html')
-    .pipe(templateCache())
-    .pipe(notify('Tpls Done!! :)'))
-    .pipe(gulp.dest('build'))
-})
-
-gulp.task('index', function () {
-  var files = globby.sync(['build/**/*', '!build/vendor/**/*'])
-
-  var filter = function (files, ext) {
-    return files.filter(function (file) {
-      var reg = new RegExp('.+\.' + ext + '$')
-      return file.match(reg)
-    }).map(function (file) {
-      return file.replace('build/', '')
-    })
-  }
-  var scripts = filter(files, 'js')
-  var styles = filter(files, 'css')
-
-  return gulp.src('src/index.html')
-    .pipe(template({
-      scripts: scripts,
-      styles: styles,
-      env: 'build'
-    }))
-    .pipe(gulp.dest('build'))
-    .pipe(livereload())
-})
-
-gulp.task('vendor', function () {
-  var vendors = config.vendors
-
-  var vendorFiles = vendors.map(function (vendor) {
-    return vendor.src
-  })
-
-  vendorFiles.push('node_modules/font-awesome/**/font-awesome.css')
-  vendorFiles.push('node_modules/font-awesome/**/fontawesome-webfont.*')
-  vendorFiles.push('node_modules/font-awesome/**/FontAwesome.*')
-
-  return gulp.src(vendorFiles)
-    .pipe(gulp.dest('build/vendor'))
-})
-
-gulp.task('resources', function () {
-  return gulp.src('resources/**/*')
-    .pipe(changed('build/resources'))
-    .pipe(gulp.dest('build/resources'))
-})
-
-gulp.task('build', function (cb) {
-  runSequence(['js', 'styl', 'tpls', 'vendor', 'resources'], 'index', cb)
-})
-
-gulp.task('watch', function (cb) {
-  gulp.watch(['.env', 'tpls/env.js', 'src/**/*.js'], ['js'])
-
-  gulp.watch('src/styles/**/*.styl', ['styl'])
-
-  gulp.watch('src/**/*.tpl.html', ['tpls'])
-
-  gulp.watch(['build/**/*.js', 'src/index.html'], ['index'])
-
-  livereload.listen()
-})
-
-gulp.task('del', function (cb) {
-  del(['build/**/*'], cb)
-})
-
-gulp.task('default', function (cb) {
-  runSequence('del', 'build', 'watch', cb)
-})
-
-require('./gulp-electron')(gulp)

LICENSE

@@ -0,0 +1,16 @@
+Boostnote - the simplest note app
+
+Copyright (C) 2016 MAISIN&CO.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.

appdmg.json

@@ -0,0 +1,11 @@
+{
+  "title": "Boostnote",
+  "icon": "resources/dmg.icns",
+  "background": "resources/boostnote-install.png",
+  "icon-size": 80,
+  "contents": [
+    { "x": 448, "y": 344, "type": "link", "path": "/Applications" },
+    { "x": 192, "y": 344, "type": "file", "path": "dist/Boostnote-darwin-x64/Boostnote.app" }
+  ]
+
+}

browser/components/CodeEditor.js

@@ -0,0 +1,261 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import modes from '../lib/modes'
+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)
+
+    this.changeHandler = (e) => this.handleChange(e)
+    this.blurHandler = (e) => {
+      e.stopPropagation()
+      let el = e.relatedTarget
+      let isStillFocused = false
+      while (el != null) {
+        if (el === this.refs.root) {
+          isStillFocused = true
+          break
+        }
+        el = el.parentNode
+      }
+
+      if (!isStillFocused && this.props.onBlur != null) this.props.onBlur(e)
+    }
+
+    this.killedBuffer = ''
+    this.execHandler = (e) => {
+      console.info('ACE COMMAND >> %s', e.command.name)
+      switch (e.command.name) {
+        case 'gotolinestart':
+          e.preventDefault()
+          {
+            let position = this.editor.getCursorPosition()
+            this.editor.navigateTo(position.row, 0)
+          }
+          break
+        case 'gotolineend':
+          e.preventDefault()
+          let position = this.editor.getCursorPosition()
+          this.editor.navigateTo(position.row, this.editor.getSession().getLine(position.row).length)
+          break
+        case 'jumptomatching':
+          e.preventDefault()
+          this.editor.navigateUp()
+          break
+        case 'removetolineend':
+          e.preventDefault()
+          let range = this.editor.getSelectionRange()
+          let session = this.editor.getSession()
+          if (range.isEmpty()) {
+            range.setEnd(range.start.row, session.getLine(range.start.row).length)
+            this.killedBuffer = session.getTextRange(range)
+            if (this.killedBuffer.length > 0) {
+              console.log('remove to lineend')
+              session.remove(range)
+            } else {
+              if (session.getLength() === range.start.row) {
+                return
+              }
+              range.setStart(range.start.row, range.end.col)
+              range.setEnd(range.start.row + 1, 0)
+              this.killedBuffer = '\n'
+              session.remove(range)
+            }
+          } else {
+            this.killedBuffer = session.getTextRange(range)
+            session.remove(range)
+          }
+      }
+    }
+    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) => {
+            el.removeEventListener('blur', this.blurHandler)
+            el.addEventListener('blur', this.blurHandler)
+          })
+          break
+      }
+    }
+
+    this.state = {
+    }
+
+    this.silentChange = false
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.readOnly !== this.props.readOnly) {
+      this.editor.setReadOnly(!!nextProps.readOnly)
+    }
+  }
+
+  componentDidMount () {
+    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/' + theme)
+    editor.moveCursorTo(0, 0)
+    editor.setReadOnly(!!this.props.readOnly)
+    editor.setFontSize(fontSize)
+
+    editor.on('blur', this.blurHandler)
+
+    editor.commands.addCommand({
+      name: 'Emacs cursor up',
+      bindKey: {mac: 'Ctrl-P'},
+      exec: function (editor) {
+        editor.navigateUp(1)
+        if (editor.getCursorPosition().row < editor.getFirstVisibleRow()) editor.scrollToLine(editor.getCursorPosition().row, false, false)
+      },
+      readOnly: true
+    })
+    editor.commands.addCommand({
+      name: 'Emacs kill buffer',
+      bindKey: {mac: 'Ctrl-Y'},
+      exec: function (editor) {
+        editor.insert(this.killedBuffer)
+      }.bind(this),
+      readOnly: true
+    })
+
+    editor.commands.on('exec', this.execHandler)
+    editor.commands.on('afterExec', this.afterExecHandler)
+
+    var session = editor.getSession()
+    mode = _.find(modes, {name: mode})
+    let syntaxMode = mode != null
+      ? mode.mode
+      : 'text'
+    session.setMode('ace/mode/' + syntaxMode)
+
+    session.setUseSoftTabs(this.props.indentType === 'space')
+    session.setTabSize(this.props.indentSize)
+    session.setOption('useWorker', true)
+    session.setUseWrapMode(true)
+    session.setValue(_.isString(value) ? value : '')
+
+    session.on('change', this.changeHandler)
+  }
+
+  componentWillUnmount () {
+    this.editor.getSession().removeListener('change', this.changeHandler)
+    this.editor.removeListener('blur', this.blurHandler)
+    this.editor.commands.removeListener('exec', this.execHandler)
+    this.editor.commands.removeListener('afterExec', this.afterExecHandler)
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    let { value } = this.props
+    this.value = value
+    let editor = this.editor
+    let session = this.editor.getSession()
+
+    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)
+    }
+    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) {
+    if (this.props.onChange) {
+      this.value = this.editor.getValue()
+      this.props.onChange(e)
+    }
+  }
+
+  getFirstVisibleRow () {
+    return this.editor.getFirstVisibleRow()
+  }
+
+  getCursorPosition () {
+    return this.editor.getCursorPosition()
+  }
+
+  moveCursorTo (row, col) {
+    this.editor.moveCursorTo(row, col)
+  }
+
+  scrollToLine (num) {
+    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, fontFamily } = this.props
+    fontFamily = _.isString(fontFamily) && fontFamily.length > 0
+      ? [fontFamily].concat(defaultEditorFontFamily)
+      : defaultEditorFontFamily
+    return (
+      <div
+        className={className == null
+          ? 'CodeEditor'
+          : `CodeEditor ${className}`
+        }
+        ref='root'
+        tabIndex='-1'
+        style={{
+          fontFamily: fontFamily.join(', ')
+        }}
+      />
+    )
+  }
+}
+
+CodeEditor.propTypes = {
+  value: PropTypes.string,
+  mode: PropTypes.string,
+  className: PropTypes.string,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  readOnly: PropTypes.bool
+}
+
+CodeEditor.defaultProps = {
+  readOnly: false,
+  theme: 'xcode',
+  fontSize: 14,
+  fontFamily: 'Monaco, Consolas',
+  indentSize: 4,
+  indentType: 'space'
+}
+
+export default CodeEditor

browser/components/MarkdownEditor.js

@@ -0,0 +1,151 @@
+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: 'PREVIEW'
+    }
+  }
+
+  componentDidMount () {
+    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)
+  }
+
+  handleContextMenu (e) {
+    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()
+        }
+      })
+    }
+  }
+
+  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)
+      })
+    }
+  }
+
+  handlePreviewMouseDown (e) {
+    this.previewMouseDownedAt = new Date()
+  }
+
+  handlePreviewMouseUp (e) {
+    let { config } = this.props
+    if (config.editor.switchPreview === 'BLUR' && new Date() - this.previewMouseDownedAt < 200) {
+      this.setState({
+        status: 'CODE'
+      }, () => {
+        this.refs.code.focus()
+      })
+    }
+  }
+
+  focus () {
+    if (this.state.status === 'PREVIEW') {
+      this.setState({
+        status: 'CODE'
+      }, () => {
+        this.refs.code.focus()
+      })
+    } else {
+      this.refs.code.focus()
+    }
+  }
+
+  reload () {
+    this.refs.code.reload()
+  }
+
+  render () {
+    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
+          ? 'MarkdownEditor'
+          : `MarkdownEditor ${className}`
+        }
+        onContextMenu={(e) => this.handleContextMenu(e)}
+        tabIndex='-1'
+      >
+        <CodeEditor styleName='codeEditor'
+          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)}
+          onBlur={(e) => this.handleBlur(e)}
+        />
+        <MarkdownPreview styleName={this.state.status === 'PREVIEW'
+            ? 'preview'
+            : 'preview--hide'
+          }
+          style={previewStyle}
+          fontSize={config.preview.fontSize}
+          fontFamily={config.preview.fontFamily}
+          codeBlockTheme={config.preview.codeBlockTheme}
+          codeBlockFontFamily={config.editor.fontFamily}
+          lineNumber={config.preview.lineNumber}
+          ref='preview'
+          onContextMenu={(e) => this.handleContextMenu(e)}
+          tabIndex='0'
+          value={value}
+          onMouseUp={(e) => this.handlePreviewMouseUp(e)}
+          onMouseDown={(e) => this.handlePreviewMouseDown(e)}
+        />
+      </div>
+    )
+  }
+}
+
+MarkdownEditor.propTypes = {
+  className: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  ignorePreviewPointerEvents: PropTypes.bool
+}
+
+export default CSSModules(MarkdownEditor, styles)

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
+

browser/components/MarkdownPreview.js

@@ -0,0 +1,163 @@
+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')
+const goExternal = function (e) {
+  e.preventDefault()
+  e.stopPropagation()
+  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)
+
+    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) {
+    if (prevProps.value !== this.props.value ||
+      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()
+  }
+
+  rewriteIframe () {
+    Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.removeEventListener('click', goExternal)
+    })
+
+    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>
+        @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}
+        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/${codeBlockTheme}.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('mousedown', goExternal)
+    })
+  }
+
+  focus () {
+    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 (
+      <iframe className={className != null
+          ? 'MarkdownPreview ' + className
+          : 'MarkdownPreview'
+        }
+        style={style}
+        tabIndex={tabIndex}
+        ref='root'
+      />
+    )
+  }
+}
+
+MarkdownPreview.propTypes = {
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseMove: PropTypes.func,
+  className: PropTypes.string,
+  value: PropTypes.string
+}

browser/components/ModeIcon.js

@@ -0,0 +1,82 @@
+import React, { PropTypes } from 'react'
+
+export default class ModeIcon extends React.Component {
+  getClassName () {
+    var mode = this.props.mode
+    switch (mode) {
+      // Script
+      case 'javascript':
+        return 'devicon-javascript-plain'
+      case 'jsx':
+        return 'devicon-react-original'
+      case 'coffee':
+        return 'devicon-coffeescript-original'
+      case 'ruby':
+        return 'devicon-ruby-plain'
+      case 'erlang':
+        return 'devicon-erlang-plain'
+      case 'php':
+        return 'devicon-php-plain'
+
+      // HTML
+      case 'html':
+        return 'devicon-html5-plain'
+
+      // Stylesheet
+      case 'css':
+        return 'devicon-css3-plain'
+      case 'less':
+        return 'devicon-less-plain-wordmark'
+      case 'sass':
+      case 'scss':
+        return 'devicon-sass-original'
+
+      // Compile
+      case 'c':
+        return 'devicon-c-plain'
+      case 'cpp':
+        return 'devicon-cplusplus-plain'
+      case 'csharp':
+        return 'devicon-csharp-plain'
+      case 'objc':
+        return 'devicon-apple-original'
+      case 'golang':
+        return 'devicon-go-plain'
+      case 'java':
+        return 'devicon-java-plain'
+
+      // Framework
+      case 'django':
+        return 'devicon-django-plain'
+
+      // Config
+      case 'dockerfile':
+        return 'devicon-docker-plain'
+      case 'gitignore':
+        return 'devicon-git-plain'
+
+      // Shell
+      case 'sh':
+      case 'batchfile':
+      case 'powershell':
+        return 'fa fa-fw fa-terminal'
+
+      case 'text':
+      case 'markdown':
+        return 'fa fa-fw fa-file-text-o'
+    }
+    return 'fa fa-fw fa-code'
+  }
+
+  render () {
+    let className = `ModeIcon ${this.getClassName()} ${this.props.className}`
+    return (
+      <i className={className}/>
+    )
+  }
+}
+
+ModeIcon.propTypes = {
+  className: PropTypes.string,
+  mode: PropTypes.string
+}

browser/components/ModeSelect.js

@@ -0,0 +1,172 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import ModeIcon from './ModeIcon'
+import modes from '../lib/modes'
+import _ from 'lodash'
+
+const IDLE_MODE = 'IDLE_MODE'
+const EDIT_MODE = 'EDIT_MODE'
+
+export default class ModeSelect extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      mode: IDLE_MODE,
+      search: '',
+      focusIndex: 0
+    }
+  }
+
+  componentDidMount () {
+    this.blurHandler = e => {
+      let searchElement = ReactDOM.findDOMNode(this.refs.search)
+      if (this.state.mode === EDIT_MODE && document.activeElement !== searchElement) {
+        this.handleBlur(e)
+      }
+    }
+    window.addEventListener('click', this.blurHandler)
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('click', this.blurHandler)
+    let searchElement = ReactDOM.findDOMNode(this.refs.search)
+    if (searchElement != null && this.searchKeyDownListener != null) {
+      searchElement.removeEventListener('keydown', this.searchKeyDownListener)
+    }
+  }
+
+  handleIdleSelectClick (e) {
+    this.setState({mode: EDIT_MODE, search: this.props.value}, () => {
+      ReactDOM.findDOMNode(this.refs.search).select()
+    })
+  }
+
+  handleModeOptionClick (modeName) {
+    return e => {
+      this.props.onChange(modeName)
+      this.setState({
+        mode: IDLE_MODE,
+        search: '',
+        focusIndex: 0
+      })
+    }
+  }
+
+  handleSearchKeyDown (e) {
+    switch (e.keyCode) {
+      // up
+      case 38:
+        e.preventDefault()
+        if (this.state.focusIndex > 0) this.setState({focusIndex: this.state.focusIndex - 1})
+        break
+      // down
+      case 40:
+        e.preventDefault()
+        {
+          let search = _.escapeRegExp(this.state.search)
+          let filteredModes = modes
+            .filter(mode => {
+              let nameMatched = mode.name.match(search)
+              let aliasMatched = _.some(mode.alias, alias => alias.match(search))
+              return nameMatched || aliasMatched
+            })
+          if (filteredModes.length === this.state.focusIndex + 1) this.setState({focusIndex: filteredModes.length - 1})
+          else this.setState({focusIndex: this.state.focusIndex + 1})
+        }
+        break
+      // enter
+      case 13:
+        e.preventDefault()
+        {
+          let search = _.escapeRegExp(this.state.search)
+          let filteredModes = modes
+            .filter(mode => {
+              let nameMatched = mode.name.match(search)
+              let aliasMatched = _.some(mode.alias, alias => alias.match(search))
+              return nameMatched || aliasMatched
+            })
+          let targetMode = filteredModes[this.state.focusIndex]
+          if (targetMode != null) {
+            this.props.onChange(targetMode.name)
+            this.setIdle()
+          }
+        }
+        break
+      // esc
+      case 27:
+      case 9:
+        e.stopPropagation()
+        this.setIdle()
+    }
+    if (this.props.onKeyDown) this.props.onKeyDown(e)
+  }
+
+  handleSearchChange (e) {
+    this.setState({
+      search: e.target.value,
+      focusIndex: 0
+    })
+  }
+
+  handleBlur (e) {
+    if (e.target !== ReactDOM.findDOMNode(this.refs.search)) {
+      this.setIdle()
+    }
+  }
+
+  setIdle () {
+    this.setState({
+      mode: IDLE_MODE,
+      search: '',
+      focusIndex: 0
+    })
+  }
+
+  render () {
+    let className = this.props.className != null
+      ? `ModeSelect ${this.props.className}`
+      : this.props.className
+
+    if (this.state.mode === IDLE_MODE) {
+      let mode = _.findWhere(modes, {name: this.props.value})
+      let modeName = mode != null ? mode.name : 'text'
+      let modeLabel = mode != null ? mode.label : this.props.value
+
+      return (
+        <div className={className + ' idle'} onClick={e => this.handleIdleSelectClick(e)}>
+          <ModeIcon mode={modeName}/>{modeLabel}
+        </div>
+      )
+    }
+
+    let search = _.escapeRegExp(this.state.search)
+    let filteredOptions = modes
+      .filter(mode => {
+        let nameMatched = mode.name.match(search)
+        let aliasMatched = _.some(mode.alias, alias => alias.match(search))
+        return nameMatched || aliasMatched
+      })
+      .map((mode, index) => {
+        return (
+          <div key={mode.name} className={index === this.state.focusIndex ? 'ModeSelect-options-item active' : 'ModeSelect-options-item'} onClick={e => this.handleModeOptionClick(mode.name)(e)}><ModeIcon mode={mode.name}/>{mode.label}</div>
+          )
+      })
+
+    return (
+      <div className={className + ' edit'}>
+        <input onBlur={e => this.handleBlur(e)} onKeyDown={e => this.handleSearchKeyDown(e)} ref='search' onChange={e => this.handleSearchChange(e)} value={this.state.search} type='text'/>
+        <div ref='options' className='ModeSelect-options hide'>
+          {filteredOptions}
+        </div>
+      </div>
+    )
+  }
+}
+
+ModeSelect.propTypes = {
+  className: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onKeyDown: PropTypes.func
+}

browser/components/ProfileImage.js

@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react'
+import md5 from 'md5'
+
+export default class ProfileImage extends React.Component {
+  render () {
+    let className = this.props.className == null ? 'ProfileImage' : 'ProfileImage ' + this.props.className
+    let email = this.props.email != null ? this.props.email : ''
+    let src = 'http://www.gravatar.com/avatar/' + md5(email.trim().toLowerCase()) + '?s=' + this.props.size
+
+    return (
+      <img
+        className={className}
+        width={this.props.size}
+        height={this.props.size}
+        src={src}/>
+    )
+  }
+}
+
+ProfileImage.propTypes = {
+  email: PropTypes.string,
+  size: PropTypes.string,
+  className: PropTypes.string
+}

browser/components/markdown.styl

@@ -0,0 +1,253 @@
+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
+  user-select all
+  .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
+  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 0.5em !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
+    pre
+      border none
+      margin -5px
+  &>span.lineNumber
+    display none
+    float left
+    font-size 0.85em
+    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

browser/finder/FinderDetail.js

@@ -0,0 +1,44 @@
+import React, { PropTypes } from 'react'
+import CodeEditor from 'browser/components/CodeEditor'
+import MarkdownPreview from 'browser/components/MarkdownPreview'
+import ModeIcon from 'browser/components/ModeIcon'
+
+export default class FinderDetail extends React.Component {
+  render () {
+    let { activeArticle } = this.props
+
+    if (activeArticle != null) {
+      return (
+        <div className='FinderDetail'>
+          <div className='header'>
+            <div className='left'>
+            <ModeIcon mode={activeArticle.mode}/> {activeArticle.title}
+            </div>
+            <div className='right'>
+              <button onClick={this.props.saveToClipboard} className='clipboardBtn'>
+                <i className='fa fa-clipboard fa-fw'/>
+                <span className='tooltip'>Copy to clipboard (Enter)</span>
+              </button>
+            </div>
+          </div>
+          <div className='content'>
+            {activeArticle.mode === 'markdown'
+              ? <MarkdownPreview content={activeArticle.content}/>
+              : <CodeEditor readOnly article={activeArticle}/>
+            }
+          </div>
+        </div>
+      )
+    }
+    return (
+      <div className='FinderDetail'>
+        <div className='nothing'>Nothing selected</div>
+      </div>
+    )
+  }
+}
+
+FinderDetail.propTypes = {
+  activeArticle: PropTypes.shape(),
+  saveToClipboard: PropTypes.func
+}

browser/finder/FinderInput.js

@@ -0,0 +1,16 @@
+import React, { PropTypes } from 'react'
+
+export default class FinderInput extends React.Component {
+  render () {
+    return (
+      <div className='FinderInput'>
+        <input ref='input' value={this.props.value} onChange={this.props.handleSearchChange} type='text'/>
+      </div>
+    )
+  }
+}
+
+FinderInput.propTypes = {
+  handleSearchChange: PropTypes.func,
+  value: PropTypes.string
+}

browser/finder/FinderList.js

@@ -0,0 +1,71 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import ModeIcon from 'browser/components/ModeIcon'
+import { selectArticle } from './actions'
+
+export default class FinderList extends React.Component {
+  componentDidUpdate () {
+    var index = this.props.articles.indexOf(this.props.activeArticle)
+    var el = ReactDOM.findDOMNode(this)
+    var li = el.querySelectorAll('li')[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
+    }
+  }
+
+  handleArticleClick (article) {
+    return (e) => {
+      let { dispatch } = this.props
+      dispatch(selectArticle(article.key))
+    }
+  }
+
+  render () {
+    let articleElements = this.props.articles.map(function (article) {
+      if (article == null) {
+        return (
+          <li className={isActive ? 'active' : ''}>
+            <div className='articleItem'>Undefined</div>
+            <div className='divider'/>
+          </li>
+        )
+      }
+
+      var isActive = this.props.activeArticle != null && (article.key === this.props.activeArticle.key)
+      return (
+        <li key={'article-' + article.key} onClick={this.handleArticleClick(article)} className={isActive ? 'active' : ''}>
+          <div className='articleItem'>
+            <ModeIcon mode={article.mode}/> {article.title}</div>
+          <div className='divider'/>
+        </li>
+      )
+    }.bind(this))
+
+    return (
+      <div className='FinderList'>
+        <ul>
+          {articleElements}
+        </ul>
+      </div>
+    )
+  }
+}
+
+FinderList.propTypes = {
+  articles: PropTypes.array,
+  activeArticle: PropTypes.shape({
+    type: PropTypes.string,
+    key: PropTypes.string
+  }),
+  dispatch: PropTypes.func
+}

browser/finder/actions.js

@@ -0,0 +1,39 @@
+export const SELECT_ARTICLE = 'SELECT_ARTICLE'
+export const SEARCH_ARTICLE = 'SEARCH_ARTICLE'
+export const REFRESH_DATA = 'REFRESH_DATA'
+
+export function selectArticle (key) {
+  return {
+    type: SELECT_ARTICLE,
+    data: { key }
+  }
+}
+
+export function searchArticle (input) {
+  return {
+    type: SEARCH_ARTICLE,
+    data: { input }
+  }
+}
+
+export function refreshData (data) {
+  console.log('refreshing data')
+  let { folders, articles } = data
+
+  return {
+    type: REFRESH_DATA,
+    data: {
+      articles,
+      folders
+    }
+  }
+}
+
+export default {
+  SELECT_ARTICLE,
+  SEARCH_ARTICLE,
+  REFRESH_DATA,
+  selectArticle,
+  searchArticle,
+  refreshData
+}

browser/finder/index.js

@@ -0,0 +1,284 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import { connect, Provider } from 'react-redux'
+import reducer from './reducer'
+import { createStore } from 'redux'
+import FinderInput from './FinderInput'
+import FinderList from './FinderList'
+import FinderDetail from './FinderDetail'
+import actions, { selectArticle, searchArticle } from './actions'
+import _ from 'lodash'
+import dataStore from 'browser/lib/dataStore'
+import fetchConfig from '../lib/fetchConfig'
+const electron = require('electron')
+const { clipboard, ipcRenderer, remote } = electron
+const path = require('path')
+
+let config = fetchConfig()
+applyConfig(config)
+
+ipcRenderer.on('config-apply', function (e, newConfig) {
+  config = newConfig
+  applyConfig(config)
+})
+
+function applyConfig () {
+  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) {
+      remote.getCurrentWindow().toggleDevTools()
+    }
+  })
+}
+
+function hideFinder () {
+  ipcRenderer.send('hide-finder')
+}
+
+function notify (title, options) {
+  if (process.platform === 'win32') {
+    options.icon = path.join('file://', global.__dirname, '../../resources/app.png')
+  }
+  return new window.Notification(title, options)
+}
+
+require('!!style!css!stylus?sourceMap!../styles/finder/index.styl')
+
+const FOLDER_FILTER = 'FOLDER_FILTER'
+const FOLDER_EXACT_FILTER = 'FOLDER_EXACT_FILTER'
+const TEXT_FILTER = 'TEXT_FILTER'
+const TAG_FILTER = 'TAG_FILTER'
+
+class FinderMain extends React.Component {
+  constructor (props) {
+    super(props)
+  }
+
+  componentDidMount () {
+    this.keyDownHandler = e => this.handleKeyDown(e)
+    document.addEventListener('keydown', this.keyDownHandler)
+    ReactDOM.findDOMNode(this.refs.finderInput.refs.input).focus()
+    this.focusHandler = e => {
+      let { dispatch } = this.props
+
+      dispatch(searchArticle(''))
+      dispatch(selectArticle(null))
+    }
+    window.addEventListener('focus', this.focusHandler)
+  }
+
+  componentWillUnmount () {
+    document.removeEventListener('keydown', this.keyDownHandler)
+    window.removeEventListener('focus', this.focusHandler)
+  }
+
+  handleKeyDown (e) {
+    if (e.keyCode === 38) {
+      this.selectPrevious()
+      e.preventDefault()
+    }
+
+    if (e.keyCode === 40) {
+      this.selectNext()
+      e.preventDefault()
+    }
+
+    if (e.keyCode === 13) {
+      this.saveToClipboard()
+      e.preventDefault()
+    }
+    if (e.keyCode === 27) {
+      hideFinder()
+      e.preventDefault()
+    }
+    if (e.keyCode === 91 || e.metaKey) {
+      return
+    }
+
+    ReactDOM.findDOMNode(this.refs.finderInput.refs.input).focus()
+  }
+
+  saveToClipboard () {
+    let { activeArticle } = this.props
+    clipboard.writeText(activeArticle.content)
+
+    ipcRenderer.send('copy-finder')
+    notify('Saved to Clipboard!', {
+      body: 'Paste it wherever you want!',
+      silent: true
+    })
+    hideFinder()
+  }
+
+  handleSearchChange (e) {
+    let { dispatch } = this.props
+
+    dispatch(searchArticle(e.target.value))
+  }
+
+  selectArticle (article) {
+    this.setState({currentArticle: article})
+  }
+
+  selectPrevious () {
+    let { activeArticle, dispatch } = this.props
+    let index = this.refs.finderList.props.articles.indexOf(activeArticle)
+    let previousArticle = this.refs.finderList.props.articles[index - 1]
+    if (previousArticle != null) dispatch(selectArticle(previousArticle.key))
+  }
+
+  selectNext () {
+    let { activeArticle, dispatch } = this.props
+    let index = this.refs.finderList.props.articles.indexOf(activeArticle)
+    let previousArticle = this.refs.finderList.props.articles[index + 1]
+    if (previousArticle != null) dispatch(selectArticle(previousArticle.key))
+  }
+
+  render () {
+    let { articles, activeArticle, status, dispatch } = this.props
+    let saveToClipboard = () => this.saveToClipboard()
+    return (
+      <div className='Finder'>
+        <FinderInput
+          handleSearchChange={e => this.handleSearchChange(e)}
+          ref='finderInput'
+          onChange={this.handleChange}
+          value={status.search}
+        />
+        <FinderList
+          ref='finderList'
+          activeArticle={activeArticle}
+          articles={articles}
+          dispatch={dispatch}
+          selectArticle={article => this.selectArticle(article)}
+        />
+        <FinderDetail
+          activeArticle={activeArticle}
+          saveToClipboard={saveToClipboard}
+        />
+      </div>
+    )
+  }
+}
+
+FinderMain.propTypes = {
+  articles: PropTypes.array,
+  activeArticle: PropTypes.shape({
+    key: PropTypes.string,
+    tags: PropTypes.array,
+    title: PropTypes.string,
+    content: PropTypes.string
+  }),
+  status: PropTypes.shape(),
+  dispatch: PropTypes.func
+}
+
+// Ignore invalid key
+function ignoreInvalidKey (key) {
+  return key.length > 0 && !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 { articles, folders, status } = state
+
+  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)
+    }
+  }
+
+  let activeArticle = _.findWhere(articles, {key: status.articleKey})
+  if (activeArticle == null) activeArticle = articles[0]
+
+  return {
+    articles,
+    activeArticle,
+    status
+  }
+}
+
+var Finder = connect(remap)(FinderMain)
+var store = createStore(reducer)
+
+function refreshData () {
+  let data = dataStore.getData(true)
+  store.dispatch(actions.refreshData(data))
+}
+
+window.onfocus = e => {
+  refreshData()
+}
+
+ReactDOM.render((
+  <Provider store={store}>
+    <Finder/>
+  </Provider>
+), document.getElementById('content'), function () {
+  refreshData()
+})

browser/finder/reducer.js

@@ -0,0 +1,47 @@
+import { combineReducers } from 'redux'
+import { SELECT_ARTICLE, SEARCH_ARTICLE, REFRESH_DATA } from './actions'
+
+let initialArticles = []
+let initialFolders = []
+let initialStatus = {
+  articleKey: null,
+  search: ''
+}
+
+function status (state = initialStatus, action) {
+  switch (action.type) {
+    case SELECT_ARTICLE:
+      state.articleKey = action.data.key
+      return Object.assign({}, state)
+    case SEARCH_ARTICLE:
+      state.search = action.data.input
+      return Object.assign({}, state)
+    default:
+      return state
+  }
+}
+
+function articles (state = initialArticles, action) {
+  switch (action.type) {
+    case REFRESH_DATA:
+      return action.data.articles
+    default:
+      return state
+  }
+}
+
+function folders (state = initialFolders, action) {
+  switch (action.type) {
+    case REFRESH_DATA:
+      console.log(action)
+      return action.data.folders
+    default:
+      return state
+  }
+}
+
+export default combineReducers({
+  status,
+  folders,
+  articles
+})

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})
+}

browser/lib/activityRecord.js

@@ -0,0 +1,138 @@
+import _ from 'lodash'
+import moment from 'moment'
+import dataStore from './dataStore'
+import { request, SERVER_URL } from './api'
+import clientKey from './clientKey'
+
+const electron = require('electron')
+const version = electron.remote.app.getVersion()
+
+function isSameDate (a, b) {
+  a = moment(a).utcOffset(+540).format('YYYYMMDD')
+  b = moment(b).utcOffset(+540).format('YYYYMMDD')
+
+  return a === b
+}
+
+export function init () {
+  let records = getAllRecords()
+  if (records == null) {
+    saveAllRecords([])
+  }
+  emit(null)
+
+  postRecords()
+  if (window != null) {
+    window.addEventListener('online', postRecords)
+    window.setInterval(postRecords, 1000 * 60 * 60 * 24)
+  }
+}
+
+export function getAllRecords () {
+  return JSON.parse(localStorage.getItem('activityRecords'))
+}
+
+export function saveAllRecords (records) {
+  localStorage.setItem('activityRecords', JSON.stringify(records))
+}
+
+/*
+Post all records(except today)
+and remove all posted records
+*/
+export function postRecords (data) {
+  if (process.env.NODE_ENV !== 'production') {
+    console.log('post failed - NOT PRODUCTION ')
+    return
+  }
+
+  let records = getAllRecords()
+  records = records.filter(record => {
+    return !isSameDate(new Date(), record.date)
+  })
+
+  if (records.length === 0) {
+    console.log('No records to post')
+    return
+  }
+
+  console.log('posting...', records)
+  let input = {
+    clientKey: clientKey.get(),
+    records
+  }
+  return request.post(SERVER_URL + 'apis/activity')
+    .send(input)
+    .then(res => {
+      let records = getAllRecords()
+      let todayRecord = _.find(records, record => {
+        return isSameDate(new Date(), record.date)
+      })
+      if (todayRecord != null) saveAllRecords([todayRecord])
+      else saveAllRecords([])
+    })
+    .catch(err => {
+      console.error(err)
+    })
+}
+
+export function emit (type, data = {}) {
+  let records = getAllRecords()
+
+  let index = _.findIndex(records, record => {
+    return isSameDate(new Date(), record.date)
+  })
+
+  let todayRecord
+  if (index < 0) {
+    todayRecord = {date: new Date()}
+    records.push(todayRecord)
+  }
+  else todayRecord = records[index]
+  switch (type) {
+    case 'ARTICLE_CREATE':
+    case 'ARTICLE_UPDATE':
+    case 'ARTICLE_DESTROY':
+    case 'FOLDER_CREATE':
+    case 'FOLDER_UPDATE':
+    case 'FOLDER_DESTROY':
+    case 'FINDER_OPEN':
+    case 'FINDER_COPY':
+    case 'MAIN_DETAIL_COPY':
+    case 'ARTICLE_SHARE':
+      todayRecord[type] = todayRecord[type] == null
+        ? 1
+        : todayRecord[type] + 1
+
+      break
+  }
+
+  // Count ARTICLE_CREATE and ARTICLE_UPDATE again by syntax
+  if (type === 'ARTICLE_UPDATE' && data.mode != null) {
+    let recordKey = type + '_BY_SYNTAX'
+    if (todayRecord[recordKey] == null) todayRecord[recordKey] = {}
+
+    todayRecord[recordKey][data.mode] = todayRecord[recordKey][data.mode] == null
+      ? 1
+      : todayRecord[recordKey][data.mode] + 1
+  }
+
+  let storeData = dataStore.getData()
+  todayRecord.FOLDER_COUNT = storeData && _.isArray(storeData.folders) ? storeData.folders.length : 0
+  todayRecord.ARTICLE_COUNT = storeData && _.isArray(storeData.articles) ? storeData.articles.length : 0
+  todayRecord.CLIENT_VERSION = version
+
+  todayRecord.SYNTAX_COUNT = storeData && _.isArray(storeData.articles) ? storeData.articles.reduce((sum, article) => {
+    if (sum[article.mode] == null) sum[article.mode] = 1
+    else sum[article.mode]++
+    return sum
+  }, {}) : 0
+
+  saveAllRecords(records)
+}
+
+export default {
+  init,
+  emit,
+  postRecords
+}

browser/lib/api.js

@@ -0,0 +1,21 @@
+import superagent from 'superagent'
+import superagentPromise from 'superagent-promise'
+
+export const SERVER_URL = 'https://b00st.io/'
+// export const SERVER_URL = 'http://localhost:3333/'
+
+export const request = superagentPromise(superagent, Promise)
+
+export function shareViaPublicURL (input) {
+  return request
+    .post(SERVER_URL + 'apis/share')
+    // .set({
+    //   Authorization: 'Bearer ' + auth.token()
+    // })
+    .send(input)
+}
+
+export default {
+  SERVER_URL,
+  shareViaPublicURL
+}

browser/lib/clientKey.js

@@ -0,0 +1,23 @@
+import _ from 'lodash'
+import keygen from './keygen'
+
+function getClientKey () {
+  let clientKey = localStorage.getItem('clientKey')
+  if (!_.isString(clientKey) || clientKey.length !== 40) {
+    clientKey = keygen(20)
+    setClientKey(clientKey)
+  }
+
+  return clientKey
+}
+
+function setClientKey (newKey) {
+  localStorage.setItem('clientKey', newKey)
+}
+
+getClientKey()
+
+export default {
+  get: getClientKey,
+  set: setClientKey
+}

browser/lib/consts.js

@@ -0,0 +1,22 @@
+const consts = {
+  FOLDER_COLORS: [
+    '#E10051',
+    '#FF8E00',
+    '#E8D252',
+    '#3FD941',
+    '#30D5C8',
+    '#2BA5F7',
+    '#B013A4'
+  ],
+  FOLDER_COLOR_NAMES: [
+    'Razzmatazz (Red)',
+    'Pizazz (Orange)',
+    'Confetti (Yellow)',
+    'Emerald (Green)',
+    'Turquoise',
+    'Dodger Blue',
+    'Violet Eggplant'
+  ]
+}
+
+module.exports = consts

browser/lib/dataStore.js

@@ -0,0 +1,156 @@
+import keygen from './keygen'
+import _ from 'lodash'
+
+const electron = require('electron')
+const remote = electron.remote
+const jetpack = require('fs-jetpack')
+const path = require('path')
+
+let defaultContent = 'Boost is a brand new note App for programmers.\n\n> 下に日本語版があります。\n\n# \u25CEfeature\n\nBoost has some preponderant functions for efficient engineer\'s task.See some part of it.\n\n1. classify information by\u300CFolders\u300D\n2. deal with great variety of syntax\n3. Finder function\n\n\uFF0A\u3000\uFF0A\u3000\uFF0A\u3000\uFF0A\n\n# 1. classify information by \u300CFolders\u300D- access the information you needed easily.\n\n\u300CFolders\u300D which on the left side bar. Press plus button now. flexible way of classification.\n- Create Folder every language or flamework\n- Make Folder for your own casual memos\n\n# 2. Deal with a great variety of syntax \u2013 instead of your brain\nSave handy all information related with programming\n- Use markdown and gather api specification\n- Well using module and snippet\n\nSave them on Boost, you don\'t need to rewrite or re-search same code again.\n\n# 3. Load Finder function \u2013 now you don\'t need to spell command by hand typing.\n\n**Shift +ctrl+tab** press buttons at same time.\nThen, the window will show up for search Boost contents that instant.\n\nUsing cursor key to chose, press enter, cmd+v to paste and\u2026 please check it out by your own eye.\n\n- Such command spl or linux which programmers often use but troublesome to hand type\n\n- (Phrases commonly used for e-mail or customer support)\n\nWe support preponderant efficiency\n\n\uFF0A\u3000\uFF0A\u3000\uFF0A\u3000\uFF0A\n\n## \u25CEfor more information\nFrequently updated with this blog ( http:\/\/blog-jp.b00st.io )\n\nHave wonderful programmer life!\n\n## Hack your memory**\n\n\n\n# 日本語版\n\n**Boost**は全く新しいエンジニアライクのノートアプリです。\n\n# ◎特徴\nBoostはエンジニアの仕事を圧倒的に効率化するいくつかの機能を備えています。\nその一部をご紹介します。\n1. Folderで情報を分類\n2. 豊富なsyantaxに対応\n3. Finder機能\n\n\n＊　＊　＊　＊\n\n# 1. Folderで情報を分類、欲しい情報にすぐアクセス。\n左側のバーに存在する「Folders」。\n今すぐプラスボタンを押しましょう。\n分類の仕方も自由自在です。\n- 言語やフレームワークごとにFolderを作成\n- 自分用のカジュアルなメモをまとめる場としてFolderを作成\n\n\n# 2. 豊富なsyntaxに対応、自分の脳の代わりに。\nプログラミングに関する情報を全て、手軽に保存しましょう。\n- mdで、apiの仕様をまとめる\n- よく使うモジュールやスニペット\n\nBoostに保存しておくことで、何度も同じコードを書いたり調べたりする必要がなくなります。\n\n# 3. Finder機能を搭載、もうコマンドを手打ちする必要はありません。\n**「shift+ctrl+tab」** を同時に押してみてください。\nここでは、一瞬でBoostの中身を検索するウィンドウを表示させることができます。\n\n矢印キーで選択、Enterを押し、cmd+vでペーストすると…続きはご自身の目でお確かめください。\n- sqlやlinux等の、よく使うが手打ちが面倒なコマンド\n- （メールやカスタマーサポート等でよく使うフレーズ）\n\n私たちは、圧倒的な効率性を支援します。\n\＊　＊　＊　＊\n\n\n## ◎詳しくは\nこちらのブログ( http://blog-jp.b00st.io )にて随時更新しています。\n\nそれでは素晴らしいエンジニアライフを！\n\n## Hack your memory＊＊'
+
+let data = null
+
+function getLocalPath () {
+  return path.join(remote.app.getPath('userData'), 'local.json')
+}
+
+function forgeInitialRepositories () {
+  let defaultRepo = {
+    key: keygen(),
+    name: 'local',
+    type: 'userData',
+    user: {
+      name: 'New user'
+    }
+  }
+
+  if (process.platform === 'darwin') {
+    defaultRepo.user.name = remote.process.env.USER
+  } else if (process.platform === 'win32') {
+    defaultRepo.user.name = remote.process.env.USERNAME
+  }
+
+  return [defaultRepo]
+}
+
+function getRepositories () {
+  let raw = localStorage.getItem('repositories')
+  try {
+    let parsed = JSON.parse(raw)
+    if (!_.isArray(parsed)) {
+      throw new Error('repositories data is corrupted. re-init data.')
+    }
+    return parsed
+  } catch (e) {
+    console.log(e)
+    let newRepos = forgeInitialRepositories()
+    saveRepositories(newRepos)
+    return newRepos
+  }
+}
+
+function saveRepositories (repos) {
+  localStorage.setItem('repositories', JSON.stringify(repos))
+}
+
+export function getUser (repoName) {
+  if (repoName == null) {
+    return getRepositories()[0]
+  }
+  return null
+}
+
+export function saveUser (repoName, user) {
+  let repos = getRepositories()
+  if (repoName == null) {
+    Object.assign(repos[0].user, user)
+  }
+  saveRepositories(repos)
+}
+
+export function init () {
+  // set repositories info
+  getRepositories()
+  data = jetpack.read(getLocalPath(), 'json')
+  if (data == null) {
+    let defaultFolder = {
+      name: 'default',
+      key: keygen()
+    }
+    let defaultArticle = {
+      title: 'About Boost',
+      tags: ['boost', 'intro'],
+      content: defaultContent,
+      mode: 'markdown',
+      key: keygen(),
+      FolderKey: defaultFolder.key,
+      createdAt: new Date(),
+      updatedAt: new Date()
+    }
+
+    data = {
+      articles: [defaultArticle],
+      folders: [defaultFolder],
+      version: '0.4'
+    }
+    saveData()
+  }
+}
+
+export function getData (forceRead) {
+  if (forceRead) {
+    try {
+      data = jetpack.read(getLocalPath(), 'json')
+    } catch (e) {}
+  }
+  return data
+}
+
+let timer = null
+let isSaving = false
+let saveAgain = false
+function saveData () {
+  timer = null
+  isSaving = true
+  jetpack.writeAsync(getLocalPath(), data)
+    .then(function () {
+      isSaving = false
+      if (saveAgain) {
+        saveAgain = false
+        queueSave()
+      }
+    })
+}
+function queueSave () {
+  if (!isSaving) {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(saveData, 500)
+  } else {
+    saveAgain = true
+  }
+}
+
+export function setArticles (articles) {
+  if (!_.isArray(articles)) throw new Error('Articles must be an array')
+  let data = getData()
+  data.articles = articles
+  queueSave()
+}
+
+export function setFolders (folders) {
+  if (!_.isArray(folders)) throw new Error('Folders must be an array')
+  let data = getData()
+  data.folders = folders
+  queueSave()
+}
+
+export default {
+  getUser,
+  saveUser,
+  init,
+  getData,
+  setArticles,
+  setFolders
+}

browser/lib/hljsThemes.js

@@ -0,0 +1,78 @@
+const hljsThemeList = [
+  {caption: 'Default', name: 'default'},
+  {caption: 'Agate', name: 'agate'},
+  {caption: 'Androidstudio', name: 'androidstudio'},
+  {caption: 'Arduino Light', name: 'arduino-light'},
+  {caption: 'Arta', name: 'arta'},
+  {caption: 'Ascetic', name: 'ascetic'},
+  {caption: 'Atelier Cave Dark', name: 'atelier-cave-dark'},
+  {caption: 'Atelier Cave Light', name: 'atelier-cave-light'},
+  {caption: 'Atelier Dune Dark', name: 'atelier-dune-dark'},
+  {caption: 'Atelier Dune Light', name: 'atelier-dune-light'},
+  {caption: 'Atelier Estuary Dark', name: 'atelier-estuary-dark'},
+  {caption: 'Atelier Estuary Light', name: 'atelier-estuary-light'},
+  {caption: 'Atelier Forest Dark', name: 'atelier-forest-dark'},
+  {caption: 'Atelier Forest Light', name: 'atelier-forest-light'},
+  {caption: 'Atelier Heath Dark', name: 'atelier-heath-dark'},
+  {caption: 'Atelier Heath Light', name: 'atelier-heath-light'},
+  {caption: 'Atelier Lakeside Dark', name: 'atelier-lakeside-dark'},
+  {caption: 'Atelier Lakeside Light', name: 'atelier-lakeside-light'},
+  {caption: 'Atelier Plateau Dark', name: 'atelier-plateau-dark'},
+  {caption: 'Atelier Plateau Light', name: 'atelier-plateau-light'},
+  {caption: 'Atelier Savanna Dark', name: 'atelier-savanna-dark'},
+  {caption: 'Atelier Savanna Light', name: 'atelier-savanna-light'},
+  {caption: 'Atelier Seaside Dark', name: 'atelier-seaside-dark'},
+  {caption: 'Atelier Seaside Light', name: 'atelier-seaside-light'},
+  {caption: 'Atelier Sulphurpool Dark', name: 'atelier-sulphurpool-dark'},
+  {caption: 'Atelier Sulphurpool Light', name: 'atelier-sulphurpool-light'},
+  {caption: 'Brown Paper', name: 'brown-paper'},
+  {caption: 'Codepen Embed', name: 'codepen-embed'},
+  {caption: 'Color Brewer', name: 'color-brewer'},
+  {caption: 'Dark', name: 'dark'},
+  {caption: 'Darkula', name: 'darkula'},
+  {caption: 'Docco', name: 'docco'},
+  {caption: 'Dracula', name: 'dracula'},
+  {caption: 'Far', name: 'far'},
+  {caption: 'Foundation', name: 'foundation'},
+  {caption: 'Github Gist', name: 'github-gist'},
+  {caption: 'Github', name: 'github'},
+  {caption: 'Googlecode', name: 'googlecode'},
+  {caption: 'Grayscale', name: 'grayscale'},
+  {caption: 'Gruvbox Dark', name: 'gruvbox.dark'},
+  {caption: 'Gruvbox Light', name: 'gruvbox.light'},
+  {caption: 'Hopscotch', name: 'hopscotch'},
+  {caption: 'Hybrid', name: 'hybrid'},
+  {caption: 'Idea', name: 'idea'},
+  {caption: 'Ir Black', name: 'ir-black'},
+  {caption: 'Kimbie Dark', name: 'kimbie.dark'},
+  {caption: 'Kimbie Light', name: 'kimbie.light'},
+  {caption: 'Magula', name: 'magula'},
+  {caption: 'Mono Blue', name: 'mono-blue'},
+  {caption: 'Monokai Sublime', name: 'monokai-sublime'},
+  {caption: 'Monokai', name: 'monokai'},
+  {caption: 'Obsidian', name: 'obsidian'},
+  {caption: 'Paraiso Dark', name: 'paraiso-dark'},
+  {caption: 'Paraiso Light', name: 'paraiso-light'},
+  {caption: 'Pojoaque', name: 'pojoaque'},
+  {caption: 'Qtcreator Dark', name: 'qtcreator_dark'},
+  {caption: 'Qtcreator Light', name: 'qtcreator_light'},
+  {caption: 'Railscasts', name: 'railscasts'},
+  {caption: 'Rainbow', name: 'rainbow'},
+  {caption: 'School Book', name: 'school-book'},
+  {caption: 'Solarized Dark', name: 'solarized-dark'},
+  {caption: 'Solarized Light', name: 'solarized-light'},
+  {caption: 'Sunburst', name: 'sunburst'},
+  {caption: 'Tomorrow Night Blue', name: 'tomorrow-night-blue'},
+  {caption: 'Tomorrow Night Bright', name: 'tomorrow-night-bright'},
+  {caption: 'Tomorrow Night Eighties', name: 'tomorrow-night-eighties'},
+  {caption: 'Tomorrow Night', name: 'tomorrow-night'},
+  {caption: 'Tomorrow', name: 'tomorrow'},
+  {caption: 'Vs', name: 'vs'},
+  {caption: 'Xcode', name: 'xcode'},
+  {caption: 'Xt 256', name: 'xt256'},
+  {caption: 'Zenburn', name: 'zenburn'}
+]
+
+export default function hljsTheme () {
+  return hljsThemeList
+}

browser/lib/keygen.js

@@ -0,0 +1,7 @@
+const crypto = require('crypto')
+const _ = require('lodash')
+
+module.exports = function (length) {
+  if (!_.isFinite(length)) length = 6
+  return crypto.randomBytes(length).toString('hex')
+}

browser/lib/markdown.js

@@ -0,0 +1,79 @@
+import markdownit from 'markdown-it'
+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 = []
+  for (let i = 1; i <= lc; i++) {
+    lines.push('<span>' + i + '</span>')
+  }
+  return '<span class="lineNumber">' + lines.join('') + '</span>'
+}
+
+var md = markdownit({
+  typographer: true,
+  linkify: true,
+  html: true,
+  xhtmlOut: true,
+  highlight: function (str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return '<pre class="hljs">' +
+        createGutter(str) +
+        '<code>' +
+        hljs.highlight(lang, str).value +
+        '</code></pre>'
+      } catch (e) {}
+    }
+    return '<pre class="hljs">' +
+    createGutter(str) +
+    '<code>' +
+    str.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\"/g, '&quot;') +
+    '</code></pre>'
+  }
+})
+md.use(emoji, {
+  shortcuts: {}
+})
+md.use(math, {
+  inlineRenderer: function (str) {
+    let output = ''
+    try {
+      output = katex.renderToString(str.trim())
+    } catch (err) {
+      output = `<span class="katex-error">${err.message}</span>`
+    }
+    return output
+  },
+  blockRenderer: function (str) {
+    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'))
+
+let originalRenderToken = md.renderer.renderToken
+md.renderer.renderToken = function renderToken (tokens, idx, options) {
+  let token = tokens[idx]
+
+  let result = originalRenderToken.call(md.renderer, tokens, idx, options)
+  if (token.map != null) {
+    return result + '<a class=\'lineAnchor\' data-key=\'' + token.map[0] + '\'></a>'
+  }
+  return result
+}
+
+export default function markdown (content) {
+  if (content == null) content = ''
+
+  return md.render(content.toString())
+}

browser/lib/modes.js

@@ -0,0 +1,753 @@
+const modes = [
+  {
+    name: 'text',
+    label: 'Plain text',
+    mode: 'text'
+  },
+  {
+    name: 'abap',
+    label: 'ABAP',
+    alias: [],
+    mode: 'abap'
+  },
+  {
+    name: 'abc',
+    label: 'ABC',
+    alias: [],
+    mode: 'abc'
+  },
+  {
+    name: 'actionscript',
+    label: 'ActionScript',
+    alias: ['as'],
+    mode: 'actionscript'
+  },
+  {
+    name: 'ada',
+    label: 'Ada',
+    alias: [],
+    mode: 'ada'
+  },
+  {
+    name: 'apache_conf',
+    label: 'Apache config',
+    alias: ['apache', 'conf'],
+    mode: 'apache_conf'
+  },
+  {
+    name: 'applescript',
+    label: 'AppleScript',
+    alias: ['scpt'],
+    mode: 'applescript'
+  },
+  {
+    name: 'asciidoc',
+    label: 'AsciiDoc',
+    alias: ['ascii', 'doc', 'txt'],
+    mode: 'asciidoc'
+  },
+  {
+    name: 'assembly_x86',
+    label: 'Assembly x86',
+    alias: ['assembly', 'x86', 'asm'],
+    mode: 'assembly_x86'
+  },
+  {
+    name: 'autohotkey',
+    label: 'AutoHotkey',
+    alias: ['ahk'],
+    mode: 'autohotkey'
+  },
+  {
+    name: 'batchfile',
+    label: 'Batch file',
+    alias: ['dos', 'windows', 'bat', 'cmd', 'btm'],
+    mode: 'batchfile'
+  },
+  {
+    name: 'c',
+    label: 'C',
+    alias: ['c', 'h', 'clang', 'clang'],
+    mode: 'c_cpp'
+  },
+  {
+    name: 'cirru',
+    label: 'Cirru',
+    alias: [],
+    mode: 'cirru'
+  },
+  {
+    name: 'clojure',
+    label: 'Clojure',
+    alias: ['clj', 'cljs', 'cljc', 'edn'],
+    mode: 'clojure'
+  },
+  {
+    name: 'cobol',
+    label: 'COBOL',
+    alias: ['cbl', 'cob', 'cpy'],
+    mode: 'cobol'
+  },
+  {
+    name: 'coffee',
+    label: 'CoffeeScript',
+    alias: ['coffee'],
+    mode: 'coffee'
+  },
+  {
+    name: 'coldfusion',
+    label: 'ColdFusion',
+    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',
+    alias: [],
+    mode: 'curly'
+  },
+  {
+    name: 'd',
+    label: 'D',
+    alias: ['dlang'],
+    mode: 'd'
+  },
+  {
+    name: 'dockerfile',
+    label: 'DockerFile',
+    alias: ['docker'],
+    mode: 'docker'
+  },
+  {
+    name: 'dart',
+    label: 'Dart',
+    alias: [],
+    mode: 'dart'
+  },
+  {
+    name: 'diff',
+    label: 'Diff',
+    alias: [],
+    mode: 'diff'
+  },
+  {
+    name: 'django',
+    label: 'Django',
+    alias: [],
+    mode: 'djt'
+  },
+  {
+    name: 'dot',
+    label: 'DOT',
+    alias: ['gv'],
+    mode: 'dot'
+  },
+  {
+    name: 'eiffel',
+    label: 'Eiffel',
+    alias: [],
+    mode: 'eiffel'
+  },
+  {
+    name: 'ejs',
+    label: 'EJS',
+    alias: [],
+    mode: 'ejs'
+  },
+  {
+    name: 'elixir',
+    label: 'Elixir',
+    alias: ['ex', 'exs'],
+    mode: 'elixir'
+  },
+  {
+    name: 'elm',
+    label: 'Elm',
+    alias: [],
+    mode: 'elm'
+  },
+  {
+    name: 'erlang',
+    label: 'Erlang',
+    alias: ['erl', 'hrl'],
+    mode: 'erlang'
+  },
+  {
+    name: 'forth',
+    label: 'Forth',
+    alias: ['fs', 'fth'],
+    mode: 'forth'
+  },
+  {
+    name: 'freemaker',
+    label: 'Freemaker',
+    alias: ['ftl'],
+    mode: 'ftl'
+  },
+  {
+    name: 'gcode',
+    label: 'G-code',
+    alias: ['mpt', 'mpf', 'nc'],
+    mode: 'gcode'
+  },
+  {
+    name: 'gherkin',
+    label: 'Gherkin',
+    alias: ['cucumber'],
+    mode: 'gherkin'
+  },
+  {
+    name: 'gitignore',
+    label: 'Gitignore',
+    alias: ['git'],
+    mode: 'gitignore'
+  },
+  {
+    name: 'glsl',
+    label: 'GLSL',
+    alias: ['opengl', 'shading'],
+    mode: 'glsl'
+  },
+  {
+    name: 'golang',
+    label: 'Go',
+    alias: ['go'],
+    mode: 'golang'
+  },
+  {
+    name: 'groovy',
+    label: 'Groovy',
+    alias: [],
+    mode: 'grooby'
+  },
+  {
+    name: 'haml',
+    label: 'Haml',
+    alias: [],
+    mode: 'haml'
+  },
+  {
+    name: 'handlebars',
+    label: 'Handlebars',
+    alias: ['hbs'],
+    mode: 'handlebars'
+  },
+  {
+    name: 'haskell',
+    label: 'Haskell',
+    alias: ['hs', 'lhs'],
+    mode: 'haskell'
+  },
+  {
+    name: 'haxe',
+    label: 'Haxe',
+    alias: ['hx', 'hxml'],
+    mode: 'haxe'
+  },
+  {
+    name: 'html',
+    label: 'HTML',
+    alias: [],
+    mode: 'html'
+  },
+  {
+    name: 'html_ruby',
+    label: 'HTML (Ruby)',
+    alias: ['erb', 'rhtml'],
+    mode: 'html_ruby'
+  },
+  {
+    name: 'jsx',
+    label: 'JSX',
+    alias: ['es', 'babel', 'js', 'jsx', 'react'],
+    mode: 'jsx'
+  },
+  {
+    name: 'typescript',
+    label: 'TypeScript',
+    alias: ['ts'],
+    mode: 'typescript'
+  },
+  {
+    name: 'ini',
+    label: 'INI file',
+    alias: [],
+    mode: 'ini'
+  },
+  {
+    name: 'io',
+    label: 'Io',
+    alias: [],
+    mode: 'io'
+  },
+  {
+    name: 'jack',
+    label: 'Jack',
+    alias: [],
+    mode: 'jack'
+  },
+  {
+    name: 'jade',
+    label: 'Jade',
+    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',
+    alias: [],
+    mode: 'json'
+  },
+  {
+    name: 'jsoniq',
+    label: 'JSONiq',
+    alias: ['query'],
+    mode: 'jsoniq'
+  },
+  {
+    name: 'jsp',
+    label: 'JSP',
+    alias: [],
+    mode: 'jsp'
+  },
+  {
+    name: 'julia',
+    label: 'Julia',
+    alias: [],
+    mode: 'julia'
+  },
+  {
+    name: 'latex',
+    label: 'Latex',
+    alias: ['tex'],
+    mode: 'latex'
+  },
+  {
+    name: 'lean',
+    label: 'Lean',
+    alias: [],
+    mode: 'lean'
+  },
+  {
+    name: 'less',
+    label: 'Less',
+    alias: [],
+    mode: 'less'
+  },
+  {
+    name: 'liquid',
+    label: 'Liquid',
+    alias: [],
+    mode: 'liquid'
+  },
+  {
+    name: 'lisp',
+    label: 'Lisp',
+    alias: ['lsp'],
+    mode: 'lisp'
+  },
+  {
+    name: 'livescript',
+    label: 'LiveScript',
+    alias: ['ls'],
+    mode: 'livescript'
+  },
+  {
+    name: 'logiql',
+    label: 'LogiQL',
+    alias: [],
+    mode: 'logiql'
+  },
+  {
+    name: 'lsl',
+    label: 'LSL',
+    alias: [],
+    mode: 'lsl'
+  },
+  {
+    name: 'lua',
+    label: 'Lua',
+    alias: [],
+    mode: 'lua'
+  },
+  {
+    name: 'luapage',
+    label: 'Luapage',
+    alias: [],
+    mode: 'luapage'
+  },
+  {
+    name: 'lucene',
+    label: 'Lucene',
+    alias: [],
+    mode: 'lucene'
+  },
+  {
+    name: 'makefile',
+    label: 'Makefile',
+    alias: [],
+    mode: 'makefile'
+  },
+  {
+    name: 'markdown',
+    label: 'Markdown',
+    alias: ['md'],
+    mode: 'markdown'
+  },
+  {
+    name: 'mask',
+    label: 'Mask',
+    alias: [],
+    mode: 'mask'
+  },
+  {
+    name: 'matlab',
+    label: 'MATLAB',
+    alias: [],
+    mode: 'matlab'
+  },
+  {
+    name: 'maze',
+    label: 'Maze',
+    alias: [],
+    mode: 'maze'
+  },
+  {
+    name: 'mel',
+    label: 'MEL',
+    alias: [],
+    mode: 'mel'
+  },
+  {
+    name: 'mipsassembler',
+    label: 'MIPS assembly',
+    alias: [],
+    mode: 'mipsassembler'
+  },
+  {
+    name: 'mushcode',
+    label: 'MUSHCode',
+    alias: [],
+    mode: 'mushcode'
+  },
+  {
+    name: 'mysql',
+    label: 'MySQL',
+    alias: [],
+    mode: 'mysql'
+  },
+  {
+    name: 'nix',
+    label: 'Nix',
+    alias: [],
+    mode: 'nix'
+  },
+  {
+    name: 'objectivec',
+    label: 'Objective C',
+    alias: ['objc'],
+    mode: 'objectivec'
+  },
+  {
+    name: 'ocaml',
+    label: 'OCaml',
+    alias: [],
+    mode: 'ocaml'
+  },
+  {
+    name: 'pascal',
+    label: 'Pascal',
+    alias: [],
+    mode: 'pascal'
+  },
+  {
+    name: 'perl',
+    label: 'Perl',
+    alias: [],
+    mode: 'perl'
+  },
+  {
+    name: 'pgsql',
+    label: 'Postgres SQL',
+    alias: ['postgres'],
+    mode: 'pgsql'
+  },
+  {
+    name: 'php',
+    label: 'PHP',
+    alias: [],
+    mode: 'php'
+  },
+  {
+    name: 'powershell',
+    label: 'PowerShell',
+    alias: ['ps1'],
+    mode: 'powershell'
+  },
+  {
+    name: 'praat',
+    label: 'Praat',
+    alias: [],
+    mode: 'praat'
+  },
+  {
+    name: 'prolog',
+    label: 'Prolog',
+    alias: ['pl', 'pro'],
+    mode: 'prolog'
+  },
+  {
+    name: 'properties',
+    label: 'Properties',
+    alias: [],
+    mode: 'properties'
+  },
+  {
+    name: 'protobuf',
+    label: 'Protocol Buffers',
+    alias: ['protocol', 'buffers'],
+    mode: 'protobuf'
+  },
+  {
+    name: 'python',
+    label: 'Python',
+    alias: ['py'],
+    mode: 'python'
+  },
+  {
+    name: 'r',
+    label: 'R',
+    alias: ['rlang'],
+    mode: 'r'
+  },
+  {
+    name: 'rdoc',
+    label: 'RDoc',
+    alias: [],
+    mode: 'rdoc'
+  },
+  {
+    name: 'ruby',
+    label: 'Ruby',
+    alias: ['rb'],
+    mode: 'ruby'
+  },
+  {
+    name: 'rust',
+    label: 'Rust',
+    alias: [],
+    mode: 'rust'
+  },
+  {
+    name: 'sass',
+    label: 'Sass',
+    alias: [],
+    mode: 'sass'
+  },
+  {
+    name: 'scad',
+    label: 'SCAD',
+    alias: [],
+    mode: 'scad'
+  },
+  {
+    name: 'scala',
+    label: 'Scala',
+    alias: [],
+    mode: 'scala'
+  },
+  {
+    name: 'scheme',
+    label: 'Scheme',
+    alias: ['scm', 'ss'],
+    mode: 'scheme'
+  },
+  {
+    name: 'scss',
+    label: 'Scss',
+    alias: [],
+    mode: 'scss'
+  },
+  {
+    name: 'sh',
+    label: 'Shell',
+    alias: ['shell'],
+    mode: 'sh'
+  },
+  {
+    name: 'sjs',
+    label: 'StratifiedJS',
+    alias: ['stratified'],
+    mode: 'sjs'
+  },
+  {
+    name: 'smarty',
+    label: 'Smarty',
+    alias: [],
+    mode: 'smarty'
+  },
+  {
+    name: 'snippets',
+    label: 'Snippets',
+    alias: [],
+    mode: 'snippets'
+  },
+  {
+    name: 'soy_template',
+    label: 'Soy Template',
+    alias: ['soy'],
+    mode: 'soy_template'
+  },
+  {
+    name: 'space',
+    label: 'Space',
+    alias: [],
+    mode: 'space'
+  },
+  {
+    name: 'sql',
+    label: 'SQL',
+    alias: [],
+    mode: 'sql'
+  },
+  {
+    name: 'sqlserver',
+    label: 'SQL Server',
+    alias: [],
+    mode: 'sqlserver'
+  },
+  {
+    name: 'stylus',
+    label: 'Stylus',
+    alias: [],
+    mode: 'stylus'
+  },
+  {
+    name: 'svg',
+    label: 'SVG',
+    alias: [],
+    mode: 'svg'
+  },
+  {
+    name: 'swift',
+    label: 'Swift',
+    alias: [],
+    mode: 'swift'
+  },
+  {
+    name: 'swig',
+    label: 'SWIG',
+    alias: [],
+    mode: 'swig'
+  },
+  {
+    name: 'tcl',
+    label: 'Tcl',
+    alias: [],
+    mode: 'tcl'
+  },
+  {
+    name: 'tex',
+    label: 'TeX',
+    alias: [],
+    mode: 'tex'
+  },
+  {
+    name: 'textile',
+    label: 'Textile',
+    alias: [],
+    mode: 'textile'
+  },
+  {
+    name: 'toml',
+    label: 'TOML',
+    alias: [],
+    mode: 'toml'
+  },
+  {
+    name: 'twig',
+    label: 'Twig',
+    alias: [],
+    mode: 'twig'
+  },
+  {
+    name: 'vala',
+    label: 'Vala',
+    alias: [],
+    mode: 'vala'
+  },
+  {
+    name: 'vbscript',
+    label: 'VBScript',
+    alias: ['vbs', 'vbe'],
+    mode: 'vbscript'
+  },
+  {
+    name: 'velocity',
+    label: 'Velocity',
+    alias: [],
+    mode: 'velocity'
+  },
+  {
+    name: 'verilog',
+    label: 'Verilog',
+    alias: [],
+    mode: 'verilog'
+  },
+  {
+    name: 'vhdl',
+    label: 'VHDL',
+    alias: [],
+    mode: 'vhdl'
+  },
+  {
+    name: 'xml',
+    label: 'XML',
+    alias: [],
+    mode: 'xml'
+  },
+  {
+    name: 'xquery',
+    label: 'XQuery',
+    alias: [],
+    mode: 'xquery'
+  },
+  {
+    name: 'yaml',
+    label: 'YAML',
+    alias: [],
+    mode: 'yaml'
+  }
+]
+
+export default modes

browser/main/Detail/Detail.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

browser/main/Detail/FolderSelect.js

@@ -0,0 +1,286 @@
+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 { storages } = 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 (storageKey, folderKey) {
+    return (e) => {
+      e.stopPropagation()
+      this.setState({
+        status: 'FOCUS'
+      }, () => {
+        this.setValue(storageKey + '-' + folderKey)
+        this.refs.root.focus()
+      })
+    }
+  }
+
+  setValue (value) {
+    this.value = value
+    this.props.onChange()
+  }
+
+  render () {
+    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.storage.key, option.folder.key)(e)}
+          >
+            <span styleName='search-optionList-item-name'
+              style={{borderColor: option.folder.color}}
+            >
+              {option.folder.name}
+              <span styleName='search-optionList-item-name-surfix'>in {option.storage.name}</span>
+            </span>
+          </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'>
+              <span styleName='idle-label-name'
+                style={{borderColor: currentOption.folder.color}}
+              >
+                {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'/>
+          </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)

browser/main/Detail/FolderSelect.styl

@@ -0,0 +1,88 @@
+.root
+  position relative
+  border solid 1px transparent
+  line-height 34px
+  vertical-align middle
+  border-radius 2px
+  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-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
+  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 200
+  background-color white
+  border-radius 2px
+
+.search-optionList-item
+  height 34px
+  width 250px
+  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
+.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

browser/main/Detail/MarkdownNoteDetail.js

@@ -0,0 +1,291 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './MarkdownNoteDetail.styl'
+import MarkdownEditor from 'browser/components/MarkdownEditor'
+import StarButton from './StarButton'
+import TagSelect from './TagSelect'
+import FolderSelect from './FolderSelect'
+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
+const Menu = remote.Menu
+const MenuItem = remote.MenuItem
+
+class MarkdownNoteDetail extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      note: Object.assign({
+        title: '',
+        content: '',
+        isMovingNote: false,
+        isDeleting: false
+      }, props.note)
+    }
+    this.dispatchTimer = null
+  }
+
+  focus () {
+    this.refs.content.focus()
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
+      this.setState({
+        note: Object.assign({}, nextProps.note),
+        isDeleting: false
+      }, () => {
+        this.refs.content.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.content = this.refs.content.value
+    note.tags = this.refs.tags.value
+    note.title = this.findTitle(note.content)
+    note.updatedAt = new Date()
+
+    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) {
+    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) {
+    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.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
+
+    return (
+      <div className='NoteDetail'
+        style={this.props.style}
+        styleName='root'
+      >
+        {this.state.isDeleting
+          ? <div styleName='info'>
+            <div styleName='info-delete'>
+
+              <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'>
+            <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'>
+          <MarkdownEditor
+            ref='content'
+            styleName='body-noteEditor'
+            config={config}
+            value={this.state.note.content}
+            onChange={(e) => this.handleChange(e)}
+            ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+MarkdownNoteDetail.propTypes = {
+  dispatch: PropTypes.func,
+  repositories: PropTypes.array,
+  note: PropTypes.shape({
+
+  }),
+  style: PropTypes.shape({
+    left: PropTypes.number
+  }),
+  ignorePreviewPointerEvents: PropTypes.bool
+}
+
+export default CSSModules(MarkdownNoteDetail, styles)

browser/main/Detail/MarkdownNoteDetail.styl

@@ -0,0 +1,90 @@
+$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-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
+
+.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-noteEditor
+  absolute top bottom left right

browser/main/Detail/SnippetNoteDetail.js

@@ -0,0 +1,477 @@
+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 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
+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))
+      }),
+      isDeleting: false
+    }
+  }
+
+  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: nextNote,
+        isDeleting: false
+      }, () => {
+        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) {
+    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) {
+    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',
+      disabled: true,
+      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.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
+
+    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'
+      >
+        {this.state.isDeleting
+          ? <div styleName='info'>
+            <div styleName='info-delete'>
+
+              <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'>
+            <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)

browser/main/Detail/SnippetNoteDetail.styl

@@ -0,0 +1,170 @@
+$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-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
+
+.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
+  line-height 1.6
+
+.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

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)

browser/main/Detail/StarButton.styl

@@ -0,0 +1,11 @@
+.root
+  position relative
+  padding 0
+  transition transform 0.15s
+  &:hover
+    transform rotate(-72deg)
+
+.root--active
+  @extend .root
+  color $ui-active-color
+  transform rotate(-72deg)

browser/main/Detail/TagSelect.js

@@ -0,0 +1,148 @@
+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) {
+    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 = _.isArray(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 = _.isArray(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 = _.isArray(value)
+      ? 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),
+  onChange: PropTypes.func
+
+}
+
+export default CSSModules(TagSelect, styles)

browser/main/Detail/TagSelect.styl

@@ -0,0 +1,63 @@
+.root
+  position relative
+  user-select none
+
+.icon
+  display inline-block
+  width 30px
+  vertical-align middle
+  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
+  float left
+  height 20px
+  width 18px
+  margin 0
+  padding 0
+  border-style solid
+  border-color $ui-borderColor
+  border-width 0 0 0 3px
+  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 20px
+  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

browser/main/Detail/index.js

@@ -0,0 +1,105 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './Detail.styl'
+import _ from 'lodash'
+import MarkdownNoteDetail from './MarkdownNoteDetail'
+import SnippetNoteDetail from './SnippetNoteDetail'
+import ee from 'browser/main/lib/eventEmitter'
+
+const OSX = global.process.platform === 'darwin'
+
+class Detail extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.focusHandler = () => {
+      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 () {
+    let { location, notes, config } = this.props
+    let note = null
+    if (location.query.key != null) {
+      let splitted = location.query.key.split('-')
+      let storageKey = splitted.shift()
+      let folderKey = splitted.shift()
+      let noteKey = splitted.shift()
+
+      note = _.find(notes, {
+        storage: storageKey,
+        folder: folderKey,
+        key: noteKey
+      })
+    }
+
+    if (note == null) {
+      return (
+        <div styleName='root'
+          style={this.props.style}
+          tabIndex='0'
+        >
+          <div styleName='empty'>
+            <div styleName='empty-message'>{OSX ? 'Command(⌘)' : 'Ctrl(^)'} + N<br/>to create a new post</div>
+          </div>
+        </div>
+      )
+    }
+
+    if (note.type === 'SNIPPET_NOTE') {
+      return (
+        <SnippetNoteDetail
+          note={note}
+          config={config}
+          ref='root'
+          {..._.pick(this.props, [
+            'dispatch',
+            'storages',
+            'style',
+            'ignorePreviewPointerEvents',
+            'location'
+          ])}
+        />
+      )
+    }
+
+    return (
+      <MarkdownNoteDetail
+        note={note}
+        config={config}
+        ref='root'
+        {..._.pick(this.props, [
+          'dispatch',
+          'storages',
+          'style',
+          'ignorePreviewPointerEvents',
+          'location'
+        ])}
+      />
+    )
+  }
+}
+
+Detail.propTypes = {
+  dispatch: PropTypes.func,
+  storages: PropTypes.array,
+  style: PropTypes.shape({
+    left: PropTypes.number
+  }),
+  ignorePreviewPointerEvents: PropTypes.bool
+}
+
+export default CSSModules(Detail, styles)

browser/main/Main.js

@@ -0,0 +1,159 @@
+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 NoteList from './NoteList'
+import Detail from './Detail'
+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) {
+    super(props)
+
+    let { config } = props
+
+    this.state = {
+      isSliderFocused: false,
+      listWidth: config.listWidth
+    }
+  }
+
+  componentDidMount () {
+    let { dispatch } = this.props
+
+    // Reload all data
+    dataApi.init()
+      .then((data) => {
+        dispatch({
+          type: 'INIT_ALL',
+          storages: data.storages,
+          notes: data.notes
+        })
+
+        if (data.storages.length < 1) {
+          modal.open(InitModal)
+        }
+      })
+  }
+
+  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
+          {..._.pick(this.props, [
+            'dispatch',
+            'storages',
+            'config',
+            'location'
+          ])}
+        />
+        <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
+          ref='body'
+        >
+          <TopBar style={{width: this.state.listWidth}}
+            {..._.pick(this.props, [
+              'dispatch',
+              'storages',
+              'config',
+              'notes',
+              'params',
+              'location'
+            ])}
+          />
+          <NoteList style={{width: this.state.listWidth}}
+            {..._.pick(this.props, [
+              'dispatch',
+              'storages',
+              'notes',
+              '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>
+          <Detail
+            style={{left: this.state.listWidth + 1}}
+            {..._.pick(this.props, [
+              'dispatch',
+              'storages',
+              'notes',
+              'config',
+              'params',
+              'location'
+            ])}
+            ignorePreviewPointerEvents={this.state.isSliderFocused}
+          />
+        </div>
+        <StatusBar
+          {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+        />
+      </div>
+    )
+  }
+}
+
+Main.propTypes = {
+  dispatch: PropTypes.func,
+  repositories: PropTypes.array
+}
+
+export default connect((x) => x)(CSSModules(Main, styles))

browser/main/Main.styl

@@ -0,0 +1,30 @@
+.root
+  absolute top left bottom right
+
+.body
+  absolute right top
+  bottom $statusBar-height - 1
+  left $sideNav-width
+
+.body--expanded
+  @extend .body
+  left $sideNav--folded-width
+
+.slider
+  absolute top bottom
+  width 1px
+  background-color $ui-borderColor
+  border-width 0
+  border-style solid
+  border-color $ui-borderColor
+
+.slider--active
+  @extend .slider
+  background-color $ui-button--active-backgroundColor
+
+.slider-hitbox
+  absolute top bottom left right
+  width 7px
+  left -3px
+  z-index 10
+  cursor col-resize

browser/main/NoteDetail/ShareButton.js

@@ -0,0 +1,168 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import api from 'browser/lib/api'
+import clientKey from 'browser/lib/clientKey'
+import activityRecord from 'browser/lib/activityRecord'
+const clipboard = require('electron').clipboard
+
+function notify (...args) {
+  return new window.Notification(...args)
+}
+
+function getDefault () {
+  return {
+    openDropdown: false,
+    isSharing: false,
+    // Fetched url
+    url: null,
+    // for tooltip Copy -> Copied!
+    copied: false,
+    failed: false
+  }
+}
+
+export default class ShareButton extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = getDefault()
+  }
+
+  componentWillReceiveProps (nextProps) {
+    this.setState(getDefault())
+  }
+
+  componentDidMount () {
+    this.dropdownInterceptor = e => {
+      this.dropdownClicked = true
+    }
+    ReactDOM.findDOMNode(this.refs.dropdown).addEventListener('click', this.dropdownInterceptor)
+    this.shareViaPublicURLHandler = e => {
+      this.handleShareViaPublicURLClick(e)
+    }
+  }
+
+  componentWillUnmount () {
+    document.removeEventListener('click', this.dropdownHandler)
+    ReactDOM.findDOMNode(this.refs.dropdown).removeEventListener('click', this.dropdownInterceptor)
+  }
+
+  handleOpenButtonClick (e) {
+    this.openDropdown()
+    if (this.dropdownHandler == null) {
+      this.dropdownHandler = e => {
+        if (!this.dropdownClicked) {
+          this.closeDropdown()
+        } else {
+          this.dropdownClicked = false
+        }
+      }
+    }
+    document.removeEventListener('click', this.dropdownHandler)
+    document.addEventListener('click', this.dropdownHandler)
+  }
+
+  openDropdown () {
+    this.setState({openDropdown: true})
+  }
+
+  closeDropdown () {
+    document.removeEventListener('click', this.dropdownHandler)
+    this.setState({openDropdown: false})
+  }
+
+  handleClipboardButtonClick (e) {
+    activityRecord.emit('MAIN_DETAIL_COPY')
+    clipboard.writeText(this.props.article.content)
+    notify('Saved to Clipboard!', {
+      body: 'Paste it wherever you want!'
+    })
+    this.setState({openDropdown: false})
+  }
+
+  handleShareViaPublicURLClick (e) {
+    let { user } = this.props
+    let input = Object.assign({}, this.props.article, {
+      clientKey: clientKey.get(),
+      writerName: user.name
+    })
+    this.setState({
+      isSharing: true,
+      failed: false
+    }, () => {
+      api.shareViaPublicURL(input)
+        .then(res => {
+          let url = res.body.url
+          this.setState({url: url, isSharing: false})
+          activityRecord.emit('ARTICLE_SHARE')
+        })
+        .catch(err => {
+          console.log(err)
+          this.setState({isSharing: false, failed: true})
+        })
+    })
+  }
+
+  handleCopyURLClick () {
+    clipboard.writeText(this.state.url)
+    this.setState({copied: true})
+  }
+
+  // Restore copy url tooltip
+  handleCopyURLMouseLeave () {
+    this.setState({copied: false})
+  }
+
+  render () {
+    let hasPublicURL = this.state.url != null
+    return (
+      <div className='ShareButton'>
+        <button ref='openButton' onClick={e => this.handleOpenButtonClick(e)} className='ShareButton-open-button'>
+          <i className='fa fa-fw fa-share-alt'/>
+          {
+            this.state.openDropdown ? null : (
+              <span className='tooltip'>Share</span>
+            )
+          }
+        </button>
+        <div ref='dropdown' className={'ShareButton-dropdown' + (this.state.openDropdown ? '' : ' hide')}>
+          {
+            !hasPublicURL ? (
+              <button
+                onClick={e => this.shareViaPublicURLHandler(e)}
+                ref='sharePublicURL'
+                disabled={this.state.isSharing}>
+                <i className='fa fa-fw fa-external-link'/> {this.state.failed ? 'Failed : Click to Try again' : !this.state.isSharing ? 'Share via public URL' : 'Sharing...'}
+              </button>
+            ) : (
+              <div className='ShareButton-url'>
+                <input className='ShareButton-url-input' value={this.state.url} readOnly/>
+                <button
+                  onClick={e => this.handleCopyURLClick(e)}
+                  className='ShareButton-url-button'
+                  onMouseLeave={e => this.handleCopyURLMouseLeave(e)}
+                  >
+                  <i className='fa fa-fw fa-clipboard'/>
+                  <div className='ShareButton-url-button-tooltip'>{this.state.copied ? 'Copied!' : 'Copy URL'}</div>
+                </button>
+                <div className='ShareButton-url-alert'>This url is valid for 7 days.</div>
+              </div>
+            )
+          }
+          <button onClick={e => this.handleClipboardButtonClick(e)}>
+            <i className='fa fa-fw fa-clipboard'/>&nbsp;Copy to clipboard
+          </button>
+        </div>
+      </div>
+    )
+  }
+}
+
+ShareButton.propTypes = {
+  article: PropTypes.shape({
+    publicURL: PropTypes.string,
+    content: PropTypes.string
+  }),
+  user: PropTypes.shape({
+    name: PropTypes.string
+  })
+}

browser/main/NoteList/NoteList.styl

@@ -0,0 +1,93 @@
+.root
+  absolute left bottom
+  border-top $ui-border
+  border-bottom $ui-border
+  overflow auto
+  top $topBar-height - 1
+
+.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($ui-active-color, 10%)
+
+.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
+  overflow-y hidden
+
+.item-info-left
+  float left
+  overflow ellipsis
+
+.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
+
+.item-title
+  height 20px
+  line-height 20px
+  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
+  font-size 12px
+  line-height 30px
+  overflow ellipsis
+
+.item-tagList-icon
+  vertical-align middle
+  color $ui-button-color
+
+.item-tagList-item
+  margin 0 4px
+  padding 0 4px
+  height 20px
+  border-radius 3px
+  vertical-align middle
+  border-style solid
+  border-color $ui-borderColor
+  border-width 0 0 0 3px
+  background-color $ui-backgroundColor
+
+.item-tagList-empty
+  color $ui-inactive-text-color
+  vertical-align middle
+

browser/main/NoteList/index.js

@@ -0,0 +1,299 @@
+import React, { PropTypes } from 'react'
+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 () {
+    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].uniqueKey
+        }
+      })
+      return
+    }
+
+    // Auto scroll
+    if (_.isString(location.query.key)) {
+      let targetIndex = _.findIndex(this.notes, (note) => {
+        return note.uniqueKey === location.query.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
+        }
+      }
+    }
+  }
+
+  selectPriorNote () {
+    if (this.notes == null || this.notes.length === 0) {
+      return
+    }
+    let { router } = this.context
+    let { location } = this.props
+
+    let targetIndex = _.findIndex(this.notes, (note) => {
+      return note.uniqueKey === location.query.key
+    })
+
+    if (targetIndex === 0) {
+      return
+    }
+    targetIndex--
+    if (targetIndex < 0) targetIndex = 0
+
+    router.push({
+      pathname: location.pathname,
+      query: {
+        key: this.notes[targetIndex].uniqueKey
+      }
+    })
+  }
+
+  selectNextNote () {
+    if (this.notes == null || this.notes.length === 0) {
+      return
+    }
+    let { router } = this.context
+    let { location } = this.props
+
+    let targetIndex = _.findIndex(this.notes, (note) => {
+      return note.uniqueKey === location.query.key
+    })
+
+    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].uniqueKey
+      }
+    })
+    ee.emit('list:moved')
+  }
+
+  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()
+    // }
+
+    // if (e.keyCode === 83) {
+    //   e.preventDefault()
+    //   remote.getCurrentWebContents().send('detail-save')
+    // }
+
+    if (e.keyCode === 38) {
+      e.preventDefault()
+      this.selectPriorNote()
+    }
+
+    if (e.keyCode === 40) {
+      e.preventDefault()
+      this.selectNextNote()
+    }
+  }
+
+  getNotes () {
+    let { storages, notes, params, location } = this.props
+
+    if (location.pathname.match(/\/home/)) {
+      return notes
+    }
+
+    if (location.pathname.match(/\/starred/)) {
+      return notes
+        .filter((note) => note.isStarred)
+    }
+
+    let storageKey = params.storageKey
+    let folderKey = params.folderKey
+    let storage = _.find(storages, {key: storageKey})
+    if (storage == null) return []
+
+    let folder = _.find(storage.folders, {key: folderKey})
+    if (folder == null) {
+      return notes
+        .filter((note) => note.storage === storageKey)
+    }
+
+    return notes
+      .filter((note) => note.folder === folderKey)
+  }
+
+  handleNoteClick (uniqueKey) {
+    return (e) => {
+      let { router } = this.context
+      let { location } = this.props
+
+      router.push({
+        pathname: location.pathname,
+        query: {
+          key: uniqueKey
+        }
+      })
+    }
+  }
+
+  render () {
+    let { location, storages, notes } = this.props
+    this.notes = notes = this.getNotes()
+      .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
+
+    let noteList = notes
+      .map((note) => {
+        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={note.uniqueKey}
+            onClick={(e) => this.handleNoteClick(note.uniqueKey)(e)}
+          >
+            <div styleName='item-border'/>
+            <div styleName='item-info'>
+
+              <div styleName='item-info-left'>
+                <span styleName='item-info-left-folder'
+                  style={{borderColor: folder.color}}
+                >
+                  {folder.name}
+                  <span styleName='item-info-left-folder-surfix'>in {storage.name}</span>
+                </span>
+              </div>
+
+              <div styleName='item-info-right'>
+                {moment(note.updatedAt).fromNow()}
+              </div>
+
+            </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'
+                className='fa fa-tags fa-fw'
+              />
+              {tagElements.length > 0
+                ? tagElements
+                : <span styleName='item-tagList-empty'>Not tagged yet</span>
+              }
+            </div>
+          </div>
+        )
+      })
+
+    return (
+      <div className='NoteList'
+        styleName='root'
+        ref='root'
+        tabIndex='0'
+        onKeyDown={(e) => this.handleNoteListKeyDown(e)}
+        style={this.props.style}
+      >
+        {noteList}
+      </div>
+    )
+  }
+}
+NoteList.contextTypes = {
+  router: PropTypes.shape([])
+}
+
+NoteList.propTypes = {
+  dispatch: PropTypes.func,
+  repositories: PropTypes.array,
+  style: PropTypes.shape({
+    width: PropTypes.number
+  })
+}
+
+export default CSSModules(NoteList, styles)

browser/main/SideNav/SideNav.styl

@@ -0,0 +1,122 @@
+.root
+  absolute top left
+  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
+
+.top
+  height $topBar-height
+  border-bottom $ui-border
+
+.top-menu
+  navButtonColor()
+  height $topBar-height - 1
+  padding 0 10px
+  font-size 14px
+  width 100%
+  text-align left
+
+.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
+
+.menu-button--active
+  @extend .menu-button
+  background-color $ui-button--active-backgroundColor
+  color $ui-button--active-color
+  &:hover
+    background-color $ui-button--active-backgroundColor
+
+.menu-button-label
+  margin-left 5px
+
+.storageList
+  absolute left right
+  bottom 44px
+  top 178px
+  overflow-y auto
+
+.storageList-empty
+  padding 0 10px
+  margin-top 15px
+  line-height 24px
+  color $ui-inactive-text-color
+
+.navToggle
+  navButtonColor()
+  display block
+  position absolute
+  right 5px
+  bottom 5px
+  border-radius 16.5px
+  height 34px
+  width 34px
+  line-height 32px
+  padding 0
+
+.root--folded
+  @extend .root
+  width 44px
+  .storageList-empty
+    white-space nowrap
+    transform rotate(90deg)
+  .top-menu
+    width 44px - 1
+    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 $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
+  .menu-button, .menu-button--active
+    width 44px - 1
+    text-align center
+    &:hover .menu-button-label
+      width 100px
+  // TODO: extract tooltip style to a mixin
+  .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 $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

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: true
+    }
+  }
+
+  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)

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 4px
+  border-style solid
+  border-color transparent

browser/main/SideNav/index.js

@@ -0,0 +1,116 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SideNav.styl'
+import { openModal } from 'browser/main/lib/modal'
+import PreferencesModal from '../modals/PreferencesModal'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import StorageItem from './StorageItem'
+
+const electron = require('electron')
+const { remote } = electron
+
+class SideNav extends React.Component {
+  // TODO: should not use electron stuff v0.7
+  handleMenuButtonClick (e) {
+    openModal(PreferencesModal)
+  }
+
+  handleHomeButtonClick (e) {
+    let { router } = this.context
+    router.push('/home')
+  }
+
+  handleStarredButtonClick (e) {
+    let { router } = this.context
+    router.push('/starred')
+  }
+
+  handleToggleButtonClick (e) {
+    let { dispatch, config } = this.props
+
+    ConfigManager.set({isSideNavFolded: !config.isSideNavFolded})
+    dispatch({
+      type: 'SET_IS_SIDENAV_FOLDED',
+      isFolded: !config.isSideNavFolded
+    })
+  }
+
+  render () {
+    let { storages, location, config } = this.props
+
+    let isFolded = config.isSideNavFolded
+    let isHomeActive = location.pathname.match(/^\/home$/)
+    let isStarredActive = location.pathname.match(/^\/starred$/)
+    let storageList = storages.map((storage) => {
+      return <StorageItem
+        key={storage.key}
+        storage={storage}
+        location={location}
+      />
+    })
+
+    return (
+      <div className='SideNav'
+        styleName={isFolded ? 'root--folded' : 'root'}
+        tabIndex='1'
+      >
+        <div styleName='top'>
+          <button styleName='top-menu'
+            onClick={(e) => this.handleMenuButtonClick(e)}
+          >
+            <i className='fa fa-navicon fa-fw'/>
+            <span styleName='top-menu-label'>Menu</span>
+          </button>
+        </div>
+
+        <div styleName='menu'>
+          <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
+            onClick={(e) => this.handleHomeButtonClick(e)}
+          >
+            <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 className='fa fa-star fa-fw'/>
+            <span styleName='menu-button-label'>Starred</span>
+          </button>
+        </div>
+
+        <div styleName='storageList'>
+          {storageList.length > 0 ? storageList : (
+            <div styleName='storageList-empty'>No storage mount.</div>
+          )}
+        </div>
+        {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>
+    )
+  }
+}
+
+SideNav.contextTypes = {
+  router: PropTypes.shape({})
+}
+
+SideNav.propTypes = {
+  dispatch: PropTypes.func,
+  storages: PropTypes.array,
+  config: PropTypes.shape({
+    isSideNavFolded: PropTypes.bool
+  }),
+  location: PropTypes.shape({
+    pathname: PropTypes.string
+  })
+}
+
+export default CSSModules(SideNav, styles)

browser/main/StatusBar/StatusBar.styl

@@ -0,0 +1,38 @@
+.root
+  absolute bottom left right
+  height $statusBar-height - 1
+  background-color $ui-backgroundColor
+
+.pathname
+  absolute left
+  height 24px
+  overflow ellipsis
+  right 185px
+  line-height 24px
+  font-size 12px
+  padding 0 15px
+  color $ui-inactive-text-color
+
+.zoom
+  navButtonColor()
+  absolute right
+  height 24px
+  width 60px
+  border-width 0 1px
+  border-style solid
+  border-color $ui-borderColor
+
+.update
+  navButtonColor()
+  position absolute
+  right 60px
+  height 24px
+  width 125px
+  border-width 0 0 0 1px
+  border-style solid
+  border-color $ui-borderColor
+  &:active .update-icon
+    color white
+
+.update-icon
+  color $brand-color

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, 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
+    }
+  }
+
+  componentDidMount () {
+    ipc.on('update-available', function (message) {
+      this.setState({updateAvailable: true})
+    }.bind(this))
+  }
+
+  updateApp () {
+    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) {
+    let menu = new Menu()
+
+    zoomOptions.forEach((zoom) => {
+      menu.append(new MenuItem({
+        label: Math.floor(zoom * 100) + '%',
+        click: () => this.handleZoomMenuItemClick(zoom)
+      }))
+    })
+
+    menu.popup(remote.getCurrentWindow())
+  }
+
+  handleZoomMenuItemClick (zoomFactor) {
+    let { dispatch } = this.props
+    ZoomManager.setZoom(zoomFactor)
+    dispatch({
+      type: 'SET_ZOOM',
+      zoom: zoomFactor
+    })
+  }
+
+  render () {
+    let { config, location } = this.props
+
+    return (
+      <div className='StatusBar'
+        styleName='root'
+      >
+        <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!
+          </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)

browser/main/TopBar/TopBar.styl

@@ -0,0 +1,106 @@
+.root
+  position relative
+  width 100%
+  background-color $ui-backgroundColor
+  height $topBar-height - 1
+
+$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
+
+.control-search-input
+  display block
+  absolute top bottom right
+  left 30px
+  input
+    width 100%
+    height 100%
+    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
+  width 40px
+  height $control-height - 2
+  navButtonColor()
+  border-left $ui-border
+  font-size 14px
+  line-height 28px
+  padding 0
+  &:active
+    border-color $ui-button--active-backgroundColor
+  &:hover .left-control-newPostButton-tooltip
+    display block
+
+.control-newPostButton-tooltip
+  position fixed
+  line-height 1.4
+  background-color $ui-tooltip-backgroundColor
+  color $ui-tooltip-text-color
+  font-size 10px
+  margin-left -25px
+  margin-top 5px
+  padding 5px
+  z-index 1
+  border-radius 5px
+  display none
+  pointer-events none

browser/main/TopBar/index.js

@@ -0,0 +1,216 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TopBar.styl'
+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'
+
+class TopBar extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      search: '',
+      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) {
+    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')
+
+    modal.open(NewNoteModal, {
+      storage: storage.key,
+      folder: folder.key,
+      dispatch,
+      location
+    })
+  }
+
+  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) => {
+            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
+        })
+      }
+    })
+
+    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, 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'}
+        style={style}
+      >
+        <div styleName='control'>
+          <div styleName='control-search'>
+            <i styleName='control-search-icon' className='fa fa-search fa-fw'/>
+            <div styleName='control-search-input'
+              onFocus={(e) => this.handleSearchFocus(e)}
+              onBlur={(e) => this.handleSearchBlur(e)}
+              tabIndex='-1'
+              ref='search'
+            >
+              <input
+                ref='searchInput'
+                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'
+                onClick={(e) => this.handleSearchClearButton(e)}
+              >
+                <i className='fa fa-times'/>
+              </button>
+            }
+
+          </div>
+          <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>
+    )
+  }
+}
+
+TopBar.contextTypes = {
+  router: PropTypes.shape({
+    push: PropTypes.func
+  })
+}
+
+TopBar.propTypes = {
+  dispatch: PropTypes.func,
+  config: PropTypes.shape({
+    isSideNavFolded: PropTypes.bool
+  })
+}
+
+export default CSSModules(TopBar, styles)

browser/main/global.styl

@@ -0,0 +1,85 @@
+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
+  &:disabled
+    cursor not-allowed
+input
+  &:disabled
+    cursor not-allowed
+.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%)
+.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
+  display flex
+  align-items center
+  justify-content center
+
+  &.hide
+    display none
+  .modalBack
+    absolute top left bottom right
+    background-color modalBackColor
+    z-index modalZIndex + 1

browser/main/index.js

@@ -0,0 +1,83 @@
+import { Provider } from 'react-redux'
+import Main from './Main'
+import store from './store'
+import React from 'react'
+import ReactDOM from 'react-dom'
+require('!!style!css!stylus?sourceMap!./global.styl')
+import activityRecord from 'browser/lib/activityRecord'
+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')
+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 () {
+  ipc.send('check-update', 'check-update')
+})
+
+document.addEventListener('drop', function (e) {
+  e.preventDefault()
+  e.stopPropagation()
+})
+document.addEventListener('dragover', function (e) {
+  e.preventDefault()
+  e.stopPropagation()
+})
+
+function notify (title, options) {
+  if (process.platform === 'win32') {
+    options.icon = path.join('file://', global.__dirname, '../../resources/app.png')
+    options.silent = false
+  }
+  console.log(options)
+  return new window.Notification(title, options)
+}
+
+ipc.on('notify', function (e, payload) {
+  notify(payload.title, {
+    body: payload.body
+  })
+})
+
+ipc.on('copy-finder', function () {
+  activityRecord.emit('FINDER_COPY')
+})
+ipc.on('open-finder', function () {
+  activityRecord.emit('FINDER_OPEN')
+})
+
+let el = document.getElementById('content')
+const history = syncHistoryWithStore(hashHistory, store)
+
+ReactDOM.render((
+  <Provider store={store}>
+    <Router history={history}>
+      <Route path='/' component={Main}>
+        <IndexRedirect to='/home'/>
+        <Route path='home'/>
+        <Route path='starred'/>
+        <Route path='storages'>
+          <IndexRedirect to='/home'/>
+          <Route path=':storageKey'>
+            <IndexRoute/>
+            <Route path='folders/:folderKey'/>
+          </Route>
+        </Route>
+      </Route>
+    </Router>
+  </Provider>
+), el, function () {
+  let loadingCover = document.getElementById('loadingCover')
+  loadingCover.parentNode.removeChild(loadingCover)
+})

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
+}

browser/main/lib/ConfigManager.js

@@ -0,0 +1,84 @@
+import _ from 'lodash'
+
+const OSX = global.process.platform === 'darwin'
+const electron = require('electron')
+const { ipcRenderer } = electron
+
+const defaultConfig = {
+  zoom: 1,
+  isSideNavFolded: false,
+  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: 'BLUR' // Available value: RIGHTCLICK, BLUR
+  },
+  preview: {
+    fontSize: '14',
+    fontFamily: 'Lato',
+    codeBlockTheme: 'xcode',
+    lineNumber: true
+  }
+}
+
+function validate (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
+}
+
+function _save (config) {
+  console.log(config)
+  window.localStorage.setItem('config', JSON.stringify(config))
+}
+
+function get () {
+  let config = window.localStorage.getItem('config')
+
+  try {
+    config = Object.assign({}, defaultConfig, 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)
+  ipcRenderer.send('CONFIG_RENEW', {
+    config: get(),
+    silent: false
+  })
+}
+
+ipcRenderer.send('CONFIG_RENEW', {
+  config: get(),
+  silent: true
+})
+
+export default {
+  get,
+  set,
+  validate
+}

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
+}

browser/main/lib/dataApi.js

@@ -0,0 +1,565 @@
+const keygen = require('browser/lib/keygen')
+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 = []
+
+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.map((note) => {
+          let json = note.toJSON()
+          delete json.storage
+          return json
+        })
+      }))
+  }, 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'))
+      if (!_.isArray(caches)) throw new Error('Cached data is not valid.')
+    } catch (e) {
+      console.error(e)
+      caches = []
+      localStorage.setItem('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)) {
+    return Promise.reject(new Error('Path must be a string.'))
+  }
+
+  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))
+        })
+      })
+
+      return Promise.all(_notes)
+        .then((_notes) => {
+          notes = notes.concat(_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()
+
+      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())
+      }
+    })
+}
+
+function removeStorage (key) {
+  storages = storages.filter((storage) => storage.key !== key)
+  _saveCaches()
+  notes = notes.filter((note) => note.storage !== 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
+  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.')
+
+  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 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({
+    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,
+    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
+  })
+
+  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) {
+  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) {
+  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,
+  removeStorage,
+  renameStorage,
+  createFolder,
+  updateFolder,
+  removeFolder,
+  createMarkdownNote,
+  createSnippetNote,
+  updateNote,
+  removeNote,
+  moveNote,
+  migrateFromV5
+}

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
+}

browser/main/lib/modal.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import ReactDOM from 'react-dom'
+import store from '../store'
+
+class ModalBase extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      component: null,
+      componentProps: {},
+      isHidden: true
+    }
+  }
+
+  close () {
+    if (modalBase != null) modalBase.setState({component: null, componentProps: null, isHidden: true})
+  }
+
+  render () {
+    return (
+      <div className={'ModalBase' + (this.state.isHidden ? ' hide' : '')}>
+        <div onClick={(e) => this.close(e)} className='modalBack'/>
+        {this.state.component == null ? null : (
+          <Provider store={store}>
+            <this.state.component {...this.state.componentProps} close={this.close}/>
+          </Provider>
+        )}
+      </div>
+    )
+  }
+}
+
+let el = document.createElement('div')
+document.body.appendChild(el)
+let modalBase = ReactDOM.render(<ModalBase/>, el)
+
+export function openModal (component, props) {
+  if (modalBase == null) { return }
+
+  document.body.setAttribute('data-modal', 'open')
+  modalBase.setState({component: component, componentProps: props, isHidden: false})
+}
+
+export function closeModal () {
+  if (modalBase == null) { return }
+  modalBase.close()
+}
+
+export function isModalOpen () {
+  return !modalBase.state.isHidden
+}
+
+export default {
+  open: openModal,
+  close: closeModal,
+  isOpen: isModalOpen
+}

browser/main/modals/DeleteArticleModal.js

@@ -0,0 +1,53 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import store from '../store'
+
+const electron = require('electron')
+const ipc = electron.ipcRenderer
+
+export default class DeleteArticleModal extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.confirmHandler = (e) => this.handleYesButtonClick()
+  }
+
+  componentDidMount () {
+    ReactDOM.findDOMNode(this.refs.no).focus()
+    ipc.on('modal-confirm', this.confirmHandler)
+  }
+
+  componentWillUnmount () {
+    ipc.removeListener('modal-confirm', this.confirmHandler)
+  }
+
+  handleNoButtonClick (e) {
+    this.props.close()
+  }
+
+  handleYesButtonClick (e) {
+    // store.dispatch(destroyArticle(this.props.articleKey))
+    this.props.close()
+  }
+
+  render () {
+    return (
+      <div className='DeleteArticleModal modal'>
+        <div className='title'><i className='fa fa-fw fa-trash'/> Delete an article.</div>
+
+        <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>
+        </div>
+      </div>
+    )
+  }
+}
+
+DeleteArticleModal.propTypes = {
+  action: PropTypes.object,
+  articleKey: PropTypes.string,
+  close: PropTypes.func
+}

browser/main/modals/InitModal.js

@@ -0,0 +1,243 @@
+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,
+      isSending: 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, () => {
+      this.refs.createButton.focus()
+    })
+  }
+
+  handlePathBrowseButtonClick (e) {
+    browseFolder()
+      .then((targetPath) => {
+        if (targetPath.length > 0) {
+          this.setState({
+            path: targetPath
+          })
+        }
+      })
+      .catch((err) => {
+        console.error('BrowseFAILED')
+        console.error(err)
+      })
+  }
+
+  handleSubmitButtonClick (e) {
+    this.setState({
+      isSending: true
+    }, () => {
+      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()
+        })
+        .catch((err) => {
+          this.setState({
+            isSending: false
+          })
+          throw err
+        })
+    })
+  }
+
+  handleMigrationRequestedChange (e) {
+    this.setState({
+      migrationRequested: e.target.checked
+    })
+  }
+
+  handleKeyDown (e) {
+    if (e.keyCode === 27) {
+      this.props.close()
+    }
+  }
+
+  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'
+        tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
+
+        <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'
+              ref='createButton'
+              onClick={(e) => this.handleSubmitButtonClick(e)}
+              disabled={this.state.isSending}
+            >
+              {this.state.isSending
+                ? <span>
+                  <i className='fa fa-spin fa-spinner'/> Loading...
+                </span>
+                : 'Let\'s Go!'
+              }
+            </button>
+          </div>
+        </div>
+
+      </div>
+    )
+  }
+}
+
+InitModal.propTypes = {
+}
+
+export default CSSModules(InitModal, styles)

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
+  padding 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

browser/main/modals/NewNoteModal.js

@@ -0,0 +1,140 @@
+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'
+import ee from 'browser/main/lib/eventEmitter'
+
+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}
+        })
+        ee.emit('detail:focus')
+        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}
+        })
+        ee.emit('detail:focus')
+        this.props.close()
+      })
+  }
+
+  handleSnippetNoteButtonKeyDown (e) {
+    if (e.keyCode === 9) {
+      e.preventDefault()
+      this.refs.markdownButton.focus()
+    }
+  }
+
+  handleKeyDown (e) {
+    if (e.keyCode === 27) {
+      this.props.close()
+    }
+  }
+
+  render () {
+    return (
+      <div styleName='root'
+        tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
+        <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)

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

browser/main/modals/PreferencesModal/ConfigTab.js

@@ -0,0 +1,412 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ConfigTab.styl'
+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 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 applied!'
+      }})
+    }
+    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)
+  }
+
+  handleSaveButtonClick (e) {
+    let newConfig = {
+      hotkey: this.state.config.hotkey
+    }
+
+    ConfigManager.set(newConfig)
+
+    store.dispatch({
+      type: 'SET_UI',
+      config: newConfig
+    })
+  }
+
+  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'
+                disabled
+              />
+            </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)

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -0,0 +1,88 @@
+.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
+  &:disabled
+    background-color $ui-input--disabled-backgroundColor
+
+.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
+  :global
+    .alert
+      font-size 12px
+      line-height 30px
+      padding 0 5px
+      float 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
+
+

browser/main/modals/PreferencesModal/InfoTab.js

@@ -0,0 +1,58 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './InfoTab.styl'
+
+const electron = require('electron')
+const { shell, remote } = electron
+const appVersion = remote.app.getVersion()
+
+class InfoTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+    }
+  }
+
+  handleLinkClick (e) {
+    shell.openExternal(e.currentTarget.href)
+    e.preventDefault()
+  }
+
+  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='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 styleName='list'>
+          <li>
+            The codes of this app is published under GPLv3 license.
+          </li>
+          <li>
+            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>
+        </ul>
+      </div>
+    )
+  }
+}
+
+InfoTab.propTypes = {
+}
+
+export default CSSModules(InfoTab, styles)

browser/main/modals/PreferencesModal/InfoTab.styl

@@ -0,0 +1,35 @@
+.root
+  padding 15px
+  white-space pre
+  line-height 1.4
+  color $ui-text-color
+  width 100%
+
+.top
+  text-align center
+  margin-bottom 25px
+
+.appId
+  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

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

browser/main/modals/PreferencesModal/StorageItem.js

@@ -0,0 +1,351 @@
+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 {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isLabelEditing: false
+    }
+  }
+
+  handleNewFolderButtonClick (e) {
+    let { storage } = this.props
+    let input = {
+      name: 'Untitled',
+      color: consts.FOLDER_COLORS[Math.floor(Math.random() * 7) % 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)
+      })
+  }
+
+  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) => {
+      return <FolderItem key={folder.key}
+        folder={folder}
+        storage={storage}
+      />
+    })
+    return (
+      <div styleName='root' key={storage.key}>
+        <div styleName='header'>
+          {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)}
+            >
+              <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)

browser/main/modals/PreferencesModal/StorageItem.styl

@@ -0,0 +1,119 @@
+.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-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
+
+.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 4px 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()

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)

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

browser/main/modals/PreferencesModal/index.js

@@ -0,0 +1,112 @@
+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'
+    }
+  }
+
+  componentDidMount () {
+    this.refs.root.focus()
+  }
+
+  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}
+          />
+        )
+    }
+  }
+
+  handleKeyDown (e) {
+    if (e.keyCode === 27) {
+      this.props.close()
+    }
+  }
+
+  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'
+        ref='root'
+        tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
+        <div styleName='nav'>
+          {navButtons}
+        </div>
+        <div styleName='content'>
+          {content}
+        </div>
+      </div>
+    )
+  }
+}
+
+Preferences.propTypes = {
+  dispatch: PropTypes.func
+}
+
+export default connect((x) => x)(CSSModules(Preferences, styles))

browser/main/store.js

@@ -0,0 +1,127 @@
+import { combineReducers, createStore } from 'redux'
+import { routerReducer } from 'react-router-redux'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+
+function storages (state = [], action) {
+  console.info('REDUX >> ', action)
+  switch (action.type) {
+    case 'INIT_ALL':
+      return action.storages
+    case 'ADD_STORAGE':
+      {
+        let storages = state.slice()
+
+        storages.push(action.storage)
+
+        return storages
+      }
+    case 'ADD_FOLDER':
+    case 'REMOVE_FOLDER':
+    case 'UPDATE_STORAGE':
+    case 'RENAME_STORAGE':
+      {
+        let storages = state.slice()
+        storages = storages
+          .filter((storage) => storage.key !== action.storage.key)
+        storages.push(action.storage)
+
+        return storages
+      }
+    case 'REMOVE_STORAGE':
+      {
+        let storages = state.slice()
+        storages = storages
+          .filter((storage) => storage.key !== action.key)
+
+        return storages
+      }
+  }
+  return state
+}
+
+function notes (state = [], action) {
+  switch (action.type) {
+    case 'INIT_ALL':
+      return action.notes
+    case 'ADD_STORAGE':
+      {
+        let notes = state.concat(action.notes)
+        return notes
+      }
+    case 'REMOVE_STORAGE':
+      {
+        let notes = state.slice()
+        notes = notes
+          .filter((note) => note.storage !== action.key)
+
+        return notes
+      }
+    case 'REMOVE_FOLDER':
+      {
+        let notes = state.slice()
+        notes = notes
+          .filter((note) => note.storage !== action.storage.key || note.folder !== action.key)
+
+        return notes
+      }
+    case 'CREATE_NOTE':
+      {
+        let notes = state.slice()
+        notes.push(action.note)
+        return notes
+      }
+    case 'UPDATE_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.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
+      }
+    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
+}
+
+const defaultConfig = ConfigManager.get()
+
+function config (state = defaultConfig, action) {
+  switch (action.type) {
+    case 'SET_IS_SIDENAV_FOLDED':
+      state.isSideNavFolded = action.isFolded
+      return Object.assign({}, state)
+    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)
+    case 'SET_UI':
+      return Object.assign({}, state, action.config)
+  }
+  return state
+}
+
+let reducer = combineReducers({
+  storages,
+  notes,
+  config,
+  routing: routerReducer
+})
+
+let store = createStore(reducer)
+
+export default store

browser/styles/finder/index.styl

@@ -0,0 +1,129 @@
+@import '../../../node_modules/nib/lib/nib'
+@import '../vars'
+@import '../mixins/*'
+global-reset()
+@import '../shared/*'
+@import '../theme/*'
+
+iptBgColor = #E6E6E6
+iptFocusBorderColor = #369DCD
+
+DEFAULT_FONTS = 'Lato', 'MS Gothic', 'Malgun Gothic', 'Sans-serif'
+
+body
+  font-family DEFAULT_FONTS
+  color textColor
+  font-size fontSize
+  width 100%
+  height 100%
+  overflow hidden
+button, input
+  font-family "Lato"
+
+.Finder
+  absolute top bottom left right
+  .FinderInput
+    padding 11px
+    margin 0 auto
+    height 55px
+    box-sizing border-box
+    border-bottom solid 1px borderColor
+    background-color iptBgColor
+    z-index 200
+    input
+      display block
+      width 100%
+      border solid 1px borderColor
+      padding 0 10px
+      font-size 1em
+      height 33px
+      border-radius 5px
+      box-sizing border-box
+      border-radius 5px
+      &:focus, &.focus
+        border-color iptFocusBorderColor
+        outline none
+  .FinderList
+    absolute left bottom
+    top 55px
+    border-right solid 1px borderColor
+    box-sizing border-box
+    width 250px
+    overflow-y auto
+    z-index 0
+    user-select none
+    &>ul>li
+      .articleItem
+        padding 10px
+        border solid 2px transparent
+        box-sizing border-box
+        cursor pointer
+        white-space nowrap
+        overflow-x hidden
+        text-overflow ellipsis
+      .divider
+        box-sizing border-box
+        border-bottom solid 1px borderColor
+      &.active
+        .articleItem
+          border-color brandColor
+
+  .FinderDetail
+    absolute right bottom
+    top 55px
+    left 250px
+    box-shadow 0px 0px 10px 0 #CCC
+    z-index 100
+    .header
+      absolute top left right
+      height 55px
+      box-sizing border-box
+      padding 0 10px
+      border-bottom solid 1px borderColor
+      line-height 55px
+      font-size 18px
+      white-space nowrap
+      text-overflow ellipsis
+      overflow-x hidden
+      clearfix()
+      .left
+        float left
+      .right
+        float right
+        button
+          border-radius 16.5px
+          cursor pointer
+          height 33px
+          width 33px
+          border none
+          margin-right 5px
+          font-size 18px
+          color inactiveTextColor
+          background-color transparent
+          padding 0
+          .tooltip
+            tooltip()
+          &.clipboardBtn .tooltip
+            margin-left -160px
+            margin-top 25px
+          &:hover
+            color textColor
+            .tooltip
+              opacity 1
+    .content
+      position absolute
+      top 55px
+      padding 10px
+      bottom 0
+      left 0
+      right 0
+      box-sizing border-box
+      overflow-y auto
+      .MarkdownPreview
+        marked()
+        &.empty
+          color lighten(inactiveTextColor, 10%)
+          user-select none
+          font-size 14px
+      .CodeEditor
+        absolute top bottom left right

browser/styles/index.styl

@@ -0,0 +1,130 @@
+$brand-color = #6AA5E9
+
+$danger-color = #c9302c
+$danger-lighten-color = lighten(#c9302c, 5%)
+
+// Layouts
+$statusBar-height = 24px
+$sideNav-width = 200px
+$sideNav--folded-width = 44px
+$topBar-height = 50px
+
+// UI default
+$ui-text-color = #515151
+$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
+$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
+$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
+*/
+$border-color = #D0D0D0
+$active-border-color = #369DCD
+$focus-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--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--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
+*/
+
+navButtonColor()
+  border none
+  color $ui-button-color
+  background-color transparent
+  transition color background-color  0.15s
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+  &:active
+    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
+* These will be moved lib/modal
+*/
+
+$modal-z-index = 1002
+$modal-background = white
+$modal-margin = 64px auto 64px
+$modal-border-radius = 5px
+
+modal()
+  position relative
+  z-index $modal-z-index
+  width 100%
+  background-color $modal-background
+  overflow hidden
+  border-radius $modal-border-radius
+  box-shadow 2px 2px 10px gray

browser/styles/main/index.styl

@@ -0,0 +1,113 @@
+@import '../vars'
+@import '../mixins/*'
+global-reset()
+@import '../theme/*'
+
+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
+
+body[data-modal="open"]
+  #content *
+    overflow hidden !important
+
+button, input, select, textarea
+  font-family DEFAULT_FONTS
+
+div, span, a, button, input, textarea
+  box-sizing border-box
+
+a
+  color brandColor
+  &:hover
+    color lighten(brandColor, 5%)
+  &:visited
+    color brandColor
+
+hr
+  border-top none
+  border-bottom solid 1px borderColor
+  margin 15px 0
+
+button
+  font-weight 400
+  cursor pointer
+  &:focus, &.focus
+    outline none
+
+.noSelect
+  noSelect()
+
+.text-center
+  text-align center
+
+.form-group
+  margin-bottom 15px
+  &>label
+    display block
+    margin-bottom 5px
+
+.block-input, .inline-input
+  border solid 1px borderColor
+  padding 0 10px
+  font-size 1em
+  height 33px
+  border-radius 5px
+  box-sizing border-box
+  &:focus, &.focus
+    border solid 1px brandBorderColor
+    outline none
+  &.circleInput
+    border-radius 16.5px
+
+.block-input
+  display block
+  width 100%
+
+.inline-input
+  display inline-block
+  margin-right 5px
+
+.relative
+  position relative
+
+textarea.block-input
+  resize vertical
+  height 125px
+  border-radius 5px
+  padding 5px 10px
+
+#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
+

browser/styles/mixins/alert.styl

@@ -0,0 +1,11 @@
+alertSuccess()
+  background-color successBackgroundColor
+  color successTextColor
+
+alertError()
+  background-color errorBackgroundColor
+  color errorTextColor
+
+alertInfo()
+  background-color infoBackgroundColor
+  color infoTextColor

browser/styles/mixins/btn.styl

@@ -0,0 +1,40 @@
+btnDefault()
+  border-style solid
+  border-width 1px
+  border-color lightButtonColor
+  background-color transparent
+  color lightButtonColor
+
+  &:hover, &.hover, &:focus, &.focus
+    border-color darken(lightButtonColor, 50%)
+    color darken(lightButtonColor, 50%)
+  &:active, &.active
+    border-color darken(brandBorderColor, 10%)
+    background-color brandColor
+    color white
+  &:disabled, &.disabled
+    opacity 0.6
+
+btnPrimary()
+  border-style solid
+  border-width 1px
+  border-color brandBorderColor
+  background-color transparent
+  color brandColor
+  &:hover, &.hover, &:focus, &.focus
+    border-color darken(brandBorderColor, 30%)
+    color darken(brandColor, 30%)
+  &:active, &.active
+    background-color brandColor
+    color white
+  &:disabled, &.disabled
+    opacity 0.6
+
+btnStripDefault()
+  border none
+  background-color transparent
+  color lightButtonColor
+  &:hover, &.hover, &:focus, &.focus
+    color darken(lightButtonColor, 50%)
+  &:active, &.active
+    color brandColor

browser/styles/mixins/circle.styl

@@ -0,0 +1,3 @@
+circle()
+  border-radius 50%
+  overflow hidden

browser/styles/mixins/fullsize.styl

@@ -0,0 +1,6 @@
+fullsize()
+  position absolute
+  top 0
+  left 0
+  right 0
+  bottom 0

browser/styles/mixins/input.styl

@@ -0,0 +1,18 @@
+stripInput()
+  border none
+  border-bottom 1px solid borderColor
+  padding 5px 15px
+  transition 0.1s
+  font-size 14px
+  &:focus, &.focus
+    border-bottom 1px solid brandBorderColor
+    outline none
+
+borderInput()
+  border solid 1px borderColor
+  padding 5px 15px
+  transition 0.1s
+  font-size 14px
+  &:focus, &.focus
+    border-color brandBorderColor
+    outline none

browser/styles/mixins/marked.styl

@@ -0,0 +1,172 @@
+marked()
+  font-size 14px
+  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 0 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
+    margin 0 0 15px
+    font-weight 600
+  *:not(a.lineAnchor) + h1, *:not(a.lineAnchor) + h2, *:not(a.lineAnchor) + h3, *:not(a.lineAnchor) + h4, *:not(a.lineAnchor) + h5, *:not(a.lineAnchor) + h6
+    margin-top 25px
+  h1
+    font-size 1.8em
+    border-bottom solid 2px borderColor
+    line-height 2em
+  h2
+    font-size 1.66em
+    line-height 1.8em
+  h3
+    font-size 1.33em
+    line-height 1.6625em
+  h4
+    font-size 1.15em
+    line-height 1.4375em
+  h5
+    font-size 1em
+    line-height 1.25em
+  h6
+    font-size 0.8em
+    line-height 1em
+
+  *:not(a.lineAnchor) + p, *:not(a.lineAnchor) + blockquote, *:not(a.lineAnchor) + ul, *:not(a.lineAnchor) + ol, *:not(a.lineAnchor) + pre
+    margin-top 15px
+  p
+    line-height 1.9em
+    margin 0 0 15px
+  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 15px
+    padding 0 25px
+  ul
+    list-style-type disc
+    padding-left 25px
+    margin-bottom 15px
+    li
+      display list-item
+      line-height 1.8em
+    &>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 25px
+    margin-bottom 15px
+    li
+      display list-item
+      line-height 1.8em
+    &>li>ul, &>li>ol
+      margin 0
+  code
+    font-family Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace
+    padding 2px 4px
+    border solid 1px alpha(borderColor, 0.3)
+    border-radius 4px
+    font-size 0.9em
+    text-decoration none
+    margin-right 2px
+  *:not(a.lineAnchor) + code
+    margin-left 2px
+  pre
+    padding 5px
+    border solid 1px alpha(borderColor, 0.3)
+    border-radius 5px
+    overflow-x auto
+    margin 0 0 15px
+    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
+    width 100%
+    margin 15px 0 25px
+    thead
+      tr
+        background-color tableHeadBgColor
+      th
+        border-style solid
+        padding 15px 5px
+        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 15px 5px
+        border-width 0 0 1px 1px
+        border-color borderColor
+        &:last-child
+          border-right solid 1px borderColor

browser/styles/mixins/tooltip.styl

@@ -0,0 +1,14 @@
+tooltip()
+  position fixed
+  z-index popupZIndex
+  background-color transparentify(invBackgroundColor, 80%)
+  color invTextColor
+  padding 6px 15px
+  font-size 12px
+  font-weight normal
+  line-height 20px
+  white-space nowrap
+  opacity 0
+  transition 0.1s
+  pointer-events none
+

browser/styles/mixins/util.styl

@@ -0,0 +1,6 @@
+borderBox()
+  box-sizing border-box
+
+noSelect()
+  -webkit-user-select none
+  cursor default

browser/styles/shared/btn.styl

@@ -0,0 +1,55 @@
+.btn-primary, .btn-default
+  border-style solid
+  border-width 1px
+  background-image none
+  height 44px
+  padding 0 15px
+  border-radius 5px
+  box-sizing border-box
+  font-size 1em
+  font-family 'Lato'
+  font-weight 400
+  transition 0.1s
+  cursor pointer
+  margin 0 5px
+
+.btn-block
+  display block
+  width 100%
+  margin 0 auto
+
+.btn-square
+  display inline-block
+  width 44px
+  padding 0
+  border-width 1px
+
+.btn-sm
+  height 32px
+  border-radius 16px
+  &.btn-square
+    width 32px
+
+.btn-primary
+  border-color brandBorderColor
+  background-color transparent
+  color brandColor
+  &:hover, &.hover, &:focus, &.focus
+    border-color darken(brandBorderColor, 30%)
+    color darken(brandColor, 30%)
+  &:active, &.active
+    background-color brandColor
+    color white
+
+.btn-default
+  border-color lightButtonColor
+  background-color transparent
+  color lightButtonColor
+
+  &:hover, &.hover, &:focus, &.focus
+    border-color darken(lightButtonColor, 50%)
+    color darken(lightButtonColor, 50%)
+  &:active, &.active
+    border-color darken(brandBorderColor, 10%)
+    background-color brandColor
+    color white

browser/styles/theme/dark.styl

@@ -0,0 +1,460 @@
+@import '../vars'
+
+themeDarkBackground = darken(#21252B, 10%)
+themeDarkModal = darken(#21252B, 10%)
+themeDarkList = #282C34
+themeDarkPreview = #282C34
+themeDarkSidebar = darken(#21252B, 10%)
+themeDarkText = #DDDDDD
+themeDarkBorder = lighten(themeDarkBackground, 20%)
+themeDarkTopicColor = #369dcd
+themeDarkTooltip = rgba(0, 0, 0, 0.7)
+themeDarkFocusText = #FFFFFF
+themeDarkFocusButton = lighten(themeDarkTopicColor, 30%)
+themeDarkBoxShadow = alpha(lighten(themeDarkTopicColor, 10%), 0.4);
+themeDarkTableOdd = themeDarkPreview
+themeDarkTableEven = darken(themeDarkPreview, 10%)
+themeDarkTableHead = themeDarkTableEven
+themeDarkTableBorder = themeDarkBorder
+themeDarkModalButtonDefault = themeDarkPreview
+themeDarkModalButtonDanger = #BF360C
+
+body[data-theme="dark"]
+  background-color themeDarkBackground
+
+  .Main
+    .ArticleNavigator .userInfo .settingBtn .tooltip,
+    .ArticleNavigator .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn .tooltip,
+    .ArticleTopBar>.ArticleTopBar-left>.ArticleTopBar-left-search .tooltip,
+    .ArticleTopBar>.ArticleTopBar-left .ArticleTopBar-left-control button.ArticleTopBar-left-control-new-post-button .tooltip
+    .ArticleTopBar>.ArticleTopBar-right>button .tooltip,
+    .ArticleTopBar>.ArticleTopBar-right>.ArticleTopBar-right-links-button-dropdown,
+    .ArticleDetail .ArticleDetail-info .ArticleDetail-info-control>button .tooltip,
+    .ArticleDetail .ArticleDetail-info .ArticleDetail-info-control .ShareButton-open-button .tooltip {
+      background-color themeDarkTooltip
+    }
+
+    .ArticleNavigator
+      border-color lighten(themeDarkBorder, 10%)
+      background-color themeDarkSidebar
+
+      .userInfo
+        border-color themeDarkBorder
+
+        .userName
+          color themeDarkText
+
+      .ArticleNavigator-folders
+        border-color lighten(themeDarkBorder, 10%)
+        background-color themeDarkSidebar
+
+        .ArticleNavigator-folders-header
+          border-color themeDarkBorder
+
+          .title
+            color themeDarkText
+
+        .folderList,
+        .folderList>button
+          color themeDarkText
+
+        .folderList>button
+          transition 0.1s
+
+          &:hover
+            background-color lighten(themeDarkSidebar, 10%)
+
+          &.active,
+          $:active
+            background-color darken(brandColor, 15%)
+
+      .userInfo .settingBtn,
+      .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn
+        transition 0.1s
+        color themeDarkText
+        border none
+        background-color lighten(themeDarkBackground, 10%)
+
+      .userInfo .settingBtn:hover,
+      .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn:hover
+        background-color themeDarkTopicColor
+
+      .userInfo .settingBtn:focus,
+      .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn:focus
+        background-color darken(themeDarkTopicColor, 20%)
+
+    .ArticleTopBar
+      color themeDarkText
+      background-color themeDarkBackground
+
+      .ArticleTopBar-left
+        .ArticleTopBar-left-search input
+          color themeDarkText
+          background-color lighten(themeDarkBackground, 10%)
+
+        .ArticleTopBar-left-control button.ArticleTopBar-left-control-new-post-button
+          color themeDarkText
+          background-color lighten(themeDarkBackground, 10%)
+
+          &:hover
+            color themeDarkText
+            background-color themeDarkTopicColor
+
+          &:focus
+            color themeDarkText
+            background-color darken(themeDarkTopicColor, 20%)
+
+      .ArticleTopBar-right
+        &>button
+          color themeDarkText
+          border none
+          background-color lighten(themeDarkBackground, 10%)
+
+          &:hover
+            color themeDarkText
+            background-color themeDarkTopicColor
+
+          &:focus
+            color themeDarkText
+            background-color darken(themeDarkTopicColor, 20%)
+
+    .ArticleList
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkList
+
+      .ArticleList-item
+        color themeDarkText
+        background-color themeDarkList
+
+        &:hover
+          background-color lighten(themeDarkList, 5%)
+
+        .ArticleList-item-top
+          .folderName
+            color darken(themeDarkText, 15%)
+
+      .divider
+        border-color themeDarkBorder
+
+    .ArticleDetail
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkBackground
+
+      .ArticleDetail-info
+        .ArticleDetail-info-folder
+          color themeDarkText
+          background-color lighten(themeDarkBackground, 10%)
+
+        .ArticleDetail-info-row2 .TagSelect .TagSelect-tags
+          border-color themeDarkBorder
+          background-color themeDarkBackground
+
+          input
+            color themeDarkText
+
+        .ArticleDetail-info-control
+          &>button,
+          & .ShareButton-open-button
+            transition 0.1s
+            color themeDarkText
+            border none
+            background-color lighten(themeDarkBackground, 10%)
+
+          &>button:hover,
+          & .ShareButton-open-button:hover
+            background-color themeDarkTopicColor
+
+          &>button:focus,
+          & .ShareButton-open-button:focus
+            background-color darken(themeDarkTopicColor, 20%)
+
+          & .ShareButton-dropdown
+            color themeDarkText
+            box-shadow 0px 0px 10px 1px themeDarkBoxShadow;
+            border 1px solid themeDarkBorder;
+            background-color themeDarkBackground
+
+          & .ShareButton-dropdown>button
+            color themeDarkText
+
+            &:hover
+              background-color darken(themeDarkTopicColor, 20%)
+
+      .ArticleDetail-panel
+        border-color themeDarkBackground
+
+        .ArticleDetail-panel-header,
+        .ArticleDetail-panel-header .ArticleDetail-panel-header-title input
+          color themeDarkText
+          border-color themeDarkBorder
+          background-color themeDarkPreview
+
+        .ArticleEditor
+          .CodeEditor
+            border-color themeDarkBorder
+            border-radius 0
+
+        &>.ArticleDetail-panel-header .ArticleDetail-panel-header-mode
+          transition 0.1s
+          color themeDarkText
+          background-color lighten(themeDarkBackground, 10%)
+
+          input
+            color themeDarkText
+
+          &.idle
+            border-color themeDarkBorder
+            background-color themeDarkPreview
+
+          &.idle:hover
+            background-color themeDarkTopicColor
+
+          &.edit .ModeSelect-options
+            color themeDarkText
+            border-color themeDarkBackground
+            background-color themeDarkBackground
+
+            .ModeSelect-options-item
+              &:hover
+                color lighten(themeDarkText, 100%)
+                background-color darken(themeDarkTopicColor, 20%)
+
+  .ModalBase
+    .modal
+      color themeDarkText
+      background-color themeDarkModal
+      box-shadow 0px 0px 10px 1px themeDarkBoxShadow;
+
+      input
+        color themeDarkText
+        border-color lighten(themeDarkBackground, 10%)
+        background-color lighten(themeDarkBackground, 10%)
+
+        &:hover
+          border-color themeDarkBorder
+
+        &:focus
+          border-color themeDarkTopicColor
+
+      button
+        &:hover
+          background-color lighten(themeDarkBackground, 10%)
+
+    .CreateNewFolder.modal
+      .closeBtn
+        transition 0.1s
+        border-radius 24px
+        color themeDarkText
+
+        &:hover
+          background-color darken(#BF360C, 10%)
+
+      .confirmBtn
+        background-color darken(brandColor, 10%)
+
+        &:hover
+          background-color brandColor
+
+    .DeleteArticleModal.modal
+      .control
+        button
+          transition 0.1s
+          color themeDarkText
+          border-color lighten(themeDarkModalButtonDefault, 20%)
+          background-color themeDarkModalButtonDefault
+
+          &:hover
+            background-color: lighten(themeDarkModalButtonDefault, 10%)
+
+          &:focus
+            border-color themeDarkTopicColor
+
+          &.danger
+            background-color themeDarkModalButtonDanger
+            border-color lighten(themeDarkModalButtonDanger, 30%)
+
+            &:hover
+              background-color: lighten(themeDarkModalButtonDanger, 10%)
+
+            &:focus
+              border-color lighten(themeDarkModalButtonDanger, 50%)
+
+    .Preferences.modal
+      .sectionInput input,
+      .sectionSelect select
+      .sectionMultiSelect .sectionMultiSelect-input select
+        color themeDarkText
+        border-color lighten(themeDarkBackground, 10%)
+        background-color lighten(themeDarkBackground, 10%)
+
+        &:hover
+          border-color themeDarkBorder
+
+        &:focus
+          border-color themeDarkTopicColor
+
+      .header
+        border-color themeDarkBorder
+        background-color darken(themeDarkModal, 40%)
+
+      .nav
+        border-color themeDarkBorder
+        background-color darken(themeDarkModal, 20%)
+
+        &>button
+          &:hover
+            color themeDarkFocusText
+            background-color lighten(themeDarkModal, 10%)
+
+          &.active,
+          &:active
+            background-color darken(brandColor, 15%)
+
+      .section
+        border-color themeDarkBorder
+
+      &>.content
+        &.AppSettingTab
+          .description
+            code
+              color themeDarkText
+              border-color darken(themeDarkBorder, 10%)
+              background-color lighten(themeDarkPreview, 5%)
+
+        &.FolderSettingTab
+          .folderTable
+            &>div
+              border-color themeDarkBorder
+
+              &:last-child
+                border-color transparent
+
+            &>div.FolderRow
+              .sortBtns button
+                transition 0.1s
+                color themeDarkText
+
+                &:hover
+                  color themeDarkFocusButton
+
+              .folderColor
+                &>button,
+                .options
+                  color themeDarkText
+                  border-color themeDarkBorder
+
+                &>button
+                  border-color lighten(themeDarkBackground, 10%)
+                  background-color lighten(themeDarkBackground, 10%)
+
+                  &:hover
+                    border-color themeDarkBorder
+
+                  &:focus
+                    border-color themeDarkTopicColor
+
+                .options
+                  background-color themeDarkBackground
+
+            &>div.FolderRow .folderName input,
+            &>div.newFolder .folderName input
+                color themeDarkText
+                border-color lighten(themeDarkBackground, 10%)
+                background-color lighten(themeDarkBackground, 10%)
+
+                &:hover
+                  border-color themeDarkBorder
+
+                &:focus
+                  border-color themeDarkTopicColor
+
+            .folderControl
+              button
+                transition 0.1s
+                color themeDarkText
+
+                &:hover
+                  color themeDarkFocusButton
+
+  .Finder
+    .FinderInput
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkBackground
+
+      input
+        color themeDarkText
+        border-color lighten(themeDarkBackground, 10%)
+        background-color lighten(themeDarkBackground, 10%)
+
+        &:focus
+          border-color themeDarkTopicColor
+
+    .FinderList
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkList
+
+      .divider
+        border-color themeDarkBorder
+
+    .FinderDetail
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkPreview
+      box-shadow 0px 0px 10px 0 darken(themeDarkBorder, 20%);
+
+      .header
+        border-color themeDarkBorder
+
+        .right
+          .clipboardBtn
+            transition 0.1s
+
+            &:hover
+              color themeDarkFocusButton
+
+            .tooltip
+              background-color themeDarkTooltip
+
+  .ArticleDetail-panel
+    border-radius 0
+
+  // Markdown Preview
+  .Finder .FinderDetail .content,
+  .ArticleDetail .ArticleDetail-panel .ArticleEditor
+    .MarkdownPreview
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkPreview
+
+      a:hover
+        background-color alpha(lighten(brandColor, 30%), 0.2) !important
+
+      code
+        border-color darken(themeDarkBorder, 10%)
+        background-color lighten(themeDarkPreview, 5%)
+
+      pre
+        code
+          background-color transparent
+
+      table
+        thead
+          tr
+            background-color themeDarkTableHead
+          th
+            border-color themeDarkTableBorder
+            &:last-child
+              border-right solid 1px themeDarkTableBorder
+        tbody
+          tr:nth-child(2n + 1)
+            background-color themeDarkTableOdd
+          tr:nth-child(2n)
+            background-color themeDarkTableEven
+          td
+            border-color themeDarkTableBorder
+            &:last-child
+              border-right solid 1px themeDarkTableBorder

browser/styles/vars.styl

@@ -0,0 +1,47 @@
+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

build.config.js

@@ -1,44 +0,0 @@
-module.exports = {
-  vendors: [
-    {
-      name: 'ace',
-      src: 'node_modules/@rokt33r/ace-builds/src/**/*'
-    },
-    {
-      name: 'angular',
-      src: 'node_modules/angular/angular.js'
-    },
-    {
-      name: 'angular-bootstrap',
-      src: 'node_modules/angular-bootstrap/dist/ui-bootstrap-tpls.js'
-    },
-    {
-      name: 'angular-sanitize',
-      src: 'node_modules/angular-sanitize/angular-sanitize.js'
-    },
-    {
-      name: 'angular-ui-router',
-      src: 'node_modules/angular-ui-router/build/angular-ui-router.js'
-    },
-    {
-      name: 'ui-select',
-      src: 'node_modules/ui-select/dist/select.js'
-    },
-    {
-      name: 'satellizer',
-      src: 'node_modules/satellizer/satellizer.js'
-    },
-    {
-      name: 'angular-md5',
-      src: 'node_modules/angular-md5/angular-md5.js'
-    },
-    {
-      name: 'moment',
-      src: 'node_modules/moment/moment.js'
-    },
-    {
-      name: 'angular-hotkeys',
-      src: 'node_modules/angular-hotkeys/build/hotkeys.js'
-    }
-  ]
-}

contributing.md

@@ -0,0 +1,35 @@
+# Contributing to Boostnote
+
+> English below.
+
+## About Pull Request
+
+### やり方
+
+現状特に`dev`ブランチを用意しないつもりなので、最新VersionのブランチにPullrequestを送ってください。
+
+### Pull requsetの著作権
+
+Pull requestをすることはその変化分のコードの著作権をMAISIN&CO.に譲渡することに同意することになります。
+
+アプリケーションのLicenseのをいつでも変える選択肢を残したいからです。
+しかし、これはいずれかBoostnoteが有料の商用アプリになる可能性がある話ではありません。
+もし、このアプリケーションで金を稼ごうとするならBoostnote専用のCloud storageの提供やMobile appとの連動、何か特殊なプレミアム機能の提供など形になると思います。
+現在考えられているのは、GPL v3の場合、他のライセンスとの互換が不可能であるため、もしより自由なLicense(BSD, MIT)に変える時に改めて著作権者としてライセンスし直す選択肢を残したいぐらいのイメージです。
+
+---
+
+# Contributing to Boostnote(ENG)
+
+## About Pull Request
+
+### How to
+
+Make a new PR to the branch named latest version. This is because there is no `dev` branch currently.
+
+### Copyright of Pull Request
+
+If you make a pull request, It means you agree to transfer the copyright of the code changes to MAISIN&CO.
+
+It doesn't mean Boostnote will become a paid app. If we want to earn some money, We will try other way, which is some kind of cloud storage, Mobile app integration or some SPECIAL features.
+Because GPL v3 is too strict to be compatible with any other License, We thought this is needed to replace the license with much freer one(like BSD, MIT) somewhen.

docs/events.md

@@ -1,7 +0,0 @@
-# Event List
-
-|name|Description|Delivery|
-|----|----|----|
-|userSignIn|a user signed in||
-|userSignOut|a user signed out||
-|snippetUpdated|snippet has been updated or created|snippet|

electron_src/popup/index.html

@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html ng-app="codexen.popup">
-  <head>
-    <title>
-      CodeXen App
-    </title>
-
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
-    <meta name="description" content="CodeXen - Short code storage service">
-
-    <link rel="stylesheet" href="../../vendor/css/font-awesome.css" media="screen" title="no title" charset="utf-8">
-    <link rel="stylesheet" href="../../main.css" media="screen" title="no title" charset="utf-8">
-  </head>
-  <body class="popup-body" ng-controller="PopUpController">
-
-    <div class="search-block">
-      <input ng-change="filterList(searchNeedle)" search-input id="search-input" type="text" class="form-control" ng-model="searchNeedle" ng-change="refreshResult">
-    </div>
-
-    <div class="result-block row-fluid">
-      <ul id="result-list" class="result-list left-pane">
-        <li ng-click="selectSnippet($index)" ng-repeat="snippet in filteredSnippets" ng-class="{active:$index == selectIndex}"><a href="#"> <span ng-bind="snippet.callSign"></span> <small ng-bind="snippet.description"></small></a></li>
-      </ul>
-
-      <div class="right-pane">
-        <div class="result-detail-control">
-          <button ng-click="writeCode(selectedItem.content)" id="btnClipboard" type="button" name="button" class="btn btn-default"><i class="fa fa-clipboard"></i></button>
-          <!-- <button ng-click="editSnippet(selectedItem.id)" id="btnEdit" type="button" name="button" class="btn btn-default"><i class="fa fa-edit"></i></button> -->
-          <!-- <button id="btnShare" type="button" name="button" class="btn btn-default"><i class="fa fa-share"></i></button> -->
-        </div>
-        <div id="aceView" class="result-detail-content"
-          ui-ace="{
-            showGutter: false,
-            useWrapMode: true,
-            mode:selectedItem.mode.toLowerCase(),
-            onLoad: aceLoaded,
-            theme: 'solarized_dark'
-          }"
-
-          readonly
-          ng-model="selectedItem.content"
-        ></div>
-      </div>
-    </div>
-    <script src="../../vendor/ace.js"></script>
-    <script src="../../vendor/angular.js" charset="utf-8"></script>
-    <script src="../../directives/ui-ace.js"></script>
-    <script src="../../vendor/satellizer.js"></script>
-    <script src="../../vendor/hotkeys.js" charset="utf-8"></script>
-    <script src="popup.js" charset="utf-8"></script>
-    <script src="services/snippet.js" charset="utf-8"></script>
-  </body>
-</html>

electron_src/popup/popup.js

@@ -1,190 +0,0 @@
-/* global angular */
-
-var remote = require('remote')
-var ipc = require('ipc')
-
-var resultList = document.getElementById('result-list')
-
-angular.module('codexen.popup', [
-  'ui.ace',
-  'satellizer',
-  'cfp.hotkeys'
-])
-.controller('PopUpController', function ($scope, Snippet, $auth, $window, hotkeys, $document, $filter) {
-  // Setup Events
-  remote.getCurrentWindow().on('focus', function () {
-    if (!$auth.isAuthenticated()) return hidePopUp()
-    $scope.$apply(focusSearchInput)
-    loadSnippets()
-  })
-
-  hotkeys.bindTo($scope)
-    .add('down', function (e) {
-      nextSnippet()
-      e.preventDefault()
-    })
-    .add('up', function (e) {
-      priorSnippet()
-      e.preventDefault()
-    })
-    .add('right', function (e) {
-      e.preventDefault()
-    })
-    .add('left', function (e) {
-      e.preventDefault()
-    })
-    .add('esc', function (e) {
-      hidePopUp()
-    })
-    .add('shift+tab', function (e) {
-      e.preventDefault()
-    })
-    .add('tab', function (e) {
-      e.preventDefault()
-    })
-    .add('enter', function (e) {
-      writeCode($scope.selectedItem.content)
-      e.preventDefault()
-    })
-
-  $scope.aceLoaded = function (editor) {
-    editor.commands.addCommand({
-      name: 'escape',
-      bindKey: {win: 'esc', mac: 'esc'},
-      exec: function (editor) {
-        editor.blur()
-        $scope.$apply()
-      },
-      readOnly: true
-    })
-  }
-
-  $scope.$on('nextSnippetRequested', function (e) {
-    e.stopPropagation()
-    nextSnippet()
-  })
-
-  $scope.$on('priorSnippetRequested', function (e) {
-    e.stopPropagation()
-    priorSnippet()
-  })
-
-  $scope.$on('snippetSubmitted', function (e) {
-    if ($scope.filteredSnippets.length > 0) ipc.send('writeCode', $scope.selectedItem.content)
-    else console.log('\x07')
-    e.stopPropagation()
-  })
-
-  // Init Data
-  $scope.snippets = []
-
-  Snippet.findMine()
-    .success(function (data) {
-      $scope.snippets = data
-      filterList()
-    })
-
-  // Result Item control
-  $scope.selectIndex = 0
-
-  $scope.selectSnippet = selectSnippet
-  $scope.filterList = filterList
-  $scope.writeCode = writeCode
-  $scope.focusSearchInput = focusSearchInput
-
-  // Search Filter
-  function loadSnippets () {
-    Snippet.findMine()
-      .success(function (data) {
-        $scope.snippets = data
-        filterList()
-      })
-  }
-
-  function filterList (needle) {
-    $scope.filteredSnippets = $filter('filter')($scope.snippets, needle)
-    firstSnippet()
-  }
-
-  function selectSnippet (index) {
-    if (index !== undefined) $scope.selectIndex = index
-    $scope.selectedItem = $scope.filteredSnippets[$scope.selectIndex]
-  }
-
-  function firstSnippet () {
-    $scope.selectIndex = 0
-    selectSnippet($scope.selectIndex)
-  }
-
-  function priorSnippet () {
-    if ($scope.selectIndex > 0) $scope.selectIndex -= 1
-
-    if (resultList.children[$scope.selectIndex].offsetTop < resultList.scrollTop) {
-      resultList.scrollTop -= 33
-    }
-
-    selectSnippet()
-  }
-
-  function nextSnippet () {
-    if ($scope.selectIndex < $scope.filteredSnippets.length - 1) {
-      $scope.selectIndex += 1
-    }
-
-    if (resultList.clientHeight - 33 < resultList.children[$scope.selectIndex].offsetTop - resultList.scrollTop) {
-      resultList.scrollTop += 33
-    }
-
-    selectSnippet()
-  }
-
-  function writeCode (code) {
-    ipc.send('writeCode', code)
-  }
-
-  // Focusing Search Input
-  function focusSearchInput () {
-    document.getElementById('search-input').focus()
-  }
-
-  function hidePopUp () {
-    ipc.send('hidePopUp')
-  }
-
-})
-.directive('searchInput', function () {
-  return {
-    restrict: 'A',
-    link: function (scope, el, attr) {
-      el.on('keydown', function (e) {
-        // Down key => Focus on Result list
-        if (e.keyCode === 40) {
-          scope.$emit('nextSnippetRequested')
-          // e.preventDefault()
-        }
-
-        // Up key => Focus on Result list
-        if (e.keyCode === 38) {
-          scope.$emit('priorSnippetRequested')
-          // e.preventDefault()
-        }
-
-        // Up key => Focus on Result list
-        if (e.keyCode === 13) {
-          scope.$emit('snippetSubmitted')
-        }
-
-        // Esc key => Dismiss popup
-        if (e.keyCode === 27) {
-          ipc.send('hidePopUp')
-          e.preventDefault()
-        }
-
-        // TODO: Tab key => Auto complete
-        if (e.keyCode === 9) {
-          e.preventDefault()
-        }
-      })
-    }
-  }
-})

electron_src/popup/services/snippet.js

@@ -1,62 +0,0 @@
-/* global angular */
-angular.module('codexen.popup')
-  .constant('apiUrl', 'http://codexen-server-dev.elasticbeanstalk.com/')
-  .config(function ($authProvider, $httpProvider, apiUrl) {
-    $authProvider.baseUrl = apiUrl
-
-    $httpProvider.defaults.useXDomain = true
-    delete $httpProvider.defaults.headers.common['X-Requested-With']
-  })
-
-
-angular.module('codexen.popup')
-  .factory('Snippet', function ($http, $auth, apiUrl) {
-    var findByUser = function (user) {
-      var url = apiUrl + 'snippets/search'
-
-      return $http.get(url, {
-        params: {
-          user: user
-        }
-      })
-    }
-
-    var findMine = function (params) {
-      var url = apiUrl + 'snippets/my'
-
-      return $http.get(url, {params: params})
-    }
-
-    var create = function (params) {
-      var url = apiUrl + 'snippets/create'
-
-      return $http.post(url, params)
-    }
-
-    var show = function (id, params) {
-      var url = apiUrl + 'snippets/id/' + id
-
-      return $http.get(url, {params: params})
-    }
-
-    var update = function (id, params) {
-      var url = apiUrl + 'snippets/id/' + id
-
-      return $http.put(url, params)
-    }
-
-    var destroy = function (id) {
-      var url = apiUrl + 'snippets/id/' + id
-
-      return $http.delete(url)
-    }
-
-    return {
-      findByUser: findByUser,
-      findMine: findMine,
-      create: create,
-      show: show,
-      delete: destroy,
-      update: update
-    }
-  })

electron_src/styles/_popup.styl

@@ -1,59 +0,0 @@
-.popup-body
-  .search-block
-    padding: 5px
-    height:44px
-    position:absolute
-    top: 0
-    width: 100%
-
-  .result-block
-    position:absolute
-    top: 44px
-    bottom: 0
-    width: 100%
-    overflow: hidden
-    .left-pane
-      margin: 0
-      position: absolute
-      left: 0
-      top: 0
-      bottom: 0
-      width: 40%
-      overflow-y: auto
-      overflow-x: hidden
-    .result-list
-      list-style:none
-      padding: 0
-      border-right: 1px solid $baseBorderColor
-      li
-        &:nth-child(even)
-          background-color $baseBackgroundColor
-        &:nth-child(odd)
-          background-color lighten($baseBackgroundColor, 2%)
-        &.active
-          color: $textColorSelected
-          background-color: $btnPrimary
-        a
-          display:block
-          padding: 5px 10px
-          border-bottom 1px solid $baseBorderColor
-
-    .right-pane
-      position: absolute
-      left: 40%
-      top: 0
-      bottom: 0
-      width: 60%
-      overflow-y: auto
-      overflow-x: hidden
-    .result-detail-control
-      position: absolute
-      top: 0
-      width: 100%
-      height: 34px
-
-    .result-detail-content
-      position: absolute
-      top: 34px
-      bottom: 0
-      width: 100%