Merge pull request #1327 from BoostIO/feature-v0-8-19

v0.8.19

.eslintrc

@@ -12,5 +12,10 @@
     "react/no-find-dom-node": "warn",
     "react/no-render-return-value": "warn",
     "react/no-deprecated": "warn"
+  },
+  "globals": {
+    "FileReader": true,
+    "localStorage": true,
+    "fetch": true
   }
 }

.gitignore

@@ -8,3 +8,5 @@ node_modules/*
 /compiled
 /secret
 *.log
+.vscode
+.idea

Backers.md

@@ -1,27 +1,50 @@
 <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](https://github.com/BoostIO/Boostnote/blob/master/Backers.md). If you'd like to join them, please consider:
+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
-<a href="https://opencollective.com/boostnoteio#backers" target="_blank"><img src="https://opencollective.com/boostnoteio/backers.svg?width=890"></a>
 
-- [Ralph03](https://opencollective.com/ralph03) - $24
+### [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/.
 
-- [Nikolas Dan](https://opencollective.com/nikolas-dan) - $20
+### [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/.
 
-- [tatoosh11](https://twitter.com/ta11) - $10
+### [Bronze Sponsors / $50 per month](https://opencollective.com/boostnoteio/order/2258)
+- Get your name and Url (or E-mail) on Readme.md on GitHub.
 
-- [Alexander Borovkov](https://opencollective.com/alexander-borovkov) - $10
+### [Backers3 / $10 per month](https://opencollective.com/boostnoteio/order/2176)
+- [Ralph03](https://opencollective.com/ralph03)
 
-- [Yeojong Kim](https://twitter.com/yeojoy) - $5
+- [Nikolas Dan](https://opencollective.com/nikolas-dan)
 
-- [Scotia Draven](https://opencollective.com/scotia-draven) - $5
+### [Backers2 / $5 per month](https://opencollective.com/boostnoteio/order/2175)
+- [Yeojong Kim](https://twitter.com/yeojoy)
 
-- [spoonhoop](https://opencollective.com/spoonhoop) - $5
+- [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

browser/components/CodeEditor.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
 import path from 'path'
@@ -58,6 +59,7 @@ export default class CodeEditor extends React.Component {
       tabSize: this.props.indentSize,
       indentWithTabs: this.props.indentType !== 'space',
       keyMap: this.props.keyMap,
+      scrollPastEnd: this.props.scrollPastEnd,
       inputStyle: 'textarea',
       dragDrop: false,
       extraKeys: {
@@ -103,7 +105,7 @@ export default class CodeEditor extends React.Component {
     this.editor.on('change', this.changeHandler)
     this.editor.on('paste', this.pasteHandler)
 
-    let editorTheme = document.getElementById('editorTheme')
+    const editorTheme = document.getElementById('editorTheme')
     editorTheme.addEventListener('load', this.loadStyleHandler)
 
     CodeMirror.Vim.defineEx('quit', 'q', this.quitEditor)
@@ -121,7 +123,7 @@ export default class CodeEditor extends React.Component {
     this.editor.off('blur', this.blurHandler)
     this.editor.off('change', this.changeHandler)
     this.editor.off('paste', this.pasteHandler)
-    let editorTheme = document.getElementById('editorTheme')
+    const editorTheme = document.getElementById('editorTheme')
     editorTheme.removeEventListener('load', this.loadStyleHandler)
   }
 
@@ -152,6 +154,10 @@ export default class CodeEditor extends React.Component {
       this.editor.setOption('indentWithTabs', this.props.indentType !== 'space')
     }
 
+    if (prevProps.scrollPastEnd !== this.props.scrollPastEnd) {
+      this.editor.setOption('scrollPastEnd', this.props.scrollPastEnd)
+    }
+
     if (needRefresh) {
       this.editor.refresh()
     }
@@ -197,7 +203,7 @@ export default class CodeEditor extends React.Component {
   }
 
   setValue (value) {
-    let cursor = this.editor.getCursor()
+    const cursor = this.editor.getCursor()
     this.editor.setValue(value)
     this.editor.setCursor(cursor)
   }
@@ -222,7 +228,7 @@ export default class CodeEditor extends React.Component {
     if (!dataTransferItem.type.match('image')) return
 
     const blob = dataTransferItem.getAsFile()
-    let reader = new FileReader()
+    const reader = new FileReader()
     let base64data
 
     reader.readAsDataURL(blob)
@@ -242,7 +248,8 @@ export default class CodeEditor extends React.Component {
   }
 
   render () {
-    let { className, fontFamily, fontSize } = this.props
+    const { className, fontSize } = this.props
+    let fontFamily = this.props.className
     fontFamily = _.isString(fontFamily) && fontFamily.length > 0
       ? [fontFamily].concat(defaultEditorFontFamily)
       : defaultEditorFontFamily

browser/components/MarkdownEditor.js

@@ -1,11 +1,11 @@
-import React, { PropTypes } from 'react'
+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'
-const _ = require('lodash')
 
 class MarkdownEditor extends React.Component {
   constructor (props) {
@@ -70,9 +70,9 @@ class MarkdownEditor extends React.Component {
   }
 
   handleContextMenu (e) {
-    let { config } = this.props
+    const { config } = this.props
     if (config.editor.switchPreview === 'RIGHTCLICK') {
-      let newStatus = this.state.status === 'PREVIEW'
+      const newStatus = this.state.status === 'PREVIEW'
         ? 'CODE'
         : 'PREVIEW'
       this.setState({
@@ -91,9 +91,9 @@ class MarkdownEditor extends React.Component {
   handleBlur (e) {
     if (this.state.isLocked) return
     this.setState({ keyPressed: new Set() })
-    let { config } = this.props
+    const { config } = this.props
     if (config.editor.switchPreview === 'BLUR') {
-      let cursorPosition = this.refs.code.editor.getCursor()
+      const cursorPosition = this.refs.code.editor.getCursor()
       this.setState({
         status: 'PREVIEW'
       }, () => {
@@ -109,7 +109,7 @@ class MarkdownEditor extends React.Component {
   }
 
   handlePreviewMouseUp (e) {
-    let { config } = this.props
+    const { config } = this.props
     if (config.editor.switchPreview === 'BLUR' && new Date() - this.previewMouseDownedAt < 200) {
       this.setState({
         status: 'CODE'
@@ -123,15 +123,15 @@ class MarkdownEditor extends React.Component {
   handleCheckboxClick (e) {
     e.preventDefault()
     e.stopPropagation()
-    let idMatch = /checkbox-([0-9]+)/
-    let checkedMatch = /\[x\]/i
-    let uncheckedMatch = /\[ \]/
+    const idMatch = /checkbox-([0-9]+)/
+    const checkedMatch = /\[x\]/i
+    const uncheckedMatch = /\[ \]/
     if (idMatch.test(e.target.getAttribute('id'))) {
-      let lineIndex = parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
-      let lines = this.refs.code.value
+      const lineIndex = parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
+      const lines = this.refs.code.value
         .split('\n')
 
-      let targetLine = lines[lineIndex]
+      const targetLine = lines[lineIndex]
 
       if (targetLine.match(checkedMatch)) {
         lines[lineIndex] = targetLine.replace(checkedMatch, '[ ]')
@@ -163,12 +163,12 @@ class MarkdownEditor extends React.Component {
   }
 
   handleKeyDown (e) {
-    let { config } = this.props
+    const { config } = this.props
     if (this.state.status !== 'CODE') return false
     const keyPressed = this.state.keyPressed
     keyPressed.add(e.keyCode)
     this.setState({ keyPressed })
-    let isNoteHandlerKey = (el) => { return keyPressed.has(el) }
+    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' &&
@@ -207,14 +207,14 @@ class MarkdownEditor extends React.Component {
   }
 
   render () {
-    let { className, value, config, storageKey } = this.props
+    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
 
-    let previewStyle = {}
+    const previewStyle = {}
     if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
 
     const storage = findStorage(storageKey)
@@ -242,6 +242,7 @@ class MarkdownEditor extends React.Component {
           fontSize={editorFontSize}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
+          scrollPastEnd={config.editor.scrollPastEnd}
           storageKey={storageKey}
           onChange={(e) => this.handleChange(e)}
           onBlur={(e) => this.handleBlur(e)}
@@ -259,6 +260,7 @@ class MarkdownEditor extends React.Component {
           codeBlockFontFamily={config.editor.fontFamily}
           lineNumber={config.preview.lineNumber}
           indentSize={editorIndentSize}
+          scrollPastEnd={config.editor.scrollPastEnd}
           ref='preview'
           onContextMenu={(e) => this.handleContextMenu(e)}
           tabIndex='0'

browser/components/MarkdownPreview.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import markdown from 'browser/lib/markdown'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
@@ -48,12 +49,12 @@ body {
   font-size: ${fontSize}px;
 }
 code {
-  font-family: ${codeBlockFontFamily.join(', ')};
+  font-family: '${codeBlockFontFamily.join("','")}';
   background-color: rgba(0,0,0,0.04);
 }
 .lineNumber {
   ${lineNumber && 'display: block !important;'}
-  font-family: ${codeBlockFontFamily.join(', ')};
+  font-family: '${codeBlockFontFamily.join("','")}';
 }
 
 .clipboardButton {
@@ -126,10 +127,10 @@ export default class MarkdownPreview extends React.Component {
     e.preventDefault()
     e.stopPropagation()
 
-    let anchor = e.target.closest('a')
-    let href = anchor.getAttribute('href')
+    const anchor = e.target.closest('a')
+    const href = anchor.getAttribute('href')
     if (_.isString(href) && href.match(/^#/)) {
-      let targetElement = this.refs.root.contentWindow.document.getElementById(href.substring(1, href.length))
+      const targetElement = this.refs.root.contentWindow.document.getElementById(href.substring(1, href.length))
       if (targetElement != null) {
         this.getWindow().scrollTo(0, targetElement.offsetTop)
       }
@@ -143,10 +144,12 @@ export default class MarkdownPreview extends React.Component {
   }
 
   handleContextMenu (e) {
+    if (!this.props.onContextMenu) return
     this.props.onContextMenu(e)
   }
 
   handleMouseDown (e) {
+    if (!this.props.onMouseDown) return
     if (e.target != null) {
       switch (e.target.tagName) {
         case 'A':
@@ -158,6 +161,7 @@ export default class MarkdownPreview extends React.Component {
   }
 
   handleMouseUp (e) {
+    if (!this.props.onMouseUp) return
     if (e.target != null && e.target.tagName === 'A') {
       return null
     }
@@ -251,12 +255,13 @@ export default class MarkdownPreview extends React.Component {
   }
 
   applyStyle () {
-    let { fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = this.props
+    const { fontSize, lineNumber, codeBlockTheme } = this.props
+    let { fontFamily, codeBlockFontFamily } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
-      ? [fontFamily].concat(defaultFontFamily)
+      ? fontFamily.split(',').map(fontName => fontName.trim()).concat(defaultFontFamily)
       : defaultFontFamily
     codeBlockFontFamily = _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
-      ? [codeBlockFontFamily].concat(defaultCodeBlockFontFamily)
+      ? codeBlockFontFamily.split(',').map(fontName => fontName.trim()).concat(defaultCodeBlockFontFamily)
       : defaultCodeBlockFontFamily
 
     this.setCodeTheme(codeBlockTheme)
@@ -284,7 +289,8 @@ export default class MarkdownPreview extends React.Component {
       el.removeEventListener('click', this.linkClickHandler)
     })
 
-    let { value, theme, indentSize, codeBlockTheme, showCopyNotification, storagePath } = this.props
+    const { theme, indentSize, showCopyNotification, storagePath } = this.props
+    let { value, codeBlockTheme } = this.props
 
     this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
 
@@ -327,7 +333,7 @@ export default class MarkdownPreview extends React.Component {
       let syntax = CodeMirror.findModeByName(el.className)
       if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
       CodeMirror.requireMode(syntax.mode, () => {
-        let content = htmlTextHelper.decodeEntities(el.innerHTML)
+        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) => {
@@ -352,7 +358,7 @@ export default class MarkdownPreview extends React.Component {
         })
       })
     })
-    let opts = {}
+    const opts = {}
     // if (this.props.theme === 'dark') {
     //   opts['font-color'] = '#DDD'
     //   opts['line-color'] = '#DDD'
@@ -362,7 +368,7 @@ export default class MarkdownPreview extends React.Component {
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.flowchart'), (el) => {
       Raphael.setWindow(this.getWindow())
       try {
-        let diagram = flowchart.parse(htmlTextHelper.decodeEntities(el.innerHTML))
+        const diagram = flowchart.parse(htmlTextHelper.decodeEntities(el.innerHTML))
         el.innerHTML = ''
         diagram.drawSVG(el, opts)
         _.forEach(el.querySelectorAll('a'), (el) => {
@@ -378,7 +384,7 @@ export default class MarkdownPreview extends React.Component {
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.sequence'), (el) => {
       Raphael.setWindow(this.getWindow())
       try {
-        let diagram = SequenceDiagram.parse(htmlTextHelper.decodeEntities(el.innerHTML))
+        const diagram = SequenceDiagram.parse(htmlTextHelper.decodeEntities(el.innerHTML))
         el.innerHTML = ''
         diagram.drawSVG(el, {theme: 'simple'})
         _.forEach(el.querySelectorAll('a'), (el) => {
@@ -401,11 +407,11 @@ export default class MarkdownPreview extends React.Component {
   }
 
   scrollTo (targetRow) {
-    let blocks = this.getWindow().document.querySelectorAll('body>[data-line]')
+    const blocks = this.getWindow().document.querySelectorAll('body>[data-line]')
 
     for (let index = 0; index < blocks.length; index++) {
       let block = blocks[index]
-      let row = parseInt(block.getAttribute('data-line'))
+      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)
@@ -435,7 +441,7 @@ export default class MarkdownPreview extends React.Component {
   }
 
   render () {
-    let { className, style, tabIndex } = this.props
+    const { className, style, tabIndex } = this.props
     return (
       <iframe className={className != null
           ? 'MarkdownPreview ' + className

browser/components/MarkdownSplitEditor.js

@@ -0,0 +1,87 @@
+import React from 'react'
+import CodeEditor from 'browser/components/CodeEditor'
+import MarkdownPreview from 'browser/components/MarkdownPreview'
+import { findStorage } from 'browser/lib/findStorage'
+
+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()
+  }
+
+  handleOnChange () {
+    this.value = this.refs.code.value
+    this.props.onChange()
+  }
+
+  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)
+    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}
+          indentType={config.editor.indentType}
+          scrollPastEnd={config.editor.scrollPastEnd}
+          storageKey={storageKey}
+          onChange={this.handleOnChange.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}
+          ref='preview'
+          tabInde='0'
+          value={value}
+          onCheckboxClick={(e) => this.handleCheckboxClick(e)}
+          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

@@ -1,4 +1,5 @@
-import React, {PropTypes} from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './ModalEscButton.styl'
 

browser/components/NavToggleButton.js

@@ -1,7 +1,8 @@
 /**
 * @fileoverview Micro component for toggle SideNav
 */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import styles from './NavToggleButton.styl'
 import CSSModules from 'browser/lib/CSSModules'
 

browser/components/NavToggleButton.styl

@@ -9,6 +9,10 @@
   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()

browser/components/NoteItem.js

@@ -1,7 +1,8 @@
 /**
  * @fileoverview Note item component.
  */
-import React, { PropTypes } from 'react'
+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'

browser/components/NoteItem.styl

@@ -73,6 +73,7 @@ $control-height = 30px
   position relative
   font-size 12px
   color $ui-inactive-text-color
+  top 2px
 
 .item-title
   font-size 15px
@@ -80,8 +81,8 @@ $control-height = 30px
   position relative
   top -12px
   left 20px
-  padding-right 15px
-  padding-bottom 4px
+  padding 0px 15px 0px 0px
+  margin-bottom 4px
   overflow ellipsis
   color $ui-inactive-text-color
 
@@ -230,3 +231,77 @@ body[data-theme="dark"]
   .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

@@ -1,7 +1,8 @@
 /**
  * @fileoverview Note item component with simple display mode.
  */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './NoteItemSimple.styl'
 
@@ -13,7 +14,7 @@ import styles from './NoteItemSimple.styl'
  * @param {Function} handleNoteContextMenu
  * @param {Function} handleDragStart
  */
-const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu, handleDragStart }) => (
+const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu, handleDragStart, pathname }) => (
   <div styleName={isActive
       ? 'item-simple--active'
       : 'item-simple'
@@ -29,6 +30,10 @@ const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu
         ? <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(/\/home|\/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>

browser/components/NoteItemSimple.styl

@@ -50,6 +50,7 @@ $control-height = 30px
 .item-simple-title
   font-size 13px
   height 40px
+  padding-right 20px
   box-sizing border-box
   line-height 24px
   padding-top 8px
@@ -67,6 +68,15 @@ $control-height = 30px
   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
@@ -143,3 +153,57 @@ body[data-theme="dark"]
 
   .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%)

browser/components/RealtimeNotification.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './RealtimeNotification.styl'
 

browser/components/RealtimeNotification.styl

@@ -1,11 +1,8 @@
 .notification-area
   z-index 1000
   font-size 12px
-  position absolute
-  bottom 20px
-  width 100%
-  float left
-  height 30px
+  position: relative
+  top: 12px
   background-color none
 
 .notification-link
@@ -32,3 +29,15 @@ body[data-theme="dark"]
     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

@@ -1,7 +1,8 @@
 /**
  * @fileoverview Filter for all notes.
  */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SideNavFilter.styl'
 
@@ -40,7 +41,7 @@ const SideNavFilter = ({
       <div styleName='iconWrap'>
         <img src={isStarredActive
             ? '../resources/icon/icon-star-active.svg'
-            : '../resources/icon/icon-star.svg'
+            : '../resources/icon/icon-star-sidenav.svg'
           }
         />
       </div>
@@ -54,7 +55,7 @@ const SideNavFilter = ({
       <div styleName='iconWrap'>
         <img src={isTrashedActive
             ? '../resources/icon/icon-trash-active.svg'
-            : '../resources/icon/icon-trash.svg'
+            : '../resources/icon/icon-trash-sidenav.svg'
           }
         />
       </div>

browser/components/SideNavFilter.styl

@@ -55,11 +55,15 @@
 
 .menu--folded
   @extend .menu
-  .menu-button, .menu-button--active
+  .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
@@ -179,3 +183,46 @@ body[data-theme="dark"]
       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

@@ -85,8 +85,17 @@ class SnippetTab extends React.Component {
     })
   }
 
+  handleDragStart (e) {
+    e.dataTransfer.dropEffect = 'move'
+    this.props.onDragStart(e)
+  }
+
+  handleDrop (e) {
+    this.props.onDrop(e)
+  }
+
   render () {
-    let { isActive, snippet, isDeletable } = this.props
+    const { isActive, snippet, isDeletable } = this.props
     return (
       <div styleName={isActive
           ? 'root--active'
@@ -98,6 +107,9 @@ class SnippetTab extends React.Component {
             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
@@ -127,6 +139,7 @@ class SnippetTab extends React.Component {
 }
 
 SnippetTab.propTypes = {
+
 }
 
 export default CSSModules(SnippetTab, styles)

browser/components/SnippetTab.styl

@@ -38,7 +38,7 @@
   text-align center
   border none
   padding 0
-  color transparent
+  color $ui-inactive-text-color
   background-color transparent
   border-radius 2px
 
@@ -89,3 +89,50 @@ body[data-theme="dark"]
   .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

@@ -1,10 +1,11 @@
 /**
  * @fileoverview Micro component for showing storage.
  */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import styles from './StorageItem.styl'
 import CSSModules from 'browser/lib/CSSModules'
-import { isNumber } from 'lodash'
+import _ from 'lodash'
 
 /**
  * @param {boolean} isActive
@@ -36,9 +37,9 @@ const StorageItem = ({
     <span styleName={isFolded
       ? 'folderList-item-name--folded' : 'folderList-item-name'
     }>
-      <text style={{color: folderColor, paddingRight: '10px'}}>{isActive ? <i className='fa fa-folder-open-o' /> : <i className='fa fa-folder-o' />}</text>{isFolded ? folderName.substring(0, 1) : folderName}
+      <text style={{color: folderColor, paddingRight: '10px'}}>{isActive ? <i className='fa fa-folder-open-o' /> : <i className='fa fa-folder-o' />}</text>{isFolded ? _.truncate(folderName, {length: 1, omission: ''}) : folderName}
     </span>
-    {(!isFolded && isNumber(noteCount)) &&
+    {(!isFolded && _.isNumber(noteCount)) &&
       <span styleName='folderList-item-noteCount'>{noteCount}</span>
     }
     {isFolded &&

browser/components/StorageItem.styl

@@ -68,9 +68,9 @@
 
 .folderList-item-name--folded
   @extend .folderList-item-name
-  padding-left 17px
+  padding-left 7px
   text
-    display none
+    font-size 9px
 
 body[data-theme="white"]
   .folderList-item
@@ -109,3 +109,22 @@ body[data-theme="dark"]
     &: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

@@ -1,7 +1,8 @@
 /**
 * @fileoverview Micro component for showing StorageList
 */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import styles from './StorageList.styl'
 import CSSModules from 'browser/lib/CSSModules'
 

browser/components/TagListItem.js

@@ -1,7 +1,8 @@
 /**
 * @fileoverview Micro component for showing TagList.
 */
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import styles from './TagListItem.styl'
 import CSSModules from 'browser/lib/CSSModules'
 

browser/components/TodoListPercentage.js

@@ -2,7 +2,8 @@
  * @fileoverview Percentage of todo achievement.
  */
 
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TodoListPercentage.styl'
 
@@ -15,7 +16,9 @@ const TodoListPercentage = ({
 }) => (
   <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
     <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
-      <p styleName='percentageText'>{percentageOfTodo}%</p>
+      <div styleName='progressBarInner'>
+        <p styleName='percentageText'>{percentageOfTodo}%</p>
+      </div>
     </div>
   </div>
 )

browser/components/TodoListPercentage.styl

@@ -16,17 +16,36 @@
   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
-  padding: 2px 43%
   font-weight 600
 
 body[data-theme="dark"]
   .percentageBar
-    background-color #363A3D
+    background-color #444444
 
   .progressBar
-    background-color: alpha(#939395, 50%)
+    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

@@ -2,7 +2,8 @@
  * @fileoverview Percentage of todo achievement.
  */
 
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TodoProcess.styl'
 

browser/components/markdown.styl

@@ -77,6 +77,9 @@ body
 li
   label.taskListItem
     margin-left -2em
+    &.checked
+      text-decoration line-through
+      opacity 0.5
 div.math-rendered
   text-align center
 .math-failed
@@ -117,6 +120,7 @@ hr
   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
@@ -154,6 +158,7 @@ p
   line-height 1.6em
   margin 0 0 1em
   white-space pre-line
+  word-wrap break-word
 img
   max-width 100%
 strong, b
@@ -330,3 +335,9 @@ body[data-theme="dark"]
   kbd
     background-color themeDarkBorder
     color themeDarkText
+
+
+body[data-theme="solarized-dark"]
+  color $ui-solarized-dark-text-color
+  border-color themeDarkBorder
+  background-color $ui-solarized-dark-noteDetail-backgroundColor

browser/finder/FinderMain.styl

@@ -116,3 +116,41 @@ body[data-theme="dark"]
     absolute top bottom right
     left $nav-width + $list-width
     background-color $ui-dark-noteDetail-backgroundColor
+
+
+
+body[data-theme="solarized-dark"]
+  .root
+    background-color $ui-solarized-dark-backgroundColor
+  .search
+    border-color $ui-solarized-dark-borderColor
+  .search-input
+    color $ui-dark-text-color
+
+  .result
+    background-color $ui-solarized-dark-backgroundColor
+
+  .result-nav
+    background-color $ui-solarized-dark-backgroundColor
+    label
+      color $ui-dark-text-color
+
+  .result-nav-menu
+    navDarkButtonColor()
+
+  .result-nav-menu--active
+    background-color $ui-solarized-dark-button-backgroundColor
+    color $ui-dark-button--active-color
+    &:hover
+      background-color $ui-dark-button--active-backgroundColor
+
+  .result-list
+    border-color $ui-solarized-dark-borderColor
+    box-shadow none
+    top 0
+
+  .result-detail
+    absolute top bottom right
+    left $nav-width + $list-width
+    background-color $ui-solarized-dark-backgroundColor
+

browser/finder/NoteDetail.js

@@ -56,7 +56,7 @@ class NoteDetail extends React.Component {
   }
 
   selectPriorSnippet () {
-    let { note } = this.props
+    const { note } = this.props
     if (note.type === 'SNIPPET_NOTE' && note.snippets.length > 1) {
       this.setState({
         snippetIndex: (this.state.snippetIndex + note.snippets.length - 1) % note.snippets.length
@@ -65,7 +65,7 @@ class NoteDetail extends React.Component {
   }
 
   selectNextSnippet () {
-    let { note } = this.props
+    const { note } = this.props
     if (note.type === 'SNIPPET_NOTE' && note.snippets.length > 1) {
       this.setState({
         snippetIndex: (this.state.snippetIndex + 1) % note.snippets.length
@@ -74,7 +74,7 @@ class NoteDetail extends React.Component {
   }
 
   saveToClipboard () {
-    let { note } = this.props
+    const { note } = this.props
 
     if (note.type === 'MARKDOWN_NOTE') {
       clipboard.writeText(note.content)
@@ -95,7 +95,7 @@ class NoteDetail extends React.Component {
   }
 
   render () {
-    let { note, config } = this.props
+    const { note, config } = this.props
     if (note == null) {
       return (
         <div styleName='root' />
@@ -110,8 +110,8 @@ class NoteDetail extends React.Component {
     const storage = findStorage(note.storage)
 
     if (note.type === 'SNIPPET_NOTE') {
-      let tabList = note.snippets.map((snippet, index) => {
-        let isActive = this.state.snippetIndex === index
+      const tabList = note.snippets.map((snippet, index) => {
+        const isActive = this.state.snippetIndex === index
         return <div styleName={isActive
             ? 'tabList-item--active'
             : 'tabList-item'
@@ -131,8 +131,8 @@ class NoteDetail extends React.Component {
         </div>
       })
 
-      let viewList = note.snippets.map((snippet, index) => {
-        let isActive = this.state.snippetIndex === 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')
@@ -157,6 +157,7 @@ class NoteDetail extends React.Component {
               indentType={config.editor.indentType}
               indentSize={editorIndentSize}
               keyMap={config.editor.keyMap}
+              scrollPastEnd={config.editor.scrollPastEnd}
               readOnly
               ref={'code-' + index}
             />

browser/finder/NoteDetail.styl

@@ -3,8 +3,7 @@
 .root
   absolute top bottom left right
   bottom 30px
-  left $note-detail-left-margin
-  right $note-detail-right-margin
+  margin 0 25px
   height 100%
   width 365px
   background-color $ui-noteDetail-backgroundColor
@@ -96,3 +95,35 @@ body[data-theme="dark"]
     &:hover
       color white
       background-color $ui-dark-button--hover-backgroundColor
+  
+
+body[data-theme="solarized-dark"]
+  .root
+    background-color $ui-solarized-dark-backgroundColor
+
+  .description
+    border-color $ui-dark-borderColor
+    background-color $ui-solarized-dark-backgroundColor
+
+  .description-textarea
+    background-color $ui-solarized-dark-backgroundColor
+    color white
+
+  .tabList
+    background-color $ui-solarized-dark-backgroundColor
+
+  .tabList-item
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+
+  .tabList-item-button
+    border none
+    color $ui-dark-text-color
+    background-color transparent
+    transition color background-color 0.15s
+    border-left 4px solid transparent
+    &:hover
+      color white
+      background-color $ui-dark-button--hover-backgroundColor
+

browser/finder/NoteList.js

@@ -18,18 +18,18 @@ class NoteList extends React.Component {
   }
 
   componentDidUpdate () {
-    let { index } = this.props
+    const { index } = this.props
 
     if (index > -1) {
-      let list = this.refs.root
-      let item = list.childNodes[index]
+      const list = this.refs.root
+      const item = list.childNodes[index]
       if (item == null) return null
 
-      let overflowBelow = item.offsetTop + item.clientHeight - list.clientHeight - list.scrollTop > 0
+      const overflowBelow = item.offsetTop + item.clientHeight - list.clientHeight - list.scrollTop > 0
       if (overflowBelow) {
         list.scrollTop = item.offsetTop + item.clientHeight - list.clientHeight
       }
-      let overflowAbove = list.scrollTop > item.offsetTop
+      const overflowAbove = list.scrollTop > item.offsetTop
       if (overflowAbove) {
         list.scrollTop = item.offsetTop
       }
@@ -44,7 +44,7 @@ class NoteList extends React.Component {
   }
 
   handleScroll (e) {
-    let { notes } = this.props
+    const { notes } = this.props
 
     if (e.target.offsetHeight + e.target.scrollTop > e.target.scrollHeight - 100 && notes.length > this.state.range * 10 + 10) {
       this.setState({
@@ -54,9 +54,9 @@ class NoteList extends React.Component {
   }
 
   render () {
-    let { notes, index } = this.props
+    const { notes, index } = this.props
 
-    let notesList = notes
+    const notesList = notes
       .slice(0, 10 + 10 * this.state.range)
       .map((note, _index) => {
         const isActive = (index === _index)

browser/finder/StorageSection.js

@@ -19,18 +19,18 @@ class StorageSection extends React.Component {
   }
 
   handleHeaderClick (e) {
-    let { storage } = this.props
+    const { storage } = this.props
     this.props.handleStorageButtonClick(e, storage.key)
   }
 
   handleFolderClick (e, folder) {
-    let { storage } = this.props
+    const { storage } = this.props
     this.props.handleFolderButtonClick(e, storage.key, folder.key)
   }
 
   render () {
-    let { storage, filter } = this.props
-    let folderList = storage.folders
+    const { storage, filter } = this.props
+    const folderList = storage.folders
       .map(folder => (
         <StorageItem
           key={folder.key}

browser/finder/index.js

@@ -1,8 +1,8 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import ReactDOM from 'react-dom'
 import { connect, Provider } from 'react-redux'
 import _ from 'lodash'
-import ipc from './ipcClient'
 import store from './store'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './FinderMain.styl'
@@ -13,13 +13,14 @@ import SideNavFilter from 'browser/components/SideNavFilter'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 require('!!style!css!stylus?sourceMap!../main/global.styl')
 require('../lib/customMeta')
+require('./ipcClient.js')
 
 const electron = require('electron')
 const { remote } = electron
 const { Menu } = remote
 
 function hideFinder () {
-  let finderWindow = remote.getCurrentWindow()
+  const finderWindow = remote.getCurrentWindow()
   if (global.process.platform === 'win32') {
     finderWindow.blur()
     finderWindow.hide()
@@ -136,7 +137,7 @@ class FinderMain extends React.Component {
   }
 
   handleOnlySnippetCheckboxChange (e) {
-    let { filter } = this.state
+    const { filter } = this.state
     filter.includeSnippet = e.target.checked
     this.setState({
       filter: filter,
@@ -147,7 +148,7 @@ class FinderMain extends React.Component {
   }
 
   handleOnlyMarkdownCheckboxChange (e) {
-    let { filter } = this.state
+    const { filter } = this.state
     filter.includeMarkdown = e.target.checked
     this.refs.list.resetScroll()
     this.setState({
@@ -159,7 +160,7 @@ class FinderMain extends React.Component {
   }
 
   handleAllNotesButtonClick (e) {
-    let { filter } = this.state
+    const { filter } = this.state
     filter.type = 'ALL'
     this.refs.list.resetScroll()
     this.setState({
@@ -171,7 +172,7 @@ class FinderMain extends React.Component {
   }
 
   handleStarredButtonClick (e) {
-    let { filter } = this.state
+    const { filter } = this.state
     filter.type = 'STARRED'
     this.refs.list.resetScroll()
     this.setState({
@@ -183,7 +184,7 @@ class FinderMain extends React.Component {
   }
 
   handleStorageButtonClick (e, storage) {
-    let { filter } = this.state
+    const { filter } = this.state
     filter.type = 'STORAGE'
     filter.storage = storage
     this.refs.list.resetScroll()
@@ -196,7 +197,7 @@ class FinderMain extends React.Component {
   }
 
   handleFolderButtonClick (e, storage, folder) {
-    let { filter } = this.state
+    const { filter } = this.state
     filter.type = 'FOLDER'
     filter.storage = storage
     filter.folder = folder
@@ -218,12 +219,12 @@ class FinderMain extends React.Component {
   }
 
   render () {
-    let { data, config } = this.props
-    let { filter, search } = this.state
-    let storageList = []
-    for (let key in data.storageMap) {
-      let storage = data.storageMap[key]
-      let item = (
+    const { data, config } = this.props
+    const { filter, search } = this.state
+    const storageList = []
+    for (const key in data.storageMap) {
+      const storage = data.storageMap[key]
+      const item = (
         <StorageSection
           filter={filter}
           storage={storage}
@@ -252,7 +253,7 @@ class FinderMain extends React.Component {
         notes.push(data.noteMap[id])
       })
     } else {
-      for (let key in data.noteMap) {
+      for (const key in data.noteMap) {
         notes.push(data.noteMap[key])
       }
     }
@@ -264,13 +265,13 @@ class FinderMain extends React.Component {
     }
 
     if (search.trim().length > 0) {
-      let needle = new RegExp(_.escapeRegExp(search.trim()), 'i')
+      const needle = new RegExp(_.escapeRegExp(search.trim()), 'i')
       notes = notes.filter((note) => note.title.match(needle))
     }
     notes = notes
       .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
 
-    let activeNote = notes[this.state.index]
+    const activeNote = notes[this.state.index]
     this.noteCount = notes.length
 
     return (

browser/finder/ipcClient.js

@@ -10,7 +10,7 @@ nodeIpc.config.retry = 1500
 nodeIpc.config.silent = true
 
 function killFinder () {
-  let finderWindow = remote.getCurrentWindow()
+  const finderWindow = remote.getCurrentWindow()
   finderWindow.removeAllListeners()
   if (global.process.platform === 'darwin') {
     // Only OSX has another app process.
@@ -21,7 +21,7 @@ function killFinder () {
 }
 
 function toggleFinder () {
-  let finderWindow = remote.getCurrentWindow()
+  const finderWindow = remote.getCurrentWindow()
   if (global.process.platform === 'darwin') {
     if (finderWindow.isVisible()) {
       finderWindow.hide()
@@ -86,6 +86,8 @@ nodeIpc.connectTo(
         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')
       }

browser/finder/store.js

@@ -2,7 +2,7 @@ import { combineReducers, createStore } from 'redux'
 import { routerReducer } from 'react-router-redux'
 import { DEFAULT_CONFIG } from 'browser/main/lib/ConfigManager'
 
-let defaultData = {
+const defaultData = {
   storageMap: {},
   noteMap: {},
   starredSet: [],
@@ -40,12 +40,12 @@ function config (state = DEFAULT_CONFIG, action) {
   return state
 }
 
-let reducer = combineReducers({
+const reducer = combineReducers({
   data,
   config,
   routing: routerReducer
 })
 
-let store = createStore(reducer)
+const store = createStore(reducer)
 
 export default store

browser/lib/Mutable.js

@@ -38,15 +38,15 @@ class MutableMap {
   }
 
   map (cb) {
-    let result = []
-    for (let [key, value] of this._map) {
+    const result = []
+    for (const [key, value] of this._map) {
       result.push(cb(value, key))
     }
     return result
   }
 
   toJS () {
-    let result = {}
+    const result = {}
     for (let [key, value] of this._map) {
       if (value instanceof MutableSet || value instanceof MutableMap) {
         value = value.toJS()
@@ -85,7 +85,7 @@ class MutableSet {
   }
 
   map (cb) {
-    let result = []
+    const result = []
     this._set.forEach(function (value, key) {
       result.push(cb(value, key))
     })

browser/lib/findNoteTitle.js

@@ -1,11 +1,11 @@
 export function findNoteTitle (value) {
-  let splitted = value.split('\n')
+  const splitted = value.split('\n')
   let title = null
   let isInsideCodeBlock = false
 
   splitted.some((line, index) => {
-    let trimmedLine = line.trim()
-    let trimmedNextLine = splitted[index + 1] === undefined ? '' : splitted[index + 1].trim()
+    const trimmedLine = line.trim()
+    const trimmedNextLine = splitted[index + 1] === undefined ? '' : splitted[index + 1].trim()
     if (trimmedLine.match('```')) {
       isInsideCodeBlock = !isInsideCodeBlock
     }

browser/lib/getTodoStatus.js

@@ -1,11 +1,11 @@
 export function getTodoStatus (content) {
-  let splitted = content.split('\n')
+  const splitted = content.split('\n')
   let numberOfTodo = 0
   let numberOfCompletedTodo = 0
 
   splitted.forEach((line) => {
-    let trimmedLine = line.trim()
-    if (trimmedLine.match(/^[\+\-\*] \[\s|x\] ./)) {
+    const trimmedLine = line.trim()
+    if (trimmedLine.match(/^[\+\-\*] \[(\s|x)\] ./)) {
       numberOfTodo++
     }
     if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {

browser/lib/markdown.js

@@ -2,13 +2,15 @@ import markdownit from 'markdown-it'
 import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
 import _ from 'lodash'
+import ConfigManager from 'browser/main/lib/ConfigManager'
 
 // FIXME We should not depend on global variable.
 const katex = window.katex
+const config = ConfigManager.get()
 
 function createGutter (str) {
-  let lc = (str.match(/\n/g) || []).length
-  let lines = []
+  const lc = (str.match(/\n/g) || []).length
+  const lines = []
   for (let i = 1; i <= lc; i++) {
     lines.push('<span class="CodeMirror-linenumber">' + i + '</span>')
   }
@@ -39,6 +41,10 @@ md.use(emoji, {
   shortcuts: {}
 })
 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 {
@@ -76,8 +82,8 @@ md.use(require('markdown-it-plantuml'))
 md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
   let content, terminate, i, l, token
   let nextLine = startLine + 1
-  let terminatorRules = state.md.block.ruler.getRules('paragraph')
-  let endLine = state.lineMax
+  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++) {
@@ -107,9 +113,9 @@ md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
   token.map = [ startLine, state.line ]
 
   if (state.parentType === 'list') {
-    let match = content.match(/^\[( |x)\] ?(.+)/i)
+    const match = content.match(/^\[( |x)\] ?(.+)/i)
     if (match) {
-      content = `<label class='taskListItem' for='checkbox-${startLine + 1}'><input type='checkbox'${match[1] !== ' ' ? ' checked' : ''} id='checkbox-${startLine + 1}'/> ${content.substring(4, content.length)}</label>`
+      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>`
     }
   }
 
@@ -124,7 +130,7 @@ md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
 })
 
 // Add line number attribute for scrolling
-let originalRender = md.renderer.render
+const originalRender = md.renderer.render
 md.renderer.render = function render (tokens, options, env) {
   tokens.forEach((token) => {
     switch (token.type) {
@@ -135,7 +141,7 @@ md.renderer.render = function render (tokens, options, env) {
         token.attrPush(['data-line', token.map[0]])
     }
   })
-  let result = originalRender.call(md.renderer, tokens, options, env)
+  const result = originalRender.call(md.renderer, tokens, options, env)
   return result
 }
 // FIXME We should not depend on global variable.

browser/lib/search.js

@@ -16,7 +16,7 @@ export default function searchFromNotes (notes, search) {
 
 function findByTag (notes, block) {
   const tag = block.match(/#(.+)/)[1]
-  let regExp = new RegExp(_.escapeRegExp(tag), 'i')
+  const regExp = new RegExp(_.escapeRegExp(tag), 'i')
   return notes.filter((note) => {
     if (!_.isArray(note.tags)) return false
     return note.tags.some((_tag) => {
@@ -26,7 +26,7 @@ function findByTag (notes, block) {
 }
 
 function findByWord (notes, block) {
-  let regExp = new RegExp(_.escapeRegExp(block), 'i')
+  const regExp = new RegExp(_.escapeRegExp(block), 'i')
   return notes.filter((note) => {
     if (_.isArray(note.tags) && note.tags.some((_tag) => {
       return _tag.match(regExp)

browser/main/Detail/Detail.styl

@@ -22,3 +22,9 @@ body[data-theme="dark"]
     background-color $ui-dark-backgroundColor
   .empty-message
     color $ui-dark-inactive-text-color
+    
+body[data-theme="solarized-dark"]
+  .root
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+  .empty-message
+    color $ui-solarized-dark-text-color

browser/main/Detail/FolderSelect.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './FolderSelect.styl'
 import _ from 'lodash'
@@ -73,8 +74,8 @@ class FolderSelect extends React.Component {
       case 9:
         if (e.shiftKey) {
           e.preventDefault()
-          let tabbable = document.querySelectorAll('a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])')
-          let previousEl = tabbable[Array.prototype.indexOf.call(tabbable, this.refs.root) - 1]
+          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()
         }
     }
@@ -89,9 +90,9 @@ class FolderSelect extends React.Component {
   }
 
   handleSearchInputChange (e) {
-    let { folders } = this.props
-    let search = this.refs.search.value
-    let optionIndex = search.length > 0
+    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'))
       })
@@ -129,7 +130,7 @@ class FolderSelect extends React.Component {
 
   nextOption () {
     let { optionIndex } = this.state
-    let { folders } = this.props
+    const { folders } = this.props
 
     optionIndex++
     if (optionIndex >= folders.length) optionIndex = 0
@@ -140,7 +141,7 @@ class FolderSelect extends React.Component {
   }
 
   previousOption () {
-    let { folders } = this.props
+    const { folders } = this.props
     let { optionIndex } = this.state
 
     optionIndex--
@@ -152,10 +153,10 @@ class FolderSelect extends React.Component {
   }
 
   selectOption () {
-    let { folders } = this.props
-    let optionIndex = this.state.optionIndex
+    const { folders } = this.props
+    const optionIndex = this.state.optionIndex
 
-    let folder = folders[optionIndex]
+    const folder = folders[optionIndex]
     if (folder != null) {
       this.setState({
         status: 'FOCUS'
@@ -184,10 +185,10 @@ class FolderSelect extends React.Component {
   }
 
   render () {
-    let { className, data, value } = this.props
-    let splitted = value.split('-')
-    let storageKey = splitted.shift()
-    let folderKey = splitted.shift()
+    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) => {
@@ -198,14 +199,14 @@ class FolderSelect extends React.Component {
       })
     })
 
-    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
 
     if (this.state.search.trim().length > 0) {
-      let filter = new RegExp('^' + _.escapeRegExp(this.state.search), 'i')
+      const filter = new RegExp('^' + _.escapeRegExp(this.state.search), 'i')
       options = options.filter((option) => filter.test(option.folder.name))
     }
 
-    let optionList = options
+    const optionList = options
       .map((option, index) => {
         return (
           <div styleName={index === this.state.optionIndex

browser/main/Detail/InfoButton.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoButton.styl'
 

browser/main/Detail/InfoButton.styl

@@ -1,7 +1,6 @@
 .control-infoButton
   top 10px
-  margin-bottom 10px
-  topBarButtonLight()
+  topBarButtonRight()
 
 .infoButton
   padding 0px

browser/main/Detail/InfoPanel.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'
 

browser/main/Detail/InfoPanelTrashed.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'
 

browser/main/Detail/MarkdownNoteDetail.js

@@ -1,7 +1,9 @@
-import React, { PropTypes } from 'react'
+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'
@@ -14,6 +16,7 @@ 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 PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
@@ -25,7 +28,7 @@ import striptags from 'striptags'
 
 const electron = require('electron')
 const { remote } = electron
-const { Menu, MenuItem, dialog } = remote
+const { dialog } = remote
 
 class MarkdownNoteDetail extends React.Component {
   constructor (props) {
@@ -38,7 +41,8 @@ class MarkdownNoteDetail extends React.Component {
         content: ''
       }, props.note),
       isLockButtonShown: false,
-      isLocked: false
+      isLocked: false,
+      editorType: props.config.editor.type
     }
     this.dispatchTimer = null
 
@@ -74,7 +78,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleChange (e) {
-    let { note } = this.state
+    const { note } = this.state
 
     note.content = this.refs.content.value
     if (this.refs.tags) note.tags = this.refs.tags.value
@@ -96,7 +100,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   saveNow () {
-    let { note, dispatch } = this.props
+    const { note, dispatch } = this.props
     clearTimeout(this.saveQueue)
     this.saveQueue = null
 
@@ -112,11 +116,11 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleFolderChange (e) {
-    let { note } = this.state
-    let value = this.refs.folder.value
-    let splitted = value.split('-')
-    let newStorageKey = splitted.shift()
-    let newFolderKey = splitted.shift()
+    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)
@@ -125,7 +129,7 @@ class MarkdownNoteDetail extends React.Component {
           isMovingNote: true,
           note: Object.assign({}, newNote)
         }, () => {
-          let { dispatch, location } = this.props
+          const { dispatch, location } = this.props
           dispatch({
             type: 'MOVE_NOTE',
             originNote: note,
@@ -145,7 +149,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleStarButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
     if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
@@ -170,22 +174,22 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleTrashButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
     const { isTrashed } = note
 
     if (isTrashed) {
-      let dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
         type: 'warning',
         message: 'Confirm note deletion',
         detail: 'This will permanently remove this note.',
         buttons: ['Confirm', 'Cancel']
       })
       if (dialogueButtonIndex === 1) return
-      let { note, dispatch } = this.props
+      const { note, dispatch } = this.props
       dataApi
         .deleteNote(note.storage, note.key)
         .then((data) => {
-          let dispatchHandler = () => {
+          const dispatchHandler = () => {
             dispatch({
               type: 'DELETE_NOTE',
               storageKey: data.storageKey,
@@ -207,7 +211,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   handleUndoButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
 
     note.isTrashed = false
 
@@ -232,7 +236,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   getToggleLockButton () {
-    return this.state.isLocked ? '../resources/icon/icon-lock.svg' : '../resources/icon/icon-unlock.svg'
+    return this.state.isLocked ? '../resources/icon/icon-previewoff-on.svg' : '../resources/icon/icon-previewoff-off.svg'
   }
 
   handleDeleteKeyDown (e) {
@@ -261,13 +265,46 @@ class MarkdownNoteDetail extends React.Component {
     ee.emit('print')
   }
 
-  render () {
-    let { data, config, location } = this.props
-    let { note } = this.state
-    let storageKey = note.storage
-    let folderKey = note.folder
+  handleSwitchMode (type) {
+    this.setState({ editorType: type }, () => {
+      const newConfig = Object.assign({}, this.props.config)
+      newConfig.editor.type = type
+      ConfigManager.set(newConfig)
+    })
+  }
 
-    let options = []
+  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={(e) => this.handleChange(e)}
+        ignorePreviewPointerEvents={ignorePreviewPointerEvents}
+      />
+    } else {
+      return <MarkdownSplitEditor
+        ref='content'
+        config={config}
+        value={note.content}
+        storageKey={note.storage}
+        onChange={(e) => this.handleChange(e)}
+        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({
@@ -276,7 +313,7 @@ class MarkdownNoteDetail extends React.Component {
         })
       })
     })
-    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
 
     const trashTopBar = <div styleName='info'>
       <div styleName='info-left'>
@@ -317,6 +354,16 @@ class MarkdownNoteDetail extends React.Component {
           value={this.state.note.tags}
           onChange={(e) => this.handleChange(e)}
         />
+
+        <div styleName='mode-tab'>
+          <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('SPLIT')}>
+            <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-split-on.svg' : '../resources/icon/icon-mode-split-on-active.svg'} />
+          </div>
+          <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('EDITOR_PREVIEW')}>
+            <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : '../resources/icon/icon-mode-markdown-off.svg'} />
+          </div>
+        </div>
+
         <TodoListPercentage
           percentageOfTodo={getTodoPercentageOfCompleted(note.content)}
         />
@@ -349,7 +396,7 @@ class MarkdownNoteDetail extends React.Component {
         <button styleName='control-fullScreenButton'
           onMouseDown={(e) => this.handleFullScreenButton(e)}
         >
-          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg' />
+          <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
         </button>
 
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
@@ -379,15 +426,7 @@ class MarkdownNoteDetail extends React.Component {
         {location.pathname === '/trashed' ? trashTopBar : detailTopBar}
 
         <div styleName='body'>
-          <MarkdownEditor
-            ref='content'
-            styleName='body-noteEditor'
-            config={config}
-            value={this.state.note.content}
-            storageKey={this.state.note.storage}
-            onChange={(e) => this.handleChange(e)}
-            ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
-          />
+          {this.renderEditor()}
         </div>
 
         <StatusBar

browser/main/Detail/MarkdownNoteDetail.styl

@@ -12,9 +12,8 @@
   padding-bottom 3px
 
 .control-lockButton
-  top 160px
-  margin-bottom 10px
-  topBarButtonLight()
+  top 150px
+  topBarButtonRight()
 
 .trashed-infopanel
   top 40px
@@ -22,7 +21,7 @@
 
 .control-fullScreenButton
   top 80px
-  topBarButtonLight()
+  topBarButtonRight()
 
 .body
   absolute left right
@@ -30,11 +29,30 @@
   right 0
   top $info-height + $info-margin-under-border
   bottom $statusBar-height
-  max-width 600px
-  margin 0 auto
+  margin 0 45px
 .body-noteEditor
   absolute top bottom left right
 
+.mode-tab
+  border 1px solid #eee
+  height 34px
+  display flex
+  align-items center
+  div
+    width 40px
+    height 100%
+    background-color #f9f9f9
+    display flex
+    align-items center
+    justify-content center
+    cursor pointer
+    &:first-child
+      border-right 1px solid #eee
+  .active
+    background-color #fff
+    box-shadow 2px 0px 7px #eee
+    z-index 1
+  
 body[data-theme="white"]
   .root
     box-shadow $note-detail-box-shadow
@@ -44,7 +62,7 @@ body[data-theme="dark"]
   .root
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
-    border none
+    border-left 1px solid $ui-dark-borderColor
 
   .control-lockButton
     topBarButtonDark()
@@ -54,3 +72,28 @@ body[data-theme="dark"]
 
   .control-fullScreenButton
     topBarButtonDark()
+
+  .mode-tab
+    border 1px solid #444444
+    div
+      background-color $ui-dark-noteDetail-backgroundColor
+      &:first-child
+        border-right 1px solid #444444
+    .active
+      background-color #3A404C
+      box-shadow 2px 0px 7px #444444
+
+body[data-theme="solarized-dark"]
+  .root
+    border-left 1px solid $ui-solarized-dark-borderColor
+    background-color $ui-solarized-dark-noteDetail-backgroundColor
+
+  .mode-tab
+    border 1px solid #586E75
+    div
+      background-color $ui-solarized-dark-noteDetail-backgroundColor
+      &:first-child
+        border-right 1px solid #586E75
+    .active
+      background-color #002B36
+      box-shadow 2px 0px 7px #222222

browser/main/Detail/NoteDetailInfo.styl

@@ -96,3 +96,9 @@ body[data-theme="dark"]
 
   .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

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TrashButton.styl'
 

browser/main/Detail/SnippetNoteDetail.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+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'
@@ -61,7 +62,7 @@ class SnippetNoteDetail extends React.Component {
   componentWillReceiveProps (nextProps) {
     if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
       if (this.saveQueue != null) this.saveNow()
-      let nextNote = Object.assign({
+      const nextNote = Object.assign({
         description: ''
       }, nextProps.note, {
         snippets: nextProps.note.snippets.map((snippet) => Object.assign({}, snippet))
@@ -70,7 +71,7 @@ class SnippetNoteDetail extends React.Component {
         snippetIndex: 0,
         note: nextNote
       }, () => {
-        let { snippets } = this.state.note
+        const { snippets } = this.state.note
         snippets.forEach((snippet, index) => {
           this.refs['code-' + index].reload()
         })
@@ -84,7 +85,7 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleChange (e) {
-    let { note } = this.state
+    const { note } = this.state
 
     if (this.refs.tags) note.tags = this.refs.tags.value
     note.description = this.refs.description.value
@@ -106,7 +107,7 @@ class SnippetNoteDetail extends React.Component {
   }
 
   saveNow () {
-    let { note, dispatch } = this.props
+    const { note, dispatch } = this.props
     clearTimeout(this.saveQueue)
     this.saveQueue = null
 
@@ -122,11 +123,11 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleFolderChange (e) {
-    let { note } = this.state
-    let value = this.refs.folder.value
-    let splitted = value.split('-')
-    let newStorageKey = splitted.shift()
-    let newFolderKey = splitted.shift()
+    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)
@@ -135,7 +136,7 @@ class SnippetNoteDetail extends React.Component {
           isMovingNote: true,
           note: Object.assign({}, newNote)
         }, () => {
-          let { dispatch, location } = this.props
+          const { dispatch, location } = this.props
           dispatch({
             type: 'MOVE_NOTE',
             originNote: note,
@@ -155,7 +156,7 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleStarButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
     if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
@@ -172,22 +173,22 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleTrashButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
     const { isTrashed } = note
 
     if (isTrashed) {
-      let dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
         type: 'warning',
         message: 'Confirm note deletion',
         detail: 'This will permanently remove this note.',
         buttons: ['Confirm', 'Cancel']
       })
       if (dialogueButtonIndex === 1) return
-      let { note, dispatch } = this.props
+      const { note, dispatch } = this.props
       dataApi
         .deleteNote(note.storage, note.key)
         .then((data) => {
-          let dispatchHandler = () => {
+          const dispatchHandler = () => {
             dispatch({
               type: 'DELETE_NOTE',
               storageKey: data.storageKey,
@@ -209,7 +210,7 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleUndoButtonClick (e) {
-    let { note } = this.state
+    const { note } = this.state
 
     note.isTrashed = false
 
@@ -235,10 +236,31 @@ class SnippetNoteDetail extends React.Component {
     })
   }
 
+  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) {
-        let dialogIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+        const dialogIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
           type: 'warning',
           message: 'Delete a snippet',
           detail: 'This work cannot be undone.',
@@ -288,7 +310,7 @@ class SnippetNoteDetail extends React.Component {
 
   handleModeOptionClick (index, name) {
     return (e) => {
-      let snippets = this.state.note.snippets.slice()
+      const snippets = this.state.note.snippets.slice()
       snippets[index].mode = name
       this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
 
@@ -306,7 +328,7 @@ class SnippetNoteDetail extends React.Component {
 
   handleCodeChange (index) {
     return (e) => {
-      let snippets = this.state.note.snippets.slice()
+      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({
@@ -333,7 +355,7 @@ class SnippetNoteDetail extends React.Component {
         break
       case 76:
         {
-          let isSuper = global.process.platform === 'darwin'
+          const isSuper = global.process.platform === 'darwin'
             ? e.metaKey
             : e.ctrlKey
           if (isSuper) {
@@ -344,7 +366,7 @@ class SnippetNoteDetail extends React.Component {
         break
       case 84:
         {
-          let isSuper = global.process.platform === 'darwin'
+          const isSuper = global.process.platform === 'darwin'
             ? e.metaKey
             : e.ctrlKey
           if (isSuper) {
@@ -357,7 +379,7 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleModeButtonClick (e, index) {
-    let menu = new Menu()
+    const menu = new Menu()
     CodeMirror.modeInfo.forEach((mode) => {
       menu.append(new MenuItem({
         label: mode.name,
@@ -398,8 +420,8 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleIndentSizeItemClick (e, indentSize) {
-    let { config, dispatch } = this.props
-    let editor = Object.assign({}, config.editor, {
+    const { config, dispatch } = this.props
+    const editor = Object.assign({}, config.editor, {
       indentSize
     })
     ConfigManager.set({
@@ -414,8 +436,8 @@ class SnippetNoteDetail extends React.Component {
   }
 
   handleIndentTypeItemClick (e, indentType) {
-    let { config, dispatch } = this.props
-    let editor = Object.assign({}, config.editor, {
+    const { config, dispatch } = this.props
+    const editor = Object.assign({}, config.editor, {
       indentType
     })
     ConfigManager.set({
@@ -434,14 +456,14 @@ class SnippetNoteDetail extends React.Component {
   }
 
   addSnippet () {
-    let { note } = this.state
+    const { note } = this.state
 
     note.snippets = note.snippets.concat([{
       name: '',
       mode: 'Plain Text',
       content: ''
     }])
-    let snippetIndex = note.snippets.length - 1
+    const snippetIndex = note.snippets.length - 1
 
     this.setState({
       note,
@@ -487,19 +509,19 @@ class SnippetNoteDetail extends React.Component {
   }
 
   render () {
-    let { data, config, location } = this.props
-    let { note } = this.state
+    const { data, config, location } = this.props
+    const { note } = this.state
 
-    let storageKey = note.storage
-    let folderKey = note.folder
+    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
 
-    let tabList = note.snippets.map((snippet, index) => {
-      let isActive = this.state.snippetIndex === index
+    const tabList = note.snippets.map((snippet, index) => {
+      const isActive = this.state.snippetIndex === index
 
       return <SnippetTab
         key={index}
@@ -510,11 +532,13 @@ class SnippetNoteDetail extends React.Component {
         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)}
       />
     })
 
-    let viewList = note.snippets.map((snippet, index) => {
-      let isActive = this.state.snippetIndex === 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')
@@ -541,6 +565,7 @@ class SnippetNoteDetail extends React.Component {
             indentType={config.editor.indentType}
             indentSize={editorIndentSize}
             keyMap={config.editor.keyMap}
+            scrollPastEnd={config.editor.scrollPastEnd}
             onChange={(e) => this.handleCodeChange(index)(e)}
             ref={'code-' + index}
           />
@@ -548,7 +573,7 @@ class SnippetNoteDetail extends React.Component {
       </div>
     })
 
-    let options = []
+    const options = []
     data.storageMap.forEach((storage, index) => {
       storage.folders.forEach((folder) => {
         options.push({
@@ -557,7 +582,7 @@ class SnippetNoteDetail extends React.Component {
         })
       })
     })
-    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+    const currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
 
     const trashTopBar = <div styleName='info'>
       <div styleName='info-left'>

browser/main/Detail/SnippetNoteDetail.styl

@@ -69,7 +69,7 @@
 .control-fullScreenButton
   top 80px
   margin-bottom 10px
-  topBarButtonLight()
+  topBarButtonRight()
 
 body[data-theme="white"]
   .root
@@ -78,7 +78,7 @@ body[data-theme="white"]
 
 body[data-theme="dark"]
   .root
-    border none
+    border-left 1px solid $ui-dark-borderColor
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
 
@@ -109,3 +109,20 @@ body[data-theme="dark"]
 
   .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

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StarButton.styl'
 import _ from 'lodash'
@@ -31,7 +32,7 @@ class StarButton extends React.Component {
   }
 
   render () {
-    let { className } = this.props
+    const { className } = this.props
 
     return (
       <button className={_.isString(className)

browser/main/Detail/StarButton.styl

@@ -1,6 +1,6 @@
 .root
   top 45px
-  topBarButtonLight()
+  topBarButtonRight()
   &:hover
     transition 0.2s
     color alpha($ui-favorite-star-button-color, 0.6)

browser/main/Detail/TagSelect.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TagSelect.styl'
 import _ from 'lodash'
@@ -37,6 +38,10 @@ class TagSelect extends React.Component {
     }
   }
 
+  handleNewTagBlur (e) {
+    this.submitTag()
+  }
+
   removeLastTag () {
     let { value } = this.props
 
@@ -59,7 +64,7 @@ class TagSelect extends React.Component {
   submitTag () {
     AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_TAG')
     let { value } = this.props
-    let newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')
+    const newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')
 
     if (newTag.length <= 0) {
       this.setState({
@@ -101,9 +106,9 @@ class TagSelect extends React.Component {
   }
 
   render () {
-    let { value, className } = this.props
+    const { value, className } = this.props
 
-    let tagList = _.isArray(value)
+    const tagList = _.isArray(value)
       ? value.map((tag) => {
         return (
           <span styleName='tag'
@@ -134,6 +139,7 @@ class TagSelect extends React.Component {
           placeholder='Add tag...'
           onChange={(e) => this.handleNewTagInputChange(e)}
           onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
+          onBlur={(e) => this.handleNewTagBlur(e)}
         />
       </div>
     )

browser/main/Detail/TagSelect.styl

@@ -6,6 +6,7 @@
   width 100%
   overflow-x scroll
   white-space nowrap
+  margin-right 10px
 
 .root::-webkit-scrollbar
   display none
@@ -64,3 +65,19 @@ body[data-theme="dark"]
     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/TrashButton.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TrashButton.styl'
 

browser/main/Detail/TrashButton.styl

@@ -1,11 +1,10 @@
 .control-trashButton
-  top 120px
-  margin-bottom 10px
-  topBarButtonLight()
+  top 115px
+  topBarButtonRight()
 
 .control-trashButton--in-trash
   top 60px
-  topBarButtonLight()
+  topBarButtonRight()
 
 .trashButton
   padding 0px

browser/main/Detail/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './Detail.styl'
 import _ from 'lodash'
@@ -32,12 +33,12 @@ class Detail extends React.Component {
   }
 
   render () {
-    let { location, data, config } = this.props
+    const { location, data, config } = this.props
     let note = null
     if (location.query.key != null) {
-      let splitted = location.query.key.split('-')
-      let storageKey = splitted.shift()
-      let noteKey = splitted.shift()
+      const splitted = location.query.key.split('-')
+      const storageKey = splitted.shift()
+      const noteKey = splitted.shift()
 
       note = data.noteMap.get(storageKey + '-' + noteKey)
     }

browser/main/Main.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+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'
@@ -23,7 +24,7 @@ class Main extends React.Component {
       mobileAnalytics.initAwsMobileAnalytics()
     }
 
-    let { config } = props
+    const { config } = props
 
     this.state = {
       isRightSliderFocused: false,
@@ -39,7 +40,7 @@ class Main extends React.Component {
   }
 
   getChildContext () {
-    let { status, config } = this.props
+    const { status, config } = this.props
 
     return {
       status,
@@ -48,12 +49,14 @@ class Main extends React.Component {
   }
 
   componentDidMount () {
-    let { dispatch, config } = this.props
+    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')
     }
@@ -99,8 +102,8 @@ class Main extends React.Component {
       this.setState({
         isRightSliderFocused: false
       }, () => {
-        let { dispatch } = this.props
-        let newListWidth = this.state.listWidth
+        const { dispatch } = this.props
+        const newListWidth = this.state.listWidth
         // TODO: ConfigManager should dispatch itself.
         ConfigManager.set({listWidth: newListWidth})
         dispatch({
@@ -115,8 +118,8 @@ class Main extends React.Component {
       this.setState({
         isLeftSliderFocused: false
       }, () => {
-        let { dispatch } = this.props
-        let navWidth = this.state.navWidth
+        const { dispatch } = this.props
+        const navWidth = this.state.navWidth
         // TODO: ConfigManager should dispatch itself.
         ConfigManager.set({ navWidth })
         dispatch({
@@ -129,7 +132,7 @@ class Main extends React.Component {
 
   handleMouseMove (e) {
     if (this.state.isRightSliderFocused) {
-      let offset = this.refs.body.getBoundingClientRect().left
+      const offset = this.refs.body.getBoundingClientRect().left
       let newListWidth = e.pageX - offset
       if (newListWidth < 10) {
         newListWidth = 10
@@ -182,7 +185,7 @@ class Main extends React.Component {
   }
 
   render () {
-    let { config } = this.props
+    const { config } = this.props
 
     // the width of the navigation bar when it is folded/collapsed
     const foldedNavigationWidth = 44

browser/main/NewNoteButton/NewNoteButton.styl

@@ -71,3 +71,7 @@ body[data-theme="dark"]
 
   .control-newNoteButton-tooltip
     darkTooltip()
+
+body[data-theme="solarized-dark"]
+  .root, .root--expanded
+    background-color $ui-solarized-dark-noteList-backgroundColor

browser/main/NewNoteButton/index.js

@@ -1,12 +1,11 @@
-import React, { PropTypes } from 'react'
+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 { hashHistory } from 'react-router'
 import eventEmitter from 'browser/main/lib/eventEmitter'
-import dataApi from 'browser/main/lib/dataApi'
 
 const { remote } = require('electron')
 const { dialog } = remote
@@ -34,7 +33,7 @@ class NewNoteButton extends React.Component {
   }
 
   handleNewNoteButtonClick (e) {
-    const { config, location, dispatch } = this.props
+    const { location, dispatch } = this.props
     const { storage, folder } = this.resolveTargetFolder()
 
     modal.open(NewNoteModal, {
@@ -51,7 +50,7 @@ class NewNoteButton extends React.Component {
 
     // Find first storage
     if (storage == null) {
-      for (let kv of data.storageMap) {
+      for (const kv of data.storageMap) {
         storage = kv[1]
         break
       }

browser/main/NoteList/NoteList.styl

@@ -89,3 +89,28 @@ body[data-theme="dark"]
     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/NoteList/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './NoteList.styl'
 import moment from 'moment'
@@ -11,10 +12,10 @@ import NoteItemSimple from 'browser/components/NoteItemSimple'
 import searchFromNotes from 'browser/lib/search'
 import fs from 'fs'
 import { hashHistory } from 'react-router'
-import markdown from 'browser/lib/markdown'
+import markdown from 'browser/lib/markdownTextHelper'
 import { findNoteTitle } from 'browser/lib/findNoteTitle'
-import stripgtags from 'striptags'
 import store from 'browser/main/store'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -31,6 +32,18 @@ function sortByUpdatedAt (a, b) {
   return new Date(b.updatedAt) - new Date(a.updatedAt)
 }
 
+function findNoteByKey (notes, noteKey) {
+  return notes.find((note) => `${note.storage}-${note.key}` === noteKey)
+}
+
+function findNotesByKeys (notes, noteKeys) {
+  return notes.filter((note) => noteKeys.includes(getNoteKey(note)))
+}
+
+function getNoteKey (note) {
+  return `${note.storage}-${note.key}`
+}
+
 class NoteList extends React.Component {
   constructor (props) {
     super(props)
@@ -50,8 +63,16 @@ class NoteList extends React.Component {
     }
     this.importFromFileHandler = this.importFromFile.bind(this)
     this.jumpNoteByHash = this.jumpNoteByHashHandler.bind(this)
+    this.handleNoteListKeyUp = this.handleNoteListKeyUp.bind(this)
+    this.getNoteKeyFromTargetIndex = this.getNoteKeyFromTargetIndex.bind(this)
+    this.deleteNote = this.deleteNote.bind(this)
+    this.focusNote = this.focusNote.bind(this)
+    this.pinToTop = this.pinToTop.bind(this)
 
+    // TODO: not Selected noteKeys but SelectedNote(for reusing)
     this.state = {
+      shiftKeyDown: false,
+      selectedNoteKeys: []
     }
 
     this.contextNotes = []
@@ -89,10 +110,10 @@ class NoteList extends React.Component {
   }
 
   componentDidUpdate (prevProps) {
-    let { location } = this.props
+    const { location } = this.props
 
     if (this.notes.length > 0 && location.query.key == null) {
-      let { router } = this.context
+      const { router } = this.context
       if (!location.pathname.match(/\/searched/)) this.contextNotes = this.getContextNotes()
       router.replace({
         pathname: location.pathname,
@@ -107,16 +128,16 @@ class NoteList extends React.Component {
     if (_.isString(location.query.key) && prevProps.location.query.key === location.query.key) {
       const targetIndex = this.getTargetIndex()
       if (targetIndex > -1) {
-        let list = this.refs.list
-        let item = list.childNodes[targetIndex]
+        const list = this.refs.list
+        const item = list.childNodes[targetIndex]
 
         if (item == null) return false
 
-        let overflowBelow = item.offsetTop + item.clientHeight - list.clientHeight - list.scrollTop > 0
+        const overflowBelow = item.offsetTop + item.clientHeight - list.clientHeight - list.scrollTop > 0
         if (overflowBelow) {
           list.scrollTop = item.offsetTop + item.clientHeight - list.clientHeight
         }
-        let overflowAbove = list.scrollTop > item.offsetTop
+        const overflowAbove = list.scrollTop > item.offsetTop
         if (overflowAbove) {
           list.scrollTop = item.offsetTop
         }
@@ -124,12 +145,35 @@ class NoteList extends React.Component {
     }
   }
 
+  focusNote (selectedNoteKeys, noteKey) {
+    const { router } = this.context
+    const { location } = this.props
+
+    this.setState({
+      selectedNoteKeys
+    })
+
+    router.push({
+      pathname: location.pathname,
+      query: {
+        key: noteKey
+      }
+    })
+  }
+
+  getNoteKeyFromTargetIndex (targetIndex) {
+    const note = Object.assign({}, this.notes[targetIndex])
+    const noteKey = getNoteKey(note)
+    return noteKey
+  }
+
   selectPriorNote () {
     if (this.notes == null || this.notes.length === 0) {
       return
     }
     let { router } = this.context
     let { location } = this.props
+    let { selectedNoteKeys, shiftKeyDown } = this.state
 
     let targetIndex = this.getTargetIndex()
 
@@ -137,14 +181,18 @@ class NoteList extends React.Component {
       return
     }
     targetIndex--
-    if (targetIndex < 0) targetIndex = 0
 
-    router.push({
-      pathname: location.pathname,
-      query: {
-        key: this.notes[targetIndex].storage + '-' + this.notes[targetIndex].key
-      }
-    })
+    if (!shiftKeyDown) { selectedNoteKeys = [] }
+    const priorNoteKey = this.getNoteKeyFromTargetIndex(targetIndex)
+    if (selectedNoteKeys.includes(priorNoteKey)) {
+      selectedNoteKeys.pop()
+    } else {
+      selectedNoteKeys.push(priorNoteKey)
+    }
+
+    this.focusNote(selectedNoteKeys, priorNoteKey)
+
+    ee.emit('list:moved')
   }
 
   selectNextNote () {
@@ -153,23 +201,31 @@ class NoteList extends React.Component {
     }
     let { router } = this.context
     let { location } = this.props
+    let { selectedNoteKeys, shiftKeyDown } = this.state
 
     let targetIndex = this.getTargetIndex()
+    const isTargetLastNote = targetIndex === this.notes.length - 1
 
-    if (targetIndex === this.notes.length - 1) {
+    if (isTargetLastNote && shiftKeyDown) {
+      return
+    } else if (isTargetLastNote) {
       targetIndex = 0
     } else {
       targetIndex++
       if (targetIndex < 0) targetIndex = 0
-      else if (targetIndex > this.notes.length - 1) targetIndex === this.notes.length - 1
+      else if (targetIndex > this.notes.length - 1) targetIndex = this.notes.length - 1
     }
 
-    router.push({
-      pathname: location.pathname,
-      query: {
-        key: this.notes[targetIndex].storage + '-' + this.notes[targetIndex].key
-      }
-    })
+    if (!shiftKeyDown) { selectedNoteKeys = [] }
+    const nextNoteKey = this.getNoteKeyFromTargetIndex(targetIndex)
+    if (selectedNoteKeys.includes(nextNoteKey)) {
+      selectedNoteKeys.pop()
+    } else {
+      selectedNoteKeys.push(nextNoteKey)
+    }
+
+    this.focusNote(selectedNoteKeys, nextNoteKey)
+
     ee.emit('list:moved')
   }
 
@@ -186,17 +242,17 @@ class NoteList extends React.Component {
 
     if (targetIndex < 0) targetIndex = 0
 
-    router.push({
-      pathname: location.pathname,
-      query: {
-        key: this.notes[targetIndex].storage + '-' + this.notes[targetIndex].key
-      }
-    })
+    const selectedNoteKeys = []
+    const nextNoteKey = this.getNoteKeyFromTargetIndex(targetIndex)
+    selectedNoteKeys.push(nextNoteKey)
+
+    this.focusNote(selectedNoteKeys, nextNoteKey)
 
     ee.emit('list:moved')
   }
 
   handleNoteListKeyDown (e) {
+    const { shiftKeyDown } = this.state
     if (e.metaKey || e.ctrlKey) return true
 
     if (e.keyCode === 65 && !e.shiftKey) {
@@ -206,7 +262,7 @@ class NoteList extends React.Component {
 
     if (e.keyCode === 68) {
       e.preventDefault()
-      ee.emit('detail:delete')
+      this.deleteNote()
     }
 
     if (e.keyCode === 69) {
@@ -223,11 +279,20 @@ class NoteList extends React.Component {
       e.preventDefault()
       this.selectNextNote()
     }
+
+    if (e.shiftKey) {
+      this.setState({ shiftKeyDown: true })
+    }
+  }
+
+  handleNoteListKeyUp (e) {
+    if (!e.shiftKey) {
+      this.setState({ shiftKeyDown: false })
+    }
   }
 
   getNotes () {
-    let { data, params, location } = this.props
-    let { router } = this.context
+    const { data, params, location } = this.props
 
     if (location.pathname.match(/\/home/) || location.pathname.match(/\alltags/)) {
       const allNotes = data.noteMap.map((note) => note)
@@ -302,6 +367,22 @@ class NoteList extends React.Component {
   handleNoteClick (e, uniqueKey) {
     let { router } = this.context
     let { location } = this.props
+    let { shiftKeyDown, selectedNoteKeys } = this.state
+
+    if (shiftKeyDown && selectedNoteKeys.includes(uniqueKey)) {
+      const newSelectedNoteKeys = selectedNoteKeys.filter((noteKey) => noteKey !== uniqueKey)
+      this.setState({
+        selectedNoteKeys: newSelectedNoteKeys
+      })
+      return
+    }
+    if (!shiftKeyDown) {
+      selectedNoteKeys = []
+    }
+    selectedNoteKeys.push(uniqueKey)
+    this.setState({
+      selectedNoteKeys
+    })
 
     router.push({
       pathname: location.pathname,
@@ -312,9 +393,9 @@ class NoteList extends React.Component {
   }
 
   handleSortByChange (e) {
-    let { dispatch } = this.props
+    const { dispatch } = this.props
 
-    let config = {
+    const config = {
       sortBy: e.target.value
     }
 
@@ -326,9 +407,9 @@ class NoteList extends React.Component {
   }
 
   handleListStyleButtonClick (e, style) {
-    let { dispatch } = this.props
+    const { dispatch } = this.props
 
-    let config = {
+    const config = {
       listStyle: style
     }
 
@@ -352,16 +433,23 @@ class NoteList extends React.Component {
   }
 
   handleDragStart (e, note) {
-    const noteData = JSON.stringify(note)
+    const { selectedNoteKeys } = this.state
+    const notes = this.notes.map((note) => Object.assign({}, note))
+    const selectedNotes = findNotesByKeys(notes, selectedNoteKeys)
+    const noteData = JSON.stringify(selectedNotes)
     e.dataTransfer.setData('note', noteData)
+    this.setState({ selectedNoteKeys: [] })
   }
 
   handleNoteContextMenu (e, uniqueKey) {
     const { location } = this.props
-    const note = this.notes.find((note) => {
-      const noteKey = `${note.storage}-${note.key}`
-      return noteKey === uniqueKey
-    })
+    const { selectedNoteKeys } = this.state
+    const note = findNoteByKey(this.notes, uniqueKey)
+    const noteKey = getNoteKey(note)
+
+    if (selectedNoteKeys.length === 0 || !selectedNoteKeys.includes(noteKey)) {
+      this.handleNoteClick(e, uniqueKey)
+    }
 
     const pinLabel = note.isPinned ? 'Remove pin' : 'Pin to Top'
     const deleteLabel = 'Delete Note'
@@ -370,47 +458,104 @@ class NoteList extends React.Component {
     if (!location.pathname.match(/\/home|\/starred|\/trash/)) {
       menu.append(new MenuItem({
         label: pinLabel,
-        click: (e) => this.pinToTop(e, uniqueKey)
+        click: this.pinToTop
       }))
     }
     menu.append(new MenuItem({
       label: deleteLabel,
-      click: (e) => this.deleteNote(e, uniqueKey)
+      click: this.deleteNote
     }))
     menu.popup()
   }
 
-  pinToTop (e, uniqueKey) {
-    const { data, params } = this.props
-    const storageKey = params.storageKey
-    const folderKey = params.folderKey
+  pinToTop () {
+    const { selectedNoteKeys } = this.state
+    const { dispatch } = this.props
+    const notes = this.notes.map((note) => Object.assign({}, note))
+    const selectedNotes = findNotesByKeys(notes, selectedNoteKeys)
 
-    const currentStorage = data.storageMap.get(storageKey)
-    const currentFolder = _.find(currentStorage.folders, {key: folderKey})
-
-    this.handleNoteClick(e, uniqueKey)
-    const targetIndex = this.getTargetIndex()
-    let note = this.notes[targetIndex]
-    note.isPinned = !note.isPinned
-
-    dataApi
-      .updateNote(note.storage, note.key, note)
-      .then((note) => {
-        store.dispatch({
+    Promise.all(
+      selectedNotes.map((note) => {
+        note.isPinned = !note.isPinned
+        return dataApi
+          .updateNote(note.storage, note.key, note)
+      })
+    )
+    .then((updatedNotes) => {
+      updatedNotes.forEach((note) => {
+        dispatch({
           type: 'UPDATE_NOTE',
-          note: note
+          note
         })
       })
+    })
+    this.setState({ selectedNoteKeys: [] })
   }
 
-  deleteNote (e, uniqueKey) {
-    this.handleNoteClick(e, uniqueKey)
-    ee.emit('detail:delete')
+  deleteNote () {
+    const { dispatch } = this.props
+    const { selectedNoteKeys } = this.state
+    const notes = this.notes.map((note) => Object.assign({}, note))
+    const selectedNotes = findNotesByKeys(notes, selectedNoteKeys)
+    const firstNote = selectedNotes[0]
+
+    if (firstNote.isTrashed) {
+      const noteExp = selectedNotes.length > 1 ? 'notes' : 'note'
+      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+        type: 'warning',
+        message: 'Confirm note deletion',
+        detail: `This will permanently remove ${selectedNotes.length} ${noteExp}.`,
+        buttons: ['Confirm', 'Cancel']
+      })
+      if (dialogueButtonIndex === 1) return
+      Promise.all(
+        selectedNoteKeys.map((uniqueKey) => {
+          const storageKey = uniqueKey.split('-')[0]
+          const noteKey = uniqueKey.split('-')[1]
+          return dataApi
+            .deleteNote(storageKey, noteKey)
+        })
+      )
+      .then((data) => {
+        data.forEach((item) => {
+          dispatch({
+            type: 'DELETE_NOTE',
+            storageKey: item.storageKey,
+            noteKey: item.noteKey
+          })
+        })
+      })
+      .catch((err) => {
+        console.error('Cannot Delete note: ' + err)
+      })
+      console.log('Notes were all deleted')
+    } else {
+      Promise.all(
+        selectedNotes.map((note) => {
+          note.isTrashed = true
+
+          return dataApi
+          .updateNote(note.storage, note.key, note)
+        })
+      )
+      .then((newNotes) => {
+        newNotes.forEach((newNote) => {
+          dispatch({
+            type: 'UPDATE_NOTE',
+            note: newNote
+          })
+        })
+        AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
+        console.log('Notes went to trash')
+      })
+      .catch((err) => {
+        console.error('Notes could not go to trash: ' + err)
+      })
+    }
+    this.setState({ selectedNoteKeys: [] })
   }
 
   importFromFile () {
-    const { dispatch, location } = this.props
-
     const options = {
       filters: [
         { name: 'Documents', extensions: ['md', 'txt'] }
@@ -439,22 +584,29 @@ class NoteList extends React.Component {
     filepaths.forEach((filepath) => {
       fs.readFile(filepath, (err, data) => {
         if (err) throw Error('File reading error: ', err)
-        const content = data.toString()
-        const newNote = {
-          content: content,
-          folder: folder.key,
-          title: markdown.strip(findNoteTitle(content)),
-          type: 'MARKDOWN_NOTE'
-        }
-        dataApi.createNote(storage.key, newNote)
-        .then((note) => {
-          dispatch({
-            type: 'UPDATE_NOTE',
-            note: note
-          })
-          hashHistory.push({
-            pathname: location.pathname,
-            query: {key: `${note.storage}-${note.key}`}
+
+        fs.stat(filepath, (err, {mtime, birthtime}) => {
+          if (err) throw Error('File stat reading error: ', err)
+
+          const content = data.toString()
+          const newNote = {
+            content: content,
+            folder: folder.key,
+            title: markdown.strip(findNoteTitle(content)),
+            type: 'MARKDOWN_NOTE',
+            createdAt: birthtime,
+            updatedAt: mtime
+          }
+          dataApi.createNote(storage.key, newNote)
+          .then((note) => {
+            dispatch({
+              type: 'UPDATE_NOTE',
+              note: note
+            })
+            hashHistory.push({
+              pathname: location.pathname,
+              query: {key: getNoteKey(note)}
+            })
           })
         })
       })
@@ -464,7 +616,7 @@ class NoteList extends React.Component {
   getTargetIndex () {
     const { location } = this.props
     const targetIndex = _.findIndex(this.notes, (note) => {
-      return `${note.storage}-${note.key}` === location.query.key
+      return getNoteKey(note) === location.query.key
     })
     return targetIndex
   }
@@ -475,7 +627,7 @@ class NoteList extends React.Component {
 
     // Find first storage
     if (storage == null) {
-      for (let kv of data.storageMap) {
+      for (const kv of data.storageMap) {
         storage = kv[1]
         break
       }
@@ -501,6 +653,7 @@ class NoteList extends React.Component {
 
   render () {
     let { location, notes, config, dispatch } = this.props
+    let { selectedNoteKeys } = this.state
     let sortFunc = config.sortBy === 'CREATED_AT'
       ? sortByCreatedAt
       : config.sortBy === 'ALPHABETICAL'
@@ -533,14 +686,15 @@ class NoteList extends React.Component {
       }
     })
 
-    let noteList = notes
+    const noteList = notes
       .map(note => {
         if (note == null) {
           return null
         }
 
         const isDefault = config.listStyle === 'DEFAULT'
-        const isActive = location.query.key === note.storage + '-' + note.key
+        const uniqueKey = getNoteKey(note)
+        const isActive = selectedNoteKeys.includes(uniqueKey)
         const dateDisplay = moment(
           config.sortBy === 'CREATED_AT'
             ? note.createdAt : note.updatedAt
@@ -553,7 +707,7 @@ class NoteList extends React.Component {
               isActive={isActive}
               note={note}
               dateDisplay={dateDisplay}
-              key={key}
+              key={uniqueKey}
               handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
               handleNoteClick={this.handleNoteClick.bind(this)}
               handleDragStart={this.handleDragStart.bind(this)}
@@ -566,10 +720,11 @@ class NoteList extends React.Component {
           <NoteItemSimple
             isActive={isActive}
             note={note}
-            key={key}
+            key={uniqueKey}
             handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
             handleNoteClick={this.handleNoteClick.bind(this)}
             handleDragStart={this.handleDragStart.bind(this)}
+            pathname={location.pathname}
           />
         )
       })
@@ -615,6 +770,7 @@ class NoteList extends React.Component {
           ref='list'
           tabIndex='-1'
           onKeyDown={(e) => this.handleNoteListKeyDown(e)}
+          onKeyUp={this.handleNoteListKeyUp}
         >
           {noteList}
         </div>

browser/main/SideNav/SideNav.styl

@@ -102,7 +102,7 @@
     font-size 13px
   .top-menu-preference
     position absolute
-    left 11px
+    left 7px
 
 body[data-theme="white"]
   .root, .root--folded
@@ -138,7 +138,7 @@ body[data-theme="white"]
 
 body[data-theme="dark"]
   .root, .root--folded
-    border-color $ui-dark-borderColor
+    border-right 1px solid $ui-dark-borderColor
     background-color $ui-dark-backgroundColor
     color $ui-dark-text-color
 
@@ -163,3 +163,8 @@ body[data-theme="dark"]
   .tag-title
     p
       color alpha($ui-dark-text-color, 60%)
+
+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

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+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'
@@ -8,6 +9,7 @@ import RenameFolderModal from 'browser/main/modals/RenameFolderModal'
 import dataApi from 'browser/main/lib/dataApi'
 import StorageItemChild from 'browser/components/StorageItem'
 import eventEmitter from 'browser/main/lib/eventEmitter'
+import _ from 'lodash'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -22,7 +24,7 @@ class StorageItem extends React.Component {
   }
 
   handleHeaderContextMenu (e) {
-    let menu = new Menu()
+    const menu = new Menu()
     menu.append(new MenuItem({
       label: 'Add Folder',
       click: (e) => this.handleAddFolderButtonClick(e)
@@ -38,7 +40,7 @@ class StorageItem extends React.Component {
   }
 
   handleUnlinkStorageClick (e) {
-    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+    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.)',
@@ -46,7 +48,7 @@ class StorageItem extends React.Component {
     })
 
     if (index === 0) {
-      let { storage, dispatch } = this.props
+      const { storage, dispatch } = this.props
       dataApi.removeStorage(storage.key)
         .then(() => {
           dispatch({
@@ -67,7 +69,7 @@ class StorageItem extends React.Component {
   }
 
   handleAddFolderButtonClick (e) {
-    let { storage } = this.props
+    const { storage } = this.props
 
     modal.open(CreateFolderModal, {
       storage
@@ -75,19 +77,19 @@ class StorageItem extends React.Component {
   }
 
   handleHeaderInfoClick (e) {
-    let { storage } = this.props
+    const { storage } = this.props
     hashHistory.push('/storages/' + storage.key)
   }
 
   handleFolderButtonClick (folderKey) {
     return (e) => {
-      let { storage } = this.props
+      const { storage } = this.props
       hashHistory.push('/storages/' + storage.key + '/folders/' + folderKey)
     }
   }
 
   handleFolderButtonContextMenu (e, folder) {
-    let menu = new Menu()
+    const menu = new Menu()
     menu.append(new MenuItem({
       label: 'Rename Folder',
       click: (e) => this.handleRenameFolderClick(e, folder)
@@ -103,7 +105,7 @@ class StorageItem extends React.Component {
   }
 
   handleRenameFolderClick (e, folder) {
-    let { storage } = this.props
+    const { storage } = this.props
     modal.open(RenameFolderModal, {
       storage,
       folder
@@ -111,7 +113,7 @@ class StorageItem extends React.Component {
   }
 
   handleFolderDeleteClick (e, folder) {
-    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+    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.',
@@ -119,7 +121,7 @@ class StorageItem extends React.Component {
     })
 
     if (index === 0) {
-      let { storage, dispatch } = this.props
+      const { storage, dispatch } = this.props
       dataApi
         .deleteFolder(storage.key, folder.key)
         .then((data) => {
@@ -142,48 +144,57 @@ class StorageItem extends React.Component {
     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
+    const newNoteData = noteData.map((note) => Object.assign({}, note, {storage: storage, folder: folder.key}))
+
+    Promise.all(
+      newNoteData.map((note) => dataApi.createNote(storage.key, note))
+    )
+    .then((createdNoteData) => {
+      createdNoteData.forEach((note) => {
+        dispatch({
+          type: 'UPDATE_NOTE',
+          note: note
+        })
+      })
+    })
+    .catch((err) => {
+      console.error(`error on create notes: ${err}`)
+    })
+    .then(() => {
+      return Promise.all(
+        noteData.map((note) => dataApi.deleteNote(note.storage, note.key))
+      )
+    })
+    .then((deletedNoteData) => {
+      deletedNoteData.forEach((note) => {
+        dispatch({
+          type: 'DELETE_NOTE',
+          storageKey: note.storageKey,
+          noteKey: note.noteKey
+        })
+      })
+    })
+    .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'))
-    const newNoteData = Object.assign({}, noteData, {storage: storage, folder: folder.key})
-    if (folder.key === noteData.folder) return
-    dataApi
-     .createNote(storage.key, newNoteData)
-     .then((note) => {
-       dataApi
-        .deleteNote(noteData.storage, noteData.key)
-        .then((data) => {
-          let dispatchHandler = () => {
-            dispatch({
-              type: 'DELETE_NOTE',
-              storageKey: data.storageKey,
-              noteKey: data.noteKey
-            })
-          }
-          eventEmitter.once('list:moved', dispatchHandler)
-          eventEmitter.emit('list:next')
-        })
-         .catch((err) => {
-           console.error(err)
-         })
-       dispatch({
-         type: 'UPDATE_NOTE',
-         note: note
-       })
-       hashHistory.push({
-         pathname: location.pathname,
-         query: {key: `${note.storage}-${note.key}`}
-       })
-     })
+    this.dropNote(storage, folder, dispatch, location, noteData)
   }
 
   render () {
-    let { storage, location, isFolded, data, dispatch } = this.props
-    let { folderNoteMap, trashedSet } = data
-    let folderList = storage.folders.map((folder) => {
-      let isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
-      let noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
+    const { storage, location, isFolded, data, dispatch } = this.props
+    const { folderNoteMap, trashedSet } = data
+    const folderList = storage.folders.map((folder) => {
+      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) {
@@ -211,7 +222,7 @@ class StorageItem extends React.Component {
       )
     })
 
-    let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '$'))
+    const isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '$'))
 
     return (
       <div styleName={isFolded ? 'root--folded' : 'root'}
@@ -227,8 +238,8 @@ class StorageItem extends React.Component {
             onMouseDown={(e) => this.handleToggleButtonClick(e)}
           >
             <img src={this.state.isOpen
-                ? '../resources/icon/icon-down.svg'
-                : '../resources/icon/icon-right.svg'
+              ? '../resources/icon/icon-down.svg'
+              : '../resources/icon/icon-right.svg'
               }
             />
           </button>
@@ -245,7 +256,7 @@ class StorageItem extends React.Component {
             onClick={(e) => this.handleHeaderInfoClick(e)}
           >
             <span styleName='header-info-name'>
-              {isFolded ? storage.name.substring(0, 1) : storage.name}
+              {isFolded ? _.truncate(storage.name, {length: 1, omission: ''}) : storage.name}
             </span>
             {isFolded &&
               <span styleName='header-info--folded-tooltip'>

browser/main/SideNav/StorageItem.styl

@@ -80,6 +80,7 @@
   @extend .root
   .header
     width 100%
+    padding-left 5px
   .header-info
     overflow ellipsis
     padding 0 0 0 18px
@@ -89,6 +90,7 @@
     display none
   .header-toggleButton
     width 15px
+    padding-left 9px
   .header-info--folded-tooltip
     tooltip()
     position fixed
@@ -178,3 +180,7 @@ body[data-theme="dark"]
     &:active, &:active:hover
       color $ui-dark-text-color
       background-color $ui-dark-button--active-backgroundColor
+      
+
+
+

browser/main/SideNav/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SideNav.styl'
 import { openModal } from 'browser/main/lib/modal'
@@ -27,17 +28,17 @@ class SideNav extends React.Component {
   }
 
   handleHomeButtonClick (e) {
-    let { router } = this.context
+    const { router } = this.context
     router.push('/home')
   }
 
   handleStarredButtonClick (e) {
-    let { router } = this.context
+    const { router } = this.context
     router.push('/starred')
   }
 
   handleToggleButtonClick (e) {
-    let { dispatch, config } = this.props
+    const { dispatch, config } = this.props
 
     ConfigManager.set({isSideNavFolded: !config.isSideNavFolded})
     dispatch({
@@ -47,7 +48,7 @@ class SideNav extends React.Component {
   }
 
   handleTrashedButtonClick (e) {
-    let { router } = this.context
+    const { router } = this.context
     router.push('/trashed')
   }
 
@@ -62,7 +63,7 @@ class SideNav extends React.Component {
   }
 
   SideNavComponent (isFolded, storageList) {
-    let { location, data } = this.props
+    const { location, data } = this.props
 
     const isHomeActive = !!location.pathname.match(/^\/home$/)
     const isStarredActive = !!location.pathname.match(/^\/starred$/)
@@ -109,7 +110,7 @@ class SideNav extends React.Component {
 
   tagListComponent () {
     const { data, location } = this.props
-    let tagList = data.tagNoteMap.map((tag, key) => {
+    const tagList = data.tagNoteMap.map((tag, key) => {
       return key
     })
     return (
@@ -136,11 +137,11 @@ class SideNav extends React.Component {
   }
 
   render () {
-    let { data, location, config, dispatch } = this.props
+    const { data, location, config, dispatch } = this.props
 
-    let isFolded = config.isSideNavFolded
+    const isFolded = config.isSideNavFolded
 
-    let storageList = data.storageMap.map((storage, key) => {
+    const storageList = data.storageMap.map((storage, key) => {
       return <StorageItem
         key={storage.key}
         storage={storage}
@@ -150,7 +151,7 @@ class SideNav extends React.Component {
         dispatch={dispatch}
       />
     })
-    let style = {}
+    const style = {}
     if (!isFolded) style.width = this.props.width
     const isTagActive = location.pathname.match(/tag/)
     return (

browser/main/StatusBar/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
@@ -11,7 +12,7 @@ const zoomOptions = [0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2
 
 class StatusBar extends React.Component {
   updateApp () {
-    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+    const index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
       message: 'Update Boostnote',
       detail: 'New Boostnote is ready to be installed.',
@@ -24,7 +25,7 @@ class StatusBar extends React.Component {
   }
 
   handleZoomButtonClick (e) {
-    let menu = new Menu()
+    const menu = new Menu()
 
     zoomOptions.forEach((zoom) => {
       menu.append(new MenuItem({
@@ -37,7 +38,7 @@ class StatusBar extends React.Component {
   }
 
   handleZoomMenuItemClick (zoomFactor) {
-    let { dispatch } = this.props
+    const { dispatch } = this.props
     ZoomManager.setZoom(zoomFactor)
     dispatch({
       type: 'SET_ZOOM',
@@ -46,7 +47,7 @@ class StatusBar extends React.Component {
   }
 
   render () {
-    let { config, status } = this.context
+    const { config, status } = this.context
 
     return (
       <div className='StatusBar'

browser/main/TopBar/TopBar.styl

@@ -185,3 +185,26 @@ body[data-theme="dark"]
 
   .control-newPostButton-tooltip
     darkTooltip()
+
+
+body[data-theme="solarized-dark"]
+  .root, .root--expanded
+    background-color $ui-solarized-dark-noteList-backgroundColor
+
+  .control
+    border-color $ui-solarized-dark-borderColor
+  .control-search
+    background-color $ui-solarized-dark-noteList-backgroundColor
+
+  .control-search-icon
+    absolute top bottom left
+    line-height 32px
+    width 35px
+    color $ui-solarized-dark-inactive-text-color
+    background-color $ui-solarized-dark-noteList-backgroundColor
+
+  .control-search-input
+    background-color $ui-solarized-dark-noteList-backgroundColor
+    input
+      background-color $ui-solarized-dark-noteList-backgroundColor
+      color $ui-solarized-dark-text-color

browser/main/TopBar/index.js

@@ -1,16 +1,11 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TopBar.styl'
 import _ from 'lodash'
-import NewNoteModal from 'browser/main/modals/NewNoteModal'
 import ee from 'browser/main/lib/eventEmitter'
 import NewNoteButton from 'browser/main/NewNoteButton'
 
-const { remote } = require('electron')
-const { dialog } = remote
-
-const OSX = window.process.platform === 'darwin'
-
 class TopBar extends React.Component {
   constructor (props) {
     super(props)
@@ -121,7 +116,7 @@ class TopBar extends React.Component {
   }
 
   render () {
-    let { config, style, data, location } = this.props
+    const { config, style, location } = this.props
     return (
       <div className='TopBar'
         styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}

browser/main/global.styl

@@ -1,4 +1,5 @@
 global-reset()
+@import '../styles/vars.styl'
 
 DEFAULT_FONTS = 'OpenSans', helvetica, arial, sans-serif
 
@@ -84,10 +85,14 @@ modalBackColor = white
     absolute top left bottom right
     background-color modalBackColor
     z-index modalZIndex + 1
+    
+
 body[data-theme="dark"]
   .ModalBase
     .modalBack
       background-color $ui-dark-backgroundColor
+  .sortableItemHelper
+    color: $ui-dark-text-color
 
 .CodeMirror
   font-family inherit !important
@@ -107,6 +112,11 @@ body[data-theme="dark"]
 .sortableItemHelper
   z-index modalZIndex + 5
 
-body[data-theme="dark"]
+body[data-theme="solarized-dark"]
+  .ModalBase
+    .modalBack
+      background-color $ui-solarized-dark-backgroundColor
   .sortableItemHelper
-    color: $ui-dark-text-color
+    color: $ui-solarized-dark-text-color
+
+

browser/main/index.js

@@ -36,7 +36,7 @@ document.addEventListener('click', function (e) {
   if (infoPanel) infoPanel.style.display = 'none'
 })
 
-let el = document.getElementById('content')
+const el = document.getElementById('content')
 const history = syncHistoryWithStore(hashHistory, store)
 
 function notify (...args) {
@@ -44,7 +44,7 @@ function notify (...args) {
 }
 
 function updateApp () {
-  let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+  const index = dialog.showMessageBox(remote.getCurrentWindow(), {
     type: 'warning',
     message: 'Update Boostnote',
     detail: 'New Boostnote is ready to be installed.',
@@ -81,7 +81,7 @@ ReactDOM.render((
     </Router>
   </Provider>
 ), el, function () {
-  let loadingCover = document.getElementById('loadingCover')
+  const loadingCover = document.getElementById('loadingCover')
   loadingCover.parentNode.removeChild(loadingCover)
 
   ipcRenderer.on('update-ready', function () {

browser/main/lib/AwsMobileAnalyticsConfig.js

@@ -4,16 +4,17 @@ const ConfigManager = require('browser/main/lib/ConfigManager')
 
 const remote = require('electron').remote
 const os = require('os')
+let mobileAnalyticsClient
 
 AWS.config.region = 'us-east-1'
-if (process.env.NODE_ENV === 'production' && ConfigManager.default.get().amaEnabled) {
+if (!getSendEventCond()) {
   AWS.config.credentials = new AWS.CognitoIdentityCredentials({
     IdentityPoolId: 'us-east-1:xxxxxxxxxxxxxxxxxxxxxxxxx'
   })
 
   const validPlatformName = convertPlatformName(os.platform())
 
-  const mobileAnalyticsClient = new AMA.Manager({
+  mobileAnalyticsClient = new AMA.Manager({
     appId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
     appTitle: 'xxxxxxxxxx',
     appVersionName: remote.app.getVersion().toString(),
@@ -33,8 +34,15 @@ function convertPlatformName (platformName) {
   }
 }
 
+function getSendEventCond () {
+  const isDev = process.env.NODE_ENV !== 'production'
+  const isDisable = !ConfigManager.default.get().amaEnabled
+  const isOffline = !window.navigator.onLine
+  return isDev || isDisable || isOffline
+}
+
 function initAwsMobileAnalytics () {
-  if (process.env.NODE_ENV !== 'production' || !ConfigManager.default.get().amaEnabled) return
+  if (getSendEventCond()) return
   AWS.config.credentials.get((err) => {
     if (!err) {
       console.log('Cognito Identity ID: ' + AWS.config.credentials.identityId)
@@ -45,7 +53,7 @@ function initAwsMobileAnalytics () {
 }
 
 function recordDynamicCustomEvent (type, options = {}) {
-  if (process.env.NODE_ENV !== 'production' || !ConfigManager.default.get().amaEnabled) return
+  if (getSendEventCond()) return
   try {
     mobileAnalyticsClient.recordEvent(type, options)
   } catch (analyticsError) {
@@ -56,7 +64,7 @@ function recordDynamicCustomEvent (type, options = {}) {
 }
 
 function recordStaticCustomEvent () {
-  if (process.env.NODE_ENV !== 'production' || !ConfigManager.default.get().amaEnabled) return
+  if (getSendEventCond()) return
   try {
     mobileAnalyticsClient.recordEvent('UI_COLOR_THEME', {
       uiColorTheme: ConfigManager.default.get().ui.theme

browser/main/lib/Commander.js

@@ -13,10 +13,10 @@ function release (el) {
 
 function fire (command) {
   console.info('COMMAND >>', command)
-  let splitted = command.split(':')
-  let target = splitted[0]
-  let targetCommand = splitted[1]
-  let targetCallees = callees
+  const splitted = command.split(':')
+  const target = splitted[0]
+  const targetCommand = splitted[1]
+  const targetCallees = callees
     .filter((callee) => callee.name === target)
 
   targetCallees.forEach((callee) => {

browser/main/lib/ConfigManager.js

@@ -6,8 +6,6 @@ const win = global.process.platform === 'win32'
 const electron = require('electron')
 const { ipcRenderer } = electron
 const consts = require('browser/lib/consts')
-const path = require('path')
-const fs = require('fs')
 
 let isInitialized = false
 
@@ -36,13 +34,19 @@ export const DEFAULT_CONFIG = {
     fontFamily: win ? 'Segoe UI' : 'Monaco, Consolas',
     indentType: 'space',
     indentSize: '2',
-    switchPreview: 'BLUR' // Available value: RIGHTCLICK, BLUR
+    switchPreview: 'BLUR', // Available value: RIGHTCLICK, BLUR
+    scrollPastEnd: false,
+    type: 'SPLIT'
   },
   preview: {
     fontSize: '14',
     fontFamily: win ? 'Segoe UI' : 'Lato',
     codeBlockTheme: 'dracula',
-    lineNumber: true
+    lineNumber: true,
+    latexInlineOpen: '$',
+    latexInlineClose: '$',
+    latexBlockOpen: '$$',
+    latexBlockClose: '$$'
   }
 }
 
@@ -103,8 +107,8 @@ function get () {
 }
 
 function set (updates) {
-  let currentConfig = get()
-  let newConfig = Object.assign({}, DEFAULT_CONFIG, currentConfig, updates)
+  const currentConfig = get()
+  const newConfig = Object.assign({}, DEFAULT_CONFIG, currentConfig, updates)
   if (!validate(newConfig)) throw new Error('INVALID CONFIG')
   _save(newConfig)
 
@@ -112,6 +116,8 @@ function set (updates) {
     document.body.setAttribute('data-theme', 'dark')
   } else if (newConfig.ui.theme === 'white') {
     document.body.setAttribute('data-theme', 'white')
+  } else if (newConfig.ui.theme === 'solarized-dark') {
+    document.body.setAttribute('data-theme', 'solarized-dark')
   } else {
     document.body.setAttribute('data-theme', 'default')
   }
@@ -123,7 +129,7 @@ function set (updates) {
     editorTheme.setAttribute('rel', 'stylesheet')
     document.head.appendChild(editorTheme)
   }
-  let newTheme = consts.THEMES.some((theme) => theme === newConfig.editor.theme)
+  const newTheme = consts.THEMES.some((theme) => theme === newConfig.editor.theme)
     ? newConfig.editor.theme
     : 'default'
 
@@ -141,7 +147,7 @@ function set (updates) {
 }
 
 function assignConfigValues (originalConfig, rcConfig) {
-  let config = Object.assign({}, DEFAULT_CONFIG, originalConfig, rcConfig)
+  const config = Object.assign({}, DEFAULT_CONFIG, originalConfig, rcConfig)
   config.hotkey = Object.assign({}, DEFAULT_CONFIG.hotkey, originalConfig.hotkey, rcConfig.hotkey)
   config.ui = Object.assign({}, DEFAULT_CONFIG.ui, originalConfig.ui, rcConfig.ui)
   config.editor = Object.assign({}, DEFAULT_CONFIG.editor, originalConfig.editor, rcConfig.editor)

browser/main/lib/ZoomManager.js

@@ -19,7 +19,7 @@ function setZoom (zoomFactor, noSave = false) {
 }
 
 function getZoom () {
-  let config = ConfigManager.get()
+  const config = ConfigManager.get()
 
   return config.zoom
 }

browser/main/lib/dataApi/copyImage.js

@@ -1,7 +1,5 @@
 const fs = require('fs')
 const path = require('path')
-const _ = require('lodash')
-const sander = require('sander')
 const { findStorage } = require('browser/lib/findStorage')
 
 /**

browser/main/lib/dataApi/createFolder.js

@@ -23,7 +23,6 @@ const { findStorage } = require('browser/lib/findStorage')
  * ```
  */
 function createFolder (storageKey, input) {
-  let rawStorages
   let targetStorage
   try {
     if (input == null) throw new Error('No input found.')
@@ -41,7 +40,7 @@ function createFolder (storageKey, input) {
       while (storage.folders.some((folder) => folder.key === key)) {
         key = keygen()
       }
-      let newFolder = {
+      const newFolder = {
         key,
         color: input.color,
         name: input.name

browser/main/lib/dataApi/createNote.js

@@ -66,12 +66,16 @@ function createNote (storageKey, input) {
           }
         }
       }
-      let noteData = Object.assign({}, input, {
-        key,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-        storage: storageKey
-      })
+      const noteData = Object.assign({},
+        {
+          createdAt: new Date(),
+          updatedAt: new Date()
+        },
+        input, // input may contain more accurate dates
+        {
+          key,
+          storage: storageKey
+        })
 
       CSON.writeFileSync(path.join(storage.path, 'notes', key + '.cson'), _.omit(noteData, ['key', 'storage']))
 

browser/main/lib/dataApi/deleteFolder.js

@@ -19,7 +19,6 @@ const { findStorage } = require('browser/lib/findStorage')
  * ```
  */
 function deleteFolder (storageKey, folderKey) {
-  let rawStorages
   let targetStorage
   try {
     targetStorage = findStorage(storageKey)
@@ -38,17 +37,17 @@ function deleteFolder (storageKey, folderKey) {
         })
     })
     .then(function deleteFolderAndNotes (data) {
-      let { storage, notes } = data
+      const { storage, notes } = data
       storage.folders = storage.folders
         .filter(function excludeTargetFolder (folder) {
           return folder.key !== folderKey
         })
 
-      let targetNotes = notes.filter(function filterTargetNotes (note) {
+      const targetNotes = notes.filter(function filterTargetNotes (note) {
         return note.folder === folderKey
       })
 
-      let deleteAllNotes = targetNotes
+      const deleteAllNotes = targetNotes
         .map(function deleteNote (note) {
           const notePath = path.join(storage.path, 'notes', note.key + '.cson')
           return sander.unlink(notePath)

browser/main/lib/dataApi/deleteNote.js

@@ -1,5 +1,4 @@
 const resolveStorageData = require('./resolveStorageData')
-const _ = require('lodash')
 const path = require('path')
 const sander = require('sander')
 const { findStorage } = require('browser/lib/findStorage')
@@ -14,7 +13,7 @@ function deleteNote (storageKey, noteKey) {
 
   return resolveStorageData(targetStorage)
     .then(function deleteNoteFile (storage) {
-      let notePath = path.join(storage.path, 'notes', noteKey + '.cson')
+      const notePath = path.join(storage.path, 'notes', noteKey + '.cson')
 
       try {
         sander.unlinkSync(notePath)

browser/main/lib/dataApi/init.js

@@ -20,7 +20,7 @@ const CSON = require('@rokt33r/season')
  * 3. empty directory
  */
 function init () {
-  let fetchStorages = function () {
+  const fetchStorages = function () {
     let rawStorages
     try {
       rawStorages = JSON.parse(window.localStorage.getItem('storages'))
@@ -34,8 +34,8 @@ function init () {
       .map(resolveStorageData))
   }
 
-  let fetchNotes = function (storages) {
-    let findNotesFromEachStorage = storages
+  const fetchNotes = function (storages) {
+    const findNotesFromEachStorage = storages
       .map((storage) => {
         return resolveStorageNotes(storage)
           .then((notes) => {

browser/main/lib/dataApi/migrateFromV5Storage.js

@@ -9,7 +9,7 @@ const sander = require('sander')
 function migrateFromV5Storage (storageKey, data) {
   let targetStorage
   try {
-    let cachedStorageList = JSON.parse(localStorage.getItem('storages'))
+    const cachedStorageList = JSON.parse(localStorage.getItem('storages'))
     if (!_.isArray(cachedStorageList)) throw new Error('Target storage doesn\'t exist.')
 
     targetStorage = _.find(cachedStorageList, {key: storageKey})
@@ -24,15 +24,15 @@ function migrateFromV5Storage (storageKey, data) {
 }
 
 function importAll (storage, data) {
-  let oldArticles = data.articles
-  let notes = []
+  const oldArticles = data.articles
+  const notes = []
   data.folders
     .forEach(function (oldFolder) {
       let folderKey = keygen()
       while (storage.folders.some((folder) => folder.key === folderKey)) {
         folderKey = keygen()
       }
-      let newFolder = {
+      const newFolder = {
         key: folderKey,
         name: oldFolder.name,
         color: consts.FOLDER_COLORS[Math.floor(Math.random() * 7) % 7]
@@ -40,7 +40,7 @@ function importAll (storage, data) {
 
       storage.folders.push(newFolder)
 
-      let articles = oldArticles.filter((article) => article.FolderKey === oldFolder.key)
+      const articles = oldArticles.filter((article) => article.FolderKey === oldFolder.key)
       articles.forEach((article) => {
         let noteKey = keygen()
         let isUnique = false
@@ -59,7 +59,7 @@ function importAll (storage, data) {
         }
 
         if (article.mode === 'markdown') {
-          let newNote = {
+          const newNote = {
             tags: article.tags,
             createdAt: article.createdAt,
             updatedAt: article.updatedAt,
@@ -73,7 +73,7 @@ function importAll (storage, data) {
           }
           notes.push(newNote)
         } else {
-          let newNote = {
+          const newNote = {
             tags: article.tags,
             createdAt: article.createdAt,
             updatedAt: article.updatedAt,

browser/main/lib/dataApi/moveNote.js

@@ -20,7 +20,7 @@ function moveNote (storageKey, noteKey, newStorageKey, newFolderKey) {
     .then(function saveNote (_oldStorage) {
       oldStorage = _oldStorage
       let noteData
-      let notePath = path.join(oldStorage.path, 'notes', noteKey + '.cson')
+      const notePath = path.join(oldStorage.path, 'notes', noteKey + '.cson')
       try {
         noteData = CSON.readFileSync(notePath)
       } catch (err) {

browser/main/lib/dataApi/renameStorage.js

@@ -1,6 +1,5 @@
 const _ = require('lodash')
 const resolveStorageData = require('./resolveStorageData')
-const { findStorage } = require('browser/lib/findStorage')
 
 /**
  * @param {String} key
@@ -19,7 +18,7 @@ function renameStorage (key, name) {
     console.error(err)
     return Promise.reject(err)
   }
-  let targetStorage = _.find(cachedStorageList, {key: key})
+  const targetStorage = _.find(cachedStorageList, {key: key})
   if (targetStorage == null) return Promise.reject('Storage')
 
   targetStorage.name = name

browser/main/lib/dataApi/reorderFolder.js

@@ -18,7 +18,6 @@ const { findStorage } = require('browser/lib/findStorage')
  * ```
  */
 function reorderFolder (storageKey, oldIndex, newIndex) {
-  let rawStorages
   let targetStorage
   try {
     if (!_.isNumber(oldIndex)) throw new Error('oldIndex must be a number.')

browser/main/lib/dataApi/resolveStorageData.js

@@ -4,7 +4,7 @@ const CSON = require('@rokt33r/season')
 const migrateFromV6Storage = require('./migrateFromV6Storage')
 
 function resolveStorageData (storageCache) {
-  let storage = {
+  const storage = {
     key: storageCache.key,
     name: storageCache.name,
     type: storageCache.type,
@@ -13,7 +13,7 @@ function resolveStorageData (storageCache) {
 
   const boostnoteJSONPath = path.join(storageCache.path, 'boostnote.json')
   try {
-    let jsonData = CSON.readFileSync(boostnoteJSONPath)
+    const jsonData = CSON.readFileSync(boostnoteJSONPath)
     if (!_.isArray(jsonData.folders)) throw new Error('folders should be an array.')
     storage.folders = jsonData.folders
     storage.version = jsonData.version
@@ -28,7 +28,7 @@ function resolveStorageData (storageCache) {
     storage.version = '1.0'
   }
 
-  let version = parseInt(storage.version, 10)
+  const version = parseInt(storage.version, 10)
   if (version >= 1) {
     if (version > 1) {
       console.log('The repository version is newer than one of current app.')

browser/main/lib/dataApi/resolveStorageNotes.js

@@ -16,13 +16,13 @@ function resolveStorageNotes (storage) {
     }
     notePathList = []
   }
-  let notes = notePathList
+  const notes = notePathList
     .filter(function filterOnlyCSONFile (notePath) {
       return /\.cson$/.test(notePath)
     })
     .map(function parseCSONFile (notePath) {
       try {
-        let data = CSON.readFileSync(path.join(notesDirPath, notePath))
+        const data = CSON.readFileSync(path.join(notesDirPath, notePath))
         data.key = path.basename(notePath, '.cson')
         data.storage = storage.key
         return data

browser/main/lib/dataApi/updateFolder.js

@@ -23,7 +23,6 @@ const { findStorage } = require('browser/lib/findStorage')
  * ```
  */
 function updateFolder (storageKey, folderKey, input) {
-  let rawStorages
   let targetStorage
   try {
     if (input == null) throw new Error('No input found.')
@@ -37,7 +36,7 @@ function updateFolder (storageKey, folderKey, input) {
 
   return resolveStorageData(targetStorage)
     .then(function updateFolder (storage) {
-      let targetFolder = _.find(storage.folders, {key: folderKey})
+      const targetFolder = _.find(storage.folders, {key: folderKey})
       if (targetFolder == null) throw new Error('Target folder doesn\'t exist.')
       targetFolder.name = input.name
       targetFolder.color = input.color

browser/main/lib/dataApi/updateNote.js

@@ -5,7 +5,7 @@ const CSON = require('@rokt33r/season')
 const { findStorage } = require('browser/lib/findStorage')
 
 function validateInput (input) {
-  let validatedInput = {}
+  const validatedInput = {}
 
   if (input.tags != null) {
     if (!_.isArray(input.tags)) validatedInput.tags = []
@@ -81,7 +81,7 @@ function updateNote (storageKey, noteKey, input) {
   return resolveStorageData(targetStorage)
     .then(function saveNote (storage) {
       let noteData
-      let notePath = path.join(storage.path, 'notes', noteKey + '.cson')
+      const notePath = path.join(storage.path, 'notes', noteKey + '.cson')
       try {
         noteData = CSON.readFileSync(notePath)
       } catch (err) {

browser/main/lib/modal.js

@@ -16,7 +16,7 @@ class ModalBase extends React.Component {
   close () {
     if (modalBase != null) modalBase.setState({component: null, componentProps: null, isHidden: true})
     // Toggle overflow style on NoteList
-    let list = document.querySelector('.NoteList__list___browser-main-NoteList-')
+    const list = document.querySelector('.NoteList__list___browser-main-NoteList-')
     list.style.overflow = 'auto'
   }
 
@@ -34,14 +34,14 @@ class ModalBase extends React.Component {
   }
 }
 
-let el = document.createElement('div')
+const el = document.createElement('div')
 document.body.appendChild(el)
-let modalBase = ReactDOM.render(<ModalBase />, el)
+const modalBase = ReactDOM.render(<ModalBase />, el)
 
 export function openModal (component, props) {
   if (modalBase == null) { return }
   // Hide scrollbar by removing overflow when modal opens
-  let list = document.querySelector('.NoteList__list___browser-main-NoteList-')
+  const list = document.querySelector('.NoteList__list___browser-main-NoteList-')
   list.style.overflow = 'hidden'
   document.body.setAttribute('data-modal', 'open')
   modalBase.setState({component: component, componentProps: props, isHidden: false})

browser/main/modals/CreateFolderModal.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './CreateFolderModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
@@ -51,8 +52,8 @@ class CreateFolderModal extends React.Component {
   confirm () {
     AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_FOLDER')
     if (this.state.name.trim().length > 0) {
-      let { storage } = this.props
-      let input = {
+      const { storage } = this.props
+      const input = {
         name: this.state.name.trim(),
         color: consts.FOLDER_COLORS[Math.floor(Math.random() * 7) % 7]
       }

browser/main/modals/InitModal.js

@@ -5,7 +5,6 @@ import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import { hashHistory } from 'react-router'
 import _ from 'lodash'
-import ModalEscButton from 'browser/components/ModalEscButton'
 
 const CSON = require('@rokt33r/season')
 const path = require('path')
@@ -13,9 +12,9 @@ const electron = require('electron')
 const { remote } = electron
 
 function browseFolder () {
-  let dialog = remote.dialog
+  const dialog = remote.dialog
 
-  let defaultPath = remote.app.getPath('home')
+  const defaultPath = remote.app.getPath('home')
   return new Promise((resolve, reject) => {
     dialog.showOpenDialog({
       title: 'Select Directory',
@@ -55,7 +54,7 @@ class InitModal extends React.Component {
     } catch (err) {
       console.error(err)
     }
-    let newState = {
+    const newState = {
       isLoading: false
     }
     if (data != null) {
@@ -122,7 +121,7 @@ class InitModal extends React.Component {
             notes: data.notes
           })
 
-          let defaultSnippetNote = dataApi
+          const defaultSnippetNote = dataApi
             .createNote(data.storage.key, {
               type: 'SNIPPET_NOTE',
               folder: data.storage.folders[0].key,
@@ -147,7 +146,7 @@ class InitModal extends React.Component {
                 note: note
               })
             })
-          let defaultMarkdownNote = dataApi
+          const defaultMarkdownNote = dataApi
             .createNote(data.storage.key, {
               type: 'MARKDOWN_NOTE',
               folder: data.storage.folders[0].key,
@@ -184,6 +183,12 @@ class InitModal extends React.Component {
     })
   }
 
+  handleKeyDown (e) {
+    if (e.keyCode === 27) {
+      this.props.close()
+    }
+  }
+
   render () {
     if (this.state.isLoading) {
       return <div styleName='root--loading'>
@@ -194,19 +199,14 @@ class InitModal extends React.Component {
     return (
       <div styleName='root'
         tabIndex='-1'
-        onKeyDown={this.props.close}
+        onKeyDown={(e) => this.handleKeyDown(e)}
       >
-
-        <div styleName='header'>
-          <div styleName='header-title'>Initialize Storage</div>
-        </div>
-        <ModalEscButton handleEscButtonClick={this.props.close} />
         <div styleName='body'>
           <div styleName='body-welcome'>
-            Welcome!
+            Welcome to Boostnote!
           </div>
           <div styleName='body-description'>
-           Please select a directory for Boostnote storage.
+           Please select a directory for data storage.
           </div>
           <div styleName='body-path'>
             <input styleName='body-path-input'
@@ -237,7 +237,7 @@ class InitModal extends React.Component {
                 ? <span>
                   <i className='fa fa-spin fa-spinner' /> Loading...
                 </span>
-                : 'Let\'s Go!'
+                : 'CREATE'
               }
             </button>
           </div>

browser/main/modals/InitModal.styl

@@ -1,7 +1,11 @@
 .root
   modal()
-  max-width 540px
+  background-color #fff
+  max-width 100vw
+  max-height 100vh
   overflow hidden
+  margin 0
+  padding 150px 0
   position relative
 .root--loading
   @extend .root
@@ -13,14 +17,6 @@
 .loadingMessage
   color $ui-text-color
   margin 15px auto 35px
-.header
-  height 50px
-  font-size 18px
-  line-height 50px
-  padding 0 15px
-  background-color $ui-backgroundColor
-  border-bottom solid 1px $ui-borderColor
-  color $ui-text-color
 
 .body
   padding 30px
@@ -32,20 +28,20 @@
   color $ui-text-color
 
 .body-description
-  font-size 14px
+  font-size 16px
   color $ui-text-color
   text-align center
   margin-bottom 25px
 
 .body-path
   margin 0 auto 25px
-  width 280px
+  width 330px
 
 .body-path-input
-  height 30px
+  height 40px
   vertical-align middle
-  width 250px
-  font-size 12px
+  width 300px
+  font-size 14px
   border-style solid
   border-width 1px 0 1px 1px
   border-color $border-color
@@ -54,7 +50,10 @@
   padding 0 5px
 
 .body-path-button
-  height 30px
+  height 42px
+  width 30px
+  font-size 16px
+  font-weight 600
   border none
   border-top-right-radius 2px
   border-bottom-right-radius 2px
@@ -69,6 +68,8 @@
 
 .body-control-createButton
   colorPrimaryButton()
+  font-size 14px
+  font-weight 600
   border none
   border-radius 2px
   height 40px

browser/main/modals/NewNoteModal.js

@@ -26,7 +26,7 @@ class NewNoteModal extends React.Component {
   handleMarkdownNoteButtonClick (e) {
     AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_MARKDOWN')
     AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
-    let { storage, folder, dispatch, location } = this.props
+    const { storage, folder, dispatch, location } = this.props
     dataApi
       .createNote(storage, {
         type: 'MARKDOWN_NOTE',
@@ -58,7 +58,7 @@ class NewNoteModal extends React.Component {
   handleSnippetNoteButtonClick (e) {
     AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_SNIPPET')
     AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
-    let { storage, folder, dispatch, location } = this.props
+    const { storage, folder, dispatch, location } = this.props
 
     dataApi
       .createNote(storage, {

browser/main/modals/NewNoteModal.styl

@@ -64,3 +64,20 @@ body[data-theme="dark"]
   .description
     color $ui-inactive-text-color
 
+body[data-theme="solarized-dark"]
+  .root
+    background-color transparent
+
+  .header
+    color $ui-solarized-dark-text-color
+
+  .control-button
+    border-color $ui-solarized-dark-borderColor
+    color $ui-solarized-dark-text-color
+    background-color transparent
+    &:focus
+      colorDarkPrimaryButton()
+
+  .description
+    color $ui-solarized-dark-text-color
+

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -128,6 +128,12 @@ colorDarkControl()
   background-color $ui-dark-backgroundColor
   color $ui-dark-text-color
   
+colorSolarizedDarkControl()
+  border none
+  background-color $ui-solarized-dark-button-backgroundColor
+  color $ui-solarized-dark-text-color
+
+
 body[data-theme="dark"]
   .root
     color $ui-dark-text-color
@@ -154,3 +160,33 @@ body[data-theme="dark"]
   .group-section-control
     select, .group-section-control-input
       colorDarkControl()
+     
+      
+body[data-theme="solarized-dark"]
+  .root
+    color $ui-solarized-dark-text-color
+
+  .group-header
+    color $ui-solarized-dark-text-color
+    border-color $ui-solarized-dark-borderColor 
+
+  .group-header2
+    color $ui-solarized-dark-text-color
+
+  .group-section-control-input
+    border-color $ui-solarized-dark-borderColor 
+
+  .group-control
+    border-color $ui-solarized-dark-borderColor 
+  .group-control-leftButton
+    colorDarkDefaultButton()
+    border-color $ui-solarized-dark-borderColor 
+  .group-control-rightButton
+    colorSolarizedDarkPrimaryButton()
+  .group-hint
+    colorSolarizedDarkControl()
+  .group-section-control
+    select, .group-section-control-input
+      colorSolarizedDarkControl()
+
+