v0.8.10

Add notification on a copy button clicked

.eslintignore

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

.eslintrc

@@ -0,0 +1,10 @@
+{
+  "extends": ["standard", "standard-jsx"],
+  "rules": {
+    "no-useless-escape": 0,
+    "prefer-const": "warn",
+    "no-unused-vars": "warn",
+    "no-undef": "warn",
+    "no-lone-blocks": "warn"
+  }
+}

.travis.yml

@@ -0,0 +1,26 @@
+language: node_js
+# To fix the npm version in 4.x
+# refs: https://github.com/travis-ci/travis-ci/issues/4653#issuecomment-194051953
+before_install: 'if [[ `npm -v` != 4* ]]; then npm i -g npm@4; fi'
+matrix:
+  include:
+    - os: osx
+      install:
+        - 'if [[ ${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH} = "master" ]]; then yarn; fi'
+      node_js:
+        - 'stable'
+        - 'lts/*'
+      script:
+        - 'if [[ ${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH} = "master" && ${TRAVIS_NODE_VERSION} = "stable" ]]; then
+             npm run lint;
+             npm run test;
+             ./script/e2e-runner.sh;
+           fi'
+    - os: linux
+      node_js:
+        - 'stable'
+        - 'lts/*'
+      script:
+        - 'npm run lint'
+        - 'npm run test'
+        - 'if [[ ${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH} = "master" && ${TRAVIS_NODE_VERSION} = "stable" ]]; then ./script/e2e-runner.sh; fi'

LICENSE

@@ -1,8 +1,8 @@
 GPL-3.0
 
-Boostnote - the simplest note app
+Boostnote - an open source note-taking app made for programmers just like you.
 
-Copyright (C) 2016 MAISIN&CO.
+Copyright (C) 2017 Maisin&Co., Inc.
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by

browser/components/CodeEditor.js

@@ -1,6 +1,8 @@
 import React, { PropTypes } from 'react'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
+import path from 'path'
+import copyImage from 'browser/main/lib/dataApi/copyImage'
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
@@ -52,22 +54,37 @@ export default class CodeEditor extends React.Component {
       indentUnit: this.props.indentSize,
       tabSize: this.props.indentSize,
       indentWithTabs: this.props.indentType !== 'space',
-      keyMap: 'sublime',
+      keyMap: this.props.keyMap,
       inputStyle: 'textarea',
+      dragDrop: false,
       extraKeys: {
         Tab: function (cm) {
+          const cursor = cm.getCursor()
+          const line = cm.getLine(cursor.line)
           if (cm.somethingSelected()) cm.indentSelection('add')
           else {
-            if (cm.getOption('indentWithTabs')) {
-              cm.execCommand('insertTab')
+            const tabs = cm.getOption('indentWithTabs')
+            if (line.trimLeft() === '- ' || line.trimLeft() === '* ' || line.trimLeft() === '+ ') {
+              cm.execCommand('goLineStart')
+              if (tabs) {
+                cm.execCommand('insertTab')
+              } else {
+                cm.execCommand('insertSoftTab')
+              }
+              cm.execCommand('goLineEnd')
             } else {
-              cm.execCommand('insertSoftTab')
+              if (tabs) {
+                cm.execCommand('insertTab')
+              } else {
+                cm.execCommand('insertSoftTab')
+              }
             }
           }
         },
         'Cmd-T': function (cm) {
           // Do nothing
-        }
+        },
+        Enter: 'newlineAndIndentContinueMarkdownList'
       }
     })
 
@@ -102,6 +119,9 @@ export default class CodeEditor extends React.Component {
     if (prevProps.fontFamily !== this.props.fontFamily) {
       needRefresh = true
     }
+    if (prevProps.keyMap !== this.props.keyMap) {
+      needRefresh = true
+    }
 
     if (prevProps.indentSize !== this.props.indentSize) {
       this.editor.setOption('indentUnit', this.props.indentSize)
@@ -152,6 +172,7 @@ export default class CodeEditor extends React.Component {
     this.editor.setValue(this.props.value)
     this.editor.clearHistory()
     this.editor.on('change', this.changeHandler)
+    this.editor.refresh()
   }
 
   setValue (value) {
@@ -160,6 +181,22 @@ export default class CodeEditor extends React.Component {
     this.editor.setCursor(cursor)
   }
 
+  handleDropImage (e) {
+    e.preventDefault()
+    const imagePath = e.dataTransfer.files[0].path
+    const filename = path.basename(imagePath)
+
+    copyImage(imagePath, this.props.storageKey).then((imagePathInTheStorage) => {
+      const imageMd = `![${encodeURI(filename)}](${imagePathInTheStorage})`
+      this.insertImageMd(imageMd)
+    })
+  }
+
+  insertImageMd (imageMd) {
+    const cm = this.editor
+    cm.setValue(cm.getValue() + imageMd)
+  }
+
   render () {
     let { className, fontFamily, fontSize } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.length > 0
@@ -177,6 +214,7 @@ export default class CodeEditor extends React.Component {
           fontFamily: fontFamily.join(', '),
           fontSize: fontSize
         }}
+        onDrop={(e) => this.handleDropImage(e)}
       />
     )
   }
@@ -194,6 +232,7 @@ CodeEditor.propTypes = {
 CodeEditor.defaultProps = {
   readOnly: false,
   theme: 'xcode',
+  keyMap: 'sublime',
   fontSize: 14,
   fontFamily: 'Monaco, Consolas',
   indentSize: 4,

browser/components/MarkdownEditor.js

@@ -3,19 +3,31 @@ 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'
 
 class MarkdownEditor extends React.Component {
   constructor (props) {
     super(props)
 
+    // char codes for ctrl + w
+    this.escapeFromEditor = [17, 87]
+
+    // ctrl + shift + ;
+    this.supportMdSelectionBold = [16, 17, 186]
+
     this.state = {
       status: 'PREVIEW',
-      renderValue: props.value
+      renderValue: props.value,
+      keyPressed: new Set(),
+      isLocked: false
     }
+
+    this.lockEditorCode = () => this.handleLockEditor()
   }
 
   componentDidMount () {
     this.value = this.refs.code.value
+    eventEmitter.on('editor:lock', this.lockEditorCode)
   }
 
   componentDidUpdate () {
@@ -30,6 +42,7 @@ class MarkdownEditor extends React.Component {
 
   componentWillUnmount () {
     this.cancelQueue()
+    eventEmitter.off('editor:lock', this.lockEditorCode)
   }
 
   queueRendering (value) {
@@ -69,11 +82,14 @@ class MarkdownEditor extends React.Component {
           this.refs.code.blur()
           this.refs.preview.focus()
         }
+        eventEmitter.emit('topbar:togglelockbutton', this.state.status)
       })
     }
   }
 
   handleBlur (e) {
+    if (this.state.isLocked) return
+    this.setState({ keyPressed: new Set() })
     let { config } = this.props
     if (config.editor.switchPreview === 'BLUR') {
       let cursorPosition = this.refs.code.editor.getCursor()
@@ -83,6 +99,7 @@ class MarkdownEditor extends React.Component {
         this.refs.preview.focus()
         this.refs.preview.scrollTo(cursorPosition.line)
       })
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
     }
   }
 
@@ -98,6 +115,7 @@ class MarkdownEditor extends React.Component {
       }, () => {
         this.refs.code.focus()
       })
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
     }
   }
 
@@ -134,6 +152,7 @@ class MarkdownEditor extends React.Component {
     } else {
       this.refs.code.focus()
     }
+    eventEmitter.emit('topbar:togglelockbutton', this.state.status)
   }
 
   reload () {
@@ -142,8 +161,49 @@ class MarkdownEditor extends React.Component {
     this.renderPreview(this.props.value)
   }
 
+  handleKeyDown (e) {
+    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) }
+    if (keyPressed.size === this.escapeFromEditor.length &&
+        !this.state.isLocked && this.state.status === 'CODE' &&
+        this.escapeFromEditor.every(isNoteHandlerKey)) {
+      document.activeElement.blur()
+    }
+    if (keyPressed.size === this.supportMdSelectionBold.length && this.supportMdSelectionBold.every(isNoteHandlerKey)) {
+      this.addMdAroundWord('**')
+    }
+  }
+
+  addMdAroundWord (mdElement) {
+    if (this.refs.code.editor.getSelection()) {
+      return this.addMdAroundSelection(mdElement)
+    }
+    const currentCaret = this.refs.code.editor.getCursor()
+    const word = this.refs.code.editor.findWordAt(currentCaret)
+    const cmDoc = this.refs.code.editor.getDoc()
+    cmDoc.replaceRange(mdElement, word.anchor)
+    cmDoc.replaceRange(mdElement, { line: word.head.line, ch: word.head.ch + mdElement.length })
+  }
+
+  addMdAroundSelection (mdElement) {
+    this.refs.code.editor.replaceSelection(`${mdElement}${this.refs.code.editor.getSelection()}${mdElement}`)
+  }
+
+  handleKeyUp (e) {
+    const keyPressed = this.state.keyPressed
+    keyPressed.delete(e.keyCode)
+    this.setState({ keyPressed })
+  }
+
+  handleLockEditor () {
+    this.setState({ isLocked: !this.state.isLocked })
+  }
+
   render () {
-    let { className, value, config } = this.props
+    let { className, value, config, storageKey } = this.props
 
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
@@ -160,16 +220,23 @@ class MarkdownEditor extends React.Component {
         }
         onContextMenu={(e) => this.handleContextMenu(e)}
         tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+        onKeyUp={(e) => this.handleKeyUp(e)}
       >
-        <CodeEditor styleName='codeEditor'
+        <CodeEditor styleName={this.state.status === 'CODE'
+            ? 'codeEditor'
+            : 'codeEditor--hide'
+          }
           ref='code'
           mode='GitHub Flavored Markdown'
           value={value}
           theme={config.editor.theme}
+          keyMap={config.editor.keyMap}
           fontFamily={config.editor.fontFamily}
           fontSize={editorFontSize}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
+          storageKey={storageKey}
           onChange={(e) => this.handleChange(e)}
           onBlur={(e) => this.handleBlur(e)}
         />
@@ -179,6 +246,7 @@ class MarkdownEditor extends React.Component {
           }
           style={previewStyle}
           theme={config.ui.theme}
+          keyMap={config.editor.keyMap}
           fontSize={config.preview.fontSize}
           fontFamily={config.preview.fontFamily}
           codeBlockTheme={config.preview.codeBlockTheme}

browser/components/MarkdownEditor.styl

@@ -4,8 +4,14 @@
 .codeEditor
   absolute top bottom left right
 
+.hide
+  z-index 0
+  opacity 0
+  pointer-events none
+
 .codeEditor--hide
   @extend .codeEditor
+  @extend .hide
 
 .preview
   display block
@@ -17,7 +23,5 @@
 
 .preview--hide
   @extend .preview
-  z-index 0
-  opacity 0
-  pointer-events none
+  @extend .hide
 

browser/components/MarkdownPreview.js

@@ -5,26 +5,16 @@ import CodeMirror from 'codemirror'
 import consts from 'browser/lib/consts'
 import Raphael from 'raphael'
 import flowchart from 'flowchart'
-import SequenceDiagram from 'sequence-diagram'
-
-function decodeHTMLEntities (text) {
-  var entities = [
-    ['apos', '\''],
-    ['amp', '&'],
-    ['lt', '<'],
-    ['gt', '>']
-  ]
-
-  for (var i = 0, max = entities.length; i < max; ++i) {
-    text = text.replace(new RegExp('&' + entities[i][0] + ';', 'g'), entities[i][1])
-  }
-
-  return text
-}
+import SequenceDiagram from 'js-sequence-diagrams'
+import eventEmitter from 'browser/main/lib/eventEmitter'
+import fs from 'fs'
+import htmlTextHelper from 'browser/lib/htmlTextHelper'
+import copy from 'copy-to-clipboard'
 
 const { remote } = require('electron')
 const { app } = remote
 const path = require('path')
+const dialog = remote.dialog
 
 const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
 const appPath = 'file://' + (process.env.NODE_ENV === 'production'
@@ -49,11 +39,51 @@ body {
 }
 code {
   font-family: ${codeBlockFontFamily.join(', ')};
+  background-color: rgba(0,0,0,0.04);
+  color: #CC305F;
 }
 .lineNumber {
   ${lineNumber && 'display: block !important;'}
   font-family: ${codeBlockFontFamily.join(', ')};
 }
+
+.clipboardButton {
+  color: rgba(147,147,149,0.8);;
+  fill: rgba(147,147,149,1);;
+  border-radius: 50%;
+  margin: 7px;
+  border: none;
+  background-color: transparent;
+  outline: none;
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+}
+
+.clipboardButton:hover {
+  transition: 0.2s;
+  color: #939395;
+  fill: #939395;
+  background-color: rgba(0,0,0,0.1);
+}
+
+h1, h2 {
+  border: none;
+}
+
+h1 {
+  padding-bottom: 4px;
+  margin: 1em 0 8px;
+}
+
+h2 {
+  padding-bottom: 0.2em;
+  margin: 1em 0 0.37em;
+}
+
+body p {
+  white-space: normal;
+}
 `
 }
 
@@ -76,6 +106,8 @@ export default class MarkdownPreview extends React.Component {
     this.mouseUpHandler = (e) => this.handleMouseUp(e)
     this.anchorClickHandler = (e) => this.handlePreviewAnchorClick(e)
     this.checkboxClickHandler = (e) => this.handleCheckboxClick(e)
+    this.saveAsTextHandler = () => this.handleSaveAsText()
+    this.saveAsMdHandler = () => this.handleSaveAsMd()
   }
 
   handlePreviewAnchorClick (e) {
@@ -120,13 +152,38 @@ export default class MarkdownPreview extends React.Component {
     if (this.props.onMouseUp != null) this.props.onMouseUp(e)
   }
 
+  handleSaveAsText () {
+    this.exportAsDocument('txt')
+  }
+
+  handleSaveAsMd () {
+    this.exportAsDocument('md')
+  }
+
+  exportAsDocument (fileType) {
+    const options = {
+      filters: [
+        { name: 'Documents', extensions: [fileType] }
+      ],
+      properties: ['openFile', 'createDirectory']
+    }
+    dialog.showSaveDialog(remote.getCurrentWindow(), options,
+    (filename) => {
+      if (filename) {
+        fs.writeFile(filename, this.props.value, (err) => {
+          if (err) throw err
+        })
+      }
+    })
+  }
+
   componentDidMount () {
     this.refs.root.setAttribute('sandbox', 'allow-scripts')
     this.refs.root.contentWindow.document.body.addEventListener('contextmenu', this.contextMenuHandler)
 
     this.refs.root.contentWindow.document.head.innerHTML = `
       <style id='style'></style>
-      <link rel="stylesheet" href="${appPath}/compiled/katex-style.css">
+      <link rel="stylesheet" href="${appPath}/node_modules/katex/dist/katex.min.css">
       <link rel="stylesheet" href="${appPath}/node_modules/codemirror/lib/codemirror.css">
       <link rel="stylesheet" id="codeTheme">
     `
@@ -135,12 +192,20 @@ export default class MarkdownPreview extends React.Component {
 
     this.refs.root.contentWindow.document.addEventListener('mousedown', this.mouseDownHandler)
     this.refs.root.contentWindow.document.addEventListener('mouseup', this.mouseUpHandler)
+    this.refs.root.contentWindow.document.addEventListener('drop', this.preventImageDroppedHandler)
+    this.refs.root.contentWindow.document.addEventListener('dragover', this.preventImageDroppedHandler)
+    eventEmitter.on('export:save-text', this.saveAsTextHandler)
+    eventEmitter.on('export:save-md', this.saveAsMdHandler)
   }
 
   componentWillUnmount () {
     this.refs.root.contentWindow.document.body.removeEventListener('contextmenu', this.contextMenuHandler)
     this.refs.root.contentWindow.document.removeEventListener('mousedown', this.mouseDownHandler)
     this.refs.root.contentWindow.document.removeEventListener('mouseup', this.mouseUpHandler)
+    this.refs.root.contentWindow.document.removeEventListener('drop', this.preventImageDroppedHandler)
+    this.refs.root.contentWindow.document.removeEventListener('dragover', this.preventImageDroppedHandler)
+    eventEmitter.off('export:save-text', this.saveAsTextHandler)
+    eventEmitter.off('export:save-md', this.saveAsMdHandler)
   }
 
   componentDidUpdate (prevProps) {
@@ -170,9 +235,9 @@ export default class MarkdownPreview extends React.Component {
   }
 
   setCodeTheme (theme) {
-    theme = consts.THEMES.some((_theme) => _theme === theme)
+    theme = consts.THEMES.some((_theme) => _theme === theme) && theme !== 'default'
       ? theme
-      : 'default'
+      : 'elegant'
     this.getWindow().document.getElementById('codeTheme').href = `${appPath}/node_modules/codemirror/theme/${theme}.css`
   }
 
@@ -187,8 +252,19 @@ export default class MarkdownPreview extends React.Component {
     let { value, theme, indentSize, codeBlockTheme } = this.props
 
     this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
+
+    const codeBlocks = value.match(/(```)(.|[\n])*?(```)/g)
+    if (codeBlocks !== null) {
+      codeBlocks.forEach((codeBlock) => {
+        value = value.replace(codeBlock, htmlTextHelper.encodeEntities(codeBlock))
+      })
+    }
     this.refs.root.contentWindow.document.body.innerHTML = markdown.render(value)
 
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.taskListItem'), (el) => {
+      el.parentNode.parentNode.style.listStyleType = 'none'
+    })
+
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
       el.addEventListener('click', this.anchorClickHandler)
     })
@@ -205,7 +281,17 @@ 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 = el.innerHTML
+        let content = htmlTextHelper.decodeEntities(el.innerHTML)
+        const copyIcon = document.createElement('i')
+        copyIcon.innerHTML = '<button class="clipboardButton"><svg width="13" height="13" viewBox="0 0 1792 1792" ><path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z"/></svg></button>'
+        copyIcon.onclick = (e) => {
+          copy(content)
+          this.notify('Saved to Clipboard!', {
+            body: 'Paste it wherever you want!',
+            silent: true
+          })
+        }
+        el.parentNode.appendChild(copyIcon)
         el.innerHTML = ''
         el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
         CodeMirror.runMode(content, syntax.mime, el, {
@@ -223,7 +309,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(decodeHTMLEntities(el.innerHTML))
+        let diagram = flowchart.parse(htmlTextHelper.decodeEntities(el.innerHTML))
         el.innerHTML = ''
         diagram.drawSVG(el, opts)
         _.forEach(el.querySelectorAll('a'), (el) => {
@@ -239,7 +325,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(decodeHTMLEntities(el.innerHTML))
+        let diagram = SequenceDiagram.parse(htmlTextHelper.decodeEntities(el.innerHTML))
         el.innerHTML = ''
         diagram.drawSVG(el, {theme: 'simple'})
         _.forEach(el.querySelectorAll('a'), (el) => {
@@ -275,6 +361,18 @@ export default class MarkdownPreview extends React.Component {
     }
   }
 
+  preventImageDroppedHandler (e) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  notify (title, options) {
+    if (global.process.platform === 'win32') {
+      options.icon = path.join('file://', global.__dirname, '../../resources/app.png')
+    }
+    return new window.Notification(title, options)
+  }
+
   render () {
     let { className, style, tabIndex } = this.props
     return (

browser/components/ModalEscButton.js

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

browser/components/ModalEscButton.styl

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

browser/components/NoteItem.js

@@ -0,0 +1,102 @@
+/**
+ * @fileoverview Note item component.
+ */
+import React, { PropTypes } from 'react'
+import { isArray } from 'lodash'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './NoteItem.styl'
+
+/**
+ * @description Tag element component.
+ * @param {string} tagName
+ * @return {React.Component}
+ */
+const TagElement = ({ tagName }) => (
+  <span styleName='item-bottom-tagList-item' key={tagName}>
+    #{tagName}
+  </span>
+)
+
+/**
+ * @description Tag element list component.
+ * @param {Array|null} tags
+ * @return {React.Component}
+ */
+const TagElementList = (tags) => {
+  if (!isArray(tags)) {
+    return []
+  }
+
+  const tagElements = tags.map(tag => (
+    TagElement({tagName: tag})
+  ))
+
+  return tagElements
+}
+
+/**
+ * @description Note item component when using normal display mode.
+ * @param {boolean} isActive
+ * @param {Object} note
+ * @param {Function} handleNoteClick
+ * @param {Function} handleNoteContextMenu
+ * @param {Function} handleDragStart
+ * @param {string} dateDisplay
+ */
+const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu, handleDragStart }) => (
+  <div styleName={isActive
+      ? 'item--active'
+      : 'item'
+    }
+    key={`${note.storage}-${note.key}`}
+    onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
+    onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+    onDragStart={e => handleDragStart(e, note)}
+    draggable='true'
+  >
+    <div styleName='item-wrapper'>
+      {note.type === 'SNIPPET_NOTE'
+        ? <i styleName='item-title-icon' className='fa fa-fw fa-code' />
+        : <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
+      }
+      <div styleName='item-title'>
+        {note.title.trim().length > 0
+          ? note.title
+          : <span styleName='item-title-empty'>Empty</span>
+        }
+      </div>
+
+      <div styleName='item-bottom-time'>{dateDisplay}</div>
+      {note.isStarred
+        ? <i styleName='item-star' className='fa fa-star' /> : ''
+      }
+      <div styleName='item-bottom'>
+        <div styleName='item-bottom-tagList'>
+          {note.tags.length > 0
+            ? TagElementList(note.tags)
+            : <span styleName='item-bottom-tagList-empty' />
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+NoteItem.propTypes = {
+  isActive: PropTypes.bool.isRequired,
+  dateDisplay: PropTypes.string.isRequired,
+  note: PropTypes.shape({
+    storage: PropTypes.string.isRequired,
+    key: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    title: PropTypes.string.isrequired,
+    tags: PropTypes.array,
+    isStarred: PropTypes.bool.isRequired
+  }),
+  handleNoteClick: PropTypes.func.isRequired,
+  handleNoteContextMenu: PropTypes.func.isRequired,
+  handleDragStart: PropTypes.func.isRequired,
+  handleDragEnd: PropTypes.func.isRequired
+}
+
+export default CSSModules(NoteItem, styles)

browser/components/NoteItem.styl

@@ -0,0 +1,191 @@
+$control-height = 30px
+
+.root
+  absolute left bottom
+  top $topBar-height - 1
+  background-color $ui-noteList-backgroundColor
+
+.item
+  position relative
+  padding 0 20px
+  user-select none
+  cursor pointer
+  background-color $ui-noteList-backgroundColor
+  transition background-color 0.2s
+  &:hover
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      transition 0.15s
+      color $ui-text-color
+    .item-bottom-tagList-item
+      background-color alpha(white, 0.6)
+      color $ui-text-color
+    .item-star
+      color $ui-favorite-star-button-color
+  &:active
+    background-color $ui-button--active-backgroundColor
+    color $ui-text-color
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      transition 0.15s
+      color $ui-text-color
+    .item-bottom-tagList-item
+      background-color alpha(white, 0.6)
+      color $ui-text-color
+
+.item-wrapper
+  padding 15px 0
+  border-bottom $ui-border
+
+.item--active
+  @extend .item
+  background-color $ui-button--active-backgroundColor
+  color $ui-text-color
+  .item-title
+  .item-title-empty
+  .item-bottom-tagList-empty
+  .item-bottom-time
+  .item-title-icon
+    color $ui-text-color
+  .item-bottom-tagList-item
+    background-color alpha(white, 0.6)
+    color $ui-text-color
+  .item-wrapper
+    border-color transparent
+  .item-star
+    color $ui-favorite-star-button-color
+  &:hover
+    background-color $ui-button--active-backgroundColor
+
+.item-title-icon
+  position relative
+  font-size 12px
+  color $ui-inactive-text-color
+
+.item-title
+  font-size 13px
+  position relative
+  top -12px
+  left 20px
+  padding-right 15px
+  padding-bottom 4px
+  overflow ellipsis
+  color $ui-inactive-text-color
+
+.item-title-empty
+  font-weight normal
+  color $ui-inactive-text-color
+
+.item-bottom
+  position relative
+  bottom 0px
+  margin-top 2px
+  font-size 12px
+  line-height 20px
+  overflow ellipsis
+  display flex
+
+.item-bottom-tagList
+  flex 1
+  overflow ellipsis
+  line-height 20px
+  padding-top 2px
+  padding-left 2px
+
+.item-bottom-tagList-item
+  font-size 10px
+  margin-right 8px
+  padding 0
+  height 20px
+  box-sizing border-box
+  border-radius 2px
+  padding 1px 2px
+  vertical-align middle
+  background-color white
+  color $ui-inactive-text-color
+
+.item-bottom-time
+  color $ui-inactive-text-color
+  font-size 10px
+  padding-left 2px
+  padding-bottom 2px
+
+.item-star
+  position absolute
+  top 34px
+  left 5px
+  width 34px
+  height 34px
+  color alpha($ui-favorite-star-button-color, 60%)
+  font-size 12px
+  padding 0
+  border-radius 17px
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+
+  .item
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+        color $ui-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dark-button--active-backgroundColor
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(white, 10%)
+        color $ui-dark-text-color  
+
+  .item-wrapper
+    border-color alpha($ui-dark-button--active-backgroundColor, 60%)
+
+  .item--active
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-button--active-backgroundColor
+    .item-wrapper
+      border-color transparent
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      color $ui-dark-text-color
+    .item-bottom-tagList-item
+      background-color alpha(white, 10%)
+      color $ui-dark-text-color
+
+  .item-title
+    color $ui-inactive-text-color
+
+  .item-title-icon
+    color $ui-inactive-text-color
+
+  .item-title-empty
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-item
+    background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+    color $ui-inactive-text-color
+
+  .item-bottom-tagList-empty
+    color $ui-inactive-text-color
+    vertical-align middle

browser/components/NoteItemSimple.js

@@ -0,0 +1,53 @@
+/**
+ * @fileoverview Note item component with simple display mode.
+ */
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './NoteItemSimple.styl'
+
+/**
+ * @description Note item component when using simple display mode.
+ * @param {boolean} isActive
+ * @param {Object} note
+ * @param {Function} handleNoteClick
+ * @param {Function} handleNoteContextMenu
+ * @param {Function} handleDragStart
+ */
+const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenum, handleDragStart }) => (
+  <div styleName={isActive
+      ? 'item-simple--active'
+      : 'item-simple'
+    }
+    key={`${note.storage}-${note.key}`}
+    onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
+    onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+    onDragStart={e => handleDragStart(e, note)}
+    draggable='true'
+  >
+    <div styleName='item-simple-title'>
+      {note.type === 'SNIPPET_NOTE'
+        ? <i styleName='item-simple-title-icon' className='fa fa-fw fa-code' />
+        : <i styleName='item-simple-title-icon' className='fa fa-fw fa-file-text-o' />
+      }
+      {note.title.trim().length > 0
+        ? note.title
+        : <span styleName='item-simple-title-empty'>Empty</span>
+      }
+    </div>
+  </div>
+)
+
+NoteItemSimple.propTypes = {
+  isActive: PropTypes.bool.isRequired,
+  note: PropTypes.shape({
+    storage: PropTypes.string.isRequired,
+    key: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    title: PropTypes.string.isrequired
+  }),
+  handleNoteClick: PropTypes.func.isRequired,
+  handleNoteContextMenu: PropTypes.func.isRequired,
+  handleDragStart: PropTypes.func.isRequired
+}
+
+export default CSSModules(NoteItemSimple, styles)

browser/components/NoteItemSimple.styl

@@ -0,0 +1,105 @@
+$control-height = 30px
+
+.root
+  absolute left bottom
+  top $topBar-height - 1
+  background-color $ui-noteList-backgroundColor
+
+.item-simple
+  position relative
+  padding 0 25px
+  user-select none
+  cursor pointer
+  background-color $ui-noteList-backgroundColor
+  transition background-color 0.15s
+  &:hover
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    .item-simple-title
+    .item-simple-title-empty
+    .item-simple-title-icon
+      color $ui-text-color
+  &:active
+    background-color $ui-button--active-backgroundColor
+    color $ui-text-color
+    .item-simple-title
+    .item-simple-title-empty
+    .item-simple-title-icon
+      color $ui-text-color
+
+.item-simple--active
+  @extend .item-simple
+  background-color $ui-button--active-backgroundColor
+  color $ui-text-color
+  .item-simple-title
+  .item-simple-title-empty
+    border-color transparent
+    color $ui-text-color
+  .item-simple-title-icon
+    color $ui-text-color
+  &:hover
+    background-color $ui-button--active-backgroundColor
+
+.item-simple-title
+  font-size 12px
+  height 40px
+  box-sizing border-box
+  line-height 24px
+  padding-top 8px
+  overflow ellipsis
+  color $ui-inactive-text-color
+  border-bottom $ui-border
+
+.item-simple-title-icon
+  font-size 12px
+  color $ui-inactive-text-color
+  padding-right 6px
+
+.item-simple-title-empty
+  font-weight normal
+  color $ui-inactive-text-color
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+
+  .item-simple
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+    &:active
+      background-color $ui-dark-button--active-backgroundColor
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        color $ui-dark-text-color
+
+  .item-simple--active
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-button--active-backgroundColor
+    .item-simple-title
+    .item-simple-title-icon
+    .item-simple-bottom-time
+      color $ui-dark-text-color
+    .item-simple-bottom-tagList-item
+      background-color transparent
+      color $ui-dark-text-color
+
+  .item-simple-title
+    color $ui-inactive-text-color
+    border-color alpha($ui-dark-button--active-backgroundColor, 60%)
+
+  .item-simple-title-icon
+    color $ui-darkinactive-text-color
+
+  .item-simple-title-empty
+    color $ui-dark-inactive-text-color

browser/components/ProfileImage.js

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

browser/components/SideNavFilter.js

@@ -0,0 +1,44 @@
+/**
+ * @fileoverview Filter for all notes.
+ */
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SideNavFilter.styl'
+
+/**
+ * @param {boolean} isFolded
+ * @param {boolean} isHomeActive
+ * @param {Function} handleAllNotesButtonClick
+ * @param {boolean} isStarredActive
+ * @param {Function} handleStarredButtonClick
+ * @return {React.Component}
+ */
+const SideNavFilter = ({
+  isFolded, isHomeActive, handleAllNotesButtonClick,
+  isStarredActive, handleStarredButtonClick
+}) => (
+  <div styleName={isFolded ? 'menu--folded' : 'menu'}>
+    <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
+      onClick={handleAllNotesButtonClick}
+    >
+      <i className='fa fa-archive fa-fw' />
+      <span styleName='menu-button-label'>All Notes</span>
+    </button>
+    <button styleName={isStarredActive ? 'menu-button-star--active' : 'menu-button'}
+      onClick={handleStarredButtonClick}
+    >
+      <i className='fa fa-star fa-fw' />
+      <span styleName='menu-button-label'>Starred</span>
+    </button>
+  </div>
+)
+
+SideNavFilter.propTypes = {
+  isFolded: PropTypes.bool,
+  isHomeActive: PropTypes.bool.isRequired,
+  handleAllNotesButtonClick: PropTypes.func.isRequired,
+  isStarredActive: PropTypes.bool.isRequired,
+  handleStarredButtonClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(SideNavFilter, styles)

browser/components/SideNavFilter.styl

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

browser/components/SnippetTab.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SnippetTab.styl'
 import context from 'browser/lib/context'
@@ -96,6 +96,7 @@ class SnippetTab extends React.Component {
         {!this.state.isRenaming
           ? <button styleName='button'
             onClick={(e) => this.handleClick(e)}
+            onDoubleClick={(e) => this.handleRenameClick(e)}
             onContextMenu={(e) => this.handleContextMenu(e)}
           >
             {snippet.name.trim().length > 0
@@ -117,7 +118,7 @@ class SnippetTab extends React.Component {
           <button styleName='deleteButton'
             onClick={(e) => this.handleDeleteButtonClick(e)}
           >
-            <i className='fa fa-times'/>
+            <i className='fa fa-times' />
           </button>
         }
       </div>

browser/components/SnippetTab.styl

@@ -2,9 +2,6 @@
   position relative
   flex 1
   overflow hidden
-  border-right $ui-border
-  &:last-child
-    border-right none
   &:hover
     .deleteButton
       color $ui-inactive-text-color
@@ -13,11 +10,11 @@
       &:active
         color white
         background-color $ui-active-color
+
 .root--active
   @extend .root
   min-width 100px
-  .button
-    border-color $brand-color
+  border-bottom $ui-border
 
 .button
   width 100%
@@ -31,8 +28,6 @@
   border-left 4px solid transparent
   &:hover
     background-color $ui-button--hover-backgroundColor
-  &:active, &:active:hover
-    border-color $brand-color
 
 .deleteButton
   position absolute
@@ -65,14 +60,12 @@ body[data-theme="dark"]
         &:hover
           background-color darken($ui-dark-button--hover-backgroundColor, 15%)
         &:active
-          color white
+          color $ui-dark-text-color
           background-color $ui-dark-button--active-backgroundColor
 
   .root--active
     color $ui-dark-text-color
     border-color $ui-dark-borderColor
-    .button
-      border-color $brand-color
     &:hover
       background-color $ui-dark-button--hover-backgroundColor
       .deleteButton
@@ -80,7 +73,7 @@ body[data-theme="dark"]
         &:hover
           background-color darken($ui-dark-button--hover-backgroundColor, 15%)
         &:active
-          color white
+          color $ui-dark-text-color
           background-color $ui-dark-button--active-backgroundColor
 
   .button
@@ -90,13 +83,9 @@ body[data-theme="dark"]
     transition color background-color 0.15s
     border-left 4px solid transparent
     &:hover
-      color white
+      color $ui-dark-text-color
       background-color $ui-dark-button--hover-backgroundColor
-    &:active
-      color $ui-dark-button--active-color
-    &:active, &:active:hover
-      color $ui-dark-button--active-color
 
   .input
     background-color $ui-dark-button--hover-backgroundColor
-    color white
+    color $ui-dark-text-color

browser/components/StorageItem.js

@@ -0,0 +1,66 @@
+/**
+ * @fileoverview Micro component for showing storage.
+ */
+import React, { PropTypes } from 'react'
+import styles from './StorageItem.styl'
+import CSSModules from 'browser/lib/CSSModules'
+import { isNumber } from 'lodash'
+
+/**
+ * @param {boolean} isActive
+ * @param {Function} handleButtonClick
+ * @param {Function} handleContextMenu
+ * @param {string} folderName
+ * @param {string} folderColor
+ * @param {boolean} isFolded
+ * @param {number} noteCount
+ * @param {Function} handleDrop
+ * @param {Function} handleDragEnter
+ * @param {Function} handleDragOut
+ * @return {React.Component}
+ */
+const StorageItem = ({
+  isActive, handleButtonClick, handleContextMenu, folderName,
+  folderColor, isFolded, noteCount, handleDrop, handleDragEnter, handleDragLeave
+}) => (
+  <button styleName={isActive
+      ? 'folderList-item--active'
+      : 'folderList-item'
+    }
+    onClick={handleButtonClick}
+    onContextMenu={handleContextMenu}
+    onDrop={handleDrop}
+    onDragEnter={handleDragEnter}
+    onDragLeave={handleDragLeave}
+  >
+    <span styleName={isFolded
+      ? 'folderList-item-name--folded' : 'folderList-item-name'
+    }
+      style={{borderColor: folderColor}}
+    >
+      {isFolded ? folderName.substring(0, 1) : folderName}
+    </span>
+    {(!isFolded && isNumber(noteCount)) &&
+      <span styleName='folderList-item-noteCount'>{noteCount}</span>
+    }
+    {isFolded &&
+      <span styleName='folderList-item-tooltip'>
+        {folderName}
+      </span>
+    }
+  </button>
+)
+
+StorageItem.propTypes = {
+  isActive: PropTypes.bool.isRequired,
+  handleButtonClick: PropTypes.func,
+  handleContextMenu: PropTypes.func,
+  folderName: PropTypes.string.isRequired,
+  folderColor: PropTypes.string,
+  isFolded: PropTypes.bool.isRequired,
+  handleDragEnter: PropTypes.func.isRequired,
+  handleDragLeave: PropTypes.func.isRequired,
+  noteCount: PropTypes.number
+}
+
+export default CSSModules(StorageItem, styles)

browser/components/StorageItem.styl

@@ -0,0 +1,92 @@
+.root
+  width 100%
+  user-select none
+
+.folderList-item
+  display flex
+  width 100%
+  height 26px
+  background-color transparent
+  color $ui-inactive-text-color
+  padding 0
+  margin-bottom 5px
+  text-align left
+  border none
+  overflow ellipsis
+  font-size 12px
+  &:first-child
+    margin-top 0
+  &:hover
+    color $ui-text-color
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    transition background-color 0.15s
+  &:active
+    color $ui-text-color
+    background-color $ui-button--active-backgroundColor
+
+.folderList-item--active
+  @extend .folderList-item
+  color $ui-text-color
+  background-color $ui-button--active-backgroundColor
+  &:hover
+    color $ui-text-color
+    background-color $ui-button--active-backgroundColor
+
+.folderList-item-name
+  display block
+  flex 1
+  padding 0 25px
+  height 26px
+  line-height 26px
+  border-width 0 0 0 2px
+  border-style solid
+  border-color transparent
+  overflow hidden
+  text-overflow ellipsis
+
+.folderList-item-noteCount
+  float right
+  line-height 26px
+  padding-right 15px
+  font-size 12px
+
+.folderList-item-tooltip
+  tooltip()
+  position fixed
+  padding 0 10px
+  left 44px
+  z-index 10
+  pointer-events none
+  opacity 0
+  border-top-right-radius 2px
+  border-bottom-right-radius 2px
+  height 26px
+  line-height 26px
+
+.folderList-item:hover, .folderList-item--active:hover
+  .folderList-item-tooltip
+    opacity 1
+
+.folderList-item-name--folded
+  @extend .folderList-item-name
+  padding-left 12px
+
+
+body[data-theme="dark"]
+  .folderList-item
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
+    &:active
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-dark-text-color
+    background-color $ui-dark-button--active-backgroundColor
+    &:active
+      background-color $ui-dark-button--active-backgroundColor
+    &:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor

browser/components/TodoListPercentage.styl

@@ -0,0 +1,31 @@
+.percentageBar
+  position absolute
+  top 58px
+  right: 0px
+  left 0px
+  background-color #DADFE1
+  width 100%
+  height: 15px
+  font-size: 12px
+  z-index 100
+  border-radius 2px
+
+.progressBar
+  background-color: #6C7A89
+  height 15px
+  border-radius 2px
+  transition 0.3s
+
+.percentageText
+  color #f4f4f4
+  padding: 2px 43%
+
+body[data-theme="dark"]
+  .percentageBar
+    background-color #363A3D
+
+  .progressBar
+    background-color: alpha(#939395, 50%)
+
+  .percentageText
+    color $ui-dark-text-color

browser/components/TodolistPercentage.js

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

browser/components/markdown.styl

@@ -54,7 +54,7 @@ body
   font-family helvetica, arial, sans-serif
   line-height 1.6
   overflow-x hidden
-  user-select all
+  background-color $ui-noteDetail-backgroundColor
   .katex
     font 400 1.2em 'KaTeX_Main'
     line-height 1.2em
@@ -77,7 +77,6 @@ body
 li
   label.taskListItem
     margin-left -2em
-    background-color white
 div.math-rendered
   text-align center
 .math-failed
@@ -271,15 +270,16 @@ table
         border-right solid 1px borderColor
 
 themeDarkBackground = darken(#21252B, 10%)
-themeDarkText = #DDDDDD
+themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)
-themeDarkPreview = #282C34
+themeDarkPreview = $ui-dark-noteDetail-backgroundColor
 themeDarkTableOdd = themeDarkPreview
 themeDarkTableEven = darken(themeDarkPreview, 10%)
 themeDarkTableHead = themeDarkTableEven
 themeDarkTableBorder = themeDarkBorder
 themeDarkModalButtonDefault = themeDarkPreview
 themeDarkModalButtonDanger = #BF360C
+
 body[data-theme="dark"]
   color themeDarkText
   border-color themeDarkBorder
@@ -288,8 +288,9 @@ body[data-theme="dark"]
     background-color alpha(lighten(brandColor, 30%), 0.2) !important
 
   code
+    color #EA6730
     border-color darken(themeDarkBorder, 10%)
-    background-color lighten(themeDarkPreview, 10%)
+    background-color lighten(themeDarkPreview, 5%)
 
   pre
     border-color lighten(#21252B, 20%)

browser/finder/FinderMain.styl

@@ -21,9 +21,11 @@ $list-width = 250px
   outline none
   text-align center
   background-color transparent
+
 .result
   absolute left right bottom
   top $search-height
+  background-color $ui-noteDetail-backgroundColor
 
 .result-nav
   user-select none
@@ -32,7 +34,7 @@ $list-width = 250px
   background-color $ui-backgroundColor
 
 .result-nav-filter
-  margin-bottom 5px
+  margin-bottom 10px
 
 .result-nav-filter-option
   height 25px
@@ -62,7 +64,7 @@ $list-width = 250px
 
 .result-nav-storageList
   absolute bottom left right
-  top 80px + 32px + 10px
+  top 80px + 32px + 10px + 10px
   overflow-y auto
 
 .result-list
@@ -70,15 +72,15 @@ $list-width = 250px
   absolute top bottom
   left $nav-width
   width $list-width
-  border-width 0 1px
-  border-style solid
-  border-color $ui-borderColor
   box-sizing border-box
   overflow-y auto
+  box-shadow 2px 0 15px -8px #b1b1b1
+  z-index 1
 
 .result-detail
   absolute top bottom right
   left $nav-width + $list-width
+  background-color $ui-noteDetail-backgroundColor
 
 body[data-theme="dark"]
   .root
@@ -88,6 +90,9 @@ body[data-theme="dark"]
   .search-input
     color $ui-dark-text-color
 
+  .result
+    background-color $ui-dark-noteList-backgroundColor
+
   .result-nav
     background-color $ui-dark-backgroundColor
     label
@@ -104,7 +109,10 @@ body[data-theme="dark"]
 
   .result-list
     border-color $ui-dark-borderColor
+    box-shadow none
+    top 0
 
   .result-detail
     absolute top bottom right
     left $nav-width + $list-width
+    background-color $ui-dark-noteDetail-backgroundColor

browser/finder/NoteDetail.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './NoteDetail.styl'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
@@ -97,9 +97,7 @@ class NoteDetail extends React.Component {
     let { note, config } = this.props
     if (note == null) {
       return (
-        <div styleName='root'>
-
-        </div>
+        <div styleName='root' />
       )
     }
 
@@ -154,6 +152,7 @@ class NoteDetail extends React.Component {
               fontSize={editorFontSize}
               indentType={config.editor.indentType}
               indentSize={editorIndentSize}
+              keyMap={config.editor.keyMap}
               readOnly
               ref={'code-' + index}
             />

browser/finder/NoteDetail.styl

@@ -1,12 +1,16 @@
+@import('../main/Detail/DetailVars.styl')
+
 .root
   absolute top bottom left right
-  width 100%
+  left $note-detail-left-margin
+  right $note-detail-right-margin
   height 100%
+  width 365px
+  background-color $ui-noteDetail-backgroundColor
 
 .description
   absolute top left right
   height 80px
-  border-bottom $ui-border
   box-sizing border-box
 
 .description-textarea
@@ -18,52 +22,43 @@
   padding 10px
   line-height 1.6
   box-sizing border-box
+  background-color $ui-noteDetail-backgroundColor
 
 .tabList
   absolute left right
   top 80px
   box-sizing border-box
   height 30px
-  border-bottom $ui-border
   display flex
-  background-color $ui-backgroundColor
+  background-color $ui-noteDetail-backgroundColor
 
 .tabList-item
   position relative
   flex 1
-  border-right $ui-border
+  overflow hidden
+  &:hover
+    background-color $ui-button--hover-backgroundColorg
 
 .tabList-item--active
   @extend .tabList-item
-  .tabList-item-button
-    border-color $brand-color
+  border-bottom $ui-border
 
 .tabList-item-button
   width 100%
   height 29px
-  navButtonColor()
-  outline none
-  border-left 4px solid transparent
-
-.tabList-item-deleteButton
-  position absolute
-  top 5px
-  height 20px
-  right 5px
-  width 20px
-  text-align center
+  overflow ellipsis
+  text-align left
+  padding-right 30px
+  padding-left 10px
   border none
-  padding 0
-  color transparent
   background-color transparent
-  border-radius 2px
-.tabList-plusButton
-  navButtonColor()
-  width 30px
+  transition 0.15s
+  &:hover
+    background-color $ui-button--hover-backgroundColor
 
 .tabView
   absolute left right bottom
-  top 110px
+  top 130px
 
 .tabView-content
   absolute top left right bottom
@@ -72,38 +67,31 @@
   width 100%
 
 body[data-theme="dark"]
+  .root
+    background-color $ui-dark-noteDetail-backgroundColor
+
   .description
     border-color $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
 
   .description-textarea
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
     color white
 
   .tabList
-    background-color $ui-button--active-backgroundColor
-    border-bottom-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
+
   .tabList-item
     border-color $ui-dark-borderColor
     &:hover
       background-color $ui-dark-button--hover-backgroundColor
-  .tabList-item--active
-    border-color $ui-dark-borderColor
-    .tabList-item-button
-      border-color $brand-color
-  .tabList-item-button
-    navDarkButtonColor()
-    border-left 4px solid transparent
-  .tabList-plusButton
-    navDarkButtonColor()
 
-  .tabView-top
-    border-color $ui-dark-borderColor
-  .tabView-top-name
-    border-color $ui-dark-borderColor
+  .tabList-item-button
+    border none
     color $ui-dark-text-color
-    background-color $ui-dark-button--hover-backgroundColor
-  .tabView-top-mode
-    border-color $ui-dark-borderColor
-    background-color $dark-default-button-background
-    color $ui-dark-inactive-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/NoteItem.js

@@ -1,85 +0,0 @@
-import React, { PropTypes } from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './NoteItem.styl'
-import moment from 'moment'
-import _ from 'lodash'
-
-class NoteItem extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-    }
-  }
-
-  handleClick (e) {
-    this.props.onClick(e)
-  }
-
-  render () {
-    let { note, folder, storage, isActive } = this.props
-
-    let tagList = _.isArray(note.tags)
-      ? note.tags.map((tag) => {
-        return (
-          <span styleName='bottom-tagList-item'
-            key={tag}>
-            {tag}
-          </span>
-        )
-      })
-      : []
-    return (
-      <div styleName={isActive
-          ? 'root--active'
-          : 'root'
-        }
-        key={note.storage + '-' + note.key}
-        onClick={(e) => this.handleClick(e)}
-      >
-        <div styleName='info'>
-          <div styleName='info-left'>
-            <span styleName='info-left-folder'
-              style={{borderColor: folder.color}}
-            >
-              {folder.name}
-              <span styleName='info-left-folder-surfix'>in {storage.name}</span>
-            </span>
-          </div>
-        </div>
-
-        <div styleName='title'>
-          {note.type === 'SNIPPET_NOTE'
-            ? <i styleName='title-icon' className='fa fa-fw fa-code' />
-            : <i styleName='title-icon' className='fa fa-fw fa-file-text-o' />
-          }
-          {note.title.trim().length > 0
-            ? note.title
-            : <span styleName='title-empty'>Empty</span>
-          }
-        </div>
-
-        <div styleName='bottom'>
-          <i styleName='bottom-tagIcon'
-            className='fa fa-tags fa-fw'
-          />
-          <div styleName='bottom-tagList'>
-            {tagList.length > 0
-              ? tagList
-              : <span styleName='bottom-tagList-empty'>Not tagged yet</span>
-            }
-          </div>
-
-          <div styleName='bottom-time'>
-            {moment(note.updatedAt).fromNow()}
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-NoteItem.propTypes = {
-}
-
-export default CSSModules(NoteItem, styles)

browser/finder/NoteItem.styl

@@ -1,179 +0,0 @@
-.root
-  position relative
-  border-bottom $ui-border
-  padding 2px 5px
-  user-select none
-  cursor pointer
-  transition background-color 0.15s
-  &:hover
-    background-color alpha($ui-active-color, 20%)
-
-.root--active
-  @extend .root
-  background-color $ui-active-color
-  &:hover
-    background-color $ui-active-color
-  color white
-  .info-left-folder
-  .info-left-folder-surfix
-  .title
-  .title-icon
-  .title-empty
-  .bottom-tagIcon
-  .bottom-tagList-item
-  .bottom-tagList-empty
-  .bottom-time
-    color white
-  .bottom-tagList-item
-    color white
-    background-color transparent
-
-.border
-  absolute top bottom left right
-  border-style solid
-  border-width 2px
-  border-color transparent
-  transition 0.15s
-
-.info
-  height 20px
-  clearfix()
-  font-size 12px
-  color $ui-inactive-text-color
-  line-height 20px
-  overflow-y hidden
-
-.info-left
-  float left
-  overflow ellipsis
-
-.info-left-folder
-  border-left 4px solid transparent
-  padding 2px 5px
-  color $ui-text-color
-.info-left-folder-surfix
-  font-size 10px
-  margin-left 5px
-  color $ui-inactive-text-color
-.info-right
-  float right
-
-.title
-  height 24px
-  box-sizing border-box
-  line-height 24px
-  height 20px
-  line-height 20px
-  padding 0 5px 0 0
-  overflow ellipsis
-  color $ui-text-color
-
-.title-icon
-  font-size 12px
-  color $ui-inactive-text-color
-  padding-right 3px
-
-.title-empty
-  font-weight normal
-  color $ui-inactive-text-color
-
-.bottom
-  margin-top 2px
-  height 20px
-  font-size 12px
-  line-height 20px
-  overflow ellipsis
-  display flex
-
-.bottom-tagIcon
-  vertical-align middle
-  color $ui-button-color
-  height 20px
-  line-height 20px
-
-.bottom-tagList
-  flex 1
-  overflow ellipsis
-  line-height 20px
-
-.bottom-tagList-item
-  margin 0 4px
-  padding 0 4px
-  height 20px
-  box-sizing border-box
-  border-radius 3px
-  vertical-align middle
-  border-style solid
-  border-color $ui-button--focus-borderColor
-  border-width 0 0 0 3px
-  background-color $ui-backgroundColor
-  color $ui-text-color
-  transition 0.15s
-
-.bottom-tagList-empty
-  color $ui-inactive-text-color
-  vertical-align middle
-  font-size 10px
-  margin-left 5px
-
-.bottom-time
-  color $ui-inactive-text-color
-  margin-left 5px
-  font-size 10px
-
-body[data-theme="dark"]
-  .root
-    border-color $ui-dark-borderColor
-
-  .root--active
-    @extend .root
-    border-color $ui-dark-borderColor
-    &:hover
-      background-color $ui-active-color
-    .info-left-folder
-    .info-left-folder-surfix
-    .title
-    .title-icon
-    .title-empty
-    .bottom-tagIcon
-    .bottom-tagList-item
-    .bottom-tagList-empty
-    .bottom-time
-      color white
-    .bottom-tagList-item
-      color white
-      background-color transparent
-
-  .info
-    color $ui-dark-inactive-text-color
-
-  .info-left-folder
-    color $ui-dark-text-color
-
-  .info-left-folder-surfix
-    color $ui-dark-inactive-text-color
-
-  .title
-    color $ui-dark-text-color
-
-  .title-icon
-    color $ui-dark-inactive-text-color
-
-  .title-empty
-    color $ui-dark-inactive-text-color
-
-  .tagList-empty
-    color $ui-dark-inactive-text-color
-
-  .bottom-tagIcon
-    color $ui-dark-button-color
-
-  .bottom-tagList-item
-    color $ui-dark-text-color
-    background-color $ui-dark-backgroundColor
-
-  .bottom-tagList-empty
-    color $ui-dark-inactive-text-color
-
-  .bottom-time
-    color $ui-dark-inactive-text-color

browser/finder/NoteList.js

@@ -1,6 +1,6 @@
-import React, { PropTypes } from 'react'
-import NoteItem from './NoteItem'
-import _ from 'lodash'
+import React from 'react'
+import NoteItem from 'browser/components/NoteItem'
+import moment from 'moment'
 
 class NoteList extends React.Component {
   constructor (props) {
@@ -54,21 +54,23 @@ class NoteList extends React.Component {
   }
 
   render () {
-    let { storageMap, notes, index } = this.props
+    let { notes, index } = this.props
 
     let notesList = notes
       .slice(0, 10 + 10 * this.state.range)
       .map((note, _index) => {
-        let storage = storageMap[note.storage]
-        let folder = _.find(storage.folders, {key: note.folder})
+        const isActive = (index === _index)
+        const key = `${note.storage}-${note.key}`
+        const dateDisplay = moment(note.updatedAt).fromNow()
+
         return (
           <NoteItem
+            isActive={isActive}
             note={note}
-            key={`${note.storage}-${note.key}`}
-            storage={storage}
-            folder={folder}
-            isActive={index === _index}
-            onClick={(e) => this.props.handleNoteClick(e, _index)}
+            dateDisplay={dateDisplay}
+            key={key}
+            handleNoteClick={(e) => this.props.handleNoteClick(e, _index)}
+            handleNoteContextMenu={() => ''}
           />
         )
       })

browser/finder/StorageSection.js

@@ -1,6 +1,7 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StorageSection.styl'
+import StorageItem from 'browser/components/StorageItem'
 
 class StorageSection extends React.Component {
   constructor (props) {
@@ -30,20 +31,17 @@ class StorageSection extends React.Component {
   render () {
     let { storage, filter } = this.props
     let folderList = storage.folders
-      .map((folder) => {
-        return (
-          <button styleName={filter.type === 'FOLDER' && filter.folder === folder.key && filter.storage === storage.key
-              ? 'folderList-item--active'
-              : 'folderList-item'
-            }
-            style={{borderColor: folder.color}}
-            key={folder.key}
-            onClick={(e) => this.handleFolderClick(e, folder)}
-          >
-            {folder.name}
-          </button>
-        )
-      })
+      .map(folder => (
+        <StorageItem
+          key={folder.key}
+          isActive={filter.type === 'FOLDER' && filter.folder === folder.key && filter.storage === storage.key}
+          handleButtonClick={(e) => this.handleFolderClick(e, folder)}
+          folderName={folder.name}
+          folderColor={folder.color}
+          isFolded={false}
+        />
+      ))
+
     return (
       <div styleName='root'>
         <div styleName='header'>

browser/finder/index.js

@@ -9,6 +9,8 @@ import styles from './FinderMain.styl'
 import StorageSection from './StorageSection'
 import NoteList from './NoteList'
 import NoteDetail from './NoteDetail'
+import SideNavFilter from 'browser/components/SideNavFilter'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 require('!!style!css!stylus?sourceMap!../main/global.styl')
 require('../lib/customMeta')
 
@@ -66,12 +68,8 @@ class FinderMain extends React.Component {
   }
 
   handleWindowBlur (e) {
-    let { filter } = this.state
-    filter.type = 'ALL'
     this.setState({
-      search: '',
-      filter,
-      index: 0
+      search: ''
     })
   }
 
@@ -97,6 +95,7 @@ class FinderMain extends React.Component {
 
     if (e.keyCode === 13) {
       this.refs.detail.saveToClipboard()
+      AwsMobileAnalyticsConfig.recordDynamitCustomEvent('COPY_FINDER')
       hideFinder()
       e.preventDefault()
     }
@@ -307,18 +306,12 @@ class FinderMain extends React.Component {
                   /> Only Markdown</label>
               </div>
             </div>
-            <button styleName={filter.type === 'ALL'
-                ? 'result-nav-menu--active'
-                : 'result-nav-menu'
-              }
-              onClick={(e) => this.handleAllNotesButtonClick(e)}
-            ><i className='fa fa-files-o fa-fw'/> All Notes</button>
-            <button styleName={filter.type === 'STARRED'
-                ? 'result-nav-menu--active'
-                : 'result-nav-menu'
-              }
-              onClick={(e) => this.handleStarredButtonClick(e)}
-            ><i className='fa fa-star fa-fw'/> Starred</button>
+            <SideNavFilter
+              isHomeActive={filter.type === 'ALL'}
+              handleAllNotesButtonClick={(e) => this.handleAllNotesButtonClick(e)}
+              isStarredActive={filter.type === 'STARRED'}
+              handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
+            />
             <div styleName='result-nav-storageList'>
               {storageList}
             </div>
@@ -356,7 +349,7 @@ function refreshData () {
 
 ReactDOM.render((
   <Provider store={store}>
-    <Finder/>
+    <Finder />
   </Provider>
 ), document.getElementById('content'), function () {
   refreshData()

browser/lib/api.js

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

browser/lib/customMeta.js

@@ -1,4 +1,3 @@
 import CodeMirror from 'codemirror'
-import _ from 'lodash'
 
 CodeMirror.modeInfo.push({name: 'Stylus', mime: 'text/x-styl', mode: 'stylus', ext: ['styl'], alias: ['styl']})

browser/lib/date-formatter.js

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

browser/lib/findNoteTitle.js

@@ -0,0 +1,33 @@
+export function findNoteTitle (value) {
+  let 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()
+    if (trimmedLine.match('```')) {
+      isInsideCodeBlock = !isInsideCodeBlock
+    }
+    if (isInsideCodeBlock === false && (trimmedLine.match(/^# +/) || trimmedNextLine.match(/^=+$/))) {
+      title = trimmedLine
+      return true
+    }
+  })
+
+  if (title === null) {
+    title = ''
+    splitted.some((line) => {
+      if (line.trim().length > 0) {
+        title = line.trim()
+        return true
+      }
+    })
+  }
+
+  return title
+}
+
+export default {
+  findNoteTitle
+}

browser/lib/htmlTextHelper.js

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

browser/lib/markdown.js

@@ -19,6 +19,7 @@ var md = markdownit({
   linkify: true,
   html: true,
   xhtmlOut: true,
+  breaks: true,
   highlight: function (str, lang) {
     if (lang === 'flowchart') {
       return `<pre class="flowchart">${str}</pre>`
@@ -56,9 +57,10 @@ md.use(math, {
     return output
   }
 })
+md.use(require('markdown-it-imsize'))
 md.use(require('markdown-it-footnote'))
 // Override task item
-md.block.ruler.at('paragraph', function (state, startLine/*, endLine*/) {
+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')

browser/lib/search.js

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

browser/main/Detail/Detail.styl

@@ -1,8 +1,5 @@
 .root
   absolute top bottom right
-  border-width 1px 0
-  border-style solid
-  border-color $ui-borderColor
 
 .empty
   height 320px
@@ -18,7 +15,6 @@
 
 body[data-theme="dark"]
   .root
-    border-color $ui-dark-borderColor
     background-color $ui-dark-backgroundColor
   .empty-message
     color $ui-dark-inactive-text-color

browser/main/Detail/DetailVars.styl

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

browser/main/Detail/FolderSelect.js

@@ -128,8 +128,8 @@ class FolderSelect extends React.Component {
   }
 
   nextOption () {
-    let { storages } = this.props
     let { optionIndex } = this.state
+    let { folders } = this.props
 
     optionIndex++
     if (optionIndex >= folders.length) optionIndex = 0
@@ -262,13 +262,11 @@ class FolderSelect extends React.Component {
           : <div styleName='idle'>
             <div styleName='idle-label'>
               <span styleName='idle-label-name'
-                style={{borderColor: currentOption.folder.color}}
+                style={{color: currentOption.folder.color}}
               >
-                {currentOption.folder.name}
-                <span styleName='idle-label-name-surfix'>in {currentOption.storage.name}</span>
+                {currentOption.folder.name} /
               </span>
             </div>
-            <i styleName='idle-caret' className='fa fa-fw fa-caret-down'/>
           </div>
         }
 

browser/main/Detail/FolderSelect.styl

@@ -7,29 +7,28 @@
   transition 0.15s
   user-select none
   &:hover
-    background-color white
-    border-color $ui-borderColor
+    background-color $ui-button--hover-backgroundColor
 
 .root--search, .root--focus
   @extend .root
-  background-color white
+  background-color $ui-noteDetail-backgroundColor = #F4F4F4
   border-color $ui-input--focus-borderColor
+  width 100px
   &:hover
-    background-color white
     border-color $ui-input--focus-borderColor
 
 .idle
   position relative
   cursor pointer
+
 .idle-label
-  absolute left top
-  padding 0 0 0 5px
   right 20px
   overflow ellipsis
 
 .idle-label-name
-  border-left solid 4px transparent
-  padding 2px 5px
+  font-size 14px
+  padding 2px
+
 .idle-label-name-surfix
   font-size 10px
   color $ui-inactive-text-color
@@ -60,9 +59,9 @@
   max-height 450px
   overflow auto
   z-index 200
+  border $ui-border
   background-color white
   border-radius 2px
-  box-shadow 2px 2px 10px gray
 
 .search-optionList-item
   height 34px
@@ -82,7 +81,7 @@
     background-color $ui-button--active-backgroundColor
     color $ui-button--active-color
 .search-optionList-item-name
-  border-left solid 4px transparent
+  border-left solid 2px transparent
   padding 2px 5px
 .search-optionList-item-name-surfix
   font-size 10px
@@ -115,8 +114,8 @@ body[data-theme="dark"]
 
   .search-optionList
     color white
+    border-color $ui-dark-borderColor
     background-color $ui-dark-button--hover-backgroundColor
-    box-shadow 2px 2px 10px black
 
   .search-optionList-item
     &:hover

browser/main/Detail/LastUpdatedString.js

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview Component for show updated date of the detail.
+ */
+import React, { PropTypes } from 'react'
+import { getLastUpdated } from 'browser/lib/date-formatter'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './LastUpdatedString.styl'
+
+const LastUpdatedString = ({ date }) => {
+  let text = ''
+
+  try {
+    text = `Last updated at ${getLastUpdated(date)}`
+  } catch (e) {
+    text = ''
+  }
+
+  return (
+    <p styleName='info-right-date'>{text}</p>
+  )
+}
+
+LastUpdatedString.propTypes = {
+  date: PropTypes.string
+}
+
+export default CSSModules(LastUpdatedString, styles)

browser/main/Detail/LastUpdatedString.styl

@@ -0,0 +1,10 @@
+.info-right-date
+  display inline
+  line-height 24px
+  padding-right 25px
+  font-size 11px
+  color $ui-button-color
+
+body[data-theme="dark"]
+  .info-right-date
+    color $ui-dark-button-color

browser/main/Detail/MarkdownNoteDetail.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './MarkdownNoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
+import TodoListPercentage from 'browser/components/TodoListPercentage'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
@@ -11,6 +12,8 @@ import ee from 'browser/main/lib/eventEmitter'
 import markdown from 'browser/lib/markdown'
 import StatusBar from '../StatusBar'
 import _ from 'lodash'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 const electron = require('electron')
 const { remote } = electron
@@ -25,15 +28,23 @@ class MarkdownNoteDetail extends React.Component {
       note: Object.assign({
         title: '',
         content: ''
-      }, props.note)
+      }, props.note),
+      isLockButtonShown: false,
+      isLocked: false
     }
     this.dispatchTimer = null
+
+    this.toggleLockButton = this.handleToggleLockButton.bind(this)
   }
 
   focus () {
     this.refs.content.focus()
   }
 
+  componentDidMount () {
+    ee.on('topbar:togglelockbutton', this.toggleLockButton)
+  }
+
   componentWillReceiveProps (nextProps) {
     if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
       if (this.saveQueue != null) this.saveNow()
@@ -50,34 +61,26 @@ class MarkdownNoteDetail extends React.Component {
     if (this.saveQueue != null) this.saveNow()
   }
 
-  findTitle (value) {
-    let splitted = value.split('\n')
-    let title = null
+  componentDidUnmount () {
+    ee.off('topbar:togglelockbutton', this.toggleLockButton)
+  }
 
-    for (let i = 0; i < splitted.length; i++) {
-      let trimmedLine = splitted[i].trim()
-      if (trimmedLine.match(/^# .+/)) {
-        title = trimmedLine.substring(1, trimmedLine.length).trim()
-        break
+  getPercentageOfCompleteTodo (noteContent) {
+    let splitted = noteContent.split('\n')
+    let numberOfTodo = 0
+    let numberOfCompletedTodo = 0
+
+    splitted.forEach((line) => {
+      let trimmedLine = line.trim()
+      if (trimmedLine.match(/^[\+\-\*] \[\s|x\] ./)) {
+        numberOfTodo++
       }
-    }
-
-    if (title == null) {
-      for (let i = 0; i < splitted.length; i++) {
-        let trimmedLine = splitted[i].trim()
-        if (trimmedLine.length > 0) {
-          title = trimmedLine
-          break
-        }
+      if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {
+        numberOfCompletedTodo++
       }
-      if (title == null) {
-        title = ''
-      }
-    }
+    })
 
-    title = markdown.strip(title)
-
-    return title
+    return Math.floor(numberOfCompletedTodo / numberOfTodo * 100)
   }
 
   handleChange (e) {
@@ -85,7 +88,7 @@ class MarkdownNoteDetail extends React.Component {
 
     note.content = this.refs.content.value
     note.tags = this.refs.tags.value
-    note.title = this.findTitle(note.content)
+    note.title = markdown.strip(findNoteTitle(note.content))
     note.updatedAt = new Date()
 
     this.setState({
@@ -114,6 +117,7 @@ class MarkdownNoteDetail extends React.Component {
           type: 'UPDATE_NOTE',
           note: note
         })
+        AwsMobileAnalyticsConfig.recordDynamitCustomEvent('EDIT_NOTE')
       })
   }
 
@@ -152,6 +156,7 @@ class MarkdownNoteDetail extends React.Component {
 
   handleStarButtonClick (e) {
     let { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
 
@@ -166,30 +171,7 @@ class MarkdownNoteDetail extends React.Component {
 
   }
 
-  handleShareButtonClick (e) {
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Export as a File',
-      click: (e) => this.handlePreferencesButtonClick(e)
-    }))
-    menu.append(new MenuItem({
-      label: 'Export to Web',
-      disabled: true,
-      click: (e) => this.handlePreferencesButtonClick(e)
-    }))
-    menu.popup(remote.getCurrentWindow())
-  }
-
-  handleContextButtonClick (e) {
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Delete',
-      click: (e) => this.handleDeleteMenuClick(e)
-    }))
-    menu.popup(remote.getCurrentWindow())
-  }
-
-  handleDeleteMenuClick (e) {
+  handleDeleteButtonClick (e) {
     let index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
       message: 'Delete a note',
@@ -214,10 +196,38 @@ class MarkdownNoteDetail extends React.Component {
     }
   }
 
+  handleFullScreenButton (e) {
+    ee.emit('editor:fullscreen')
+  }
+
+  handleLockButtonMouseDown (e) {
+    e.preventDefault()
+    ee.emit('editor:lock')
+    this.setState({ isLocked: !this.state.isLocked })
+    if (this.state.isLocked) this.focus()
+  }
+
+  getToggleLockButton () {
+    return this.state.isLocked ? 'fa-lock' : 'fa-unlock-alt'
+  }
+
   handleDeleteKeyDown (e) {
     if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
   }
 
+  handleToggleLockButton (event, noteStatus) {
+    // first argument event is not used
+    if (this.props.config.editor.switchPreview === 'BLUR' && noteStatus === 'CODE') {
+      this.setState({isLockButtonShown: true})
+    } else {
+      this.setState({isLockButtonShown: false})
+    }
+  }
+
+  handleFocus (e) {
+    this.focus()
+  }
+
   render () {
     let { data, config } = this.props
     let { note } = this.state
@@ -229,6 +239,10 @@ class MarkdownNoteDetail extends React.Component {
       >
         <div styleName='info'>
           <div styleName='info-left'>
+            <StarButton styleName='info-left-button'
+              onClick={(e) => this.handleStarButtonClick(e)}
+              isActive={note.isStarred}
+            />
             <div styleName='info-left-top'>
               <FolderSelect styleName='info-left-top-folderSelect'
                 value={this.state.note.storage + '-' + this.state.note.folder}
@@ -237,36 +251,50 @@ class MarkdownNoteDetail extends React.Component {
                 onChange={(e) => this.handleFolderChange(e)}
               />
             </div>
-            <div styleName='info-left-bottom'>
-              <TagSelect
-                styleName='info-left-bottom-tagSelect'
-                ref='tags'
-                value={this.state.note.tags}
-                onChange={(e) => this.handleChange(e)}
-              />
-            </div>
+
+            <TagSelect
+              ref='tags'
+              value={this.state.note.tags}
+              onChange={(e) => this.handleChange(e)}
+            />
+            <TodoListPercentage
+              percentageOfTodo={this.getPercentageOfCompleteTodo(note.content)}
+            />
           </div>
           <div styleName='info-right'>
-            <StarButton styleName='info-right-button'
-              onClick={(e) => this.handleStarButtonClick(e)}
-              isActive={note.isStarred}
-            />
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleShareButtonClick(e)}
-              disabled
+            {(() => {
+              const faClassName = `fa ${this.getToggleLockButton()}`
+              const lockButtonComponent =
+                <button styleName='control-lockButton'
+                  onFocus={(e) => this.handleFocus(e)}
+                  onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
+                >
+                  <i className={faClassName} styleName='lock-button' />
+                  <span styleName='control-lockButton-tooltip'>
+                    {this.state.isLocked ? 'Unlock' : 'Lock'}
+                  </span>
+                </button>
+              return (
+                this.state.isLockButtonShown ? lockButtonComponent : ''
+              )
+            })()}
+            <button styleName='control-trashButton'
+              onClick={(e) => this.handleDeleteButtonClick(e)}
             >
-              <i className='fa fa-share-alt fa-fw' />
-              <span styleName='info-right-button-tooltip'
-                style={{right: 20}}
-              >Share Note</span>
+              <svg height='14px' id='Capa_1' style={{enableBackground: 'new 0 0 753.23 753.23'}} width='14px' version='1.1' viewBox='0 0 753.23 753.23' x='0px' y='0px' xmlSpace='preserve'>
+                <g>
+                  <g id='_x34__19_'>
+                    <g>
+                      <path d='M494.308,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077c0-12.993-10.545-23.539-23.538-23.539&#xA;&#x9;&#x9;&#x9;&#x9;s-23.538,10.545-23.538,23.539v282.461C470.77,648.531,481.314,659.077,494.308,659.077z M635.538,94.154h-141.23V47.077&#xA;&#x9;&#x9;&#x9;&#x9;C494.308,21.067,473.24,0,447.23,0H306c-26.01,0-47.077,21.067-47.077,47.077v47.077h-141.23&#xA;&#x9;&#x9;&#x9;&#x9;c-26.01,0-47.077,21.067-47.077,47.077v47.077c0,25.986,21.067,47.077,47.077,47.077v423.692&#xA;&#x9;&#x9;&#x9;&#x9;c0,51.996,42.157,94.153,94.154,94.153h329.539c51.996,0,94.153-42.157,94.153-94.153V235.385&#xA;&#x9;&#x9;&#x9;&#x9;c26.01,0,47.077-21.091,47.077-47.077V141.23C682.615,115.221,661.548,94.154,635.538,94.154z M306,70.615&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993,10.545-23.539,23.538-23.539h94.154c12.993,0,23.538,10.545,23.538,23.539v23.539c-22.809,0-141.23,0-141.23,0V70.615z&#xA;&#x9;&#x9;&#x9;&#x9; M588.461,659.077c0,25.986-21.066,47.076-47.076,47.076H211.846c-26.01,0-47.077-21.09-47.077-47.076V235.385h423.692V659.077z&#xA;&#x9;&#x9;&#x9;&#x9; M612,188.308H141.23c-12.993,0-23.538-10.545-23.538-23.539s10.545-23.539,23.538-23.539H612&#xA;&#x9;&#x9;&#x9;&#x9;c12.993,0,23.538,10.545,23.538,23.539S624.993,188.308,612,188.308z M258.923,659.077c12.993,0,23.539-10.546,23.539-23.539&#xA;&#x9;&#x9;&#x9;&#x9;V353.077c0-12.993-10.545-23.539-23.539-23.539s-23.539,10.545-23.539,23.539v282.461&#xA;&#x9;&#x9;&#x9;&#x9;C235.384,648.531,245.93,659.077,258.923,659.077z M376.615,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993-10.545-23.539-23.538-23.539s-23.539,10.545-23.539,23.539v282.461C353.077,648.531,363.622,659.077,376.615,659.077z' />
+                    </g>
+                  </g>
+                </g>
+              </svg>
             </button>
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleContextButtonClick(e)}
+            <button styleName='control-fullScreenButton'
+              onMouseDown={(e) => this.handleFullScreenButton(e)}
             >
-              <i className='fa fa-ellipsis-v' />
-              <span styleName='info-right-button-tooltip'
-                style={{right: 5}}
-              >More Options</span>
+              <i className='fa fa-arrows-alt' styleName='fullScreen-button' />
             </button>
           </div>
         </div>
@@ -277,6 +305,7 @@ class MarkdownNoteDetail extends React.Component {
             styleName='body-noteEditor'
             config={config}
             value={this.state.note.content}
+            storageKey={this.state.note.storage}
             onChange={(e) => this.handleChange(e)}
             ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
           />
@@ -284,6 +313,7 @@ class MarkdownNoteDetail extends React.Component {
 
         <StatusBar
           {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+          date={note.updatedAt}
         />
       </div>
     )

browser/main/Detail/MarkdownNoteDetail.styl

@@ -1,68 +1,45 @@
-$info-height = 75px
+@import('NoteDetailInfo')
+@import('DetailVars')
 
 .root
   absolute top right bottom
   border-width 0 0 1px
   border-style solid
   border-color $ui-borderColor
+  background-color $ui-noteDetail-backgroundColor
+  box-shadow $note-detail-box-shadow
 
-.info
-  absolute top left right
-  height $info-height
-  border-bottom $ui-border
-  background-color $ui-backgroundColor
+.lock-button
+  padding-bottom 3px
 
-.info-left
-  float left
-  padding 0 5px
+.control-lockButton
+  topBarButtonLight()
 
-.info-left-top
-  height 40px
-  line-height 40px
-
-.info-left-top-folderSelect
-  display inline-block
-  height 34px
-  width 200px
-  vertical-align middle
-
-.info-left-bottom
-  height 30px
-
-.info-left-bottom-tagSelect
-  height 30px
-  line-height 30px
-
-.info-right
-  float right
-
-.info-right-button
-  width 34px
-  height 34px
-  border-radius 17px
-  navButtonColor()
-  border $ui-border
-  font-size 14px
-  margin 8px 2px
-  padding 0
-  &:active
-    border-color $ui-button--focus-borderColor
-  &:hover .info-right-button-tooltip
-    opacity 1
-  &:focus
-    border-color $ui-button--focus-borderColor
-
-.info-right-button-tooltip
+.control-lockButton-tooltip
   tooltip()
   position fixed
-  top 45px
+  pointer-events none
+  top 50px
+  z-index 200
   padding 5px
-  opacity 0
+  line-height normal
   border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.control-trashButton
+  float right
+  topBarButtonLight()
+
+.control-fullScreenButton
+  float right
+  topBarButtonLight()
 
 .body
   absolute left right
-  top $info-height
+  left $note-detail-left-margin
+  right $note-detail-right-margin
+  top $info-height + $info-margin-under-border
   bottom $statusBar-height
 
 .body-noteEditor
@@ -71,32 +48,17 @@ $info-height = 75px
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
+    box-shadow none
 
-  .info
-    border-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
+  .control-lockButton
+    topBarButtonDark()
 
-  .info-delete
-    color $ui-dark-text-color
-
-  .info-delete-confirmButton
-    colorDarkDangerButton()
-    color $ui-dark-text-color
-
-  .info-delete-cancelButton
-    colorDarkDefaultButton()
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-
-  .info-right-button
-    navDarkButtonColor()
-    border-color $ui-dark-borderColor
-    &:active
-      border-color $ui-dark-button--focus-borderColor
-    &:hover .info-right-button-tooltip
-      opacity 1
-    &:focus
-      border-color $ui-button--focus-borderColor
-
-  .info-right-button-tooltip
+  .control-lockButton-tooltip
     darkTooltip()
+
+  .control-trashButton
+    topBarButtonDark()
+
+  .control-fullScreenButton
+    topBarButtonDark()

browser/main/Detail/NoteDetailInfo.styl

@@ -0,0 +1,75 @@
+@import('DetailVars')
+
+$info-height = 60px
+$info-margin-under-border = 27px
+
+.info
+  absolute top left right
+  left $note-detail-left-margin
+  right $note-detail-right-margin
+  height $info-height
+  border-bottom $ui-border
+  background-color $ui-noteDetail-backgroundColor
+
+.info-left
+  float left
+  padding 0 5px
+  margin 0px 2px
+
+.info-left-top
+  display inline-block
+  height $info-height
+  line-height $info-height
+
+.info-left-top-folderSelect
+  display inline-block
+  padding 0 3px
+  height 34px
+  line-height 34px
+  vertical-align middle
+  border-radius 3px
+
+.info-left-button
+  width 34px
+  height 34px
+  navButtonColor()
+  color $ui-favorite-star-button-color
+  font-size 14px
+  margin 13px 2px
+  padding 0
+  border-radius 17px
+  &:hover .info-left-button-tooltip
+    opacity 1
+  &:focus
+    border-color $ui-favorite-star-button-color
+  &:active, &:active:hover
+    background-color $ui-favorite-star-button-color
+    color $ui-button--active-color
+
+.info-right
+  position absolute
+  right 0
+  top 0
+  background $ui-noteDetail-backgroundColor
+  bottom 1px
+  padding-left 30px
+
+body[data-theme="dark"]
+  .info
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
+
+  .info-delete
+    color $ui-dark-text-color
+
+  .info-delete-confirmButton
+    colorDarkDangerButton()
+    color $ui-dark-text-color
+
+  .info-delete-cancelButton
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+
+  .info-right
+    background-color $ui-dark-noteDetail-backgroundColor

browser/main/Detail/SnippetNoteDetail.js

@@ -10,10 +10,13 @@ import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
 import CodeMirror from 'codemirror'
-import SnippetTab from './SnippetTab'
+import SnippetTab from 'browser/components/SnippetTab'
 import StatusBar from '../StatusBar'
 import context from 'browser/lib/context'
 import ConfigManager from 'browser/main/lib/ConfigManager'
+import _ from 'lodash'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 function pass (name) {
   switch (name) {
@@ -74,41 +77,13 @@ class SnippetNoteDetail extends React.Component {
     if (this.saveQueue != null) this.saveNow()
   }
 
-  findTitle (value) {
-    let splitted = value.split('\n')
-    let title = null
-
-    for (let i = 0; i < splitted.length; i++) {
-      let trimmedLine = splitted[i].trim()
-      if (trimmedLine.match(/^# .+/)) {
-        title = trimmedLine.substring(1, trimmedLine.length).trim()
-        break
-      }
-    }
-
-    if (title == null) {
-      for (let i = 0; i < splitted.length; i++) {
-        let trimmedLine = splitted[i].trim()
-        if (trimmedLine.length > 0) {
-          title = trimmedLine
-          break
-        }
-      }
-      if (title == null) {
-        title = ''
-      }
-    }
-
-    return title
-  }
-
   handleChange (e) {
     let { note } = this.state
 
     note.tags = this.refs.tags.value
     note.description = this.refs.description.value
     note.updatedAt = new Date()
-    note.title = this.findTitle(note.description)
+    note.title = findNoteTitle(note.description)
 
     this.setState({
       note
@@ -136,6 +111,7 @@ class SnippetNoteDetail extends React.Component {
           type: 'UPDATE_NOTE',
           note: note
         })
+        AwsMobileAnalyticsConfig.recordDynamitCustomEvent('EDIT_NOTE')
       })
   }
 
@@ -174,6 +150,7 @@ class SnippetNoteDetail extends React.Component {
 
   handleStarButtonClick (e) {
     let { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
 
@@ -188,29 +165,7 @@ class SnippetNoteDetail extends React.Component {
 
   }
 
-  handleShareButtonClick (e) {
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Export as a File',
-      disabled: true,
-      click: (e) => this.handlePreferencesButtonClick(e)
-    }))
-    menu.append(new MenuItem({
-      label: 'Export to Web',
-      disabled: true,
-      click: (e) => this.handlePreferencesButtonClick(e)
-    }))
-    menu.popup(remote.getCurrentWindow())
-  }
-
-  handleContextButtonClick (e) {
-    context.popup([{
-      label: 'Delete',
-      click: (e) => this.handleDeleteMenuClick(e)
-    }])
-  }
-
-  handleDeleteMenuClick (e) {
+  handleDeleteButtonClick (e) {
     let index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
       message: 'Delete a note',
@@ -235,6 +190,10 @@ class SnippetNoteDetail extends React.Component {
     }
   }
 
+  handleFullScreenButton (e) {
+    ee.emit('editor:fullscreen')
+  }
+
   handleTabPlusButtonClick (e) {
     this.addSnippet()
   }
@@ -264,15 +223,15 @@ class SnippetNoteDetail extends React.Component {
   }
 
   deleteSnippetByIndex (index) {
-    let snippets = this.state.note.snippets.slice()
+    const snippets = this.state.note.snippets.slice()
     snippets.splice(index, 1)
-    this.state.note.snippets = snippets
-    let snippetIndex = this.state.snippetIndex >= snippets.length
+    const note = Object.assign({}, this.state.note, {snippets})
+    const snippetIndex = this.state.snippetIndex >= snippets.length
       ? snippets.length - 1
       : this.state.snippetIndex
-    this.setState({
-      note: this.state.note,
-      snippetIndex
+    this.setState({ note, snippetIndex }, () => {
+      this.save()
+      this.refs['code-' + this.state.snippetIndex].reload()
     })
   }
 
@@ -523,6 +482,7 @@ class SnippetNoteDetail extends React.Component {
             fontSize={editorFontSize}
             indentType={config.editor.indentType}
             indentSize={editorIndentSize}
+            keyMap={config.editor.keyMap}
             onChange={(e) => this.handleCodeChange(index)(e)}
             ref={'code-' + index}
           />
@@ -538,6 +498,10 @@ class SnippetNoteDetail extends React.Component {
       >
         <div styleName='info'>
           <div styleName='info-left'>
+            <StarButton styleName='info-left-button'
+              onClick={(e) => this.handleStarButtonClick(e)}
+              isActive={note.isStarred}
+            />
             <div styleName='info-left-top'>
               <FolderSelect styleName='info-left-top-folderSelect'
                 value={this.state.note.storage + '-' + this.state.note.folder}
@@ -546,36 +510,31 @@ class SnippetNoteDetail extends React.Component {
                 onChange={(e) => this.handleFolderChange(e)}
               />
             </div>
-            <div styleName='info-left-bottom'>
-              <TagSelect
-                styleName='info-left-bottom-tagSelect'
-                ref='tags'
-                value={this.state.note.tags}
-                onChange={(e) => this.handleChange(e)}
-              />
-            </div>
+
+            <TagSelect
+              ref='tags'
+              value={this.state.note.tags}
+              onChange={(e) => this.handleChange(e)}
+            />
           </div>
           <div styleName='info-right'>
-            <StarButton styleName='info-right-button'
-              onClick={(e) => this.handleStarButtonClick(e)}
-              isActive={note.isStarred}
-            />
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleShareButtonClick(e)}
-              disabled
+            <button styleName='control-trashButton'
+              onClick={(e) => this.handleDeleteButtonClick(e)}
             >
-              <i className='fa fa-share-alt fa-fw'/>
-              <span styleName='info-right-button-tooltip'
-                style={{right: 20}}
-              >Share Note</span>
+              <svg height='14px' id='Capa_1' style={{enableBackground: 'new 0 0 753.23 753.23'}} width='14px' version='1.1' viewBox='0 0 753.23 753.23' x='0px' y='0px' xmlSpace='preserve'>
+                <g>
+                  <g id='_x34__19_'>
+                    <g>
+                      <path d='M494.308,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077c0-12.993-10.545-23.539-23.538-23.539&#xA;&#x9;&#x9;&#x9;&#x9;s-23.538,10.545-23.538,23.539v282.461C470.77,648.531,481.314,659.077,494.308,659.077z M635.538,94.154h-141.23V47.077&#xA;&#x9;&#x9;&#x9;&#x9;C494.308,21.067,473.24,0,447.23,0H306c-26.01,0-47.077,21.067-47.077,47.077v47.077h-141.23&#xA;&#x9;&#x9;&#x9;&#x9;c-26.01,0-47.077,21.067-47.077,47.077v47.077c0,25.986,21.067,47.077,47.077,47.077v423.692&#xA;&#x9;&#x9;&#x9;&#x9;c0,51.996,42.157,94.153,94.154,94.153h329.539c51.996,0,94.153-42.157,94.153-94.153V235.385&#xA;&#x9;&#x9;&#x9;&#x9;c26.01,0,47.077-21.091,47.077-47.077V141.23C682.615,115.221,661.548,94.154,635.538,94.154z M306,70.615&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993,10.545-23.539,23.538-23.539h94.154c12.993,0,23.538,10.545,23.538,23.539v23.539c-22.809,0-141.23,0-141.23,0V70.615z&#xA;&#x9;&#x9;&#x9;&#x9; M588.461,659.077c0,25.986-21.066,47.076-47.076,47.076H211.846c-26.01,0-47.077-21.09-47.077-47.076V235.385h423.692V659.077z&#xA;&#x9;&#x9;&#x9;&#x9; M612,188.308H141.23c-12.993,0-23.538-10.545-23.538-23.539s10.545-23.539,23.538-23.539H612&#xA;&#x9;&#x9;&#x9;&#x9;c12.993,0,23.538,10.545,23.538,23.539S624.993,188.308,612,188.308z M258.923,659.077c12.993,0,23.539-10.546,23.539-23.539&#xA;&#x9;&#x9;&#x9;&#x9;V353.077c0-12.993-10.545-23.539-23.539-23.539s-23.539,10.545-23.539,23.539v282.461&#xA;&#x9;&#x9;&#x9;&#x9;C235.384,648.531,245.93,659.077,258.923,659.077z M376.615,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993-10.545-23.539-23.538-23.539s-23.539,10.545-23.539,23.539v282.461C353.077,648.531,363.622,659.077,376.615,659.077z' />
+                    </g>
+                  </g>
+                </g>
+              </svg>
             </button>
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleContextButtonClick(e)}
+            <button styleName='control-fullScreenButton'
+              onMouseDown={(e) => this.handleFullScreenButton(e)}
             >
-              <i className='fa fa-ellipsis-v'/>
-              <span styleName='info-right-button-tooltip'
-                style={{right: 5}}
-              >More Options</span>
+              <i className='fa fa-arrows-alt' styleName='fullScreen-button' />
             </button>
           </div>
         </div>
@@ -600,7 +559,7 @@ class SnippetNoteDetail extends React.Component {
             <button styleName='plusButton'
               onClick={(e) => this.handleTabPlusButtonClick(e)}
             >
-              <i className='fa fa-plus'/>
+              <i className='fa fa-plus' />
             </button>
           </div>
           {viewList}
@@ -614,24 +573,25 @@ class SnippetNoteDetail extends React.Component {
               ? 'Select Syntax...'
               : this.state.note.snippets[this.state.snippetIndex].mode
             }&nbsp;
-            <i className='fa fa-caret-down'/>
+            <i className='fa fa-caret-down' />
           </button>
           <button
             onClick={(e) => this.handleIndentTypeButtonClick(e)}
           >
             Indent: {config.editor.indentType}&nbsp;
-            <i className='fa fa-caret-down'/>
+            <i className='fa fa-caret-down' />
           </button>
           <button
             onClick={(e) => this.handleIndentSizeButtonClick(e)}
           >
             size: {config.editor.indentSize}&nbsp;
-            <i className='fa fa-caret-down'/>
+            <i className='fa fa-caret-down' />
           </button>
         </div>
 
         <StatusBar
           {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+          date={note.updatedAt}
         />
       </div>
     )

browser/main/Detail/SnippetNoteDetail.styl

@@ -1,74 +1,28 @@
-$info-height = 75px
+@import('NoteDetailInfo')
+@import('DetailVars')
 
 .root
   absolute top bottom right
   border-width 0 0 1px
   border-style solid
   border-color $ui-borderColor
-
-.info
-  absolute top left right
-  height $info-height
-  border-bottom $ui-border
-  background-color $ui-backgroundColor
-
-.info-left
-  float left
-  padding 0 5px
-
-.info-left-top
-  height 40px
-  line-height 40px
-
-.info-left-top-folderSelect
-  display inline-block
-  height 34px
-  width 200px
-  vertical-align middle
-
-.info-left-bottom
-  height 30px
-
-.info-left-bottom-tagSelect
-  height 30px
-  line-height 30px
-
-.info-right
-  float right
-
-.info-right-button
-  width 34px
-  height 34px
-  border-radius 17px
-  navButtonColor()
-  border $ui-border
-  font-size 14px
-  margin 8px 2px
-  padding 0
-  &:active
-    border-color $ui-button--focus-borderColor
-  &:hover .info-right-button-tooltip
-    opacity 1
-  &:focus
-    border-color $ui-button--focus-borderColor
-.info-right-button-tooltip
-  tooltip()
-  position fixed
-  top 45px
-  padding 5px
-  opacity 0
+  background-color $ui-noteDetail-backgroundColor
+  box-shadow $note-detail-box-shadow
 
 .body
   absolute left right
-  top $info-height
+  left $note-detail-left-margin
+  right $note-detail-right-margin
+  top $info-height + $info-margin-under-border
   bottom $statusBar-height
+  background-color $ui-noteDetail-backgroundColor
 
 .body .description
   absolute top left right
   height 80px
-  border-bottom $ui-border
 
 .body .description textarea
+  outline none
   display block
   height 100%
   width 100%
@@ -76,20 +30,19 @@ $info-height = 75px
   border none
   padding 10px
   line-height 1.6
+  background-color $ui-noteDetail-backgroundColor
 
 .tabList
   absolute left right
   top 80px
   height 30px
-  border-bottom $ui-border
   display flex
-  background-color $ui-backgroundColor
+  background-color $ui-noteDetail-backgroundColor
 
 .tabList .list
   flex 1
   display flex
   overflow hidden
-  border-right $ui-border
 
 .tabList .plusButton
   navButtonColor()
@@ -97,68 +50,46 @@ $info-height = 75px
 
 .tabView
   absolute left right bottom
-  top 110px
+  top 130px
 
 .tabView-content
   absolute top left right bottom
 
 .override
   absolute bottom left
+  left 60px
   height 23px
   z-index 1
   button
     navButtonColor()
     height 24px
-    border-width 0 1px 0 0
-    border-style solid
-    border-color $ui-borderColor
     &:active .update-icon
       color white
 
+.control-trashButton
+  float right
+  topBarButtonLight()
+
+.control-fullScreenButton
+  float right
+  topBarButtonLight()
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
+    box-shadow none
 
-  .info
-    border-bottom-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
-
-  .info-delete
-    color $ui-dark-text-color
-
-  .info-delete-confirmButton
-    colorDarkDangerButton()
-    color $ui-dark-text-color
-
-  .info-delete-cancelButton
-    colorDarkDefaultButton()
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-
-  .info-right-button
-    navDarkButtonColor()
-    border-color $ui-dark-borderColor
-    &:active
-      border-color $ui-dark-button--focus-borderColor
-    &:hover .info-right-button-tooltip
-      opacity 1
-    &:focus
-      border-color $ui-button--focus-borderColor
-
-  .info-right-button-tooltip
-    darkTooltip()
-
-  .body .description
-    border-bottom-color $ui-dark-borderColor
+  .body
+    background-color $ui-dark-noteDetail-backgroundColor
 
   .body .description textarea
-    background-color $ui-dark-button--hover-backgroundColor
-    color white
+    background-color $ui-dark-noteDetail-backgroundColor
+    color $ui-dark-text-color
 
   .tabList
     background-color $ui-button--active-backgroundColor
-    border-bottom-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
 
   .tabList .list
     border-color $ui-dark-borderColor
@@ -168,3 +99,13 @@ body[data-theme="dark"]
   .override
     button
       border-color $ui-dark-borderColor
+      &:hover
+        background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+        transition 0.15s
+        color $ui-dark-text-color
+
+  .control-trashButton
+    topBarButtonDark()
+
+  .control-fullScreenButton
+    topBarButtonDark()

browser/main/Detail/StarButton.js

@@ -53,7 +53,6 @@ class StarButton extends React.Component {
             : 'fa fa-star-o'
           }
         />
-        <span styleName='tooltip'>Star Note</span>
       </button>
     )
   }

browser/main/Detail/StarButton.styl

@@ -1,27 +1,47 @@
 .root
-  position relative
+  left 7px
+  top 0
   padding 0
+  color alpha($ui-favorite-star-button-color, 60%)
   &:hover
-    .icon
-      transform rotate(-72deg)
-    .tooltip
-      opacity 1
+    transition 0.15s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-favorite-star-button-color
+  &:active
+    transition 0.15s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-favorite-star-button-color
 
 .root--active
   @extend .root
-  color $brand-color
+  color $ui-favorite-star-button-color
   &:hover
-    color $brand-color !important
-  .icon
-    transform rotate(-72deg)
+    transition 0.15s
+    color $ui-favorite-star-button-color
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+  &:active
+    transition 0.15s
+    color $ui-favorite-star-button-color
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+
 .icon
   transition transform 0.15s
 
-.tooltip
-  tooltip()
-  position fixed
-  top 45px
-  right 65px
-  padding 5px
-  opacity 0
-  border-radius 2px
+body[data-theme="dark"]
+  .root
+    &:hover
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-favorite-star-button-color
+    &:active
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-favorite-star-button-color
+
+  .root--active
+    @extend .root
+    color $ui-favorite-star-button-color
+    &:hover
+      transition 0.15s
+      color $ui-favorite-star-button-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)

browser/main/Detail/TagSelect.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TagSelect.styl'
 import _ from 'lodash'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 class TagSelect extends React.Component {
   constructor (props) {
@@ -56,6 +57,7 @@ class TagSelect extends React.Component {
   }
 
   submitTag () {
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_TAG')
     let { value } = this.props
     let newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')
 
@@ -107,12 +109,12 @@ class TagSelect extends React.Component {
           <span styleName='tag'
             key={tag}
           >
+            <span styleName='tag-label'>#{tag}</span>
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
             >
-              <i className='fa fa-times fa-fw'/>
+              <i className='fa fa-times fa-fw tag-removeButton-icon' />
             </button>
-            <span styleName='tag-label'>{tag}</span>
           </span>
         )
       })
@@ -125,10 +127,7 @@ class TagSelect extends React.Component {
         }
         styleName='root'
       >
-        <i styleName='icon'
-          className='fa fa-tags'
-        />
-          {tagList}
+        {tagList}
         <input styleName='newTag'
           ref='newTag'
           value={this.state.newTag}
@@ -136,7 +135,6 @@ class TagSelect extends React.Component {
           onChange={(e) => this.handleNewTagInputChange(e)}
           onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
         />
-
       </div>
     )
   }

browser/main/Detail/TagSelect.styl

@@ -1,46 +1,47 @@
 .root
-  position relative
-  user-select none
-
-.icon
   display inline-block
-  width 30px
+  top 19px
+  user-select none
   vertical-align middle
-  text-align center
-  color $ui-button-color
+  width 300px
+  overflow-x scroll
+  white-space nowrap
+
+.root::-webkit-scrollbar
+  display none
 
 .tag
   display inline-block
-  margin 0 2px
+  margin 1px 3px
+  padding 0
   vertical-align middle
   height 20px
-  background-color white
+  background-color alpha($ui-tag-backgroundColor, 10%)
   border-radius 3px
   overflow hidden
   clearfix()
 
 .tag-removeButton
-  float left
+  float right
   height 20px
   width 18px
   margin 0
   padding 0
   border-style solid
-  border-color $ui-button--focus-borderColor
-  border-width 0 0 0 3px
+  border-width 0
+  border-radius 20px
   line-height 18px
   background-color transparent
   color $ui-button-color
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-  &:active, &:active:hover
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
-    border-color $ui-button--focus-borderColor
-  &:focus
-    border-color $ui-button--focus-borderColor
+
+.tag-removeButton-icon
+  width 5px
+  padding-right 4px
 
 .tag-label
+  font-size 11px
+  font-weight 600
+  color: alpha($ui-text-color, 80%)
   float left
   height 20px
   line-height 20px
@@ -53,21 +54,13 @@
   height 24px
   box-sizing borde-box
   border none
-  border-bottom $ui-border
   background-color transparent
   outline none
   padding 0 4px
-  &:focus
-    border-color $ui-input--focus-borderColor = #369DCD
-  &:disabled
-    background-color $ui-input--disabled-backgroundColor = #DDD
 
 body[data-theme="dark"]
-  .icon
-    color $ui-dark-button-color
-
   .tag
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color alpha($ui-dark-tag-backgroundColor, 60%)
 
   .tag-removeButton
     border-color $ui-button--focus-borderColor
@@ -78,10 +71,6 @@ body[data-theme="dark"]
     color $ui-dark-text-color
 
   .newTag
-    border-color $ui-dark-borderColor
+    border-color none
     background-color transparent
-    color $ui-dark-text-color
-    &:focus
-      border-color $ui-input--focus-borderColor = #369DCD
-    &:disabled
-      background-color $ui-input--disabled-backgroundColor = #DDD
+    color $ui-dark-text-color

browser/main/Detail/index.js

@@ -17,7 +17,7 @@ class Detail extends React.Component {
       this.refs.root != null && this.refs.root.focus()
     }
     this.deleteHandler = () => {
-      this.refs.root != null && this.refs.root.handleDeleteMenuClick()
+      this.refs.root != null && this.refs.root.handleDeleteButtonClick()
     }
   }
 

browser/main/Main.js

@@ -12,6 +12,8 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 import modal from 'browser/main/lib/modal'
 import InitModal from 'browser/main/modals/InitModal'
 import mixpanel from 'browser/main/lib/mixpanel'
+import mobileAnalytics from 'browser/main/lib/awsMobileAnalyticsConfig'
+import eventEmitter from 'browser/main/lib/eventEmitter'
 
 function focused () {
   mixpanel.track('MAIN_FOCUSED')
@@ -21,14 +23,23 @@ class Main extends React.Component {
   constructor (props) {
     super(props)
 
+    if (process.env.NODE_ENV === 'production') {
+      mobileAnalytics.initAwsMobileAnalytics()
+    }
+
     let { config } = props
 
     this.state = {
       isRightSliderFocused: false,
       listWidth: config.listWidth,
-      navWidth: config.listWidth,
-      isLeftSliderFocused: false
+      navWidth: config.navWidth,
+      isLeftSliderFocused: false,
+      fullScreen: false,
+      noteDetailWidth: 0,
+      mainBodyWidth: 0
     }
+
+    this.toggleFullScreen = () => this.handleFullScreenButton()
   }
 
   getChildContext () {
@@ -63,11 +74,13 @@ class Main extends React.Component {
         }
       })
 
+    eventEmitter.on('editor:fullscreen', this.toggleFullScreen)
     window.addEventListener('focus', focused)
   }
 
   componentWillUnmount () {
     window.removeEventListener('focus', focused)
+    eventEmitter.off('editor:fullscreen', this.toggleFullScreen)
   }
 
   handleLeftSlideMouseDown (e) {
@@ -85,6 +98,7 @@ class Main extends React.Component {
   }
 
   handleMouseUp (e) {
+    // Change width of NoteList component.
     if (this.state.isRightSliderFocused) {
       this.setState({
         isRightSliderFocused: false
@@ -99,6 +113,8 @@ class Main extends React.Component {
         })
       })
     }
+
+    // Change width of SideNav component.
     if (this.state.isLeftSliderFocused) {
       this.setState({
         isLeftSliderFocused: false
@@ -106,10 +122,10 @@ class Main extends React.Component {
         let { dispatch } = this.props
         let navWidth = this.state.navWidth
         // TODO: ConfigManager should dispatch itself.
-        ConfigManager.set({listWidth: navWidth})
+        ConfigManager.set({ navWidth })
         dispatch({
           type: 'SET_NAV_WIDTH',
-          listWidth: navWidth
+          navWidth
         })
       })
     }
@@ -141,6 +157,31 @@ class Main extends React.Component {
     }
   }
 
+  handleFullScreenButton (e) {
+    this.setState({ fullScreen: !this.state.fullScreen }, () => {
+      const noteDetail = document.querySelector('.NoteDetail')
+      const mainBody = document.querySelector('#main-body')
+
+      if (this.state.fullScreen) {
+        this.hideLeftLists(noteDetail, mainBody)
+      } else {
+        this.showLeftLists(noteDetail, mainBody)
+      }
+    })
+  }
+
+  hideLeftLists (noteDetail, mainBody) {
+    this.state.noteDetailWidth = noteDetail.style.left
+    this.state.mainBodyWidth = mainBody.style.left
+    noteDetail.style.left = '0px'
+    mainBody.style.left = '0px'
+  }
+
+  showLeftLists (noteDetail, mainBody) {
+    noteDetail.style.left = this.state.noteDetailWidth
+    mainBody.style.left = this.state.mainBodyWidth
+  }
+
   render () {
     let { config } = this.props
 
@@ -162,14 +203,15 @@ class Main extends React.Component {
         />
         {!config.isSideNavFolded &&
           <div styleName={this.state.isLeftSliderFocused ? 'slider--active' : 'slider'}
-            style={{left: this.state.navWidth - 1}}
+            style={{left: this.state.navWidth}}
             onMouseDown={(e) => this.handleLeftSlideMouseDown(e)}
             draggable='false'
           >
-            <div styleName='slider-hitbox'/>
+            <div styleName='slider-hitbox' />
           </div>
         }
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
+          id='main-body'
           ref='body'
           style={{left: config.isSideNavFolded ? 44 : this.state.navWidth}}
         >
@@ -191,15 +233,15 @@ class Main extends React.Component {
               'location'
             ])}
           />
-          <div styleName={this.state.isRightSliderFocused ? 'slider--active' : 'slider'}
-            style={{left: this.state.listWidth}}
+          <div styleName={this.state.isRightSliderFocused ? 'slider-right--active' : 'slider-right'}
+            style={{left: this.state.listWidth - 1}}
             onMouseDown={(e) => this.handleRightSlideMouseDown(e)}
             draggable='false'
           >
             <div styleName='slider-hitbox' />
           </div>
           <Detail
-            style={{left: this.state.listWidth + 1}}
+            style={{left: this.state.listWidth}}
             {..._.pick(this.props, [
               'dispatch',
               'data',

browser/main/Main.styl

@@ -11,15 +11,20 @@
 
 .slider
   absolute top bottom
+  top -2px
+  width 0
+  z-index 0
+
+.slider-right
+  @extend .slider
   width 1px
-  background-color $ui-borderColor
-  border-width 0
-  border-style solid
-  border-color $ui-borderColor
+  z-index 0
 
 .slider--active
   @extend .slider
-  background-color $ui-button--active-backgroundColor
+
+.slider-right--active
+  @extend .slider-right
 
 .slider-hitbox
   absolute top bottom left right
@@ -33,9 +38,6 @@ body[data-theme="dark"]
   .root
     absolute top left bottom right
 
-  .slider
-    background-color $ui-dark-borderColor
-    border-color $ui-dark-borderColor
-
-  .slider--active
-    background-color $ui-button--active-backgroundColor
+  .slider-right
+  .slider-right--active
+    box-shadow none

browser/main/NoteDetail/ShareButton.js

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

browser/main/NoteList/NoteList.styl

@@ -1,225 +1,81 @@
+$control-height = 30px
+
 .root
   absolute left bottom
-  border-top $ui-border
   top $topBar-height - 1
+  background-color $ui-noteList-backgroundColor
 
 .control
   absolute top left right
   user-select none
-  height 25px
-  font-size 10px
-  border-bottom $ui-border
+  height $control-height
+  font-size 12px
   line-height 25px
   display flex
-  background-color $ui-backgroundColor
+  background-color $ui-noteList-backgroundColor
   color $ui-inactive-text-color
 
 .control-sortBy
   flex 1
-  padding-left 5px
+  padding-left 25px
 
 .control-sortBy-select
-  margin-left 5px
+  appearance: none;
+  margin-left 3px
+  color $ui-inactive-text-color
   padding 0
   border none
   background-color transparent
+  outline none
+  cursor pointer
   font-size 10px
+  &:hover
+    transition 0.2s
+    color $ui-text-color
 
 .control-button
   width 25px
   padding 0
   background-color transparent
   border none
-  color $ui-inactive-text-color
+  color alpha($ui-inactive-text-color, 60%)
   transition 0.15s
   &:active, &:active:hover
-    color $ui-active-color
+    color $ui-inactive-text-color
   &:hover
-    color $ui-text-color
-    .control-button-tooltip
-      opacity 1
+    color $ui-inactive-text-color
 
 .control-button--active
   @extend .control-button
-  color $ui-active-color
+  color $ui-inactive-text-color
   &:hover
-    color $ui-active-color
-
-.control-button-tooltip
-  tooltip()
-  position absolute
-  top 20px
-  right 5px
-  padding 5px
-  opacity 0
-  white-space nowrap
-  border-radius 2px
-  z-index 1
+    color $ui-inactive-text-color
 
 .list
   absolute left right bottom
-  top 24px
+  top $control-height
   overflow auto
 
-.item
-  position relative
-  border-bottom $ui-border
-  padding 2px 5px
-  user-select none
-  cursor pointer
-  transition background-color 0.15s
-  &:hover
-    background-color alpha($ui-active-color, 20%)
-  &:active
-    background-color $ui-active-color
-    color white
-    .item-title
-    .item-title-empty
-    .item-title-icon
-    .item-bottom-tagIcon
-    .item-bottom-tagList-empty
-    .item-bottom-time
-      color white
-    .item-bottom-tagList-item
-      background-color transparent
-      color white
-
-.item--active
-  @extend .item
-  background-color $ui-active-color
-  color white
-  .item-title
-  .item-title-empty
-  .item-title-icon
-  .item-bottom-tagIcon
-  .item-bottom-tagList-empty
-  .item-bottom-time
-    color white
-  .item-bottom-tagList-item
-    background-color transparent
-    color white
-  &:hover
-    background-color $ui-active-color
-
-.item-border
-  absolute top bottom left right
-  border-style solid
-  border-width 2px
-  border-color transparent
-  transition 0.15s
-
-.item-title
-  height 24px
-  box-sizing border-box
-  line-height 24px
-  padding 0
-  overflow ellipsis
-  color $ui-text-color
-
-.item-title-icon
-  font-size 12px
-  color $ui-inactive-text-color
-  padding-right 3px
-
-.item-title-empty
-  font-weight normal
-  color $ui-inactive-text-color
-
-.item-bottom
-  margin-top 2px
-  height 20px
-  font-size 12px
-  line-height 20px
-  overflow ellipsis
-  display flex
-
-.item-bottom-tagIcon
-  vertical-align middle
-  color $ui-button-color
-  height 20px
-  line-height 20px
-
-.item-bottom-tagList
-  flex 1
-  overflow ellipsis
-  line-height 20px
-
-.item-bottom-tagList-item
-  margin 0 4px
-  padding 0 4px
-  height 20px
-  box-sizing border-box
-  border-radius 3px
-  vertical-align middle
-  border-style solid
-  border-color $ui-button--focus-borderColor
-  border-width 0 0 0 3px
-  background-color $ui-backgroundColor
-  color $ui-text-color
-
-.item-bottom-tagList-empty
-  color $ui-inactive-text-color
-  vertical-align middle
-  font-size 10px
-  margin-left 5px
-
-.item-bottom-time
-  color $ui-inactive-text-color
-  margin-left 5px
-  font-size 10px
-
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
-
-  .item
-    border-color $ui-dark-borderColor
-    &:hover
-      background-color alpha($ui-active-color, 20%)
-
-  .item--active
-    @extend .item
-    border-color $ui-dark-borderColor
-    .item-title
-      color white
-    .item-bottom-tagList-item
-      background-color transparent
-      color white
-    .item-bottom-tagList-empty
-      color white
-    &:hover
-      background-color $ui-active-color
-
-  .item-title
-    color $ui-dark-text-color
-
-  .item-title-icon
-    color $ui-darkinactive-text-color
-
-  .item-title-empty
-    color $ui-dark-inactive-text-color
-
-  .item-bottom-tagIcon
-    color $ui-dark-button-color
-
-  .item-bottom-tagList-item
-    border-color $ui-dark-button--focus-borderColor
-    background-color $ui-dark-button--hover-backgroundColor
-    color $ui-dark-text-color
-
-  .item-bottom-tagList-empty
-    color $ui-inactive-text-color
-    vertical-align middle
+    background-color $ui-dark-noteList-backgroundColor
 
   .control
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteList-backgroundColor
     border-color $ui-dark-borderColor
+
   .control-sortBy-select
-    color $ui-dark-text-color
+    &:hover
+      transition 0.2s
+      color $ui-dark-text-color
 
   .control-button
     color $ui-dark-inactive-text-color
     &:hover
       color $ui-dark-text-color
-
+  
+  .control-button--active
+    color $ui-dark-text-color
+    &:active
+      color $ui-dark-text-color

browser/main/NoteList/index.js

@@ -6,6 +6,9 @@ import _ from 'lodash'
 import ee from 'browser/main/lib/eventEmitter'
 import dataApi from 'browser/main/lib/dataApi'
 import ConfigManager from 'browser/main/lib/ConfigManager'
+import NoteItem from 'browser/components/NoteItem'
+import NoteItemSimple from 'browser/components/NoteItemSimple'
+import searchFromNotes from 'browser/lib/search'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -36,6 +39,13 @@ class NoteList extends React.Component {
     this.focusHandler = () => {
       this.refs.list.focus()
     }
+    this.alertIfSnippetHandler = () => {
+      this.alertIfSnippet()
+    }
+
+    this.jumpToTopHandler = () => {
+      this.jumpToTop()
+    }
 
     this.state = {
     }
@@ -46,6 +56,9 @@ class NoteList extends React.Component {
     ee.on('list:next', this.selectNextNoteHandler)
     ee.on('list:prior', this.selectPriorNoteHandler)
     ee.on('list:focus', this.focusHandler)
+    ee.on('list:isMarkdownNote', this.alertIfSnippetHandler)
+    ee.on('list:top', this.jumpToTopHandler)
+    ee.on('list:jumpToTop', this.jumpToTopHandler)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -64,6 +77,9 @@ class NoteList extends React.Component {
     ee.off('list:next', this.selectNextNoteHandler)
     ee.off('list:prior', this.selectPriorNoteHandler)
     ee.off('list:focus', this.focusHandler)
+    ee.off('list:isMarkdownNote', this.alertIfSnippetHandler)
+    ee.off('list:top', this.jumpToTopHandler)
+    ee.off('list:jumpToTop', this.jumpToTopHandler)
   }
 
   componentDidUpdate (prevProps) {
@@ -187,6 +203,7 @@ class NoteList extends React.Component {
 
   getNotes () {
     let { data, params, location } = this.props
+    let { router } = this.context
 
     if (location.pathname.match(/\/home/)) {
       return data.noteMap.map((note) => note)
@@ -197,6 +214,14 @@ class NoteList extends React.Component {
         .map((uniqueKey) => data.noteMap.get(uniqueKey))
     }
 
+    if (location.pathname.match(/\/searched/)) {
+      const searchInputText = document.getElementsByClassName('searchInput')[0].value
+      if (searchInputText === '') {
+        router.push('/home')
+      }
+      return searchFromNotes(this.props.data, searchInputText)
+    }
+
     let storageKey = params.storageKey
     let folderKey = params.folderKey
     let storage = data.storageMap.get(storageKey)
@@ -303,8 +328,45 @@ class NoteList extends React.Component {
     })
   }
 
+  alertIfSnippet () {
+    let { location } = this.props
+    const targetIndex = _.findIndex(this.notes, (note) => {
+      return `${note.storage}-${note.key}` === location.query.key
+    })
+    if (this.notes[targetIndex].type === 'SNIPPET_NOTE') {
+      dialog.showMessageBox(remote.getCurrentWindow(), {
+        type: 'warning',
+        message: 'Sorry!',
+        detail: 'md/text import is available only a markdown note.',
+        buttons: ['OK', 'Cancel']
+      })
+    }
+  }
+
+  jumpToTop () {
+    if (this.notes === null || this.notes.length === 0) {
+      return
+    }
+    let { router } = this.context
+    let { location } = this.props
+
+    const targetIndex = 0
+
+    router.push({
+      pathname: location.pathname,
+      query: {
+        key: this.notes[targetIndex].storage + '-' + this.notes[targetIndex].key
+      }
+    })
+  }
+
+  handleDragStart (e, note) {
+    const noteData = JSON.stringify(note)
+    e.dataTransfer.setData('note', noteData)
+  }
+
   render () {
-    let { location, notes, config } = this.props
+    let { location, notes, config, dispatch } = this.props
     let sortFunc = config.sortBy === 'CREATED_AT'
       ? sortByCreatedAt
       : config.sortBy === 'ALPHABETICAL'
@@ -314,57 +376,42 @@ class NoteList extends React.Component {
       .sort(sortFunc)
 
     let noteList = notes
-      .map((note) => {
-        if (note == null) return null
-        let tagElements = _.isArray(note.tags)
-          ? note.tags.map((tag) => {
-            return (
-              <span styleName='item-bottom-tagList-item'
-                key={tag}>
-                {tag}
-              </span>
-            )
-          })
-          : []
-        let isActive = location.query.key === note.storage + '-' + note.key
+      .map(note => {
+        if (note == null) {
+          return null
+        }
+
+        const isDefault = config.listStyle === 'DEFAULT'
+        const isActive = location.query.key === note.storage + '-' + note.key
+        const dateDisplay = moment(
+          config.sortBy === 'CREATED_AT'
+            ? note.createdAt : note.updatedAt
+        ).fromNow()
+        const key = `${note.storage}-${note.key}`
+
+        if (isDefault) {
+          return (
+            <NoteItem
+              isActive={isActive}
+              note={note}
+              dateDisplay={dateDisplay}
+              key={key}
+              handleNoteClick={this.handleNoteClick.bind(this)}
+              handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
+              handleDragStart={this.handleDragStart.bind(this)}
+            />
+          )
+        }
+
         return (
-          <div styleName={isActive
-              ? 'item--active'
-              : 'item'
-            }
-            key={note.storage + '-' + note.key}
-            onClick={(e) => this.handleNoteClick(e, note.storage + '-' + note.key)}
-            onContextMenu={(e) => this.handleNoteContextMenu(e, note.storage + '-' + note.key)}
-          >
-            <div styleName='item-title'>
-              {note.type === 'SNIPPET_NOTE'
-                ? <i styleName='item-title-icon' className='fa fa-fw fa-code'/>
-                : <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o'/>
-              }
-              {note.title.trim().length > 0
-                ? note.title
-                : <span styleName='item-title-empty'>Empty</span>
-              }
-            </div>
-
-            {config.listStyle === 'DEFAULT' &&
-              <div styleName='item-bottom'>
-                <i styleName='item-bottom-tagIcon'
-                  className='fa fa-tags fa-fw'
-                />
-                <div styleName='item-bottom-tagList'>
-                  {tagElements.length > 0
-                    ? tagElements
-                    : <span styleName='item-bottom-tagList-empty'>Not tagged yet</span>
-                  }
-                </div>
-
-                <div styleName='item-bottom-time'>
-                  {moment(config.sortBy === 'CREATED_AT' ? note.createdAt : note.updatedAt).fromNow()}
-                </div>
-              </div>
-            }
-          </div>
+          <NoteItemSimple
+            isActive={isActive}
+            note={note}
+            key={key}
+            handleNoteClick={this.handleNoteClick.bind(this)}
+            handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
+            handleDragStart={this.handleDragStart.bind(this)}
+          />
         )
       })
 
@@ -375,7 +422,7 @@ class NoteList extends React.Component {
       >
         <div styleName='control'>
           <div styleName='control-sortBy'>
-            Sort by
+            <i className='fa fa-bolt' />
             <select styleName='control-sortBy-select'
               value={config.sortBy}
               onChange={(e) => this.handleSortByChange(e)}
@@ -391,10 +438,7 @@ class NoteList extends React.Component {
             }
             onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
           >
-            <i className='fa fa-th-list'/>
-            <span styleName='control-button-tooltip'>
-              Default Size
-            </span>
+            <i className='fa fa-th-large' />
           </button>
           <button styleName={config.listStyle === 'SMALL'
               ? 'control-button--active'
@@ -402,10 +446,7 @@ class NoteList extends React.Component {
             }
             onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
           >
-            <i className='fa fa-list'/>
-            <span styleName='control-button-tooltip'>
-              Small Size
-            </span>
+            <i className='fa fa-list-ul' />
           </button>
         </div>
         <div styleName='list'

browser/main/SideNav/SideNav.styl

@@ -1,53 +1,34 @@
 .root
   absolute top left bottom
   width $sideNav-width
-  border-right $ui-border
-  background-color $ui-backgroundColor
+  background-color #f9f9f9
   user-select none
   color $ui-text-color
 
 .top
   height $topBar-height
-  border-bottom $ui-border
 
 .top-menu
   navButtonColor()
-  height $topBar-height - 1
-  padding 0 10px
-  font-size 14px
+  height $topBar-height
+  padding 0 15px
+  font-size 12px
   width 100%
   text-align left
+  &:hover
+    color $ui-text-color
+  &:active, &:active:hover
+    color $ui-text-color
+    background-color alpha($ui-button--active-backgroundColor, 20%)
 
 .top-menu-label
   margin-left 5px
   overflow ellipsis
 
-.menu
-  margin 0
-
-.menu-button
-  navButtonColor()
-  height 32px
-  padding 0 10px
-  font-size 14px
-  width 100%
-  text-align left
-  overflow ellipsis
-
-.menu-button--active
-  @extend .menu-button
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-
-.menu-button-label
-  margin-left 5px
-
 .storageList
   absolute left right
-  bottom 32px
-  top 120px
+  bottom 37px
+  top 160px
   overflow-y auto
 
 .storageList-empty
@@ -134,20 +115,16 @@ body[data-theme="dark"]
 
   .top-menu
     navDarkButtonColor()
-
-  .menu-button
-    navDarkButtonColor()
-
-  .menu-button--active
-    @extend .menu-button
-    background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-button--active-color
+    &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
     &:hover
-      background-color $ui-dark-button--active-backgroundColor
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
 
   .storageList-empty
     color $ui-dark-inactive-text-color
 
   .navToggle
-    navDarkButtonColor()
-
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      transition 0.15s
+      color $ui-dark-text-color

browser/main/SideNav/StorageItem.js

@@ -6,6 +6,8 @@ import modal from 'browser/main/lib/modal'
 import CreateFolderModal from 'browser/main/modals/CreateFolderModal'
 import RenameFolderModal from 'browser/main/modals/RenameFolderModal'
 import dataApi from 'browser/main/lib/dataApi'
+import StorageItemChild from 'browser/components/StorageItem'
+import eventEmitter from 'browser/main/lib/eventEmitter'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -130,38 +132,77 @@ class StorageItem extends React.Component {
     }
   }
 
+  handleDragEnter (e) {
+    e.dataTransfer.setData('defaultColor', e.target.style.backgroundColor)
+    e.target.style.backgroundColor = 'rgba(129, 130, 131, 0.08)'
+  }
+
+  handleDragLeave (e) {
+    e.target.style.opacity = '1'
+    e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor')
+  }
+
+  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}`}
+       })
+     })
+  }
+
   render () {
-    let { storage, location, isFolded, data } = this.props
+    let { storage, location, isFolded, data, dispatch } = this.props
     let { folderNoteMap } = data
     let folderList = storage.folders.map((folder) => {
-      let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key))
+      let isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
       let noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
 
       let noteCount = noteSet != null
         ? noteSet.size
         : 0
-      return <button styleName={isActive
-          ? 'folderList-item--active'
-          : 'folderList-item'
-        }
-        key={folder.key}
-        onClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
-        onContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
-      >
-        <span styleName='folderList-item-name'
-          style={{borderColor: folder.color}}
-        >
-          {isFolded ? folder.name.substring(0, 1) : folder.name}
-        </span>
-        {!isFolded &&
-          <span styleName='folderList-item-noteCount'>{noteCount}</span>
-        }
-        {isFolded &&
-          <span styleName='folderList-item-tooltip'>
-            {folder.name}
-          </span>
-        }
-      </button>
+      return (
+        <StorageItemChild
+          key={folder.key}
+          isActive={isActive}
+          handleButtonClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
+          handleContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
+          folderName={folder.name}
+          folderColor={folder.color}
+          isFolded={isFolded}
+          noteCount={noteCount}
+          handleDrop={(e) => this.handleDrop(e, storage, folder, dispatch, location)}
+          handleDragEnter={this.handleDragEnter}
+          handleDragLeave={this.handleDragLeave}
+        />
+      )
     })
 
     let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '$'))
@@ -190,7 +231,7 @@ class StorageItem extends React.Component {
             <button styleName='header-addFolderButton'
               onClick={(e) => this.handleAddFolderButtonClick(e)}
             >
-              <i className='fa fa-plus'/>
+              <i className='fa fa-plus' />
             </button>
           }
 

browser/main/SideNav/StorageItem.styl

@@ -1,139 +1,78 @@
 .root
   width 100%
   user-select none
+
 .header
   position relative
-  height 26px
+  height 25px
   width 100%
+  margin-bottom 5px
   transition 0.15s
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-  &:active
-    .header-toggleButton
-    .header-addFolderButton
-      color white
-      &:active
-        color $ui-active-color
 
 .header--active
-  @extend .header
-  .header-info
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
+  margin-bottom 5px
+  background-color $ui-button--active-backgroundColor
+  transition color background-color  0.15s
+
+.header--active
   .header-toggleButton
+    color $ui-text-color
+
+.header--active
+  .header-info
+    color $ui-text-color
+
+.header--active
   .header-addFolderButton
-    color white
-    &:active
-    &:hover
-    &:hover:active
-      color white
+    color $ui-text-color
 
 .header-toggleButton
+  navButtonColor()
   position absolute
   left 0
   width 25px
-  height 26px
+  height 25px
   padding 0
   border none
-  color $ui-inactive-text-color
-  background-color transparent
+  border-radius 50%
   &:hover
+    transition 0.2s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
-  &:active
-    color $ui-active-color
 
 .header-info
+  navButtonColor()
   display block
   width 100%
-  height 26px
-  padding-left 25px
+  height 25px
+  padding-left 23px
   padding-right 10px
-  line-height 26px
+  line-height 22px
   cursor pointer
-  font-size 14px
+  font-size 13px
   border none
   overflow ellipsis
   text-align left
-  background-color transparent
-  color $ui-inactive-text-color
-  &:active
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
+  background-color alpha($ui-button--active-backgroundColor, 20%)
 
 .header-info-path
   font-size 10px
   margin 0 5px
 
 .header-addFolderButton
+  navButtonColor()
   position absolute
   right 0
   width 25px
-  height 26px
+  height 25px
   padding 0
   border none
-  color $ui-inactive-text-color
-  background-color transparent
+  margin-right 5px
+  border-radius 50%
   &:hover
+    transition 0.2s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
-  &:active
-    color $ui-active-color
-
-.folderList-item
-  display flex
-  width 100%
-  height 26px
-  background-color transparent
-  color $ui-inactive-text-color
-  padding 0
-  margin-bottom 2px
-  text-align left
-  border none
-  overflow ellipsis
-  font-size 14px
-  &:first-child
-    margin-top 0
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-  &:active
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
-
-.folderList-item--active
-  @extend .folderList-item
-  color $ui-button--active-color
-  background-color $ui-button--active-backgroundColor
-  &:hover
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
-
-.folderList-item-name
-  display block
-  flex 1
-  padding 0 10px
-  height 26px
-  line-height 26px
-  border-width 0 0 0 6px
-  border-style solid
-  border-color transparent
-
-.folderList-item-noteCount
-  float right
-  line-height 26px
-  padding-right 5px
-  font-size 12px
-
-.folderList-item-tooltip
-  tooltip()
-  position fixed
-  padding 0 10px
-  left 44px
-  z-index 10
-  pointer-events none
-  opacity 0
-  border-top-right-radius 2px
-  border-bottom-right-radius 2px
-  height 26px
-  line-height 26px
 
 .root--folded
   @extend .root
@@ -161,22 +100,52 @@
   .header-info--folded-tooltip-path
     font-size 10px
     margin 0 5px
-  .folderList-item:hover, .folderList-item--active:hover
-    .folderList-item-tooltip
-      opacity 1
-  .folderList-item-name
-    padding-left 14px
+
 body[data-theme="dark"]
-  .header-toggleButton
-  .header-addFolderButton
-    color $ui-dark-inactive-text-color
-    &:hover
-      color $ui-dark-text-color
-    &:active
-      color $ui-dark-active-color
+  .header--active
+    background-color $ui-dark-button--active-backgroundColor
+    transition color background-color  0.15s
+
   .header--active
     .header-toggleButton
-    .header-addFolderButton
-      color white
+      color $ui-dark-text-color
+
+  .header--active
+    .header-info
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
       &:active
-        color white
+        color $ui-dark-text-color
+        background-color $ui-dark-button--active-backgroundColor  
+
+  .header--active
+    .header-addFolderButton
+      color $ui-dark-text-color
+
+  .header-toggleButton
+    &:hover
+      transition 0.2s
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+    &:active, &:active:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .header-info
+    background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+    &:hover
+      transition 0.2s
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+    &:active, &:active:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .header-addFolderButton
+    &:hover
+      transition 0.2s
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+    &:active, &:active:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor

browser/main/SideNav/index.js

@@ -5,9 +5,7 @@ import { openModal } from 'browser/main/lib/modal'
 import PreferencesModal from '../modals/PreferencesModal'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import StorageItem from './StorageItem'
-
-const electron = require('electron')
-const { remote } = electron
+import SideNavFilter from 'browser/components/SideNavFilter'
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
@@ -39,8 +37,8 @@ class SideNav extends React.Component {
     let { data, location, config, dispatch } = this.props
 
     let isFolded = config.isSideNavFolded
-    let isHomeActive = location.pathname.match(/^\/home$/)
-    let isStarredActive = location.pathname.match(/^\/starred$/)
+    let isHomeActive = !!location.pathname.match(/^\/home$/)
+    let isStarredActive = !!location.pathname.match(/^\/starred$/)
 
     let storageList = data.storageMap.map((storage, key) => {
       return <StorageItem
@@ -64,25 +62,18 @@ class SideNav extends React.Component {
           <button styleName='top-menu'
             onClick={(e) => this.handleMenuButtonClick(e)}
           >
-            <i className='fa fa-navicon fa-fw'/>
+            <i className='fa fa-navicon fa-fw' />
             <span styleName='top-menu-label'>Menu</span>
           </button>
         </div>
 
-        <div styleName='menu'>
-          <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
-            onClick={(e) => this.handleHomeButtonClick(e)}
-          >
-            <i className='fa fa-files-o fa-fw'/>
-            <span styleName='menu-button-label'>All Notes</span>
-          </button>
-          <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
-            onClick={(e) => this.handleStarredButtonClick(e)}
-          >
-            <i className='fa fa-star fa-fw'/>
-            <span styleName='menu-button-label'>Starred</span>
-          </button>
-        </div>
+        <SideNavFilter
+          isFolded={isFolded}
+          isHomeActive={isHomeActive}
+          handleAllNotesButtonClick={(e) => this.handleHomeButtonClick(e)}
+          isStarredActive={isStarredActive}
+          handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
+        />
 
         <div styleName='storageList'>
           {storageList.length > 0 ? storageList : (
@@ -93,8 +84,8 @@ class SideNav extends React.Component {
           onClick={(e) => this.handleToggleButtonClick(e)}
         >
           {isFolded
-            ? <i className='fa fa-angle-double-right'/>
-            : <i className='fa fa-angle-double-left'/>
+            ? <i className='fa fa-angle-double-right' />
+            : <i className='fa fa-angle-double-left' />
           }
         </button>
       </div>

browser/main/StatusBar/StatusBar.styl

@@ -1,8 +1,9 @@
+@import('../Detail/DetailVars')
+
 .root
   absolute bottom left right
   height $statusBar-height
-  background-color $ui-backgroundColor
-  border-top $ui-border
+  background-color $ui-noteDetail-backgroundColor
   display flex
 
 .blank
@@ -21,9 +22,6 @@
 .zoom
   navButtonColor()
   height 24px
-  border-width 0 1px
-  border-style solid
-  border-color $ui-borderColor
 
 .update
   navButtonColor()
@@ -39,11 +37,16 @@
 
 body[data-theme="dark"]
   .root
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
     border-color $ui-dark-borderColor
+    box-shadow none
 
   .zoom
     border-color $ui-dark-borderColor
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      transition 0.15s
+      color $ui-dark-text-color
 
   .help
     navButtonColor()

browser/main/StatusBar/index.js

@@ -2,12 +2,13 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
+import LastUpdatedString from '../Detail/LastUpdatedString'
 
 const electron = require('electron')
 const { remote, ipcRenderer } = electron
 const { Menu, MenuItem, dialog } = remote
 
-const zoomOptions = [0.8, 0.9, 1, 1.1, 1.2, 1.3]
+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.0]
 
 class StatusBar extends React.Component {
   updateApp () {
@@ -52,22 +53,23 @@ class StatusBar extends React.Component {
       <div className='StatusBar'
         styleName='root'
       >
-        <div styleName='blank' />
-        {status.updateReady
-          ? <button onClick={this.updateApp} styleName='update'>
-            <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
-          </button>
-          : null
-        }
-        {/*<button styleName='help'>
-          <i className='fa fa-info-circle' />
-        </button>*/}
         <button styleName='zoom'
           onClick={(e) => this.handleZoomButtonClick(e)}
         >
           <i className='fa fa-search-plus' />&nbsp;
           {Math.floor(config.zoom * 100)}%
         </button>
+
+        <div styleName='blank' />
+
+        {status.updateReady
+          ? <button onClick={this.updateApp} styleName='update'>
+            <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
+            </button>
+          : null
+        }
+
+        <LastUpdatedString date={this.props.date} />
       </div>
     )
   }
@@ -77,7 +79,8 @@ StatusBar.contextTypes = {
   status: PropTypes.shape({
     updateReady: PropTypes.bool.isRequired
   }).isRequired,
-  config: PropTypes.shape({}).isRequired
+  config: PropTypes.shape({}).isRequired,
+  date: PropTypes.string
 }
 
 StatusBar.propTypes = {

browser/main/TopBar/TopBar.styl

@@ -1,19 +1,19 @@
 .root
   position relative
-  background-color $ui-backgroundColor
+  background-color $ui-noteList-backgroundColor
   height $topBar-height - 1
+
 .root--expanded
   @extend .root
+
 $control-height = 34px
 
 .control
   position absolute
-  top 8px
+  top 13px
   left 8px
   right 8px
   height $control-height
-  border $ui-border
-  border-radius 20px
   overflow hidden
   display flex
 
@@ -28,6 +28,7 @@ $control-height = 34px
   line-height 32px
   width 35px
   color $ui-inactive-text-color
+  background-color $ui-noteList-backgroundColor
 
 .control-search-input
   display block
@@ -38,16 +39,18 @@ $control-height = 34px
     height 100%
     outline none
     border none
+    background-color $ui-noteList-backgroundColor
 
 .control-search-optionList
   position fixed
   z-index 200
-  width 275px
-  height 175px
+  width 500px
+  height 250px
   overflow-y auto
   background-color $modal-background
   border-radius 2px
-  box-shadow 2px 2px 10px gray
+  border-none
+  box-shadow 0 0 1px rgba(76,86,103,.25), 0 2px 18px rgba(31,37,50,.32)
 
 .control-search-optionList-item
   height 50px
@@ -57,49 +60,40 @@ $control-height = 34px
   cursor pointer
   overflow ellipsis
   &:hover
-    background-color alpha($ui-active-color, 10%)
+    background-color alpha(#D4D4D4, 30%)
+
 .control-search-optionList-item-folder
-  border-left 4px solid transparent
+  border-left 2px solid transparent
   padding 2px 5px
   color $ui-text-color
   overflow ellipsis
   font-size 12px
   height 16px
   margin-bottom 4px
+
 .control-search-optionList-item-folder-surfix
   font-size 10px
   margin-left 5px
   color $ui-inactive-text-color
+
 .control-search-optionList-item-type
   font-size 12px
   color $ui-inactive-text-color
   padding-right 3px
+
 .control-search-optionList-empty
   height 150px
   color $ui-inactive-text-color
   line-height 150px
   text-align center
 
-.control-contextButton
-  display block
-  width 20px
-  height $control-height - 2
-  navButtonColor()
-  border-left $ui-border
-  font-size 14px
-  line-height 28px
-  padding 0
-  &:active
-    border-color $ui-button--active-backgroundColor
-  &:hover .control-newPostButton-tooltip
-    opacity 1
-
 .control-newPostButton
   display block
-  width 36px
+  width 32px
   height $control-height - 2
   navButtonColor()
-  border-left $ui-border
+  border $ui-border
+  border-radius 32px
   font-size 14px
   line-height 28px
   padding 0
@@ -112,17 +106,18 @@ $control-height = 34px
   tooltip()
   position fixed
   pointer-events none
-  top 45px
-  left 385px
-  z-index 10
+  top 50px
+  left 433px
+  z-index 200
   padding 5px
   line-height normal
+  border-radius 2px
   opacity 0
   transition 0.1s
 
 body[data-theme="dark"]
   .root, .root--expanded
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteList-backgroundColor
 
   .control
     border-color $ui-dark-borderColor
@@ -134,11 +129,13 @@ body[data-theme="dark"]
     line-height 32px
     width 35px
     color $ui-dark-inactive-text-color
+    background-color $ui-dark-noteList-backgroundColor
 
   .control-search-input
     input
-      background-color $dark-background-color
+      background-color $ui-dark-noteList-backgroundColor
       color $ui-dark-text-color
+
   .control-search-optionList
     color white
     background-color $ui-dark-button--hover-backgroundColor
@@ -148,7 +145,7 @@ body[data-theme="dark"]
   .control-search-optionList-item
     border-color $ui-dark-borderColor
     &:hover
-      background-color lighten($ui-dark-button--hover-backgroundColor, 15%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
   .control-search-optionList-item-folder
     color $ui-dark-text-color
   .control-search-optionList-item-folder-surfix
@@ -162,11 +159,15 @@ body[data-theme="dark"]
   .control-search-optionList-empty
     color $ui-inactive-text-color
 
-  .control-contextButton,
   .control-newPostButton
-    colorDarkDefaultButton()
+    color $ui-inactive-text-color
     border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      color $ui-dark-text-color
     &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
       border-color $ui-dark-button--active-backgroundColor
 
   .control-newPostButton-tooltip

browser/main/TopBar/index.js

@@ -10,8 +10,6 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 import dataApi from 'browser/main/lib/dataApi'
 
 const OSX = window.process.platform === 'darwin'
-const { remote } = require('electron')
-const { Menu, MenuItem } = remote
 
 class TopBar extends React.Component {
   constructor (props) {
@@ -20,20 +18,26 @@ class TopBar extends React.Component {
     this.state = {
       search: '',
       searchOptions: [],
-      searchPopupOpen: false
+      isSearching: false
     }
 
     this.newNoteHandler = () => {
       this.handleNewPostButtonClick()
     }
+
+    this.focusSearchHandler = () => {
+      this.handleOnSearchFocus()
+    }
   }
 
   componentDidMount () {
     ee.on('top:new-note', this.newNoteHandler)
+    ee.on('top:focus-search', this.focusSearchHandler)
   }
 
   componentWillUnmount () {
     ee.off('top:new-note', this.newNoteHandler)
+    ee.off('top:focus-search', this.focusSearchHandler)
   }
 
   handleNewPostButtonClick (e) {
@@ -71,10 +75,10 @@ class TopBar extends React.Component {
         break
       }
     }
-    if (storage == null) alert('No storage to create a note')
+    if (storage == null) window.alert('No storage to create a note')
     let folder = _.find(storage.folders, {key: params.folderKey})
     if (folder == null) folder = storage.folders[0]
-    if (folder == null) alert('No folder to create a note')
+    if (folder == null) window.alert('No folder to create a note')
 
     return {
       storage,
@@ -83,79 +87,17 @@ class TopBar extends React.Component {
   }
 
   handleSearchChange (e) {
+    let { router } = this.context
+    router.push('/searched')
     this.setState({
       search: this.refs.searchInput.value
     })
   }
 
-  getOptions () {
-    let { data } = this.props
-    let { search } = this.state
-    let notes = data.noteMap.map((note) => note)
-    if (search.trim().length === 0) return []
-    let searchBlocks = search.split(' ')
-    searchBlocks.forEach((block) => {
-      if (block.match(/^!#.+/)) {
-        let tag = block.match(/^!#(.+)/)[1]
-        let regExp = new RegExp(_.escapeRegExp(tag), 'i')
-        notes = notes
-          .filter((note) => {
-            if (!_.isArray(note.tags)) return false
-            return note.tags.some((_tag) => {
-              return _tag.match(regExp)
-            })
-          })
-      } else if (block.match(/^!.+/)) {
-        let block = block.match(/^!(.+)/)[1]
-        let regExp = new RegExp(_.escapeRegExp(block), 'i')
-        notes = notes.filter((note) => {
-          if (!_.isArray(note.tags) || !note.tags.some((_tag) => {
-            return _tag.match(regExp)
-          })) {
-            return true
-          }
-          if (note.type === 'SNIPPET_NOTE') {
-            return !note.description.match(regExp)
-          } else if (note.type === 'MARKDOWN_NOTE') {
-            return !note.content.match(regExp)
-          }
-          return false
-        })
-      } else if (block.match(/^#.+/)) {
-        let tag = block.match(/#(.+)/)[1]
-        let regExp = new RegExp(_.escapeRegExp(tag), 'i')
-        notes = notes
-          .filter((note) => {
-            if (!_.isArray(note.tags)) return false
-            return note.tags.some((_tag) => {
-              return _tag.match(regExp)
-            })
-          })
-      } else {
-        let regExp = new RegExp(_.escapeRegExp(block), 'i')
-        notes = notes.filter((note) => {
-          if (_.isArray(note.tags) && note.tags.some((_tag) => {
-            return _tag.match(regExp)
-          })) {
-            return true
-          }
-          if (note.type === 'SNIPPET_NOTE') {
-            return note.description.match(regExp)
-          } else if (note.type === 'MARKDOWN_NOTE') {
-            return note.content.match(regExp)
-          }
-          return false
-        })
-      }
-    })
-
-    return notes
-  }
-
   handleOptionClick (uniqueKey) {
     return (e) => {
       this.setState({
-        searchPopupOpen: false
+        isSearching: false
       }, () => {
         let { location } = this.props
         hashHistory.push({
@@ -170,7 +112,7 @@ class TopBar extends React.Component {
 
   handleSearchFocus (e) {
     this.setState({
-      searchPopupOpen: true
+      isSearching: true
     })
   }
   handleSearchBlur (e) {
@@ -187,52 +129,11 @@ class TopBar extends React.Component {
     }
     if (!isStillFocused) {
       this.setState({
-        searchPopupOpen: false
+        isSearching: false
       })
     }
   }
 
-  handleContextButtonClick (e) {
-    let { config } = this.props
-
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Create Markdown Note',
-      click: (e) => this.createNote('MARKDOWN_NOTE')
-    }))
-    menu.append(new MenuItem({
-      label: 'Create Snippet Note',
-      click: (e) => this.createNote('SNIPPET_NOTE')
-    }))
-    menu.append(new MenuItem({
-      type: 'separator'
-    }))
-    menu.append(new MenuItem({
-      label: 'Change Default Note',
-      submenu: [
-        {
-          type: 'radio',
-          label: 'Markdown Note',
-          checked: config.ui.defaultNote === 'MARKDOWN_NOTE',
-          click: (e) => this.setDefaultNote('MARKDOWN_NOTE')
-        },
-        {
-          type: 'radio',
-          label: 'Snippet Note',
-          checked: config.ui.defaultNote === 'SNIPPET_NOTE',
-          click: (e) => this.setDefaultNote('SNIPPET_NOTE')
-        },
-        {
-          type: 'radio',
-          label: 'Always Ask',
-          checked: config.ui.defaultNote === 'ALWAYS_ASK',
-          click: (e) => this.setDefaultNote('ALWAYS_ASK')
-        }
-      ]
-    }))
-    menu.popup(remote.getCurrentWindow())
-  }
-
   createNote (noteType) {
     let { dispatch, location } = this.props
     if (noteType !== 'MARKDOWN_NOTE' && noteType !== 'SNIPPET_NOTE') throw new Error('Invalid note type.')
@@ -287,29 +188,16 @@ class TopBar extends React.Component {
     })
   }
 
+  handleOnSearchFocus () {
+    if (this.state.isSearching) {
+      this.refs.search.childNodes[0].blur()
+    } else {
+      this.refs.search.childNodes[0].focus()
+    }
+  }
+
   render () {
     let { config, style, data } = this.props
-    let searchOptionList = this.getOptions()
-      .map((note) => {
-        let storage = data.storageMap.get(note.storage)
-        let folder = _.find(storage.folders, {key: note.folder})
-        return <div styleName='control-search-optionList-item'
-          key={note.storage + '-' + note.key}
-          onClick={(e) => this.handleOptionClick(note.storage + '-' + note.key)(e)}
-        >
-          <div styleName='control-search-optionList-item-folder'
-            style={{borderColor: folder.color}}>
-            {folder.name}
-            <span styleName='control-search-optionList-item-folder-surfix'>in {storage.name}</span>
-          </div>
-          {note.type === 'SNIPPET_NOTE'
-            ? <i styleName='control-search-optionList-item-type' className='fa fa-code'/>
-            : <i styleName='control-search-optionList-item-type' className='fa fa-file-text-o'/>
-          }&nbsp;
-          {note.title}
-        </div>
-      })
-
     return (
       <div className='TopBar'
         styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}
@@ -317,7 +205,7 @@ class TopBar extends React.Component {
       >
         <div styleName='control'>
           <div styleName='control-search'>
-            <i styleName='control-search-icon' className='fa fa-search fa-fw'/>
+            <i styleName='control-search-icon' className='fa fa-search fa-fw' />
             <div styleName='control-search-input'
               onFocus={(e) => this.handleSearchFocus(e)}
               onBlur={(e) => this.handleSearchBlur(e)}
@@ -330,37 +218,25 @@ class TopBar extends React.Component {
                 onChange={(e) => this.handleSearchChange(e)}
                 placeholder='Search'
                 type='text'
+                className='searchInput'
               />
-              {this.state.searchPopupOpen &&
-                <div styleName='control-search-optionList'>
-                  {searchOptionList.length > 0
-                    ? searchOptionList
-                    : <div styleName='control-search-optionList-empty'>Empty List</div>
-                  }
-                </div>
-              }
             </div>
             {this.state.search > 0 &&
               <button styleName='left-search-clearButton'
                 onClick={(e) => this.handleSearchClearButton(e)}
               >
-                <i className='fa fa-times'/>
+                <i className='fa fa-times' />
               </button>
             }
 
           </div>
           <button styleName='control-newPostButton'
             onClick={(e) => this.handleNewPostButtonClick(e)}>
-            <i className='fa fa-plus'/>
+            <i className='fa fa-plus' />
             <span styleName='control-newPostButton-tooltip'>
-              New Note {OSX ? '⌘' : '^'} + n
+              Make a Note {OSX ? '⌘' : '^'} + n
             </span>
           </button>
-          <button styleName='control-contextButton'
-            onClick={(e) => this.handleContextButtonClick(e)}
-          >
-            <i className='fa fa-caret-down'/>
-          </button>
         </div>
       </div>
     )

browser/main/global.styl

@@ -1,6 +1,6 @@
 global-reset()
 
-DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif
+DEFAULT_FONTS = 'OpenSans', helvetica, arial, sans-serif
 
 html, body
   width 100%
@@ -11,7 +11,7 @@ body
   font-family DEFAULT_FONTS
   color textColor
   font-size fontSize
-  font-weight 400
+  font-weight 200
 
 button, input, select, textarea
   font-family DEFAULT_FONTS

browser/main/index.js

@@ -50,6 +50,7 @@ ReactDOM.render((
         <IndexRedirect to='/home' />
         <Route path='home' />
         <Route path='starred' />
+        <Route path='searched' />
         <Route path='storages'>
           <IndexRedirect to='/home' />
           <Route path=':storageKey'>

browser/main/lib/AwsMobileAnalyticsConfig.js

@@ -0,0 +1,37 @@
+const AWS = require('aws-sdk')
+const AMA = require('aws-sdk-mobile-analytics')
+const ConfigManager = require('browser/main/lib/ConfigManager')
+
+const mobileAnalyticsClient = new AMA.Manager({
+  appId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
+  appTitle: 'xxxxxxxxxx'
+})
+
+function initAwsMobileAnalytics () {
+  AWS.config.region = 'us-east-1'
+  AWS.config.credentials = new AWS.CognitoIdentityCredentials({
+    IdentityPoolId: 'us-east-1:xxxxxxxxxxxxxxxxxxxxxxxxx'
+  })
+
+  AWS.config.credentials.get((err) => {
+    if (!err) {
+      console.log('Cognito Identity ID: ' + AWS.config.credentials.identityId)
+    }
+  })
+  recordStaticCustomEvent()
+}
+
+function recordDynamitCustomEvent (type) {
+  mobileAnalyticsClient.recordEvent(type)
+}
+
+function recordStaticCustomEvent () {
+  mobileAnalyticsClient.recordEvent('UI_COLOR_THEME', {
+    uiColorTheme: ConfigManager.default.get().ui.theme
+  })
+}
+
+module.exports = {
+  initAwsMobileAnalytics,
+  recordDynamitCustomEvent
+}

browser/main/lib/ConfigManager.js

@@ -10,7 +10,7 @@ let isInitialized = false
 export const DEFAULT_CONFIG = {
   zoom: 1,
   isSideNavFolded: false,
-  listWidth: 250,
+  listWidth: 280,
   navWidth: 200,
   sortBy: 'UPDATED_AT', // 'CREATED_AT', 'UPDATED_AT', 'APLHABETICAL'
   listStyle: 'DEFAULT', // 'DEFAULT', 'SMALL'
@@ -25,6 +25,7 @@ export const DEFAULT_CONFIG = {
   },
   editor: {
     theme: 'default',
+    keyMap: 'sublime',
     fontSize: '14',
     fontFamily: 'Monaco, Consolas',
     indentType: 'space',
@@ -34,7 +35,7 @@ export const DEFAULT_CONFIG = {
   preview: {
     fontSize: '14',
     fontFamily: 'Lato',
-    codeBlockTheme: 'xcode',
+    codeBlockTheme: 'elegant',
     lineNumber: true
   }
 }

browser/main/lib/dataApi/copyImage.js

@@ -0,0 +1,32 @@
+const fs = require('fs')
+const path = require('path')
+const _ = require('lodash')
+const sander = require('sander')
+
+/**
+ * @description To copy an image and return the path.
+ * @param {String} filePath
+ * @param {String} storageKey
+ * @return {String} an image path
+ */
+function copyImage (filePath, storageKey) {
+  return new Promise((resolve, reject) => {
+    try {
+      const cachedStorageList = JSON.parse(localStorage.getItem('storages'))
+      if (!_.isArray(cachedStorageList)) throw new Error('Target storage doesn\'t exist.')
+      const storage = _.find(cachedStorageList, {key: storageKey})
+      if (storage === undefined) throw new Error('Target storage doesn\'t exist.')
+      const targetStorage = storage
+
+      const inputImage = fs.createReadStream(filePath)
+      const imageName = path.basename(filePath)
+      const outputImage = fs.createWriteStream(path.join(targetStorage.path, 'images', imageName))
+      inputImage.pipe(outputImage)
+      resolve(`${encodeURI(targetStorage.path)}/images/${encodeURI(imageName)}`)
+    } catch (e) {
+      return reject(e)
+    }
+  })
+}
+
+module.exports = copyImage

browser/main/lib/modal.js

@@ -15,15 +15,18 @@ 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-')
+    list.style.overflow = 'auto'
   }
 
   render () {
     return (
       <div className={'ModalBase' + (this.state.isHidden ? ' hide' : '')}>
-        <div onClick={(e) => this.close(e)} className='modalBack'/>
+        <div onClick={(e) => this.close(e)} className='modalBack' />
         {this.state.component == null ? null : (
           <Provider store={store}>
-            <this.state.component {...this.state.componentProps} close={this.close}/>
+            <this.state.component {...this.state.componentProps} close={this.close} />
           </Provider>
         )}
       </div>
@@ -33,11 +36,13 @@ class ModalBase extends React.Component {
 
 let el = document.createElement('div')
 document.body.appendChild(el)
-let modalBase = ReactDOM.render(<ModalBase/>, el)
+let 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-')
+  list.style.overflow = 'hidden'
   document.body.setAttribute('data-modal', 'open')
   modalBase.setState({component: component, componentProps: props, isHidden: false})
 }

browser/main/modals/CreateFolderModal.js

@@ -4,6 +4,8 @@ import styles from './CreateFolderModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import consts from 'browser/lib/consts'
+import ModalEscButton from 'browser/components/ModalEscButton'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 class CreateFolderModal extends React.Component {
   constructor (props) {
@@ -47,6 +49,7 @@ class CreateFolderModal extends React.Component {
   }
 
   confirm () {
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_FOLDER')
     if (this.state.name.trim().length > 0) {
       let { storage } = this.props
       let input = {
@@ -75,24 +78,23 @@ class CreateFolderModal extends React.Component {
         onKeyDown={(e) => this.handleKeyDown(e)}
       >
         <div styleName='header'>
-          <div styleName='title'>New Folder</div>
+          <div styleName='title'>Create new folder</div>
         </div>
-        <button styleName='closeButton'
-          onClick={(e) => this.handleCloseButtonClick(e)}
-        >Close</button>
-
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
         <div styleName='control'>
-          <input styleName='control-input'
-            placeholder='Folder Name'
-            ref='name'
-            value={this.state.name}
-            onChange={(e) => this.handleChange(e)}
-            onKeyDown={(e) => this.handleInputKeyDown(e)}
-          />
+          <div styleName='control-folder'>
+            <div styleName='control-folder-label'>Folder name</div>
+            <input styleName='control-folder-input'
+              ref='name'
+              value={this.state.name}
+              onChange={(e) => this.handleChange(e)}
+              onKeyDown={(e) => this.handleInputKeyDown(e)}
+            />
+          </div>
           <button styleName='control-confirmButton'
             onClick={(e) => this.handleConfirmButtonClick(e)}
           >
-            Confirm
+            Create
           </button>
         </div>
       </div>

browser/main/modals/CreateFolderModal.styl

@@ -1,47 +1,37 @@
 .root
   modal()
-  max-width 340px
+  width 500px
+  height 270px
   overflow hidden
   position relative
+  padding 0 40px
 
 .header
-  height 50px
+  height 70px
+  margin-bottom 10px
+  margin-top 20px
   font-size 18px
   line-height 50px
-  padding 0 15px
   background-color $ui-backgroundColor
-  border-bottom solid 1px $ui-borderColor
   color $ui-text-color
 
-.closeButton
-  position absolute
-  top 10px
-  right 10px
-  height 30px
-  width 0 25px
-  border $ui-border
-  border-radius 2px
+.control-folder-label
+  text-align left
+  font-size 12px
   color $ui-text-color
-  colorDefaultButton()
 
-.control
-  padding 25px 15px 15px
-  text-align center
-
-.control-input
+.control-folder-input
   display block
   height 30px
-  width 240px
+  width 420px
   padding 0 5px
-  margin 0 auto 15px
-  border none
-  border-bottom solid 1px $border-color
+  margin 10px auto 15px
+  border 1px solid #C9C9C9 // TODO: use variable.
   border-radius 2px
   background-color transparent
   outline none
   vertical-align middle
-  font-size 18px
-  text-align center
+  font-size 14px
   &:disabled
     background-color $ui-input--disabled-backgroundColor
   &:focus, &:active
@@ -49,31 +39,39 @@
 
 .control-confirmButton
   display block
+  float right
   height 30px
+  width 100px
   border none
   border-radius 2px
   padding 0 25px
-  margin 0 auto
+  margin 20px auto
+  font-size 12px
   colorPrimaryButton()
 
 body[data-theme="dark"]
   .root
     modalDark()
+    width 500px
+    height 270px
+    overflow hidden
+    position relative
+    padding 0 40px
 
   .header
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color transparent
     border-color $ui-dark-borderColor
     color $ui-dark-text-color
 
-  .closeButton
-    border-color $ui-dark-borderColor
+  .control-folder-label
     color $ui-dark-text-color
-    colorDarkDefaultButton()
 
-  .description
-    color $ui-inactive-text-color
-
-  .control-input
-    border-color $ui-dark-borderColor
+  .control-folder-input
+    border 1px solid #C9C9C9 // TODO: use variable.
     color white
 
+   .description
+    color $ui-inactive-text-color
+
+  .control-confirmButton
+    colorDarkPrimaryButton()

browser/main/modals/DeleteArticleModal.js

@@ -1,6 +1,5 @@
 import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
-import store from '../store'
 
 const electron = require('electron')
 const ipc = electron.ipcRenderer
@@ -26,20 +25,19 @@ export default class DeleteArticleModal extends React.Component {
   }
 
   handleYesButtonClick (e) {
-    // store.dispatch(destroyArticle(this.props.articleKey))
     this.props.close()
   }
 
   render () {
     return (
       <div className='DeleteArticleModal modal'>
-        <div className='title'><i className='fa fa-fw fa-trash'/> Delete an article.</div>
+        <div className='title'><i className='fa fa-fw fa-trash' /> Delete an article.</div>
 
         <div className='message'>Do you really want to delete?</div>
 
         <div className='control'>
-          <button ref='no' onClick={(e) => this.handleNoButtonClick(e)}><i className='fa fa-fw fa-close'/> No</button>
-          <button ref='yes' onClick={(e) => this.handleYesButtonClick(e)} className='danger'><i className='fa fa-fw fa-check'/> Yes</button>
+          <button ref='no' onClick={(e) => this.handleNoButtonClick(e)}><i className='fa fa-fw fa-close' /> No</button>
+          <button ref='yes' onClick={(e) => this.handleYesButtonClick(e)} className='danger'><i className='fa fa-fw fa-check' /> Yes</button>
         </div>
       </div>
     )

browser/main/modals/InitModal.js

@@ -1,11 +1,11 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InitModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import { hashHistory } from 'react-router'
 import _ from 'lodash'
-import keygen from 'browser/lib/keygen'
+import ModalEscButton from 'browser/components/ModalEscButton'
 
 const CSON = require('@rokt33r/season')
 const path = require('path')
@@ -42,10 +42,6 @@ class InitModal extends React.Component {
     }
   }
 
-  handleCloseButtonClick (e) {
-    this.props.close()
-  }
-
   handlePathChange (e) {
     this.setState({
       path: e.target.value
@@ -144,7 +140,7 @@ class InitModal extends React.Component {
               type: 'SNIPPET_NOTE',
               folder: data.storage.folders[0].key,
               title: 'Snippet note example',
-              description: 'Snippet note example\nYou can store a series of snippet as a single note like Gist.',
+              description: 'Snippet note example\nYou can store a series of snippets as a single note, like Gist.',
               snippets: [
                 {
                   name: 'example.html',
@@ -188,16 +184,10 @@ class InitModal extends React.Component {
     })
   }
 
-  handleKeyDown (e) {
-    if (e.keyCode === 27) {
-      this.props.close()
-    }
-  }
-
   render () {
     if (this.state.isLoading) {
       return <div styleName='root--loading'>
-        <i styleName='spinner' className='fa fa-spin fa-spinner'/>
+        <i styleName='spinner' className='fa fa-spin fa-spinner' />
         <div styleName='loadingMessage'>Preparing initialization...</div>
       </div>
     }
@@ -210,15 +200,13 @@ class InitModal extends React.Component {
         <div styleName='header'>
           <div styleName='header-title'>Initialize Storage</div>
         </div>
-        <button styleName='closeButton'
-          onClick={(e) => this.handleCloseButtonClick(e)}
-        >Close</button>
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
         <div styleName='body'>
           <div styleName='body-welcome'>
-            Welcome you!
+            Welcome!
           </div>
           <div styleName='body-description'>
-            Boostnote will use this directory as a default storage.
+           Please select a directory for Boostnote storage.
           </div>
           <div styleName='body-path'>
             <input styleName='body-path-input'
@@ -235,7 +223,7 @@ class InitModal extends React.Component {
 
           {this.state.legacyStorageExists &&
             <div styleName='body-migration'>
-              <label><input type='checkbox' checked={this.state.migrationRequested} onChange={(e) => this.handleMigrationRequestedChange(e)}/> Migrate old data from the legacy app v0.5</label>
+              <label><input type='checkbox' checked={this.state.migrationRequested} onChange={(e) => this.handleMigrationRequestedChange(e)} /> Migrate old data from the legacy app v0.5</label>
             </div>
           }
 
@@ -247,7 +235,7 @@ class InitModal extends React.Component {
             >
               {this.state.isSending
                 ? <span>
-                  <i className='fa fa-spin fa-spinner'/> Loading...
+                  <i className='fa fa-spin fa-spinner' /> Loading...
                 </span>
                 : 'Let\'s Go!'
               }

browser/main/modals/InitModal.styl

@@ -22,17 +22,6 @@
   border-bottom solid 1px $ui-borderColor
   color $ui-text-color
 
-.closeButton
-  position absolute
-  top 10px
-  right 10px
-  height 30px
-  padding 0 25px
-  border $ui-border
-  border-radius 2px
-  color $ui-text-color
-  colorDefaultButton()
-
 .body
   padding 30px
 

browser/main/modals/NewNoteModal.js

@@ -1,9 +1,11 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './NewNoteModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
+import ModalEscButton from 'browser/components/ModalEscButton'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 class NewNoteModal extends React.Component {
   constructor (props) {
@@ -22,6 +24,8 @@ class NewNoteModal extends React.Component {
   }
 
   handleMarkdownNoteButtonClick (e) {
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_MARKDOWN')
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_ALLNOTE')
     let { storage, folder, dispatch, location } = this.props
     dataApi
       .createNote(storage, {
@@ -52,6 +56,8 @@ class NewNoteModal extends React.Component {
   }
 
   handleSnippetNoteButtonClick (e) {
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_SNIPPET')
+    AwsMobileAnalyticsConfig.recordDynamitCustomEvent('ADD_ALLNOTE')
     let { storage, folder, dispatch, location } = this.props
 
     dataApi
@@ -100,12 +106,9 @@ class NewNoteModal extends React.Component {
         onKeyDown={(e) => this.handleKeyDown(e)}
       >
         <div styleName='header'>
-          <div styleName='title'>New Note</div>
+          <div styleName='title'>Make a Note</div>
         </div>
-        <button styleName='closeButton'
-          onClick={(e) => this.handleCloseButtonClick(e)}
-        >Close</button>
-
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
         <div styleName='control'>
           <button styleName='control-button'
             onClick={(e) => this.handleMarkdownNoteButtonClick(e)}
@@ -114,9 +117,9 @@ class NewNoteModal extends React.Component {
           >
             <i styleName='control-button-icon'
               className='fa fa-file-text-o'
-            /><br/>
-            <span styleName='control-button-label'>Markdown Note</span><br/>
-            <span styleName='control-button-description'>It is good for any type of documents. Check List, Code block and Latex block are available.</span>
+            /><br />
+            <span styleName='control-button-label'>Markdown Note</span><br />
+            <span styleName='control-button-description'>This format is for creating text documents. Checklists, code blocks and Latex blocks are available.</span>
           </button>
 
           <button styleName='control-button'
@@ -126,14 +129,14 @@ class NewNoteModal extends React.Component {
           >
             <i styleName='control-button-icon'
               className='fa fa-code'
-            /><br/>
-            <span styleName='control-button-label'>Snippet Note</span><br/>
-            <span styleName='control-button-description'>This format is specialized on managing snippets like Gist. Multiple snippets can be grouped as a note.
+            /><br />
+            <span styleName='control-button-label'>Snippet Note</span><br />
+            <span styleName='control-button-description'>This format is for creating code snippets. Multiple snippets can be grouped into a single note.
             </span>
           </button>
 
         </div>
-        <div styleName='description'><i className='fa fa-arrows-h'/> Tab to switch format</div>
+        <div styleName='description'><i className='fa fa-arrows-h' /> Tab to switch format</div>
 
       </div>
     )

browser/main/modals/NewNoteModal.styl

@@ -13,17 +13,6 @@
   border-bottom solid 1px $ui-borderColor
   color $ui-text-color
 
-.closeButton
-  position absolute
-  top 10px
-  right 10px
-  height 30px
-  width 0 25px
-  border $ui-border
-  border-radius 2px
-  color $ui-text-color
-  colorDefaultButton()
-
 .control
   padding 25px 15px 15px
   text-align center
@@ -64,17 +53,12 @@ body[data-theme="dark"]
     border-color $ui-dark-borderColor
     color $ui-dark-text-color
 
-  .closeButton
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-    colorDarkDefaultButton()
-
   .control-button
     border-color $ui-dark-borderColor
     color $ui-dark-text-color
     background-color transparent
     &:focus
-      colorPrimaryButton()
+      colorDarkPrimaryButton()
 
   .description
     color $ui-inactive-text-color

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -1,40 +1,51 @@
+@import('./Tab')
+
 .root
   padding 15px
   color $ui-text-color
+  margin-bottom 30px
+
 .group
   margin-bottom 45px
+
 .group-header
-  font-size 24px
+  @extend .header
   color $ui-text-color
-  padding 5px
-  border-bottom $default-border
-  margin-bottom 15px
 
 .group-header2
-  font-size 18px
+  font-size 20px
   color $ui-text-color
-  padding 5px
   margin-bottom 15px
+  margin-top 30px
 
 .group-section
-  margin-bottom 15px
+  margin-bottom 20px
   display flex
   line-height 30px
+
 .group-section-label
   width 150px
-  text-align right
+  text-align left
   margin-right 10px
   font-size 14px
+
 .group-section-control
   flex 1
+
+.group-section-control select
+  outline none
+  border 1px solid $ui-borderColor
+  background-color transparent
+
 .group-section-control-input
   height 30px
   vertical-align middle
-  width 150px
-  font-size 12px
+  width 400px
+  font-size $tab--button-font-size
   border solid 1px $border-color
   border-radius 2px
   padding 0 5px
+  outline none
   &:disabled
     background-color $ui-input--disabled-backgroundColor
 
@@ -45,7 +56,6 @@
   padding-left 15px
 
 .group-control
-  border-top $default-border
   padding-top 10px
   box-sizing border-box
   height 40px
@@ -56,27 +66,31 @@
       line-height 30px
       padding 0 5px
       float right
+
 .group-control-leftButton
-  float left
   colorDefaultButton()
-  border $default-border
+  border none
   border-radius 2px
-  height 30px
+  font-size $tab--button-font-size
+  height $tab--button-height
   padding 0 15px
-  margin-right 5px
+  margin-right 10px
+
 .group-control-rightButton
   float right
   colorPrimaryButton()
   border none
   border-radius 2px
-  height 30px
-  padding 0 15px
-  margin-right 5px
+  font-size $tab--button-font-size
+  height 35px
+  width 100px
+  margin-right 10px
+
 .group-hint
   border $ui-border
   padding 10px 15px
   margin 15px 0
-  border-radius 5px
+  border-radius 2px
   background-color $ui-backgroundColor
   color $ui-inactive-text-color
   ul
@@ -86,10 +100,21 @@
   p
     line-height 1.2
 
+.note-for-keymap
+  margin-left: 10px
+  font-size: 12px
+
+.code-mirror
+  width 400px
+  height 120px
+  margin 5px 0
+  font-size 12px
+
 colorDarkControl()
   border-color $ui-dark-borderColor
   background-color $ui-dark-backgroundColor
   color $ui-dark-text-color
+
 body[data-theme="dark"]
   .root
     color $ui-dark-text-color

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -0,0 +1,156 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ConfigTab.styl'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import store from 'browser/main/store'
+
+const electron = require('electron')
+const ipc = electron.ipcRenderer
+
+class HotkeyTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isHotkeyHintOpen: false,
+      config: props.config
+    }
+  }
+
+  componentDidMount () {
+    this.handleSettingDone = () => {
+      this.setState({keymapAlert: {
+        type: 'success',
+        message: 'Successfully applied!'
+      }})
+    }
+    this.handleSettingError = (err) => {
+      this.setState({keymapAlert: {
+        type: 'error',
+        message: err.message != null ? err.message : 'Error occurs!'
+      }})
+    }
+    ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
+  componentWillUnmount () {
+    ipc.removeListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
+  handleSaveButtonClick (e) {
+    let newConfig = {
+      hotkey: this.state.config.hotkey
+    }
+
+    ConfigManager.set(newConfig)
+
+    store.dispatch({
+      type: 'SET_UI',
+      config: newConfig
+    })
+  }
+
+  handleHintToggleButtonClick (e) {
+    this.setState({
+      isHotkeyHintOpen: !this.state.isHotkeyHintOpen
+    })
+  }
+
+  handleHotkeyChange (e) {
+    let { config } = this.state
+    config.hotkey = {
+      toggleFinder: this.refs.toggleFinder.value,
+      toggleMain: this.refs.toggleMain.value
+    }
+    this.setState({
+      config
+    })
+  }
+
+  render () {
+    let keymapAlert = this.state.keymapAlert
+    let keymapAlertElement = keymapAlert != null
+      ? <p className={`alert ${keymapAlert.type}`}>
+        {keymapAlert.message}
+      </p>
+      : null
+    let { config } = this.state
+
+    return (
+      <div styleName='root'>
+        <div styleName='group'>
+          <div styleName='group-header'>Hotkey</div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>Toggle Main</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleHotkeyChange(e)}
+                ref='toggleMain'
+                value={config.hotkey.toggleMain}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>Toggle Finder(popup)</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleHotkeyChange(e)}
+                ref='toggleFinder'
+                value={config.hotkey.toggleFinder}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-control'>
+            <button styleName='group-control-leftButton'
+              onClick={(e) => this.handleHintToggleButtonClick(e)}
+            >
+              {this.state.isHotkeyHintOpen
+                ? 'Hide Hint'
+                : 'Hint?'
+              }
+            </button>
+            <button styleName='group-control-rightButton'
+              onClick={(e) => this.handleSaveButtonClick(e)}>Save
+            </button>
+            {keymapAlertElement}
+          </div>
+          {this.state.isHotkeyHintOpen &&
+            <div styleName='group-hint'>
+              <p>Available Keys</p>
+              <ul>
+                <li><code>0</code> to <code>9</code></li>
+                <li><code>A</code> to <code>Z</code></li>
+                <li><code>F1</code> to <code>F24</code></li>
+                <li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
+                <li><code>Plus</code></li>
+                <li><code>Space</code></li>
+                <li><code>Backspace</code></li>
+                <li><code>Delete</code></li>
+                <li><code>Insert</code></li>
+                <li><code>Return</code> (or <code>Enter</code> as alias)</li>
+                <li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
+                <li><code>Home</code> and <code>End</code></li>
+                <li><code>PageUp</code> and <code>PageDown</code></li>
+                <li><code>Escape</code> (or <code>Esc</code> for short)</li>
+                <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
+                <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
+                <li><code>Control</code> (or <code>Ctrl</code> for short)</li>
+                <li><code>Shift</code></li>
+              </ul>
+            </div>
+          }
+        </div>
+      </div>
+    )
+  }
+}
+
+HotkeyTab.propTypes = {
+  dispatch: PropTypes.func
+}
+
+export default CSSModules(HotkeyTab, styles)

browser/main/modals/PreferencesModal/InfoTab.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoTab.styl'
 
@@ -22,29 +22,50 @@ class InfoTab extends React.Component {
   render () {
     return (
       <div styleName='root'>
+        <div styleName='header'>Info</div>
+
         <div styleName='top'>
-          <img styleName='icon' src='../resources/app.png' width='150' height='150'/>
-          <div styleName='appId'>Boostnote {appVersion}</div>
-          <div styleName='description'>
-            A simple markdown/snippet note app for developer.
+          <div styleName='icon-space'>
+            <img styleName='icon' src='../resources/app.png' width='92' height='92' />
+            <div styleName='icon-right'>
+              <div styleName='appId'>Boostnote {appVersion}</div>
+              <div styleName='description'>
+                An open source note-taking app made for programmers just like you.
+              </div>
+            </div>
           </div>
-          <div styleName='madeBy'>Made by&nbsp;
-            <a href='http://maisin.co/'
-              onClick={(e) => this.handleLinkClick(e)}
-            >MAISIN&CO.</a></div>
-          <div styleName='copyright'>Copyright 2016 MAISIN&CO. All rights reserved.</div>
         </div>
         <ul styleName='list'>
           <li>
-            The codes of this app is published under GPLv3 license.
-          </li>
-          <li>
-            Any kinds of feedback, creating a new issue or a pull request, would be welcomed.
-          </li>
-          <li>
-            Issue Tracker : <a href='https://github.com/BoostIO/Boostnote/issues'
+            <a href='https://boostnote.io'
               onClick={(e) => this.handleLinkClick(e)}
-            >https://github.com/BoostIO/Boostnote/issues</a>
+            >Website</a>
+          </li>
+          <li>
+            <a href='https://boostnote.paintory.com/'
+              onClick={(e) => this.handleLinkClick(e)}
+            >Boostnote Shop</a> : Products are shipped to all over the world 🌏
+          </li>
+          <li>
+            <a href='https://salt.bountysource.com/teams/boostnote'
+              onClick={(e) => this.handleLinkClick(e)}
+            >Donate via Bountysource</a> : Thank you for your support 🎉
+          </li>
+          <li>
+            <a href='https://github.com/BoostIO/Boostnote/issues'
+              onClick={(e) => this.handleLinkClick(e)}
+            >GitHub Issues</a> : We'd love to hear your feedback 🙌
+          </li>
+          <li>
+            <a href='https://github.com/BoostIO/Boostnote/blob/master/docs/build.md'
+              onClick={(e) => this.handleLinkClick(e)}
+            >Development</a> : Development configurations for Boostnote 🚀
+          </li>
+          <li styleName='cc'>
+            Copyright (C) 2017 Maisin&Co.
+          </li>
+          <li styleName='cc'>
+            License: GPL v3
           </li>
         </ul>
       </div>

browser/main/modals/PreferencesModal/InfoTab.styl

@@ -1,45 +1,47 @@
+@import('./Tab')
+
 .root
   padding 15px
   white-space pre
   line-height 1.4
-  color $ui-text-color
+  color alpha($ui-text-color, 90%)
   width 100%
+  font-size 14px
 
 .top
-  text-align center
-  margin-bottom 25px
+  text-align left
+  margin-bottom 20px
+
+.icon-space
+  margin 20px 0
+  height 100px
+
+.icon
+  display inline-block
+  vertical-align middle
+
+.icon-right
+  display inline-block
+  vertical-align middle
+  margin-left 20px
 
 .appId
   font-size 24px
+  margin-bottom 13px
 
 .description
-  overflow hidden
-  white-space normal
-  line-height 1.5
-  margin 5px auto 10px
   font-size 14px
-  text-align center
-
-.madeBy
-  font-size 12px
-  $ui-inactive-text-color
-
-.copyright
-  font-size 12px
-  $ui-inactive-text-color
 
 .list
   list-style square
   padding-left 2em
   li
     white-space normal
-
+    padding-bottom 10px
+  a
+    color #4E8EC6
+    text-decoration none
+  
 body[data-theme="dark"]
   .root
-    color $ui-dark-text-color
-
-  .madeBy
-    color $ui-dark-inactive-text-color
-
-  .copyright
-    color $ui-dark-inactive-text-color
+    color alpha($tab--dark-text-color, 80%)

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -1,51 +1,87 @@
+@import('./Tab')
+
+top-bar--height = 50px
+
 .root
   modal()
-  max-width 540px
-  min-height 400px
+  max-width 800px
+  min-height 500px
   height 80%
   overflow hidden
   position relative
 
-.nav
+.top-bar
   absolute top left right
-  height 50px
+  height top-bar--height
   background-color $ui-backgroundColor
   border-bottom solid 1px $ui-borderColor
+  p
+    text-align center
+    font-size 18px
+    line-height top-bar--height
+
+.nav
+  absolute top left right
+  top top-bar--height
+  left 0
+  width 140px
+  margin-left 30px
+  margin-top 20px
+  background-color $ui-backgroundColor
 
 .nav-button
-  width 80px
-  height 50px
-  border none
-  background-color transparent
-  color #939395
   font-size 14px
-  &:hover
-    color #515151
+  text-align left
+  width 100px
+  margin 4px 0
+  padding 5px 0
+  padding-left 10px
+  border none
+  border-radius 2px
+  background-color transparent
+  color $ui-text-color
+  font-size 14px
 
 .nav-button--active
   @extend .nav-button
-  color #6AA5E9
+  color $ui-text-color
+  background-color $ui-button--active-backgroundColor
   &:hover
-    color #6AA5E9
+    color $ui-text-color
 
 .nav-button-icon
   display block
 
 .content
   absolute left right bottom
-  top 50px
+  top top-bar--height
+  left 140px
+  margin-top 10px
   overflow-y auto
 
 body[data-theme="dark"]
   .root
     modalDark()
 
+  .top-bar
+    background-color transparent
+    border-color #4A4D52
+    p
+      color $tab--dark-text-color
+
   .nav
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color transparent
     border-color $ui-dark-borderColor
 
   .nav-button
     background-color transparent
-    color #939395
+    color $tab--dark-text-color
     &:hover
       color $ui-dark-text-color
+
+  .nav-button--active
+    @extend .nav-button
+    color white
+    background-color $dark-primary-button-background--active
+    &:hover
+      color white

browser/main/modals/PreferencesModal/StorageItem.js

@@ -106,7 +106,10 @@ class UnstyledFolderItem extends React.Component {
     const popover = { position: 'absolute', zIndex: 2 }
     const cover = {
       position: 'fixed',
-      top: 0, right: 0, bottom: 0, left: 0
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
     }
     const pickerStyle = Object.assign({}, {
       position: 'absolute'
@@ -137,7 +140,7 @@ class UnstyledFolderItem extends React.Component {
               </div>
               : null
             }
-            <i className='fa fa-square'/>
+            <i className='fa fa-square' />
           </button>
           <input styleName='folderList-item-left-nameInput'
             value={this.state.folder.name}
@@ -368,17 +371,17 @@ class StorageItem extends React.Component {
             : <div styleName='header-label'
               onClick={(e) => this.handleLabelClick(e)}
             >
-              <i className='fa fa-folder-open'/>&nbsp;
+              <i className='fa fa-folder-open' />&nbsp;
               {storage.name}&nbsp;
               <span styleName='header-label-path'>({storage.path})</span>&nbsp;
-              <i styleName='header-label-editButton' className='fa fa-pencil'/>
+              <i styleName='header-label-editButton' className='fa fa-pencil' />
             </div>
           }
           <div styleName='header-control'>
             <button styleName='header-control-button'
               onClick={(e) => this.handleNewFolderButtonClick(e)}
             >
-              <i className='fa fa-plus'/>
+              <i className='fa fa-plus' />
               <span styleName='header-control-button-tooltip'
                 style={{left: -20}}
               >Add Folder</span>
@@ -386,7 +389,7 @@ class StorageItem extends React.Component {
             <button styleName='header-control-button'
               onClick={(e) => this.handleExternalButtonClick(e)}
             >
-              <i className='fa fa-external-link'/>
+              <i className='fa fa-external-link' />
               <span styleName='header-control-button-tooltip'
                 style={{left: -50}}
               >Open Storage folder</span>
@@ -394,7 +397,7 @@ class StorageItem extends React.Component {
             <button styleName='header-control-button'
               onClick={(e) => this.handleUnlinkButtonClick(e)}
             >
-              <i className='fa fa-unlink'/>
+              <i className='fa fa-unlink' />
               <span styleName='header-control-button-tooltip'
                 style={{left: -10}}
               >Unlink</span>

browser/main/modals/PreferencesModal/StorageItem.styl

@@ -35,7 +35,7 @@
   border $ui-border
   border-radius 2px
   padding 0 5px
-
+  outline none
 
 .header-control
   float right
@@ -71,7 +71,7 @@
     background-color darken(white, 3%)
 .folderList-item-left
   height 30px
-  border-left solid 4px transparent
+  border-left solid 2px transparent
   padding 0 10px
   line-height 30px
   float left
@@ -105,6 +105,7 @@
   border $ui-border
   border-radius 2px
   padding 0 5px
+  outline none
 
 .folderList-item-right
   float right

browser/main/modals/PreferencesModal/StoragesTab.js

@@ -63,6 +63,7 @@ class StoragesTab extends React.Component {
     })
     return (
       <div styleName='list'>
+        <div styleName='header'>Storages</div>
         {storageList.length > 0
           ? storageList
           : <div styleName='list-empty'>No storage found.</div>
@@ -71,7 +72,7 @@ class StoragesTab extends React.Component {
           <button styleName='list-control-addStorageButton'
             onClick={(e) => this.handleAddStorageButton(e)}
           >
-            <i className='fa fa-plus'/> Add Storage
+            <i className='fa fa-plus' /> Add Storage
           </button>
         </div>
       </div>

browser/main/modals/PreferencesModal/StoragesTab.styl

@@ -1,3 +1,5 @@
+@import('./Tab')
+
 .root
   padding 15px
   color $ui-text-color
@@ -26,10 +28,14 @@
 .list-control
   height 30px
 .list-control-addStorageButton
-  height 30px
+  position absolute
+  top 7px
+  right 20px
+  height $tab--button-height
   padding 0 15px
   border $ui-border
   colorDefaultButton()
+  font-size $tab--button-font-size
   border-radius 2px
 
 .addStorage

browser/main/modals/PreferencesModal/Tab.styl

@@ -0,0 +1,18 @@
+/**
+ * Common style for tabs on config modal.
+ */
+
+$tab--input-border-radius = 5px
+$tab--button-border-radius = 5px
+$tab--button-height = 40px
+$tab--button-font-size = 14px
+
+$tab--dark-text-color = #E5E5E5
+
+.header
+  font-size 24px
+  margin-bottom 30px
+
+body[data-theme="dark"]
+  .header
+    color $tab--dark-text-color

browser/main/modals/PreferencesModal/UiTab.js

@@ -4,134 +4,70 @@ import styles from './ConfigTab.styl'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import store from 'browser/main/store'
 import consts from 'browser/lib/consts'
-
-const electron = require('electron')
-const ipc = electron.ipcRenderer
+import ReactCodeMirror from 'react-codemirror'
+import CodeMirror from 'codemirror'
 
 const OSX = global.process.platform === 'darwin'
 
-class ConfigTab extends React.Component {
+class UiTab extends React.Component {
   constructor (props) {
     super(props)
-
     this.state = {
-      isHotkeyHintOpen: false,
-      config: props.config
+      config: props.config,
+      codemirrorTheme: props.config.editor.theme
     }
   }
 
-  componentDidMount () {
-    this.handleSettingDone = () => {
-      this.setState({keymapAlert: {
-        type: 'success',
-        message: 'Successfully applied!'
-      }})
-    }
-    this.handleSettingError = (err) => {
-      this.setState({keymapAlert: {
-        type: 'error',
-        message: err.message != null ? err.message : 'Error occurs!'
-      }})
-    }
-    ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
-    ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
-  }
-
-  componentWillUnmount () {
-    ipc.removeListener('APP_SETTING_DONE', this.handleSettingDone)
-    ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError)
-  }
-
-  handleSaveButtonClick (e) {
-    let newConfig = {
-      hotkey: this.state.config.hotkey
-    }
-
-    ConfigManager.set(newConfig)
-
-    store.dispatch({
-      type: 'SET_UI',
-      config: newConfig
-    })
-  }
-
-  handleKeyDown (e) {
-    if (e.keyCode === 13) {
-      this.submitHotKey()
-    }
-  }
-
-  handleConfigKeyDown (e) {
-    if (e.keyCode === 13) {
-      this.submitConfig()
-    }
-  }
-
-  handleLineNumberingClick (e) {
-    let config = this.state.config
-
-    config['preview-line-number'] = e.target.checked
-    this.setState({
-      config
-    })
-  }
-
-  handleDisableDirectWriteClick (e) {
-    let config = this.state.config
-    config['disable-direct-write'] = e.target.checked
-    this.setState({
-      config
-    })
-  }
-
-  handleHintToggleButtonClick (e) {
-    this.setState({
-      isHotkeyHintOpen: !this.state.isHotkeyHintOpen
-    })
-  }
-
-  handleHotkeyChange (e) {
-    let { config } = this.state
-    config.hotkey = {
-      toggleFinder: this.refs.toggleFinder.value,
-      toggleMain: this.refs.toggleMain.value
-    }
-    this.setState({
-      config
-    })
+  componentWillMount () {
+    CodeMirror.autoLoadMode(ReactCodeMirror, 'javascript')
   }
 
   handleUIChange (e) {
-    let { config } = this.state
+    const { codemirrorTheme } = this.state
+    let checkHighLight = document.getElementById('checkHighLight')
 
-    config.ui = {
-      theme: this.refs.uiTheme.value,
-      disableDirectWrite: this.refs.uiD2w != null
-        ? this.refs.uiD2w.checked
-        : false
-    }
-    config.editor = {
-      theme: this.refs.editorTheme.value,
-      fontSize: this.refs.editorFontSize.value,
-      fontFamily: this.refs.editorFontFamily.value,
-      indentType: this.refs.editorIndentType.value,
-      indentSize: this.refs.editorIndentSize.value,
-      switchPreview: this.refs.editorSwitchPreview.value
-    }
-    config.preview = {
-      fontSize: this.refs.previewFontSize.value,
-      fontFamily: this.refs.previewFontFamily.value,
-      codeBlockTheme: this.refs.previewCodeBlockTheme.value,
-      lineNumber: this.refs.previewLineNumber.checked
+    if (checkHighLight === null) {
+      checkHighLight = document.createElement('link')
+      checkHighLight.setAttribute('id', 'checkHighLight')
+      checkHighLight.setAttribute('rel', 'stylesheet')
+      document.head.appendChild(checkHighLight)
     }
 
-    this.setState({
-      config
-    })
+    const newConfig = {
+      ui: {
+        theme: this.refs.uiTheme.value,
+        disableDirectWrite: this.refs.uiD2w != null
+          ? this.refs.uiD2w.checked
+          : false
+      },
+      editor: {
+        theme: this.refs.editorTheme.value,
+        fontSize: this.refs.editorFontSize.value,
+        fontFamily: this.refs.editorFontFamily.value,
+        indentType: this.refs.editorIndentType.value,
+        indentSize: this.refs.editorIndentSize.value,
+        switchPreview: this.refs.editorSwitchPreview.value,
+        keyMap: this.refs.editorKeyMap.value
+      },
+      preview: {
+        fontSize: this.refs.previewFontSize.value,
+        fontFamily: this.refs.previewFontFamily.value,
+        codeBlockTheme: this.refs.previewCodeBlockTheme.value,
+        lineNumber: this.refs.previewLineNumber.checked
+      }
+    }
+
+    const newCodemirrorTheme = this.refs.editorTheme.value
+
+    if (newCodemirrorTheme !== codemirrorTheme) {
+      checkHighLight.setAttribute('href', `../node_modules/codemirror/theme/${newCodemirrorTheme}.css`)
+    }
+
+    this.setState({ config: newConfig, codemirrorTheme: newCodemirrorTheme })
   }
 
   handleSaveUIClick (e) {
-    let newConfig = {
+    const newConfig = {
       ui: this.state.config.ui,
       editor: this.state.config.editor,
       preview: this.state.config.preview
@@ -146,84 +82,17 @@ class ConfigTab extends React.Component {
   }
 
   render () {
-    let keymapAlert = this.state.keymapAlert
-    let keymapAlertElement = keymapAlert != null
-      ? <p className={`alert ${keymapAlert.type}`}>
-        {keymapAlert.message}
-      </p>
-      : null
-    let themes = consts.THEMES
-    let { config } = this.state
-
+    const themes = consts.THEMES
+    const { config, codemirrorTheme } = this.state
+    const codemirrorSampleCode = 'function iamHappy (happy) {\n\tif (happy) {\n\t  console.log("I am Happy!")\n\t} else {\n\t  console.log("I am not Happy!")\n\t}\n};'
     return (
       <div styleName='root'>
-        <div styleName='group'>
-          <div styleName='group-header'>Hotkey</div>
-          <div styleName='group-section'>
-            <div styleName='group-section-label'>Toggle Main</div>
-            <div styleName='group-section-control'>
-              <input styleName='group-section-control-input'
-                onChange={(e) => this.handleHotkeyChange(e)}
-                ref='toggleMain'
-                value={config.hotkey.toggleMain}
-                type='text'
-              />
-            </div>
-          </div>
-          <div styleName='group-section'>
-            <div styleName='group-section-label'>Toggle Finder(popup)</div>
-            <div styleName='group-section-control'>
-              <input styleName='group-section-control-input'
-                onChange={(e) => this.handleHotkeyChange(e)}
-                ref='toggleFinder'
-                value={config.hotkey.toggleFinder}
-                type='text'
-              />
-            </div>
-          </div>
-          <div styleName='group-control'>
-            <button styleName='group-control-leftButton'
-              onClick={(e) => this.handleHintToggleButtonClick(e)}
-            >
-              {this.state.isHotkeyHintOpen
-                ? 'Hide Hint'
-                : 'Show Hint'
-              }
-            </button>
-            <button styleName='group-control-rightButton'
-              onClick={(e) => this.handleSaveButtonClick(e)}>Save Hotkey
-            </button>
-            {keymapAlertElement}
-          </div>
-          {this.state.isHotkeyHintOpen &&
-            <div styleName='group-hint'>
-              <p>Available Keys</p>
-              <ul>
-                <li><code>0</code> to <code>9</code></li>
-                <li><code>A</code> to <code>Z</code></li>
-                <li><code>F1</code> to <code>F24</code></li>
-                <li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
-                <li><code>Plus</code></li>
-                <li><code>Space</code></li>
-                <li><code>Backspace</code></li>
-                <li><code>Delete</code></li>
-                <li><code>Insert</code></li>
-                <li><code>Return</code> (or <code>Enter</code> as alias)</li>
-                <li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
-                <li><code>Home</code> and <code>End</code></li>
-                <li><code>PageUp</code> and <code>PageDown</code></li>
-                <li><code>Escape</code> (or <code>Esc</code> for short)</li>
-                <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
-                <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
-              </ul>
-            </div>
-          }
-        </div>
-
         <div styleName='group'>
           <div styleName='group-header'>UI</div>
+
+          <div styleName='group-header2'>Theme</div>
+
           <div styleName='group-section'>
-            <div styleName='group-section-label'>Theme</div>
             <div styleName='group-section-control'>
               <select value={config.ui.theme}
                 onChange={(e) => this.handleUIChange(e)}
@@ -266,6 +135,9 @@ class ConfigTab extends React.Component {
                   })
                 }
               </select>
+              <div styleName='code-mirror'>
+                <ReactCodeMirror value={codemirrorSampleCode} options={{ lineNumbers: true, readOnly: true, mode: 'javascript', theme: codemirrorTheme }} />
+              </div>
             </div>
           </div>
           <div styleName='group-section'>
@@ -332,6 +204,24 @@ class ConfigTab extends React.Component {
               </select>
             </div>
           </div>
+
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              Editor Keymap
+            </div>
+            <div styleName='group-section-control'>
+              <select value={config.editor.keyMap}
+                ref='editorKeyMap'
+                onChange={(e) => this.handleUIChange(e)}
+              >
+                <option value='sublime'>default</option>
+                <option value='vim'>vim</option>
+                <option value='emacs'>emacs</option>
+              </select>
+              <span styleName='note-for-keymap'>Please reload boostnote after you change the keymap</span>
+            </div>
+          </div>
+
           <div styleName='group-header2'>Preview</div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>
@@ -389,7 +279,7 @@ class ConfigTab extends React.Component {
             <button styleName='group-control-rightButton'
               onClick={(e) => this.handleSaveUIClick(e)}
             >
-              Save UI Config
+              Save
             </button>
           </div>
         </div>
@@ -398,11 +288,11 @@ class ConfigTab extends React.Component {
   }
 }
 
-ConfigTab.propTypes = {
+UiTab.propTypes = {
   user: PropTypes.shape({
     name: PropTypes.string
   }),
   dispatch: PropTypes.func
 }
 
-export default CSSModules(ConfigTab, styles)
+export default CSSModules(UiTab, styles)

browser/main/modals/PreferencesModal/index.js

@@ -1,9 +1,11 @@
 import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import { connect } from 'react-redux'
-import ConfigTab from './ConfigTab'
+import HotkeyTab from './HotkeyTab'
+import UiTab from './UiTab'
 import InfoTab from './InfoTab'
 import StoragesTab from './StoragesTab'
+import ModalEscButton from 'browser/components/ModalEscButton'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './PreferencesModal.styl'
 
@@ -32,16 +34,27 @@ class Preferences extends React.Component {
     }
   }
 
+  handleEscButtonClick () {
+    this.props.close()
+  }
+
   renderContent () {
     const { boundingBox } = this.state
     let { dispatch, config, data } = this.props
 
     switch (this.state.currentTab) {
       case 'INFO':
-        return <InfoTab/>
-      case 'CONFIG':
+        return <InfoTab />
+      case 'HOTKEY':
         return (
-          <ConfigTab
+          <HotkeyTab
+            dispatch={dispatch}
+            config={config}
+          />
+        )
+      case 'UI':
+        return (
+          <UiTab
             dispatch={dispatch}
             config={config}
           />
@@ -73,9 +86,10 @@ class Preferences extends React.Component {
     let content = this.renderContent()
 
     let tabs = [
-      {target: 'STORAGES', label: 'Storages', icon: 'database'},
-      {target: 'CONFIG', label: 'Config', icon: 'cogs'},
-      {target: 'INFO', label: 'Info', icon: 'info-circle'}
+      {target: 'STORAGES', label: 'Storages'},
+      {target: 'HOTKEY', label: 'Hotkey'},
+      {target: 'UI', label: 'UI'},
+      {target: 'INFO', label: 'Info'}
     ]
 
     let navButtons = tabs.map((tab) => {
@@ -88,9 +102,6 @@ class Preferences extends React.Component {
           key={tab.target}
           onClick={(e) => this.handleNavButtonClick(tab.target)(e)}
         >
-          <i styleName='nav-button-icon'
-            className={'fa fa-' + tab.icon}
-          />
           <span styleName='nav-button-label'>
             {tab.label}
           </span>
@@ -104,6 +115,10 @@ class Preferences extends React.Component {
         tabIndex='-1'
         onKeyDown={(e) => this.handleKeyDown(e)}
       >
+        <div styleName='top-bar'>
+          <p>Your menu for Boostnote</p>
+        </div>
+        <ModalEscButton handleEscButtonClick={(e) => this.handleEscButtonClick(e)} />
         <div styleName='nav'>
           {navButtons}
         </div>

browser/main/modals/RenameFolderModal.js

@@ -3,6 +3,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './RenameFolderModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
+import ModalEscButton from 'browser/components/ModalEscButton'
 
 class RenameFolderModal extends React.Component {
   constructor (props) {
@@ -72,9 +73,7 @@ class RenameFolderModal extends React.Component {
         <div styleName='header'>
           <div styleName='title'>Rename Folder</div>
         </div>
-        <button styleName='closeButton'
-          onClick={(e) => this.handleCloseButtonClick(e)}
-        >Close</button>
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
 
         <div styleName='control'>
           <input styleName='control-input'

browser/main/modals/RenameFolderModal.styl

@@ -6,24 +6,13 @@
 
 .header
   height 50px
-  font-size 18px
+  font-size 16px
   line-height 50px
   padding 0 15px
   background-color $ui-backgroundColor
   border-bottom solid 1px $ui-borderColor
   color $ui-text-color
 
-.closeButton
-  position absolute
-  top 10px
-  right 10px
-  height 30px
-  width 0 25px
-  border $ui-border
-  border-radius 2px
-  color $ui-text-color
-  colorDefaultButton()
-
 .control
   padding 25px 15px 15px
   text-align center
@@ -40,7 +29,7 @@
   background-color transparent
   outline none
   vertical-align middle
-  font-size 18px
+  font-size 14px
   text-align center
   &:disabled
     background-color $ui-input--disabled-backgroundColor
@@ -65,13 +54,12 @@ body[data-theme="dark"]
     border-color $ui-dark-borderColor
     color $ui-dark-text-color
 
-  .closeButton
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-    colorDarkDefaultButton()
-
-  .description
+   .description
     color $ui-inactive-text-color
 
   .control-input
     border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+
+  .control-confirmButton
+    colorDarkPrimaryButton()

browser/styles/index.styl

@@ -8,21 +8,24 @@ $danger-lighten-color = lighten(#c9302c, 5%)
 $statusBar-height = 24px
 $sideNav-width = 200px
 $sideNav--folded-width = 44px
-$topBar-height = 50px
+$topBar-height = 60px
 
 // UI default
-$ui-text-color = #515151
+$ui-text-color = #333333
 $ui-inactive-text-color = #939395
 $ui-borderColor = #D1D1D1
-$ui-backgroundColor = #FAFAFA
+$ui-backgroundColor = #FFFFFF
+$ui-noteList-backgroundColor = #F3F3F3
+$ui-noteDetail-backgroundColor = #F4F4F4
 $ui-border = solid 1px $ui-borderColor
 $ui-active-color = #6AA5E9
+$ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)
 
 // UI Button
 $ui-button-color = #939395
-$ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08)
+$ui-button--hover-backgroundColor = #D9D9D9
 $ui-button--active-color = white
-$ui-button--active-backgroundColor = #6AA5E9
+$ui-button--active-backgroundColor = #D9D9D9
 $ui-button--focus-borderColor = lighten(#369DCD, 25%)
 
 // UI Tooltip
@@ -44,6 +47,9 @@ tooltip()
 $ui-input--focus-borderColor = #369DCD
 $ui-input--disabled-backgroundColor = #DDD
 
+// Parts
+$ui-favorite-star-button-color = #FFC216
+
 /*
 * # Border
 */
@@ -61,29 +67,43 @@ $active-border = solid 1px $active-border-color
 // Default button
 $default-button-background = white
 $default-button-background--hover = #e6e6e6
-$default-button-background--active = #d4d4d4
+$default-button-background--active = #D9D9D9
 
 colorDefaultButton()
   background-color $default-button-background
   &:hover
-    background-color $default-button-background--hover
+    background-color transparent
   &:active
   &:active:hover
     background-color $default-button-background--active
 
 // Primary button(Brand color)
-$primary-button-background = $brand-color
+$primary-button-background = alpha($brand-color, 60%)
 $primary-button-background--hover = darken($brand-color, 5%)
 $primary-button-background--active = darken($brand-color, 10%)
 
 colorPrimaryButton()
-  color white
-  background-color $primary-button-background
+  color $ui-text-color
+  background-color $default-button-background--hover
   &:hover
-    background-color $primary-button-background--hover
+    background-color $default-button-background--active
   &:active
   &:active:hover
-    background-color $primary-button-background--active
+    background-color $default-button-background--active
+
+// Dark Primary button(Brand color)
+$dark-primary-button-background = alpha(#3A404C, 80%)
+$dark-primary-button-background--hover = #3A404C
+$dark-primary-button-background--active = #3A404C
+
+colorDarkPrimaryButton()
+  color white
+  background-color $dark-primary-button-background
+  &:hover
+    background-color $dark-primary-button-background--hover
+  &:active
+  &:active:hover
+    background-color $dark-primary-button-background--active
 
 // Danger button(Brand color)
 $danger-button-background = #c9302c
@@ -107,13 +127,15 @@ navButtonColor()
   border none
   color $ui-button-color
   background-color transparent
-  transition color background-color  0.15s
+  transition 0.15s
   &:hover
-    background-color $ui-button--hover-backgroundColor
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    transition  0.15s
+    color $ui-text-color
   &:active, &:active:hover
     background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
-
+    color $ui-text-color
+    transition 0.15s
 /**
 * # Modal Stuff
 * These will be moved lib/modal
@@ -131,17 +153,40 @@ modal()
   background-color $modal-background
   overflow hidden
   border-radius $modal-border-radius
-  box-shadow 2px 2px 10px gray
+  box-shadow 0 0 1px rgba(76,86,103,.15), 0 2px 18px rgba(31,37,50,.22)
+
+topBarButtonLight()
+  width 34px
+  height 34px
+  border-radius 17px
+  font-size 14px
+  margin 13px 7px
+  padding-top 7px
+  border none
+  color $ui-button-color
+  fill $ui-button-color
+  background-color transparent
+  &:active
+    border-color $ui-button--active-backgroundColor
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+    .control-lockButton-tooltip
+      opacity 1
 
 // Dark theme
+$ui-dark-active-color = #3A404C
 $ui-dark-borderColor = lighten(#21252B, 20%)
-$ui-dark-backgroundColor = darken(#21252B, 10%)
+$ui-dark-backgroundColor = #1E2124
+$ui-dark-noteList-backgroundColor = #282C30
+$ui-dark-noteDetail-backgroundColor = #2D3033
+$ui-dark-tag-backgroundColor = #3A404C
 $dark-background-color = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-text-color = #DDDDDD
 $ui-dark-button--active-color = white
-$ui-dark-button--active-backgroundColor = #6AA5E9
+$ui-dark-button--active-backgroundColor = #3A404C
 $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)
+$ui-dark-topbar-button-color = #939395
 
 $dark-default-button-background = $ui-dark-backgroundColor
 $dark-default-button-background--hover = $ui-dark-button--hover-backgroundColor
@@ -172,14 +217,27 @@ navDarkButtonColor()
   border none
   color $ui-dark-button-color
   background-color transparent
-  transition color background-color 0.15s
+  transition 0.15s
   &:hover
-    color white
+    color $ui-dark-text-color
     background-color $ui-dark-button--hover-backgroundColor
+    transition 0.15s
   &:active
+  &:active:hover
+    transition 0.15s
+    color $ui-dark-text-color
+
+topBarButtonDark()
+  border-color $ui-dark-borderColor
+  color $ui-dark-topbar-button-color
+  &:hover
+    background-color $dark-default-button-background--hover
+  &:active
+    border-color $ui-dark-button--focus-borderColor
   &:active:hover
     background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-button--active-color
+  &:focus
+    border-color $ui-button--focus-borderColor
 
 $ui-dark-tooltip-text-color = white
 $ui-dark-tooltip-backgroundColor = alpha(#444, 70%)

contributing.md

@@ -1,19 +1,11 @@
 # Contributing to Boostnote
 
-> English below.
+## When you open an issue of a bug report
+There are no issue template. But there is a request.
 
-## Pull requestの著作権について
+**Please paste screenshots of Boostnote with developer tool open**
 
-Pull requestをすることはその変化分のコードの著作権をMAISIN&CO.に譲渡することに同意することになります。
-
-アプリケーションのLicenseのをいつでも変える選択肢を残したいからです。
-しかし、これはいずれかBoostnoteが有料の商用アプリになる可能性がある話ではありません。
-もし、このアプリケーションで金を稼ごうとするならBoostnote専用のCloud storageの提供やMobile appとの連動、何か特殊なプレミアム機能の提供など形になると思います。
-現在考えられているのは、GPL v3の場合、他のライセンスとの互換が不可能であるため、もしより自由なLicense(BSD, MIT)に変える時に改めて著作権者としてライセンスし直す選択肢を残したいぐらいのイメージです。
-
----
-
-# Contributing to Boostnote(ENG)
+Thank you for your help in advance.
 
 ## About copyright of Pull Request
 
@@ -21,3 +13,41 @@ If you make a pull request, It means you agree to transfer the copyright of the
 
 It doesn't mean Boostnote will become a paid app. If we want to earn some money, We will try other way, which is some kind of cloud storage, Mobile app integration or some SPECIAL features.
 Because GPL v3 is too strict to be compatible with any other License, We thought this is needed to replace the license with much freer one(like BSD, MIT) somewhen.
+
+---
+
+# Contributing to Boostnote (Korean)
+
+## 버그 리포트를 보고할 때
+이슈의 양식은 없습니다. 하지만 부탁이 있습니다.
+
+**개발자 도구를 연 상태의 Boostnote 스크린샷을 첨부해주세요**
+
+도움을 주셔서 감사합니다.
+
+## Pull Request의 저작권에 관하여
+
+당신이 pull request를 요청하면, 코드 변경에 대한 저작권을 MAISIN&CO에 양도한다는 것에 동의한다는 의미입니다.
+
+이것은 Boostnote가 유료화가 되는 것을 의미하는 건 아닙니다. 만약 우리가 자금이 필요하다면, 우리는 클라우드 연동, 모바일 앱 통합 혹은 특수한 기능 같은 것을 사용해 수입 창출을 시도할 것입니다.
+GPL v3 라이센스는 다른 라이센스와 혼합해 사용하기엔 너무 엄격하므로, 우리는 BSD, MIT 라이센스와 같은 더 자유로운 라이센스로 교체하는 것을 생각하고 있습니다.
+
+---
+
+# Contributing to Boostnote (Japanese)
+
+## バグレポートに関してのissueを立てる時
+イシューテンプレートはありませんが、1つお願いがあります。
+
+**開発者ツールを開いた状態のBoostnoteのスクリーンショットを貼ってください**
+
+よろしくお願いします。
+
+## Pull requestの著作権について
+
+Pull requestをすることはその変化分のコードの著作権をMAISIN&CO.に譲渡することに同意することになります。
+
+アプリケーションのLicenseをいつでも変える選択肢を残したいと思うからです。
+これはいずれかBoostnoteが有料の商用アプリになる可能性がある話ではありません。
+もし、このアプリケーションに料金が発生する時は、Boostnote専用のCloud storageの提供やMobile appとの連動、何か特殊なプレミアム機能の提供など形になります。
+現在考えられているのは、GPL v3の場合、他のライセンスとの互換が不可能であるため、もしより自由なLicense(BSD, MIT)に変える時に改めて著作権者としてライセンスし直す選択肢を残すイメージです。

docs/build.md

@@ -1,57 +1,52 @@
 # Build
 
+## Environments
+* npm: 4.x
+* node: 7.x
+
+You should use `npm v4.x` because `$ grand pre-build` fails on `v5.x`.
+
 ## Development
 
 We use Webpack HMR to develop Boostnote.
-You can use following commands to use default configuration at the top of project directory.
+Running the following commands, at the top of the project directory, will start Boostnote with the default configurations.
 
-Install requirement packages.
+Install the required packages using yarn.
 
 ```
-$ npm install
+$ yarn
 ```
 
-Build codes.
+Build and run.
 
 ```
-$ npm run webpack
+$ yarn run dev-start
 ```
 
-After a few seconds, you will see this message.
+This command runs `yarn run webpack` and `yarn run hot` in parallel. It is the same as running these commands in two terminals.
 
-```
-webpack: bundle is now VALID.
-```
+The `webpack` will watch for code changes and then apply them automatically.
 
-Then, we have to run the app.
-```
-$ npm run hot
-```
-> Actually the app can be start with `npm start`. However, the app will use the compiled script.
+If the following error occurs: `Failed to load resource: net::ERR_CONNECTION_REFUSED`, please reload Boostnote.
 
-If the app gets stuck on load, you may need to run the following.
-```
-$ npm run vendor
-```
-
-By this, webpack will watch the code changes and apply it automatically.
+![net::ERR_CONNECTION_REFUSED](https://cloud.githubusercontent.com/assets/11307908/24343004/081e66ae-1279-11e7-8d9e-7f478043d835.png)
 
 > ### Notice
-> There are some cases you have to refresh app yourself.
-> 1. When editing constructor method of a component
-> 2. When adding a new css class(same to 1: CSS class is re-written by each component. This process occurs at Constructor method.)
+> There are some cases where you have to refresh the app manually.
+> 1. When editing a constructor method of a component
+> 2. When adding a new css class (similar to 1: the CSS class is re-written by each component. This process occurs at the Constructor method.)
 
 ## Deploy
 
-We use Grunt.
-Acutal deploy can be run by `grunt`. However, you shouldn't use because the default task is including codesign and authenticode.
+We use Grunt to automate deployment.
+You can build the program by using `grunt`. However, we don't recommend this because the default task includes codesign and authenticode.
 
-So, we prepare a script which just make an excutable file.
+So, we've prepared a separate script which just makes an executable file.
 
 ```
 grunt pre-build
 ```
 
-You will find the executable from `dist`. In this case, auto updater won't work because the app isn't signed.
+You will find the executable in the `dist` directory. Note, the auto updater won't work because the app isn't signed.
 
-If you are necessary, you can do codesign or authenticode by this excutable.
+If you find it necessary, you can use codesign or authenticode with this executable.

docs/debug.md

@@ -0,0 +1,20 @@
+# How to debug Boostnote (Electron app)
+Boostnote is an Electron app so it's based on Chromium; developers can use `Developer Tools` just like Google Chrome.
+
+You can toggle the `Developer Tools` like this:
+![how_to_toggle_devTools](https://cloud.githubusercontent.com/assets/11307908/24343585/162187e2-127c-11e7-9c01-23578db03ecf.png)
+
+The `Developer Tools` will look like this:
+![Developer_Tools](https://cloud.githubusercontent.com/assets/11307908/24343545/eff9f3a6-127b-11e7-94cf-cb67bfda634a.png)
+
+When errors occur, the error messages are displayed at the `console`.
+
+## Debugging
+For example, you can use the `debugger` to set a breakpoint in the code like this:
+
+![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png)
+
+This is just an illustrative example, you should find a way to debug which fits your style.
+
+## References
+* [Official document of Google Chrome about debugging](https://developer.chrome.com/devtools)

docs/jp/build.md

@@ -5,25 +5,25 @@
 Webpack HRMを使います。
 次の命令から私達がしておいた設定を使うことができます。
 
-```
-npm run webpack
-```
-
-数秒後、次のメッセージが表示されます。
+依存するパッケージをインストールします。
 
 ```
-webpack: bundle is now VALID.
+$ yarn
 ```
 
-では、アプリを起動します。
+ビルドして実行します。
 
 ```
-npm run hot
+$ yarn run dev-start
 ```
 
-> 元々、アプリは`npm start`から起動できます。しかし、この場合、コンパイルされたスクリプトを利用します。
+このコマンドは `yarn run webpack` と `yarn run hot`を並列に実行します。つまりこのコマンドは2つのターミナルで同時にこれらのコマンドを実行するのと同じことです。
 
-これにより、Webpackが自動的にコードの変更を確認し、それを適用してくれるようになります。
+そして、Webpackが自動的にコードの変更を確認し、それを適用してくれるようになります。
+
+もし、 `Failed to load resource: net::ERR_CONNECTION_REFUSED`というエラーが起きた場合、Boostnoteをリロードしてください。
+
+![net::ERR_CONNECTION_REFUSED](https://cloud.githubusercontent.com/assets/11307908/24343004/081e66ae-1279-11e7-8d9e-7f478043d835.png)
 
 > ### 注意
 > 時々、直接リフレッシュをする必要があります。