Merge pull request #783 from asmsuechan/add-boostnoterc-for-config

Add boostnoterc revival

.boostnoterc.sample

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

.eslintignore

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

.eslintrc

@@ -0,0 +1,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,6 @@
+language: node_js
+node_js:
+  - 'stable'
+  - 'lts/*'
+
+script: npm run lint && npm run test

Backers.md

@@ -0,0 +1,5 @@
+Become a [backer](https://salt.bountysource.com/teams/boostnote) and support Boostnote!
+You can support Boostnote from $ 5 a month!
+
+# Backers
+[Kazu Yokomizo](https://twitter.com/kazup_bot)

ISSUE_TEMPLATE.md

@@ -0,0 +1 @@
+Please paste some **screenshots** with the **developer tool** open if you report a bug.

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'
 
@@ -37,6 +39,9 @@ export default class CodeEditor extends React.Component {
       }
       this.props.onBlur != null && this.props.onBlur(e)
     }
+    this.loadStyleHandler = (e) => {
+      this.editor.refresh()
+    }
   }
 
   componentDidMount () {
@@ -49,21 +54,42 @@ export default class CodeEditor extends React.Component {
       indentUnit: this.props.indentSize,
       tabSize: this.props.indentSize,
       indentWithTabs: this.props.indentType !== 'space',
-      keyMap: 'sublime',
-      inputStyle: 'contenteditable',
+      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')) {
+            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 {
+              if (tabs) {
                 cm.execCommand('insertTab')
               } else {
                 cm.execCommand('insertSoftTab')
               }
             }
+          }
         },
         'Cmd-T': function (cm) {
           // Do nothing
+        },
+        Enter: 'newlineAndIndentContinueMarkdownList',
+        'Ctrl-C': (cm) => {
+          if (cm.getOption('keyMap').substr(0, 3) === 'vim') {
+            document.execCommand('copy')
+          }
+          return CodeMirror.Pass
         }
       }
     })
@@ -72,11 +98,16 @@ export default class CodeEditor extends React.Component {
 
     this.editor.on('blur', this.blurHandler)
     this.editor.on('change', this.changeHandler)
+
+    let editorTheme = document.getElementById('editorTheme')
+    editorTheme.addEventListener('load', this.loadStyleHandler)
   }
 
   componentWillUnmount () {
     this.editor.off('blur', this.blurHandler)
     this.editor.off('change', this.changeHandler)
+    let editorTheme = document.getElementById('editorTheme')
+    editorTheme.removeEventListener('load', this.loadStyleHandler)
   }
 
   componentDidUpdate (prevProps, prevState) {
@@ -86,7 +117,7 @@ export default class CodeEditor extends React.Component {
     }
     if (prevProps.theme !== this.props.theme) {
       this.editor.setOption('theme', this.props.theme)
-      needRefresh = true
+      // editor should be refreshed after css loaded
     }
     if (prevProps.fontSize !== this.props.fontSize) {
       needRefresh = true
@@ -94,6 +125,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)
@@ -144,6 +178,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) {
@@ -152,6 +187,23 @@ 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((imagePath) => {
+      const imageMd = `![${filename}](${path.join('/:storage', imagePath)})`
+      this.insertImageMd(imageMd)
+    })
+  }
+
+  insertImageMd (imageMd) {
+    const textarea = this.editor.getInputField()
+    const cm = this.editor
+    textarea.value = `${textarea.value.substr(0, textarea.selectionStart)}${imageMd}${textarea.value.substr(textarea.selectionEnd)}`
+  }
+
   render () {
     let { className, fontFamily, fontSize } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.length > 0
@@ -169,6 +221,7 @@ export default class CodeEditor extends React.Component {
           fontFamily: fontFamily.join(', '),
           fontSize: fontSize
         }}
+        onDrop={(e) => this.handleDropImage(e)}
       />
     )
   }
@@ -186,6 +239,7 @@ CodeEditor.propTypes = {
 CodeEditor.defaultProps = {
   readOnly: false,
   theme: 'xcode',
+  keyMap: 'sublime',
   fontSize: 14,
   fontFamily: 'Monaco, Consolas',
   indentSize: 4,

browser/components/MarkdownEditor.js

@@ -3,24 +3,67 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './MarkdownEditor.styl'
 import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
+import eventEmitter from 'browser/main/lib/eventEmitter'
+import { findStorage } from 'browser/lib/findStorage'
+const _ = require('lodash')
 
 class MarkdownEditor extends React.Component {
   constructor (props) {
     super(props)
 
+    // char codes for ctrl + w
+    this.escapeFromEditor = [17, 87]
+
+    // ctrl + shift + ;
+    this.supportMdSelectionBold = [16, 17, 186]
+
     this.state = {
-      status: 'PREVIEW'
+      status: 'PREVIEW',
+      renderValue: props.value,
+      keyPressed: new Set(),
+      isLocked: false
     }
+
+    this.lockEditorCode = () => this.handleLockEditor()
   }
 
   componentDidMount () {
     this.value = this.refs.code.value
+    eventEmitter.on('editor:lock', this.lockEditorCode)
   }
 
   componentDidUpdate () {
     this.value = this.refs.code.value
   }
 
+  componentWillReceiveProps (props) {
+    if (props.value !== this.props.value) {
+      this.queueRendering(props.value)
+    }
+  }
+
+  componentWillUnmount () {
+    this.cancelQueue()
+    eventEmitter.off('editor:lock', this.lockEditorCode)
+  }
+
+  queueRendering (value) {
+    clearTimeout(this.renderTimer)
+    this.renderTimer = setTimeout(() => {
+      this.renderPreview(value)
+    }, 500)
+  }
+
+  cancelQueue () {
+    clearTimeout(this.renderTimer)
+  }
+
+  renderPreview (value) {
+    this.setState({
+      renderValue: value
+    })
+  }
+
   handleChange (e) {
     this.value = this.refs.code.value
     this.props.onChange(e)
@@ -38,14 +81,16 @@ class MarkdownEditor extends React.Component {
         if (newStatus === 'CODE') {
           this.refs.code.focus()
         } else {
-          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()
@@ -55,6 +100,7 @@ class MarkdownEditor extends React.Component {
         this.refs.preview.focus()
         this.refs.preview.scrollTo(cursorPosition.line)
       })
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
     }
   }
 
@@ -70,6 +116,7 @@ class MarkdownEditor extends React.Component {
       }, () => {
         this.refs.code.focus()
       })
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
     }
   }
 
@@ -106,14 +153,62 @@ class MarkdownEditor extends React.Component {
     } else {
       this.refs.code.focus()
     }
+    eventEmitter.emit('topbar:togglelockbutton', this.state.status)
   }
 
   reload () {
     this.refs.code.reload()
+    this.cancelQueue()
+    this.renderPreview(this.props.value)
+  }
+
+  handleKeyDown (e) {
+    let { config } = this.props
+    if (this.state.status !== 'CODE') return false
+    const keyPressed = this.state.keyPressed
+    keyPressed.add(e.keyCode)
+    this.setState({ keyPressed })
+    let isNoteHandlerKey = (el) => { return keyPressed.has(el) }
+    // These conditions are for ctrl-e and ctrl-w
+    if (keyPressed.size === this.escapeFromEditor.length &&
+        !this.state.isLocked && this.state.status === 'CODE' &&
+        this.escapeFromEditor.every(isNoteHandlerKey)) {
+      this.handleContextMenu()
+      if (config.editor.switchPreview === 'BLUR') document.activeElement.blur()
+    }
+    if (keyPressed.size === this.supportMdSelectionBold.length && this.supportMdSelectionBold.every(isNoteHandlerKey)) {
+      this.addMdAroundWord('**')
+    }
+  }
+
+  addMdAroundWord (mdElement) {
+    if (this.refs.code.editor.getSelection()) {
+      return this.addMdAroundSelection(mdElement)
+    }
+    const currentCaret = this.refs.code.editor.getCursor()
+    const word = this.refs.code.editor.findWordAt(currentCaret)
+    const cmDoc = this.refs.code.editor.getDoc()
+    cmDoc.replaceRange(mdElement, word.anchor)
+    cmDoc.replaceRange(mdElement, { line: word.head.line, ch: word.head.ch + mdElement.length })
+  }
+
+  addMdAroundSelection (mdElement) {
+    this.refs.code.editor.replaceSelection(`${mdElement}${this.refs.code.editor.getSelection()}${mdElement}`)
+  }
+
+  handleKeyUp (e) {
+    const keyPressed = this.state.keyPressed
+    keyPressed.delete(e.keyCode)
+    this.setState({ keyPressed })
+  }
+
+  handleLockEditor () {
+    this.setState({ isLocked: !this.state.isLocked })
   }
 
   render () {
-    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
     let editorIndentSize = parseInt(config.editor.indentSize, 10)
@@ -122,6 +217,8 @@ class MarkdownEditor extends React.Component {
     let previewStyle = {}
     if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
 
+    const storage = findStorage(storageKey)
+
     return (
       <div className={className == null
           ? 'MarkdownEditor'
@@ -129,16 +226,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)}
         />
@@ -148,18 +252,21 @@ 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}
           codeBlockFontFamily={config.editor.fontFamily}
           lineNumber={config.preview.lineNumber}
+          indentSize={editorIndentSize}
           ref='preview'
           onContextMenu={(e) => this.handleContextMenu(e)}
           tabIndex='0'
-          value={value}
+          value={this.state.renderValue}
           onMouseUp={(e) => this.handlePreviewMouseUp(e)}
           onMouseDown={(e) => this.handlePreviewMouseDown(e)}
           onCheckboxClick={(e) => this.handleCheckboxClick(e)}
+          storagePath={storage.path}
         />
       </div>
     )

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

@@ -1,11 +1,93 @@
 import React, { PropTypes } from 'react'
 import markdown from 'browser/lib/markdown'
 import _ from 'lodash'
-import hljsTheme from 'browser/lib/hljsThemes'
+import CodeMirror from 'codemirror'
+import consts from 'browser/lib/consts'
+import Raphael from 'raphael'
+import flowchart from 'flowchart'
+import SequenceDiagram from 'js-sequence-diagrams'
+import eventEmitter from 'browser/main/lib/eventEmitter'
+import 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 { shell } = require('electron')
+const appPath = 'file://' + (process.env.NODE_ENV === 'production'
+  ? app.getAppPath()
+  : path.resolve())
 
+function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber) {
+  return `
+@font-face {
+  font-family: 'Lato';
+  src: url('${appPath}/resources/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Regular.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+${markdownStyle}
+body {
+  font-family: ${fontFamily.join(', ')};
+  font-size: ${fontSize}px;
+}
+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;
+}
+`
+}
+
+const { shell } = require('electron')
 const OSX = global.process.platform === 'darwin'
 
 const defaultFontFamily = ['helvetica', 'arial', 'sans-serif']
@@ -24,20 +106,26 @@ 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()
+    this.printHandler = () => this.handlePrint()
+
+    this.linkClickHandler = this.handlelinkClick.bind(this)
   }
 
   handlePreviewAnchorClick (e) {
     e.preventDefault()
     e.stopPropagation()
 
-    let href = e.target.getAttribute('href')
+    let anchor = e.target.closest('a')
+    let href = anchor.getAttribute('href')
     if (_.isString(href) && href.match(/^#/)) {
       let targetElement = this.refs.root.contentWindow.document.getElementById(href.substring(1, href.length))
       if (targetElement != null) {
         this.getWindow().scrollTo(0, targetElement.offsetTop)
       }
     } else {
-      shell.openExternal(e.target.href)
+      shell.openExternal(href)
     }
   }
 
@@ -67,87 +155,210 @@ export default class MarkdownPreview extends React.Component {
     if (this.props.onMouseUp != null) this.props.onMouseUp(e)
   }
 
+  handleSaveAsText () {
+    this.exportAsDocument('txt')
+  }
+
+  handleSaveAsMd () {
+    this.exportAsDocument('md')
+  }
+
+  handlePrint () {
+    this.refs.root.contentWindow.print()
+  }
+
+  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-same-origin')
+    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}/node_modules/katex/dist/katex.min.css">
+      <link rel="stylesheet" href="${appPath}/node_modules/codemirror/lib/codemirror.css">
+      <link rel="stylesheet" id="codeTheme">
+    `
     this.rewriteIframe()
+    this.applyStyle()
 
     this.refs.root.contentWindow.document.addEventListener('mousedown', this.mouseDownHandler)
     this.refs.root.contentWindow.document.addEventListener('mouseup', this.mouseUpHandler)
+    this.refs.root.contentWindow.document.addEventListener('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)
+    eventEmitter.on('print', this.printHandler)
   }
 
   componentWillUnmount () {
     this.refs.root.contentWindow.document.body.removeEventListener('contextmenu', this.contextMenuHandler)
     this.refs.root.contentWindow.document.removeEventListener('mousedown', this.mouseDownHandler)
     this.refs.root.contentWindow.document.removeEventListener('mouseup', this.mouseUpHandler)
+    this.refs.root.contentWindow.document.removeEventListener('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)
+    eventEmitter.off('print', this.printHandler)
   }
 
   componentDidUpdate (prevProps) {
-    if (prevProps.value !== this.props.value ||
-      prevProps.fontFamily !== this.props.fontFamily ||
+    if (prevProps.value !== this.props.value) this.rewriteIframe()
+    if (prevProps.fontFamily !== this.props.fontFamily ||
       prevProps.fontSize !== this.props.fontSize ||
       prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
       prevProps.codeBlockTheme !== this.props.codeBlockTheme ||
       prevProps.lineNumber !== this.props.lineNumber ||
-      prevProps.theme !== this.props.theme
-    ) this.rewriteIframe()
+      prevProps.theme !== this.props.theme) {
+      this.applyStyle()
+      this.rewriteIframe()
+    }
   }
 
-  rewriteIframe () {
-    Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
-      el.removeEventListener('click', this.anchorClickHandler)
-    })
-    Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
-      el.removeEventListener('click', this.checkboxClickHandler)
-    })
-
-    let { value, fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, theme } = this.props
+  applyStyle () {
+    let { fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
       ? [fontFamily].concat(defaultFontFamily)
       : defaultFontFamily
     codeBlockFontFamily = _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
       ? [codeBlockFontFamily].concat(defaultCodeBlockFontFamily)
       : defaultCodeBlockFontFamily
-    codeBlockTheme = hljsTheme().some((theme) => theme.name === codeBlockTheme) ? codeBlockTheme : 'xcode'
 
-    this.refs.root.contentWindow.document.head.innerHTML = `
-      <style>
-        @font-face {
-          font-family: 'Lato';
-          src: url('../resources/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
-               url('../resources/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
-               url('../resources/fonts/Lato-Regular.ttf') format('truetype');
-          font-style: normal;
-          font-weight: normal;
-          text-rendering: optimizeLegibility;
+    this.setCodeTheme(codeBlockTheme)
+    this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, lineNumber)
   }
-        ${markdownStyle}
-        body {
-          font-family: ${fontFamily.join(', ')};
-          font-size: ${fontSize}px;
+
+  setCodeTheme (theme) {
+    theme = consts.THEMES.some((_theme) => _theme === theme) && theme !== 'default'
+      ? theme
+      : 'elegant'
+    this.getWindow().document.getElementById('codeTheme').href = `${appPath}/node_modules/codemirror/theme/${theme}.css`
   }
-        code {
-          font-family: ${codeBlockFontFamily.join(', ')};
-        }
-        .lineNumber {
-          ${lineNumber && 'display: block !important;'}
-          font-family: ${codeBlockFontFamily.join(', ')};
-          opacity: 0.5;
-        }
-      </style>
-      <link rel="stylesheet" href="../node_modules/highlight.js/styles/${codeBlockTheme}.css">
-      <link rel="stylesheet" href="../compiled/katex-style.css">
-    `
+
+  rewriteIframe () {
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.removeEventListener('click', this.anchorClickHandler)
+    })
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
+      el.removeEventListener('click', this.checkboxClickHandler)
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.removeEventListener('click', this.linkClickHandler)
+    })
+
+    let { value, theme, indentSize, codeBlockTheme, storagePath } = 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)
 
-    Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+    _.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)
     })
-    Array.prototype.forEach.call(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
       el.addEventListener('click', this.checkboxClickHandler)
     })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.addEventListener('click', this.linkClickHandler)
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('img'), (el) => {
+      if (!/\/:storage/.test(el.src)) return
+      el.src = `file:///${path.join(storagePath, 'images', path.basename(el.src))}`
+    })
+
+    codeBlockTheme = consts.THEMES.some((_theme) => _theme === codeBlockTheme)
+      ? codeBlockTheme
+      : 'default'
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.code code'), (el) => {
+      let syntax = CodeMirror.findModeByName(el.className)
+      if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
+      CodeMirror.requireMode(syntax.mode, () => {
+        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, {
+          tabSize: indentSize
+        })
+      })
+    })
+    let opts = {}
+    // if (this.props.theme === 'dark') {
+    //   opts['font-color'] = '#DDD'
+    //   opts['line-color'] = '#DDD'
+    //   opts['element-color'] = '#DDD'
+    //   opts['fill'] = '#3A404C'
+    // }
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.flowchart'), (el) => {
+      Raphael.setWindow(this.getWindow())
+      try {
+        let diagram = flowchart.parse(htmlTextHelper.decodeEntities(el.innerHTML))
+        el.innerHTML = ''
+        diagram.drawSVG(el, opts)
+        _.forEach(el.querySelectorAll('a'), (el) => {
+          el.addEventListener('click', this.anchorClickHandler)
+        })
+      } catch (e) {
+        console.error(e)
+        el.className = 'flowchart-error'
+        el.innerHTML = 'Flowchart parse error: ' + e.message
+      }
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.sequence'), (el) => {
+      Raphael.setWindow(this.getWindow())
+      try {
+        let diagram = SequenceDiagram.parse(htmlTextHelper.decodeEntities(el.innerHTML))
+        el.innerHTML = ''
+        diagram.drawSVG(el, {theme: 'simple'})
+        _.forEach(el.querySelectorAll('a'), (el) => {
+          el.addEventListener('click', this.anchorClickHandler)
+        })
+      } catch (e) {
+        console.error(e)
+        el.className = 'sequence-error'
+        el.innerHTML = 'Sequence diagram parse error: ' + e.message
+      }
+    })
   }
 
   focus () {
@@ -172,6 +383,26 @@ 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)
+  }
+
+  handlelinkClick (e) {
+    const noteHash = e.target.href.split('/').pop()
+    const regexIsNoteLink = /^(.{20})-(.{20})$/
+    if (regexIsNoteLink.test(noteHash)) {
+      eventEmitter.emit('list:jump', noteHash)
+    }
+  }
+
   render () {
     let { className, style, tabIndex } = this.props
     return (
@@ -193,5 +424,6 @@ MarkdownPreview.propTypes = {
   onMouseUp: PropTypes.func,
   onMouseDown: PropTypes.func,
   className: PropTypes.string,
-  value: PropTypes.string
+  value: PropTypes.string,
+  storagePath: PropTypes.string
 }

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,100 @@
+/**
+ * @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} handleDragStart
+ * @param {string} dateDisplay
+ */
+const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleDragStart }) => (
+  <div styleName={isActive
+      ? 'item--active'
+      : 'item'
+    }
+    key={`${note.storage}-${note.key}`}
+    onClick={e => handleNoteClick(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,
+    isTrashed: PropTypes.bool.isRequired
+  }),
+  handleNoteClick: PropTypes.func.isRequired,
+  handleDragStart: PropTypes.func.isRequired,
+  handleDragEnd: PropTypes.func.isRequired
+}
+
+export default CSSModules(NoteItem, styles)

browser/components/NoteItem.styl

@@ -0,0 +1,192 @@
+$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 14px
+  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 7px
+  padding-left 2px
+  margin-right 27px
+
+.item-bottom-tagList-item
+  font-size 11px
+  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 11px
+  padding-left 2px
+  padding-bottom 2px
+
+.item-star
+  position absolute
+  right 5px
+  bottom 0px
+  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,50 @@
+/**
+ * @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} handleDragStart
+ */
+const NoteItemSimple = ({ isActive, note, handleNoteClick, handleDragStart }) => (
+  <div styleName={isActive
+      ? 'item-simple--active'
+      : 'item-simple'
+    }
+    key={`${note.storage}-${note.key}`}
+    onClick={e => handleNoteClick(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,
+  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 20px
+  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 13px
+  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,52 @@
+/**
+ * @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, isTrashedActive, handleTrashedButtonClick
+}) => (
+  <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>
+    <button styleName={isTrashedActive ? 'menu-button--active' : 'menu-button'}
+      onClick={handleTrashedButtonClick}
+    >
+      <i className='fa fa-trash fa-fw' />
+      <span styleName='menu-button-label'>Trash</span>
+    </button>
+  </div>
+)
+
+SideNavFilter.propTypes = {
+  isFolded: PropTypes.bool,
+  isHomeActive: PropTypes.bool.isRequired,
+  handleAllNotesButtonClick: PropTypes.func.isRequired,
+  isStarredActive: PropTypes.bool.isRequired,
+  isTrashedActive: PropTypes.bool.isRequired,
+  handleStarredButtonClick: PropTypes.func.isRequired,
+  handleTrashdButtonClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(SideNavFilter, styles)

browser/components/SideNavFilter.styl

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

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.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/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/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
@@ -68,10 +68,15 @@ body
     padding 5px
     margin -5px
     border-radius 5px
+  .flowchart-error, .sequence-error
+    background-color errorBackgroundColor
+    color errorTextColor
+    padding 5px
+    border-radius 5px
+    justify-content left
 li
   label.taskListItem
     margin-left -2em
-    background-color white
 div.math-rendered
   text-align center
 .math-failed
@@ -191,7 +196,7 @@ code
   padding 0.2em 0.4em
   background-color #f7f7f7
   border-radius 3px
-  font-size 0.85em
+  font-size 1em
   text-decoration none
   margin-right 2px
 pre
@@ -200,26 +205,40 @@ pre
   border-radius 5px
   overflow-x auto
   margin 0 0 1em
-  line-height 1.35
+  display flex
+  line-height 1.4em
+  &.flowchart, &.sequence
+    display flex
+    justify-content center
+    background-color white
+  &.CodeMirror
+    height initial
+    &>code
+      flex 1
+      overflow-x auto
   code
-    margin 0
     background-color inherit
+    margin 0
     padding 0
     border none
     border-radius 0
-    pre
-      border none
-      margin -5px
   &>span.lineNumber
     display none
-    float left
-    font-size 0.85em
-    margin 0 0.5em 0 -0.5em
+    font-size 1em
+    padding 0.5em 0
+    margin -0.5em 0.5em -0.5em -0.5em
     border-right 1px solid
     text-align right
+    border-top-left-radius 4px
+    border-bottom-left-radius 4px
+    &.CodeMirror-gutters
+      position initial
+      top initial
+      left initial
+      min-height 0 !important
     &>span
       display block
-      padding 0 .5em 0 1em
+      padding 0 .5em 0
 table
   display block
   width 100%
@@ -251,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
@@ -268,6 +288,7 @@ 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, 5%)
 

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 110px + 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,10 +1,11 @@
-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'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
 import CodeEditor from 'browser/components/CodeEditor'
 import CodeMirror from 'codemirror'
+import { findStorage } from 'browser/lib/findStorage'
 
 const electron = require('electron')
 const { clipboard } = electron
@@ -97,9 +98,7 @@ class NoteDetail extends React.Component {
     let { note, config } = this.props
     if (note == null) {
       return (
-        <div styleName='root'>
-
-        </div>
+        <div styleName='root' />
       )
     }
 
@@ -108,6 +107,8 @@ class NoteDetail extends React.Component {
     let editorIndentSize = parseInt(config.editor.indentSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
 
+    const storage = findStorage(note.storage)
+
     if (note.type === 'SNIPPET_NOTE') {
       let tabList = note.snippets.map((snippet, index) => {
         let isActive = this.state.snippetIndex === index
@@ -145,6 +146,7 @@ class NoteDetail extends React.Component {
               config={config}
               value={snippet.content}
               ref={'code-' + index}
+              storageKey={note.storage}
             />
             : <CodeEditor styleName='tabView-content'
               mode={snippet.mode}
@@ -154,6 +156,7 @@ class NoteDetail extends React.Component {
               fontSize={editorFontSize}
               indentType={config.editor.indentType}
               indentSize={editorIndentSize}
+              keyMap={config.editor.keyMap}
               readOnly
               ref={'code-' + index}
             />
@@ -185,12 +188,15 @@ class NoteDetail extends React.Component {
 
     return (
       <MarkdownPreview styleName='root'
+        theme={config.ui.theme}
         fontSize={config.preview.fontSize}
         fontFamily={config.preview.fontFamily}
         codeBlockTheme={config.preview.codeBlockTheme}
         codeBlockFontFamily={config.editor.fontFamily}
         lineNumber={config.preview.lineNumber}
+        indentSize={editorIndentSize}
         value={note.content}
+        storagePath={storage.path}
       />
     )
   }

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 transparent
+    transition color background-color 0.15s
+    border-left 4px solid transparent
+    &:hover
+      color white
       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

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,22 @@ 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)}
           />
         )
       })

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}}
+      .map(folder => (
+        <StorageItem
           key={folder.key}
-            onClick={(e) => this.handleFolderClick(e, folder)}
-          >
-            {folder.name}
-          </button>
-        )
-      })
+          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.recordDynamicCustomEvent('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>

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']})
+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 formatDate (date) {
+  const m = moment(date)
+  if (!m.isValid()) {
+    throw Error('Invalid argument.')
+  }
+
+  return m.format('MMM D, gggg H:mm')
+}

browser/lib/findNoteTitle.js

@@ -0,0 +1,33 @@
+export function findNoteTitle (value) {
+  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/findStorage.js

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

browser/lib/hljsThemes.js

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

browser/lib/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

@@ -1,7 +1,6 @@
 import markdownit from 'markdown-it'
 import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
-import hljs from 'highlight.js'
 import _ from 'lodash'
 
 const katex = window.katex
@@ -10,9 +9,9 @@ function createGutter (str) {
   let lc = (str.match(/\n/g) || []).length
   let lines = []
   for (let i = 1; i <= lc; i++) {
-    lines.push('<span>' + i + '</span>')
+    lines.push('<span class="CodeMirror-linenumber">' + i + '</span>')
   }
-  return '<span class="lineNumber">' + lines.join('') + '</span>'
+  return '<span class="lineNumber CodeMirror-gutters">' + lines.join('') + '</span>'
 }
 
 var md = markdownit({
@@ -20,20 +19,18 @@ var md = markdownit({
   linkify: true,
   html: true,
   xhtmlOut: true,
+  breaks: true,
   highlight: function (str, lang) {
-    if (lang && hljs.getLanguage(lang)) {
-      try {
-        return '<pre class="hljs">' +
-        createGutter(str) +
-        '<code>' +
-        hljs.highlight(lang, str).value +
-        '</code></pre>'
-      } catch (e) {}
+    if (lang === 'flowchart') {
+      return `<pre class="flowchart">${str}</pre>`
     }
-    return '<pre class="hljs">' +
+    if (lang === 'sequence') {
+      return `<pre class="sequence">${str}</pre>`
+    }
+    return '<pre class="code">' +
     createGutter(str) +
-    '<code>' +
-    str.replace(/\&/g, '&amp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/\"/g, '&quot;') +
+    '<code class="' + lang + '">' +
+    str +
     '</code></pre>'
   }
 })
@@ -60,6 +57,7 @@ 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 */) {
@@ -139,13 +137,13 @@ function strip (input) {
       .replace(/`{3}.*\n/g, '')
       .replace(/<(.*?)>/g, '$1')
       .replace(/^[=\-]{2,}\s*$/g, '')
-      .replace(/\[\^.+?\](\: .*?$)?/g, '')
+      .replace(/\[\^.+?\](: .*?$)?/g, '')
       .replace(/\s{0,2}\[.*?\]: .*?$/g, '')
-      .replace(/\!\[.*?\][\[\(].*?[\]\)]/g, '')
+      .replace(/!\[.*?\][\[\(].*?[\]\)]/g, '')
       .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
       .replace(/>/g, '')
       .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
-      .replace(/^\#{1,6}\s*([^#]*)\s*(\#{1,6})?/gm, '$1')
+      .replace(/^#{1,6}\s*([^#]*)\s*(#{1,6})?/gm, '$1')
       .replace(/([\*_]{1,3})(\S.*?\S)\1/g, '$2')
       .replace(/(`{3,})(.*?)\1/gm, '$2')
       .replace(/^-{3,}\s*$/g, '')
@@ -161,7 +159,8 @@ function strip (input) {
 const markdown = {
   render: function markdown (content) {
     if (!_.isString(content)) content = ''
-    return md.render(content)
+    const renderedContent = md.render(content)
+    return md.normalizeLinkText(renderedContent)
   },
   strip
 }

browser/lib/search.js

@@ -0,0 +1,42 @@
+import _ from 'lodash'
+
+export default function searchFromNotes (notes, search) {
+  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

@@ -1,35 +1,34 @@
 .root
   position relative
   border solid 1px transparent
-  line-height 34px
+  line-height 26px
   vertical-align middle
   border-radius 2px
   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/InfoButton.js

@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './InfoButton.styl'
+
+const InfoButton = ({
+  onClick
+}) => (
+  <button styleName='control-infoButton'
+    onClick={onClick}
+  >
+    <i className='fa fa-info infoButton' styleName='info-button' />
+  </button>
+)
+
+InfoButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(InfoButton, styles)

browser/main/Detail/InfoButton.styl

@@ -0,0 +1,21 @@
+.control-infoButton
+  float right
+  topBarButtonLight()
+
+.control-infoPanel
+  position fixed
+  pointer-events none
+  top 50px
+  z-index 200
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.infoButton
+  padding 0px
+  margin 15px 0
+
+body[data-theme="dark"]
+  .control-infoButton
+    topBarButtonDark()

browser/main/Detail/InfoPanel.js

@@ -0,0 +1,79 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './InfoPanel.styl'
+
+const InfoPanel = ({
+  storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt
+}) => (
+  <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Storage
+      </div>
+      <div styleName='group-section-control'>
+        {storageName}
+      </div>
+    </div>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Folder
+      </div>
+      <div styleName='group-section-control'>
+        {folderName}
+      </div>
+    </div>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Created
+      </div>
+      <div styleName='group-section-control'>
+        {createdAt}
+      </div>
+    </div>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Updated
+      </div>
+      <div styleName='group-section-control'>
+        {updatedAt}
+      </div>
+    </div>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Note Link
+      </div>
+      <div styleName='group-section-control'>
+        <input value={noteLink} onClick={(e) => { e.target.select() }} />
+      </div>
+    </div>
+
+    <div id='export-wrap'>
+      <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
+        <i className='fa fa-file-code-o fa-fw' />
+        <p>.md</p>
+      </button>
+
+      <button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
+        <i className='fa fa-file-text-o fa-fw' />
+        <p>.txt</p>
+      </button>
+
+      <button styleName='export--unable'>
+        <i className='fa fa-file-pdf-o fa-fw' />
+        <p>.pdf</p>
+      </button>
+    </div>
+  </div>
+)
+
+InfoPanel.propTypes = {
+  storageName: PropTypes.string.isRequired,
+  folderName: PropTypes.string.isRequired,
+  noteLink: PropTypes.string.isRequired,
+  updatedAt: PropTypes.string.isRequired,
+  createdAt: PropTypes.string.isRequired,
+  exportAsMd: PropTypes.func.isRequired,
+  exportAsTxt: PropTypes.func.isRequired
+}
+
+export default CSSModules(InfoPanel, styles)

browser/main/Detail/InfoPanel.styl

@@ -0,0 +1,124 @@
+.control-infoPanel
+  position fixed
+  pointer-events none
+  top 50px
+  z-index 200
+  line-height normal
+  border-radius 4px
+  opacity 0
+  transition 0.2s
+
+.control-infoButton-panel
+  z-index 200
+  margin-top 45px
+  margin-left -210px
+  position absolute
+  padding 20px 20px 0 20px
+  width 340px
+  background-color $ui-noteList-backgroundColor
+  border 1px solid $border-color
+
+.control-infoButton-panel-trash
+  z-index 200
+  margin-top 45px
+  margin-left -230px
+  position absolute
+  padding 20px 20px 0 20px
+  width 320px
+  background-color $ui-noteList-backgroundColor
+  border 1px solid $border-color
+
+.group-section
+  display flex
+  line-height 30px
+  font-size 13px
+
+.group-section-label
+  width 70px
+  height 20px
+  text-align left
+  margin-right 50px
+  font-size 13px
+  color $ui-inactive-text-color
+
+.group-section-control
+  flex 1
+  font-size 13px
+  color $ui-text-color
+
+.group-section-control input
+  width 160px
+  height 25px
+
+.group-section-control text
+  color #EA4447
+  font-weight 600
+  font-size 14px
+  width 70px
+  height 25px
+  background-color rgba(226,33,113,0.1)
+  border none
+  outline none
+  border-radius 2px
+  margin-right 5px
+  padding 2px 5px
+
+[id=export-wrap]
+  height 90px
+  display flex
+  justify-content center
+  margin 20px 0 10px 0
+  button
+    outline none
+    font-size 48px
+    color #A0A0A0
+    background-color transparent
+    border none
+    margin 0 5px
+    border-radius 5px
+    &:hover
+      transition 0.2s
+      background-color alpha($ui-button--hover-backgroundColor, 30%)
+      color $ui-inactive-text-color
+  p
+    font-size 13px
+    color #A0A0A0
+    font-weight light
+    &:hover
+      color $ui-inactive-text-color
+
+.export--enable
+  cursor pointer
+
+.export--unable
+  cursor not-allowed
+
+body[data-theme="dark"]
+  .control-infoButton-panel
+    background-color $ui-dark-noteList-backgroundColor
+    border 1px solid $ui-dark-borderColor
+
+  .control-infoButton-panel-trash
+    background-color $ui-dark-noteList-backgroundColor
+    border 1px solid $ui-dark-borderColor
+
+  .group-section-label
+    color $ui-inactive-text-color
+
+  .group-section-control
+    color $ui-dark-text-color
+
+  .group-section-control input
+    background-color alpha($ui-dark-borderColor, 80%)
+    color $ui-dark-text-color
+
+  [id=export-wrap]
+    button
+      color $ui-dark-inactive-text-color
+      &:hover
+        background-color alpha($ui-dark-borderColor, 20%)
+        color $ui-dark-text-color
+    p
+      color $ui-dark-inactive-text-color
+      &:hover
+        color $ui-dark-text-color

browser/main/Detail/InfoPanelTrashed.js

@@ -0,0 +1,70 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './InfoPanel.styl'
+
+const InfoPanelTrashed = ({
+  storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt
+}) => (
+  <div className='infoPanel' styleName='control-infoButton-panel-trash' style={{display: 'none'}}>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Storage
+      </div>
+      <div styleName='group-section-control'>
+        {storageName}
+      </div>
+    </div>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Folder
+      </div>
+      <div styleName='group-section-control'>
+        <text>Trash</text>{folderName}
+      </div>
+    </div>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Created
+      </div>
+      <div styleName='group-section-control'>
+        {createdAt}
+      </div>
+    </div>
+    <div styleName='group-section'>
+      <div styleName='group-section-label'>
+        Updated
+      </div>
+      <div styleName='group-section-control'>
+        {updatedAt}
+      </div>
+    </div>
+
+    <div id='export-wrap'>
+      <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
+        <i className='fa fa-file-code-o fa-fw' />
+        <p>.md</p>
+      </button>
+
+      <button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
+        <i className='fa fa-file-text-o fa-fw' />
+        <p>.txt</p>
+      </button>
+
+      <button styleName='export--unable'>
+        <i className='fa fa-file-pdf-o fa-fw' />
+        <p>.pdf</p>
+      </button>
+    </div>
+  </div>
+)
+
+InfoPanelTrashed.propTypes = {
+  storageName: PropTypes.string.isRequired,
+  folderName: PropTypes.string.isRequired,
+  updatedAt: PropTypes.string.isRequired,
+  createdAt: PropTypes.string.isRequired,
+  exportAsMd: PropTypes.func.isRequired,
+  exportAsTxt: PropTypes.func.isRequired
+}
+
+export default CSSModules(InfoPanelTrashed, styles)

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,13 @@ 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'
+import TrashButton from './TrashButton'
+import InfoButton from './InfoButton'
+import InfoPanel from './InfoPanel'
+import InfoPanelTrashed from './InfoPanelTrashed'
+import { formatDate } from 'browser/lib/date-formatter'
 
 const electron = require('electron')
 const { remote } = electron
@@ -25,15 +33,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()
@@ -41,7 +57,7 @@ class MarkdownNoteDetail extends React.Component {
         note: Object.assign({}, nextProps.note)
       }, () => {
         this.refs.content.reload()
-        this.refs.tags.reset()
+        if (this.refs.tags) this.refs.tags.reset()
       })
     }
   }
@@ -50,42 +66,34 @@ class MarkdownNoteDetail 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
-      }
+  componentDidUnmount () {
+    ee.off('topbar:togglelockbutton', this.toggleLockButton)
   }
 
-    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 = ''
-      }
-    }
+  getPercentageOfCompleteTodo (noteContent) {
+    let splitted = noteContent.split('\n')
+    let numberOfTodo = 0
+    let numberOfCompletedTodo = 0
 
-    title = markdown.strip(title)
+    splitted.forEach((line) => {
+      let trimmedLine = line.trim()
+      if (trimmedLine.match(/^[\+\-\*] \[\s|x\] ./)) {
+        numberOfTodo++
+      }
+      if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {
+        numberOfCompletedTodo++
+      }
+    })
 
-    return title
+    return Math.floor(numberOfCompletedTodo / numberOfTodo * 100)
   }
 
   handleChange (e) {
     let { note } = this.state
 
     note.content = this.refs.content.value
-    note.tags = this.refs.tags.value
-    note.title = this.findTitle(note.content)
+    if (this.refs.tags) note.tags = this.refs.tags.value
+    note.title = markdown.strip(findNoteTitle(note.content))
     note.updatedAt = new Date()
 
     this.setState({
@@ -114,6 +122,7 @@ class MarkdownNoteDetail extends React.Component {
           type: 'UPDATE_NOTE',
           note: note
         })
+        AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
       })
   }
 
@@ -152,6 +161,7 @@ class MarkdownNoteDetail extends React.Component {
 
   handleStarButtonClick (e) {
     let { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
 
@@ -166,37 +176,26 @@ 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())
+  exportAsMd () {
+    ee.emit('export:save-md')
   }
 
-  handleContextButtonClick (e) {
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Delete',
-      click: (e) => this.handleDeleteMenuClick(e)
-    }))
-    menu.popup(remote.getCurrentWindow())
+  exportAsTxt () {
+    ee.emit('export:save-text')
   }
 
-  handleDeleteMenuClick (e) {
-    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+  handleTrashButtonClick (e) {
+    let { note } = this.state
+    const { isTrashed } = note
+
+    if (isTrashed) {
+      let dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
         type: 'warning',
-      message: 'Delete a note',
-      detail: 'This work cannot be undone.',
+        message: 'Confirm note deletion',
+        detail: 'This will permanently remove this note.',
         buttons: ['Confirm', 'Cancel']
       })
-    if (index === 0) {
+      if (dialogueButtonIndex === 1) return
       let { note, dispatch } = this.props
       dataApi
         .deleteNote(note.storage, note.key)
@@ -209,26 +208,116 @@ class MarkdownNoteDetail extends React.Component {
             })
           }
           ee.once('list:moved', dispatchHandler)
+        })
+    } else {
+      note.isTrashed = true
+
+      this.setState({
+        note
+      }, () => {
+        this.save()
+      })
+    }
+    ee.emit('list:next')
+  }
+
+  handleUndoButtonClick (e) {
+    let { note } = this.state
+
+    note.isTrashed = false
+
+    this.setState({
+      note
+    }, () => {
+      this.save()
+      this.refs.content.reload()
       ee.emit('list:next')
     })
   }
+
+  handleFullScreenButton (e) {
+    ee.emit('editor:fullscreen')
+  }
+
+  handleLockButtonMouseDown (e) {
+    e.preventDefault()
+    ee.emit('editor:lock')
+    this.setState({ isLocked: !this.state.isLocked })
+    if (this.state.isLocked) this.focus()
+  }
+
+  getToggleLockButton () {
+    return this.state.isLocked ? 'fa-lock' : 'fa-unlock'
   }
 
   handleDeleteKeyDown (e) {
     if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
   }
 
-  render () {
-    let { data, config } = this.props
-    let { note } = this.state
+  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})
+    }
+  }
 
-    return (
-      <div className='NoteDetail'
-        style={this.props.style}
-        styleName='root'
-      >
-        <div styleName='info'>
+  handleFocus (e) {
+    this.focus()
+  }
+
+  handleInfoButtonClick (e) {
+    const infoPanel = document.querySelector('.infoPanel')
+    if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none'
+  }
+
+  render () {
+    let { data, config, location } = this.props
+    let { note } = this.state
+    let storageKey = note.storage
+    let folderKey = note.folder
+
+    let options = []
+    data.storageMap.forEach((storage, index) => {
+      storage.folders.forEach((folder) => {
+        options.push({
+          storage: storage,
+          folder: folder
+        })
+      })
+    })
+    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+
+    const trashTopBar = <div styleName='info'>
       <div styleName='info-left'>
+        <i styleName='undo-button'
+          className='fa fa-undo fa-fw'
+          onClick={(e) => this.handleUndoButtonClick(e)}
+        />
+      </div>
+      <div styleName='info-right'>
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+        <InfoPanelTrashed
+          storageName={currentOption.storage.name}
+          folderName={currentOption.folder.name}
+          updatedAt={formatDate(note.updatedAt)}
+          createdAt={formatDate(note.createdAt)}
+          exportAsMd={this.exportAsMd}
+          exportAsTxt={this.exportAsTxt}
+        />
+      </div>
+    </div>
+
+    const detailTopBar = <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,46 +326,69 @@ 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>
+        <TodoListPercentage
+          percentageOfTodo={this.getPercentageOfCompleteTodo(note.content)}
+        />
       </div>
       <div styleName='info-right'>
-            <StarButton styleName='info-right-button'
-              onClick={(e) => this.handleStarButtonClick(e)}
-              isActive={note.isStarred}
+        {(() => {
+          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 : ''
+          )
+        })()}
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <button styleName='control-fullScreenButton'
+          onMouseDown={(e) => this.handleFullScreenButton(e)}
+        >
+          <i className='fa fa-expand' styleName='fullScreen-button' />
+        </button>
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+        <InfoPanel
+          storageName={currentOption.storage.name}
+          folderName={currentOption.folder.name}
+          noteLink={`[${note.title}](${location.query.key})`}
+          updatedAt={formatDate(note.updatedAt)}
+          createdAt={formatDate(note.createdAt)}
+          exportAsMd={this.exportAsMd}
+          exportAsTxt={this.exportAsTxt}
         />
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleShareButtonClick(e)}
-              disabled
-            >
-              <i className='fa fa-share-alt fa-fw' />
-              <span styleName='info-right-button-tooltip'
-                style={{right: 20}}
-              >Share Note</span>
-            </button>
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleContextButtonClick(e)}
-            >
-              <i className='fa fa-ellipsis-v' />
-              <span styleName='info-right-button-tooltip'
-                style={{right: 5}}
-              >More Options</span>
-            </button>
       </div>
     </div>
 
+    return (
+      <div className='NoteDetail'
+        style={this.props.style}
+        styleName='root'
+      >
+
+        {location.pathname === '/trashed' ? trashTopBar : detailTopBar}
+
         <div styleName='body'>
           <MarkdownEditor
             ref='content'
             styleName='body-noteEditor'
             config={config}
             value={this.state.note.content}
+            storageKey={this.state.note.storage}
             onChange={(e) => this.handleChange(e)}
             ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
           />
@@ -284,6 +396,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,42 @@
-$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-fullScreenButton
+  float right
+  padding 0 0 2px 0
+  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 +45,14 @@ $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-fullScreenButton
+    topBarButtonDark()

browser/main/Detail/NoteDetailInfo.styl

@@ -0,0 +1,99 @@
+@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
+  padding 0 3px
+  height 34px
+  line-height 26px
+  display flex
+  align-items center
+  justify-content center
+  border-radius 3px
+.info-left-button
+  width 34px
+  height 34px
+  navButtonColor()
+  color $ui-favorite-star-button-color
+  font-size 14px
+  line-height 0
+  margin 13px 2px
+  padding 0
+  border-radius 17px
+  &:hover .info-left-button-tooltip
+    opacity 1
+  &:focus
+    border-color $ui-favorite-star-button-color
+  &:active, &:active:hover
+    background-color $ui-favorite-star-button-color
+    color $ui-button--color
+
+.info-right
+  position absolute
+  right 0
+  top 0
+  background $ui-noteDetail-backgroundColor
+  bottom 1px
+  padding-left 30px
+
+.undo-button
+  width 34px
+  height 34px
+  border-radius 17px
+  font-size 14px
+  margin 15px 7px
+  border none
+  color $ui-button-color
+  display flex
+  align-items center
+  justify-content center
+  fill $ui-button-color
+  background-color transparent
+  cursor pointer
+  &:active
+    border-color $ui-button--active-backgroundColor
+  &:hover
+    background-color alpha($ui-button--hover-backgroundColor, 60%)
+    .control-lockButton-tooltip
+      opacity 1
+
+body[data-theme="dark"]
+  .info
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
+
+  .info-delete
+    color $ui-dark-text-color
+
+  .info-delete-confirmButton
+    colorDarkDangerButton()
+    color $ui-dark-text-color
+
+  .info-delete-cancelButton
+    colorDarkDefaultButton()
+    border-color $ui-dark-borderColor
+    color $ui-dark-text-color
+
+  .info-right
+    background-color $ui-dark-noteDetail-backgroundColor
+
+  .undo-button
+    topBarButtonDark()

browser/main/Detail/SnippetNoteDetail.js

@@ -10,10 +10,18 @@ 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'
+import TrashButton from './TrashButton'
+import InfoButton from './InfoButton'
+import InfoPanel from './InfoPanel'
+import InfoPanelTrashed from './InfoPanelTrashed'
+import { formatDate } from 'browser/lib/date-formatter'
 
 function pass (name) {
   switch (name) {
@@ -50,7 +58,7 @@ class SnippetNoteDetail extends React.Component {
   }
 
   componentWillReceiveProps (nextProps) {
-    if (nextProps.note.key !== this.props.note.key) {
+    if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
       if (this.saveQueue != null) this.saveNow()
       let nextNote = Object.assign({
         description: ''
@@ -65,7 +73,7 @@ class SnippetNoteDetail extends React.Component {
         snippets.forEach((snippet, index) => {
           this.refs['code-' + index].reload()
         })
-        this.refs.tags.reset()
+        if (this.refs.tags) this.refs.tags.reset()
       })
     }
   }
@@ -74,41 +82,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
+    if (this.refs.tags) 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 +116,7 @@ class SnippetNoteDetail extends React.Component {
           type: 'UPDATE_NOTE',
           note: note
         })
+        AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
       })
   }
 
@@ -174,6 +155,7 @@ class SnippetNoteDetail extends React.Component {
 
   handleStarButtonClick (e) {
     let { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
 
@@ -188,36 +170,18 @@ 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())
-  }
+  handleTrashButtonClick (e) {
+    let { note } = this.state
+    const { isTrashed } = note
 
-  handleContextButtonClick (e) {
-    context.popup([{
-      label: 'Delete',
-      click: (e) => this.handleDeleteMenuClick(e)
-    }])
-  }
-
-  handleDeleteMenuClick (e) {
-    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+    if (isTrashed) {
+      let dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
         type: 'warning',
-      message: 'Delete a note',
-      detail: 'This work cannot be undone.',
+        message: 'Confirm note deletion',
+        detail: 'This will permanently remove this note.',
         buttons: ['Confirm', 'Cancel']
       })
-    if (index === 0) {
+      if (dialogueButtonIndex === 1) return
       let { note, dispatch } = this.props
       dataApi
         .deleteNote(note.storage, note.key)
@@ -230,9 +194,34 @@ class SnippetNoteDetail extends React.Component {
             })
           }
           ee.once('list:moved', dispatchHandler)
+        })
+    } else {
+      note.isTrashed = true
+
+      this.setState({
+        note
+      }, () => {
+        this.save()
+      })
+    }
+    ee.emit('list:next')
+  }
+
+  handleUndoButtonClick (e) {
+    let { note } = this.state
+
+    note.isTrashed = false
+
+    this.setState({
+      note
+    }, () => {
+      this.save()
       ee.emit('list:next')
     })
   }
+
+  handleFullScreenButton (e) {
+    ee.emit('editor:fullscreen')
   }
 
   handleTabPlusButtonClick (e) {
@@ -264,15 +253,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()
     })
   }
 
@@ -473,10 +462,27 @@ class SnippetNoteDetail extends React.Component {
     this.refs['code-' + this.state.snippetIndex].focus()
   }
 
+  handleInfoButtonClick (e) {
+    const infoPanel = document.querySelector('.infoPanel')
+    if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none'
+  }
+
+  showWarning () {
+    dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: 'Sorry!',
+      detail: 'md/text import is available only a markdown note.',
+      buttons: ['OK']
+    })
+  }
+
   render () {
-    let { data, config } = this.props
+    let { data, config, location } = this.props
     let { note } = this.state
 
+    let storageKey = note.storage
+    let folderKey = note.folder
+
     let editorFontSize = parseInt(config.editor.fontSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
     let editorIndentSize = parseInt(config.editor.indentSize, 10)
@@ -507,13 +513,14 @@ class SnippetNoteDetail extends React.Component {
         key={index}
         style={{zIndex: isActive ? 5 : 4}}
       >
-        {snippet.mode === 'markdown'
+        {snippet.mode === 'Markdown' || snippet.mode === 'GitHub Flavored Markdown'
           ? <MarkdownEditor styleName='tabView-content'
             value={snippet.content}
             config={config}
             onChange={(e) => this.handleCodeChange(index)(e)}
             ref={'code-' + index}
             ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
+            storageKey={storageKey}
           />
           : <CodeEditor styleName='tabView-content'
             mode={snippet.mode}
@@ -523,6 +530,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}
           />
@@ -530,14 +538,46 @@ class SnippetNoteDetail extends React.Component {
       </div>
     })
 
-    return (
-      <div className='NoteDetail'
-        style={this.props.style}
-        styleName='root'
-        onKeyDown={(e) => this.handleKeyDown(e)}
-      >
-        <div styleName='info'>
+    let options = []
+    data.storageMap.forEach((storage, index) => {
+      storage.folders.forEach((folder) => {
+        options.push({
+          storage: storage,
+          folder: folder
+        })
+      })
+    })
+    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+
+    const trashTopBar = <div styleName='info'>
       <div styleName='info-left'>
+        <i styleName='undo-button'
+          className='fa fa-undo fa-fw'
+          onClick={(e) => this.handleUndoButtonClick(e)}
+        />
+      </div>
+      <div styleName='info-right'>
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+        <InfoPanelTrashed
+          storageName={currentOption.storage.name}
+          folderName={currentOption.folder.name}
+          updatedAt={formatDate(note.updatedAt)}
+          createdAt={formatDate(note.createdAt)}
+          exportAsMd={this.showWarning}
+          exportAsTxt={this.showWarning}
+        />
+      </div>
+    </div>
+
+    const detailTopBar = <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,40 +586,43 @@ 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>
-          </div>
       <div styleName='info-right'>
-            <StarButton styleName='info-right-button'
-              onClick={(e) => this.handleStarButtonClick(e)}
-              isActive={note.isStarred}
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <button styleName='control-fullScreenButton'
+          onMouseDown={(e) => this.handleFullScreenButton(e)}
+        >
+          <i className='fa fa-expand' styleName='fullScreen-button' />
+        </button>
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+        <InfoPanel
+          storageName={currentOption.storage.name}
+          folderName={currentOption.folder.name}
+          noteLink={`[${note.title}](${location.query.key})`}
+          updatedAt={formatDate(note.updatedAt)}
+          createdAt={formatDate(note.createdAt)}
+          exportAsMd={this.showWarning}
+          exportAsTxt={this.showWarning}
         />
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleShareButtonClick(e)}
-              disabled
-            >
-              <i className='fa fa-share-alt fa-fw'/>
-              <span styleName='info-right-button-tooltip'
-                style={{right: 20}}
-              >Share Note</span>
-            </button>
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleContextButtonClick(e)}
-            >
-              <i className='fa fa-ellipsis-v'/>
-              <span styleName='info-right-button-tooltip'
-                style={{right: 5}}
-              >More Options</span>
-            </button>
       </div>
     </div>
 
+    return (
+      <div className='NoteDetail'
+        style={this.props.style}
+        styleName='root'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
+        {location.pathname === '/trashed' ? trashTopBar : detailTopBar}
+
         <div styleName='body'>
           <div styleName='description'>
             <textarea
@@ -632,6 +675,7 @@ class SnippetNoteDetail extends React.Component {
 
         <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,43 @@ $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-fullScreenButton
+  float right
+  padding 0 0 2px 0
+  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 +96,10 @@ 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-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.recordDynamicCustomEvent('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,9 +127,6 @@ class TagSelect extends React.Component {
         }
         styleName='root'
       >
-        <i styleName='icon'
-          className='fa fa-tags'
-        />
         {tagList}
         <input styleName='newTag'
           ref='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,46 @@
 .root
-  position relative
-  user-select none
-
-.icon
   display inline-block
-  width 30px
+  user-select none
+  height 23px
   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
-  vertical-align middle
+  margin 1px 3px
+  padding 0
   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
@@ -48,26 +48,18 @@
 
 .newTag
   display inline-block
-  margin 0 2px
+  margin 2px 0 15px 2px
   vertical-align middle
-  height 24px
+  height 18px
   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 +70,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

browser/main/Detail/TrashButton.js

@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TrashButton.styl'
+
+const TrashButton = ({
+  onClick
+}) => (
+  <button styleName='control-trashButton'
+    onClick={(e) => onClick(e)}
+  >
+    <i className='fa fa-trash trashButton' styleName='info-button' />
+  </button>
+)
+
+TrashButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(TrashButton, styles)

browser/main/Detail/TrashButton.styl

@@ -0,0 +1,11 @@
+.control-trashButton
+  float right
+  topBarButtonLight()
+
+.trashButton
+  padding 0px
+  margin 15px 0
+
+body[data-theme="dark"]
+  .control-trashButton
+    topBarButtonDark()

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.handleTrashButtonClick()
     }
   }
 
@@ -49,7 +49,7 @@ class Detail extends React.Component {
           tabIndex='0'
         >
           <div styleName='empty'>
-            <div styleName='empty-message'>{OSX ? 'Command(⌘)' : 'Ctrl(^)'} + N<br />to create a new post</div>
+            <div styleName='empty-message'>{OSX ? 'Command(⌘)' : 'Ctrl(^)'} + N<br />to create a new note</div>
           </div>
           <StatusBar
             {..._.pick(this.props, ['config', 'location', 'dispatch'])}

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,34 @@ class Main extends React.Component {
     }
   }
 
+  handleFullScreenButton (e) {
+    this.setState({ fullScreen: !this.state.fullScreen }, () => {
+      const noteDetail = document.querySelector('.NoteDetail')
+      const noteList = document.querySelector('.NoteList')
+      const mainBody = document.querySelector('#main-body')
+
+      if (this.state.fullScreen) {
+        this.hideLeftLists(noteDetail, noteList, mainBody)
+      } else {
+        this.showLeftLists(noteDetail, noteList, mainBody)
+      }
+    })
+  }
+
+  hideLeftLists (noteDetail, noteList, mainBody) {
+    this.state.noteDetailWidth = noteDetail.style.left
+    this.state.mainBodyWidth = mainBody.style.left
+    noteDetail.style.left = '0px'
+    mainBody.style.left = '0px'
+    noteList.style.display = 'none'
+  }
+
+  showLeftLists (noteDetail, noteList, mainBody) {
+    noteDetail.style.left = this.state.noteDetailWidth
+    mainBody.style.left = this.state.mainBodyWidth
+    noteList.style.display = 'inline'
+  }
+
   render () {
     let { config } = this.props
 
@@ -162,7 +206,7 @@ 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'
           >
@@ -170,6 +214,7 @@ class Main extends React.Component {
           </div>
         }
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
+          id='main-body'
           ref='body'
           style={{left: config.isSideNavFolded ? 44 : this.state.navWidth}}
         >
@@ -191,15 +236,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,221 +1,76 @@
+$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 22px
 
 .control-sortBy-select
-  margin-left 5px
+  appearance: none;
+  margin-left 3px
+  color $ui-inactive-text-color
   padding 0
   border none
   background-color transparent
-  font-size 10px
+  outline none
+  cursor pointer
+  font-size 11px
+  &:hover
+    transition 0.2s
+    color $ui-text-color
+
+.control-button-area
+  margin-right 12px
 
 .control-button
   width 25px
   padding 0
   background-color transparent
   border none
-  color $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
+    &:hover
+      transition 0.2s
       color $ui-dark-text-color
 
   .control-button
@@ -223,3 +78,7 @@ body[data-theme="dark"]
     &: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,13 @@ 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'
+import fs from 'fs'
+import { hashHistory } from 'react-router'
+import markdown from 'browser/lib/markdown'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -36,6 +43,11 @@ class NoteList extends React.Component {
     this.focusHandler = () => {
       this.refs.list.focus()
     }
+    this.alertIfSnippetHandler = () => {
+      this.alertIfSnippet()
+    }
+    this.importFromFileHandler = this.importFromFile.bind(this)
+    this.jumpNoteByHash = this.jumpNoteByHashHandler.bind(this)
 
     this.state = {
     }
@@ -46,6 +58,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('import:file', this.importFromFileHandler)
+    ee.on('list:jump', this.jumpNoteByHash)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -64,6 +79,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('import:file', this.importFromFileHandler)
+    ee.off('list:jump', this.jumpNoteByHash)
   }
 
   componentDidUpdate (prevProps) {
@@ -156,6 +174,31 @@ class NoteList extends React.Component {
     ee.emit('list:moved')
   }
 
+  jumpNoteByHashHandler (event, noteHash) {
+    // first argument event isn't used.
+    if (this.notes === null || this.notes.length === 0) {
+      return
+    }
+
+    const { router } = this.context
+    const { location } = this.props
+
+    let targetIndex = _.findIndex(this.notes, (note) => {
+      return note.storage + '-' + note.key === noteHash
+    })
+
+    if (targetIndex < 0) targetIndex = 0
+
+    router.push({
+      pathname: location.pathname,
+      query: {
+        key: this.notes[targetIndex].storage + '-' + this.notes[targetIndex].key
+      }
+    })
+
+    ee.emit('list:moved')
+  }
+
   handleNoteListKeyDown (e) {
     if (e.metaKey || e.ctrlKey) return true
 
@@ -187,6 +230,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 +241,19 @@ 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.notes, searchInputText)
+    }
+
+    if (location.pathname.match(/\/trashed/)) {
+      return data.trashedSet.toJS()
+        .map((uniqueKey) => data.noteMap.get(uniqueKey))
+    }
+
     let storageKey = params.storageKey
     let folderKey = params.folderKey
     let storage = data.storageMap.get(storageKey)
@@ -232,49 +289,6 @@ class NoteList extends React.Component {
     })
   }
 
-  handleNoteContextMenu (e, uniqueKey) {
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Delete Note',
-      click: (e) => this.handleDeleteNote(e, uniqueKey)
-    }))
-    menu.popup()
-  }
-
-  handleDeleteNote (e, uniqueKey) {
-    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
-      type: 'warning',
-      message: 'Delete a note',
-      detail: 'This work cannot be undone.',
-      buttons: ['Confirm', 'Cancel']
-    })
-    if (index === 0) {
-      let { dispatch, location } = this.props
-      let splitted = uniqueKey.split('-')
-      let storageKey = splitted.shift()
-      let noteKey = splitted.shift()
-
-      dataApi
-        .deleteNote(storageKey, noteKey)
-        .then((data) => {
-          let dispatchHandler = () => {
-            dispatch({
-              type: 'DELETE_NOTE',
-              storageKey: data.storageKey,
-              noteKey: data.noteKey
-            })
-          }
-
-          if (location.query.key === uniqueKey) {
-            ee.once('list:moved', dispatchHandler)
-            ee.emit('list:next')
-          } else {
-            dispatchHandler()
-          }
-        })
-    }
-  }
-
   handleSortByChange (e) {
     let { dispatch } = this.props
 
@@ -303,8 +317,73 @@ 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']
+      })
+    }
+  }
+
+  handleDragStart (e, note) {
+    const noteData = JSON.stringify(note)
+    e.dataTransfer.setData('note', noteData)
+  }
+
+  importFromFile () {
+    const { dispatch, location } = this.props
+
+    const options = {
+      filters: [
+        { name: 'Documents', extensions: ['md', 'txt'] }
+      ],
+      properties: ['openFile', 'multiSelections']
+    }
+
+    const targetIndex = _.findIndex(this.notes, (note) => {
+      return note !== null && `${note.storage}-${note.key}` === location.query.key
+    })
+
+    const storageKey = this.notes[targetIndex].storage
+    const folderKey = this.notes[targetIndex].folder
+
+    dialog.showOpenDialog(remote.getCurrentWindow(), options, (filepaths) => {
+      if (filepaths === undefined) return
+      filepaths.forEach((filepath) => {
+        fs.readFile(filepath, (err, data) => {
+          if (err) throw Error('File reading error: ', err)
+          const content = data.toString()
+          const newNote = {
+            content: content,
+            folder: folderKey,
+            title: markdown.strip(findNoteTitle(content)),
+            type: 'MARKDOWN_NOTE'
+          }
+          dataApi.createNote(storageKey, newNote)
+          .then((note) => {
+            dispatch({
+              type: 'UPDATE_NOTE',
+              note: note
+            })
+            hashHistory.push({
+              pathname: location.pathname,
+              query: {key: `${note.storage}-${note.key}`}
+            })
+          })
+        })
+      })
+    })
+  }
+
   render () {
-    let { location, notes, config } = this.props
+    let { location, notes, config, dispatch } = this.props
     let sortFunc = config.sortBy === 'CREATED_AT'
       ? sortByCreatedAt
       : config.sortBy === 'ALPHABETICAL'
@@ -312,59 +391,46 @@ class NoteList extends React.Component {
       : sortByUpdatedAt
     this.notes = notes = this.getNotes()
       .sort(sortFunc)
+      .filter((note) => {
+        // this is for the trash box
+        if (note.isTrashed !== true || location.pathname === '/trashed') return true
+      })
 
     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
-        return (
-          <div styleName={isActive
-              ? 'item--active'
-              : 'item'
+      .map(note => {
+        if (note == null) {
+          return null
         }
-            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'
+        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)}
+              handleDragStart={this.handleDragStart.bind(this)}
             />
-                <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>
+        return (
+          <NoteItemSimple
+            isActive={isActive}
+            note={note}
+            key={key}
+            handleNoteClick={this.handleNoteClick.bind(this)}
+            handleDragStart={this.handleDragStart.bind(this)}
+          />
         )
       })
 
@@ -375,26 +441,24 @@ 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)}
             >
-              <option value='UPDATED_AT'>Updated Time</option>
-              <option value='CREATED_AT'>Created Time</option>
-              <option value='ALPHABETICAL'>Alphabetical</option>
+              <option value='UPDATED_AT'>Last Updated</option>
+              <option value='CREATED_AT'>Creation Time</option>
+              <option value='ALPHABETICAL'>Alphabetically</option>
             </select>
           </div>
+          <div styleName='control-button-area'>
             <button styleName={config.listStyle === 'DEFAULT'
                 ? 'control-button--active'
                 : 'control-button'
               }
               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,12 +466,10 @@ 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>
         <div styleName='list'
           ref='list'
           tabIndex='-1'

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
@@ -112,7 +114,7 @@ class StorageItem extends React.Component {
     let index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',
       message: 'Delete Folder',
-      detail: 'This work will deletes all notes in the folder and can not be undone.',
+      detail: 'This will delete all notes in the folder and can not be undone.',
       buttons: ['Confirm', 'Cancel']
     })
 
@@ -130,38 +132,83 @@ 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 { folderNoteMap } = data
+    let { storage, location, isFolded, data, dispatch } = this.props
+    let { folderNoteMap, trashedSet } = data
     let folderList = storage.folders.map((folder) => {
-      let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key))
+      let 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'
+      let noteCount = 0
+      if (noteSet) {
+        let trashedNoteCount = 0
+        const noteKeys = noteSet.map(noteKey => { return noteKey })
+        trashedSet.toJS().forEach(trashedKey => {
+          if (noteKeys.some(noteKey => { return noteKey === trashedKey })) trashedNoteCount++
+        })
+        noteCount = noteSet.size - trashedNoteCount
       }
+      return (
+        <StorageItemChild
           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>
+          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 + '$'))

browser/main/SideNav/StorageItem.styl

@@ -1,139 +1,79 @@
 .root
   width 100%
   user-select none
+  padding-top 20px
+
 .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
+  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 +101,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
@@ -35,12 +33,18 @@ class SideNav extends React.Component {
     })
   }
 
+  handleTrashedButtonClick (e) {
+    let { router } = this.context
+    router.push('/trashed')
+  }
+
   render () {
     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 isTrashedActive = !!location.pathname.match(/^\/trashed$/)
 
     let storageList = data.storageMap.map((storage, key) => {
       return <StorageItem
@@ -64,25 +68,20 @@ class SideNav extends React.Component {
           <button styleName='top-menu'
             onClick={(e) => this.handleMenuButtonClick(e)}
           >
-            <i className='fa fa-navicon fa-fw'/>
-            <span styleName='top-menu-label'>Menu</span>
+            <i className='fa fa-wrench fa-fw' />
+            <span styleName='top-menu-label'>Preferences</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}
+          isTrashedActive={isTrashedActive}
+          handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
+          handleTrashedButtonClick={(e) => this.handleTrashedButtonClick(e)}
+        />
 
         <div styleName='storageList'>
           {storageList.length > 0 ? storageList : (

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

@@ -7,7 +7,7 @@ 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 +52,21 @@ 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
+        }
       </div>
     )
   }
@@ -77,7 +76,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,53 +1,55 @@
 .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
 
 .control-search
   height 32px
+  width 1px
   flex 1
   background-color white
   position relative
 
-.control-search-icon
-  absolute top bottom left
-  line-height 32px
-  width 35px
-  color $ui-inactive-text-color
-
 .control-search-input
   display block
   absolute top bottom right
-  left 30px
+  width 100%
+  padding-left 12px
+  background-color $ui-noteList-backgroundColor
   input
     width 100%
     height 100%
     outline none
     border none
+    color $ui-text-color
+    font-size 16px
+    padding-bottom 2px
+    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,50 +59,39 @@ $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
-  font-size 14px
+  font-size 16px
   line-height 28px
   padding 0
   &:active
@@ -112,17 +103,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 +126,14 @@ body[data-theme="dark"]
     line-height 32px
     width 35px
     color $ui-dark-inactive-text-color
+    background-color $ui-dark-noteList-backgroundColor
 
   .control-search-input
+    background-color $ui-dark-noteList-backgroundColor
     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 +143,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 +157,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

@@ -9,9 +9,10 @@ import ee from 'browser/main/lib/eventEmitter'
 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
+const { dialog } = remote
+
+const OSX = window.process.platform === 'darwin'
 
 class TopBar extends React.Component {
   constructor (props) {
@@ -20,24 +21,40 @@ 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) {
-    let { config } = this.props
+    let { config, location } = this.props
+
+    if (location.pathname === '/trashed') {
+      dialog.showMessageBox(remote.getCurrentWindow(), {
+        type: 'warning',
+        message: 'Cannot create new note',
+        detail: 'You cannot create new note in trash box.',
+        buttons: ['OK']
+      })
+      return
+    }
 
     switch (config.ui.defaultNote) {
       case 'MARKDOWN_NOTE':
@@ -71,10 +88,10 @@ class TopBar extends React.Component {
         break
       }
     }
-    if (storage == null) throw new Error('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) throw new Error('No folder to craete a note')
+    if (folder == null) window.alert('No folder to create a note')
 
     return {
       storage,
@@ -83,79 +100,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 +125,7 @@ class TopBar extends React.Component {
 
   handleSearchFocus (e) {
     this.setState({
-      searchPopupOpen: true
+      isSearching: true
     })
   }
   handleSearchBlur (e) {
@@ -187,52 +142,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 +201,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 +218,6 @@ class TopBar extends React.Component {
       >
         <div styleName='control'>
           <div styleName='control-search'>
-            <i styleName='control-search-icon' className='fa fa-search fa-fw'/>
             <div styleName='control-search-input'
               onFocus={(e) => this.handleSearchFocus(e)}
               onBlur={(e) => this.handleSearchBlur(e)}
@@ -330,15 +230,8 @@ 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'
@@ -351,16 +244,11 @@ class TopBar extends React.Component {
           </div>
           <button styleName='control-newPostButton'
             onClick={(e) => this.handleNewPostButtonClick(e)}>
-            <i className='fa fa-plus'/>
+            <i className='fa fa-pencil-square-o' />
             <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
@@ -92,6 +92,8 @@ body[data-theme="dark"]
   font-family inherit !important
   line-height 1.4em
   height 100%
+.CodeMirror > div > textarea
+  margin-bottom -1em
 .CodeMirror-focused .CodeMirror-selected
   background #B1D7FE
 .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection

browser/main/index.js

@@ -23,6 +23,16 @@ document.addEventListener('dragover', function (e) {
   e.stopPropagation()
 })
 
+document.addEventListener('click', function (e) {
+  const className = e.target.className
+  if (!className && typeof (className) !== 'string') return
+  const isInfoButton = className.includes('infoButton')
+  const isInfoPanel = e.target.offsetParent.className.includes('infoPanel')
+  if (isInfoButton || isInfoPanel) return
+  const infoPanel = document.querySelector('.infoPanel')
+  if (infoPanel) infoPanel.style.display = 'none'
+})
+
 let el = document.getElementById('content')
 const history = syncHistoryWithStore(hashHistory, store)
 
@@ -50,6 +60,8 @@ ReactDOM.render((
         <IndexRedirect to='/home' />
         <Route path='home' />
         <Route path='starred' />
+        <Route path='searched' />
+        <Route path='trashed' />
         <Route path='storages'>
           <IndexRedirect to='/home' />
           <Route path=':storageKey'>

browser/main/lib/AwsMobileAnalyticsConfig.js

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

browser/main/lib/ConfigManager.js

@@ -1,19 +1,24 @@
 import _ from 'lodash'
+import RcParser from 'browser/main/lib/RcParser'
 
 const OSX = global.process.platform === 'darwin'
+const win = global.process.platform === 'win32'
 const electron = require('electron')
 const { ipcRenderer } = electron
 const consts = require('browser/lib/consts')
+const path = require('path')
+const fs = require('fs')
 
 let isInitialized = false
 
 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'
+  amaEnabled: true,
   hotkey: {
     toggleFinder: OSX ? 'Cmd + Alt + S' : 'Super + Alt + S',
     toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E'
@@ -24,17 +29,18 @@ export const DEFAULT_CONFIG = {
     defaultNote: 'ALWAYS_ASK' // 'ALWAYS_ASK', 'SNIPPET_NOTE', 'MARKDOWN_NOTE'
   },
   editor: {
-    theme: 'default',
+    theme: 'base16-light',
+    keyMap: 'sublime',
     fontSize: '14',
-    fontFamily: 'Monaco, Consolas',
+    fontFamily: win ? 'Segoe UI' : 'Monaco, Consolas',
     indentType: 'space',
     indentSize: '2',
     switchPreview: 'BLUR' // Available value: RIGHTCLICK, BLUR
   },
   preview: {
     fontSize: '14',
-    fontFamily: 'Lato',
-    codeBlockTheme: 'xcode',
+    fontFamily: win ? 'Segoe UI' : 'Lato',
+    codeBlockTheme: 'dracula',
     lineNumber: true
   }
 }
@@ -57,11 +63,13 @@ function get () {
   let config = window.localStorage.getItem('config')
 
   try {
+    const boostnotercConfig = RcParser.parse()
+
     config = Object.assign({}, DEFAULT_CONFIG, JSON.parse(config))
-    config.hotkey = Object.assign({}, DEFAULT_CONFIG.hotkey, config.hotkey)
-    config.ui = Object.assign({}, DEFAULT_CONFIG.ui, config.ui)
-    config.editor = Object.assign({}, DEFAULT_CONFIG.editor, config.editor)
-    config.preview = Object.assign({}, DEFAULT_CONFIG.preview, config.preview)
+
+    config = Object.assign({}, DEFAULT_CONFIG, boostnotercConfig)
+    config = assignConfigValues(config, boostnotercConfig, config)
+
     if (!validate(config)) throw new Error('INVALID CONFIG')
   } catch (err) {
     console.warn('Boostnote resets the malformed configuration.')
@@ -123,6 +131,15 @@ function set (updates) {
   })
 }
 
+function assignConfigValues (config, rcConfig, originalConfig) {
+  config = Object.assign({}, DEFAULT_CONFIG, rcConfig, originalConfig)
+  config.hotkey = Object.assign({}, DEFAULT_CONFIG.hotkey, rcConfig.hotkey, originalConfig.hotkey)
+  config.ui = Object.assign({}, DEFAULT_CONFIG.ui, rcConfig.ui, originalConfig.ui)
+  config.editor = Object.assign({}, DEFAULT_CONFIG.editor, rcConfig.editor, originalConfig.editor)
+  config.preview = Object.assign({}, DEFAULT_CONFIG.preview, rcConfig.preview, originalConfig.preview)
+  return config
+}
+
 export default {
   get,
   set,

browser/main/lib/RcParser.js

@@ -0,0 +1,15 @@
+import path from 'path'
+import sander from 'sander'
+
+function parse () {
+  const BOOSTNOTERC = '.boostnoterc'
+  const homePath = global.process.env.HOME || global.process.env.USERPROFILE
+  const boostnotercPath = path.join(homePath, BOOSTNOTERC)
+
+  if (!sander.existsSync(boostnotercPath)) return {}
+  return JSON.parse(sander.readFileSync(boostnotercPath).toString())
+}
+
+export default {
+  parse
+}

browser/main/lib/dataApi/copyImage.js

@@ -0,0 +1,33 @@
+const fs = require('fs')
+const path = require('path')
+const _ = require('lodash')
+const sander = require('sander')
+const { findStorage } = require('browser/lib/findStorage')
+
+/**
+ * @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 targetStorage = findStorage(storageKey)
+
+      const inputImage = fs.createReadStream(filePath)
+      const imageExt = path.extname(filePath)
+      const imageName = Math.random().toString(36).slice(-16)
+      const basename = `${imageName}${imageExt}`
+      const imageDir = path.join(targetStorage.path, 'images')
+      if (!fs.existsSync(imageDir)) fs.mkdirSync(imageDir)
+      const outputImage = fs.createWriteStream(path.join(imageDir, basename))
+      inputImage.pipe(outputImage)
+      resolve(basename)
+    } catch (e) {
+      return reject(e)
+    }
+  })
+}
+
+module.exports = copyImage

browser/main/lib/dataApi/createFolder.js

@@ -3,6 +3,7 @@ const keygen = require('browser/lib/keygen')
 const path = require('path')
 const resolveStorageData = require('./resolveStorageData')
 const CSON = require('@rokt33r/season')
+const { findStorage } = require('browser/lib/findStorage')
 
 /**
  * @param {String} storageKey
@@ -29,11 +30,7 @@ function createFolder (storageKey, input) {
     if (!_.isString(input.name)) throw new Error('Name must be a string.')
     if (!_.isString(input.color)) throw new Error('Color must be a string.')
 
-    rawStorages = JSON.parse(localStorage.getItem('storages'))
-    if (!_.isArray(rawStorages)) throw new Error('Target storage doesn\'t exist.')
-
-    targetStorage = _.find(rawStorages, {key: storageKey})
-    if (targetStorage == null) throw new Error('Target storage doesn\'t exist.')
+    targetStorage = findStorage(storageKey)
   } catch (e) {
     return Promise.reject(e)
   }

browser/main/lib/dataApi/createNote.js

@@ -4,12 +4,14 @@ const _ = require('lodash')
 const keygen = require('browser/lib/keygen')
 const path = require('path')
 const CSON = require('@rokt33r/season')
+const { findStorage } = require('browser/lib/findStorage')
 
 function validateInput (input) {
   if (!_.isArray(input.tags)) input.tags = []
   input.tags = input.tags.filter((tag) => _.isString(tag) && tag.trim().length > 0)
   if (!_.isString(input.title)) input.title = ''
   input.isStarred = !!input.isStarred
+  input.isTrashed = !!input.isTrashed
 
   switch (input.type) {
     case 'MARKDOWN_NOTE':
@@ -37,11 +39,7 @@ function createNote (storageKey, input) {
     input = Object.assign({}, input)
     validateInput(input)
 
-    let cachedStorageList = JSON.parse(localStorage.getItem('storages'))
-    if (!_.isArray(cachedStorageList)) throw new Error('Target storage doesn\'t exist.')
-
-    targetStorage = _.find(cachedStorageList, {key: storageKey})
-    if (targetStorage == null) throw new Error('Target storage doesn\'t exist.')
+    targetStorage = findStorage(storageKey)
   } catch (e) {
     return Promise.reject(e)
   }

browser/main/lib/dataApi/deleteFolder.js

@@ -4,6 +4,7 @@ const resolveStorageData = require('./resolveStorageData')
 const resolveStorageNotes = require('./resolveStorageNotes')
 const CSON = require('@rokt33r/season')
 const sander = require('sander')
+const { findStorage } = require('browser/lib/findStorage')
 
 /**
  * @param {String} storageKey
@@ -21,11 +22,7 @@ function deleteFolder (storageKey, folderKey) {
   let rawStorages
   let targetStorage
   try {
-    rawStorages = JSON.parse(localStorage.getItem('storages'))
-    if (!_.isArray(rawStorages)) throw new Error('Target storage doesn\'t exist.')
-
-    targetStorage = _.find(rawStorages, {key: storageKey})
-    if (targetStorage == null) throw new Error('Target storage doesn\'t exist.')
+    targetStorage = findStorage(storageKey)
   } catch (e) {
     return Promise.reject(e)
   }

browser/main/lib/dataApi/deleteNote.js

@@ -2,15 +2,12 @@ const resolveStorageData = require('./resolveStorageData')
 const _ = require('lodash')
 const path = require('path')
 const sander = require('sander')
+const { findStorage } = require('browser/lib/findStorage')
 
 function deleteNote (storageKey, noteKey) {
   let targetStorage
   try {
-    let cachedStorageList = JSON.parse(localStorage.getItem('storages'))
-    if (!_.isArray(cachedStorageList)) throw new Error('Target storage doesn\'t exist.')
-
-    targetStorage = _.find(cachedStorageList, {key: storageKey})
-    if (targetStorage == null) throw new Error('Target storage doesn\'t exist.')
+    targetStorage = findStorage(storageKey)
   } catch (e) {
     return Promise.reject(e)
   }

browser/main/lib/dataApi/init.js

@@ -41,7 +41,7 @@ function init () {
           .then((notes) => {
             let unknownCount = 0
             notes.forEach((note) => {
-              if (!storage.folders.some((folder) => note.folder === folder.key)) {
+              if (note && !storage.folders.some((folder) => note.folder === folder.key)) {
                 unknownCount++
                 storage.folders.push({
                   key: note.folder,

browser/main/lib/dataApi/moveNote.js

@@ -4,17 +4,13 @@ const path = require('path')
 const CSON = require('@rokt33r/season')
 const keygen = require('browser/lib/keygen')
 const sander = require('sander')
+const { findStorage } = require('browser/lib/findStorage')
 
 function moveNote (storageKey, noteKey, newStorageKey, newFolderKey) {
   let oldStorage, newStorage
   try {
-    let cachedStorageList = JSON.parse(localStorage.getItem('storages'))
-    if (!_.isArray(cachedStorageList)) throw new Error('Storage doesn\'t exist.')
-
-    oldStorage = _.find(cachedStorageList, {key: storageKey})
-    if (oldStorage == null) throw new Error('Storage doesn\'t exist.')
-
-    newStorage = _.find(cachedStorageList, {key: newStorageKey})
+    oldStorage = findStorage(storageKey)
+    newStorage = findStorage(newStorageKey)
     if (newStorage == null) throw new Error('Target storage doesn\'t exist.')
   } catch (e) {
     return Promise.reject(e)

browser/main/lib/dataApi/renameStorage.js

@@ -1,5 +1,7 @@
 const _ = require('lodash')
 const resolveStorageData = require('./resolveStorageData')
+const { findStorage } = require('browser/lib/findStorage')
+
 /**
  * @param {String} key
  * @param {String} name

browser/main/lib/dataApi/resolveStorageNotes.js

@@ -28,7 +28,6 @@ function resolveStorageNotes (storage) {
         return data
       } catch (err) {
         console.error(notePath)
-        throw err
       }
     })
 

browser/main/lib/dataApi/updateNote.js

@@ -2,6 +2,7 @@ const resolveStorageData = require('./resolveStorageData')
 const _ = require('lodash')
 const path = require('path')
 const CSON = require('@rokt33r/season')
+const { findStorage } = require('browser/lib/findStorage')
 
 function validateInput (input) {
   let validatedInput = {}
@@ -21,6 +22,10 @@ function validateInput (input) {
     validatedInput.isStarred = !!input.isStarred
   }
 
+  if (input.isTrashed != null) {
+    validatedInput.isTrashed = !!input.isTrashed
+  }
+
   validatedInput.type = input.type
   switch (input.type) {
     case 'MARKDOWN_NOTE':
@@ -64,11 +69,7 @@ function updateNote (storageKey, noteKey, input) {
     if (input == null) throw new Error('No input found.')
     input = validateInput(input)
 
-    let cachedStorageList = JSON.parse(localStorage.getItem('storages'))
-    if (!_.isArray(cachedStorageList)) throw new Error('Target storage doesn\'t exist.')
-
-    targetStorage = _.find(cachedStorageList, {key: storageKey})
-    if (targetStorage == null) throw new Error('Target storage doesn\'t exist.')
+    targetStorage = findStorage(storageKey)
   } catch (e) {
     return Promise.reject(e)
   }
@@ -101,6 +102,7 @@ function updateNote (storageKey, noteKey, input) {
         noteData.createdAt = new Date()
         noteData.updatedAt = new Date()
         noteData.isStarred = false
+        noteData.isTrashed = false
         noteData.tags = []
       }
 

browser/main/lib/modal.js

@@ -15,6 +15,9 @@ 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 () {
@@ -37,7 +40,9 @@ 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.recordDynamicCustomEvent('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'
+          <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()
+
+  .control-folder-input
+    border 1px solid #C9C9C9 // TODO: use variable.
+    color white
 
    .description
     color $ui-inactive-text-color
 
-  .control-input
-    border-color $ui-dark-borderColor
-    color white
-
+  .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,7 +25,6 @@ export default class DeleteArticleModal extends React.Component {
   }
 
   handleYesButtonClick (e) {
-    // store.dispatch(destroyArticle(this.props.articleKey))
     this.props.close()
   }
 

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
@@ -107,7 +103,7 @@ class InitModal extends React.Component {
           } else {
             return dataApi
               .createFolder(data.storage.key, {
-                color: '#6AA5E9',
+                color: '#1278BD',
                 name: 'Default'
               })
               .then((_data) => {
@@ -126,12 +122,24 @@ class InitModal extends React.Component {
             notes: data.notes
           })
 
-          let defaultMarkdownNote = dataApi
+          let defaultSnippetNote = dataApi
             .createNote(data.storage.key, {
-              type: 'MARKDOWN_NOTE',
+              type: 'SNIPPET_NOTE',
               folder: data.storage.folders[0].key,
-              title: 'Welcome to Boostnote :)',
-              content: '# Welcome to Boostnote :)\nThis is a markdown note.\n\nClick to edit this note.'
+              title: 'Snippet note example',
+              description: 'Snippet note example\nYou can store a series of snippets as a single note, like Gist.',
+              snippets: [
+                {
+                  name: 'example.html',
+                  mode: 'html',
+                  content: '<html>\n<body>\n<h1 id=\'hello\'>Enjoy Boostnote!</h1>\n</body>\n</html>'
+                },
+                {
+                  name: 'example.js',
+                  mode: 'javascript',
+                  content: 'var boostnote = document.getElementById(\'enjoy\').innerHTML\n\nconsole.log(boostnote)'
+                }
+              ]
             })
             .then((note) => {
               store.dispatch({
@@ -139,24 +147,12 @@ class InitModal extends React.Component {
                 note: note
               })
             })
-          let defaultSnippetNote = dataApi
+          let defaultMarkdownNote = dataApi
             .createNote(data.storage.key, {
-              type: 'SNIPPET_NOTE',
+              type: 'MARKDOWN_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.',
-              snippets: [
-                {
-                  name: 'example.html',
-                  mode: 'html',
-                  content: '<html>\n<body>\n<h1 id=\'hello\'>Hello World</h1>\n</body>\n</html>'
-                },
-                {
-                  name: 'example.js',
-                  mode: 'javascript',
-                  content: 'var html = document.getElementById(\'hello\').innerHTML\n\nconsole.log(html)'
-                }
-              ]
+              title: 'Welcome to Boostnote!',
+              content: '# Welcome to Boostnote! \n### _Click to edit this note._\n\n---\n\nBoostnote is an *open source* note-taking app. \nRepository is published on [GitHub](https://github.com/BoostIO/Boostnote), and tweeting everyday on [@Boostnoteapp](https://twitter.com/boostnoteapp)!\n\n## Features \n- [x] No Internet and Registration Required. \n- [ ] Quick search and copy the content of note. `macOS: Cmd + Alt + S / windows: Ctrl + Alt + S` \n- [ ] Markdown & Snippet note. \n- [ ] Available for `vim` and `emacs` mode. \n- [ ] Choose your favorite theme on UI, Editor and Code Block! \n--- \n\n- Copy Codeblock on Markdown Preview.\n```javascript\nvar boostnote = document.getElementById(\'enjoy\').innerHTML\n\nconsole.log(boostnote)\n```'
             })
             .then((note) => {
               store.dispatch({
@@ -188,12 +184,6 @@ class InitModal extends React.Component {
     })
   }
 
-  handleKeyDown (e) {
-    if (e.keyCode === 27) {
-      this.props.close()
-    }
-  }
-
   render () {
     if (this.state.isLoading) {
       return <div styleName='root--loading'>
@@ -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'

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.recordDynamicCustomEvent('ADD_MARKDOWN')
+    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
     let { storage, folder, dispatch, location } = this.props
     dataApi
       .createNote(storage, {
@@ -52,6 +56,8 @@ class NewNoteModal extends React.Component {
   }
 
   handleSnippetNoteButtonClick (e) {
+    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_SNIPPET')
+    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('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)}
@@ -116,7 +119,7 @@ class NewNoteModal extends React.Component {
               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>
+            <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'
@@ -128,7 +131,7 @@ class NewNoteModal extends React.Component {
               className='fa fa-code'
             /><br />
             <span styleName='control-button-label'>Snippet Note</span><br />
-            <span styleName='control-button-description'>This format is specialized on managing snippets like Gist. Multiple snippets can be grouped as a note.
+            <span styleName='control-button-description'>This format is for creating code snippets. Multiple snippets can be grouped into a single note.
             </span>
           </button>