v0.11.2

Use same settings of github

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": ["react", "es2015"],
+  "env": {
+    "development": {
+      "presets": ["react-hmre"]
+    },
+    "test": {
+      "presets": ["react", "es2015"],
+      "plugins": [
+        [ "babel-plugin-webpack-alias", { "config": "${PWD}/webpack.config.js" } ]
+      ]
+    }
+  }
+}

.boostnoterc.sample

@@ -0,0 +1,32 @@
+{
+    "amaEnabled": true,
+    "editor": {
+        "fontFamily": "Monaco, Consolas",
+        "fontSize": "14",
+        "indentSize": "2",
+        "indentType": "space",
+        "keyMap": "vim",
+        "switchPreview": "BLUR",
+        "theme": "monokai"
+    },
+    "hotkey": {
+        "toggleMain": "Cmd + Alt + L"
+    },
+    "isSideNavFolded": false,
+    "listStyle": "DEFAULT",
+    "listWidth": 174,
+    "navWidth": 200,
+    "preview": {
+        "codeBlockTheme": "dracula",
+        "fontFamily": "Lato",
+        "fontSize": "14",
+        "lineNumber": true
+    },
+    "sortBy": "UPDATED_AT",
+    "ui": {
+        "defaultNote": "ALWAYS_ASK",
+        "disableDirectWrite": false,
+        "theme": "default"
+    },
+    "zoom": 1
+}

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+compiled/
+dist/

.eslintrc

@@ -0,0 +1,21 @@
+{
+  "extends": ["standard", "standard-jsx", "plugin:react/recommended"],
+  "plugins": ["react"],
+  "rules": {
+    "no-useless-escape": 0,
+    "prefer-const": "warn",
+    "no-unused-vars": "warn",
+    "no-undef": "warn",
+    "no-lone-blocks": "warn",
+    "react/prop-types": 0,
+    "react/no-string-refs": 0,
+    "react/no-find-dom-node": "warn",
+    "react/no-render-return-value": "warn",
+    "react/no-deprecated": "warn"
+  },
+  "globals": {
+    "FileReader": true,
+    "localStorage": true,
+    "fetch": true
+  }
+}

.gitignore

@@ -1,3 +1,12 @@
-/build
-/node_modules
-/electron_build
+.DS_Store
+.env
+Desktop.ini
+Thumbs.db
+node_modules/*
+!node_modules/boost
+/dist
+/compiled
+/secret
+*.log
+.idea
+.vscode

.travis.yml

@@ -0,0 +1,19 @@
+language: node_js
+node_js:
+  - 6
+script:
+  - npm run lint && npm run test
+  - 'if [[ ${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH} = "master" ]]; then npm install -g grunt npm@5.2 && grunt pre-build; fi'
+after_success:
+  - openssl aes-256-cbc -K $encrypted_440d7f9a3c38_key -iv $encrypted_440d7f9a3c38_iv
+    -in .snapcraft/travis_snapcraft.cfg -out .snapcraft/snapcraft.cfg -d
+sudo: required
+services:
+  - docker
+deploy:
+  'on':
+    branch: master
+  provider: script
+  script: if [ ${TRAVIS_NODE_VERSION} = "stable" ];then docker run -v $(pwd):$(pwd) -t snapcore/snapcraft sh -c "apt update -qq
+    && cd $(pwd) && snapcraft && snapcraft push *.snap --release edge"; fi
+  skip_cleanup: true

Backers.md

@@ -0,0 +1,72 @@
+<h1 align="center">Sponsors &amp; Backers</h1>
+
+Boostnote is an open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these awesome backers. If you'd like to join them, please consider:
+
+- [Become a backer or sponsor on Open Collective.](https://opencollective.com/boostnoteio)
+
+---
+
+## Backers via OpenCollective
+
+### [Gold Sponsors / $1,000 per month](https://opencollective.com/boostnoteio/order/2259)
+- Get your logo on our Readme.md on GitHub and the frontpage of https://boostnote.io/.
+
+### [Silver Sponsors / $250 per month](https://opencollective.com/boostnoteio/order/2257)
+- Get your logo on our Readme.md on GitHub and the frontpage of https://boostnote.io/.
+
+### [Bronze Sponsors / $50 per month](https://opencollective.com/boostnoteio/order/2258)
+- Get your name and Url (or E-mail) on Readme.md on GitHub.
+
+### [Backers3 / $10 per month](https://opencollective.com/boostnoteio/order/2176)
+- [Ralph03](https://opencollective.com/ralph03)
+
+- [Nikolas Dan](https://opencollective.com/nikolas-dan)
+
+### [Backers2 / $5 per month](https://opencollective.com/boostnoteio/order/2175)
+- [Yeojong Kim](https://twitter.com/yeojoy)
+
+- [Scotia Draven](https://opencollective.com/scotia-draven)
+
+- [A. J. Vargas](https://opencollective.com/aj-vargas)
+
+### [Backers1](https://opencollective.com/boostnoteio/order/2563) and One-time sponsors
+- Ryosuke Tamura - $30
+
+- tatoosh11 - $10
+
+- Alexander Borovkov - $10
+
+- spoonhoop - $5
+
+- Drew Williams - $2
+
+- Andy Shaw - $2
+
+- mysafesky -$2
+
+---
+
+## Backers via Bountysource
+https://salt.bountysource.com/teams/boostnote
+
+- Kuzz - $65
+
+- Intense Raiden - $45
+
+- ravy22 - $25
+
+- trentpolack	- $20
+
+- hikariru - $10
+
+- kolchan11 - $10
+
+- RonWalker22 - $10
+
+- hocchuc	- $5
+
+- Adam - $5
+
+- Steve	- $5
+
+- evmin	- $5

Gulpfile.js

@@ -1,122 +0,0 @@
-var gulp = require('gulp')
-var sass = require('gulp-sass')
-var autoprefixer = require('gulp-autoprefixer')
-var templateCache = require('gulp-angular-templatecache')
-var globby = require('globby')
-var template = require('gulp-template')
-var concat = require('gulp-concat')
-var del = require('del')
-var runSequence = require('run-sequence')
-var merge = require('merge-stream')
-
-var changed = require('gulp-changed')
-var cached = require('gulp-cached')
-var remember = require('gulp-remember')
-var livereload = require('gulp-livereload')
-var childProcess = require('child_process')
-
-// 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 config = require('./build.config.js')
-
-gulp.task('js', function(){
-  return gulp.src(['src/**/*.js'])
-    .pipe(changed('build'))
-    .pipe(gulp.dest('build'))
-})
-
-gulp.task('sass', function () {
-  return gulp.src('src/**/*.scss')
-    .pipe(cached('styles'))
-    .pipe(sass().on('error', sass.logError))
-    .pipe(autoprefixer())
-    .pipe(remember('styles'))
-    .pipe(concat('all.css'))
-    .pipe(gulp.dest('build'))
-    .pipe(livereload())
-})
-
-gulp.task('tpls', function(){
-  return gulp.src('src/**/*.tpl.html')
-    .pipe(templateCache())
-    .pipe(gulp.dest('build'))
-})
-
-gulp.task('index', function () {
-  var files = globby.sync(['build/**/*', '!build/vendor/**/*', '!build/electron/**/*'])
-
-  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
-  })
-
-  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', 'sass', 'tpls', 'vendor', 'resources'], 'index', cb)
-})
-
-gulp.task('watch', function (cb) {
-  gulp.watch(['src/**/*.js'], ['js'])
-
-  gulp.watch('src/**/*.scss', ['sass'])
-
-  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) {
-  var spawn = childProcess.spawn('http-server', ['build'])
-  spawn.stdout.on('data', function (data) {
-    console.log('OUT: ' + data)
-  })
-  spawn.stderr.on('data', function (data) {
-    console.log('ERR: ' + data)
-  })
-
-  runSequence('del', 'build', 'watch', cb)
-})
-
-require('./gulp-electron')(gulp)

ISSUE_TEMPLATE.md

@@ -0,0 +1,10 @@
+<!--
+Please paste some **screenshots** with the **developer tool** open (console tab) when you report a bug.
+
+If your issue is regarding boostnote mobile, move to https://github.com/BoostIO/boostnote-mobile.
+-->
+
+<!--
+Love Boostnote? Please consider supporting us via OpenCollective:
+👉  https://opencollective.com/boostnoteio
+-->

LICENSE

@@ -0,0 +1,18 @@
+GPL-3.0
+
+Boostnote - an open source note-taking app made for programmers just like you.
+
+Copyright (C) 2017 - 2018 BoostIO
+
+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,412 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import _ from 'lodash'
+import CodeMirror from 'codemirror'
+import 'codemirror-mode-elixir'
+import path from 'path'
+import copyImage from 'browser/main/lib/dataApi/copyImage'
+import { findStorage } from 'browser/lib/findStorage'
+import fs from 'fs'
+import eventEmitter from 'browser/main/lib/eventEmitter'
+import iconv from 'iconv-lite'
+const { ipcRenderer } = require('electron')
+
+CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
+
+const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
+
+function pass (name) {
+  switch (name) {
+    case 'ejs':
+      return 'Embedded Javascript'
+    case 'html_ruby':
+      return 'Embedded Ruby'
+    case 'objectivec':
+      return 'Objective C'
+    case 'text':
+      return 'Plain Text'
+    default:
+      return name
+  }
+}
+
+export default class CodeEditor extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.scrollHandler = _.debounce(this.handleScroll.bind(this), 100, {leading: false, trailing: true})
+    this.changeHandler = (e) => this.handleChange(e)
+    this.focusHandler = () => {
+      ipcRenderer.send('editor:focused', true)
+    }
+    this.blurHandler = (editor, e) => {
+      ipcRenderer.send('editor:focused', false)
+      if (e == null) return null
+      let el = e.relatedTarget
+      while (el != null) {
+        if (el === this.refs.root) {
+          return
+        }
+        el = el.parentNode
+      }
+      this.props.onBlur != null && this.props.onBlur(e)
+    }
+    this.pasteHandler = (editor, e) => this.handlePaste(editor, e)
+    this.loadStyleHandler = (e) => {
+      this.editor.refresh()
+    }
+    this.searchHandler = (e, msg) => this.handleSearch(msg)
+    this.searchState = null
+  }
+
+  handleSearch (msg) {
+    const cm = this.editor
+    const component = this
+
+    if (component.searchState) cm.removeOverlay(component.searchState)
+    if (msg.length < 3) return
+
+    cm.operation(function () {
+      component.searchState = makeOverlay(msg, 'searching')
+      cm.addOverlay(component.searchState)
+
+      function makeOverlay (query, style) {
+        query = new RegExp(query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'), 'gi')
+        return {
+          token: function (stream) {
+            query.lastIndex = stream.pos
+            var match = query.exec(stream.string)
+            if (match && match.index === stream.pos) {
+              stream.pos += match[0].length || 1
+              return style
+            } else if (match) {
+              stream.pos = match.index
+            } else {
+              stream.skipToEnd()
+            }
+          }
+        }
+      }
+    })
+  }
+
+  componentDidMount () {
+    this.value = this.props.value
+
+    this.editor = CodeMirror(this.refs.root, {
+      value: this.props.value,
+      lineNumbers: this.props.displayLineNumbers,
+      lineWrapping: true,
+      theme: this.props.theme,
+      indentUnit: this.props.indentSize,
+      tabSize: this.props.indentSize,
+      indentWithTabs: this.props.indentType !== 'space',
+      keyMap: this.props.keyMap,
+      scrollPastEnd: this.props.scrollPastEnd,
+      inputStyle: 'textarea',
+      dragDrop: false,
+      autoCloseBrackets: true,
+      extraKeys: {
+        Tab: function (cm) {
+          const cursor = cm.getCursor()
+          const line = cm.getLine(cursor.line)
+          if (cm.somethingSelected()) cm.indentSelection('add')
+          else {
+            const tabs = cm.getOption('indentWithTabs')
+            if (line.trimLeft().match(/^(-|\*|\+) (\[( |x)] )?$/)) {
+              cm.execCommand('goLineStart')
+              if (tabs) {
+                cm.execCommand('insertTab')
+              } else {
+                cm.execCommand('insertSoftTab')
+              }
+              cm.execCommand('goLineEnd')
+            } else {
+              if (tabs) {
+                cm.execCommand('insertTab')
+              } else {
+                cm.execCommand('insertSoftTab')
+              }
+            }
+          }
+        },
+        'Cmd-T': function (cm) {
+          // Do nothing
+        },
+        Enter: 'boostNewLineAndIndentContinueMarkdownList',
+        'Ctrl-C': (cm) => {
+          if (cm.getOption('keyMap').substr(0, 3) === 'vim') {
+            document.execCommand('copy')
+          }
+          return CodeMirror.Pass
+        }
+      }
+    })
+
+    this.setMode(this.props.mode)
+
+    this.editor.on('focus', this.focusHandler)
+    this.editor.on('blur', this.blurHandler)
+    this.editor.on('change', this.changeHandler)
+    this.editor.on('paste', this.pasteHandler)
+    eventEmitter.on('top:search', this.searchHandler)
+
+    eventEmitter.emit('code:init')
+    this.editor.on('scroll', this.scrollHandler)
+
+    const editorTheme = document.getElementById('editorTheme')
+    editorTheme.addEventListener('load', this.loadStyleHandler)
+
+    CodeMirror.Vim.defineEx('quit', 'q', this.quitEditor)
+    CodeMirror.Vim.defineEx('q!', 'q!', this.quitEditor)
+    CodeMirror.Vim.defineEx('wq', 'wq', this.quitEditor)
+    CodeMirror.Vim.defineEx('qw', 'qw', this.quitEditor)
+    CodeMirror.Vim.map('ZZ', ':q', 'normal')
+  }
+
+  quitEditor () {
+    document.querySelector('textarea').blur()
+  }
+
+  componentWillUnmount () {
+    this.editor.off('focus', this.focusHandler)
+    this.editor.off('blur', this.blurHandler)
+    this.editor.off('change', this.changeHandler)
+    this.editor.off('paste', this.pasteHandler)
+    eventEmitter.off('top:search', this.searchHandler)
+    this.editor.off('scroll', this.scrollHandler)
+    const editorTheme = document.getElementById('editorTheme')
+    editorTheme.removeEventListener('load', this.loadStyleHandler)
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    let needRefresh = false
+    if (prevProps.mode !== this.props.mode) {
+      this.setMode(this.props.mode)
+    }
+    if (prevProps.theme !== this.props.theme) {
+      this.editor.setOption('theme', this.props.theme)
+      // editor should be refreshed after css loaded
+    }
+    if (prevProps.fontSize !== this.props.fontSize) {
+      needRefresh = true
+    }
+    if (prevProps.fontFamily !== this.props.fontFamily) {
+      needRefresh = true
+    }
+    if (prevProps.keyMap !== this.props.keyMap) {
+      needRefresh = true
+    }
+
+    if (prevProps.indentSize !== this.props.indentSize) {
+      this.editor.setOption('indentUnit', this.props.indentSize)
+      this.editor.setOption('tabSize', this.props.indentSize)
+    }
+    if (prevProps.indentType !== this.props.indentType) {
+      this.editor.setOption('indentWithTabs', this.props.indentType !== 'space')
+    }
+
+    if (prevProps.displayLineNumbers !== this.props.displayLineNumbers) {
+      this.editor.setOption('lineNumbers', this.props.displayLineNumbers)
+    }
+
+    if (prevProps.scrollPastEnd !== this.props.scrollPastEnd) {
+      this.editor.setOption('scrollPastEnd', this.props.scrollPastEnd)
+    }
+
+    if (needRefresh) {
+      this.editor.refresh()
+    }
+  }
+
+  setMode (mode) {
+    let syntax = CodeMirror.findModeByName(pass(mode))
+    if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
+
+    this.editor.setOption('mode', syntax.mime)
+    CodeMirror.autoLoadMode(this.editor, syntax.mode)
+  }
+
+  handleChange (e) {
+    this.value = this.editor.getValue()
+    if (this.props.onChange) {
+      this.props.onChange(e)
+    }
+  }
+
+  moveCursorTo (row, col) {
+  }
+
+  scrollToLine (num) {
+  }
+
+  focus () {
+    this.editor.focus()
+  }
+
+  blur () {
+    this.editor.blur()
+  }
+
+  reload () {
+    // Change event shouldn't be fired when switch note
+    this.editor.off('change', this.changeHandler)
+    this.value = this.props.value
+    this.editor.setValue(this.props.value)
+    this.editor.clearHistory()
+    this.editor.on('change', this.changeHandler)
+    this.editor.refresh()
+  }
+
+  setValue (value) {
+    const cursor = this.editor.getCursor()
+    this.editor.setValue(value)
+    this.editor.setCursor(cursor)
+  }
+
+  handleDropImage (e) {
+    e.preventDefault()
+    const imagePath = e.dataTransfer.files[0].path
+    const filename = path.basename(imagePath)
+
+    copyImage(imagePath, this.props.storageKey).then((imagePath) => {
+      const imageMd = `![${filename}](${path.join('/:storage', imagePath)})`
+      this.insertImageMd(imageMd)
+    })
+  }
+
+  insertImageMd (imageMd) {
+    this.editor.replaceSelection(imageMd)
+  }
+
+  handlePaste (editor, e) {
+    const clipboardData = e.clipboardData
+    const dataTransferItem = clipboardData.items[0]
+    const pastedTxt = clipboardData.getData('text')
+    const isURL = (str) => {
+      const matcher = /^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/
+      return matcher.test(str)
+    }
+    if (dataTransferItem.type.match('image')) {
+      const blob = dataTransferItem.getAsFile()
+      const reader = new FileReader()
+      let base64data
+
+      reader.readAsDataURL(blob)
+      reader.onloadend = () => {
+        base64data = reader.result.replace(/^data:image\/png;base64,/, '')
+        base64data += base64data.replace('+', ' ')
+        const binaryData = new Buffer(base64data, 'base64').toString('binary')
+        const imageName = Math.random().toString(36).slice(-16)
+        const storagePath = findStorage(this.props.storageKey).path
+        const imageDir = path.join(storagePath, 'images')
+        if (!fs.existsSync(imageDir)) fs.mkdirSync(imageDir)
+        const imagePath = path.join(imageDir, `${imageName}.png`)
+        fs.writeFile(imagePath, binaryData, 'binary')
+        const imageMd = `![${imageName}](${path.join('/:storage', `${imageName}.png`)})`
+        this.insertImageMd(imageMd)
+      }
+    } else if (this.props.fetchUrlTitle && isURL(pastedTxt)) {
+      this.handlePasteUrl(e, editor, pastedTxt)
+    }
+  }
+
+  handleScroll (e) {
+    if (this.props.onScroll) {
+      this.props.onScroll(e)
+    }
+  }
+
+  handlePasteUrl (e, editor, pastedTxt) {
+    e.preventDefault()
+    const taggedUrl = `<${pastedTxt}>`
+    editor.replaceSelection(taggedUrl)
+
+    fetch(pastedTxt, {
+      method: 'get'
+    }).then((response) => {
+      return this.decodeResponse(response)
+    }).then((response) => {
+      const parsedResponse = (new window.DOMParser()).parseFromString(response, 'text/html')
+      const value = editor.getValue()
+      const cursor = editor.getCursor()
+      const LinkWithTitle = `[${parsedResponse.title}](${pastedTxt})`
+      const newValue = value.replace(taggedUrl, LinkWithTitle)
+      editor.setValue(newValue)
+      editor.setCursor(cursor)
+    }).catch((e) => {
+      const value = editor.getValue()
+      const newValue = value.replace(taggedUrl, pastedTxt)
+      const cursor = editor.getCursor()
+      editor.setValue(newValue)
+      editor.setCursor(cursor)
+    })
+  }
+
+  decodeResponse (response) {
+    const headers = response.headers
+    const _charset = headers.has('content-type')
+      ? this.extractContentTypeCharset(headers.get('content-type'))
+      : undefined
+    return response.arrayBuffer().then((buff) => {
+      return new Promise((resolve, reject) => {
+        try {
+          const charset = _charset !== undefined && iconv.encodingExists(_charset) ? _charset : 'utf-8'
+          resolve(iconv.decode(new Buffer(buff), charset).toString())
+        } catch (e) {
+          reject(e)
+        }
+      })
+    })
+  }
+
+  extractContentTypeCharset (contentType) {
+    return contentType.split(';').filter((str) => {
+      return str.trim().toLowerCase().startsWith('charset')
+    }).map((str) => {
+      return str.replace(/['"]/g, '').split('=')[1]
+    })[0]
+  }
+
+  render () {
+    const { className, fontSize } = this.props
+    let fontFamily = this.props.fontFamily
+    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(', '),
+          fontSize: fontSize
+        }}
+        onDrop={(e) => this.handleDropImage(e)}
+      />
+    )
+  }
+}
+
+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',
+  keyMap: 'sublime',
+  fontSize: 14,
+  fontFamily: 'Monaco, Consolas',
+  indentSize: 4,
+  indentType: 'space'
+}

browser/components/MarkdownEditor.js

@@ -0,0 +1,306 @@
+import PropTypes from 'prop-types'
+import React 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'
+import eventEmitter from 'browser/main/lib/eventEmitter'
+import {findStorage} from 'browser/lib/findStorage'
+
+class MarkdownEditor extends React.Component {
+  constructor (props) {
+    super(props)
+
+    // char codes for ctrl + w
+    this.escapeFromEditor = [17, 87]
+
+    // ctrl + shift + ;
+    this.supportMdSelectionBold = [16, 17, 186]
+
+    this.state = {
+      status: 'PREVIEW',
+      renderValue: props.value,
+      keyPressed: new Set(),
+      isLocked: false
+    }
+
+    this.lockEditorCode = () => this.handleLockEditor()
+  }
+
+  componentDidMount () {
+    this.value = this.refs.code.value
+    eventEmitter.on('editor:lock', this.lockEditorCode)
+  }
+
+  componentDidUpdate () {
+    this.value = this.refs.code.value
+  }
+
+  componentWillReceiveProps (props) {
+    if (props.value !== this.props.value) {
+      this.queueRendering(props.value)
+    }
+  }
+
+  componentWillUnmount () {
+    this.cancelQueue()
+    eventEmitter.off('editor:lock', this.lockEditorCode)
+  }
+
+  queueRendering (value) {
+    clearTimeout(this.renderTimer)
+    this.renderTimer = setTimeout(() => {
+      this.renderPreview(value)
+    }, 500)
+  }
+
+  cancelQueue () {
+    clearTimeout(this.renderTimer)
+  }
+
+  renderPreview (value) {
+    this.setState({
+      renderValue: value
+    })
+  }
+
+  handleChange (e) {
+    this.value = this.refs.code.value
+    this.props.onChange(e)
+  }
+
+  handleContextMenu (e) {
+    const { config } = this.props
+    if (config.editor.switchPreview === 'RIGHTCLICK') {
+      const newStatus = this.state.status === 'PREVIEW'
+        ? 'CODE'
+        : 'PREVIEW'
+      this.setState({
+        status: newStatus
+      }, () => {
+        if (newStatus === 'CODE') {
+          this.refs.code.focus()
+        } else {
+          this.refs.preview.focus()
+        }
+        eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+      })
+    }
+  }
+
+  handleBlur (e) {
+    if (this.state.isLocked) return
+    this.setState({ keyPressed: new Set() })
+    const { config } = this.props
+    if (config.editor.switchPreview === 'BLUR' ||
+        (config.editor.switchPreview === 'DBL_CLICK' && this.state.status === 'CODE')
+    ) {
+      const cursorPosition = this.refs.code.editor.getCursor()
+      this.setState({
+        status: 'PREVIEW'
+      }, () => {
+        this.refs.preview.focus()
+        this.refs.preview.scrollTo(cursorPosition.line)
+      })
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+    }
+  }
+
+  handleDoubleClick (e) {
+    if (this.state.isLocked) return
+    this.setState({keyPressed: new Set()})
+    const { config } = this.props
+    if (config.editor.switchPreview === 'DBL_CLICK') {
+      this.setState({
+        status: 'CODE'
+      }, () => {
+        this.refs.code.focus()
+        eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+      })
+    }
+  }
+
+  handlePreviewMouseDown (e) {
+    this.previewMouseDownedAt = new Date()
+  }
+
+  handlePreviewMouseUp (e) {
+    const { config } = this.props
+    if (config.editor.switchPreview === 'BLUR' && new Date() - this.previewMouseDownedAt < 200) {
+      this.setState({
+        status: 'CODE'
+      }, () => {
+        this.refs.code.focus()
+      })
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+    }
+  }
+
+  handleCheckboxClick (e) {
+    e.preventDefault()
+    e.stopPropagation()
+    const idMatch = /checkbox-([0-9]+)/
+    const checkedMatch = /\[x\]/i
+    const uncheckedMatch = /\[ \]/
+    if (idMatch.test(e.target.getAttribute('id'))) {
+      const lineIndex = parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
+      const lines = this.refs.code.value
+        .split('\n')
+
+      const targetLine = lines[lineIndex]
+
+      if (targetLine.match(checkedMatch)) {
+        lines[lineIndex] = targetLine.replace(checkedMatch, '[ ]')
+      }
+      if (targetLine.match(uncheckedMatch)) {
+        lines[lineIndex] = targetLine.replace(uncheckedMatch, '[x]')
+      }
+      this.refs.code.setValue(lines.join('\n'))
+    }
+  }
+
+  focus () {
+    if (this.state.status === 'PREVIEW') {
+      this.setState({
+        status: 'CODE'
+      }, () => {
+        this.refs.code.focus()
+      })
+    } else {
+      this.refs.code.focus()
+    }
+    eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+  }
+
+  reload () {
+    this.refs.code.reload()
+    this.cancelQueue()
+    this.renderPreview(this.props.value)
+  }
+
+  handleKeyDown (e) {
+    const { config } = this.props
+    if (this.state.status !== 'CODE') return false
+    const keyPressed = this.state.keyPressed
+    keyPressed.add(e.keyCode)
+    this.setState({ keyPressed })
+    const isNoteHandlerKey = (el) => { return keyPressed.has(el) }
+    // These conditions are for ctrl-e and ctrl-w
+    if (keyPressed.size === this.escapeFromEditor.length &&
+        !this.state.isLocked && this.state.status === 'CODE' &&
+        this.escapeFromEditor.every(isNoteHandlerKey)) {
+      this.handleContextMenu()
+      if (config.editor.switchPreview === 'BLUR') document.activeElement.blur()
+    }
+    if (keyPressed.size === this.supportMdSelectionBold.length && this.supportMdSelectionBold.every(isNoteHandlerKey)) {
+      this.addMdAroundWord('**')
+    }
+  }
+
+  addMdAroundWord (mdElement) {
+    if (this.refs.code.editor.getSelection()) {
+      return this.addMdAroundSelection(mdElement)
+    }
+    const currentCaret = this.refs.code.editor.getCursor()
+    const word = this.refs.code.editor.findWordAt(currentCaret)
+    const cmDoc = this.refs.code.editor.getDoc()
+    cmDoc.replaceRange(mdElement, word.anchor)
+    cmDoc.replaceRange(mdElement, { line: word.head.line, ch: word.head.ch + mdElement.length })
+  }
+
+  addMdAroundSelection (mdElement) {
+    this.refs.code.editor.replaceSelection(`${mdElement}${this.refs.code.editor.getSelection()}${mdElement}`)
+  }
+
+  handleKeyUp (e) {
+    const keyPressed = this.state.keyPressed
+    keyPressed.delete(e.keyCode)
+    this.setState({ keyPressed })
+  }
+
+  handleLockEditor () {
+    this.setState({ isLocked: !this.state.isLocked })
+  }
+
+  render () {
+    const { className, value, config, storageKey } = 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
+
+    const previewStyle = {}
+    if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
+
+    const storage = findStorage(storageKey)
+
+    return (
+      <div className={className == null
+          ? 'MarkdownEditor'
+          : `MarkdownEditor ${className}`
+        }
+        onContextMenu={(e) => this.handleContextMenu(e)}
+        tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+        onKeyUp={(e) => this.handleKeyUp(e)}
+      >
+        <CodeEditor styleName={this.state.status === 'CODE'
+            ? 'codeEditor'
+            : 'codeEditor--hide'
+          }
+          ref='code'
+          mode='GitHub Flavored Markdown'
+          value={value}
+          theme={config.editor.theme}
+          keyMap={config.editor.keyMap}
+          fontFamily={config.editor.fontFamily}
+          fontSize={editorFontSize}
+          indentType={config.editor.indentType}
+          indentSize={editorIndentSize}
+          displayLineNumbers={config.editor.displayLineNumbers}
+          scrollPastEnd={config.editor.scrollPastEnd}
+          storageKey={storageKey}
+          fetchUrlTitle={config.editor.fetchUrlTitle}
+          onChange={(e) => this.handleChange(e)}
+          onBlur={(e) => this.handleBlur(e)}
+        />
+        <MarkdownPreview styleName={this.state.status === 'PREVIEW'
+            ? 'preview'
+            : 'preview--hide'
+          }
+          style={previewStyle}
+          theme={config.ui.theme}
+          keyMap={config.editor.keyMap}
+          fontSize={config.preview.fontSize}
+          fontFamily={config.preview.fontFamily}
+          codeBlockTheme={config.preview.codeBlockTheme}
+          codeBlockFontFamily={config.editor.fontFamily}
+          lineNumber={config.preview.lineNumber}
+          indentSize={editorIndentSize}
+          scrollPastEnd={config.preview.scrollPastEnd}
+          smartQuotes={config.preview.smartQuotes}
+          ref='preview'
+          onContextMenu={(e) => this.handleContextMenu(e)}
+          onDoubleClick={(e) => this.handleDoubleClick(e)}
+          tabIndex='0'
+          value={this.state.renderValue}
+          onMouseUp={(e) => this.handlePreviewMouseUp(e)}
+          onMouseDown={(e) => this.handlePreviewMouseDown(e)}
+          onCheckboxClick={(e) => this.handleCheckboxClick(e)}
+          showCopyNotification={config.ui.showCopyNotification}
+          storagePath={storage.path}
+        />
+      </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,27 @@
+.root
+  position relative
+
+.codeEditor
+  absolute top bottom left right
+
+.hide
+  z-index 0
+  opacity 0
+  pointer-events none
+
+.codeEditor--hide
+  @extend .codeEditor
+  @extend .hide
+
+.preview
+  display block
+  absolute top bottom left right
+  z-index 100
+  background-color white
+  height 100%
+  width 100%
+
+.preview--hide
+  @extend .preview
+  @extend .hide
+

browser/components/MarkdownPreview.js

@@ -0,0 +1,562 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import Markdown from 'browser/lib/markdown'
+import _ from 'lodash'
+import CodeMirror from 'codemirror'
+import 'codemirror-mode-elixir'
+import consts from 'browser/lib/consts'
+import Raphael from 'raphael'
+import flowchart from 'flowchart'
+import SequenceDiagram from 'js-sequence-diagrams'
+import eventEmitter from 'browser/main/lib/eventEmitter'
+import htmlTextHelper from 'browser/lib/htmlTextHelper'
+import copy from 'copy-to-clipboard'
+import mdurl from 'mdurl'
+import exportNote from 'browser/main/lib/dataApi/exportNote'
+
+const { remote } = require('electron')
+const { app } = remote
+const path = require('path')
+const dialog = remote.dialog
+
+const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
+const appPath = 'file://' + (process.env.NODE_ENV === 'production'
+  ? app.getAppPath()
+  : path.resolve())
+const CSS_FILES = [
+  `${appPath}/node_modules/katex/dist/katex.min.css`,
+  `${appPath}/node_modules/codemirror/lib/codemirror.css`
+]
+
+function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd) {
+  return `
+@font-face {
+  font-family: 'Lato';
+  src: url('${appPath}/resources/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Regular.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+@font-face {
+  font-family: 'Lato';
+  src: url('${appPath}/resources/fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Black.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
+${markdownStyle}
+body {
+  font-family: '${fontFamily.join("','")}';
+  font-size: ${fontSize}px;
+  ${scrollPastEnd && 'padding-bottom: 90vh;'}
+}
+code {
+  font-family: '${codeBlockFontFamily.join("','")}';
+  background-color: rgba(0,0,0,0.04);
+}
+.lineNumber {
+  ${lineNumber && 'display: block !important;'}
+  font-family: '${codeBlockFontFamily.join("','")}';
+}
+
+.clipboardButton {
+  color: rgba(147,147,149,0.8);;
+  fill: rgba(147,147,149,1);;
+  border-radius: 50%;
+  margin: 0px 10px;
+  border: none;
+  background-color: transparent;
+  outline: none;
+  height: 15px;
+  width: 15px;
+  cursor: pointer;
+}
+
+.clipboardButton:hover {
+  transition: 0.2s;
+  color: #939395;
+  fill: #939395;
+  background-color: rgba(0,0,0,0.1);
+}
+
+h1, h2 {
+  border: none;
+}
+
+h1 {
+  padding-bottom: 4px;
+  margin: 1em 0 8px;
+}
+
+h2 {
+  padding-bottom: 0.2em;
+  margin: 1em 0 0.37em;
+}
+
+body p {
+  white-space: normal;
+}
+`
+}
+
+const { shell } = require('electron')
+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)
+    this.DoubleClickHandler = (e) => this.handleDoubleClick(e)
+    this.scrollHandler = _.debounce(this.handleScroll.bind(this), 100, {leading: false, trailing: true})
+    this.anchorClickHandler = (e) => this.handlePreviewAnchorClick(e)
+    this.checkboxClickHandler = (e) => this.handleCheckboxClick(e)
+    this.saveAsTextHandler = () => this.handleSaveAsText()
+    this.saveAsMdHandler = () => this.handleSaveAsMd()
+    this.saveAsHtmlHandler = () => this.handleSaveAsHtml()
+    this.printHandler = () => this.handlePrint()
+
+    this.linkClickHandler = this.handlelinkClick.bind(this)
+    this.initMarkdown = this.initMarkdown.bind(this)
+    this.initMarkdown()
+  }
+
+  initMarkdown () {
+    const { smartQuotes } = this.props
+    this.markdown = new Markdown({ typographer: smartQuotes })
+  }
+
+  handlePreviewAnchorClick (e) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    const anchor = e.target.closest('a')
+    const href = anchor.getAttribute('href')
+    if (_.isString(href) && href.match(/^#/)) {
+      const targetElement = this.refs.root.contentWindow.document.getElementById(href.substring(1, href.length))
+      if (targetElement != null) {
+        this.getWindow().scrollTo(0, targetElement.offsetTop)
+      }
+    } else {
+      shell.openExternal(href)
+    }
+  }
+
+  handleCheckboxClick (e) {
+    this.props.onCheckboxClick(e)
+  }
+
+  handleScroll (e) {
+    if (this.props.onScroll) {
+      this.props.onScroll(e)
+    }
+  }
+
+  handleContextMenu (e) {
+    this.props.onContextMenu(e)
+  }
+
+  handleDoubleClick (e) {
+    if (this.props.onDoubleClick != null) this.props.onDoubleClick(e)
+  }
+
+  handleMouseDown (e) {
+    if (e.target != null) {
+      switch (e.target.tagName) {
+        case 'A':
+        case 'INPUT':
+          return null
+      }
+    }
+    if (this.props.onMouseDown != null) this.props.onMouseDown(e)
+  }
+
+  handleMouseUp (e) {
+    if (!this.props.onMouseUp) return
+    if (e.target != null && e.target.tagName === 'A') {
+      return null
+    }
+    if (this.props.onMouseUp != null) this.props.onMouseUp(e)
+  }
+
+  handleSaveAsText () {
+    this.exportAsDocument('txt')
+  }
+
+  handleSaveAsMd () {
+    this.exportAsDocument('md')
+  }
+
+  handleSaveAsHtml () {
+    this.exportAsDocument('html', (noteContent, exportTasks) => {
+      const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme} = this.getStyleParams()
+
+      const inlineStyles = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, lineNumber)
+      const body = this.markdown.render(noteContent)
+      const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
+
+      files.forEach((file) => {
+        file = file.replace('file://', '')
+        exportTasks.push({
+          src: file,
+          dst: 'css'
+        })
+      })
+
+      let styles = ''
+      files.forEach((file) => {
+        styles += `<link rel="stylesheet" href="css/${path.basename(file)}">`
+      })
+
+      return `<html>
+                 <head>
+                   <meta charset="UTF-8">
+                   <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1">
+                   <style id="style">${inlineStyles}</style>
+                   ${styles}
+                 </head>
+                 <body>${body}</body>
+              </html>`
+    })
+  }
+
+  handlePrint () {
+    this.refs.root.contentWindow.print()
+  }
+
+  exportAsDocument (fileType, contentFormatter) {
+    const options = {
+      filters: [
+        {name: 'Documents', extensions: [fileType]}
+      ],
+      properties: ['openFile', 'createDirectory']
+    }
+
+    dialog.showSaveDialog(remote.getCurrentWindow(), options,
+        (filename) => {
+          if (filename) {
+            const content = this.props.value
+            const storage = this.props.storagePath
+
+            exportNote(storage, content, filename, contentFormatter)
+                .then((res) => {
+                  dialog.showMessageBox(remote.getCurrentWindow(), {type: 'info', message: `Exported to ${filename}`})
+                }).catch((err) => {
+                  dialog.showErrorBox('Export error', err ? err.message || err : 'Unexpected error during export')
+                  throw err
+                })
+          }
+        })
+  }
+
+  fixDecodedURI (node) {
+    if (node && node.children.length === 1 && typeof node.children[0] === 'string') {
+      const { innerText, href } = node
+
+      node.innerText = mdurl.decode(href) === innerText
+        ? href
+        : innerText
+    }
+  }
+
+  componentDidMount () {
+    this.refs.root.setAttribute('sandbox', 'allow-scripts')
+    this.refs.root.contentWindow.document.body.addEventListener('contextmenu', this.contextMenuHandler)
+
+    let styles = `
+      <style id='style'></style>
+      <link rel="stylesheet" id="codeTheme">
+      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    `
+
+    CSS_FILES.forEach((file) => {
+      styles += `<link rel="stylesheet" href="${file}">`
+    })
+
+    this.refs.root.contentWindow.document.head.innerHTML = styles
+    this.rewriteIframe()
+    this.applyStyle()
+
+    this.refs.root.contentWindow.document.addEventListener('mousedown', this.mouseDownHandler)
+    this.refs.root.contentWindow.document.addEventListener('mouseup', this.mouseUpHandler)
+    this.refs.root.contentWindow.document.addEventListener('dblclick', this.DoubleClickHandler)
+    this.refs.root.contentWindow.document.addEventListener('drop', this.preventImageDroppedHandler)
+    this.refs.root.contentWindow.document.addEventListener('dragover', this.preventImageDroppedHandler)
+    this.refs.root.contentWindow.document.addEventListener('scroll', this.scrollHandler)
+    eventEmitter.on('export:save-text', this.saveAsTextHandler)
+    eventEmitter.on('export:save-md', this.saveAsMdHandler)
+    eventEmitter.on('export:save-html', this.saveAsHtmlHandler)
+    eventEmitter.on('print', this.printHandler)
+  }
+
+  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)
+    this.refs.root.contentWindow.document.removeEventListener('dblclick', this.DoubleClickHandler)
+    this.refs.root.contentWindow.document.removeEventListener('drop', this.preventImageDroppedHandler)
+    this.refs.root.contentWindow.document.removeEventListener('dragover', this.preventImageDroppedHandler)
+    this.refs.root.contentWindow.document.removeEventListener('scroll', this.scrollHandler)
+    eventEmitter.off('export:save-text', this.saveAsTextHandler)
+    eventEmitter.off('export:save-md', this.saveAsMdHandler)
+    eventEmitter.off('export:save-html', this.saveAsHtmlHandler)
+    eventEmitter.off('print', this.printHandler)
+  }
+
+  componentDidUpdate (prevProps) {
+    if (prevProps.value !== this.props.value) this.rewriteIframe()
+    if (prevProps.smartQuotes !== this.props.smartQuotes) {
+      this.initMarkdown()
+      this.rewriteIframe()
+    }
+    if (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 ||
+      prevProps.showCopyNotification !== this.props.showCopyNotification ||
+      prevProps.theme !== this.props.theme ||
+      prevProps.scrollPastEnd !== this.props.scrollPastEnd) {
+      this.applyStyle()
+      this.rewriteIframe()
+    }
+  }
+
+  getStyleParams () {
+    const { fontSize, lineNumber, codeBlockTheme, scrollPastEnd } = this.props
+    let { fontFamily, codeBlockFontFamily } = this.props
+    fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
+        ? fontFamily.split(',').map(fontName => fontName.trim()).concat(defaultFontFamily)
+        : defaultFontFamily
+    codeBlockFontFamily = _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
+        ? codeBlockFontFamily.split(',').map(fontName => fontName.trim()).concat(defaultCodeBlockFontFamily)
+        : defaultCodeBlockFontFamily
+
+    return {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd}
+  }
+
+  applyStyle () {
+    const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd} = this.getStyleParams()
+
+    this.getWindow().document.getElementById('codeTheme').href = this.GetCodeThemeLink(codeBlockTheme)
+    this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd)
+  }
+
+  GetCodeThemeLink (theme) {
+    theme = consts.THEMES.some((_theme) => _theme === theme) && theme !== 'default'
+      ? theme
+      : 'elegant'
+    return theme.startsWith('solarized')
+      ? `${appPath}/node_modules/codemirror/theme/solarized.css`
+      : `${appPath}/node_modules/codemirror/theme/${theme}.css`
+  }
+
+  rewriteIframe () {
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.removeEventListener('click', this.anchorClickHandler)
+    })
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
+      el.removeEventListener('click', this.checkboxClickHandler)
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.removeEventListener('click', this.linkClickHandler)
+    })
+
+    const { theme, indentSize, showCopyNotification, storagePath } = this.props
+    let { value, codeBlockTheme } = this.props
+
+    this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
+
+    const codeBlocks = value.match(/(```)(.|[\n])*?(```)/g)
+    if (codeBlocks !== null) {
+      codeBlocks.forEach((codeBlock) => {
+        value = value.replace(codeBlock, htmlTextHelper.encodeEntities(codeBlock))
+      })
+    }
+    this.refs.root.contentWindow.document.body.innerHTML = this.markdown.render(value)
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      this.fixDecodedURI(el)
+      el.addEventListener('click', this.anchorClickHandler)
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
+      el.addEventListener('click', this.checkboxClickHandler)
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.addEventListener('click', this.linkClickHandler)
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('img'), (el) => {
+      el.src = this.markdown.normalizeLinkText(el.src)
+      if (!/\/:storage/.test(el.src)) return
+      el.src = `file:///${this.markdown.normalizeLinkText(path.join(storagePath, 'images', path.basename(el.src)))}`
+    })
+
+    codeBlockTheme = consts.THEMES.some((_theme) => _theme === codeBlockTheme)
+      ? codeBlockTheme
+      : 'default'
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.code code'), (el) => {
+      let syntax = CodeMirror.findModeByName(el.className)
+      if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
+      CodeMirror.requireMode(syntax.mode, () => {
+        const content = htmlTextHelper.decodeEntities(el.innerHTML)
+        const copyIcon = document.createElement('i')
+        copyIcon.innerHTML = '<button class="clipboardButton"><svg width="13" height="13" viewBox="0 0 1792 1792" ><path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z"/></svg></button>'
+        copyIcon.onclick = (e) => {
+          copy(content)
+          if (showCopyNotification) {
+            this.notify('Saved to Clipboard!', {
+              body: 'Paste it wherever you want!',
+              silent: true
+            })
+          }
+        }
+        el.parentNode.appendChild(copyIcon)
+        el.innerHTML = ''
+        if (codeBlockTheme.indexOf('solarized') === 0) {
+          const [refThema, color] = codeBlockTheme.split(' ')
+          el.parentNode.className += ` cm-s-${refThema} cm-s-${color}`
+        } else {
+          el.parentNode.className += ` cm-s-${codeBlockTheme}`
+        }
+        CodeMirror.runMode(content, syntax.mime, el, {
+          tabSize: indentSize
+        })
+      })
+    })
+    const opts = {}
+    // if (this.props.theme === 'dark') {
+    //   opts['font-color'] = '#DDD'
+    //   opts['line-color'] = '#DDD'
+    //   opts['element-color'] = '#DDD'
+    //   opts['fill'] = '#3A404C'
+    // }
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.flowchart'), (el) => {
+      Raphael.setWindow(this.getWindow())
+      try {
+        const diagram = flowchart.parse(htmlTextHelper.decodeEntities(el.innerHTML))
+        el.innerHTML = ''
+        diagram.drawSVG(el, opts)
+        _.forEach(el.querySelectorAll('a'), (el) => {
+          el.addEventListener('click', this.anchorClickHandler)
+        })
+      } catch (e) {
+        console.error(e)
+        el.className = 'flowchart-error'
+        el.innerHTML = 'Flowchart parse error: ' + e.message
+      }
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.sequence'), (el) => {
+      Raphael.setWindow(this.getWindow())
+      try {
+        const diagram = SequenceDiagram.parse(htmlTextHelper.decodeEntities(el.innerHTML))
+        el.innerHTML = ''
+        diagram.drawSVG(el, {theme: 'simple'})
+        _.forEach(el.querySelectorAll('a'), (el) => {
+          el.addEventListener('click', this.anchorClickHandler)
+        })
+      } catch (e) {
+        console.error(e)
+        el.className = 'sequence-error'
+        el.innerHTML = 'Sequence diagram parse error: ' + e.message
+      }
+    })
+  }
+
+  focus () {
+    this.refs.root.focus()
+  }
+
+  getWindow () {
+    return this.refs.root.contentWindow
+  }
+
+  scrollTo (targetRow) {
+    const blocks = this.getWindow().document.querySelectorAll('body>[data-line]')
+
+    for (let index = 0; index < blocks.length; index++) {
+      let block = blocks[index]
+      const row = parseInt(block.getAttribute('data-line'))
+      if (row > targetRow || index === blocks.length - 1) {
+        block = blocks[index - 1]
+        block != null && this.getWindow().scrollTo(0, block.offsetTop)
+        break
+      }
+    }
+  }
+
+  preventImageDroppedHandler (e) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  notify (title, options) {
+    if (global.process.platform === 'win32') {
+      options.icon = path.join('file://', global.__dirname, '../../resources/app.png')
+    }
+    return new window.Notification(title, options)
+  }
+
+  handlelinkClick (e) {
+    const noteHash = e.target.href.split('/').pop()
+    // this will match the new uuid v4 hash and the old hash
+    // e.g.
+    // :note:1c211eb7dcb463de6490 and
+    // :note:7dd23275-f2b4-49cb-9e93-3454daf1af9c
+    const regexIsNoteLink = /^:note:([a-zA-Z0-9-]{20,36})$/
+    if (regexIsNoteLink.test(noteHash)) {
+      eventEmitter.emit('list:jump', noteHash.replace(':note:', ''))
+    }
+    // this will match the old link format storage.key-note.key
+    // e.g.
+    // 877f99c3268608328037-1c211eb7dcb463de6490
+    const regexIsLegacyNoteLink = /^(.{20})-(.{20})$/
+    if (regexIsLegacyNoteLink.test(noteHash)) {
+      eventEmitter.emit('list:jump', noteHash.split('-')[1])
+    }
+  }
+
+  render () {
+    const { 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,
+  className: PropTypes.string,
+  value: PropTypes.string,
+  showCopyNotification: PropTypes.bool,
+  storagePath: PropTypes.string,
+  smartQuotes: PropTypes.bool
+}

browser/components/MarkdownSplitEditor.js

@@ -0,0 +1,144 @@
+import React from 'react'
+import CodeEditor from 'browser/components/CodeEditor'
+import MarkdownPreview from 'browser/components/MarkdownPreview'
+import { findStorage } from 'browser/lib/findStorage'
+import _ from 'lodash'
+
+import styles from './MarkdownSplitEditor.styl'
+import CSSModules from 'browser/lib/CSSModules'
+
+class MarkdownSplitEditor extends React.Component {
+  constructor (props) {
+    super(props)
+    this.value = props.value
+    this.focus = () => this.refs.code.focus()
+    this.reload = () => this.refs.code.reload()
+    this.userScroll = true
+  }
+
+  handleOnChange () {
+    this.value = this.refs.code.value
+    this.props.onChange()
+  }
+
+  handleScroll (e) {
+    const previewDoc = _.get(this, 'refs.preview.refs.root.contentWindow.document')
+    const codeDoc = _.get(this, 'refs.code.editor.doc')
+    let srcTop, srcHeight, targetTop, targetHeight
+
+    if (this.userScroll) {
+      if (e.doc) {
+        srcTop = _.get(e, 'doc.scrollTop')
+        srcHeight = _.get(e, 'doc.height')
+        targetTop = _.get(previewDoc, 'body.scrollTop')
+        targetHeight = _.get(previewDoc, 'body.scrollHeight')
+      } else {
+        srcTop = _.get(previewDoc, 'body.scrollTop')
+        srcHeight = _.get(previewDoc, 'body.scrollHeight')
+        targetTop = _.get(codeDoc, 'scrollTop')
+        targetHeight = _.get(codeDoc, 'height')
+      }
+
+      const distance = (targetHeight * srcTop / srcHeight) - targetTop
+      const framerate = 1000 / 60
+      const frames = 20
+      const refractory = frames * framerate
+
+      this.userScroll = false
+
+      let frame = 0
+      let scrollPos, time
+      const timer = setInterval(() => {
+        time = frame / frames
+        scrollPos = time < 0.5
+                  ? 2 * time * time // ease in
+                  : -1 + (4 - 2 * time) * time // ease out
+        if (e.doc) _.set(previewDoc, 'body.scrollTop', targetTop + scrollPos * distance)
+        else _.get(this, 'refs.code.editor').scrollTo(0, targetTop + scrollPos * distance)
+        if (frame >= frames) {
+          clearInterval(timer)
+          setTimeout(() => { this.userScroll = true }, refractory)
+        }
+        frame++
+      }, framerate)
+    }
+  }
+
+  handleCheckboxClick (e) {
+    e.preventDefault()
+    e.stopPropagation()
+    const idMatch = /checkbox-([0-9]+)/
+    const checkedMatch = /\[x\]/i
+    const uncheckedMatch = /\[ \]/
+    if (idMatch.test(e.target.getAttribute('id'))) {
+      const lineIndex = parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
+      const lines = this.refs.code.value
+        .split('\n')
+
+      const targetLine = lines[lineIndex]
+
+      if (targetLine.match(checkedMatch)) {
+        lines[lineIndex] = targetLine.replace(checkedMatch, '[ ]')
+      }
+      if (targetLine.match(uncheckedMatch)) {
+        lines[lineIndex] = targetLine.replace(uncheckedMatch, '[x]')
+      }
+      this.refs.code.setValue(lines.join('\n'))
+    }
+  }
+
+  render () {
+    const { config, value, storageKey } = this.props
+    const storage = findStorage(storageKey)
+    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
+    const previewStyle = {}
+    if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
+    return (
+      <div styleName='root'>
+        <CodeEditor
+          styleName='codeEditor'
+          ref='code'
+          mode='GitHub Flavored Markdown'
+          value={value}
+          theme={config.editor.theme}
+          keyMap={config.editor.keyMap}
+          fontFamily={config.editor.fontFamily}
+          fontSize={editorFontSize}
+          displayLineNumbers={config.editor.displayLineNumbers}
+          indentType={config.editor.indentType}
+          indentSize={editorIndentSize}
+          scrollPastEnd={config.editor.scrollPastEnd}
+          fetchUrlTitle={config.editor.fetchUrlTitle}
+          storageKey={storageKey}
+          onChange={this.handleOnChange.bind(this)}
+          onScroll={this.handleScroll.bind(this)}
+       />
+        <MarkdownPreview
+          style={previewStyle}
+          styleName='preview'
+          theme={config.ui.theme}
+          keyMap={config.editor.keyMap}
+          fontSize={config.preview.fontSize}
+          fontFamily={config.preview.fontFamily}
+          codeBlockTheme={config.preview.codeBlockTheme}
+          codeBlockFontFamily={config.editor.fontFamily}
+          lineNumber={config.preview.lineNumber}
+          scrollPastEnd={config.preview.scrollPastEnd}
+          smartQuotes={config.preview.smartQuotes}
+          ref='preview'
+          tabInde='0'
+          value={value}
+          onCheckboxClick={(e) => this.handleCheckboxClick(e)}
+          onScroll={this.handleScroll.bind(this)}
+          showCopyNotification={config.ui.showCopyNotification}
+          storagePath={storage.path}
+       />
+      </div>
+    )
+  }
+}
+
+export default CSSModules(MarkdownSplitEditor, styles)

browser/components/MarkdownSplitEditor.styl

@@ -0,0 +1,9 @@
+.root
+  width 100%
+  height 100%
+  font-size 30px
+  display flex
+  .codeEditor
+    width 50%
+  .preview
+    width 50%

browser/components/ModalEscButton.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ModalEscButton.styl'
+
+const ModalEscButton = ({
+  handleEscButtonClick
+}) => (
+  <button styleName='escButton' onClick={handleEscButtonClick}>
+    <div styleName='esc-mark'>×</div>
+    <div styleName='esc-text'>esc</div>
+  </button>
+)
+
+ModalEscButton.propTypes = {
+  handleEscButtonClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(ModalEscButton, styles)

browser/components/ModalEscButton.styl

@@ -0,0 +1,16 @@
+.escButton
+  height 50px
+  position absolute
+  background-color transparent
+  color $ui-inactive-text-color
+  border none
+  top 1px
+  right 10px
+  text-align center
+  width top-bar--height
+  height top-bar-height
+
+.esc-mark
+  font-size 28px
+  margin-top -5px
+  margin-bottom -7px

browser/components/NavToggleButton.js

@@ -0,0 +1,30 @@
+/**
+* @fileoverview Micro component for toggle SideNav
+*/
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './NavToggleButton.styl'
+import CSSModules from 'browser/lib/CSSModules'
+
+/**
+* @param {boolean} isFolded
+* @param {Function} handleToggleButtonClick
+*/
+
+const NavToggleButton = ({isFolded, handleToggleButtonClick}) => (
+  <button styleName='navToggle'
+    onClick={(e) => handleToggleButtonClick(e)}
+  >
+    {isFolded
+     ? <i className='fa fa-angle-double-right' />
+     : <i className='fa fa-angle-double-left' />
+    }
+  </button>
+)
+
+NavToggleButton.propTypes = {
+  isFolded: PropTypes.bool.isRequired,
+  handleToggleButtonClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(NavToggleButton, styles)

browser/components/NavToggleButton.styl

@@ -0,0 +1,26 @@
+.navToggle
+  navButtonColor()
+  display block
+  position absolute
+  left 5px
+  bottom 5px
+  border-radius 16.5px
+  height 34px
+  width 34px
+  line-height 32px
+  padding 0
+  &:hover
+    border: 1px solid #1EC38B;
+    background-color: alpha(#1EC38B, 30%)
+    border-radius: 50%;
+
+body[data-theme="white"]
+  navWhiteButtonColor()
+
+body[data-theme="dark"]
+  .navToggle
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      transition 0.15s
+      color $ui-dark-text-color
+

browser/components/NoteItem.js

@@ -0,0 +1,138 @@
+/**
+ * @fileoverview Note item component.
+ */
+import PropTypes from 'prop-types'
+import React from 'react'
+import { isArray } from 'lodash'
+import CSSModules from 'browser/lib/CSSModules'
+import { getTodoStatus } from 'browser/lib/getTodoStatus'
+import styles from './NoteItem.styl'
+import TodoProcess from './TodoProcess'
+
+/**
+ * @description Tag element component.
+ * @param {string} tagName
+ * @return {React.Component}
+ */
+const TagElement = ({ tagName }) => (
+  <span styleName='item-bottom-tagList-item' key={tagName}>
+    #{tagName}
+  </span>
+)
+
+/**
+ * @description Tag element list component.
+ * @param {Array|null} tags
+ * @return {React.Component}
+ */
+const TagElementList = (tags) => {
+  if (!isArray(tags)) {
+    return []
+  }
+
+  const tagElements = tags.map(tag => (
+    TagElement({tagName: tag})
+  ))
+
+  return tagElements
+}
+
+/**
+ * @description Note item component when using normal display mode.
+ * @param {boolean} isActive
+ * @param {Object} note
+ * @param {Function} handleNoteClick
+ * @param {Function} handleNoteContextMenu
+ * @param {Function} handleDragStart
+ * @param {string} dateDisplay
+ */
+const NoteItem = ({
+  isActive,
+  note,
+  dateDisplay,
+  handleNoteClick,
+  handleNoteContextMenu,
+  handleDragStart,
+  pathname,
+  storageName,
+  folderName,
+  viewType
+}) => (
+  <div styleName={isActive
+    ? 'item--active'
+    : 'item'
+  }
+    key={note.key}
+    onClick={e => handleNoteClick(e, note.key)}
+    onContextMenu={e => handleNoteContextMenu(e, note.key)}
+    onDragStart={e => handleDragStart(e, note)}
+    draggable='true'
+  >
+    <div styleName='item-wrapper'>
+      {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' />
+      }
+      <div styleName='item-title'>
+        {note.title.trim().length > 0
+          ? note.title
+          : <span styleName='item-title-empty'>Empty</span>
+        }
+      </div>
+      {['ALL', 'STORAGE'].includes(viewType) && <div styleName='item-middle'>
+        <div styleName='item-middle-time'>{dateDisplay}</div>
+        <div styleName='item-middle-app-meta'>
+          <div title={viewType === 'ALL' ? storageName : viewType === 'STORAGE' ? folderName : null} styleName='item-middle-app-meta-label'>
+            {viewType === 'ALL' && storageName}
+            {viewType === 'STORAGE' && folderName}
+          </div>
+        </div>
+      </div>}
+
+      <div styleName='item-bottom'>
+        <div styleName='item-bottom-tagList'>
+          {note.tags.length > 0
+            ? TagElementList(note.tags)
+            : <span style={{ fontStyle: 'italic', opacity: 0.5 }} styleName='item-bottom-tagList-empty'>No tags</span>
+          }
+        </div>
+        <div>
+          {note.isStarred
+            ? <img styleName='item-star' src='../resources/icon/icon-starred.svg' /> : ''
+          }
+          {note.isPinned && !pathname.match(/\/starred|\/trash/)
+            ? <i styleName='item-pin' className='fa fa-thumb-tack' /> : ''
+          }
+          {note.type === 'MARKDOWN_NOTE'
+            ? <TodoProcess todoStatus={getTodoStatus(note.content)} />
+            : ''
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+NoteItem.propTypes = {
+  isActive: PropTypes.bool.isRequired,
+  dateDisplay: PropTypes.string.isRequired,
+  note: PropTypes.shape({
+    storage: PropTypes.string.isRequired,
+    key: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    title: PropTypes.string.isrequired,
+    tags: PropTypes.array,
+    isStarred: PropTypes.bool.isRequired,
+    isTrashed: PropTypes.bool.isRequired,
+    blog: {
+      blogLink: PropTypes.string,
+      blogId: PropTypes.number
+    }
+  }),
+  handleNoteClick: PropTypes.func.isRequired,
+  handleNoteContextMenu: PropTypes.func.isRequired,
+  handleDragStart: PropTypes.func.isRequired,
+  handleDragEnd: PropTypes.func.isRequired
+}
+
+export default CSSModules(NoteItem, styles)

browser/components/NoteItem.styl

@@ -0,0 +1,323 @@
+$control-height = 30px
+
+.root
+  absolute left bottom
+  top $topBar-height - 1
+  background-color $ui-noteList-backgroundColor
+
+.item
+  position relative
+  padding 0 20px
+  user-select none
+  cursor pointer
+  background-color $ui-noteList-backgroundColor
+  transition 0.2s
+  &:hover
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      transition 0.15s
+      color $ui-text-color
+    .item-bottom-tagList-item
+      background-color alpha(white, 0.6)
+      color $ui-text-color
+    .item-star
+      color $ui-favorite-star-button-color
+  &:active
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-text-color
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      transition 0.15s
+      color $ui-text-color
+    .item-bottom-tagList-item
+      background-color alpha(white, 0.6)
+      color $ui-text-color
+
+.item-wrapper
+  padding 15px 0
+  border-bottom $ui-border
+  position relative
+
+.item--active
+  @extend .item
+  background-color alpha($ui-button--active-backgroundColor, 60%)
+  color $ui-text-color
+  .item-title
+  .item-title-empty
+  .item-bottom-tagList-empty
+  .item-bottom-time
+  .item-title-icon
+    color $ui-text-color
+  .item-bottom-tagList-item
+    background-color alpha(white, 0.6)
+    color $ui-text-color
+  .item-wrapper
+    border-color transparent
+  .item-star
+    color $ui-favorite-star-button-color
+  &:hover
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
+  &:active, &:active:hover
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
+
+.item-title-icon
+  position relative
+  font-size 12px
+  color $ui-inactive-text-color
+  top 2px
+
+.item-title
+  font-size 15px
+  font-weight 700
+  position relative
+  top -12px
+  left 20px
+  padding 0px 15px 0px 0px
+  margin-bottom 4px
+  overflow ellipsis
+  color $ui-inactive-text-color
+
+.item-title-empty
+  font-weight normal
+  color $ui-inactive-text-color
+
+.item-middle
+  font-size 13px
+  padding-left 2px
+  padding-bottom 2px
+
+.item-middle-time
+  color $ui-inactive-text-color
+  display inline-block
+
+.item-middle-app-meta
+  float right
+  .item-middle-app-meta-label
+    opacity 0.4
+    color $ui-inactive-text-color
+    padding 0 3px
+    white-space nowrap
+    text-overflow ellipsis
+    overflow hidden
+    max-width 200px
+
+.item-bottom
+  position relative
+  bottom 0px
+  margin-top 10px
+  font-size 12px
+  line-height 20px
+  overflow ellipsis
+  display block
+
+.item-bottom-tagList
+  flex 1
+  overflow ellipsis
+  line-height 25px
+  padding-left 2px
+  margin-right 40px
+
+.item-bottom-tagList-item
+  font-size 11px
+  margin-right 8px
+  padding 0
+  box-sizing border-box
+  border-radius 2px
+  padding 4px
+  vertical-align middle
+  background-color white
+  color $ui-inactive-text-color
+
+.item-bottom-time
+  color $ui-inactive-text-color
+  font-size 13px
+  padding-left 2px
+  padding-bottom 2px
+
+.item-star
+  position absolute
+  right 2px
+  top 5px
+  color alpha($ui-favorite-star-button-color, 60%)
+  font-size 12px
+  padding 0
+  border-radius 17px
+
+.item-pin
+  position absolute
+  right 25px
+  top 7px
+  color #E54D42
+  font-size 14px
+  padding 0
+  border-radius 17px
+
+body[data-theme="white"]
+  .item
+    background-color $ui-white-noteList-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+    &:active
+      background-color $ui-button--active-backgroundColor
+
+  .item--active
+    @extend .item
+    background-color $ui-button--active-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+
+  .item
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#fff, 20%)
+        color $ui-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(white, 10%)
+        color $ui-dark-text-color
+
+  .item-wrapper
+    border-color alpha($ui-dark-button--active-backgroundColor, 60%)
+
+  .item--active
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-button--active-backgroundColor
+    .item-wrapper
+      border-color transparent
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      color $ui-dark-text-color
+    .item-bottom-tagList-item
+      background-color alpha(white, 10%)
+      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-bottom-tagList-item
+        background-color alpha(#fff, 20%)
+
+  .item-title
+    color $ui-inactive-text-color
+
+  .item-title-icon
+    color $ui-inactive-text-color
+
+  .item-title-empty
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-item
+    background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-empty
+    color $ui-inactive-text-color
+    vertical-align middle
+
+
+body[data-theme="solarized-dark"]
+  .root
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteList-backgroundColor
+
+  .item
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      // background-color alpha($ui-solarized-dark-noteList-backgroundColor, 20%)
+      color $ui-solarized-dark-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-solarized-dark-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-solarized-dark-noteList-backgroundColor, 20%)
+        color $ui-solarized-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-solarized-dark-noteList-backgroundColor
+      color $ui-solarized-dark-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-solarized-dark-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-solarized-dark-noteList-backgroundColor, 10%)
+        color $ui-solarized-dark-text-color
+
+  .item-wrapper
+    border-color alpha($ui-solarized-dark-button--active-backgroundColor, 60%)
+
+  .item--active
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-button-backgroundColor
+    .item-wrapper
+      border-color transparent
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      color $ui-solarized-dark-text-color
+    .item-bottom-tagList-item
+      background-color alpha(white, 10%)
+      color $ui-solarized-dark-text-color
+    &:hover
+      // background-color alpha($ui-solarized-dark-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-bottom-tagList-item
+        background-color alpha(#fff, 20%)
+
+  .item-title
+    color $ui-inactive-text-color
+
+  .item-title-icon
+    color $ui-inactive-text-color
+
+  .item-title-empty
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-item
+    background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-empty
+    color $ui-inactive-text-color
+    vertical-align middle

browser/components/NoteItemSimple.js

@@ -0,0 +1,72 @@
+/**
+ * @fileoverview Note item component with simple display mode.
+ */
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './NoteItemSimple.styl'
+
+/**
+ * @description Note item component when using simple display mode.
+ * @param {boolean} isActive
+ * @param {Object} note
+ * @param {Function} handleNoteClick
+ * @param {Function} handleNoteContextMenu
+ * @param {Function} handleDragStart
+ */
+const NoteItemSimple = ({
+  isActive,
+  isAllNotesView,
+  note,
+  handleNoteClick,
+  handleNoteContextMenu,
+  handleDragStart,
+  pathname,
+  storage
+}) => (
+  <div styleName={isActive
+    ? 'item-simple--active'
+    : 'item-simple'
+  }
+    key={note.key}
+    onClick={e => handleNoteClick(e, note.key)}
+    onContextMenu={e => handleNoteContextMenu(e, note.key)}
+    onDragStart={e => handleDragStart(e, note)}
+    draggable='true'
+  >
+    <div styleName='item-simple-title'>
+      {note.type === 'SNIPPET_NOTE'
+        ? <i styleName='item-simple-title-icon' className='fa fa-fw fa-code' />
+        : <i styleName='item-simple-title-icon' className='fa fa-fw fa-file-text-o' />
+      }
+      {note.isPinned && !pathname.match(/\/starred|\/trash/)
+        ? <i styleName='item-pin' className='fa fa-thumb-tack' />
+        : ''
+      }
+      {note.title.trim().length > 0
+        ? note.title
+        : <span styleName='item-simple-title-empty'>Empty</span>
+      }
+      {isAllNotesView && <div styleName='item-simple-right'>
+        <span styleName='item-simple-right-storageName'>
+          {storage.name}
+        </span>
+      </div>}
+    </div>
+  </div>
+)
+
+NoteItemSimple.propTypes = {
+  isActive: PropTypes.bool.isRequired,
+  note: PropTypes.shape({
+    storage: PropTypes.string.isRequired,
+    key: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    title: PropTypes.string.isrequired
+  }),
+  handleNoteClick: PropTypes.func.isRequired,
+  handleNoteContextMenu: PropTypes.func.isRequired,
+  handleDragStart: PropTypes.func.isRequired
+}
+
+export default CSSModules(NoteItemSimple, styles)

browser/components/NoteItemSimple.styl

@@ -0,0 +1,214 @@
+$control-height = 30px
+
+.root
+  absolute left bottom
+  top $topBar-height - 1
+  background-color $ui-noteList-backgroundColor
+
+.item-simple
+  position relative
+  padding 0 20px
+  user-select none
+  cursor pointer
+  background-color $ui-noteList-backgroundColor
+  transition 0.2s
+  &:hover
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    .item-simple-title
+    .item-simple-title-empty
+    .item-simple-title-icon
+      color $ui-text-color
+  &:active
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-text-color
+    .item-simple-title
+    .item-simple-title-empty
+    .item-simple-title-icon
+      color $ui-text-color
+
+.item-simple--active
+  @extend .item-simple
+  background-color alpha($ui-button--active-backgroundColor, 60%)
+  color $ui-text-color
+  .item-simple-title
+  .item-simple-title-empty
+    border-color transparent
+    color $ui-text-color
+  .item-simple-title-icon
+    color $ui-text-color
+  &:hover
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
+  &:active, &:active:hover
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
+
+.item-simple-title
+  font-size 13px
+  height 40px
+  padding-right 20px
+  box-sizing border-box
+  line-height 24px
+  padding-top 8px
+  overflow ellipsis
+  color $ui-inactive-text-color
+  border-bottom $ui-border
+  position relative
+
+.item-simple-title-icon
+  font-size 12px
+  color $ui-inactive-text-color
+  padding-right 6px
+
+.item-simple-title-empty
+  font-weight normal
+  color $ui-inactive-text-color
+
+.item-pin
+  position absolute
+  right 0px
+  top 12px
+  color #E54D42
+  font-size 14px
+  padding 0
+  border-radius 17px
+
+body[data-theme="white"]
+  .item-simple
+    background-color $ui-white-noteList-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+    &:active
+      background-color $ui-button--active-backgroundColor
+
+  .item-simple--active
+    @extend .item-simple
+    background-color $ui-button--active-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+
+  .item-simple
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#fff, 20%)
+        color $ui-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(white, 10%)
+        color $ui-dark-text-color
+
+  .item-simple--active
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-button--active-backgroundColor
+    .item-simple-wrapper
+      border-color transparent
+    .item-simple-title
+    .item-simple-title-icon
+    .item-simple-bottom-time
+      color $ui-dark-text-color
+    .item-simple-bottom-tagList-item
+      background-color alpha(white, 10%)
+      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-simple-bottom-tagList-item
+        background-color alpha(#fff, 20%)
+
+  .item-simple-title
+    color $ui-inactive-text-color
+    border-color alpha($ui-dark-button--active-backgroundColor, 60%)
+
+  .item-simple-title-icon
+    color $ui-darkinactive-text-color
+
+  .item-simple-title-empty
+    color $ui-dark-inactive-text-color
+
+
+body[data-theme="solarized-dark"]
+  .root
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteList-backgroundColor
+
+  .item-simple
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      // background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-solarized-dark-text-color
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-solarized-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#fff, 20%)
+        color $ui-solarized-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-solarized-dark-button--active-backgroundColor
+      color $ui-solarized-dark-text-color
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-solarized-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(white, 10%)
+        color $ui-solarized-dark-text-color
+
+  .item-simple--active
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-button--active-backgroundColor
+    .item-simple-wrapper
+      border-color transparent
+    .item-simple-title
+    .item-simple-title-icon
+    .item-simple-bottom-time
+      color $ui-solarized-dark-text-color
+    .item-simple-bottom-tagList-item
+      background-color alpha(white, 10%)
+      color $ui-solarized-dark-text-color
+    &:hover
+      // background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-simple-bottom-tagList-item
+        background-color alpha(#fff, 20%)
+.item-simple-right
+  float right
+  .item-simple-right-storageName
+    padding-left 4px
+    opacity 0.4

browser/components/RealtimeNotification.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './RealtimeNotification.styl'
+
+const electron = require('electron')
+const { shell } = electron
+
+class RealtimeNotification extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      notifications: []
+    }
+  }
+
+  componentDidMount () {
+    this.fetchNotifications()
+  }
+
+  fetchNotifications () {
+    const notificationsUrl = 'https://raw.githubusercontent.com/BoostIO/notification/master/notification.json'
+    fetch(notificationsUrl)
+      .then(response => {
+        return response.json()
+      })
+      .then(json => {
+        this.setState({notifications: json.notifications})
+      })
+  }
+
+  handleLinkClick (e) {
+    shell.openExternal(e.currentTarget.href)
+    e.preventDefault()
+  }
+
+  render () {
+    const { notifications } = this.state
+    const link = notifications.length > 0
+      ? <a styleName='notification-link' href={notifications[0].linkUrl}
+        onClick={(e) => this.handleLinkClick(e)}
+      >
+        Info: {notifications[0].text}
+      </a>
+    : ''
+
+    return (
+      <div styleName='notification-area' style={this.props.style}>{link}</div>
+    )
+  }
+}
+
+RealtimeNotification.propTypes = {}
+
+export default CSSModules(RealtimeNotification, styles)

browser/components/RealtimeNotification.styl

@@ -0,0 +1,43 @@
+.notification-area
+  z-index 1000
+  font-size 12px
+  position: relative
+  top: 12px
+  background-color none
+
+.notification-link
+  position absolute
+  text-decoration none
+  color #282A36
+  font-size 14px
+  border 1px solid #6FA8E6
+  background-color alpha(#6FA8E6, 0.2)
+  padding 5px 12px
+  border-radius 2px
+  transition 0.2s
+  &:hover
+    color #1378BD
+
+body[data-theme="dark"]
+  .notification-area
+    background-color none
+
+  .notification-link
+    color #fff
+    border 1px solid alpha(#5CB85C, 0.6)
+    background-color alpha(#5CB85C, 0.2)
+    transition 0.2s
+    &:hover
+      color #5CB85C
+
+
+body[data-theme="solarized-dark"]
+  .notification-area
+    background-color none
+
+  .notification-link
+    color $ui-solarized-dark-text-color
+    border none
+    background-color $ui-solarized-dark-button-backgroundColor
+    &:hover
+      color #5CB85C

browser/components/SideNavFilter.js

@@ -0,0 +1,79 @@
+/**
+ * @fileoverview Filter for all notes.
+ */
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SideNavFilter.styl'
+
+/**
+ * @param {boolean} isFolded
+ * @param {boolean} isHomeActive
+ * @param {Function} handleAllNotesButtonClick
+ * @param {boolean} isStarredActive
+ * @param {Function} handleStarredButtonClick
+ * @return {React.Component}
+ */
+const SideNavFilter = ({
+  isFolded, isHomeActive, handleAllNotesButtonClick,
+  isStarredActive, handleStarredButtonClick, isTrashedActive, handleTrashedButtonClick, counterDelNote,
+  counterTotalNote, counterStarredNote, handleFilterButtonContextMenu
+}) => (
+  <div styleName={isFolded ? 'menu--folded' : 'menu'}>
+
+    <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
+      onClick={handleAllNotesButtonClick}
+    >
+      <div styleName='iconWrap'>
+        <img src={isHomeActive
+          ? '../resources/icon/icon-all-active.svg'
+          : '../resources/icon/icon-all.svg'
+        }
+        />
+      </div>
+      <span styleName='menu-button-label'>All Notes</span>
+      <span styleName='counters'>{counterTotalNote}</span>
+    </button>
+
+    <button styleName={isStarredActive ? 'menu-button-star--active' : 'menu-button'}
+      onClick={handleStarredButtonClick}
+    >
+      <div styleName='iconWrap'>
+        <img src={isStarredActive
+          ? '../resources/icon/icon-star-active.svg'
+          : '../resources/icon/icon-star-sidenav.svg'
+        }
+        />
+      </div>
+      <span styleName='menu-button-label'>Starred</span>
+      <span styleName='counters'>{counterStarredNote}</span>
+    </button>
+
+    <button styleName={isTrashedActive ? 'menu-button-trash--active' : 'menu-button'}
+      onClick={handleTrashedButtonClick}
+    >
+      <div styleName='iconWrap'>
+        <img src={isTrashedActive
+          ? '../resources/icon/icon-trash-active.svg'
+          : '../resources/icon/icon-trash-sidenav.svg'
+        }
+        />
+      </div>
+      <span onContextMenu={handleFilterButtonContextMenu} styleName='menu-button-label'>Trash</span>
+      <span styleName='counters'>{counterDelNote}</span>
+    </button>
+
+  </div>
+)
+
+SideNavFilter.propTypes = {
+  isFolded: PropTypes.bool,
+  isHomeActive: PropTypes.bool.isRequired,
+  handleAllNotesButtonClick: PropTypes.func.isRequired,
+  isStarredActive: PropTypes.bool.isRequired,
+  isTrashedActive: PropTypes.bool.isRequired,
+  handleStarredButtonClick: PropTypes.func.isRequired,
+  handleTrashdButtonClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(SideNavFilter, styles)

browser/components/SideNavFilter.styl

@@ -0,0 +1,225 @@
+.menu
+  margin-bottom 30px
+
+.menu-button
+  navButtonColor()
+  height 36px
+  padding 0 15px 0 20px
+  font-size 14px
+  width 100%
+  text-align left
+  overflow ellipsis
+  display flex
+  align-items center
+  &:hover, &:active, &:active:hover
+    color #1EC38B
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+
+.iconWrap
+  width 20px
+  text-align center
+  
+.counters
+  float right
+  color $ui-inactive-text-color
+
+.menu-button--active
+  @extend .menu-button
+  SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
+  &:hover
+    color #1EC38B
+
+.menu-button-star--active
+  @extend .menu-button
+  SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
+
+.menu-button-trash--active
+  @extend .menu-button
+  SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
+
+.menu-button-label
+  margin-left 10px
+  flex 1
+
+.menu--folded
+  @extend .menu
+  .menu-button, .menu-button--active, .menu-button-star--active, .menu-button-trash--active
+    text-align center
+    padding 0 12px
+    &:hover .menu-button-label
+      transition opacity 0.15s
+      opacity 1
+      color $ui-tooltip-text-color
+      background-color $ui-tooltip-backgroundColor
+
+
+  .menu-button-label
+    position fixed
+    display inline-block
+    height 32px
+    left 44px
+    padding 0 10px
+    margin-top -8px
+    margin-left 0
+    overflow ellipsis
+    z-index 10
+    line-height 32px
+    border-top-right-radius 2px
+    border-bottom-right-radius 2px
+    pointer-events none
+    opacity 0
+    font-size 13px
+  .counters
+    display none
+
+body[data-theme="white"]
+  .menu-button
+    navWhiteButtonColor()
+
+  .counters
+    color $ui-inactive-text-color
+
+  .menu-button--active
+    color #e74c3c
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #e74c3c
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #e74c3c
+      .menu-button-label
+        color $ui-text-color
+
+  .menu-button-star--active
+    color #F9BF3B
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #F9BF3B
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #F9BF3B
+      .menu-button-label
+        color $ui-text-color
+
+  .menu-button-trash--active
+    color #5D9E36
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-text-color
+
+body[data-theme="dark"]
+  .menu-button
+    &:active
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
+
+  .menu-button--active
+    color #c0392b
+    background-color $ui-dark-button--active-backgroundColor
+    .menu-button-label
+      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      color #c0392b
+      .menu-button-label
+        color $ui-dark-text-color
+
+  .menu-button-star--active
+    color $ui-favorite-star-button-color
+    background-color $ui-dark-button--active-backgroundColor
+    .menu-button-label
+      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      color $ui-favorite-star-button-color
+      .menu-button-label
+        color $ui-dark-text-color
+
+  .menu-button-trash--active
+    color #5D9E36
+    background-color $ui-dark-button--active-backgroundColor
+    .menu-button-label
+      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-dark-text-color
+
+
+body[data-theme="solarized-dark"]
+  .menu-button
+    &:active
+      background-color $ui-solarized-dark-noteList-backgroundColor
+      color $ui-solarized-dark-text-color
+    &:hover
+      background-color $ui-solarized-dark-button-backgroundColor
+      color $ui-solarized-dark-text-color
+
+  .menu-button--active
+    color $ui-solarized-dark-text-color
+    background-color $ui-solarized-dark-button-backgroundColor
+    .menu-button-label
+      color $ui-solarized-dark-text-color
+    &:hover
+      background-color $ui-solarized-dark-button-backgroundColor
+      color $ui-solarized-dark-text-color
+      .menu-button-label
+        color $ui-solarized-dark-text-color
+
+  .menu-button-star--active
+    color $ui-solarized-dark-text-color
+    background-color $ui-solarized-dark-button-backgroundColor
+    .menu-button-label
+      color $ui-solarized-dark-text-color
+    &:hover
+      background-color $ui-solarized-dark-button-backgroundColor
+      color $ui-solarized-dark-text-color
+      .menu-button-label
+        color $ui-solarized-dark-text-color
+
+  .menu-button-trash--active
+    color $ui-solarized-dark-text-color
+    background-color $ui-solarized-dark-button-backgroundColor
+    .menu-button-label
+      color $ui-solarized-dark-text-color
+    &:hover
+      background-color $ui-solarized-dark-button-backgroundColor
+      color $ui-solarized-dark-text-color
+      .menu-button-label
+        color $ui-solarized-dark-text-color

browser/components/SnippetTab.js

@@ -0,0 +1,145 @@
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SnippetTab.styl'
+import context from 'browser/lib/context'
+
+class SnippetTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isRenaming: false,
+      name: props.snippet.name
+    }
+  }
+
+  componentWillUpdate (nextProps) {
+    if (nextProps.snippet.name !== this.props.snippet.name) {
+      this.setState({
+        name: nextProps.snippet.name
+      })
+    }
+  }
+
+  handleClick (e) {
+    this.props.onClick(e)
+  }
+
+  handleContextMenu (e) {
+    context.popup([
+      {
+        label: 'Rename',
+        click: (e) => this.handleRenameClick(e)
+      }
+    ])
+  }
+
+  handleRenameClick (e) {
+    this.startRenaming()
+  }
+
+  handleNameInputBlur (e) {
+    this.handleRename()
+  }
+
+  handleNameInputChange (e) {
+    this.setState({
+      name: e.target.value
+    })
+  }
+
+  handleNameInputKeyDown (e) {
+    switch (e.keyCode) {
+      case 13:
+        this.handleRename()
+        break
+      case 27:
+        this.setState({
+          name: this.props.snippet.name,
+          isRenaming: false
+        })
+        break
+    }
+  }
+
+  handleRename () {
+    this.setState({
+      isRenaming: false
+    }, () => {
+      if (this.props.snippet.name !== this.state.name) {
+        this.props.onRename(this.state.name)
+      }
+    })
+  }
+
+  handleDeleteButtonClick (e) {
+    this.props.onDelete(e)
+  }
+
+  startRenaming () {
+    this.setState({
+      isRenaming: true
+    }, () => {
+      this.refs.name.focus()
+      this.refs.name.select()
+    })
+  }
+
+  handleDragStart (e) {
+    e.dataTransfer.dropEffect = 'move'
+    this.props.onDragStart(e)
+  }
+
+  handleDrop (e) {
+    this.props.onDrop(e)
+  }
+
+  render () {
+    const { isActive, snippet, isDeletable } = this.props
+    return (
+      <div styleName={isActive
+          ? 'root--active'
+          : 'root'
+        }
+      >
+        {!this.state.isRenaming
+          ? <button styleName='button'
+            onClick={(e) => this.handleClick(e)}
+            onDoubleClick={(e) => this.handleRenameClick(e)}
+            onContextMenu={(e) => this.handleContextMenu(e)}
+            onDragStart={(e) => this.handleDragStart(e)}
+            onDrop={(e) => this.handleDrop(e)}
+            draggable='true'
+          >
+            {snippet.name.trim().length > 0
+              ? snippet.name
+              : <span styleName='button-unnamed'>
+                Unnamed
+              </span>
+            }
+          </button>
+          : <input styleName='input'
+            ref='name'
+            value={this.state.name}
+            onChange={(e) => this.handleNameInputChange(e)}
+            onBlur={(e) => this.handleNameInputBlur(e)}
+            onKeyDown={(e) => this.handleNameInputKeyDown(e)}
+          />
+        }
+        {isDeletable &&
+          <button styleName='deleteButton'
+            onClick={(e) => this.handleDeleteButtonClick(e)}
+          >
+            <i className='fa fa-times' />
+          </button>
+        }
+      </div>
+    )
+  }
+}
+
+SnippetTab.propTypes = {
+
+}
+
+export default CSSModules(SnippetTab, styles)

browser/components/SnippetTab.styl

@@ -0,0 +1,138 @@
+.root
+  position relative
+  flex 1
+  overflow hidden
+  &:hover
+    .deleteButton
+      color $ui-inactive-text-color
+      &:hover
+        background-color darken($ui-backgroundColor, 15%)
+      &:active
+        color white
+        background-color $ui-active-color
+
+.root--active
+  @extend .root
+  min-width 100px
+  border-bottom $ui-border
+
+.button
+  width 100%
+  height 29px
+  overflow ellipsis
+  text-align left
+  padding-right 30px
+  border none
+  background-color transparent
+  transition 0.15s
+  border-left 4px solid transparent
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+
+.deleteButton
+  position absolute
+  top 5px
+  height 20px
+  right 5px
+  width 20px
+  text-align center
+  border none
+  padding 0
+  color $ui-inactive-text-color
+  background-color transparent
+  border-radius 2px
+
+.input
+  height 29px
+  border $ui-active-color
+  padding 0 5px
+  width 100%
+  outline none
+
+body[data-theme="dark"]
+  .root
+    color $ui-dark-text-color
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+      .deleteButton
+        color $ui-dark-inactive-text-color
+        &:hover
+          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
+        &:active
+          color $ui-dark-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .root--active
+    color $ui-dark-text-color
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+      .deleteButton
+        color $ui-dark-inactive-text-color
+        &:hover
+          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
+        &:active
+          color $ui-dark-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .button
+    border none
+    color $ui-dark-text-color
+    background-color transparent
+    transition color background-color 0.15s
+    border-left 4px solid transparent
+    &:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--hover-backgroundColor
+
+  .input
+    background-color $ui-dark-button--hover-backgroundColor
+    color $ui-dark-text-color
+
+  .deleteButton
+    color alpha($ui-dark-text-color, 30%)
+
+body[data-theme="solarized-dark"]
+  .root
+    color $ui-solarized-dark-text-color
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-solarized-dark-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-solarized-dark-text-color
+        &:hover
+          background-color darken($ui-solarized-dark-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-solarized-dark-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .root--active
+    color $ui-solarized-dark-text-color
+    border-color $ui-solarized-dark-borderColor
+    &:hover
+      background-color $ui-solarized-dark-noteDetail-backgroundColor
+      .deleteButton
+        color $ui-solarized-dark-text-color
+        &:hover
+          background-color darken($ui-solarized-dark-noteDetail-backgroundColor, 15%)
+        &:active
+          color $ui-solarized-dark-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .button
+    border none
+    color $ui-solarized-dark-text-color
+    background-color transparent
+    transition color background-color 0.15s
+    border-left 4px solid transparent
+    &:hover
+      color $ui-solarized-dark-text-color
+      background-color $ui-solarized-dark-noteDetail-backgroundColor
+
+  .input
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    color $ui-solarized-dark-text-color
+
+  .deleteButton
+    color alpha($ui-solarized-dark-text-color, 30%)

browser/components/StorageItem.js

@@ -0,0 +1,97 @@
+/**
+ * @fileoverview Micro component for showing storage.
+ */
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './StorageItem.styl'
+import CSSModules from 'browser/lib/CSSModules'
+import _ from 'lodash'
+import { SortableHandle } from 'react-sortable-hoc'
+
+const DraggableIcon = SortableHandle(({ className }) => (
+  <i className={`fa ${className}`} />
+))
+
+const FolderIcon = ({ className, color, isActive }) => {
+  const iconStyle = isActive ? 'fa-folder-open-o' : 'fa-folder-o'
+  return (
+    <i className={`fa ${iconStyle} ${className}`} style={{ color: color }} />
+  )
+}
+
+/**
+ * @param {boolean} isActive
+ * @param {Function} handleButtonClick
+ * @param {Function} handleContextMenu
+ * @param {string} folderName
+ * @param {string} folderColor
+ * @param {boolean} isFolded
+ * @param {number} noteCount
+ * @param {Function} handleDrop
+ * @param {Function} handleDragEnter
+ * @param {Function} handleDragOut
+ * @return {React.Component}
+ */
+const StorageItem = ({
+  styles,
+  isActive,
+  handleButtonClick,
+  handleContextMenu,
+  folderName,
+  folderColor,
+  isFolded,
+  noteCount,
+  handleDrop,
+  handleDragEnter,
+  handleDragLeave
+}) => {
+  return (
+    <button
+      styleName={isActive ? 'folderList-item--active' : 'folderList-item'}
+      onClick={handleButtonClick}
+      onContextMenu={handleContextMenu}
+      onDrop={handleDrop}
+      onDragEnter={handleDragEnter}
+      onDragLeave={handleDragLeave}
+    >
+      {!isFolded && (
+        <DraggableIcon className={styles['folderList-item-reorder']} />
+      )}
+      <span
+        styleName={
+          isFolded ? 'folderList-item-name--folded' : 'folderList-item-name'
+        }
+      >
+        <FolderIcon
+          styleName='folderList-item-icon'
+          color={folderColor}
+          isActive={isActive}
+        />
+        {isFolded
+          ? _.truncate(folderName, { length: 1, omission: '' })
+          : folderName}
+      </span>
+      {!isFolded &&
+        _.isNumber(noteCount) && (
+          <span styleName='folderList-item-noteCount'>{noteCount}</span>
+        )}
+      {isFolded && (
+        <span styleName='folderList-item-tooltip'>{folderName}</span>
+      )}
+    </button>
+  )
+}
+
+StorageItem.propTypes = {
+  isActive: PropTypes.bool.isRequired,
+  handleButtonClick: PropTypes.func,
+  handleContextMenu: PropTypes.func,
+  folderName: PropTypes.string.isRequired,
+  folderColor: PropTypes.string,
+  isFolded: PropTypes.bool.isRequired,
+  handleDragEnter: PropTypes.func.isRequired,
+  handleDragLeave: PropTypes.func.isRequired,
+  noteCount: PropTypes.number
+}
+
+export default CSSModules(StorageItem, styles)

browser/components/StorageItem.styl

@@ -0,0 +1,140 @@
+.root
+  width 100%
+  user-select none
+
+.folderList-item
+  display flex
+  width 100%
+  height 34px
+  background-color transparent
+  color $ui-inactive-text-color
+  padding 0
+  text-align left
+  border none
+  overflow ellipsis
+  font-size 14px
+  align-items: center
+  &:first-child
+    margin-top 0
+  &:hover
+    color #1EC38B;
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+    transition background-color 0.15s
+  &:active
+    color $$ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+
+.folderList-item--active
+  @extend .folderList-item
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  &:hover
+    color #1EC38B;
+    background-color alpha($ui-button-default--active-backgroundColor, 50%)
+
+.folderList-item-name
+  display block
+  flex 1
+  padding-right: 10px
+  border-width 0 0 0 2px
+  border-style solid
+  border-color transparent
+  overflow hidden
+  text-overflow ellipsis
+
+.folderList-item-noteCount
+  float right
+  line-height 26px
+  padding-right 15px
+  font-size 13px
+
+.folderList-item-tooltip
+  tooltip()
+  position fixed
+  padding 0 10px
+  left 44px
+  z-index 10
+  pointer-events none
+  opacity 0
+  border-top-right-radius 2px
+  border-bottom-right-radius 2px
+  height 26px
+  line-height 26px
+
+.folderList-item:hover, .folderList-item--active:hover
+  .folderList-item-tooltip
+    opacity 1
+
+.folderList-item-name--folded
+  @extend .folderList-item-name
+  padding-left 7px
+  .folderList-item-icon
+    font-size 9px
+
+.folderList-item-icon
+  padding-right: 10px
+
+.folderList-item-reorder
+  font-size: 9px
+  padding: 10px 8px 10px 9px;
+  color: rgba(147, 147, 149, 0.3)
+  cursor: ns-resize
+  &:before
+    content: "\f142 \f142"
+
+body[data-theme="white"]
+  .folderList-item
+    color $ui-inactive-text-color
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 20%)
+      transition background-color 0.15s
+    &:active
+      color $ui-text-color
+      background-color $ui-button--active-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-text-color
+    background-color $ui-button--active-backgroundColor
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+
+body[data-theme="dark"]
+  .folderList-item
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
+    &:active
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-dark-text-color
+    background-color $ui-dark-button--active-backgroundColor
+    &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+    &:hover
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+
+body[data-theme="solarized-dark"]
+  .folderList-item
+    &:hover
+      background-color $ui-solarized-dark-button-backgroundColor
+      color $ui-solarized-dark-text-color
+    &:active
+      color $ui-solarized-dark-text-color
+      background-color $ui-solarized-dark-button-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-solarized-dark-text-color
+    background-color $ui-solarized-dark-button-backgroundColor
+    &:active
+      background-color $ui-solarized-dark-button-backgroundColor
+    &:hover
+      color $ui-solarized-dark-text-color
+      background-color $ui-solarized-dark-button-backgroundColor

browser/components/StorageList.js

@@ -0,0 +1,24 @@
+/**
+* @fileoverview Micro component for showing StorageList
+*/
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './StorageList.styl'
+import CSSModules from 'browser/lib/CSSModules'
+
+/**
+* @param {Array} storgaeList
+*/
+
+const StorageList = ({storageList}) => (
+  <div styleName='storageList'>
+    {storageList.length > 0 ? storageList : (
+      <div styleName='storgaeList-empty'>No storage mount.</div>
+    )}
+  </div>
+)
+
+StorageList.propTypes = {
+  storgaeList: PropTypes.arrayOf(PropTypes.element).isRequired
+}
+export default CSSModules(StorageList, styles)

browser/components/StorageList.styl

@@ -0,0 +1,20 @@
+.storageList
+  absolute left right
+  bottom 37px
+  top 180px
+  overflow-y auto
+
+.storageList-empty
+  padding 0 10px
+  margin-top 15px
+  line-height 24px
+  color $ui-inactive-text-color
+
+body[data-theme="dark"]
+  .storageList-empty
+    color $ui-dark-inactive-text-color
+
+.root-folded
+  .storageList-empty
+    white-space nowrap
+    transform rotate(90deg)

browser/components/TagListItem.js

@@ -0,0 +1,29 @@
+/**
+* @fileoverview Micro component for showing TagList.
+*/
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './TagListItem.styl'
+import CSSModules from 'browser/lib/CSSModules'
+
+/**
+* @param {string} name
+* @param {Function} handleClickTagListItem
+* @param {bool} isActive
+*/
+
+const TagListItem = ({name, handleClickTagListItem, isActive, count}) => (
+  <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
+    <span styleName='tagList-item-name'>
+      {`# ${name}`}
+      <span styleName='tagList-item-count'> {count}</span>
+    </span>
+  </button>
+)
+
+TagListItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  handleClickTagListItem: PropTypes.func.isRequired
+}
+
+export default CSSModules(TagListItem, styles)

browser/components/TagListItem.styl

@@ -0,0 +1,91 @@
+.tagList-item
+  display flex
+  width 100%
+  height 26px
+  background-color transparent
+  color $ui-inactive-text-color
+  padding 0
+  margin-bottom 5px
+  text-align left
+  border none
+  overflow ellipsis
+  font-size 13px
+  &:first-child
+    margin-top 0
+  &:hover
+    color $ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+    transition background-color 0.15s
+  &:active, &:active:hover
+    color $ui-button-default-color
+    background-color $ui-button-default--active-backgroundColor
+
+.tagList-item-active
+  background-color $ui-button-default--active-backgroundColor
+  display flex
+  width 100%
+  height 26px
+  padding 0
+  margin-bottom 5px
+  text-align left
+  border none
+  overflow ellipsis
+  font-size 13px
+  color $ui-button-default-color
+  &:hover
+    background-color alpha($ui-button-default--active-backgroundColor, 60%)
+    transition 0.2s
+
+.tagList-item-name
+  display block
+  flex 1
+  padding 0 15px
+  height 26px
+  line-height 26px
+  border-width 0 0 0 2px
+  border-style solid
+  border-color transparent
+  overflow hidden
+  text-overflow ellipsis
+
+.tagList-item-count
+  padding 0 3px
+
+body[data-theme="white"]
+  .tagList-item
+    color $ui-inactive-text-color
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 20%)
+    &:active
+      color $ui-text-color
+      background-color $ui-button--active-backgroundColor
+
+  .tagList-item-active
+    background-color $ui-button--active-backgroundColor
+    color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+  .tagList-item-count
+    color $ui-text-color
+
+body[data-theme="dark"]
+  .tagList-item
+    color $ui-dark-inactive-text-color
+    &:hover
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+    &:active
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .tagList-item-active
+    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-text-color
+    &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+    &:hover
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+  .tagList-item-count
+    color $ui-dark-button--active-color

browser/components/TodoListPercentage.js

@@ -0,0 +1,30 @@
+/**
+ * @fileoverview Percentage of todo achievement.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TodoListPercentage.styl'
+
+/**
+ * @param {number} percentageOfTodo
+ */
+
+const TodoListPercentage = ({
+  percentageOfTodo
+}) => (
+  <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
+    <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
+      <div styleName='progressBarInner'>
+        <p styleName='percentageText'>{percentageOfTodo}%</p>
+      </div>
+    </div>
+  </div>
+)
+
+TodoListPercentage.propTypes = {
+  percentageOfTodo: PropTypes.number.isRequired
+}
+
+export default CSSModules(TodoListPercentage, styles)

browser/components/TodoListPercentage.styl

@@ -0,0 +1,51 @@
+.percentageBar
+  position absolute
+  top 72px
+  right 0px
+  left 0px
+  background-color #DADFE1
+  width 100%
+  height: 17px
+  font-size: 12px
+  z-index 100
+  border-radius 2px
+
+.progressBar
+  background-color: #1EC38B
+  height 17px
+  border-radius 2px
+  transition 0.4s cubic-bezier(0.4, 0.4, 0, 1)
+
+.progressBarInner
+  padding 0 10px
+  min-width 1px
+  height 100%
+  display -webkit-box
+  display box
+  justify-content center
+  align-items center
+
+
+.percentageText
+  color #f4f4f4
+  font-weight 600
+
+body[data-theme="dark"]
+  .percentageBar
+    background-color #444444
+
+  .progressBar
+    background-color: #1EC38B
+
+  .percentageText
+    color $ui-dark-text-color
+    
+body[data-theme="solarized-dark"]
+  .percentageBar
+    background-color #002b36
+
+  .progressBar
+    background-color: #2aa198
+
+  .percentageText
+    color #fdf6e3

browser/components/TodoProcess.js

@@ -0,0 +1,34 @@
+/**
+ * @fileoverview Percentage of todo achievement.
+ */
+
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TodoProcess.styl'
+
+const TodoProcess = ({
+  todoStatus: {
+    total: totalTodo,
+    completed: completedTodo
+  }
+}) => (
+  <div styleName='todo-process' style={{display: totalTodo > 0 ? '' : 'none'}}>
+    <div styleName='todo-process-text'>
+      <i className='fa fa-fw fa-check-square-o' />
+      {completedTodo} of {totalTodo}
+    </div>
+    <div styleName='todo-process-bar'>
+      <div styleName='todo-process-bar--inner' style={{width: parseInt(completedTodo / totalTodo * 100) + '%'}} />
+    </div>
+  </div>
+)
+
+TodoProcess.propTypes = {
+  todoStatus: {
+    total: PropTypes.number.isRequired,
+    completed: PropTypes.number.isRequired
+  }
+}
+
+export default CSSModules(TodoProcess, styles)

browser/components/TodoProcess.styl

@@ -0,0 +1,45 @@
+.todo-process
+  font-size 12px
+  display flex
+  padding-top 15px
+  width 85%
+
+.todo-process-text
+  display inline-block
+  padding-right 10px
+  white-space nowrap
+  text-overflow ellipsis
+  color $ui-inactive-text-color
+  i
+    color $ui-inactive-text-color
+    padding-right 5px
+
+.todo-process-bar
+  display inline-block
+  margin auto
+  height 4px
+  border-radius 10px
+  background-color #DADFE1
+  border-radius 2px
+  flex-grow 1
+  border 1px solid alpha(#6C7A89, 10%)
+
+.todo-process-bar--inner
+  height 100%
+  border-radius 5px
+  background-color #6C7A89
+  transition 0.3s
+
+
+body[data-theme="dark"]
+  .todo-process
+    color $ui-dark-text-color
+
+  .todo-process-bar
+    background-color #363A3D
+
+  .todo-process-text
+    color $ui-inactive-text-color
+
+  .todo-process-bar--inner
+    background-color: alpha(#939395, 50%)

browser/components/markdown.styl

@@ -0,0 +1,373 @@
+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
+  background-color $ui-noteDetail-backgroundColor
+  .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
+  .flowchart-error, .sequence-error
+    background-color errorBackgroundColor
+    color errorTextColor
+    padding 5px
+    border-radius 5px
+    justify-content left
+li
+  label.taskListItem
+    margin-left -1.8em
+    &.checked
+      text-decoration line-through
+      opacity 0.5
+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
+  img
+    vertical-align sub
+  &:hover
+    color lighten(brandColor, 5%)
+    text-decoration underline
+    background-color alpha(#FFC95C, 0.3)
+  &:visited
+    color brandColor
+hr
+  border-top none
+  border-bottom solid 1px borderColor
+  margin 15px 0
+h1, h2, h3, h4, h5, h6
+  font-weight bold
+  word-wrap break-word
+h1
+  font-size 2.55em
+  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
+p
+  line-height 1.6em
+  margin 0 0 1em
+  white-space pre-line
+  word-wrap break-word
+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
+    &.taskListItem
+      list-style none
+    p
+      margin 0
+  &>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
+    p
+      margin 0
+  &>li>ul, &>li>ol
+    margin 0
+code
+  color #CC305F
+  padding 0.2em 0.4em
+  background-color #f7f7f7
+  border-radius 3px
+  font-size 1em
+  text-decoration none
+  margin-right 2px
+pre
+  padding 0.5em !important
+  border solid 1px #D1D1D1
+  border-radius 5px
+  overflow-x auto
+  margin 0 0 1em
+  display flex
+  line-height 1.4em
+  &.flowchart, &.sequence
+    display flex
+    justify-content center
+    background-color white
+  &.CodeMirror
+    height initial
+    flex-wrap wrap
+    &>code
+      flex 1
+      overflow-x auto
+  code
+    background-color inherit
+    margin 0
+    padding 0
+    border none
+    border-radius 0
+  &>span.filename
+    width 100%
+    border-radius: 5px 0px 0px 0px
+    margin -8px 100% 8px -8px
+    padding 0px 6px
+    background-color #777;
+    color white
+  &>span.lineNumber
+    display none
+    font-size 1em
+    padding 0.5em 0
+    margin -0.5em 0.5em -0.5em -0.5em
+    border-right 1px solid
+    text-align right
+    border-top-left-radius 4px
+    border-bottom-left-radius 4px
+    &.CodeMirror-gutters
+      position initial
+      top initial
+      left initial
+      min-height 0 !important
+    &>span
+      display block
+      padding 0 .5em 0
+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
+      font-weight bold
+      &: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
+kbd
+  background-color #fafbfc
+  border solid 1px borderColor
+  border-bottom-color btnColor
+  border-radius 3px
+  box-shadow inset 0 -1px 0 #959da5
+  display inline-block
+  font-size .8em
+  line-height 1
+  padding 3px 5px
+
+themeDarkBackground = darken(#21252B, 10%)
+themeDarkText = #f9f9f9
+themeDarkBorder = lighten(themeDarkBackground, 20%)
+themeDarkPreview = $ui-dark-noteDetail-backgroundColor
+themeDarkTableOdd = themeDarkPreview
+themeDarkTableEven = darken(themeDarkPreview, 10%)
+themeDarkTableHead = themeDarkTableEven
+themeDarkTableBorder = themeDarkBorder
+themeDarkModalButtonDefault = themeDarkPreview
+themeDarkModalButtonDanger = #BF360C
+
+body[data-theme="dark"]
+  color themeDarkText
+  border-color themeDarkBorder
+  background-color themeDarkPreview
+  a:hover
+    background-color alpha(lighten(brandColor, 30%), 0.2) !important
+
+  code
+    color #EA6730
+    border-color darken(themeDarkBorder, 10%)
+    background-color lighten(themeDarkPreview, 5%)
+
+  pre
+    border-color lighten(#21252B, 20%)
+    code
+      background-color transparent
+
+  label.taskListItem
+    background-color themeDarkPreview
+  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
+  kbd
+    background-color themeDarkBorder
+    color themeDarkText
+
+themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor
+themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
+themeSolarizedDarkTableHead = themeSolarizedDarkTableEven
+themeSolarizedDarkTableBorder = themeDarkBorder
+
+body[data-theme="solarized-dark"]
+  color $ui-solarized-dark-text-color
+  border-color themeDarkBorder
+  background-color $ui-solarized-dark-noteDetail-backgroundColor
+  table
+    thead
+      tr
+        background-color themeSolarizedDarkTableHead
+      th
+        border-color themeSolarizedDarkTableBorder
+        &:last-child
+          border-right solid 1px themeSolarizedDarkTableBorder
+    tbody
+      tr:nth-child(2n + 1)
+        background-color themeSolarizedDarkTableOdd
+      tr:nth-child(2n)
+        background-color themeSolarizedDarkTableEven
+      td
+        border-color themeSolarizedDarkTableBorder
+        &:last-child
+          border-right solid 1px themeSolarizedDarkTableBorder

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/Mutable.js

@@ -0,0 +1,106 @@
+class MutableMap {
+  constructor (iterable) {
+    this._map = new Map(iterable)
+    Object.defineProperty(this, 'size', {
+      get: () => this._map.size,
+      set: function (value) {
+        this['size'] = value
+      }
+    })
+  }
+
+  get (...args) {
+    return this._map.get(...args)
+  }
+
+  set (...args) {
+    return this._map.set(...args)
+  }
+
+  delete (...args) {
+    return this._map.delete(...args)
+  }
+
+  has (...args) {
+    return this._map.has(...args)
+  }
+
+  clear (...args) {
+    return this._map.clear(...args)
+  }
+
+  forEach (...args) {
+    return this._map.forEach(...args)
+  }
+
+  [Symbol.iterator] () {
+    return this._map[Symbol.iterator]()
+  }
+
+  map (cb) {
+    const result = []
+    for (const [key, value] of this._map) {
+      result.push(cb(value, key))
+    }
+    return result
+  }
+
+  toJS () {
+    const result = {}
+    for (let [key, value] of this._map) {
+      if (value instanceof MutableSet || value instanceof MutableMap) {
+        value = value.toJS()
+      }
+      result[key] = value
+    }
+    return result
+  }
+}
+
+class MutableSet {
+  constructor (iterable) {
+    this._set = new Set(iterable)
+    Object.defineProperty(this, 'size', {
+      get: () => this._set.size,
+      set: function (value) {
+        this['size'] = value
+      }
+    })
+  }
+
+  add (...args) {
+    return this._set.add(...args)
+  }
+
+  delete (...args) {
+    return this._set.delete(...args)
+  }
+
+  forEach (...args) {
+    return this._set.forEach(...args)
+  }
+
+  [Symbol.iterator] () {
+    return this._set[Symbol.iterator]()
+  }
+
+  map (cb) {
+    const result = []
+    this._set.forEach(function (value, key) {
+      result.push(cb(value, key))
+    })
+
+    return result
+  }
+
+  toJS () {
+    return Array.from(this._set)
+  }
+}
+
+const Mutable = {
+  Map: MutableMap,
+  Set: MutableSet
+}
+
+module.exports = Mutable

browser/lib/RcParser.js

@@ -0,0 +1,21 @@
+import path from 'path'
+import sander from 'sander'
+
+const BOOSTNOTERC = '.boostnoterc'
+const homePath = global.process.env.HOME || global.process.env.USERPROFILE
+const _boostnotercPath = path.join(homePath, BOOSTNOTERC)
+
+export function parse (boostnotercPath = _boostnotercPath) {
+  if (!sander.existsSync(boostnotercPath)) return {}
+  try {
+    return JSON.parse(sander.readFileSync(boostnotercPath).toString())
+  } catch (e) {
+    console.warn(e)
+    console.warn('Your .boostnoterc is broken so it\'s not used.')
+    return {}
+  }
+}
+
+export default {
+  parse
+}

browser/lib/consts.js

@@ -0,0 +1,37 @@
+const path = require('path')
+const fs = require('sander')
+const { remote } = require('electron')
+const { app } = remote
+
+const themePath = process.env.NODE_ENV === 'production'
+  ? path.join(app.getAppPath(), './node_modules/codemirror/theme')
+  : require('path').resolve('./node_modules/codemirror/theme')
+const themes = fs.readdirSync(themePath)
+  .map((themePath) => {
+    return themePath.substring(0, themePath.lastIndexOf('.'))
+  })
+themes.splice(themes.indexOf('solarized'), 1, 'solarized dark', 'solarized light')
+
+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'
+  ],
+  THEMES: ['default'].concat(themes)
+}
+
+module.exports = consts

browser/lib/context.js

@@ -0,0 +1,17 @@
+const { remote } = require('electron')
+const { Menu, MenuItem } = remote
+
+function popup (templates) {
+  const menu = new Menu()
+  templates.forEach((item) => {
+    menu.append(new MenuItem(item))
+  })
+  menu.popup(remote.getCurrentWindow())
+}
+
+const context = {
+  popup
+}
+
+module.export = context
+export default context

browser/lib/customMeta.js

@@ -0,0 +1,5 @@
+import CodeMirror from 'codemirror'
+import 'codemirror-mode-elixir'
+
+CodeMirror.modeInfo.push({name: 'Stylus', mime: 'text/x-styl', mode: 'stylus', ext: ['styl'], alias: ['styl']})
+CodeMirror.modeInfo.push({name: 'Elixir', mime: 'text/x-elixir', mode: 'elixir', ext: ['ex']})

browser/lib/date-formatter.js

@@ -0,0 +1,18 @@
+/**
+ * @fileoverview Formatting date string.
+ */
+import moment from 'moment'
+
+/**
+ * @description Return date string. For example, 'Sep.9, 2016 12:00'.
+ * @param {mixed}
+ * @return {string}
+ */
+export function formatDate (date) {
+  const m = moment(date)
+  if (!m.isValid()) {
+    throw Error('Invalid argument.')
+  }
+
+  return m.format('MMM D, gggg H:mm')
+}

browser/lib/findNoteTitle.js

@@ -0,0 +1,33 @@
+export function findNoteTitle (value) {
+  const splitted = value.split('\n')
+  let title = null
+  let isInsideCodeBlock = false
+
+  splitted.some((line, index) => {
+    const trimmedLine = line.trim()
+    const trimmedNextLine = splitted[index + 1] === undefined ? '' : splitted[index + 1].trim()
+    if (trimmedLine.match('```')) {
+      isInsideCodeBlock = !isInsideCodeBlock
+    }
+    if (isInsideCodeBlock === false && (trimmedLine.match(/^# +/) || trimmedNextLine.match(/^=+$/))) {
+      title = trimmedLine
+      return true
+    }
+  })
+
+  if (title === null) {
+    title = ''
+    splitted.some((line) => {
+      if (line.trim().length > 0) {
+        title = line.trim()
+        return true
+      }
+    })
+  }
+
+  return title
+}
+
+export default {
+  findNoteTitle
+}

browser/lib/findStorage.js

@@ -0,0 +1,14 @@
+const _ = require('lodash')
+
+export function findStorage (storageKey) {
+  const cachedStorageList = JSON.parse(localStorage.getItem('storages'))
+  if (!_.isArray(cachedStorageList)) throw new Error('Target storage doesn\'t exist.')
+  const storage = _.find(cachedStorageList, {key: storageKey})
+  if (storage === undefined) throw new Error('Target storage doesn\'t exist.')
+
+  return storage
+}
+
+export default {
+  findStorage
+}

browser/lib/getTodoStatus.js

@@ -0,0 +1,25 @@
+export function getTodoStatus (content) {
+  const splitted = content.split('\n')
+  let numberOfTodo = 0
+  let numberOfCompletedTodo = 0
+
+  splitted.forEach((line) => {
+    const trimmedLine = line.trim()
+    if (trimmedLine.match(/^[\+\-\*] \[(\s|x)\] ./)) {
+      numberOfTodo++
+    }
+    if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {
+      numberOfCompletedTodo++
+    }
+  })
+
+  return {
+    total: numberOfTodo,
+    completed: numberOfCompletedTodo
+  }
+}
+
+export function getTodoPercentageOfCompleted (content) {
+  const state = getTodoStatus(content)
+  return Math.floor(state.completed / state.total * 100)
+}

browser/lib/htmlTextHelper.js

@@ -0,0 +1,45 @@
+/**
+ * @fileoverview Text trimmer for html.
+ */
+
+/**
+ * @param {string} text
+ * @return {string}
+ */
+
+export function decodeEntities (text) {
+  var entities = [
+    ['apos', '\''],
+    ['amp', '&'],
+    ['lt', '<'],
+    ['gt', '>'],
+    ['#63', '\\?'],
+    ['#36', '\\$']
+  ]
+
+  for (var i = 0, max = entities.length; i < max; ++i) {
+    text = text.replace(new RegExp(`&${entities[i][0]};`, 'g'), entities[i][1])
+  }
+
+  return text
+}
+
+export function encodeEntities (text) {
+  const entities = [
+    ['\'', 'apos'],
+    ['<', 'lt'],
+    ['>', 'gt'],
+    ['\\?', '#63'],
+    ['\\$', '#36']
+  ]
+
+  entities.forEach((entity) => {
+    text = text.replace(new RegExp(entity[0], 'g'), `&${entity[1]};`)
+  })
+  return text
+}
+
+export default {
+  decodeEntities,
+  encodeEntities
+}

browser/lib/keygen.js

@@ -0,0 +1,11 @@
+const crypto = require('crypto')
+const _ = require('lodash')
+const uuidv4 = require('uuid/v4')
+
+module.exports = function (uuid) {
+  if (typeof uuid === typeof true && uuid) {
+    return uuidv4()
+  }
+  const length = 10
+  return crypto.randomBytes(length).toString('hex')
+}

browser/lib/markdown-it-sanitize-html.js

@@ -0,0 +1,23 @@
+'use strict'
+
+import sanitizeHtml from 'sanitize-html'
+
+module.exports = function sanitizePlugin (md, options) {
+  options = options || {}
+
+  md.core.ruler.after('linkify', 'sanitize_inline', state => {
+    for (let tokenIdx = 0; tokenIdx < state.tokens.length; tokenIdx++) {
+      if (state.tokens[tokenIdx].type === 'html_block') {
+        state.tokens[tokenIdx].content = sanitizeHtml(state.tokens[tokenIdx].content, options)
+      }
+      if (state.tokens[tokenIdx].type === 'inline') {
+        const inlineTokens = state.tokens[tokenIdx].children
+        for (let childIdx = 0; childIdx < inlineTokens.length; childIdx++) {
+          if (inlineTokens[childIdx].type === 'html_inline') {
+            inlineTokens[childIdx].content = sanitizeHtml(inlineTokens[childIdx].content, options)
+          }
+        }
+      }
+    }
+  })
+}

browser/lib/markdown.js

@@ -0,0 +1,235 @@
+import markdownit from 'markdown-it'
+import sanitize from './markdown-it-sanitize-html'
+import emoji from 'markdown-it-emoji'
+import math from '@rokt33r/markdown-it-math'
+import _ from 'lodash'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import {lastFindInArray} from './utils'
+
+// FIXME We should not depend on global variable.
+const katex = window.katex
+const config = ConfigManager.get()
+
+function createGutter (str, firstLineNumber) {
+  if (Number.isNaN(firstLineNumber)) firstLineNumber = 1
+  const lastLineNumber = (str.match(/\n/g) || []).length + firstLineNumber - 1
+  const lines = []
+  for (let i = firstLineNumber; i <= lastLineNumber; i++) {
+    lines.push('<span class="CodeMirror-linenumber">' + i + '</span>')
+  }
+  return '<span class="lineNumber CodeMirror-gutters">' + lines.join('') + '</span>'
+}
+
+class Markdown {
+  constructor (options = {}) {
+    const defaultOptions = {
+      typographer: true,
+      linkify: true,
+      html: true,
+      xhtmlOut: true,
+      breaks: true,
+      highlight: function (str, lang) {
+        const delimiter = ':'
+        const langInfo = lang.split(delimiter)
+        const langType = langInfo[0]
+        const fileName = langInfo[1] || ''
+        const firstLineNumber = parseInt(langInfo[2], 10)
+
+        if (langType === 'flowchart') {
+          return `<pre class="flowchart">${str}</pre>`
+        }
+        if (langType === 'sequence') {
+          return `<pre class="sequence">${str}</pre>`
+        }
+        return '<pre class="code CodeMirror">' +
+          '<span class="filename">' + fileName + '</span>' +
+          createGutter(str, firstLineNumber) +
+          '<code class="' + langType + '">' +
+          str +
+          '</code></pre>'
+      }
+    }
+
+    const updatedOptions = Object.assign(defaultOptions, options)
+    this.md = markdownit(updatedOptions)
+
+    // Sanitize use rinput before other plugins
+    this.md.use(sanitize, {
+      allowedTags: ['iframe', 'input',
+        'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7', 'h8', 'br', 'b', 'i', 'strong', 'em', 'a', 'pre', 'code', 'img', 'tt',
+        'div', 'ins', 'del', 'sup', 'sub', 'p', 'ol', 'ul', 'table', 'thead', 'tbody', 'tfoot', 'blockquote',
+        'dl', 'dt', 'dd', 'kbd', 'q', 'samp', 'var', 'hr', 'ruby', 'rt', 'rp', 'li', 'tr', 'td', 'th', 's', 'strike', 'summary', 'details'
+      ],
+      allowedAttributes: {
+        '*': [
+          'abbr', 'accept', 'accept-charset',
+          'accesskey', 'action', 'align', 'alt', 'axis',
+          'border', 'cellpadding', 'cellspacing', 'char',
+          'charoff', 'charset', 'checked',
+          'clear', 'cols', 'colspan', 'color',
+          'compact', 'coords', 'datetime', 'dir',
+          'disabled', 'enctype', 'for', 'frame',
+          'headers', 'height', 'hreflang',
+          'hspace', 'ismap', 'label', 'lang',
+          'maxlength', 'media', 'method',
+          'multiple', 'name', 'nohref', 'noshade',
+          'nowrap', 'open', 'prompt', 'readonly', 'rel', 'rev',
+          'rows', 'rowspan', 'rules', 'scope',
+          'selected', 'shape', 'size', 'span',
+          'start', 'summary', 'tabindex', 'target',
+          'title', 'type', 'usemap', 'valign', 'value',
+          'vspace', 'width', 'itemprop'
+        ],
+        'a': ['href'],
+        'div': ['itemscope', 'itemtype'],
+        'blockquote': ['cite'],
+        'del': ['cite'],
+        'ins': ['cite'],
+        'q': ['cite'],
+        'img': ['src', 'width', 'height'],
+        'iframe': ['src', 'width', 'height', 'frameborder', 'allowfullscreen'],
+        'input': ['type', 'id', 'checked']
+      },
+      allowedIframeHostnames: ['www.youtube.com']
+    })
+
+    this.md.use(emoji, {
+      shortcuts: {}
+    })
+    this.md.use(math, {
+      inlineOpen: config.preview.latexInlineOpen,
+      inlineClose: config.preview.latexInlineClose,
+      blockOpen: config.preview.latexBlockOpen,
+      blockClose: config.preview.latexBlockClose,
+      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
+      }
+    })
+    this.md.use(require('markdown-it-imsize'))
+    this.md.use(require('markdown-it-footnote'))
+    this.md.use(require('markdown-it-multimd-table'))
+    this.md.use(require('markdown-it-named-headers'), {
+      slugify: (header) => {
+        return encodeURI(header.trim()
+          .replace(/[\]\[\!\"\#\$\%\&\'\(\)\*\+\,\.\/\:\;\<\=\>\?\@\\\^\_\{\|\}\~]/g, '')
+          .replace(/\s+/g, '-'))
+          .replace(/\-+$/, '')
+      }
+    })
+    this.md.use(require('markdown-it-kbd'))
+
+    const deflate = require('markdown-it-plantuml/lib/deflate')
+    this.md.use(require('markdown-it-plantuml'), '', {
+      generateSource: function (umlCode) {
+        const s = unescape(encodeURIComponent(umlCode))
+        const zippedCode = deflate.encode64(
+          deflate.zip_deflate(`@startuml\n${s}\n@enduml`, 9)
+        )
+        return `http://www.plantuml.com/plantuml/svg/${zippedCode}`
+      }
+    })
+
+    // Override task item
+    this.md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
+      let content, terminate, i, l, token
+      let nextLine = startLine + 1
+      const terminatorRules = state.md.block.ruler.getRules('paragraph')
+      const endLine = state.lineMax
+
+      // jump line-by-line until empty one or EOF
+      for (; nextLine < endLine && !state.isEmpty(nextLine); nextLine++) {
+        // this would be a code block normally, but after paragraph
+        // it's considered a lazy continuation regardless of what's there
+        if (state.sCount[nextLine] - state.blkIndent > 3) { continue }
+
+        // quirk for blockquotes, this line should already be checked by that rule
+        if (state.sCount[nextLine] < 0) { continue }
+
+        // Some tags can terminate paragraph without empty line.
+        terminate = false
+        for (i = 0, l = terminatorRules.length; i < l; i++) {
+          if (terminatorRules[i](state, nextLine, endLine, true)) {
+            terminate = true
+            break
+          }
+        }
+        if (terminate) { break }
+      }
+
+      content = state.getLines(startLine, nextLine, state.blkIndent, false).trim()
+
+      state.line = nextLine
+
+      token = state.push('paragraph_open', 'p', 1)
+      token.map = [startLine, state.line]
+
+      if (state.parentType === 'list') {
+        const match = content.match(/^\[( |x)\] ?(.+)/i)
+        if (match) {
+          const liToken = lastFindInArray(state.tokens, token => token.type === 'list_item_open')
+          if (liToken) {
+            if (!liToken.attrs) {
+              liToken.attrs = []
+            }
+            liToken.attrs.push(['class', 'taskListItem'])
+          }
+          content = `<label class='taskListItem${match[1] !== ' ' ? ' checked' : ''}' for='checkbox-${startLine + 1}'><input type='checkbox'${match[1] !== ' ' ? ' checked' : ''} id='checkbox-${startLine + 1}'/> ${content.substring(4, content.length)}</label>`
+        }
+      }
+
+      token = state.push('inline', '', 0)
+      token.content = content
+      token.map = [startLine, state.line]
+      token.children = []
+
+      token = state.push('paragraph_close', 'p', -1)
+
+      return true
+    })
+
+    // Add line number attribute for scrolling
+    const originalRender = this.md.renderer.render
+    this.md.renderer.render = (tokens, options, env) => {
+      tokens.forEach((token) => {
+        switch (token.type) {
+          case 'heading_open':
+          case 'paragraph_open':
+          case 'blockquote_open':
+          case 'table_open':
+            token.attrPush(['data-line', token.map[0]])
+        }
+      })
+      const result = originalRender.call(this.md.renderer, tokens, options, env)
+      return result
+    }
+    // FIXME We should not depend on global variable.
+    window.md = this.md
+  }
+
+  render (content) {
+    if (!_.isString(content)) content = ''
+    return this.md.render(content)
+  }
+
+  normalizeLinkText (linkText) {
+    return this.md.normalizeLinkText(linkText)
+  }
+}
+
+export default Markdown
+

browser/lib/markdownTextHelper.js

@@ -0,0 +1,39 @@
+/**
+ * @fileoverview Text trimmer for markdown note.
+ */
+
+/**
+ * @param {string} input
+ * @return {string}
+ */
+export function strip (input) {
+  let output = input
+  try {
+    output = output
+      .replace(/^([\s\t]*)([\*\-\+]|\d+\.)\s+/gm, '$1')
+      .replace(/\n={2,}/g, '\n')
+      .replace(/~~/g, '')
+      .replace(/`{3}.*\n/g, '')
+      .replace(/<(.*?)>/g, '$1')
+      .replace(/^[=\-]{2,}\s*$/g, '')
+      .replace(/\[\^.+?\](: .*?$)?/g, '')
+      .replace(/\s{0,2}\[.*?\]: .*?$/g, '')
+      .replace(/!\[.*?\][\[\(].*?[\]\)]/g, '')
+      .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
+      .replace(/>/g, '')
+      .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
+      .replace(/^#{1,6}\s*([^#]*)\s*(#{1,6})?/gm, '$1')
+      .replace(/(`{3,})(.*?)\1/gm, '$2')
+      .replace(/^-{3,}\s*$/g, '')
+      .replace(/`(.+?)`/g, '$1')
+      .replace(/\n{2,}/g, '\n\n')
+  } catch (e) {
+    console.error(e)
+    return input
+  }
+  return output
+}
+
+export default {
+  strip
+}

browser/lib/search.js

@@ -0,0 +1,43 @@
+import _ from 'lodash'
+
+export default function searchFromNotes (notes, search) {
+  if (search.trim().length === 0) return []
+  const searchBlocks = search.split(' ').filter(block => { return block !== '' })
+
+  let foundNotes = findByWord(notes, searchBlocks[0])
+  searchBlocks.forEach((block) => {
+    foundNotes = findByWord(foundNotes, block)
+    if (block.match(/^#.+/)) {
+      foundNotes = foundNotes.concat(findByTag(notes, block))
+    }
+  })
+  return foundNotes
+}
+
+function findByTag (notes, block) {
+  const tag = block.match(/#(.+)/)[1]
+  const regExp = new RegExp(_.escapeRegExp(tag), 'i')
+  return notes.filter((note) => {
+    if (!_.isArray(note.tags)) return false
+    return note.tags.some((_tag) => {
+      return _tag.match(regExp)
+    })
+  })
+}
+
+function findByWord (notes, block) {
+  const regExp = new RegExp(_.escapeRegExp(block), 'i')
+  return notes.filter((note) => {
+    if (_.isArray(note.tags) && note.tags.some((_tag) => {
+      return _tag.match(regExp)
+    })) {
+      return true
+    }
+    if (note.type === 'SNIPPET_NOTE') {
+      return note.description.match(regExp)
+    } else if (note.type === 'MARKDOWN_NOTE') {
+      return note.content.match(regExp)
+    }
+    return false
+  })
+}

browser/lib/utils.js

@@ -0,0 +1,11 @@
+export function lastFindInArray (array, callback) {
+  for (let i = array.length - 1; i >= 0; --i) {
+    if (callback(array[i], i, array)) {
+      return array[i]
+    }
+  }
+}
+
+export default {
+  lastFindInArray
+}

browser/main/Detail/Detail.styl

@@ -0,0 +1,32 @@
+.root
+  absolute top bottom right
+  display flex
+  align-items center
+  justify-content center
+
+.empty
+  height 320px
+  display flex
+  align-items center
+
+.empty-message
+  width 100%
+  font-size 36px
+  font-weight 600
+  line-height 56px
+  text-align center
+  color $ui-inactive-text-color
+
+body[data-theme="dark"]
+  .root
+    background-color $ui-dark-backgroundColor
+    border-left 1px solid $ui-dark-borderColor
+  .empty-message
+    color $ui-dark-inactive-text-color
+    
+body[data-theme="solarized-dark"]
+  .root
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    border-left 1px solid $ui-solarized-dark-borderColor
+  .empty-message
+    color $ui-solarized-dark-text-color

browser/main/Detail/DetailVars.styl

@@ -0,0 +1,11 @@
+/**
+ * Varibales for note detail space.
+ */
+
+// Margin on the left side and the right side for NoteDetail component.
+$note-detail-left-margin = 100px
+$note-detail-right-margin = 120px
+$snippet-note-detail-left-margin = 60px
+$snippet-note-detail-right-margin = 80px
+
+$note-detail-box-shadow = 2px 0 15px -8px #b1b1b1 inset

browser/main/Detail/FolderSelect.js

@@ -0,0 +1,289 @@
+import PropTypes from 'prop-types'
+import React 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()
+          const tabbable = document.querySelectorAll('a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])')
+          const 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) {
+    const { folders } = this.props
+    const search = this.refs.search.value
+    const 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 { optionIndex } = this.state
+    const { folders } = this.props
+
+    optionIndex++
+    if (optionIndex >= folders.length) optionIndex = 0
+
+    this.setState({
+      optionIndex
+    })
+  }
+
+  previousOption () {
+    const { folders } = this.props
+    let { optionIndex } = this.state
+
+    optionIndex--
+    if (optionIndex < 0) optionIndex = folders.length - 1
+
+    this.setState({
+      optionIndex
+    })
+  }
+
+  selectOption () {
+    const { folders } = this.props
+    const optionIndex = this.state.optionIndex
+
+    const 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 () {
+    const { className, data, value } = this.props
+    const splitted = value.split('-')
+    const storageKey = splitted.shift()
+    const folderKey = splitted.shift()
+    let options = []
+    data.storageMap.forEach((storage, index) => {
+      storage.folders.forEach((folder) => {
+        options.push({
+          storage: storage,
+          folder: folder
+        })
+      })
+    })
+
+    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+
+    if (this.state.search.trim().length > 0) {
+      const filter = new RegExp('^' + _.escapeRegExp(this.state.search), 'i')
+      options = options.filter((option) => filter.test(option.folder.name))
+    }
+
+    const 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' style={{color: currentOption.folder.color}}>
+            <div styleName='idle-label'>
+              <i className='fa fa-folder' />
+              <span styleName='idle-label-name'>
+                {currentOption.folder.name}
+              </span>
+            </div>
+          </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,135 @@
+.root
+  position relative
+  border solid 1px transparent
+  vertical-align middle
+  border-radius 2px
+  height 30px
+  transition 0.15s
+  user-select none
+  margin-right 10px
+
+.root--search, .root--focus
+  @extend .root
+  border-color $ui-input--focus-borderColor
+
+.idle
+  position relative
+  cursor pointer
+
+.idle-label
+  right 20px
+  overflow ellipsis
+  display flex
+  align-items center
+
+.idle-label-name
+  font-size 13px
+  font-weight 600
+  margin-left 4px
+
+.idle-label-name-surfix
+  font-size 15px
+  color $ui-inactive-text-color
+  margin-left 5px
+.idle-caret
+  absolute right top
+  height 34px
+  width 20px
+  line-height 34px
+  
+.search-input
+  vertical-align middle
+  position relative
+  top 0
+  font-size 14px
+  outline none
+  border none
+  width 100%
+  background-color transparent
+  padding 0 10px
+
+.search-optionList
+  position absolute
+  top 30px
+  max-height 450px
+  min-width 150px
+  overflow auto
+  z-index 200
+  border $ui-border
+  background-color white
+  border-radius 2px
+  padding 10px 6px
+
+.search-optionList-item
+  width 140px
+  height 34px
+  display flex
+  align-items center
+  box-sizing border-box
+  padding 0
+  margin-bottom 10px
+  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 3px transparent
+  padding 6px
+.search-optionList-item-name-surfix
+  font-size 10px
+  color $ui-inactive-text-color
+  margin-left 5px
+
+
+
+
+
+body[data-theme="dark"]
+  .root
+    color $ui-dark-text-color
+    &:hover
+      color white
+      background-color $ui-dark-button--hover-backgroundColor
+      border-color $ui-dark-borderColor
+
+  .root--search, .root--focus
+    @extend .root
+    background-color $ui-dark-button--hover-backgroundColor
+    border-color $ui-input--focus-borderColor
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+      border-color $ui-input--focus-borderColor
+
+  .idle-label-name-surfix
+    color $ui-dark-inactive-text-color
+
+  .search-input
+    color white
+    background-color transparent
+    border-color $ui-dark-borderColor
+
+  .search-optionList
+    color white
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-button--hover-backgroundColor
+
+  .search-optionList-item
+    &:hover
+      background-color lighten($ui-dark-button--hover-backgroundColor, 15%)
+
+  .search-optionList-item--active
+    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-button--active-color
+    &:hover
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-button--active-color
+  .search-optionList-item-name-surfix
+    color $ui-dark-inactive-text-color

browser/main/Detail/FullscreenButton.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './FullscreenButton.styl'
+
+const FullscreenButton = ({
+ onClick
+}) => (
+  <button styleName='control-fullScreenButton' title='Fullscreen' onMouseDown={(e) => onClick(e)}>
+    <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
+    <span styleName='tooltip'>Fullscreen</span>
+  </button>
+)
+
+FullscreenButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(FullscreenButton, styles)

browser/main/Detail/FullscreenButton.styl

@@ -0,0 +1,22 @@
+.control-fullScreenButton
+  top 80px
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 70px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="dark"]
+  .control-fullScreenButton
+    topBarButtonDark()

browser/main/Detail/InfoButton.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './InfoButton.styl'
+
+const InfoButton = ({
+  onClick
+}) => (
+  <button styleName='control-infoButton'
+    onClick={(e) => onClick(e)}
+  >
+    <img className='infoButton' src='../resources/icon/icon-info.svg' />
+    <span styleName='tooltip'>Info</span>
+  </button>
+)
+
+InfoButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(InfoButton, styles)

browser/main/Detail/InfoButton.styl

@@ -0,0 +1,25 @@
+.control-infoButton
+  top 10px
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 20px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.infoButton
+  padding 0px
+
+body[data-theme="dark"]
+  .control-infoButton
+    topBarButtonDark()

browser/main/Detail/InfoPanel.js

@@ -0,0 +1,112 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './InfoPanel.styl'
+import copy from 'copy-to-clipboard'
+
+class InfoPanel extends React.Component {
+  copyNoteLink () {
+    const {noteLink} = this.props
+    this.refs.noteLink.select()
+    copy(noteLink)
+  }
+
+  render () {
+    const {
+      storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml, wordCount, letterCount, type, print
+    } = this.props
+    return (
+      <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
+        <div>
+          <p styleName='modification-date'>{updatedAt}</p>
+          <p styleName='modification-date-desc'>MODIFICATION DATE</p>
+        </div>
+
+        <hr />
+
+        {type === 'SNIPPET_NOTE'
+          ? ''
+          : <div styleName='count-wrap'>
+            <div styleName='count-number'>
+              <p styleName='infoPanel-defaul-count'>{wordCount}</p>
+              <p styleName='infoPanel-sub-count'>Words</p>
+            </div>
+            <div styleName='count-number'>
+              <p styleName='infoPanel-defaul-count'>{letterCount}</p>
+              <p styleName='infoPanel-sub-count'>Letters</p>
+            </div>
+          </div>
+        }
+
+        {type === 'SNIPPET_NOTE'
+          ? ''
+          : <hr />
+        }
+
+        <div>
+          <p styleName='infoPanel-default'>{storageName}</p>
+          <p styleName='infoPanel-sub'>STORAGE</p>
+        </div>
+
+        <div>
+          <p styleName='infoPanel-default'>{folderName}</p>
+          <p styleName='infoPanel-sub'>FOLDER</p>
+        </div>
+
+        <div>
+          <p styleName='infoPanel-default'>{createdAt}</p>
+          <p styleName='infoPanel-sub'>CREATION DATE</p>
+        </div>
+
+        <div>
+          <input styleName='infoPanel-noteLink' ref='noteLink' value={noteLink} onClick={(e) => { e.target.select() }} />
+          <button onClick={() => this.copyNoteLink()} styleName='infoPanel-copyButton'>
+            <i className='fa fa-clipboard' />
+          </button>
+          <p styleName='infoPanel-sub'>NOTE LINK</p>
+        </div>
+
+        <hr />
+
+        <div id='export-wrap'>
+          <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
+            <i className='fa fa-file-code-o' />
+            <p>.md</p>
+          </button>
+
+          <button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
+            <i className='fa fa-file-text-o' />
+            <p>.txt</p>
+          </button>
+
+          <button styleName='export--enable' onClick={(e) => exportAsHtml(e)}>
+            <i className='fa fa-html5' />
+            <p>.html</p>
+          </button>
+
+          <button styleName='export--enable' onClick={(e) => print(e)}>
+            <i className='fa fa-print' />
+            <p>Print</p>
+          </button>
+        </div>
+      </div>
+    )
+  }
+}
+
+InfoPanel.propTypes = {
+  storageName: PropTypes.string.isRequired,
+  folderName: PropTypes.string.isRequired,
+  noteLink: PropTypes.string.isRequired,
+  updatedAt: PropTypes.string.isRequired,
+  createdAt: PropTypes.string.isRequired,
+  exportAsMd: PropTypes.func.isRequired,
+  exportAsTxt: PropTypes.func.isRequired,
+  exportAsHtml: PropTypes.func.isRequired,
+  wordCount: PropTypes.number,
+  letterCount: PropTypes.number,
+  type: PropTypes.string.isRequired,
+  print: PropTypes.func.isRequired
+}
+
+export default CSSModules(InfoPanel, styles)

browser/main/Detail/InfoPanel.styl

@@ -0,0 +1,217 @@
+.control-infoPanel
+  position fixed
+  pointer-events none
+  top 50px
+  z-index 200
+  line-height normal
+  border-radius 4px
+  opacity 0
+  transition 0.2s
+
+.control-infoButton-panel
+  z-index 200
+  margin-top 0px
+  right 25px
+  position absolute
+  padding 20px 25px 0 25px
+  width 300px
+  overflow auto
+  background-color $ui-noteList-backgroundColor
+  box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
+  border-radius 2px
+
+.modification-date
+  font-size 18px
+  line-height 30px
+  color $ui-text-color
+
+.modification-date-desc
+  font-size 18px
+  color $ui-inactive-text-color
+
+.control-infoButton-panel-trash
+  z-index 200
+  margin-top 0px
+  right 0px
+  position absolute
+  padding 20px 25px 0 25px
+  width 300px
+  background-color $ui-noteList-backgroundColor
+  box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
+  border-radius 2px
+
+.count-wrap
+	display flex
+	position relative
+	width 100%
+
+.count-number
+	position relative
+	display block
+	width 50%
+	overflow hidden
+	margin 0
+	padding 0
+
+.infoPanel-defaul-count
+  font-size 16px
+  line-height 30px
+  color $ui-text-color
+
+.infoPanel-sub-count
+  font-size 16px
+  color $ui-inactive-text-color
+  padding-bottom 8px
+
+.infoPanel-default
+  font-size 14px
+  line-height 30px
+  color $ui-text-color
+
+.infoPanel-sub
+  font-size 12px
+  font-weight 600
+  color $ui-inactive-text-color
+  padding-bottom 8px
+
+.infoPanel-noteLink
+  padding-right 5px
+  width 210px
+  height 25px
+  margin 6px 0
+
+.infoPanel-copyButton
+  outline none
+  font-size 16px
+  color #A0A0A0
+  background-color transparent
+  border none
+  margin 0 5px
+  border-radius 5px
+  cursor pointer
+  &:hover
+    transition 0.2s
+    background-color alpha($ui-button--hover-backgroundColor, 30%)
+    color $ui-inactive-text-color
+
+.infoPanel-trash
+  color #EA4447
+  font-weight 600
+  font-size 14px
+  width 70px
+  background-color rgba(226,33,113,0.1)
+  border none
+  outline none
+  border-radius 2px
+  margin-right 5px
+  padding 2px 5px
+
+[id=export-wrap]
+  height 90px
+  display flex
+  justify-content center
+  margin 20px 0 10px 0
+  button
+    outline none
+    font-size 48px
+    color #A0A0A0
+    background-color transparent
+    border none
+    margin 0 5px
+    border-radius 5px
+    &:hover
+      transition 0.2s
+      background-color alpha($ui-button--hover-backgroundColor, 30%)
+      color $ui-inactive-text-color
+  p
+    font-size 13px
+    color #A0A0A0
+    font-weight light
+    &:hover
+      color $ui-inactive-text-color
+
+.export--enable
+  cursor pointer
+
+.export--unable
+  cursor not-allowed
+
+body[data-theme="dark"]
+  .control-infoButton-panel
+    background-color $ui-dark-noteList-backgroundColor
+
+  .control-infoButton-panel-trash
+    background-color $ui-dark-noteList-backgroundColor
+
+  .modification-date
+    color $ui-dark-text-color
+
+  .modification-date-desc
+    color $ui-inactive-text-color
+
+  .infoPanel-defaul-count
+    color $ui-dark-text-color
+
+  .infoPanel-sub-count
+    color $ui-inactive-text-color
+
+  .infoPanel-default
+    color $ui-dark-text-color
+
+  .infoPanel-sub
+    color $ui-inactive-text-color
+
+  .infoPanel-noteLink
+    background-color alpha($ui-dark-borderColor, 60%)
+    color $ui-dark-text-color
+
+  [id=export-wrap]
+    button
+      color $ui-dark-inactive-text-color
+      &:hover
+        background-color alpha($ui-dark-borderColor, 20%)
+        color $ui-dark-text-color
+    p
+      color $ui-dark-inactive-text-color
+      &:hover
+        color $ui-dark-text-color
+
+body[data-theme="solarized-dark"]
+  .control-infoButton-panel
+    background-color $ui-solarized-dark-noteList-backgroundColor
+
+  .control-infoButton-panel-trash
+    background-color $ui-solarized-ark-noteList-backgroundColor
+
+  .modification-date
+    color $ui-solarized-ark-text-color
+
+  .modification-date-desc
+    color $ui-inactive-text-color
+
+  .infoPanel-defaul-count
+    color $ui-solarized-dark-text-color
+
+  .infoPanel-sub-count
+    color $ui-inactive-text-color
+
+  .infoPanel-default
+    color $ui-solarized-ark-text-color
+
+  .infoPanel-sub
+    color $ui-inactive-text-color
+
+  .infoPanel-noteLink
+    background-color alpha($ui-solarized-dark-borderColor, 20%)
+    color $ui-solarized-dark-text-color
+
+  [id=export-wrap]
+    button
+      color $ui-dark-inactive-text-color
+      &:hover
+        background-color alpha($ui-solarized-dark-borderColor, 20%)
+        color $ui-solarized-ark-text-color
+    p
+      color $ui-dark-inactive-text-color
+      &:hover
+        color $ui-solarized-ark-text-color

browser/main/Detail/InfoPanelTrashed.js

@@ -0,0 +1,66 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './InfoPanel.styl'
+
+const InfoPanelTrashed = ({
+  storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml
+}) => (
+  <div className='infoPanel' styleName='control-infoButton-panel-trash' style={{display: 'none'}}>
+    <div>
+      <p styleName='modification-date'>{updatedAt}</p>
+      <p styleName='modification-date-desc'>MODIFICATION DATE</p>
+    </div>
+
+    <hr />
+
+    <div>
+      <p styleName='infoPanel-default'>{storageName}</p>
+      <p styleName='infoPanel-sub'>STORAGE</p>
+    </div>
+
+    <div>
+      <p styleName='infoPanel-default'><text styleName='infoPanel-trash'>Trash</text>{folderName}</p>
+      <p styleName='infoPanel-sub'>FOLDER</p>
+    </div>
+
+    <div>
+      <p styleName='infoPanel-default'>{createdAt}</p>
+      <p styleName='infoPanel-sub'>CREATION DATE</p>
+    </div>
+
+    <div id='export-wrap'>
+      <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
+        <i className='fa fa-file-code-o' />
+        <p>.md</p>
+      </button>
+
+      <button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
+        <i className='fa fa-file-text-o' />
+        <p>.txt</p>
+      </button>
+
+      <button styleName='export--enable' onClick={(e) => exportAsHtml(e)}>
+        <i className='fa fa-html5' />
+        <p>.html</p>
+      </button>
+
+      <button styleName='export--unable'>
+        <i className='fa fa-file-pdf-o' />
+        <p>.pdf</p>
+      </button>
+    </div>
+  </div>
+)
+
+InfoPanelTrashed.propTypes = {
+  storageName: PropTypes.string.isRequired,
+  folderName: PropTypes.string.isRequired,
+  updatedAt: PropTypes.string.isRequired,
+  createdAt: PropTypes.string.isRequired,
+  exportAsMd: PropTypes.func.isRequired,
+  exportAsTxt: PropTypes.func.isRequired,
+  exportAsHtml: PropTypes.func.isRequired
+}
+
+export default CSSModules(InfoPanelTrashed, styles)

browser/main/Detail/MarkdownNoteDetail.js

@@ -0,0 +1,444 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './MarkdownNoteDetail.styl'
+import MarkdownEditor from 'browser/components/MarkdownEditor'
+import MarkdownSplitEditor from 'browser/components/MarkdownSplitEditor'
+import TodoListPercentage from 'browser/components/TodoListPercentage'
+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'
+import markdown from 'browser/lib/markdownTextHelper'
+import StatusBar from '../StatusBar'
+import _ from 'lodash'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import TrashButton from './TrashButton'
+import FullscreenButton from './FullscreenButton'
+import RestoreButton from './RestoreButton'
+import PermanentDeleteButton from './PermanentDeleteButton'
+import InfoButton from './InfoButton'
+import ToggleModeButton from './ToggleModeButton'
+import InfoPanel from './InfoPanel'
+import InfoPanelTrashed from './InfoPanelTrashed'
+import { formatDate } from 'browser/lib/date-formatter'
+import { getTodoPercentageOfCompleted } from 'browser/lib/getTodoStatus'
+import striptags from 'striptags'
+
+class MarkdownNoteDetail extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isMovingNote: false,
+      note: Object.assign({
+        title: '',
+        content: ''
+      }, props.note),
+      isLockButtonShown: false,
+      isLocked: false,
+      editorType: props.config.editor.type
+    }
+    this.dispatchTimer = null
+
+    this.toggleLockButton = this.handleToggleLockButton.bind(this)
+  }
+
+  focus () {
+    this.refs.content.focus()
+  }
+
+  componentDidMount () {
+    ee.on('topbar:togglelockbutton', this.toggleLockButton)
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
+      if (this.saveQueue != null) this.saveNow()
+      this.setState({
+        note: Object.assign({}, nextProps.note)
+      }, () => {
+        this.refs.content.reload()
+        if (this.refs.tags) this.refs.tags.reset()
+      })
+    }
+  }
+
+  componentWillUnmount () {
+    ee.off('topbar:togglelockbutton', this.toggleLockButton)
+    if (this.saveQueue != null) this.saveNow()
+  }
+
+  handleUpdateTag () {
+    const { note } = this.state
+    if (this.refs.tags) note.tags = this.refs.tags.value
+    this.updateNote(note)
+  }
+
+  handleUpdateContent () {
+    const { note } = this.state
+    note.content = this.refs.content.value
+    note.title = markdown.strip(striptags(findNoteTitle(note.content)))
+    this.updateNote(note)
+  }
+
+  updateNote (note) {
+    note.updatedAt = new Date()
+    this.setState({note}, () => {
+      this.save()
+    })
+  }
+
+  save () {
+    clearTimeout(this.saveQueue)
+    this.saveQueue = setTimeout(() => {
+      this.saveNow()
+    }, 1000)
+  }
+
+  saveNow () {
+    const { note, dispatch } = this.props
+    clearTimeout(this.saveQueue)
+    this.saveQueue = null
+
+    dataApi
+      .updateNote(note.storage, note.key, this.state.note)
+      .then((note) => {
+        dispatch({
+          type: 'UPDATE_NOTE',
+          note: note
+        })
+        AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
+      })
+  }
+
+  handleFolderChange (e) {
+    const { note } = this.state
+    const value = this.refs.folder.value
+    const splitted = value.split('-')
+    const newStorageKey = splitted.shift()
+    const newFolderKey = splitted.shift()
+
+    dataApi
+      .moveNote(note.storage, note.key, newStorageKey, newFolderKey)
+      .then((newNote) => {
+        this.setState({
+          isMovingNote: true,
+          note: Object.assign({}, newNote)
+        }, () => {
+          const { dispatch, location } = this.props
+          dispatch({
+            type: 'MOVE_NOTE',
+            originNote: note,
+            note: newNote
+          })
+          hashHistory.replace({
+            pathname: location.pathname,
+            query: {
+              key: newNote.key
+            }
+          })
+          this.setState({
+            isMovingNote: false
+          })
+        })
+      })
+  }
+
+  handleStarButtonClick (e) {
+    const { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
+
+    note.isStarred = !note.isStarred
+
+    this.setState({
+      note
+    }, () => {
+      this.save()
+    })
+  }
+
+  exportAsFile () {
+
+  }
+
+  exportAsMd () {
+    ee.emit('export:save-md')
+  }
+
+  exportAsTxt () {
+    ee.emit('export:save-text')
+  }
+
+  exportAsHtml () {
+    ee.emit('export:save-html')
+  }
+
+  handleTrashButtonClick (e) {
+    const { note } = this.state
+    const { isTrashed } = note
+    const { confirmDeletion } = this.props
+
+    if (isTrashed) {
+      if (confirmDeletion(true)) {
+        const {note, dispatch} = this.props
+        dataApi
+          .deleteNote(note.storage, note.key)
+          .then((data) => {
+            const dispatchHandler = () => {
+              dispatch({
+                type: 'DELETE_NOTE',
+                storageKey: data.storageKey,
+                noteKey: data.noteKey
+              })
+            }
+            ee.once('list:next', dispatchHandler)
+          })
+          .then(() => ee.emit('list:next'))
+      }
+    } else {
+      if (confirmDeletion()) {
+        note.isTrashed = true
+
+        this.setState({
+          note
+        }, () => {
+          this.save()
+        })
+
+        ee.emit('list:next')
+      }
+    }
+  }
+
+  handleUndoButtonClick (e) {
+    const { note } = this.state
+
+    note.isTrashed = false
+
+    this.setState({
+      note
+    }, () => {
+      this.save()
+      this.refs.content.reload()
+      ee.emit('list:next')
+    })
+  }
+
+  handleFullScreenButton (e) {
+    ee.emit('editor:fullscreen')
+  }
+
+  handleLockButtonMouseDown (e) {
+    e.preventDefault()
+    ee.emit('editor:lock')
+    this.setState({ isLocked: !this.state.isLocked })
+    if (this.state.isLocked) this.focus()
+  }
+
+  getToggleLockButton () {
+    return this.state.isLocked ? '../resources/icon/icon-previewoff-on.svg' : '../resources/icon/icon-previewoff-off.svg'
+  }
+
+  handleDeleteKeyDown (e) {
+    if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
+  }
+
+  handleToggleLockButton (event, noteStatus) {
+    // first argument event is not used
+    if (this.props.config.editor.switchPreview === 'BLUR' && noteStatus === 'CODE') {
+      this.setState({isLockButtonShown: true})
+    } else {
+      this.setState({isLockButtonShown: false})
+    }
+  }
+
+  handleFocus (e) {
+    this.focus()
+  }
+
+  handleInfoButtonClick (e) {
+    const infoPanel = document.querySelector('.infoPanel')
+    if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none'
+  }
+
+  print (e) {
+    ee.emit('print')
+  }
+
+  handleSwitchMode (type) {
+    this.setState({ editorType: type }, () => {
+      const newConfig = Object.assign({}, this.props.config)
+      newConfig.editor.type = type
+      ConfigManager.set(newConfig)
+    })
+  }
+
+  renderEditor () {
+    const { config, ignorePreviewPointerEvents } = this.props
+    const { note } = this.state
+    if (this.state.editorType === 'EDITOR_PREVIEW') {
+      return <MarkdownEditor
+        ref='content'
+        styleName='body-noteEditor'
+        config={config}
+        value={note.content}
+        storageKey={note.storage}
+        onChange={this.handleUpdateContent.bind(this)}
+        ignorePreviewPointerEvents={ignorePreviewPointerEvents}
+      />
+    } else {
+      return <MarkdownSplitEditor
+        ref='content'
+        config={config}
+        value={note.content}
+        storageKey={note.storage}
+        onChange={this.handleUpdateContent.bind(this)}
+        ignorePreviewPointerEvents={ignorePreviewPointerEvents}
+      />
+    }
+  }
+
+  render () {
+    const { data, location } = this.props
+    const { note, editorType } = this.state
+    const storageKey = note.storage
+    const folderKey = note.folder
+
+    const options = []
+    data.storageMap.forEach((storage, index) => {
+      storage.folders.forEach((folder) => {
+        options.push({
+          storage: storage,
+          folder: folder
+        })
+      })
+    })
+    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+
+    const trashTopBar = <div styleName='info'>
+      <div styleName='info-left'>
+        <RestoreButton onClick={(e) => this.handleUndoButtonClick(e)} />
+      </div>
+      <div styleName='info-right'>
+        <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+        <InfoPanelTrashed
+          storageName={currentOption.storage.name}
+          folderName={currentOption.folder.name}
+          updatedAt={formatDate(note.updatedAt)}
+          createdAt={formatDate(note.createdAt)}
+          exportAsHtml={this.exportAsHtml}
+          exportAsMd={this.exportAsMd}
+          exportAsTxt={this.exportAsTxt}
+        />
+      </div>
+    </div>
+
+    const detailTopBar = <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'
+            data={data}
+            onChange={(e) => this.handleFolderChange(e)}
+          />
+        </div>
+
+        <TagSelect
+          ref='tags'
+          value={this.state.note.tags}
+          onChange={this.handleUpdateTag.bind(this)}
+        />
+        <TodoListPercentage percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
+      </div>
+      <div styleName='info-right'>
+        <ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
+        <StarButton
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+
+        {(() => {
+          const imgSrc = `${this.getToggleLockButton()}`
+          const lockButtonComponent =
+            <button styleName='control-lockButton'
+              onFocus={(e) => this.handleFocus(e)}
+              onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
+            >
+              <img styleName='iconInfo' src={imgSrc} />
+              {this.state.isLocked ? <span styleName='tooltip'>Unlock</span> : <span styleName='tooltip'>Lock</span>}
+            </button>
+
+          return (
+            this.state.isLockButtonShown ? lockButtonComponent : ''
+          )
+        })()}
+
+        <FullscreenButton onClick={(e) => this.handleFullScreenButton(e)} />
+
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+
+        <InfoPanel
+          storageName={currentOption.storage.name}
+          folderName={currentOption.folder.name}
+          noteLink={`[${note.title}](:note:${location.query.key})`}
+          updatedAt={formatDate(note.updatedAt)}
+          createdAt={formatDate(note.createdAt)}
+          exportAsMd={this.exportAsMd}
+          exportAsTxt={this.exportAsTxt}
+          exportAsHtml={this.exportAsHtml}
+          wordCount={note.content.split(' ').length}
+          letterCount={note.content.replace(/\r?\n/g, '').length}
+          type={note.type}
+          print={this.print}
+        />
+      </div>
+    </div>
+
+    return (
+      <div className='NoteDetail'
+        style={this.props.style}
+        styleName='root'
+      >
+
+        {location.pathname === '/trashed' ? trashTopBar : detailTopBar}
+
+        <div styleName='body'>
+          {this.renderEditor()}
+        </div>
+
+        <StatusBar
+          {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+          date={note.updatedAt}
+        />
+      </div>
+    )
+  }
+}
+
+MarkdownNoteDetail.propTypes = {
+  dispatch: PropTypes.func,
+  repositories: PropTypes.array,
+  note: PropTypes.shape({
+
+  }),
+  style: PropTypes.shape({
+    left: PropTypes.number
+  }),
+  ignorePreviewPointerEvents: PropTypes.bool,
+  confirmDeletion: PropTypes.bool.isRequired
+}
+
+export default CSSModules(MarkdownNoteDetail, styles)

browser/main/Detail/MarkdownNoteDetail.styl

@@ -0,0 +1,73 @@
+@import('NoteDetailInfo')
+@import('DetailVars')
+
+.root
+  absolute top right bottom
+  border-left 1px solid alpha(#DEDEDE, 60%)
+  background-color $ui-noteDetail-backgroundColor
+  box-shadow none
+  padding 20px 40px
+  overflow hidden
+
+.lock-button
+  padding-bottom 3px
+
+.control-lockButton
+  topBarButtonRight()
+  position absolute
+  right 225px
+  &:hover .tooltip
+    opacity 1
+
+  .tooltip
+    tooltip()
+    position absolute
+    pointer-events none
+    top 35px
+    right -10px
+    width 50px
+    z-index 200
+    padding 5px
+    line-height normal
+    border-radius 2px
+    opacity 0
+    transition 0.1s
+
+.trashed-infopanel
+  position relative
+
+.body
+  absolute left right
+  left 0
+  right 0
+  top $info-height + $info-margin-under-border
+  bottom $statusBar-height
+  margin 0 30px
+.body-noteEditor
+  absolute top bottom left right
+
+body[data-theme="white"]
+  .root
+    box-shadow $note-detail-box-shadow
+    border none
+
+body[data-theme="dark"]
+  .root
+    background-color $ui-dark-noteDetail-backgroundColor
+    box-shadow none
+    border-left 1px solid $ui-dark-borderColor
+
+  .control-lockButton
+    topBarButtonDark()
+
+  .control-lockButton-tooltip
+    darkTooltip()
+
+  .control-fullScreenButton
+    topBarButtonDark()
+
+
+body[data-theme="solarized-dark"]
+  .root
+    border-left 1px solid $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteDetail-backgroundColor

browser/main/Detail/NoteDetailInfo.styl

@@ -0,0 +1,100 @@
+@import('DetailVars')
+
+$info-height = 60px
+$info-margin-under-border = 30px
+
+.info
+  absolute top left right
+  left 0
+  right 0
+  height $info-height
+  background-color $ui-noteDetail-backgroundColor
+  width 100%
+  display flex
+  align-items center
+  padding 0 20px
+
+.info-left
+  padding 0 10px
+  width 100%
+  display flex
+  align-items center
+
+.info-left-top-folderSelect
+  display flex
+  align-items center
+  justify-content center
+
+.info-left-button
+  width 34px
+  height 34px
+  navButtonColor()
+  color $ui-favorite-star-button-color
+  font-size 14px
+  line-height 0
+  margin 13px 2px
+  padding 0
+  border-radius 17px
+  &:hover .info-left-button-tooltip
+    opacity 1
+  &:focus
+    border-color $ui-favorite-star-button-color
+  &:active, &:active:hover
+    background-color $ui-favorite-star-button-color
+    color $ui-button--color
+
+.info-right
+  z-index 101
+  display inline-flex
+  margin-top 3px
+
+.undo-button
+  width 34px
+  height 34px
+  border-radius 17px
+  font-size 14px
+  margin 5px 0px
+  border none
+  color $ui-button-color
+  display flex
+  align-items center
+  justify-content center
+  fill $ui-button-color
+  background-color transparent
+  cursor pointer
+  &:active
+    border-color $ui-button--active-backgroundColor
+  &:hover
+    background-color alpha($ui-button--hover-backgroundColor, 60%)
+    transition 0.2s
+    .control-lockButton-tooltip
+      opacity 1
+
+body[data-theme="dark"]
+  .info
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
+
+  .info-delete
+    color $ui-dark-text-color
+
+  .info-delete-confirmButton
+    colorDarkDangerButton()
+    color $ui-dark-text-color
+
+  .info-delete-cancelButton
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+
+  .info-right
+    background-color $ui-dark-noteDetail-backgroundColor
+
+  .undo-button
+    topBarButtonDark()
+
+body[data-theme="solarized-dark"]
+  .info
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    

browser/main/Detail/PermanentDeleteButton.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TrashButton.styl'
+
+const PermanentDeleteButton = ({
+  onClick
+}) => (
+  <button styleName='control-trashButton--in-trash'
+    onClick={(e) => onClick(e)}
+  >
+    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+    <span styleName='tooltip'>Permanent Delete</span>
+  </button>
+)
+
+PermanentDeleteButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(PermanentDeleteButton, styles)

browser/main/Detail/RestoreButton.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './RestoreButton.styl'
+
+const RestoreButton = ({
+  onClick
+}) => (
+  <button styleName='control-restoreButton'
+    onClick={onClick}
+  >
+    <i className='fa fa-undo fa-fw' styleName='iconRestore' />
+    <span styleName='tooltip'>Restore</span>
+  </button>
+)
+
+RestoreButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(RestoreButton, styles)

browser/main/Detail/RestoreButton.styl

@@ -0,0 +1,22 @@
+.control-restoreButton
+  top 115px
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  left 25px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="dark"]
+  .control-restoreButton
+    topBarButtonDark()

browser/main/Detail/SnippetNoteDetail.js

@@ -0,0 +1,743 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SnippetNoteDetail.styl'
+import CodeEditor from 'browser/components/CodeEditor'
+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'
+import CodeMirror from 'codemirror'
+import 'codemirror-mode-elixir'
+import SnippetTab from 'browser/components/SnippetTab'
+import StatusBar from '../StatusBar'
+import context from 'browser/lib/context'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import _ from 'lodash'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import TrashButton from './TrashButton'
+import RestoreButton from './RestoreButton'
+import PermanentDeleteButton from './PermanentDeleteButton'
+import InfoButton from './InfoButton'
+import InfoPanel from './InfoPanel'
+import InfoPanelTrashed from './InfoPanelTrashed'
+import { formatDate } from 'browser/lib/date-formatter'
+
+function pass (name) {
+  switch (name) {
+    case 'ejs':
+      return 'Embedded Javascript'
+    case 'html_ruby':
+      return 'Embedded Ruby'
+    case 'objectivec':
+      return 'Objective C'
+    case 'text':
+      return 'Plain Text'
+    default:
+      return name
+  }
+}
+
+const electron = require('electron')
+const { remote } = electron
+const { Menu, MenuItem, dialog } = remote
+
+class SnippetNoteDetail extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isMovingNote: false,
+      snippetIndex: 0,
+      note: Object.assign({
+        description: ''
+      }, props.note, {
+        snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet))
+      })
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
+      if (this.saveQueue != null) this.saveNow()
+      const nextNote = Object.assign({
+        description: ''
+      }, nextProps.note, {
+        snippets: nextProps.note.snippets.map((snippet) => Object.assign({}, snippet))
+      })
+      this.setState({
+        snippetIndex: 0,
+        note: nextNote
+      }, () => {
+        const { snippets } = this.state.note
+        snippets.forEach((snippet, index) => {
+          this.refs['code-' + index].reload()
+        })
+        if (this.refs.tags) this.refs.tags.reset()
+      })
+    }
+  }
+
+  componentWillUnmount () {
+    if (this.saveQueue != null) this.saveNow()
+  }
+
+  handleChange (e) {
+    const { note } = this.state
+
+    if (this.refs.tags) note.tags = this.refs.tags.value
+    note.description = this.refs.description.value
+    note.updatedAt = new Date()
+    note.title = findNoteTitle(note.description)
+
+    this.setState({
+      note
+    }, () => {
+      this.save()
+    })
+  }
+
+  save () {
+    clearTimeout(this.saveQueue)
+    this.saveQueue = setTimeout(() => {
+      this.saveNow()
+    }, 1000)
+  }
+
+  saveNow () {
+    const { note, dispatch } = this.props
+    clearTimeout(this.saveQueue)
+    this.saveQueue = null
+
+    dataApi
+      .updateNote(note.storage, note.key, this.state.note)
+      .then((note) => {
+        dispatch({
+          type: 'UPDATE_NOTE',
+          note: note
+        })
+        AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
+      })
+  }
+
+  handleFolderChange (e) {
+    const { note } = this.state
+    const value = this.refs.folder.value
+    const splitted = value.split('-')
+    const newStorageKey = splitted.shift()
+    const newFolderKey = splitted.shift()
+
+    dataApi
+      .moveNote(note.storage, note.key, newStorageKey, newFolderKey)
+      .then((newNote) => {
+        this.setState({
+          isMovingNote: true,
+          note: Object.assign({}, newNote)
+        }, () => {
+          const { dispatch, location } = this.props
+          dispatch({
+            type: 'MOVE_NOTE',
+            originNote: note,
+            note: newNote
+          })
+          hashHistory.replace({
+            pathname: location.pathname,
+            query: {
+              key: newNote.key
+            }
+          })
+          this.setState({
+            isMovingNote: false
+          })
+        })
+      })
+  }
+
+  handleStarButtonClick (e) {
+    const { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
+
+    note.isStarred = !note.isStarred
+
+    this.setState({
+      note
+    }, () => {
+      this.save()
+    })
+  }
+
+  exportAsFile () {
+
+  }
+
+  handleTrashButtonClick (e) {
+    const { note } = this.state
+    const { isTrashed } = note
+    const { confirmDeletion } = this.props
+
+    if (isTrashed) {
+      if (confirmDeletion(true)) {
+        const {note, dispatch} = this.props
+        dataApi
+          .deleteNote(note.storage, note.key)
+          .then((data) => {
+            const dispatchHandler = () => {
+              dispatch({
+                type: 'DELETE_NOTE',
+                storageKey: data.storageKey,
+                noteKey: data.noteKey
+              })
+            }
+            ee.once('list:next', dispatchHandler)
+          })
+          .then(() => ee.emit('list:next'))
+      }
+    } else {
+      if (confirmDeletion()) {
+        note.isTrashed = true
+
+        this.setState({
+          note
+        }, () => {
+          this.save()
+        })
+
+        ee.emit('list:next')
+      }
+    }
+  }
+
+  handleUndoButtonClick (e) {
+    const { note } = this.state
+
+    note.isTrashed = false
+
+    this.setState({
+      note
+    }, () => {
+      this.save()
+      ee.emit('list:next')
+    })
+  }
+
+  handleFullScreenButton (e) {
+    ee.emit('editor:fullscreen')
+  }
+
+  handleTabPlusButtonClick (e) {
+    this.addSnippet()
+  }
+
+  handleTabButtonClick (e, index) {
+    this.setState({
+      snippetIndex: index
+    })
+  }
+
+  handleTabDragStart (e, index) {
+    e.dataTransfer.setData('text/plain', index)
+  }
+
+  handleTabDrop (e, index) {
+    const oldIndex = parseInt(e.dataTransfer.getData('text'))
+
+    const snippets = this.state.note.snippets.slice()
+    const draggedSnippet = snippets[oldIndex]
+    snippets[oldIndex] = snippets[index]
+    snippets[index] = draggedSnippet
+    const snippetIndex = index
+
+    const note = Object.assign({}, this.state.note, {snippets})
+    this.setState({ note, snippetIndex }, () => {
+      this.save()
+      this.refs['code-' + index].reload()
+      this.refs['code-' + oldIndex].reload()
+    })
+  }
+
+  handleTabDeleteButtonClick (e, index) {
+    if (this.state.note.snippets.length > 1) {
+      if (this.state.note.snippets[index].content.trim().length > 0) {
+        const dialogIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+          type: 'warning',
+          message: 'Delete a snippet',
+          detail: 'This work cannot be undone.',
+          buttons: ['Confirm', 'Cancel']
+        })
+        if (dialogIndex === 0) {
+          this.deleteSnippetByIndex(index)
+        }
+      } else {
+        this.deleteSnippetByIndex(index)
+      }
+    }
+  }
+
+  deleteSnippetByIndex (index) {
+    const snippets = this.state.note.snippets.slice()
+    snippets.splice(index, 1)
+    const note = Object.assign({}, this.state.note, {snippets})
+    const snippetIndex = this.state.snippetIndex >= snippets.length
+      ? snippets.length - 1
+      : this.state.snippetIndex
+    this.setState({ note, snippetIndex }, () => {
+      this.save()
+      this.refs['code-' + this.state.snippetIndex].reload()
+    })
+  }
+
+  renameSnippetByIndex (index, name) {
+    const snippets = this.state.note.snippets.slice()
+    snippets[index].name = name
+    const syntax = CodeMirror.findModeByFileName(name.trim())
+    const mode = syntax != null ? syntax.name : null
+    if (mode != null) {
+      snippets[index].mode = mode
+      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('SNIPPET_LANG', {
+        name: mode
+      })
+    }
+    this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
+
+    this.setState({
+      note: this.state.note
+    }, () => {
+      this.save()
+    })
+  }
+
+  handleModeOptionClick (index, name) {
+    return (e) => {
+      const snippets = this.state.note.snippets.slice()
+      snippets[index].mode = name
+      this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
+
+      this.setState({
+        note: this.state.note
+      }, () => {
+        this.save()
+      })
+
+      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('SELECT_LANG', {
+        name
+      })
+    }
+  }
+
+  handleCodeChange (index) {
+    return (e) => {
+      const snippets = this.state.note.snippets.slice()
+      snippets[index].content = this.refs['code-' + index].value
+      this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
+      this.setState({
+        note: this.state.note
+      }, () => {
+        this.save()
+      })
+    }
+  }
+
+  handleKeyDown (e) {
+    switch (e.keyCode) {
+      // tab key
+      case 9:
+        if (e.ctrlKey && !e.shiftKey) {
+          e.preventDefault()
+          this.jumpNextTab()
+        } else if (e.ctrlKey && e.shiftKey) {
+          e.preventDefault()
+          this.jumpPrevTab()
+        } else if (!e.ctrlKey && !e.shiftKey && e.target === this.refs.description) {
+          e.preventDefault()
+          this.focusEditor()
+        }
+        break
+      // L key
+      case 76:
+        {
+          const isSuper = global.process.platform === 'darwin'
+            ? e.metaKey
+            : e.ctrlKey
+          if (isSuper) {
+            e.preventDefault()
+            this.focus()
+          }
+        }
+        break
+      // T key
+      case 84:
+        {
+          const isSuper = global.process.platform === 'darwin'
+            ? e.metaKey
+            : e.ctrlKey
+          if (isSuper) {
+            e.preventDefault()
+            this.addSnippet()
+          }
+        }
+        break
+    }
+  }
+
+  handleModeButtonClick (e, index) {
+    const menu = new Menu()
+    CodeMirror.modeInfo.sort(function (a, b) { return a.name.localeCompare(b.name) }).forEach((mode) => {
+      menu.append(new MenuItem({
+        label: mode.name,
+        click: (e) => this.handleModeOptionClick(index, mode.name)(e)
+      }))
+    })
+    menu.popup(remote.getCurrentWindow())
+  }
+
+  handleIndentTypeButtonClick (e) {
+    context.popup([
+      {
+        label: 'tab',
+        click: (e) => this.handleIndentTypeItemClick(e, 'tab')
+      },
+      {
+        label: 'space',
+        click: (e) => this.handleIndentTypeItemClick(e, 'space')
+      }
+    ])
+  }
+
+  handleIndentSizeButtonClick (e) {
+    context.popup([
+      {
+        label: '2',
+        click: (e) => this.handleIndentSizeItemClick(e, 2)
+      },
+      {
+        label: '4',
+        click: (e) => this.handleIndentSizeItemClick(e, 4)
+      },
+      {
+        label: '8',
+        click: (e) => this.handleIndentSizeItemClick(e, 8)
+      }
+    ])
+  }
+
+  handleIndentSizeItemClick (e, indentSize) {
+    const { config, dispatch } = this.props
+    const editor = Object.assign({}, config.editor, {
+      indentSize
+    })
+    ConfigManager.set({
+      editor
+    })
+    dispatch({
+      type: 'SET_CONFIG',
+      config: {
+        editor
+      }
+    })
+  }
+
+  handleIndentTypeItemClick (e, indentType) {
+    const { config, dispatch } = this.props
+    const editor = Object.assign({}, config.editor, {
+      indentType
+    })
+    ConfigManager.set({
+      editor
+    })
+    dispatch({
+      type: 'SET_CONFIG',
+      config: {
+        editor
+      }
+    })
+  }
+
+  focus () {
+    this.refs.description.focus()
+  }
+
+  addSnippet () {
+    const { note } = this.state
+
+    note.snippets = note.snippets.concat([{
+      name: '',
+      mode: 'Plain Text',
+      content: ''
+    }])
+    const snippetIndex = note.snippets.length - 1
+
+    this.setState({
+      note,
+      snippetIndex
+    }, () => {
+      this.refs['tab-' + snippetIndex].startRenaming()
+    })
+  }
+
+  jumpNextTab () {
+    this.setState({
+      snippetIndex: (this.state.snippetIndex + 1) % this.state.note.snippets.length
+    }, () => {
+      this.focusEditor()
+    })
+  }
+
+  jumpPrevTab () {
+    this.setState({
+      snippetIndex: (this.state.snippetIndex - 1 + this.state.note.snippets.length) % this.state.note.snippets.length
+    }, () => {
+      this.focusEditor()
+    })
+  }
+
+  focusEditor () {
+    console.log('code-' + this.state.snippetIndex)
+    this.refs['code-' + this.state.snippetIndex].focus()
+  }
+
+  handleInfoButtonClick (e) {
+    const infoPanel = document.querySelector('.infoPanel')
+    if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none'
+  }
+
+  showWarning () {
+    dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: 'Sorry!',
+      detail: 'md/text import is available only a markdown note.',
+      buttons: ['OK']
+    })
+  }
+
+  render () {
+    const { data, config, location } = this.props
+    const { note } = this.state
+
+    const storageKey = note.storage
+    const folderKey = note.folder
+
+    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
+
+    const tabList = note.snippets.map((snippet, index) => {
+      const isActive = this.state.snippetIndex === index
+
+      return <SnippetTab
+        key={index}
+        ref={'tab-' + index}
+        snippet={snippet}
+        isActive={isActive}
+        onClick={(e) => this.handleTabButtonClick(e, index)}
+        onDelete={(e) => this.handleTabDeleteButtonClick(e, index)}
+        onRename={(name) => this.renameSnippetByIndex(index, name)}
+        isDeletable={note.snippets.length > 1}
+        onDragStart={(e) => this.handleTabDragStart(e, index)}
+        onDrop={(e) => this.handleTabDrop(e, index)}
+      />
+    })
+
+    const viewList = note.snippets.map((snippet, index) => {
+      const isActive = this.state.snippetIndex === index
+
+      let syntax = CodeMirror.findModeByName(pass(snippet.mode))
+      if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
+
+      return <div styleName='tabView'
+        key={index}
+        style={{zIndex: isActive ? 5 : 4}}
+      >
+        {snippet.mode === 'Markdown' || snippet.mode === 'GitHub Flavored Markdown'
+          ? <MarkdownEditor styleName='tabView-content'
+            value={snippet.content}
+            config={config}
+            onChange={(e) => this.handleCodeChange(index)(e)}
+            ref={'code-' + index}
+            ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
+            storageKey={storageKey}
+          />
+          : <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}
+            displayLineNumbers={config.editor.displayLineNumbers}
+            keyMap={config.editor.keyMap}
+            scrollPastEnd={config.editor.scrollPastEnd}
+            fetchUrlTitle={config.editor.fetchUrlTitle}
+            onChange={(e) => this.handleCodeChange(index)(e)}
+            ref={'code-' + index}
+          />
+        }
+      </div>
+    })
+
+    const options = []
+    data.storageMap.forEach((storage, index) => {
+      storage.folders.forEach((folder) => {
+        options.push({
+          storage: storage,
+          folder: folder
+        })
+      })
+    })
+    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+
+    const trashTopBar = <div styleName='info'>
+      <div styleName='info-left'>
+        <RestoreButton onClick={(e) => this.handleUndoButtonClick(e)} />
+      </div>
+      <div styleName='info-right'>
+        <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+        <InfoPanelTrashed
+          storageName={currentOption.storage.name}
+          folderName={currentOption.folder.name}
+          updatedAt={formatDate(note.updatedAt)}
+          createdAt={formatDate(note.createdAt)}
+          exportAsMd={this.showWarning}
+          exportAsTxt={this.showWarning}
+          exportAsHtml={this.showWarning}
+        />
+      </div>
+    </div>
+
+    const detailTopBar = <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'
+            data={data}
+            onChange={(e) => this.handleFolderChange(e)}
+          />
+        </div>
+
+        <TagSelect
+          ref='tags'
+          value={this.state.note.tags}
+          onChange={(e) => this.handleChange(e)}
+        />
+      </div>
+      <div styleName='info-right'>
+        <StarButton
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+
+        <button styleName='control-fullScreenButton' title='Fullscreen'
+          onMouseDown={(e) => this.handleFullScreenButton(e)}>
+          <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
+          <span styleName='tooltip'>Fullscreen</span>
+        </button>
+
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+
+        <InfoPanel
+          storageName={currentOption.storage.name}
+          folderName={currentOption.folder.name}
+          noteLink={`[${note.title}](:note:${location.query.key})`}
+          updatedAt={formatDate(note.updatedAt)}
+          createdAt={formatDate(note.createdAt)}
+          exportAsMd={this.showWarning}
+          exportAsTxt={this.showWarning}
+          type={note.type}
+        />
+      </div>
+    </div>
+
+    return (
+      <div className='NoteDetail'
+        style={this.props.style}
+        styleName='root'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
+        {location.pathname === '/trashed' ? trashTopBar : detailTopBar}
+
+        <div styleName='body'>
+          <div styleName='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'>
+            <div styleName='list'>
+              {tabList}
+            </div>
+            <button styleName='plusButton'
+              onClick={(e) => this.handleTabPlusButtonClick(e)}
+            >
+              <i className='fa fa-plus' />
+            </button>
+          </div>
+          {viewList}
+        </div>
+
+        <div styleName='override'>
+          <button
+            onClick={(e) => this.handleModeButtonClick(e, this.state.snippetIndex)}
+          >
+            {this.state.note.snippets[this.state.snippetIndex].mode == null
+              ? 'Select Syntax...'
+              : this.state.note.snippets[this.state.snippetIndex].mode
+            }&nbsp;
+            <i className='fa fa-caret-down' />
+          </button>
+          <button
+            onClick={(e) => this.handleIndentTypeButtonClick(e)}
+          >
+            Indent: {config.editor.indentType}&nbsp;
+            <i className='fa fa-caret-down' />
+          </button>
+          <button
+            onClick={(e) => this.handleIndentSizeButtonClick(e)}
+          >
+            size: {config.editor.indentSize}&nbsp;
+            <i className='fa fa-caret-down' />
+          </button>
+        </div>
+
+        <StatusBar
+          {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+          date={note.updatedAt}
+        />
+      </div>
+    )
+  }
+}
+
+SnippetNoteDetail.propTypes = {
+  dispatch: PropTypes.func,
+  repositories: PropTypes.array,
+  note: PropTypes.shape({
+
+  }),
+  style: PropTypes.shape({
+    left: PropTypes.number
+  }),
+  ignorePreviewPointerEvents: PropTypes.bool,
+  confirmDeletion: PropTypes.bool.isRequired
+}
+
+export default CSSModules(SnippetNoteDetail, styles)

browser/main/Detail/SnippetNoteDetail.styl

@@ -0,0 +1,142 @@
+@import('NoteDetailInfo')
+@import('DetailVars')
+
+.root
+  absolute top bottom right
+  border-left 1px solid alpha(#DEDEDE, 60%)
+  background-color $ui-noteDetail-backgroundColor
+  box-shadow none
+
+.body
+  absolute left right
+  margin 0 30px
+  top $info-height + $info-margin-under-border
+  bottom $statusBar-height
+  background-color $ui-noteDetail-backgroundColor
+
+.body .description
+  absolute top left right
+  height 50px
+
+.body .description textarea
+  outline none
+  display block
+  height 100%
+  width 100%
+  resize none
+  border 1px solid $ui-borderColor
+  padding 2px 5px
+  line-height 1.6
+  background-color $ui-noteDetail-backgroundColor
+
+.tabList
+  absolute left right
+  top 55px
+  height 30px
+  display flex
+  background-color $ui-noteDetail-backgroundColor
+
+.tabList .list
+  flex 1
+  display flex
+  overflow hidden
+
+.tabList .plusButton
+  navWhiteButtonColor()
+  width 30px
+
+.tabView
+  absolute left right bottom
+  top 100px
+
+.tabView-content
+  absolute top left right bottom
+
+.override
+  absolute bottom left
+  bottom 1px
+  left 60px
+  z-index 101
+  button
+    navButtonColor()
+    padding 0 6px
+    &:hover
+      color $ui-active-color
+    &:active .update-icon
+      color $ui-active-color
+
+.control-fullScreenButton
+  top 80px
+  margin-bottom 10px
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 70px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="white"]
+  .root
+    box-shadow $note-detail-box-shadow
+    border none
+
+body[data-theme="dark"]
+  .root
+    border-left 1px solid $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
+    box-shadow none
+
+  .body
+    background-color $ui-dark-noteDetail-backgroundColor
+
+  .body .description textarea
+    background-color $ui-dark-noteDetail-backgroundColor
+    color $ui-dark-text-color
+    border 1px solid $ui-dark-borderColor
+
+  .tabList
+    background-color $ui-button--active-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
+
+  .tabList .list
+    border-color $ui-dark-borderColor
+
+  .tabList .plusButton
+    navDarkButtonColor()
+  .override
+    button
+      border-color $ui-dark-borderColor
+      &:hover
+        background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+        transition 0.15s
+        color $ui-dark-text-color
+
+  .control-fullScreenButton
+    topBarButtonDark()
+
+body[data-theme="solarized-dark"]
+  .root
+    border-left 1px solid $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+
+  .body
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+
+  .body .description textarea
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    color $ui-solarized-dark-text-color
+    border 1px solid $ui-solarized-dark-borderColor
+
+  .tabList
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+    color $ui-solarized-dark-text-color

browser/main/Detail/StarButton.js

@@ -0,0 +1,68 @@
+import PropTypes from 'prop-types'
+import React 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 () {
+    const { 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}>
+        <img styleName='icon'
+          src={this.state.isActive || this.props.isActive
+            ? '../resources/icon/icon-starred.svg'
+            : '../resources/icon/icon-star.svg'
+          }
+        />
+        <span styleName='tooltip'>Star</span>
+      </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,40 @@
+.root
+  top 45px
+  topBarButtonRight()
+  &:hover
+    transition 0.2s
+    color alpha($ui-favorite-star-button-color, 0.6)
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 115px
+  width 40px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.root--active
+  @extend .root
+  transition 0.15s
+  color $ui-favorite-star-button-color
+  &:hover
+    transition 0.2s
+    color alpha($ui-favorite-star-button-color, 0.6)
+
+.icon
+  transition transform 0.15s
+
+body[data-theme="dark"]
+  .root
+    topBarButtonDark()
+    &:hover
+      transition 0.2s
+      color alpha($ui-favorite-star-button-color, 0.6)

browser/main/Detail/TagSelect.js

@@ -0,0 +1,157 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TagSelect.styl'
+import _ from 'lodash'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+
+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 9:
+        e.preventDefault()
+        this.submitTag()
+        break
+      case 13:
+        this.submitTag()
+        break
+      case 8:
+        if (this.refs.newTag.value.length === 0) {
+          this.removeLastTag()
+        }
+    }
+  }
+
+  handleNewTagBlur (e) {
+    this.submitTag()
+  }
+
+  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 () {
+    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_TAG')
+    let { value } = this.props
+    let newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')
+    newTag = newTag.charAt(0) === '#' ? newTag.substring(1) : newTag
+
+    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 () {
+    const { value, className } = this.props
+
+    const tagList = _.isArray(value)
+      ? value.map((tag) => {
+        return (
+          <span styleName='tag'
+            key={tag}
+          >
+            <span styleName='tag-label'>#{tag}</span>
+            <button styleName='tag-removeButton'
+              onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
+            >
+              <img className='tag-removeButton-icon' src='../resources/icon/icon-x.svg' width='8px' />
+            </button>
+          </span>
+        )
+      })
+      : []
+
+    return (
+      <div className={_.isString(className)
+          ? 'TagSelect ' + className
+          : 'TagSelect'
+        }
+        styleName='root'
+      >
+        {tagList}
+        <input styleName='newTag'
+          ref='newTag'
+          value={this.state.newTag}
+          placeholder='Add tag...'
+          onChange={(e) => this.handleNewTagInputChange(e)}
+          onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
+          onBlur={(e) => this.handleNewTagBlur(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,84 @@
+.root
+  display flex
+  align-items center
+  user-select none
+  vertical-align middle
+  width 100%
+  overflow-x scroll
+  white-space nowrap
+  margin-top 31px
+  position absolute
+
+.root::-webkit-scrollbar
+  display none
+
+.tag
+  display flex
+  align-items center
+  margin 0px 2px
+  padding 2px 4px
+  background-color alpha($ui-tag-backgroundColor, 3%)
+  border-radius 4px
+  position relative
+  clearfix()
+
+.tag-removeButton
+  margin 0
+  padding 0
+  border-style solid
+  border-width 0
+  border-radius 20px
+  background-color transparent
+  color $ui-button-color
+  position absolute
+  right 6px
+
+.tag-removeButton-icon
+  width 5px
+  padding-right 4px
+
+.tag-label
+  font-size 13px
+  color: $ui-text-color
+  padding 4px 16px 4px 8px
+
+.newTag
+  box-sizing border-box
+  border none
+  background-color transparent
+  outline none
+  padding 0 4px
+  font-size 13px
+
+body[data-theme="dark"]
+  .tag
+    background-color alpha($ui-dark-tag-backgroundColor, 60%)
+
+  .tag-removeButton
+    border-color $ui-button--focus-borderColor
+    background-color transparent
+    color $ui-button-color
+
+  .tag-label
+    color $ui-dark-text-color
+
+  .newTag
+    border-color none
+    background-color transparent
+    color $ui-dark-text-color
+    
+body[data-theme="solarized-dark"]
+  .tag
+    background-color $ui-solarized-dark-tag-backgroundColor
+
+  .tag-removeButton
+    border-color $ui-button--focus-borderColor
+    background-color transparent
+
+  .tag-label
+    color $ui-solarized-dark-text-color
+
+  .newTag
+    border-color none
+    background-color transparent
+    color $ui-solarized-dark-text-color

browser/main/Detail/ToggleModeButton.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ToggleModeButton.styl'
+
+const ToggleModeButton = ({
+  onClick, editorType
+}) => (
+  <div styleName='control-toggleModeButton'>
+    <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => onClick('SPLIT')}>
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : ''} />
+    </div>
+    <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => onClick('EDITOR_PREVIEW')}>
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '' : '../resources/icon/icon-mode-split-on-active.svg'} />
+    </div>
+    <span styleName='tooltip'>Toggle Mode</span>
+  </div>
+)
+
+ToggleModeButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  editorType: PropTypes.string.Required
+}
+
+export default CSSModules(ToggleModeButton, styles)

browser/main/Detail/ToggleModeButton.styl

@@ -0,0 +1,58 @@
+.control-toggleModeButton
+  height 25px
+  border-radius 50px
+  background-color #F4F4F4
+  width 52px
+  display flex
+  align-items center
+  position: relative
+  top 2px
+  .active
+    background-color #1EC38B
+    width 33px
+    height 24px
+    box-shadow 2px 0px 7px #eee
+    z-index 1
+
+  div
+    width 40px
+    height 100%
+    border-radius 50%
+    display flex
+    align-items center
+    justify-content center
+    cursor pointer
+
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 33px
+  left -10px
+  z-index 200
+  width 80px
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="dark"]
+  .control-fullScreenButton
+    topBarButtonDark()
+
+  .control-toggleModeButton
+      background-color #3A404C
+    .active
+      background-color #1EC38B
+      box-shadow 2px 0px 7px #444444
+
+body[data-theme="solarized-dark"]
+  .control-toggleModeButton
+      background-color #002B36
+    .active
+      background-color #1EC38B
+      box-shadow 2px 0px 7px #222222

browser/main/Detail/TrashButton.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TrashButton.styl'
+
+const TrashButton = ({
+  onClick
+}) => (
+  <button styleName='control-trashButton'
+    onClick={(e) => onClick(e)}
+  >
+    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+    <span styleName='tooltip'>Trash</span>
+  </button>
+)
+
+TrashButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(TrashButton, styles)

browser/main/Detail/TrashButton.styl

@@ -0,0 +1,29 @@
+.control-trashButton
+  top 115px
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 50px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.control-trashButton--in-trash
+  top 60px
+  topBarButtonRight()
+
+.trashButton
+  padding 0px
+
+body[data-theme="dark"]
+  .control-trashButton
+    topBarButtonDark()

browser/main/Detail/index.js

@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types'
+import React 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'
+import StatusBar from '../StatusBar'
+
+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.handleTrashButtonClick()
+    }
+  }
+
+  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)
+  }
+
+  confirmDeletion (permanent) {
+    if (this.props.config.ui.confirmDeletion || permanent) {
+      const electron = require('electron')
+      const { remote } = electron
+      const { dialog } = remote
+
+      const alertConfig = {
+        type: 'warning',
+        message: 'Confirm note deletion',
+        detail: 'This will permanently remove this note.',
+        buttons: ['Confirm', 'Cancel']
+      }
+
+      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), alertConfig)
+      return dialogueButtonIndex === 0
+    }
+
+    return true
+  }
+
+  render () {
+    const { location, data, config } = this.props
+    let note = null
+    if (location.query.key != null) {
+      const noteKey = location.query.key
+      note = data.noteMap.get(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 note</div>
+          </div>
+          <StatusBar
+            {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+          />
+        </div>
+      )
+    }
+
+    if (note.type === 'SNIPPET_NOTE') {
+      return (
+        <SnippetNoteDetail
+          note={note}
+          config={config}
+          confirmDeletion={(permanent) => this.confirmDeletion(permanent)}
+          ref='root'
+          {..._.pick(this.props, [
+            'dispatch',
+            'data',
+            'style',
+            'ignorePreviewPointerEvents',
+            'location'
+          ])}
+        />
+      )
+    }
+
+    return (
+      <MarkdownNoteDetail
+        note={note}
+        config={config}
+        confirmDeletion={(permanent) => this.confirmDeletion(permanent)}
+        ref='root'
+        {..._.pick(this.props, [
+          'dispatch',
+          'data',
+          'style',
+          'ignorePreviewPointerEvents',
+          'location'
+        ])}
+      />
+    )
+  }
+}
+
+Detail.propTypes = {
+  dispatch: PropTypes.func,
+  style: PropTypes.shape({
+    left: PropTypes.number
+  }),
+  ignorePreviewPointerEvents: PropTypes.bool
+}
+
+export default CSSModules(Detail, styles)

browser/main/Main.js

@@ -0,0 +1,365 @@
+import PropTypes from 'prop-types'
+import React 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 _ from 'lodash'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import eventEmitter from 'browser/main/lib/eventEmitter'
+import { hashHistory } from 'react-router'
+import store from 'browser/main/store'
+const path = require('path')
+const electron = require('electron')
+const { remote } = electron
+
+class Main extends React.Component {
+
+  constructor (props) {
+    super(props)
+
+    if (process.env.NODE_ENV === 'production') {
+      mobileAnalytics.initAwsMobileAnalytics()
+    }
+
+    const { config } = props
+
+    this.state = {
+      isRightSliderFocused: false,
+      listWidth: config.listWidth,
+      navWidth: config.navWidth,
+      isLeftSliderFocused: false,
+      fullScreen: false,
+      noteDetailWidth: 0,
+      mainBodyWidth: 0
+    }
+
+    this.toggleFullScreen = () => this.handleFullScreenButton()
+  }
+
+  getChildContext () {
+    const { status, config } = this.props
+
+    return {
+      status,
+      config
+    }
+  }
+
+  init () {
+    dataApi
+      .addStorage({
+        name: 'My Storage',
+        path: path.join(remote.app.getPath('home'), 'Boostnote')
+      })
+      .then((data) => {
+        return data
+      })
+      .then((data) => {
+        if (data.storage.folders[0] != null) {
+          return data
+        } else {
+          return dataApi
+            .createFolder(data.storage.key, {
+              color: '#1278BD',
+              name: 'Default'
+            })
+            .then((_data) => {
+              return {
+                storage: _data.storage,
+                notes: data.notes
+              }
+            })
+        }
+      })
+      .then((data) => {
+        console.log(data)
+        store.dispatch({
+          type: 'ADD_STORAGE',
+          storage: data.storage,
+          notes: data.notes
+        })
+
+        const defaultSnippetNote = dataApi
+          .createNote(data.storage.key, {
+            type: 'SNIPPET_NOTE',
+            folder: data.storage.folders[0].key,
+            title: 'Snippet note example',
+            description: 'Snippet note example\nYou can store a series of snippets as a single note, like Gist.',
+            snippets: [
+              {
+                name: 'example.html',
+                mode: 'html',
+                content: '<html>\n<body>\n<h1 id=\'hello\'>Enjoy Boostnote!</h1>\n</body>\n</html>'
+              },
+              {
+                name: 'example.js',
+                mode: 'javascript',
+                content: 'var boostnote = document.getElementById(\'enjoy\').innerHTML\n\nconsole.log(boostnote)'
+              }
+            ]
+          })
+          .then((note) => {
+            store.dispatch({
+              type: 'UPDATE_NOTE',
+              note: note
+            })
+          })
+        const defaultMarkdownNote = dataApi
+          .createNote(data.storage.key, {
+            type: 'MARKDOWN_NOTE',
+            folder: data.storage.folders[0].key,
+            title: 'Welcome to Boostnote!',
+            content: '# Welcome to Boostnote!\n## Click here to edit markdown :wave:\n\n<iframe width="560" height="315" src="https://www.youtube.com/embed/L0qNPLsvmyM" frameborder="0" allowfullscreen></iframe>\n\n## Docs :memo:\n- [Boostnote | Boost your happiness, productivity and creativity.](https://hackernoon.com/boostnote-boost-your-happiness-productivity-and-creativity-315034efeebe)\n- [Cloud Syncing & Backups](https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup)\n- [How to sync your data across Desktop and Mobile apps](https://github.com/BoostIO/Boostnote/wiki/Sync-Data-Across-Desktop-and-Mobile-apps)\n- [Convert data from **Evernote** to Boostnote.](https://github.com/BoostIO/Boostnote/wiki/Evernote)\n- [Keyboard Shortcuts](https://github.com/BoostIO/Boostnote/wiki/Keyboard-Shortcuts)\n- [Keymaps in Editor mode](https://github.com/BoostIO/Boostnote/wiki/Keymaps-in-Editor-mode)\n- [How to set syntax highlight in Snippet note](https://github.com/BoostIO/Boostnote/wiki/Syntax-Highlighting)\n\n---\n\n## Article Archive :books:\n- [Reddit English](http://bit.ly/2mOJPu7)\n- [Reddit Spanish](https://www.reddit.com/r/boostnote_es/)\n- [Reddit Chinese](https://www.reddit.com/r/boostnote_cn/)\n- [Reddit Japanese](https://www.reddit.com/r/boostnote_jp/)\n\n---\n\n## Community :beers:\n- [GitHub](http://bit.ly/2AWWzkD)\n- [Twitter](http://bit.ly/2z8BUJZ)\n- [Facebook Group](http://bit.ly/2jcca8t)'
+          })
+          .then((note) => {
+            store.dispatch({
+              type: 'UPDATE_NOTE',
+              note: note
+            })
+          })
+
+        return Promise.resolve(defaultSnippetNote)
+          .then(defaultMarkdownNote)
+          .then(() => data.storage)
+      })
+      .then((storage) => {
+        hashHistory.push('/storages/' + storage.key)
+      })
+      .catch((err) => {
+        throw err
+      })
+  }
+
+  componentDidMount () {
+    const { dispatch, config } = this.props
+
+    if (config.ui.theme === 'dark') {
+      document.body.setAttribute('data-theme', 'dark')
+    } else if (config.ui.theme === 'white') {
+      document.body.setAttribute('data-theme', 'white')
+    } else if (config.ui.theme === 'solarized-dark') {
+      document.body.setAttribute('data-theme', 'solarized-dark')
+    } else {
+      document.body.setAttribute('data-theme', 'default')
+    }
+
+    // Reload all data
+    dataApi.init()
+      .then((data) => {
+        dispatch({
+          type: 'INIT_ALL',
+          storages: data.storages,
+          notes: data.notes
+        })
+
+        if (data.storages.length < 1) {
+          this.init()
+        }
+      })
+
+    eventEmitter.on('editor:fullscreen', this.toggleFullScreen)
+  }
+
+  componentWillUnmount () {
+    eventEmitter.off('editor:fullscreen', this.toggleFullScreen)
+  }
+
+  handleLeftSlideMouseDown (e) {
+    e.preventDefault()
+    this.setState({
+      isLeftSliderFocused: true
+    })
+  }
+
+  handleRightSlideMouseDown (e) {
+    e.preventDefault()
+    this.setState({
+      isRightSliderFocused: true
+    })
+  }
+
+  handleMouseUp (e) {
+    // Change width of NoteList component.
+    if (this.state.isRightSliderFocused) {
+      this.setState({
+        isRightSliderFocused: false
+      }, () => {
+        const { dispatch } = this.props
+        const newListWidth = this.state.listWidth
+        // TODO: ConfigManager should dispatch itself.
+        ConfigManager.set({listWidth: newListWidth})
+        dispatch({
+          type: 'SET_LIST_WIDTH',
+          listWidth: newListWidth
+        })
+      })
+    }
+
+    // Change width of SideNav component.
+    if (this.state.isLeftSliderFocused) {
+      this.setState({
+        isLeftSliderFocused: false
+      }, () => {
+        const { dispatch } = this.props
+        const navWidth = this.state.navWidth
+        // TODO: ConfigManager should dispatch itself.
+        ConfigManager.set({ navWidth })
+        dispatch({
+          type: 'SET_NAV_WIDTH',
+          navWidth
+        })
+      })
+    }
+  }
+
+  handleMouseMove (e) {
+    if (this.state.isRightSliderFocused) {
+      const 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
+      })
+    }
+    if (this.state.isLeftSliderFocused) {
+      let navWidth = e.pageX
+      if (navWidth < 80) {
+        navWidth = 80
+      } else if (navWidth > 600) {
+        navWidth = 600
+      }
+      this.setState({
+        navWidth: navWidth
+      })
+    }
+  }
+
+  handleFullScreenButton (e) {
+    this.setState({ fullScreen: !this.state.fullScreen }, () => {
+      const noteDetail = document.querySelector('.NoteDetail')
+      const noteList = document.querySelector('.NoteList')
+      const mainBody = document.querySelector('#main-body')
+
+      if (this.state.fullScreen) {
+        this.hideLeftLists(noteDetail, noteList, mainBody)
+      } else {
+        this.showLeftLists(noteDetail, noteList, mainBody)
+      }
+    })
+  }
+
+  hideLeftLists (noteDetail, noteList, mainBody) {
+    this.setState({noteDetailWidth: noteDetail.style.left})
+    this.setState({mainBodyWidth: mainBody.style.left})
+    noteDetail.style.left = '0px'
+    mainBody.style.left = '0px'
+    noteList.style.display = 'none'
+  }
+
+  showLeftLists (noteDetail, noteList, mainBody) {
+    noteDetail.style.left = this.state.noteDetailWidth
+    mainBody.style.left = this.state.mainBodyWidth
+    noteList.style.display = 'inline'
+  }
+
+  render () {
+    const { config } = this.props
+
+    // the width of the navigation bar when it is folded/collapsed
+    const foldedNavigationWidth = 44
+
+    return (
+      <div
+        className='Main'
+        styleName='root'
+        onMouseMove={(e) => this.handleMouseMove(e)}
+        onMouseUp={(e) => this.handleMouseUp(e)}
+      >
+        <SideNav
+          {..._.pick(this.props, [
+            'dispatch',
+            'data',
+            'config',
+            'location'
+          ])}
+          width={this.state.navWidth}
+        />
+        {!config.isSideNavFolded &&
+          <div styleName={this.state.isLeftSliderFocused ? 'slider--active' : 'slider'}
+            style={{left: this.state.navWidth}}
+            onMouseDown={(e) => this.handleLeftSlideMouseDown(e)}
+            draggable='false'
+          >
+            <div styleName='slider-hitbox' />
+          </div>
+        }
+        <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
+          id='main-body'
+          ref='body'
+          style={{left: config.isSideNavFolded ? foldedNavigationWidth : this.state.navWidth}}
+        >
+          <TopBar style={{width: this.state.listWidth}}
+            {..._.pick(this.props, [
+              'dispatch',
+              'config',
+              'data',
+              'params',
+              'location'
+            ])}
+          />
+          <NoteList style={{width: this.state.listWidth}}
+            {..._.pick(this.props, [
+              'dispatch',
+              'data',
+              'config',
+              'params',
+              'location'
+            ])}
+          />
+          <div styleName={this.state.isRightSliderFocused ? 'slider-right--active' : 'slider-right'}
+            style={{left: this.state.listWidth - 1}}
+            onMouseDown={(e) => this.handleRightSlideMouseDown(e)}
+            draggable='false'
+          >
+            <div styleName='slider-hitbox' />
+          </div>
+          <Detail
+            style={{left: this.state.listWidth}}
+            {..._.pick(this.props, [
+              'dispatch',
+              'data',
+              'config',
+              'params',
+              'location'
+            ])}
+            ignorePreviewPointerEvents={this.state.isRightSliderFocused}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+Main.childContextTypes = {
+  status: PropTypes.shape({
+    updateReady: PropTypes.bool.isRequired
+  }).isRequired,
+  config: PropTypes.shape({}).isRequired
+}
+
+Main.propTypes = {
+  dispatch: PropTypes.func,
+  data: PropTypes.shape({}).isRequired
+}
+
+export default connect((x) => x)(CSSModules(Main, styles))

browser/main/Main.styl

@@ -0,0 +1,43 @@
+.root
+  absolute top left bottom right
+
+.body
+  absolute right top bottom
+  left $sideNav-width
+
+.body--expanded
+  @extend .body
+  left $sideNav--folded-width
+
+.slider
+  absolute top bottom
+  top -2px
+  width 0
+  z-index 0
+
+.slider-right
+  @extend .slider
+  width 1px
+  z-index 0
+
+.slider--active
+  @extend .slider
+
+.slider-right--active
+  @extend .slider-right
+
+.slider-hitbox
+  absolute top bottom left right
+  width 7px
+  left -3px
+  z-index 10
+  cursor col-resize
+
+
+body[data-theme="dark"]
+  .root
+    absolute top left bottom right
+
+  .slider-right
+  .slider-right--active
+    box-shadow none

browser/main/NewNoteButton/NewNoteButton.styl

@@ -0,0 +1,77 @@
+.root
+  position relative
+  background-color $ui-noteList-backgroundColor
+  height $topBar-height - 1
+  margin-left: auto;
+  width: 64px;
+
+.root--expanded
+  @extend .root
+
+$control-height = 34px
+
+.control
+  position absolute
+  top 13px
+  right 7px
+  height $control-height
+  display flex
+
+.control-newNoteButton
+  display block
+  width 32px
+  height $control-height - 2
+  navButtonColor()
+  font-size 16px
+  line-height 28px
+  padding 0
+  &:active
+    border-color $ui-button--active-backgroundColor
+  &:hover .control-newNoteButton-tooltip
+    opacity 1
+
+.control-newNoteButton-tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 26px
+  right -43px
+  width 124px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="white"]
+  .root, .root--expanded
+    background-color $ui-white-noteList-backgroundColor
+
+  .control-newNoteButton
+    background-color $ui-white-noteList-backgroundColor
+
+body[data-theme="dark"]
+  .root, .root--expanded
+    background-color $ui-dark-noteList-backgroundColor
+
+  .control
+    border-color $ui-dark-borderColor
+
+  .control-newNoteButton
+    color $ui-inactive-text-color
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      color $ui-dark-text-color
+    &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      border-color $ui-dark-button--active-backgroundColor
+
+  .control-newNoteButton-tooltip
+    darkTooltip()
+
+body[data-theme="solarized-dark"]
+  .root, .root--expanded
+    background-color $ui-solarized-dark-noteList-backgroundColor

browser/main/NewNoteButton/index.js

@@ -0,0 +1,105 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './NewNoteButton.styl'
+import _ from 'lodash'
+import modal from 'browser/main/lib/modal'
+import NewNoteModal from 'browser/main/modals/NewNoteModal'
+import eventEmitter from 'browser/main/lib/eventEmitter'
+
+const { remote } = require('electron')
+const { dialog } = remote
+
+const OSX = window.process.platform === 'darwin'
+
+class NewNoteButton extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+    }
+
+    this.newNoteHandler = () => {
+      this.handleNewNoteButtonClick()
+    }
+  }
+
+  componentDidMount () {
+    eventEmitter.on('top:new-note', this.newNoteHandler)
+  }
+
+  componentWillUnmount () {
+    eventEmitter.off('top:new-note', this.newNoteHandler)
+  }
+
+  handleNewNoteButtonClick (e) {
+    const { location, dispatch } = this.props
+    const { storage, folder } = this.resolveTargetFolder()
+
+    modal.open(NewNoteModal, {
+      storage: storage.key,
+      folder: folder.key,
+      dispatch,
+      location
+    })
+  }
+
+  resolveTargetFolder () {
+    const { data, params } = this.props
+    let storage = data.storageMap.get(params.storageKey)
+
+    // Find first storage
+    if (storage == null) {
+      for (const kv of data.storageMap) {
+        storage = kv[1]
+        break
+      }
+    }
+
+    if (storage == null) this.showMessageBox('No storage to create a note')
+    const folder = _.find(storage.folders, {key: params.folderKey}) || storage.folders[0]
+    if (folder == null) this.showMessageBox('No folder to create a note')
+
+    return {
+      storage,
+      folder
+    }
+  }
+
+  showMessageBox (message) {
+    dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: message,
+      buttons: ['OK']
+    })
+  }
+
+  render () {
+    const { config, style } = this.props
+    return (
+      <div className='NewNoteButton'
+        styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}
+        style={style}
+      >
+        <div styleName='control'>
+          <button styleName='control-newNoteButton'
+            onClick={(e) => this.handleNewNoteButtonClick(e)}>
+            <img styleName='iconTag' src='../resources/icon/icon-newnote.svg' />
+            <span styleName='control-newNoteButton-tooltip'>
+              Make a note {OSX ? '⌘' : 'Ctrl'} + N
+            </span>
+          </button>
+        </div>
+      </div>
+    )
+  }
+}
+
+NewNoteButton.propTypes = {
+  dispatch: PropTypes.func,
+  config: PropTypes.shape({
+    isSideNavFolded: PropTypes.bool
+  })
+}
+
+export default CSSModules(NewNoteButton, styles)

browser/main/NoteList/NoteList.styl

@@ -0,0 +1,116 @@
+$control-height = 30px
+
+.root
+  absolute left bottom
+  top $topBar-height - 1
+  background-color $ui-noteList-backgroundColor
+
+.control
+  absolute top left right
+  user-select none
+  height $control-height
+  font-size 12px
+  line-height 25px
+  display flex
+  background-color $ui-noteList-backgroundColor
+  color $ui-inactive-text-color
+
+.control-sortBy
+  flex 1
+  padding-left 22px
+
+.control-sortBy-select
+  appearance: none;
+  margin-left 5px
+  color $ui-inactive-text-color
+  padding 0
+  border none
+  background-color transparent
+  outline none
+  cursor pointer
+  font-size 12px
+  &:hover
+    transition 0.2s
+    color $ui-text-color
+
+.control-button-area
+  margin-right 12px
+
+.control-button
+  width 25px
+  padding 0
+  background-color transparent
+  border none
+  color alpha($ui-inactive-text-color, 60%)
+  transition 0.15s
+  &:active, &:active:hover
+    color $ui-inactive-text-color
+  &:hover
+    color $ui-inactive-text-color
+
+.control-button--active
+  @extend .control-button
+  color $ui-inactive-text-color
+  &:hover
+    color $ui-inactive-text-color
+
+.list
+  absolute left right bottom
+  top $control-height
+  overflow auto
+
+body[data-theme="white"]
+  .root
+    background-color $ui-white-noteList-backgroundColor
+
+  .control
+    background-color $ui-white-noteList-backgroundColor
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+
+  .control
+    background-color $ui-dark-noteList-backgroundColor
+    border-color $ui-dark-borderColor
+
+  .control-sortBy-select
+    &:hover
+      transition 0.2s
+      color $ui-dark-text-color
+
+  .control-button
+    color $ui-dark-inactive-text-color
+    &:hover
+      color $ui-dark-text-color
+  
+  .control-button--active
+    color $ui-dark-text-color
+    &:active
+      color $ui-dark-text-color
+
+
+body[data-theme="solarized-dark"]
+  .root
+    border-color $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteList-backgroundColor
+
+  .control
+    background-color $ui-solarized-dark-noteList-backgroundColor
+    border-color $ui-solarized-dark-borderColor
+
+  .control-sortBy-select
+    &:hover
+      transition 0.2s
+      color $ui-solarized-dark-text-color
+
+  .control-button
+    color $ui-solarized-dark-inactive-text-color
+    &:hover
+      color $ui-solarized-dark-text-color
+  
+  .control-button--active
+    color $ui-solarized-dark-text-color
+    &:active
+      color $ui-solarized-dark-text-color

browser/main/SideNav/ListButton.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SwitchButton.styl'
+
+const ListButton = ({
+  onClick, isTagActive
+}) => (
+  <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={onClick}>
+    <img src={isTagActive
+        ? '../resources/icon/icon-list.svg'
+        : '../resources/icon/icon-list-active.svg'
+    }
+    />
+    <span styleName='tooltip'>Notes</span>
+  </button>
+)
+
+ListButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  isTagActive: PropTypes.bool.isRequired
+}
+
+export default CSSModules(ListButton, styles)

browser/main/SideNav/PreferenceButton.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './PreferenceButton.styl'
+
+const PreferenceButton = ({
+  onClick
+}) => (
+  <button styleName='top-menu-preference' onClick={(e) => onClick(e)}>
+    <img styleName='iconTag' src='../resources/icon/icon-setting.svg' />
+    <span styleName='tooltip'>Preferences</span>
+  </button>
+)
+
+PreferenceButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(PreferenceButton, styles)

browser/main/SideNav/PreferenceButton.styl

@@ -0,0 +1,51 @@
+.top-menu-preference
+  navButtonColor()
+  position absolute
+  top 22px
+  right 10px
+  width 2em
+  background-color transparent
+  &:hover
+    color $ui-button-default--active-backgroundColor
+    background-color transparent
+    .tooltip
+      opacity 1
+  &:active, &:active:hover
+    color $ui-button-default--active-backgroundColor
+
+body[data-theme="white"]
+  .top-menu-preference
+    navWhiteButtonColor()
+    background-color transparent
+    &:hover
+      color #0B99F1
+      background-color transparent
+    &:active, &:active:hover
+      color #0B99F1
+      background-color transparent
+
+body[data-theme="dark"]
+  .top-menu-preference
+    navDarkButtonColor()
+    background-color transparent
+    &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color transparent
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color transparent
+
+
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 26px
+  left -20px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s

browser/main/SideNav/SideNav.styl

@@ -0,0 +1,97 @@
+.root
+  absolute top left bottom
+  width $sideNav-width
+  background-color #2E3235
+  user-select none
+  color $ui-text-color
+  height: 100vh
+  display: flex
+  flex-direction column
+
+.top
+  padding-bottom 15px
+
+.switch-buttons
+  background-color transparent
+  border 0
+  margin 24px auto 4px 14px
+  display flex
+  text-align center
+
+
+  
+.top-menu-label
+  margin-left 5px
+  overflow ellipsis
+  opacity 0
+
+.tabBody
+  flex 1
+  display flex
+  flex-direction column
+
+.tag-title
+  padding-left 15px
+  padding-bottom 13px
+  p
+    color $ui-button-default-color
+
+.tagList
+  overflow-y auto
+  flex: 1
+
+.root--folded
+  height 100vh
+  width $sideNav--folded-width
+  background-color #2E3235
+  .switch-buttons
+    display none
+  .top
+    height 60px
+  .top-menu
+    position static
+    width $sideNav--folded-width
+    height 60px
+    text-align center
+    &:hover .top-menu-label
+      transition opacity 0.15s
+      opacity 1
+  .top-menu-label
+    position fixed
+    display inline-block
+    height 30px
+    left $sideNav--folded-width
+    padding 0 10px
+    margin-top -8px
+    opacity 0
+    margin-left 0
+    overflow hidden
+    z-index 10
+    color white
+    line-height 30px
+    border-top-right-radius 2px
+    border-bottom-right-radius 2px
+    pointer-events none
+    font-size 13px
+  .top-menu-preference
+    position absolute
+    left 7px
+
+body[data-theme="white"]
+  .root, .root--folded
+    background-color #f9f9f9
+    color $ui-text-color
+
+body[data-theme="dark"]
+  .root, .root--folded
+    border-right 1px solid $ui-dark-borderColor
+    background-color $ui-dark-backgroundColor
+    color $ui-dark-text-color
+
+  .top
+    border-color $ui-dark-borderColor
+
+body[data-theme="solarized-dark"]
+  .root, .root--folded
+    background-color $ui-solarized-dark-backgroundColor
+    border-right 1px solid $ui-solarized-dark-borderColor

browser/main/SideNav/StorageItem.js

@@ -0,0 +1,312 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './StorageItem.styl'
+import { hashHistory } from 'react-router'
+import modal from 'browser/main/lib/modal'
+import CreateFolderModal from 'browser/main/modals/CreateFolderModal'
+import RenameFolderModal from 'browser/main/modals/RenameFolderModal'
+import dataApi from 'browser/main/lib/dataApi'
+import StorageItemChild from 'browser/components/StorageItem'
+import _ from 'lodash'
+import { SortableElement } from 'react-sortable-hoc'
+
+const { remote } = require('electron')
+const { Menu, dialog } = remote
+
+class StorageItem extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isOpen: true
+    }
+  }
+
+  handleHeaderContextMenu (e) {
+    const menu = Menu.buildFromTemplate([
+      {
+        label: 'Add Folder',
+        click: (e) => this.handleAddFolderButtonClick(e)
+      },
+      {
+        type: 'separator'
+      },
+      {
+        label: 'Unlink Storage',
+        click: (e) => this.handleUnlinkStorageClick(e)
+      }
+    ])
+
+    menu.popup()
+  }
+
+  handleUnlinkStorageClick (e) {
+    const index = dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: 'Unlink Storage',
+      detail: 'This work will just detatches a storage from Boostnote. (Any data won\'t be deleted.)',
+      buttons: ['Confirm', 'Cancel']
+    })
+
+    if (index === 0) {
+      const { storage, dispatch } = this.props
+      dataApi.removeStorage(storage.key)
+        .then(() => {
+          dispatch({
+            type: 'REMOVE_STORAGE',
+            storageKey: storage.key
+          })
+        })
+        .catch((err) => {
+          throw err
+        })
+    }
+  }
+
+  handleToggleButtonClick (e) {
+    this.setState({
+      isOpen: !this.state.isOpen
+    })
+  }
+
+  handleAddFolderButtonClick (e) {
+    const { storage } = this.props
+
+    modal.open(CreateFolderModal, {
+      storage
+    })
+  }
+
+  handleHeaderInfoClick (e) {
+    const { storage } = this.props
+    hashHistory.push('/storages/' + storage.key)
+  }
+
+  handleFolderButtonClick (folderKey) {
+    return (e) => {
+      const { storage } = this.props
+      hashHistory.push('/storages/' + storage.key + '/folders/' + folderKey)
+    }
+  }
+
+  handleFolderButtonContextMenu (e, folder) {
+    const menu = Menu.buildFromTemplate([
+      {
+        label: 'Rename Folder',
+        click: (e) => this.handleRenameFolderClick(e, folder)
+      },
+      {
+        type: 'separator'
+      },
+      {
+        label: 'Export Folder',
+        submenu: [
+          {
+            label: 'Export as txt',
+            click: (e) => this.handleExportFolderClick(e, folder, 'txt')
+          },
+          {
+            label: 'Export as md',
+            click: (e) => this.handleExportFolderClick(e, folder, 'md')
+          }
+        ]
+      },
+      {
+        type: 'separator'
+      },
+      {
+        label: 'Delete Folder',
+        click: (e) => this.handleFolderDeleteClick(e, folder)
+      }
+    ])
+
+    menu.popup()
+  }
+
+  handleRenameFolderClick (e, folder) {
+    const { storage } = this.props
+    modal.open(RenameFolderModal, {
+      storage,
+      folder
+    })
+  }
+
+  handleExportFolderClick (e, folder, fileType) {
+    const options = {
+      properties: ['openDirectory', 'createDirectory'],
+      buttonLabel: 'Select directory',
+      title: 'Select a folder to export the files to',
+      multiSelections: false
+    }
+    dialog.showOpenDialog(remote.getCurrentWindow(), options,
+    (paths) => {
+      if (paths && paths.length === 1) {
+        const { storage, dispatch } = this.props
+        dataApi
+          .exportFolder(storage.key, folder.key, fileType, paths[0])
+          .then((data) => {
+            dispatch({
+              type: 'EXPORT_FOLDER',
+              storage: data.storage,
+              folderKey: data.folderKey,
+              fileType: data.fileType
+            })
+          })
+      }
+    })
+  }
+
+  handleFolderDeleteClick (e, folder) {
+    const index = dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: 'Delete Folder',
+      detail: 'This will delete all notes in the folder and can not be undone.',
+      buttons: ['Confirm', 'Cancel']
+    })
+
+    if (index === 0) {
+      const { storage, dispatch } = this.props
+      dataApi
+        .deleteFolder(storage.key, folder.key)
+        .then((data) => {
+          dispatch({
+            type: 'DELETE_FOLDER',
+            storage: data.storage,
+            folderKey: data.folderKey
+          })
+        })
+    }
+  }
+
+  handleDragEnter (e) {
+    e.dataTransfer.setData('defaultColor', e.target.style.backgroundColor)
+    e.target.style.backgroundColor = 'rgba(129, 130, 131, 0.08)'
+  }
+
+  handleDragLeave (e) {
+    e.target.style.opacity = '1'
+    e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor')
+  }
+
+  dropNote (storage, folder, dispatch, location, noteData) {
+    noteData = noteData.filter((note) => folder.key !== note.folder)
+    if (noteData.length === 0) return
+
+    Promise.all(
+      noteData.map((note) => dataApi.moveNote(note.storage, note.key, storage.key, folder.key))
+    )
+    .then((createdNoteData) => {
+      createdNoteData.forEach((newNote) => {
+        dispatch({
+          type: 'MOVE_NOTE',
+          originNote: noteData.find((note) => note.content === newNote.content),
+          note: newNote
+        })
+      })
+    })
+    .catch((err) => {
+      console.error(`error on delete notes: ${err}`)
+    })
+  }
+
+  handleDrop (e, storage, folder, dispatch, location) {
+    e.target.style.opacity = '1'
+    e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor')
+    const noteData = JSON.parse(e.dataTransfer.getData('note'))
+    this.dropNote(storage, folder, dispatch, location, noteData)
+  }
+
+  render () {
+    const { storage, location, isFolded, data, dispatch } = this.props
+    const { folderNoteMap, trashedSet } = data
+    const SortableStorageItemChild = SortableElement(StorageItemChild)
+    const folderList = storage.folders.map((folder, index) => {
+      const isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
+      const noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
+
+      let noteCount = 0
+      if (noteSet) {
+        let trashedNoteCount = 0
+        const noteKeys = noteSet.map(noteKey => { return noteKey })
+        trashedSet.toJS().forEach(trashedKey => {
+          if (noteKeys.some(noteKey => { return noteKey === trashedKey })) trashedNoteCount++
+        })
+        noteCount = noteSet.size - trashedNoteCount
+      }
+      return (
+        <SortableStorageItemChild
+          key={folder.key}
+          index={index}
+          isActive={isActive}
+          handleButtonClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
+          handleContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
+          folderName={folder.name}
+          folderColor={folder.color}
+          isFolded={isFolded}
+          noteCount={noteCount}
+          handleDrop={(e) => this.handleDrop(e, storage, folder, dispatch, location)}
+          handleDragEnter={this.handleDragEnter}
+          handleDragLeave={this.handleDragLeave}
+        />
+      )
+    })
+
+    const isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '$'))
+
+    return (
+      <div styleName={isFolded ? 'root--folded' : 'root'}
+        key={storage.key}
+      >
+        <div styleName={isActive
+          ? 'header--active'
+          : 'header'
+        }
+          onContextMenu={(e) => this.handleHeaderContextMenu(e)}
+        >
+          <button styleName='header-toggleButton'
+            onMouseDown={(e) => this.handleToggleButtonClick(e)}
+          >
+            <img src={this.state.isOpen
+              ? '../resources/icon/icon-down.svg'
+              : '../resources/icon/icon-right.svg'
+            }
+            />
+          </button>
+
+          {!isFolded &&
+            <button styleName='header-addFolderButton'
+              onClick={(e) => this.handleAddFolderButtonClick(e)}
+            >
+              <img styleName='iconTag' src='../resources/icon/icon-plus.svg' />
+            </button>
+          }
+
+          <button styleName='header-info'
+            onClick={(e) => this.handleHeaderInfoClick(e)}
+          >
+            <span styleName='header-info-name'>
+              {isFolded ? _.truncate(storage.name, {length: 1, omission: ''}) : storage.name}
+            </span>
+            {isFolded &&
+              <span styleName='header-info--folded-tooltip'>
+                {storage.name}
+              </span>
+            }
+          </button>
+        </div>
+        {this.state.isOpen &&
+          <div styleName='folderList' >
+            {folderList}
+          </div>
+        }
+      </div>
+    )
+  }
+}
+
+StorageItem.propTypes = {
+  isFolded: PropTypes.bool
+}
+
+export default CSSModules(StorageItem, styles)