Merge pull request #1172 from BoostIO/feature-v0-8-17

v0.8.17

.boostnoterc.sample

@@ -0,0 +1,33 @@
+{
+    "amaEnabled": true,
+    "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
+}

.eslintrc

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

.travis.yml

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

Backers.md

@@ -0,0 +1,49 @@
+<h1 align="center">Sponsors &amp; Backers</h1>
+
+Boostnote is an open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these awesome [backers](https://github.com/BoostIO/Boostnote/blob/master/Backers.md). If you'd like to join them, please consider:
+
+- [Become a backer or sponsor on Open Collective.](https://opencollective.com/boostnoteio)
+
+---
+
+## Backers via OpenCollective
+<a href="https://opencollective.com/boostnoteio#backers" target="_blank"><img src="https://opencollective.com/boostnoteio/backers.svg?width=890"></a>
+
+- [Ralph03](https://opencollective.com/ralph03) - $24
+
+- [Nikolas Dan](https://opencollective.com/nikolas-dan) - $20
+
+- [tatoosh11](https://twitter.com/ta11) - $10
+
+- [Alexander Borovkov](https://opencollective.com/alexander-borovkov) - $10
+
+- [Yeojong Kim](https://twitter.com/yeojoy) - $5
+
+- [Scotia Draven](https://opencollective.com/scotia-draven) - $5
+
+- [spoonhoop](https://opencollective.com/spoonhoop) - $5
+
+## Backers via Bountysource
+https://salt.bountysource.com/teams/boostnote
+
+- Kuzz - $65
+
+- Intense Raiden - $45
+
+- ravy22 - $25
+
+- trentpolack	- $20
+
+- hikariru - $10
+
+- kolchan11 - $10
+
+- RonWalker22 - $10
+
+- hocchuc	- $5
+
+- Adam - $5
+
+- Steve	- $5
+
+- evmin	- $5

ISSUE_TEMPLATE.md

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

LICENSE

@@ -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

@@ -2,6 +2,9 @@ import React, { PropTypes } from 'react'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
 import path from 'path'
+import copyImage from 'browser/main/lib/dataApi/copyImage'
+import { findStorage } from 'browser/lib/findStorage'
+import fs from 'fs'
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
@@ -38,6 +41,7 @@ export default class CodeEditor extends React.Component {
       }
       this.props.onBlur != null && this.props.onBlur(e)
     }
+    this.pasteHandler = (editor, e) => this.handlePaste(editor, e)
     this.loadStyleHandler = (e) => {
       this.editor.refresh()
     }
@@ -55,19 +59,40 @@ export default class CodeEditor extends React.Component {
       indentWithTabs: this.props.indentType !== 'space',
       keyMap: this.props.keyMap,
       inputStyle: 'textarea',
+      dragDrop: false,
       extraKeys: {
         Tab: function (cm) {
+          const cursor = cm.getCursor()
+          const line = cm.getLine(cursor.line)
           if (cm.somethingSelected()) cm.indentSelection('add')
           else {
-            if (cm.getOption('indentWithTabs')) {
-              cm.execCommand('insertTab')
+            const tabs = cm.getOption('indentWithTabs')
+            if (line.trimLeft().match(/^(-|\*|\+) (\[( |x)\] )?$/)) {
+              cm.execCommand('goLineStart')
+              if (tabs) {
+                cm.execCommand('insertTab')
+              } else {
+                cm.execCommand('insertSoftTab')
+              }
+              cm.execCommand('goLineEnd')
             } else {
-              cm.execCommand('insertSoftTab')
+              if (tabs) {
+                cm.execCommand('insertTab')
+              } else {
+                cm.execCommand('insertSoftTab')
+              }
             }
           }
         },
         'Cmd-T': function (cm) {
           // Do nothing
+        },
+        Enter: 'newlineAndIndentContinueMarkdownList',
+        'Ctrl-C': (cm) => {
+          if (cm.getOption('keyMap').substr(0, 3) === 'vim') {
+            document.execCommand('copy')
+          }
+          return CodeMirror.Pass
         }
       }
     })
@@ -76,14 +101,26 @@ export default class CodeEditor extends React.Component {
 
     this.editor.on('blur', this.blurHandler)
     this.editor.on('change', this.changeHandler)
+    this.editor.on('paste', this.pasteHandler)
 
     let editorTheme = document.getElementById('editorTheme')
     editorTheme.addEventListener('load', this.loadStyleHandler)
+
+    CodeMirror.Vim.defineEx('quit', 'q', this.quitEditor)
+    CodeMirror.Vim.defineEx('q!', 'q!', this.quitEditor)
+    CodeMirror.Vim.defineEx('wq', 'wq', this.quitEditor)
+    CodeMirror.Vim.defineEx('qw', 'qw', this.quitEditor)
+    CodeMirror.Vim.map('ZZ', ':q', 'normal')
+  }
+
+  quitEditor () {
+    document.querySelector('textarea').blur()
   }
 
   componentWillUnmount () {
     this.editor.off('blur', this.blurHandler)
     this.editor.off('change', this.changeHandler)
+    this.editor.off('paste', this.pasteHandler)
     let editorTheme = document.getElementById('editorTheme')
     editorTheme.removeEventListener('load', this.loadStyleHandler)
   }
@@ -156,6 +193,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) {
@@ -166,15 +204,41 @@ export default class CodeEditor extends React.Component {
 
   handleDropImage (e) {
     e.preventDefault()
-    let imagePath = e.dataTransfer.files[0].path
-    let filename = path.basename(imagePath)
-    let imageMd = `![${filename}](${imagePath})`
-    this.insertImage(imageMd)
+    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)
+    })
   }
 
-  insertImage (imageMd) {
-    const textarea = this.editor.getInputField()
-    textarea.value = textarea.value.substr(0, textarea.selectionStart) + imageMd + textarea.value.substr(textarea.selectionEnd)
+  insertImageMd (imageMd) {
+    this.editor.replaceSelection(imageMd)
+  }
+
+  handlePaste (editor, e) {
+    const dataTransferItem = e.clipboardData.items[0]
+    if (!dataTransferItem.type.match('image')) return
+
+    const blob = dataTransferItem.getAsFile()
+    let reader = new FileReader()
+    let base64data
+
+    reader.readAsDataURL(blob)
+    reader.onloadend = () => {
+      base64data = reader.result.replace(/^data:image\/png;base64,/, '')
+      base64data += base64data.replace('+', ' ')
+      const binaryData = new Buffer(base64data, 'base64').toString('binary')
+      const imageName = Math.random().toString(36).slice(-16)
+      const storagePath = findStorage(this.props.storageKey).path
+      const imageDir = path.join(storagePath, 'images')
+      if (!fs.existsSync(imageDir)) fs.mkdirSync(imageDir)
+      const imagePath = path.join(imageDir, `${imageName}.png`)
+      fs.writeFile(imagePath, binaryData, 'binary')
+      const imageMd = `![${imageName}](${path.join('/:storage', `${imageName}.png`)})`
+      this.insertImageMd(imageMd)
+    }
   }
 
   render () {

browser/components/MarkdownEditor.js

@@ -3,22 +3,33 @@ 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)
 
-    this.escapeFromEditor = ['Control', 'w']
+    // char codes for ctrl + w
+    this.escapeFromEditor = [17, 87]
+
+    // ctrl + shift + ;
+    this.supportMdSelectionBold = [16, 17, 186]
 
     this.state = {
       status: 'PREVIEW',
       renderValue: props.value,
-      keyPressed: {}
+      keyPressed: new Set(),
+      isLocked: false
     }
+
+    this.lockEditorCode = () => this.handleLockEditor()
   }
 
   componentDidMount () {
     this.value = this.refs.code.value
+    eventEmitter.on('editor:lock', this.lockEditorCode)
   }
 
   componentDidUpdate () {
@@ -33,6 +44,7 @@ class MarkdownEditor extends React.Component {
 
   componentWillUnmount () {
     this.cancelQueue()
+    eventEmitter.off('editor:lock', this.lockEditorCode)
   }
 
   queueRendering (value) {
@@ -69,15 +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) {
-    this.setState({ keyPressed: [] })
+    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()
@@ -87,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)
     }
   }
 
@@ -102,6 +116,7 @@ class MarkdownEditor extends React.Component {
       }, () => {
         this.refs.code.focus()
       })
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
     }
   }
 
@@ -138,6 +153,7 @@ class MarkdownEditor extends React.Component {
     } else {
       this.refs.code.focus()
     }
+    eventEmitter.emit('topbar:togglelockbutton', this.state.status)
   }
 
   reload () {
@@ -146,26 +162,52 @@ class MarkdownEditor extends React.Component {
     this.renderPreview(this.props.value)
   }
 
-  handleKeyDown(e) {
-    const keyPressed = Object.assign(this.state.keyPressed, {
-      [e.key]: true
-    })
+  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 this.state.keyPressed[el] }
-    if (this.state.status === 'CODE' && this.escapeFromEditor.every(isNoteHandlerKey)) {
-      document.activeElement.blur()
+    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 = Object.assign(this.state.keyPressed, {
-      [e.key]: false
-    })
+    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
@@ -175,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'
@@ -185,7 +229,10 @@ class MarkdownEditor extends React.Component {
         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}
@@ -195,6 +242,7 @@ class MarkdownEditor extends React.Component {
           fontSize={editorFontSize}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
+          storageKey={storageKey}
           onChange={(e) => this.handleChange(e)}
           onBlur={(e) => this.handleBlur(e)}
         />
@@ -218,6 +266,8 @@ class MarkdownEditor extends React.Component {
           onMouseUp={(e) => this.handlePreviewMouseUp(e)}
           onMouseDown={(e) => this.handlePreviewMouseDown(e)}
           onCheckboxClick={(e) => this.handleCheckboxClick(e)}
+          showCopyNotification={config.ui.showCopyNotification}
+          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

@@ -8,21 +8,9 @@ import flowchart from 'flowchart'
 import SequenceDiagram from 'js-sequence-diagrams'
 import eventEmitter from 'browser/main/lib/eventEmitter'
 import fs from 'fs'
-
-function decodeHTMLEntities (text) {
-  var entities = [
-    ['apos', '\''],
-    ['amp', '&'],
-    ['lt', '<'],
-    ['gt', '>']
-  ]
-
-  for (var i = 0, max = entities.length; i < max; ++i) {
-    text = text.replace(new RegExp('&' + entities[i][0] + ';', 'g'), entities[i][1])
-  }
-
-  return text
-}
+import htmlTextHelper from 'browser/lib/htmlTextHelper'
+import copy from 'copy-to-clipboard'
+import mdurl from 'mdurl'
 
 const { remote } = require('electron')
 const { app } = remote
@@ -45,21 +33,49 @@ function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber) {
   font-weight: normal;
   text-rendering: optimizeLegibility;
 }
+@font-face {
+  font-family: 'Lato';
+  src: url('${appPath}/resources/fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Black.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 700;
+  text-rendering: optimizeLegibility;
+}
 ${markdownStyle}
 body {
-  font-family: ${fontFamily.join(', ')};
+  font-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: 0px 10px;
+  border: none;
+  background-color: transparent;
+  outline: none;
+  height: 15px;
+  width: 15px;
+  cursor: pointer;
+}
+
+.clipboardButton:hover {
+  transition: 0.2s;
+  color: #939395;
+  fill: #939395;
+  background-color: rgba(0,0,0,0.1);
+}
+
 h1, h2 {
   border: none;
 }
@@ -73,6 +89,10 @@ h2 {
   padding-bottom: 0.2em;
   margin: 1em 0 0.37em;
 }
+
+body p {
+  white-space: normal;
+}
 `
 }
 
@@ -81,7 +101,7 @@ const OSX = global.process.platform === 'darwin'
 
 const defaultFontFamily = ['helvetica', 'arial', 'sans-serif']
 if (!OSX) {
-  defaultFontFamily.unshift('\'Microsoft YaHei\'')
+  defaultFontFamily.unshift('Microsoft YaHei')
   defaultFontFamily.unshift('meiryo')
 }
 const defaultCodeBlockFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
@@ -97,6 +117,9 @@ export default class MarkdownPreview extends React.Component {
     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) {
@@ -149,10 +172,14 @@ export default class MarkdownPreview extends React.Component {
     this.exportAsDocument('md')
   }
 
+  handlePrint () {
+    this.refs.root.contentWindow.print()
+  }
+
   exportAsDocument (fileType) {
     const options = {
       filters: [
-        { name: 'Documents', extensions: [fileType]}
+        { name: 'Documents', extensions: [fileType] }
       ],
       properties: ['openFile', 'createDirectory']
     }
@@ -166,6 +193,16 @@ export default class MarkdownPreview extends React.Component {
     })
   }
 
+  fixDecodedURI (node) {
+    if (node && node.children.length === 1 && typeof node.children[0] === 'string') {
+      const { innerText, href } = node
+
+      node.innerText = mdurl.decode(href) === innerText
+        ? href
+        : innerText
+    }
+  }
+
   componentDidMount () {
     this.refs.root.setAttribute('sandbox', 'allow-scripts')
     this.refs.root.contentWindow.document.body.addEventListener('contextmenu', this.contextMenuHandler)
@@ -181,16 +218,22 @@ export default class MarkdownPreview extends React.Component {
 
     this.refs.root.contentWindow.document.addEventListener('mousedown', this.mouseDownHandler)
     this.refs.root.contentWindow.document.addEventListener('mouseup', this.mouseUpHandler)
+    this.refs.root.contentWindow.document.addEventListener('drop', this.preventImageDroppedHandler)
+    this.refs.root.contentWindow.document.addEventListener('dragover', this.preventImageDroppedHandler)
     eventEmitter.on('export:save-text', this.saveAsTextHandler)
     eventEmitter.on('export:save-md', this.saveAsMdHandler)
+    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) {
@@ -200,6 +243,7 @@ export default class MarkdownPreview extends React.Component {
       prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
       prevProps.codeBlockTheme !== this.props.codeBlockTheme ||
       prevProps.lineNumber !== this.props.lineNumber ||
+      prevProps.showCopyNotification !== this.props.showCopyNotification ||
       prevProps.theme !== this.props.theme) {
       this.applyStyle()
       this.rewriteIframe()
@@ -223,7 +267,9 @@ export default class MarkdownPreview extends React.Component {
     theme = consts.THEMES.some((_theme) => _theme === theme) && theme !== 'default'
       ? theme
       : 'elegant'
-    this.getWindow().document.getElementById('codeTheme').href = `${appPath}/node_modules/codemirror/theme/${theme}.css`
+    this.getWindow().document.getElementById('codeTheme').href = theme.startsWith('solarized')
+      ? `${appPath}/node_modules/codemirror/theme/solarized.css`
+      : `${appPath}/node_modules/codemirror/theme/${theme}.css`
   }
 
   rewriteIframe () {
@@ -234,12 +280,28 @@ export default class MarkdownPreview extends React.Component {
       el.removeEventListener('click', this.checkboxClickHandler)
     })
 
-    let { value, theme, indentSize, codeBlockTheme } = this.props
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.removeEventListener('click', this.linkClickHandler)
+    })
+
+    let { value, theme, indentSize, codeBlockTheme, showCopyNotification, 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)
 
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.taskListItem'), (el) => {
+      el.parentNode.parentNode.style.listStyleType = 'none'
+    })
+
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      this.fixDecodedURI(el)
       el.addEventListener('click', this.anchorClickHandler)
     })
 
@@ -247,6 +309,16 @@ export default class MarkdownPreview extends React.Component {
       el.addEventListener('click', this.checkboxClickHandler)
     })
 
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.addEventListener('click', this.linkClickHandler)
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('img'), (el) => {
+      el.src = markdown.normalizeLinkText(el.src)
+      if (!/\/:storage/.test(el.src)) return
+      el.src = `file:///${markdown.normalizeLinkText(path.join(storagePath, 'images', path.basename(el.src)))}`
+    })
+
     codeBlockTheme = consts.THEMES.some((_theme) => _theme === codeBlockTheme)
       ? codeBlockTheme
       : 'default'
@@ -255,9 +327,26 @@ export default class MarkdownPreview extends React.Component {
       let syntax = CodeMirror.findModeByName(el.className)
       if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
       CodeMirror.requireMode(syntax.mode, () => {
-        let content = decodeHTMLEntities(el.innerHTML)
+        let content = htmlTextHelper.decodeEntities(el.innerHTML)
+        const copyIcon = document.createElement('i')
+        copyIcon.innerHTML = '<button class="clipboardButton"><svg width="13" height="13" viewBox="0 0 1792 1792" ><path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z"/></svg></button>'
+        copyIcon.onclick = (e) => {
+          copy(content)
+          if (showCopyNotification) {
+            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`
+        if (codeBlockTheme.indexOf('solarized') === 0) {
+          const [refThema, color] = codeBlockTheme.split(' ')
+          el.parentNode.className += ` cm-s-${refThema} cm-s-${color} CodeMirror`
+        } else {
+          el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
+        }
         CodeMirror.runMode(content, syntax.mime, el, {
           tabSize: indentSize
         })
@@ -273,7 +362,7 @@ export default class MarkdownPreview extends React.Component {
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.flowchart'), (el) => {
       Raphael.setWindow(this.getWindow())
       try {
-        let diagram = flowchart.parse(decodeHTMLEntities(el.innerHTML))
+        let diagram = flowchart.parse(htmlTextHelper.decodeEntities(el.innerHTML))
         el.innerHTML = ''
         diagram.drawSVG(el, opts)
         _.forEach(el.querySelectorAll('a'), (el) => {
@@ -289,7 +378,7 @@ export default class MarkdownPreview extends React.Component {
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.sequence'), (el) => {
       Raphael.setWindow(this.getWindow())
       try {
-        let diagram = SequenceDiagram.parse(decodeHTMLEntities(el.innerHTML))
+        let diagram = SequenceDiagram.parse(htmlTextHelper.decodeEntities(el.innerHTML))
         el.innerHTML = ''
         diagram.drawSVG(el, {theme: 'simple'})
         _.forEach(el.querySelectorAll('a'), (el) => {
@@ -325,6 +414,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 (
@@ -346,5 +455,7 @@ MarkdownPreview.propTypes = {
   onMouseUp: PropTypes.func,
   onMouseDown: PropTypes.func,
   className: PropTypes.string,
-  value: PropTypes.string
+  value: PropTypes.string,
+  showCopyNotification: PropTypes.bool,
+  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'>×</div>
+    <div styleName='esc-text'>esc</div>
+  </button>
+)
+
+ModalEscButton.propTypes = {
+  handleEscButtonClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(ModalEscButton, styles)

browser/components/ModalEscButton.styl

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

browser/components/NavToggleButton.js

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

browser/components/NavToggleButton.styl

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

browser/components/NoteItem.js

@@ -4,7 +4,9 @@
 import React, { PropTypes } from 'react'
 import { isArray } from 'lodash'
 import CSSModules from 'browser/lib/CSSModules'
+import { getTodoStatus } from 'browser/lib/getTodoStatus'
 import styles from './NoteItem.styl'
+import TodoProcess from './TodoProcess'
 
 /**
  * @description Tag element component.
@@ -13,7 +15,7 @@ import styles from './NoteItem.styl'
  */
 const TagElement = ({ tagName }) => (
   <span styleName='item-bottom-tagList-item' key={tagName}>
-    {tagName}
+    #{tagName}
   </span>
 )
 
@@ -40,9 +42,10 @@ const TagElementList = (tags) => {
  * @param {Object} note
  * @param {Function} handleNoteClick
  * @param {Function} handleNoteContextMenu
+ * @param {Function} handleDragStart
  * @param {string} dateDisplay
  */
-const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu }) => (
+const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu, handleDragStart, pathname }) => (
   <div styleName={isActive
       ? 'item--active'
       : 'item'
@@ -50,10 +53,14 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
     key={`${note.storage}-${note.key}`}
     onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
     onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+    onDragStart={e => handleDragStart(e, note)}
+    draggable='true'
   >
     <div styleName='item-wrapper'>
-      <div styleName='item-bottom-time'>{dateDisplay}</div>
-
+      {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
@@ -61,23 +68,25 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
         }
       </div>
 
+      <div styleName='item-bottom-time'>{dateDisplay}</div>
+      {note.isStarred
+        ? <img styleName='item-star' src='../resources/icon/icon-starred.svg' /> : ''
+      }
+      {note.isPinned && !pathname.match(/\/home|\/starred|\/trash/)
+        ? <i styleName='item-pin' className='fa fa-thumb-tack' /> : ''
+      }
+      {note.type === 'MARKDOWN_NOTE'
+        ? <TodoProcess todoStatus={getTodoStatus(note.content)} />
+        : ''
+      }
       <div styleName='item-bottom'>
         <div styleName='item-bottom-tagList'>
           {note.tags.length > 0
             ? TagElementList(note.tags)
-            : ''
+            : <span styleName='item-bottom-tagList-empty' />
           }
         </div>
       </div>
-
-      {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.isStarred
-        ? <i styleName='item-star' className='fa fa-star' /> : ''
-      }
     </div>
   </div>
 )
@@ -91,10 +100,13 @@ NoteItem.propTypes = {
     type: PropTypes.string.isRequired,
     title: PropTypes.string.isrequired,
     tags: PropTypes.array,
-    isStarred: PropTypes.bool.isRequired
+    isStarred: PropTypes.bool.isRequired,
+    isTrashed: PropTypes.bool.isRequired
   }),
   handleNoteClick: PropTypes.func.isRequired,
-  handleNoteContextMenu: PropTypes.func.isRequired
+  handleNoteContextMenu: PropTypes.func.isRequired,
+  handleDragStart: PropTypes.func.isRequired,
+  handleDragEnd: PropTypes.func.isRequired
 }
 
 export default CSSModules(NoteItem, styles)

browser/components/NoteItem.styl

@@ -7,63 +7,82 @@ $control-height = 30px
 
 .item
   position relative
-  padding 0 25px
+  padding 0 20px
   user-select none
   cursor pointer
   background-color $ui-noteList-backgroundColor
-  transition background-color 0.15s
+  transition 0.2s
   &:hover
-    background-color alpha($ui-active-color, 20%)
-  &:active
-    background-color $ui-active-color
-    color white
+    background-color alpha($ui-button--active-backgroundColor, 20%)
     .item-title
-    .item-title-empty
-    .item-bottom-tagList-empty
-    .item-bottom-time
     .item-title-icon
-      color white
+    .item-bottom-time
+      transition 0.15s
+      color $ui-text-color
     .item-bottom-tagList-item
-      background-color transparent
-      color white
+      background-color alpha(white, 0.6)
+      color $ui-text-color
+    .item-star
+      color $ui-favorite-star-button-color
+  &:active
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-text-color
+    .item-title
+    .item-title-icon
+    .item-bottom-time
+      transition 0.15s
+      color $ui-text-color
+    .item-bottom-tagList-item
+      background-color alpha(white, 0.6)
+      color $ui-text-color
 
 .item-wrapper
-  padding 20px 0
+  padding 15px 0
   border-bottom $ui-border
+  position relative
 
 .item--active
   @extend .item
-  background-color $ui-active-color
-  color white
+  background-color alpha($ui-button--active-backgroundColor, 60%)
+  color $ui-text-color
   .item-title
   .item-title-empty
   .item-bottom-tagList-empty
   .item-bottom-time
   .item-title-icon
-    color white
+    color $ui-text-color
   .item-bottom-tagList-item
-    background-color transparent
-    color white
+    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-active-color
-
-.item-title
-  font-size 14px
-  height 40px
-  box-sizing border-box
-  line-height 24px
-  padding-top 5px
-  padding-bottom 20px
-  overflow ellipsis
-  color $ui-text-color
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
+  &:active, &:active:hover
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
 
 .item-title-icon
-  position absolute
-  top 20px
-  right 25px
-  font-size 14px
+  position relative
+  font-size 12px
+  color $ui-inactive-text-color
+
+.item-title
+  font-size 15px
+  font-weight 700
+  position relative
+  top -12px
+  left 20px
+  padding-right 15px
+  padding-bottom 4px
+  overflow ellipsis
   color $ui-inactive-text-color
 
 .item-title-empty
@@ -73,8 +92,7 @@ $control-height = 30px
 .item-bottom
   position relative
   bottom 0px
-  margin-top 2px
-  height 20px
+  margin-top 10px
   font-size 12px
   line-height 20px
   overflow ellipsis
@@ -83,41 +101,63 @@ $control-height = 30px
 .item-bottom-tagList
   flex 1
   overflow ellipsis
-  line-height 20px
-  color #FFFFFF
+  line-height 25px
+  padding-left 2px
+  margin-right 40px
 
 .item-bottom-tagList-item
-  font-size 12px
+  font-size 11px
   margin-right 8px
-  padding 0 10px
-  height 20px
+  padding 0
   box-sizing border-box
-  border-radius 20px
+  border-radius 2px
+  padding 4px
   vertical-align middle
-  background-color $ui-tag-backgroundColor
-  color #FFFFFF
-
-.item-bottom-tagList-empty
+  background-color white
   color $ui-inactive-text-color
-  vertical-align middle
-  font-size 10px
-  margin-left 5px
 
 .item-bottom-time
   color $ui-inactive-text-color
-  font-size 12px
+  font-size 13px
+  padding-left 2px
+  padding-bottom 2px
 
 .item-star
   position absolute
-  top 20px
-  right 29px
+  right -6px
+  bottom 23px
+  width 16px
+  height 16px
+  color alpha($ui-favorite-star-button-color, 60%)
+  font-size 12px
+  padding 0
+  border-radius 17px
+
+.item-pin
+  position absolute
+  right 0px
+  bottom 2px
   width 34px
   height 34px
-  color $ui-favorite-star-button-color
+  color #E54D42
   font-size 14px
   padding 0
   border-radius 17px
 
+body[data-theme="white"]
+  .item
+    background-color $ui-white-noteList-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+    &:active
+      background-color $ui-button--active-backgroundColor
+
+  .item--active
+    @extend .item
+    background-color $ui-button--active-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
@@ -126,42 +166,66 @@ body[data-theme="dark"]
   .item
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
-    &:active
-      background-color $ui-active-color
     &:hover
-      background-color alpha($ui-active-color, 20%)
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#fff, 20%)
+        color $ui-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
+      .item-title
+      .item-title-icon
+      .item-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
+      .item-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(white, 10%)
+        color $ui-dark-text-color  
 
   .item-wrapper
-    border-color $ui-dark-borderColor
+    border-color alpha($ui-dark-button--active-backgroundColor, 60%)
 
   .item--active
-    @extend .item
     border-color $ui-dark-borderColor
-    background-color $ui-active-color
+    background-color $ui-dark-button--active-backgroundColor
     .item-wrapper
       border-color transparent
     .item-title
-      color white
+    .item-title-icon
+    .item-bottom-time
+      color $ui-dark-text-color
     .item-bottom-tagList-item
-      background-color transparent
-      color white
-    .item-bottom-tagList-empty
-      color white
+      background-color alpha(white, 10%)
+      color $ui-dark-text-color
     &:hover
-      background-color $ui-active-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-bottom-tagList-item
+        background-color alpha(#fff, 20%)
 
   .item-title
-    color $ui-dark-text-color
+    color $ui-inactive-text-color
 
   .item-title-icon
-    color $ui-darkinactive-text-color
+    color $ui-inactive-text-color
 
   .item-title-empty
-    color $ui-dark-inactive-text-color
+    color $ui-inactive-text-color
 
   .item-bottom-tagList-item
-    background-color $ui-dark-tag-backgroundColor
-    color $ui-dark-text-color
+    background-color alpha($ui-dark-button--active-backgroundColor, 40%)
+    color $ui-inactive-text-color
 
   .item-bottom-tagList-empty
     color $ui-inactive-text-color

browser/components/NoteItemSimple.js

@@ -11,8 +11,9 @@ import styles from './NoteItemSimple.styl'
  * @param {Object} note
  * @param {Function} handleNoteClick
  * @param {Function} handleNoteContextMenu
+ * @param {Function} handleDragStart
  */
-const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu }) => (
+const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu, handleDragStart }) => (
   <div styleName={isActive
       ? 'item-simple--active'
       : 'item-simple'
@@ -20,6 +21,8 @@ const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu
     key={`${note.storage}-${note.key}`}
     onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
     onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+    onDragStart={e => handleDragStart(e, note)}
+    draggable='true'
   >
     <div styleName='item-simple-title'>
       {note.type === 'SNIPPET_NOTE'
@@ -43,7 +46,8 @@ NoteItemSimple.propTypes = {
     title: PropTypes.string.isrequired
   }),
   handleNoteClick: PropTypes.func.isRequired,
-  handleNoteContextMenu: PropTypes.func.isRequired
+  handleNoteContextMenu: PropTypes.func.isRequired,
+  handleDragStart: PropTypes.func.isRequired
 }
 
 export default CSSModules(NoteItemSimple, styles)

browser/components/NoteItemSimple.styl

@@ -7,43 +7,56 @@ $control-height = 30px
 
 .item-simple
   position relative
-  padding 0 25px
+  padding 0 20px
   user-select none
   cursor pointer
   background-color $ui-noteList-backgroundColor
-  transition background-color 0.15s
+  transition 0.2s
   &:hover
-    background-color alpha($ui-active-color, 20%)
-  &:active
-    background-color $ui-active-color
-    color white
+    background-color alpha($ui-button--active-backgroundColor, 20%)
     .item-simple-title
     .item-simple-title-empty
     .item-simple-title-icon
-      color white
+      color $ui-text-color
+  &:active
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-text-color
+    .item-simple-title
+    .item-simple-title-empty
+    .item-simple-title-icon
+      color $ui-text-color
 
 .item-simple--active
   @extend .item-simple
-  background-color $ui-active-color
-  color white
+  background-color alpha($ui-button--active-backgroundColor, 60%)
+  color $ui-text-color
   .item-simple-title
   .item-simple-title-empty
     border-color transparent
-    color white
+    color $ui-text-color
   .item-simple-title-icon
-    color white
+    color $ui-text-color
   &:hover
-    background-color $ui-active-color
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
+  &:active, &:active:hover
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color #e74c3c
+    .menu-button-label
+      color $ui-text-color
 
 .item-simple-title
-  font-size 14px
+  font-size 13px
   height 40px
   box-sizing border-box
   line-height 24px
   padding-top 8px
   overflow ellipsis
-  color $ui-text-color
+  color $ui-inactive-text-color
   border-bottom $ui-border
+  position relative
 
 .item-simple-title-icon
   font-size 12px
@@ -54,6 +67,20 @@ $control-height = 30px
   font-weight normal
   color $ui-inactive-text-color
 
+body[data-theme="white"]
+  .item-simple
+    background-color $ui-white-noteList-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+    &:active
+      background-color $ui-button--active-backgroundColor
+
+  .item-simple--active
+    @extend .item-simple
+    background-color $ui-button--active-backgroundColor
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 60%)
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
@@ -62,25 +89,54 @@ body[data-theme="dark"]
   .item-simple
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
-    &:active
-      background-color $ui-active-color
     &:hover
-      background-color alpha($ui-active-color, 20%)
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(#fff, 20%)
+        color $ui-dark-text-color
+    &:active
+      transition 0.15s
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
+      .item-simple-title
+      .item-simple-title-icon
+      .item-simple-bottom-time
+        transition 0.15s
+        color $ui-dark-text-color
+      .item-simple-bottom-tagList-item
+        transition 0.15s
+        background-color alpha(white, 10%)
+        color $ui-dark-text-color  
 
   .item-simple--active
-    @extend .item-simple
     border-color $ui-dark-borderColor
-    background-color $ui-active-color
-    .item-simple-title
-    .item-simple-title-empty
-      color white
+    background-color $ui-dark-button--active-backgroundColor
+    .item-simple-wrapper
       border-color transparent
+    .item-simple-title
+    .item-simple-title-icon
+    .item-simple-bottom-time
+      color $ui-dark-text-color
+    .item-simple-bottom-tagList-item
+      background-color alpha(white, 10%)
+      color $ui-dark-text-color
     &:hover
-      background-color $ui-active-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+      color #c0392b
+      .item-simple-bottom-tagList-item
+        background-color alpha(#fff, 20%)
 
   .item-simple-title
-    color $ui-dark-text-color
-    border-color $ui-dark-borderColor
+    color $ui-inactive-text-color
+    border-color alpha($ui-dark-button--active-backgroundColor, 60%)
 
   .item-simple-title-icon
     color $ui-darkinactive-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/RealtimeNotification.js

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

browser/components/RealtimeNotification.styl

@@ -0,0 +1,34 @@
+.notification-area
+  z-index 1000
+  font-size 12px
+  position absolute
+  bottom 20px
+  width 100%
+  float left
+  height 30px
+  background-color none
+
+.notification-link
+  position absolute
+  text-decoration none
+  color #282A36
+  font-size 14px
+  border 1px solid #6FA8E6
+  background-color alpha(#6FA8E6, 0.2)
+  padding 5px 12px
+  border-radius 2px
+  transition 0.2s
+  &:hover
+    color #1378BD
+
+body[data-theme="dark"]
+  .notification-area
+    background-color none
+
+  .notification-link
+    color #fff
+    border 1px solid alpha(#5CB85C, 0.6)
+    background-color alpha(#5CB85C, 0.2)
+    transition 0.2s
+    &:hover
+      color #5CB85C

browser/components/SideNavFilter.js

@@ -15,21 +15,53 @@ import styles from './SideNavFilter.styl'
  */
 const SideNavFilter = ({
   isFolded, isHomeActive, handleAllNotesButtonClick,
-  isStarredActive, handleStarredButtonClick
+  isStarredActive, handleStarredButtonClick, isTrashedActive, handleTrashedButtonClick, counterDelNote,
+  counterTotalNote, counterStarredNote
 }) => (
   <div styleName={isFolded ? 'menu--folded' : 'menu'}>
+
     <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
       onClick={handleAllNotesButtonClick}
     >
-      <i className='fa fa-book fa-fw' />
+      <div styleName='iconWrap'>
+        <img src={isHomeActive
+            ? '../resources/icon/icon-all-active.svg'
+            : '../resources/icon/icon-all.svg'
+          }
+        />
+      </div>
       <span styleName='menu-button-label'>All Notes</span>
+      <span styleName='counters'>{counterTotalNote}</span>
     </button>
-    <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
+
+    <button styleName={isStarredActive ? 'menu-button-star--active' : 'menu-button'}
       onClick={handleStarredButtonClick}
     >
-      <i className='fa fa-star fa-fw' />
+      <div styleName='iconWrap'>
+        <img src={isStarredActive
+            ? '../resources/icon/icon-star-active.svg'
+            : '../resources/icon/icon-star.svg'
+          }
+        />
+      </div>
       <span styleName='menu-button-label'>Starred</span>
+      <span styleName='counters'>{counterStarredNote}</span>
     </button>
+
+    <button styleName={isTrashedActive ? 'menu-button-trash--active' : 'menu-button'}
+      onClick={handleTrashedButtonClick}
+    >
+      <div styleName='iconWrap'>
+        <img src={isTrashedActive
+            ? '../resources/icon/icon-trash-active.svg'
+            : '../resources/icon/icon-trash.svg'
+          }
+        />
+      </div>
+      <span styleName='menu-button-label'>Trash</span>
+      <span styleName='counters'>{counterDelNote}</span>
+    </button>
+
   </div>
 )
 
@@ -38,7 +70,9 @@ SideNavFilter.propTypes = {
   isHomeActive: PropTypes.bool.isRequired,
   handleAllNotesButtonClick: PropTypes.func.isRequired,
   isStarredActive: PropTypes.bool.isRequired,
-  handleStarredButtonClick: PropTypes.func.isRequired
+  isTrashedActive: PropTypes.bool.isRequired,
+  handleStarredButtonClick: PropTypes.func.isRequired,
+  handleTrashdButtonClick: PropTypes.func.isRequired
 }
 
 export default CSSModules(SideNavFilter, styles)

browser/components/SideNavFilter.styl

@@ -3,22 +3,55 @@
 
 .menu-button
   navButtonColor()
-  height 32px
-  padding 0 15px
+  height 36px
+  padding 0 15px 0 20px
   font-size 14px
   width 100%
   text-align left
   overflow ellipsis
+  display flex
+  align-items center
+  &:hover, &:active, &:active:hover
+    color #1EC38B
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+
+.iconWrap
+  width 20px
+  text-align center
+  
+.counters
+  float right
+  color $ui-inactive-text-color
 
 .menu-button--active
   @extend .menu-button
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
+  SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
   &:hover
-    background-color $ui-button--active-backgroundColor
+    color #1EC38B
+
+.menu-button-star--active
+  @extend .menu-button
+  SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
+
+.menu-button-trash--active
+  @extend .menu-button
+  SideNavFilter()
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  .menu-button-label, .counters
+    color #1EC38B
 
 .menu-button-label
-  margin-left 5px
+  margin-left 10px
+  flex 1
 
 .menu--folded
   @extend .menu
@@ -27,6 +60,7 @@
     &:hover .menu-button-label
       transition opacity 0.15s
       opacity 1
+
   .menu-button-label
     position fixed
     display inline-block
@@ -36,23 +70,112 @@
     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
+    font-size 13px
+  .counters
+    display none
 
-body[data-theme="dark"]
+body[data-theme="white"]
   .menu-button
-    navDarkButtonColor()
+    navWhiteButtonColor()
+
+  .counters
+    color $ui-inactive-text-color
 
   .menu-button--active
     @extend .menu-button
-    background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-button--active-color
+    color #e74c3c
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
     &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #e74c3c
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #e74c3c
+      .menu-button-label
+        color $ui-text-color
+
+  .menu-button-star--active
+    @extend .menu-button
+    color #F9BF3B
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #F9BF3B
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #F9BF3B
+      .menu-button-label
+        color $ui-text-color
+
+  .menu-button-trash--active
+    @extend .menu-button
+    color #5D9E36
+    background-color $ui-button--active-backgroundColor
+    .menu-button-label
+      color $ui-text-color
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-text-color
+    &:active, &:active:hover
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-text-color
+
+body[data-theme="dark"]
+  .menu-button
+    &:active
       background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
+
+  .menu-button--active
+    color #c0392b
+    background-color $ui-dark-button--active-backgroundColor
+    .menu-button-label
+      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      color #c0392b
+      .menu-button-label
+        color $ui-dark-text-color
+
+  .menu-button-star--active
+    color $ui-favorite-star-button-color
+    background-color $ui-dark-button--active-backgroundColor
+    .menu-button-label
+      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      color $ui-favorite-star-button-color
+      .menu-button-label
+        color $ui-dark-text-color
+
+  .menu-button-trash--active
+    color #5D9E36
+    background-color $ui-dark-button--active-backgroundColor
+    .menu-button-label
+      color $ui-dark-text-color
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      color #5D9E36
+      .menu-button-label
+        color $ui-dark-text-color

browser/components/SnippetTab.js

@@ -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

@@ -60,7 +60,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
 
   .root--active
@@ -73,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
@@ -83,9 +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
 
   .input
     background-color $ui-dark-button--hover-backgroundColor
-    color white
+    color $ui-dark-text-color

browser/components/StorageItem.js

@@ -14,11 +14,14 @@ import { isNumber } from 'lodash'
  * @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
+  folderColor, isFolded, noteCount, handleDrop, handleDragEnter, handleDragLeave
 }) => (
   <button styleName={isActive
       ? 'folderList-item--active'
@@ -26,13 +29,14 @@ const StorageItem = ({
     }
     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}
+    }>
+      <text style={{color: folderColor, paddingRight: '10px'}}>{isActive ? <i className='fa fa-folder-open-o' /> : <i className='fa fa-folder-o' />}</text>{isFolded ? folderName.substring(0, 1) : folderName}
     </span>
     {(!isFolded && isNumber(noteCount)) &&
       <span styleName='folderList-item-noteCount'>{noteCount}</span>
@@ -52,6 +56,8 @@ StorageItem.propTypes = {
   folderName: PropTypes.string.isRequired,
   folderColor: PropTypes.string,
   isFolded: PropTypes.bool.isRequired,
+  handleDragEnter: PropTypes.func.isRequired,
+  handleDragLeave: PropTypes.func.isRequired,
   noteCount: PropTypes.number
 }
 

browser/components/StorageItem.styl

@@ -5,11 +5,10 @@
 .folderList-item
   display flex
   width 100%
-  height 26px
+  height 34px
   background-color transparent
   color $ui-inactive-text-color
   padding 0
-  margin-bottom 5px
   text-align left
   border none
   overflow ellipsis
@@ -17,26 +16,28 @@
   &:first-child
     margin-top 0
   &:hover
-    background-color $ui-button--hover-backgroundColor
+    color #1EC38B;
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+    transition background-color 0.15s
   &:active
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
-
+    color $$ui-button-default-color
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+    
 .folderList-item--active
   @extend .folderList-item
-  color $ui-button--active-color
-  background-color $ui-button--active-backgroundColor
+  color #1EC38B
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
   &:hover
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
+    color #1EC38B;
+    background-color alpha($ui-button-default--active-backgroundColor, 50%)
 
 .folderList-item-name
   display block
   flex 1
-  padding 0 30px
+  padding 0 12px
   height 26px
   line-height 26px
-  border-width 0 0 0 3px
+  border-width 0 0 0 2px
   border-style solid
   border-color transparent
   overflow hidden
@@ -46,7 +47,7 @@
   float right
   line-height 26px
   padding-right 15px
-  font-size 12px
+  font-size 13px
 
 .folderList-item-tooltip
   tooltip()
@@ -67,4 +68,44 @@
 
 .folderList-item-name--folded
   @extend .folderList-item-name
-  padding-left 14px
+  padding-left 17px
+  text
+    display none
+
+body[data-theme="white"]
+  .folderList-item
+    color $ui-inactive-text-color
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 20%)
+      transition background-color 0.15s
+    &:active
+      color $ui-text-color
+      background-color $ui-button--active-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-text-color
+    background-color $ui-button--active-backgroundColor
+    &:hover
+      color $ui-text-color
+      background-color alpha($ui-button--active-backgroundColor, 50%)
+
+body[data-theme="dark"]
+  .folderList-item
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-dark-text-color
+    &:active
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .folderList-item--active
+    @extend .folderList-item
+    color $ui-dark-text-color
+    background-color $ui-dark-button--active-backgroundColor
+    &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+    &:hover
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)

browser/components/StorageList.js

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

browser/components/StorageList.styl

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

browser/components/TagListItem.js

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

browser/components/TagListItem.styl

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

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,32 @@
+.percentageBar
+  position absolute
+  top 50px
+  right 0px
+  left 0px
+  background-color #DADFE1
+  width 100%
+  height: 17px
+  font-size: 12px
+  z-index 100
+  border-radius 2px
+
+.progressBar
+  background-color: #1EC38B
+  height 17px
+  border-radius 2px
+  transition 0.4s cubic-bezier(0.4, 0.4, 0, 1)
+
+.percentageText
+  color #f4f4f4
+  padding: 2px 43%
+  font-weight 600
+
+body[data-theme="dark"]
+  .percentageBar
+    background-color #363A3D
+
+  .progressBar
+    background-color: alpha(#939395, 50%)
+
+  .percentageText
+    color $ui-dark-text-color

browser/components/TodoProcess.js

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

browser/components/TodoProcess.styl

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

browser/components/markdown.styl

@@ -54,7 +54,6 @@ 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'
@@ -78,7 +77,6 @@ body
 li
   label.taskListItem
     margin-left -2em
-    background-color white
 div.math-rendered
   text-align center
 .math-failed
@@ -120,7 +118,7 @@ hr
 h1, h2, h3, h4, h5, h6
   font-weight bold
 h1
-  font-size 2.25em
+  font-size 2.55em
   padding-bottom 0.3em
   line-height 1.2em
   border-bottom solid 1px borderColor
@@ -195,6 +193,7 @@ ol
   &>li>ul, &>li>ol
     margin 0
 code
+  color #CC305F
   padding 0.2em 0.4em
   background-color #f7f7f7
   border-radius 3px
@@ -270,9 +269,19 @@ table
       border-color borderColor
       &:last-child
         border-right solid 1px borderColor
+kbd
+  background-color #fafbfc
+  border solid 1px borderColor
+  border-bottom-color btnColor
+  border-radius 3px
+  box-shadow inset 0 -1px 0 #959da5
+  display inline-block
+  font-size .8em
+  line-height 1
+  padding 3px 5px
 
 themeDarkBackground = darken(#21252B, 10%)
-themeDarkText = #DDDDDD
+themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)
 themeDarkPreview = $ui-dark-noteDetail-backgroundColor
 themeDarkTableOdd = themeDarkPreview
@@ -290,8 +299,9 @@ body[data-theme="dark"]
     background-color alpha(lighten(brandColor, 30%), 0.2) !important
 
   code
+    color #EA6730
     border-color darken(themeDarkBorder, 10%)
-    background-color lighten(themeDarkPreview, 10%)
+    background-color lighten(themeDarkPreview, 5%)
 
   pre
     border-color lighten(#21252B, 20%)
@@ -317,3 +327,6 @@ body[data-theme="dark"]
         border-color themeDarkTableBorder
         &:last-child
           border-right solid 1px themeDarkTableBorder
+  kbd
+    background-color themeDarkBorder
+    color themeDarkText

browser/finder/FinderMain.styl

@@ -64,7 +64,7 @@ $list-width = 250px
 
 .result-nav-storageList
   absolute bottom left right
-  top 80px + 32px + 10px + 10px
+  top 110px + 32px + 10px + 10px + 20px
   overflow-y auto
 
 .result-list

browser/finder/NoteDetail.js

@@ -5,6 +5,7 @@ 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
@@ -106,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
@@ -143,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}
@@ -192,6 +196,8 @@ class NoteDetail extends React.Component {
         lineNumber={config.preview.lineNumber}
         indentSize={editorIndentSize}
         value={note.content}
+        showCopyNotification={config.ui.showCopyNotification}
+        storagePath={storage.path}
       />
     )
   }

browser/finder/NoteDetail.styl

@@ -2,6 +2,7 @@
 
 .root
   absolute top bottom left right
+  bottom 30px
   left $note-detail-left-margin
   right $note-detail-right-margin
   height 100%

browser/finder/NoteList.js

@@ -70,7 +70,6 @@ class NoteList extends React.Component {
             dateDisplay={dateDisplay}
             key={key}
             handleNoteClick={(e) => this.props.handleNoteClick(e, _index)}
-            handleNoteContextMenu={() => ''}
           />
         )
       })

browser/finder/index.js

@@ -10,6 +10,7 @@ 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')
 
@@ -68,7 +69,7 @@ class FinderMain extends React.Component {
 
   handleWindowBlur (e) {
     this.setState({
-      search: '',
+      search: ''
     })
   }
 
@@ -94,6 +95,7 @@ class FinderMain extends React.Component {
 
     if (e.keyCode === 13) {
       this.refs.detail.saveToClipboard()
+      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('COPY_FINDER')
       hideFinder()
       e.preventDefault()
     }

browser/finder/ipcClient.js

@@ -84,6 +84,8 @@ nodeIpc.connectTo(
       const { config } = payload
       if (config.ui.theme === 'dark') {
         document.body.setAttribute('data-theme', 'dark')
+      } else if (config.ui.theme === 'white') {
+        document.body.setAttribute('data-theme', 'white')
       } else {
         document.body.setAttribute('data-theme', 'default')
       }

browser/lib/RcParser.js

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

browser/lib/consts.js

@@ -10,6 +10,7 @@ const themes = fs.readdirSync(themePath)
   .map((themePath) => {
     return themePath.substring(0, themePath.lastIndexOf('.'))
   })
+themes.splice(themes.indexOf('solarized'), 1, 'solarized dark', 'solarized light')
 
 const consts = {
   FOLDER_COLORS: [

browser/lib/date-formatter.js

@@ -8,7 +8,7 @@ import moment from 'moment'
  * @param {mixed}
  * @return {string}
  */
-export function getLastUpdated (date) {
+export function formatDate (date) {
   const m = moment(date)
   if (!m.isValid()) {
     throw Error('Invalid argument.')

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

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

browser/lib/htmlTextHelper.js

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

browser/lib/markdown.js

@@ -3,6 +3,7 @@ import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
 import _ from 'lodash'
 
+// FIXME We should not depend on global variable.
 const katex = window.katex
 
 function createGutter (str) {
@@ -19,6 +20,7 @@ var md = markdownit({
   linkify: true,
   html: true,
   xhtmlOut: true,
+  breaks: true,
   highlight: function (str, lang) {
     if (lang === 'flowchart') {
       return `<pre class="flowchart">${str}</pre>`
@@ -56,7 +58,20 @@ md.use(math, {
     return output
   }
 })
+md.use(require('markdown-it-imsize'))
 md.use(require('markdown-it-footnote'))
+md.use(require('markdown-it-multimd-table'))
+md.use(require('markdown-it-named-headers'), {
+  slugify: (header) => {
+    return encodeURI(header.trim()
+      .replace(/[\]\[\!\"\#\$\%\&\'\(\)\*\+\,\.\/\:\;\<\=\>\?\@\\\^\_\{\|\}\~]/g, '')
+      .replace(/\s+/g, '-'))
+      .replace(/\-+$/, '')
+  }
+})
+md.use(require('markdown-it-kbd'))
+md.use(require('markdown-it-plantuml'))
+
 // Override task item
 md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
   let content, terminate, i, l, token
@@ -123,42 +138,20 @@ md.renderer.render = function render (tokens, options, env) {
   let result = originalRender.call(md.renderer, tokens, options, env)
   return result
 }
+// FIXME We should not depend on global variable.
 window.md = md
 
-function strip (input) {
-  var output = input
-  try {
-    output = output
-      .replace(/^([\s\t]*)([\*\-\+]|\d\.)\s+/gm, '$1')
-      .replace(/\n={2,}/g, '\n')
-      .replace(/~~/g, '')
-      .replace(/`{3}.*\n/g, '')
-      .replace(/<(.*?)>/g, '$1')
-      .replace(/^[=\-]{2,}\s*$/g, '')
-      .replace(/\[\^.+?\](: .*?$)?/g, '')
-      .replace(/\s{0,2}\[.*?\]: .*?$/g, '')
-      .replace(/!\[.*?\][\[\(].*?[\]\)]/g, '')
-      .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
-      .replace(/>/g, '')
-      .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
-      .replace(/^#{1,6}\s*([^#]*)\s*(#{1,6})?/gm, '$1')
-      .replace(/([\*_]{1,3})(\S.*?\S)\1/g, '$2')
-      .replace(/(`{3,})(.*?)\1/gm, '$2')
-      .replace(/^-{3,}\s*$/g, '')
-      .replace(/`(.+?)`/g, '$1')
-      .replace(/\n{2,}/g, '\n\n')
-  } catch (e) {
-    console.error(e)
-    return input
-  }
-  return output
+function normalizeLinkText (linkText) {
+  return md.normalizeLinkText(linkText)
 }
 
 const markdown = {
   render: function markdown (content) {
     if (!_.isString(content)) content = ''
-    return md.render(content)
+    const renderedContent = md.render(content)
+    return renderedContent
   },
-  strip
+  normalizeLinkText
 }
+
 export default markdown

browser/lib/markdownTextHelper.js

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

browser/lib/search.js

@@ -0,0 +1,43 @@
+import _ from 'lodash'
+
+export default function searchFromNotes (notes, search) {
+  if (search.trim().length === 0) return []
+  const searchBlocks = search.split(' ').filter(block => { return block !== '' })
+
+  let foundNotes = findByWord(notes, searchBlocks[0])
+  searchBlocks.forEach((block) => {
+    foundNotes = findByWord(foundNotes, block)
+    if (block.match(/^#.+/)) {
+      foundNotes = foundNotes.concat(findByTag(notes, block))
+    }
+  })
+  return foundNotes
+}
+
+function findByTag (notes, block) {
+  const tag = block.match(/#(.+)/)[1]
+  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,8 @@
 .root
   absolute top bottom right
-  border-width 1px 0
-  border-style solid
-  border-color $ui-borderColor
+  display flex
+  align-items center
+  justify-content center
 
 .empty
   height 320px
@@ -11,14 +11,14 @@
 
 .empty-message
   width 100%
-  font-size 42px
-  line-height 72px
+  font-size 36px
+  font-weight 600
+  line-height 56px
   text-align center
   color $ui-inactive-text-color
 
 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

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

browser/main/Detail/FolderSelect.js

@@ -259,12 +259,11 @@ class FolderSelect extends React.Component {
               {optionList}
             </div>
           </div>
-          : <div styleName='idle'>
+          : <div styleName='idle' style={{color: currentOption.folder.color}}>
             <div styleName='idle-label'>
-              <span styleName='idle-label-name'
-                style={{color: currentOption.folder.color}}
-              >
-                {currentOption.folder.name} /
+              <i className='fa fa-folder' />
+              <span styleName='idle-label-name'>
+                {currentOption.folder.name}
               </span>
             </div>
           </div>

browser/main/Detail/FolderSelect.styl

@@ -1,21 +1,22 @@
 .root
   position relative
   border solid 1px transparent
-  line-height 34px
   vertical-align middle
   border-radius 2px
   transition 0.15s
   user-select none
+  margin-right 10px
   &:hover
     background-color $ui-button--hover-backgroundColor
 
 .root--search, .root--focus
   @extend .root
-  background-color $ui-noteDetail-backgroundColor = #F4F4F4
+  background-color $ui-noteDetail-backgroundColor = #fff
   border-color $ui-input--focus-borderColor
-  width 100px
+  width 154px
+  height 30px
   &:hover
-    border-color $ui-input--focus-borderColor
+    border-color $ui-input--focus-borderColor = #fff
 
 .idle
   position relative
@@ -24,13 +25,16 @@
 .idle-label
   right 20px
   overflow ellipsis
+  display flex
+  align-items center
 
 .idle-label-name
-  font-size 16px
-  padding 2px
+  font-size 13px
+  font-weight 600
+  margin-left 4px
 
 .idle-label-name-surfix
-  font-size 10px
+  font-size 15px
   color $ui-inactive-text-color
   margin-left 5px
 .idle-caret
@@ -38,40 +42,42 @@
   height 34px
   width 20px
   line-height 34px
-
-.search
-  absolute top left right bottom
-  line-height 34px
-
+  
 .search-input
   vertical-align middle
   position relative
-  top -2px
+  top 0
+  font-size 14px
   outline none
   border none
-  height 20px
-  line-height 20px
+  width 100%
   background-color transparent
   padding 0 10px
 
 .search-optionList
-  position fixed
+  position absolute
+  top 30px
   max-height 450px
+  min-width 150px
   overflow auto
   z-index 200
   border $ui-border
   background-color white
   border-radius 2px
+  padding 10px 6px
 
 .search-optionList-item
+  width 140px
   height 34px
-  width 250px
+  display flex
+  align-items center
   box-sizing border-box
-  padding 0 5px
+  padding 0
+  margin-bottom 10px
   overflow ellipsis
   cursor pointer
   &:hover
-    background-color $ui-button--hover-backgroundColor
+    background-color $ui-button--hover-backgroundColor 
 
 .search-optionList-item--active
   @extend .search-optionList-item
@@ -81,13 +87,17 @@
     background-color $ui-button--active-backgroundColor
     color $ui-button--active-color
 .search-optionList-item-name
-  border-left solid 4px transparent
-  padding 2px 5px
+  border-left solid 3px transparent
+  padding 6px
 .search-optionList-item-name-surfix
   font-size 10px
   color $ui-inactive-text-color
   margin-left 5px
 
+
+
+
+
 body[data-theme="dark"]
   .root
     color $ui-dark-text-color

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={(e) => onClick(e)}
+  >
+    <img className='infoButton' src='../resources/icon/icon-info.svg' />
+  </button>
+)
+
+InfoButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(InfoButton, styles)

browser/main/Detail/InfoButton.styl

@@ -0,0 +1,11 @@
+.control-infoButton
+  top 10px
+  margin-bottom 10px
+  topBarButtonLight()
+
+.infoButton
+  padding 0px
+
+body[data-theme="dark"]
+  .control-infoButton
+    topBarButtonDark()

browser/main/Detail/InfoPanel.js

@@ -0,0 +1,90 @@
+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, wordCount, letterCount, type, print
+}) => (
+  <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
+    <div>
+      <p styleName='modification-date'>{updatedAt}</p>
+      <p styleName='modification-date-desc'>MODIFICATION DATE</p>
+    </div>
+
+    <hr />
+
+    {type === 'SNIPPET_NOTE'
+      ? ''
+      : <div styleName='count-wrap'>
+        <div styleName='count-number'>
+          <p styleName='infoPanel-defaul-count'>{wordCount}</p>
+          <p styleName='infoPanel-sub-count'>Words</p>
+        </div>
+        <div styleName='count-number'>
+          <p styleName='infoPanel-defaul-count'>{letterCount}</p>
+          <p styleName='infoPanel-sub-count'>Letters</p>
+        </div>
+      </div>
+    }
+
+    {type === 'SNIPPET_NOTE'
+      ? ''
+      : <hr />
+    }
+
+    <div>
+      <p styleName='infoPanel-default'>{storageName}</p>
+      <p styleName='infoPanel-sub'>STORAGE</p>
+    </div>
+
+    <div>
+      <p styleName='infoPanel-default'>{folderName}</p>
+      <p styleName='infoPanel-sub'>FOLDER</p>
+    </div>
+
+    <div>
+      <p styleName='infoPanel-default'>{createdAt}</p>
+      <p styleName='infoPanel-sub'>CREATION DATE</p>
+    </div>
+
+    <div>
+      <input styleName='infoPanel-noteLink' value={noteLink} onClick={(e) => { e.target.select() }} />
+      <p styleName='infoPanel-sub'>NOTE LINK</p>
+    </div>
+
+    <hr />
+
+    <div id='export-wrap'>
+      <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
+        <i className='fa fa-file-code-o 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--enable' onClick={(e) => print(e)}>
+        <i className='fa fa-print fa-fw' />
+        <p>Print</p>
+      </button>
+    </div>
+  </div>
+)
+
+InfoPanel.propTypes = {
+  storageName: PropTypes.string.isRequired,
+  folderName: PropTypes.string.isRequired,
+  noteLink: PropTypes.string.isRequired,
+  updatedAt: PropTypes.string.isRequired,
+  createdAt: PropTypes.string.isRequired,
+  exportAsMd: PropTypes.func.isRequired,
+  exportAsTxt: PropTypes.func.isRequired,
+  wordCount: PropTypes.number,
+  letterCount: PropTypes.number,
+  type: PropTypes.string.isRequired,
+  print: PropTypes.func.isRequired
+}
+
+export default CSSModules(InfoPanel, styles)

browser/main/Detail/InfoPanel.styl

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

browser/main/Detail/InfoPanelTrashed.js

@@ -0,0 +1,59 @@
+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>
+      <p styleName='modification-date'>{updatedAt}</p>
+      <p styleName='modification-date-desc'>MODIFICATION DATE</p>
+    </div>
+
+    <hr />
+
+    <div>
+      <p styleName='infoPanel-default'>{storageName}</p>
+      <p styleName='infoPanel-sub'>STORAGE</p>
+    </div>
+
+    <div>
+      <p styleName='infoPanel-default'><text styleName='infoPanel-trash'>Trash</text>{folderName}</p>
+      <p styleName='infoPanel-sub'>FOLDER</p>
+    </div>
+
+    <div>
+      <p styleName='infoPanel-default'>{createdAt}</p>
+      <p styleName='infoPanel-sub'>CREATION DATE</p>
+    </div>
+
+    <div id='export-wrap'>
+      <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
+        <i className='fa fa-file-code-o 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/LastUpdatedString.js

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

browser/main/Detail/LastUpdatedString.styl

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

browser/main/Detail/MarkdownNoteDetail.js

@@ -2,15 +2,26 @@ 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'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
-import markdown from 'browser/lib/markdown'
+import markdown from 'browser/lib/markdownTextHelper'
 import StatusBar from '../StatusBar'
 import _ from 'lodash'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import TrashButton from './TrashButton'
+import PermanentDeleteButton from './PermanentDeleteButton'
+import InfoButton from './InfoButton'
+import InfoPanel from './InfoPanel'
+import InfoPanelTrashed from './InfoPanelTrashed'
+import { formatDate } from 'browser/lib/date-formatter'
+import { getTodoPercentageOfCompleted } from 'browser/lib/getTodoStatus'
+import striptags from 'striptags'
 
 const electron = require('electron')
 const { remote } = electron
@@ -25,15 +36,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 +60,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 +69,16 @@ 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
-      }
-    }
-
-    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 = ''
-      }
-    }
-
-    title = markdown.strip(title)
-
-    return title
+  componentDidUnmount () {
+    ee.off('topbar:togglelockbutton', this.toggleLockButton)
   }
 
   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(striptags(findNoteTitle(note.content)))
     note.updatedAt = new Date()
 
     this.setState({
@@ -114,6 +107,7 @@ class MarkdownNoteDetail extends React.Component {
           type: 'UPDATE_NOTE',
           note: note
         })
+        AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
       })
   }
 
@@ -152,6 +146,7 @@ class MarkdownNoteDetail extends React.Component {
 
   handleStarButtonClick (e) {
     let { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
 
@@ -166,23 +161,26 @@ class MarkdownNoteDetail extends React.Component {
 
   }
 
-  handleContextButtonClick (e) {
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Delete',
-      click: (e) => this.handleDeleteMenuClick(e)
-    }))
-    menu.popup(remote.getCurrentWindow())
+  exportAsMd () {
+    ee.emit('export:save-md')
   }
 
-  handleDeleteMenuClick (e) {
-    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
-      type: 'warning',
-      message: 'Delete a note',
-      detail: 'This work cannot be undone.',
-      buttons: ['Confirm', 'Cancel']
-    })
-    if (index === 0) {
+  exportAsTxt () {
+    ee.emit('export:save-text')
+  }
+
+  handleTrashButtonClick (e) {
+    let { note } = this.state
+    const { isTrashed } = note
+
+    if (isTrashed) {
+      let dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+        type: 'warning',
+        message: 'Confirm note deletion',
+        detail: 'This will permanently remove this note.',
+        buttons: ['Confirm', 'Cancel']
+      })
+      if (dialogueButtonIndex === 1) return
       let { note, dispatch } = this.props
       dataApi
         .deleteNote(note.storage, note.key)
@@ -195,53 +193,190 @@ class MarkdownNoteDetail extends React.Component {
             })
           }
           ee.once('list:moved', dispatchHandler)
-          ee.emit('list:next')
         })
+    } 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 ? '../resources/icon/icon-lock.svg' : '../resources/icon/icon-unlock.svg'
   }
 
   handleDeleteKeyDown (e) {
     if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
   }
 
+  handleToggleLockButton (event, noteStatus) {
+    // first argument event is not used
+    if (this.props.config.editor.switchPreview === 'BLUR' && noteStatus === 'CODE') {
+      this.setState({isLockButtonShown: true})
+    } else {
+      this.setState({isLockButtonShown: false})
+    }
+  }
+
+  handleFocus (e) {
+    this.focus()
+  }
+
+  handleInfoButtonClick (e) {
+    const infoPanel = document.querySelector('.infoPanel')
+    if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none'
+  }
+
+  print (e) {
+    ee.emit('print')
+  }
+
   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 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'>
+        <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+        <InfoPanelTrashed
+          storageName={currentOption.storage.name}
+          folderName={currentOption.folder.name}
+          updatedAt={formatDate(note.updatedAt)}
+          createdAt={formatDate(note.createdAt)}
+          exportAsMd={this.exportAsMd}
+          exportAsTxt={this.exportAsTxt}
+        />
+      </div>
+    </div>
+
+    const detailTopBar = <div styleName='info'>
+      <div styleName='info-left'>
+        <div styleName='info-left-top'>
+          <FolderSelect styleName='info-left-top-folderSelect'
+            value={this.state.note.storage + '-' + this.state.note.folder}
+            ref='folder'
+            data={data}
+            onChange={(e) => this.handleFolderChange(e)}
+          />
+        </div>
+
+        <TagSelect
+          ref='tags'
+          value={this.state.note.tags}
+          onChange={(e) => this.handleChange(e)}
+        />
+        <TodoListPercentage
+          percentageOfTodo={getTodoPercentageOfCompleted(note.content)}
+        />
+      </div>
+      <div styleName='info-right'>
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+
+        <StarButton
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+
+        {(() => {
+          const imgSrc = `${this.getToggleLockButton()}`
+          const lockButtonComponent =
+            <button styleName='control-lockButton'
+              onFocus={(e) => this.handleFocus(e)}
+              onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
+            >
+              <img styleName='iconInfo' src={imgSrc} />
+            </button>
+
+          return (
+            this.state.isLockButtonShown ? lockButtonComponent : ''
+          )
+        })()}
+
+        <button styleName='control-fullScreenButton'
+          onMouseDown={(e) => this.handleFullScreenButton(e)}
+        >
+          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg' />
+        </button>
+
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(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}
+          wordCount={note.content.split(' ').length}
+          letterCount={note.content.replace(/\r?\n/g, '').length}
+          type={note.type}
+          print={this.print}
+        />
+      </div>
+    </div>
 
     return (
       <div className='NoteDetail'
         style={this.props.style}
         styleName='root'
       >
-        <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}
-                ref='folder'
-                data={data}
-                onChange={(e) => this.handleFolderChange(e)}
-              />
-            </div>
 
-            <TagSelect
-              ref='tags'
-              value={this.state.note.tags}
-              onChange={(e) => this.handleChange(e)}
-            />
-          </div>
-          <div styleName='info-right'>
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleContextButtonClick(e)}
-            >
-              <i className='fa fa-ellipsis-v' />
-            </button>
-          </div>
-        </div>
+        {location.pathname === '/trashed' ? trashTopBar : detailTopBar}
 
         <div styleName='body'>
           <MarkdownEditor
@@ -249,6 +384,7 @@ class MarkdownNoteDetail extends React.Component {
             styleName='body-noteEditor'
             config={config}
             value={this.state.note.content}
+            storageKey={this.state.note.storage}
             onChange={(e) => this.handleChange(e)}
             ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
           />

browser/main/Detail/MarkdownNoteDetail.styl

@@ -3,24 +3,54 @@
 
 .root
   absolute top right bottom
-  border-width 0 0 1px
-  border-style solid
-  border-color $ui-borderColor
+  border-left 1px solid alpha(#DEDEDE, 60%)
   background-color $ui-noteDetail-backgroundColor
-  box-shadow $note-detail-box-shadow
+  box-shadow none
+  padding 20px 40px
+
+.lock-button
+  padding-bottom 3px
+
+.control-lockButton
+  top 160px
+  margin-bottom 10px
+  topBarButtonLight()
+
+.trashed-infopanel
+  top 40px
+  position relative
+
+.control-fullScreenButton
+  top 80px
+  topBarButtonLight()
 
 .body
   absolute left right
-  left $note-detail-left-margin
-  right $note-detail-right-margin
+  left 0
+  right 0
   top $info-height + $info-margin-under-border
   bottom $statusBar-height
-
+  max-width 600px
+  margin 0 auto
 .body-noteEditor
   absolute top bottom left right
 
+body[data-theme="white"]
+  .root
+    box-shadow $note-detail-box-shadow
+    border none
+
 body[data-theme="dark"]
   .root
-    border-color $ui-dark-borderColor
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
+    border none
+
+  .control-lockButton
+    topBarButtonDark()
+
+  .control-lockButton-tooltip
+    darkTooltip()
+
+  .control-fullScreenButton
+    topBarButtonDark()

browser/main/Detail/NoteDetailInfo.styl

@@ -1,33 +1,30 @@
 @import('DetailVars')
 
-$info-height = 60px
-$info-margin-under-border = 27px
+$info-height = 50px
+$info-margin-under-border = 30px
 
 .info
   absolute top left right
-  left $note-detail-left-margin
-  right $note-detail-right-margin
+  left 0
+  right 0
   height $info-height
-  border-bottom $ui-border
+  border-bottom 1px solid #eee
   background-color $ui-noteDetail-backgroundColor
+  width 100%
+  display flex
+  align-items center
 
 .info-left
-  float left
-  padding 0 5px
-  margin 0px 2px
+  padding 0 10px
+  width 100%
+  display flex
+  align-items center
 
-.info-left-top
-  display inline-block
-  height $info-height
-  line-height $info-height
 
 .info-left-top-folderSelect
-  display inline-block
-  padding 0 3px
-  height 34px
-  line-height 34px
-  vertical-align middle
-  border-radius 3px
+  display flex
+  align-items center
+  justify-content center
 
 .info-left-button
   width 34px
@@ -35,39 +32,47 @@ $info-margin-under-border = 27px
   navButtonColor()
   color $ui-favorite-star-button-color
   font-size 14px
+  line-height 0
   margin 13px 2px
   padding 0
   border-radius 17px
-  &:hover .info-right-button-tooltip
+  &:hover .info-left-button-tooltip
     opacity 1
   &:focus
     border-color $ui-favorite-star-button-color
   &:active, &:active:hover
     background-color $ui-favorite-star-button-color
-    color $ui-button--active-color
+    color $ui-button--color
 
 .info-right
   position absolute
-  right 0
-  top 0
-  background $ui-noteDetail-backgroundColor
+  right 40px
+  top 60px
   bottom 1px
   padding-left 30px
+  z-index 101
 
-.info-right-button
+.undo-button
   width 34px
   height 34px
   border-radius 17px
   font-size 14px
-  margin 13px 7px
-  padding 0
+  margin 5px 0px
   border none
   color $ui-button-color
+  display flex
+  align-items center
+  justify-content center
+  fill $ui-button-color
   background-color transparent
+  cursor pointer
+  &:active
+    border-color $ui-button--active-backgroundColor
   &:hover
-    opacity 1
-    background-color $ui-button--hover-backgroundColor
-
+    background-color alpha($ui-button--hover-backgroundColor, 60%)
+    transition 0.2s
+    .control-lockButton-tooltip
+      opacity 1
 
 body[data-theme="dark"]
   .info
@@ -89,10 +94,5 @@ body[data-theme="dark"]
   .info-right
     background-color $ui-dark-noteDetail-backgroundColor
 
-  .info-right-button
-    navDarkButtonColor()
-    border-color $ui-dark-borderColor
-    &:active
-      border-color $ui-dark-button--focus-borderColor
-    &:focus
-      border-color $ui-button--focus-borderColor
+  .undo-button
+    topBarButtonDark()

browser/main/Detail/PermanentDeleteButton.js

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

browser/main/Detail/SnippetNoteDetail.js

@@ -15,6 +15,14 @@ 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 PermanentDeleteButton from './PermanentDeleteButton'
+import InfoButton from './InfoButton'
+import InfoPanel from './InfoPanel'
+import InfoPanelTrashed from './InfoPanelTrashed'
+import { formatDate } from 'browser/lib/date-formatter'
 
 function pass (name) {
   switch (name) {
@@ -51,7 +59,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: ''
@@ -66,7 +74,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()
       })
     }
   }
@@ -75,41 +83,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
@@ -137,6 +117,7 @@ class SnippetNoteDetail extends React.Component {
           type: 'UPDATE_NOTE',
           note: note
         })
+        AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
       })
   }
 
@@ -175,6 +156,7 @@ class SnippetNoteDetail extends React.Component {
 
   handleStarButtonClick (e) {
     let { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
 
@@ -189,21 +171,18 @@ class SnippetNoteDetail extends React.Component {
 
   }
 
-  handleContextButtonClick (e) {
-    context.popup([{
-      label: 'Delete',
-      click: (e) => this.handleDeleteMenuClick(e)
-    }])
-  }
+  handleTrashButtonClick (e) {
+    let { note } = this.state
+    const { isTrashed } = note
 
-  handleDeleteMenuClick (e) {
-    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
-      type: 'warning',
-      message: 'Delete a note',
-      detail: 'This work cannot be undone.',
-      buttons: ['Confirm', 'Cancel']
-    })
-    if (index === 0) {
+    if (isTrashed) {
+      let dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+        type: 'warning',
+        message: 'Confirm note deletion',
+        detail: 'This will permanently remove this note.',
+        buttons: ['Confirm', 'Cancel']
+      })
+      if (dialogueButtonIndex === 1) return
       let { note, dispatch } = this.props
       dataApi
         .deleteNote(note.storage, note.key)
@@ -216,9 +195,34 @@ class SnippetNoteDetail extends React.Component {
             })
           }
           ee.once('list:moved', dispatchHandler)
-          ee.emit('list:next')
         })
+    } 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) {
@@ -250,25 +254,30 @@ 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()
     })
   }
 
   renameSnippetByIndex (index, name) {
-    let snippets = this.state.note.snippets.slice()
+    const snippets = this.state.note.snippets.slice()
     snippets[index].name = name
-    let syntax = CodeMirror.findModeByFileName(name.trim())
-    let mode = syntax != null ? syntax.name : null
-    if (mode != null) snippets[index].mode = mode
-    this.state.note.snippets = snippets
+    const syntax = CodeMirror.findModeByFileName(name.trim())
+    const mode = syntax != null ? syntax.name : null
+    if (mode != null) {
+      snippets[index].mode = mode
+      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('SNIPPET_LANG', {
+        name: mode
+      })
+    }
+    this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
 
     this.setState({
       note: this.state.note
@@ -281,13 +290,17 @@ class SnippetNoteDetail extends React.Component {
     return (e) => {
       let snippets = this.state.note.snippets.slice()
       snippets[index].mode = name
-      this.state.note.snippets = snippets
+      this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
 
       this.setState({
         note: this.state.note
       }, () => {
         this.save()
       })
+
+      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('SELECT_LANG', {
+        name
+      })
     }
   }
 
@@ -295,7 +308,7 @@ class SnippetNoteDetail extends React.Component {
     return (e) => {
       let snippets = this.state.note.snippets.slice()
       snippets[index].content = this.refs['code-' + index].value
-      this.state.note.snippets = snippets
+      this.setState({note: Object.assign(this.state.note, {snippets: snippets})})
       this.setState({
         note: this.state.note
       }, () => {
@@ -459,10 +472,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)
@@ -500,6 +530,7 @@ class SnippetNoteDetail extends React.Component {
             onChange={(e) => this.handleCodeChange(index)(e)}
             ref={'code-' + index}
             ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
+            storageKey={storageKey}
           />
           : <CodeEditor styleName='tabView-content'
             mode={snippet.mode}
@@ -517,41 +548,93 @@ class SnippetNoteDetail extends React.Component {
       </div>
     })
 
+    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'>
+        <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+        <InfoPanelTrashed
+          storageName={currentOption.storage.name}
+          folderName={currentOption.folder.name}
+          updatedAt={formatDate(note.updatedAt)}
+          createdAt={formatDate(note.createdAt)}
+          exportAsMd={this.showWarning}
+          exportAsTxt={this.showWarning}
+        />
+      </div>
+    </div>
+
+    const detailTopBar = <div styleName='info'>
+      <div styleName='info-left'>
+        <div styleName='info-left-top'>
+          <FolderSelect styleName='info-left-top-folderSelect'
+            value={this.state.note.storage + '-' + this.state.note.folder}
+            ref='folder'
+            data={data}
+            onChange={(e) => this.handleFolderChange(e)}
+          />
+        </div>
+
+        <TagSelect
+          ref='tags'
+          value={this.state.note.tags}
+          onChange={(e) => this.handleChange(e)}
+        />
+      </div>
+      <div styleName='info-right'>
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+
+        <StarButton
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+
+        <button styleName='control-fullScreenButton'
+          onMouseDown={(e) => this.handleFullScreenButton(e)}>
+          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg' />
+        </button>
+
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(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}
+          type={note.type}
+        />
+      </div>
+    </div>
+
     return (
       <div className='NoteDetail'
         style={this.props.style}
         styleName='root'
         onKeyDown={(e) => this.handleKeyDown(e)}
       >
-        <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}
-                ref='folder'
-                data={data}
-                onChange={(e) => this.handleFolderChange(e)}
-              />
-            </div>
-
-            <TagSelect
-              ref='tags'
-              value={this.state.note.tags}
-              onChange={(e) => this.handleChange(e)}
-            />
-          </div>
-          <div styleName='info-right'>
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleContextButtonClick(e)}
-            >
-              <i className='fa fa-ellipsis-v' />
-            </button>
-          </div>
-        </div>
+        {location.pathname === '/trashed' ? trashTopBar : detailTopBar}
 
         <div styleName='body'>
           <div styleName='description'>

browser/main/Detail/SnippetNoteDetail.styl

@@ -3,37 +3,36 @@
 
 .root
   absolute top bottom right
-  border-width 0 0 1px
-  border-style solid
-  border-color $ui-borderColor
+  border-left 1px solid alpha(#DEDEDE, 60%)
   background-color $ui-noteDetail-backgroundColor
-  box-shadow $note-detail-box-shadow
+  box-shadow none
 
 .body
   absolute left right
-  left $note-detail-left-margin
-  right $note-detail-right-margin
+  left $snippet-note-detail-left-margin
+  right $snippet-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
+  height 50px
 
 .body .description textarea
+  outline none
   display block
   height 100%
   width 100%
   resize none
-  border none
-  padding 10px
+  border 1px solid $ui-borderColor
+  padding 2px 5px
   line-height 1.6
   background-color $ui-noteDetail-backgroundColor
 
 .tabList
   absolute left right
-  top 80px
+  top 55px
   height 30px
   display flex
   background-color $ui-noteDetail-backgroundColor
@@ -44,33 +43,42 @@
   overflow hidden
 
 .tabList .plusButton
-  navButtonColor()
+  navWhiteButtonColor()
   width 30px
 
 .tabView
   absolute left right bottom
-  top 130px
+  top 100px
 
 .tabView-content
   absolute top left right bottom
 
 .override
   absolute bottom left
+  bottom 1px
   left 60px
-  height 23px
-  z-index 1
+  z-index 101
   button
     navButtonColor()
-    height 24px
-    border-width 0 1px 0 0
-    border-style solid
-    border-color $ui-borderColor
+    padding 0 6px
+    &:hover
+      color $ui-active-color
     &:active .update-icon
-      color white
+      color $ui-active-color
+
+.control-fullScreenButton
+  top 80px
+  margin-bottom 10px
+  topBarButtonLight()
+
+body[data-theme="white"]
+  .root
+    box-shadow $note-detail-box-shadow
+    border none
 
 body[data-theme="dark"]
   .root
-    border-color $ui-dark-borderColor
+    border none
     background-color $ui-dark-noteDetail-backgroundColor
     box-shadow none
 
@@ -79,7 +87,8 @@ body[data-theme="dark"]
 
   .body .description textarea
     background-color $ui-dark-noteDetail-backgroundColor
-    color white
+    color $ui-dark-text-color
+    border 1px solid $ui-dark-borderColor
 
   .tabList
     background-color $ui-button--active-backgroundColor
@@ -93,3 +102,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

@@ -47,10 +47,10 @@ class StarButton extends React.Component {
         onMouseLeave={(e) => this.handleMouseLeave(e)}
         onClick={this.props.onClick}
       >
-        <i styleName='icon'
-          className={this.state.isActive || this.props.isActive
-            ? 'fa fa-star'
-            : 'fa fa-star-o'
+        <img styleName='icon'
+          src={this.state.isActive || this.props.isActive
+            ? '../resources/icon/icon-starred.svg'
+            : '../resources/icon/icon-star.svg'
           }
         />
       </button>

browser/main/Detail/StarButton.styl

@@ -1,20 +1,24 @@
 .root
-  left 7px
-  top 0
-  padding 0
+  top 45px
+  topBarButtonLight()
   &:hover
-    .icon
-      transform rotate(-72deg)
-    .tooltip
-      opacity 1
+    transition 0.2s
+    color alpha($ui-favorite-star-button-color, 0.6)
 
 .root--active
   @extend .root
+  transition 0.15s
   color $ui-favorite-star-button-color
   &:hover
-    color $ui-favorite-star-button-color
-  .icon
-    transform rotate(-72deg)
+    transition 0.2s
+    color alpha($ui-favorite-star-button-color, 0.6)
 
 .icon
   transition transform 0.15s
+
+body[data-theme="dark"]
+  .root
+    topBarButtonDark()
+    &:hover
+      transition 0.2s
+      color alpha($ui-favorite-star-button-color, 0.6)

browser/main/Detail/TagSelect.js

@@ -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,11 +109,11 @@ class TagSelect extends React.Component {
           <span styleName='tag'
             key={tag}
           >
-            <span styleName='tag-label'>{tag}</span>
+            <span styleName='tag-label'>#{tag}</span>
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
             >
-              <i className='fa fa-times fa-fw tag-removeButton-icon' />
+              <img className='tag-removeButton-icon' src='../resources/icon/icon-x.svg' width='8px' />
             </button>
           </span>
         )

browser/main/Detail/TagSelect.styl

@@ -1,9 +1,9 @@
 .root
-  display inline-block
-  top 19px
+  display flex
+  align-items center
   user-select none
   vertical-align middle
-  width 300px
+  width 100%
   overflow-x scroll
   white-space nowrap
 
@@ -11,79 +11,46 @@
   display none
 
 .tag
-  display inline-block
-  margin 0 2px
-  padding-left 10px
-  vertical-align middle
-  height 20px
-  background-color $ui-tag-backgroundColor
-  border-radius 20px
-  overflow hidden
+  display flex
+  align-items center
+  margin 0px 2px
+  padding 2px 4px
+  background-color alpha($ui-tag-backgroundColor, 3%)
+  border-radius 4px
+  position relative
   clearfix()
 
 .tag-removeButton
-  float right
-  height 20px
-  width 18px
   margin 0
   padding 0
   border-style solid
   border-width 0
   border-radius 20px
-  line-height 18px
   background-color transparent
   color $ui-button-color
+  position absolute
+  right 6px
 
 .tag-removeButton-icon
   width 5px
   padding-right 4px
 
 .tag-label
-  font-size 12px
-  font-weight bold
-  color: #FFFFFF
-  float left
-  height 20px
-  line-height 20px
-  padding 0 6px
+  font-size 13px
+  color: $ui-text-color
+  padding 4px 16px 4px 8px
 
 .newTag
-  display inline-block
-  margin 0 2px
-  vertical-align middle
-  height 24px
-  box-sizing borde-box
+  box-sizing border-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
-
-.add-tag-button
-  display inline
-  margin-left 5px
-  width 20px
-  height 20px
-  border none
-  border-radius 20px
-  padding 0
-  color #FFFFFF
-  &:hover
-    background-color rgba(0, 0, 0, 0.3)
-  &:active, &:active:hover
-    background-color rgba(0, 0, 0, 0.5)
-    color $ui-button--active-color
+  font-size 13px
 
 body[data-theme="dark"]
-  .icon
-    color $ui-dark-button-color
-
   .tag
-    background-color $ui-dark-tag-backgroundColor
+    background-color alpha($ui-dark-tag-backgroundColor, 60%)
 
   .tag-removeButton
     border-color $ui-button--focus-borderColor
@@ -94,17 +61,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
-
-  .add-tag-button
-    &:hover
-      background-color rgba(255, 255, 255, 0.3)
-    &:active, &:active:hover
-      background-color rgba(255, 255, 255, 0.5)
-      color $ui-button--active-color
+    color $ui-dark-text-color

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)}
+  >
+    <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+  </button>
+)
+
+TrashButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(TrashButton, styles)

browser/main/Detail/TrashButton.styl

@@ -0,0 +1,15 @@
+.control-trashButton
+  top 120px
+  margin-bottom 10px
+  topBarButtonLight()
+
+.control-trashButton--in-trash
+  top 60px
+  topBarButtonLight()
+
+.trashButton
+  padding 0px
+
+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

@@ -11,24 +11,31 @@ import _ from 'lodash'
 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'
-
-function focused () {
-  mixpanel.track('MAIN_FOCUSED')
-}
+import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import eventEmitter from 'browser/main/lib/eventEmitter'
 
 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.navWidth,
-      isLeftSliderFocused: false
+      isLeftSliderFocused: false,
+      fullScreen: false,
+      noteDetailWidth: 0,
+      mainBodyWidth: 0
     }
+
+    this.toggleFullScreen = () => this.handleFullScreenButton()
   }
 
   getChildContext () {
@@ -45,6 +52,8 @@ class Main extends React.Component {
 
     if (config.ui.theme === 'dark') {
       document.body.setAttribute('data-theme', 'dark')
+    } else if (config.ui.theme === 'white') {
+      document.body.setAttribute('data-theme', 'white')
     } else {
       document.body.setAttribute('data-theme', 'default')
     }
@@ -63,11 +72,11 @@ class Main extends React.Component {
         }
       })
 
-    window.addEventListener('focus', focused)
+    eventEmitter.on('editor:fullscreen', this.toggleFullScreen)
   }
 
   componentWillUnmount () {
-    window.removeEventListener('focus', focused)
+    eventEmitter.off('editor:fullscreen', this.toggleFullScreen)
   }
 
   handleLeftSlideMouseDown (e) {
@@ -144,9 +153,40 @@ 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.setState({noteDetailWidth: noteDetail.style.left})
+    this.setState({mainBodyWidth: mainBody.style.left})
+    noteDetail.style.left = '0px'
+    mainBody.style.left = '0px'
+    noteList.style.display = 'none'
+  }
+
+  showLeftLists (noteDetail, noteList, mainBody) {
+    noteDetail.style.left = this.state.noteDetailWidth
+    mainBody.style.left = this.state.mainBodyWidth
+    noteList.style.display = 'inline'
+  }
+
   render () {
     let { config } = this.props
 
+    // the width of the navigation bar when it is folded/collapsed
+    const foldedNavigationWidth = 44
+
     return (
       <div
         className='Main'
@@ -173,8 +213,9 @@ 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}}
+          style={{left: config.isSideNavFolded ? foldedNavigationWidth : this.state.navWidth}}
         >
           <TopBar style={{width: this.state.listWidth}}
             {..._.pick(this.props, [

browser/main/Main.styl

@@ -13,10 +13,12 @@
   absolute top bottom
   top -2px
   width 0
+  z-index 0
 
 .slider-right
   @extend .slider
   width 1px
+  z-index 0
 
 .slider--active
   @extend .slider

browser/main/NewNoteButton/NewNoteButton.styl

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

browser/main/NewNoteButton/index.js

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

browser/main/NoteList/NoteList.styl

@@ -17,54 +17,75 @@ $control-height = 30px
 
 .control-sortBy
   flex 1
-  padding-left 25px
+  padding-left 22px
 
 .control-sortBy-select
-  margin-left 0
-  font-size 12px
+  appearance: none;
+  margin-left 5px
   color $ui-inactive-text-color
   padding 0
   border none
   background-color transparent
-  font-size 10px
+  outline none
+  cursor pointer
+  font-size 12px
+  &:hover
+    transition 0.2s
+    color $ui-text-color
+
+.control-button-area
+  margin-right 12px
 
 .control-button
   width 25px
   padding 0
   background-color transparent
   border none
-  color $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
+    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
+    color $ui-inactive-text-color
 
 .list
   absolute left right bottom
   top $control-height
   overflow auto
 
+body[data-theme="white"]
+  .root
+    background-color $ui-white-noteList-backgroundColor
+
+  .control
+    background-color $ui-white-noteList-backgroundColor
+
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
     background-color $ui-dark-noteList-backgroundColor
 
-  .control
-    background-color $ui-dark-noteList-backgroundColor
-
   .control
     background-color $ui-dark-noteList-backgroundColor
     border-color $ui-dark-borderColor
 
+  .control-sortBy-select
+    &:hover
+      transition 0.2s
+      color $ui-dark-text-color
+
   .control-button
     color $ui-dark-inactive-text-color
     &:hover
       color $ui-dark-text-color
-
+  
+  .control-button--active
+    color $ui-dark-text-color
+    &:active
+      color $ui-dark-text-color

browser/main/NoteList/index.js

@@ -8,6 +8,13 @@ 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'
+import stripgtags from 'striptags'
+import store from 'browser/main/store'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -38,12 +45,16 @@ class NoteList extends React.Component {
     this.focusHandler = () => {
       this.refs.list.focus()
     }
-    this.alertIfSnippetHnalder = () => {
+    this.alertIfSnippetHandler = () => {
       this.alertIfSnippet()
     }
+    this.importFromFileHandler = this.importFromFile.bind(this)
+    this.jumpNoteByHash = this.jumpNoteByHashHandler.bind(this)
 
     this.state = {
     }
+
+    this.contextNotes = []
   }
 
   componentDidMount () {
@@ -51,7 +62,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.alertIfSnippetHnalder)
+    ee.on('list:isMarkdownNote', this.alertIfSnippetHandler)
+    ee.on('import:file', this.importFromFileHandler)
+    ee.on('list:jump', this.jumpNoteByHash)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -70,7 +83,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.alertIfSnippetHnalder)
+    ee.off('list:isMarkdownNote', this.alertIfSnippetHandler)
+    ee.off('import:file', this.importFromFileHandler)
+    ee.off('list:jump', this.jumpNoteByHash)
   }
 
   componentDidUpdate (prevProps) {
@@ -78,6 +93,7 @@ class NoteList extends React.Component {
 
     if (this.notes.length > 0 && location.query.key == null) {
       let { router } = this.context
+      if (!location.pathname.match(/\/searched/)) this.contextNotes = this.getContextNotes()
       router.replace({
         pathname: location.pathname,
         query: {
@@ -89,9 +105,7 @@ class NoteList extends React.Component {
 
     // Auto scroll
     if (_.isString(location.query.key) && prevProps.location.query.key === location.query.key) {
-      let targetIndex = _.findIndex(this.notes, (note) => {
-        return note != null && note.storage + '-' + note.key === location.query.key
-      })
+      const targetIndex = this.getTargetIndex()
       if (targetIndex > -1) {
         let list = this.refs.list
         let item = list.childNodes[targetIndex]
@@ -117,9 +131,7 @@ class NoteList extends React.Component {
     let { router } = this.context
     let { location } = this.props
 
-    let targetIndex = _.findIndex(this.notes, (note) => {
-      return note.storage + '-' + note.key === location.query.key
-    })
+    let targetIndex = this.getTargetIndex()
 
     if (targetIndex === 0) {
       return
@@ -142,9 +154,7 @@ class NoteList extends React.Component {
     let { router } = this.context
     let { location } = this.props
 
-    let targetIndex = _.findIndex(this.notes, (note) => {
-      return note.storage + '-' + note.key === location.query.key
-    })
+    let targetIndex = this.getTargetIndex()
 
     if (targetIndex === this.notes.length - 1) {
       targetIndex = 0
@@ -163,6 +173,29 @@ 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 = this.getTargetIndex()
+
+    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
 
@@ -194,37 +227,76 @@ 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)
+    if (location.pathname.match(/\/home/) || location.pathname.match(/\alltags/)) {
+      const allNotes = data.noteMap.map((note) => note)
+      this.contextNotes = allNotes
+      return allNotes
     }
 
     if (location.pathname.match(/\/starred/)) {
-      return data.starredSet.toJS()
-        .map((uniqueKey) => data.noteMap.get(uniqueKey))
+      const starredNotes = data.starredSet.toJS().map((uniqueKey) => data.noteMap.get(uniqueKey))
+      this.contextNotes = starredNotes
+      return starredNotes
     }
 
-    let storageKey = params.storageKey
-    let folderKey = params.folderKey
-    let storage = data.storageMap.get(storageKey)
-    if (storage == null) return []
-
-    let folder = _.find(storage.folders, {key: folderKey})
-    if (folder == null) {
-      let storageNoteSet = data.storageNoteMap
-        .get(storage.key)
-      if (storageNoteSet == null) storageNoteSet = []
-      return storageNoteSet
-        .map((uniqueKey) => data.noteMap.get(uniqueKey))
+    if (location.pathname.match(/\/searched/)) {
+      const searchInputText = document.getElementsByClassName('searchInput')[0].value
+      if (searchInputText === '') {
+        return this.sortByPin(this.contextNotes)
+      }
+      return searchFromNotes(this.contextNotes, searchInputText)
     }
 
-    let folderNoteKeyList = data.folderNoteMap
-      .get(storage.key + '-' + folder.key)
+    if (location.pathname.match(/\/trashed/)) {
+      const trashedNotes = data.trashedSet.toJS().map((uniqueKey) => data.noteMap.get(uniqueKey))
+      this.contextNotes = trashedNotes
+      return trashedNotes
+    }
 
-    return folderNoteKeyList != null
-      ? folderNoteKeyList
-        .map((uniqueKey) => data.noteMap.get(uniqueKey))
-      : []
+    if (location.pathname.match(/\/tags/)) {
+      return data.noteMap.map(note => {
+        return note
+      }).filter(note => {
+        return note.tags.includes(params.tagname)
+      })
+    }
+
+    return this.getContextNotes()
+  }
+
+  // get notes in the current folder
+  getContextNotes () {
+    const { data, params } = this.props
+    const storageKey = params.storageKey
+    const folderKey = params.folderKey
+    const storage = data.storageMap.get(storageKey)
+    if (storage === undefined) return []
+
+    const folder = _.find(storage.folders, {key: folderKey})
+    if (folder === undefined) {
+      const storageNoteSet = data.storageNoteMap.get(storage.key) || []
+      return storageNoteSet.map((uniqueKey) => data.noteMap.get(uniqueKey))
+    }
+
+    const folderNoteKeyList = data.folderNoteMap.get(`${storage.key}-${folder.key}`) || []
+    return folderNoteKeyList.map((uniqueKey) => data.noteMap.get(uniqueKey))
+  }
+
+  sortByPin (unorderedNotes) {
+    const pinnedNotes = []
+    const unpinnedNotes = []
+
+    unorderedNotes.forEach((note) => {
+      if (note.isPinned) {
+        pinnedNotes.push(note)
+      } else {
+        unpinnedNotes.push(note)
+      }
+    })
+
+    return pinnedNotes.concat(unpinnedNotes)
   }
 
   handleNoteClick (e, uniqueKey) {
@@ -239,49 +311,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
 
@@ -310,29 +339,199 @@ class NoteList extends React.Component {
     })
   }
 
-  alertIfSnippet() {
-    let { location } = this.props
-    const targetIndex = _.findIndex(this.notes, (note) => {
-      return `${note.storage}-${note.key}` === location.query.key
-    })
+  alertIfSnippet () {
+    const targetIndex = this.getTargetIndex()
     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.'
+        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)
+  }
+
+  handleNoteContextMenu (e, uniqueKey) {
+    const { location } = this.props
+    const note = this.notes.find((note) => {
+      const noteKey = `${note.storage}-${note.key}`
+      return noteKey === uniqueKey
+    })
+
+    const pinLabel = note.isPinned ? 'Remove pin' : 'Pin to Top'
+    const deleteLabel = 'Delete Note'
+
+    const menu = new Menu()
+    if (!location.pathname.match(/\/home|\/starred|\/trash/)) {
+      menu.append(new MenuItem({
+        label: pinLabel,
+        click: (e) => this.pinToTop(e, uniqueKey)
+      }))
+    }
+    menu.append(new MenuItem({
+      label: deleteLabel,
+      click: (e) => this.deleteNote(e, uniqueKey)
+    }))
+    menu.popup()
+  }
+
+  pinToTop (e, uniqueKey) {
+    const { data, params } = this.props
+    const storageKey = params.storageKey
+    const folderKey = params.folderKey
+
+    const currentStorage = data.storageMap.get(storageKey)
+    const currentFolder = _.find(currentStorage.folders, {key: folderKey})
+
+    this.handleNoteClick(e, uniqueKey)
+    const targetIndex = this.getTargetIndex()
+    let note = this.notes[targetIndex]
+    note.isPinned = !note.isPinned
+
+    dataApi
+      .updateNote(note.storage, note.key, note)
+      .then((note) => {
+        store.dispatch({
+          type: 'UPDATE_NOTE',
+          note: note
+        })
+      })
+  }
+
+  deleteNote (e, uniqueKey) {
+    this.handleNoteClick(e, uniqueKey)
+    ee.emit('detail:delete')
+  }
+
+  importFromFile () {
+    const { dispatch, location } = this.props
+
+    const options = {
+      filters: [
+        { name: 'Documents', extensions: ['md', 'txt'] }
+      ],
+      properties: ['openFile', 'multiSelections']
+    }
+
+    dialog.showOpenDialog(remote.getCurrentWindow(), options, (filepaths) => {
+      this.addNotesFromFiles(filepaths)
+    })
+  }
+
+  handleDrop (e) {
+    e.preventDefault()
+    const { location } = this.props
+    const filepaths = Array.from(e.dataTransfer.files).map(file => { return file.path })
+    if (!location.pathname.match(/\/trashed/)) this.addNotesFromFiles(filepaths)
+  }
+
+  // Add notes to the current folder
+  addNotesFromFiles (filepaths) {
+    const { dispatch, location } = this.props
+    const { storage, folder } = this.resolveTargetFolder()
+
+    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: folder.key,
+          title: markdown.strip(findNoteTitle(content)),
+          type: 'MARKDOWN_NOTE'
+        }
+        dataApi.createNote(storage.key, newNote)
+        .then((note) => {
+          dispatch({
+            type: 'UPDATE_NOTE',
+            note: note
+          })
+          hashHistory.push({
+            pathname: location.pathname,
+            query: {key: `${note.storage}-${note.key}`}
+          })
+        })
+      })
+    })
+  }
+
+  getTargetIndex () {
+    const { location } = this.props
+    const targetIndex = _.findIndex(this.notes, (note) => {
+      return `${note.storage}-${note.key}` === location.query.key
+    })
+    return targetIndex
+  }
+
+  resolveTargetFolder () {
+    const { data, params } = this.props
+    let storage = data.storageMap.get(params.storageKey)
+
+    // Find first storage
+    if (storage == null) {
+      for (let kv of data.storageMap) {
+        storage = kv[1]
+        break
+      }
+    }
+
+    if (storage == null) this.showMessageBox('No storage for importing note(s)')
+    const folder = _.find(storage.folders, {key: params.folderKey}) || storage.folders[0]
+    if (folder == null) this.showMessageBox('No folder for importing note(s)')
+
+    return {
+      storage,
+      folder
+    }
+  }
+
+  showMessageBox (message) {
+    dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: message,
+      buttons: ['OK']
+    })
+  }
+
   render () {
-    let { location, notes, config } = this.props
+    let { location, notes, config, dispatch } = this.props
     let sortFunc = config.sortBy === 'CREATED_AT'
       ? sortByCreatedAt
       : config.sortBy === 'ALPHABETICAL'
       ? sortByAlphabetical
       : sortByUpdatedAt
-    this.notes = notes = this.getNotes()
-      .sort(sortFunc)
+    const sortedNotes = location.pathname.match(/\/home|\/starred|\/trash/)
+        ? this.getNotes().sort(sortFunc)
+        : this.sortByPin(this.getNotes().sort(sortFunc))
+    this.notes = notes = sortedNotes.filter((note) => {
+      // this is for the trash box
+      if (note.isTrashed !== true || location.pathname === '/trashed') return true
+    })
+
+    moment.locale('en', {
+      relativeTime: {
+        future: 'in %s',
+        past: '%s ago',
+        s: '%ds',
+        ss: '%ss',
+        m: '1m',
+        mm: '%dm',
+        h: 'an hour',
+        hh: '%dh',
+        d: '1d',
+        dd: '%dd',
+        M: '1M',
+        MM: '%dM',
+        y: '1Y',
+        yy: '%dY'
+      }
+    })
 
     let noteList = notes
       .map(note => {
@@ -345,7 +544,7 @@ class NoteList extends React.Component {
         const dateDisplay = moment(
           config.sortBy === 'CREATED_AT'
             ? note.createdAt : note.updatedAt
-        ).fromNow()
+        ).fromNow('D')
         const key = `${note.storage}-${note.key}`
 
         if (isDefault) {
@@ -355,8 +554,10 @@ class NoteList extends React.Component {
               note={note}
               dateDisplay={dateDisplay}
               key={key}
-              handleNoteClick={this.handleNoteClick.bind(this)}
               handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
+              handleNoteClick={this.handleNoteClick.bind(this)}
+              handleDragStart={this.handleDragStart.bind(this)}
+              pathname={location.pathname}
             />
           )
         }
@@ -366,8 +567,9 @@ class NoteList extends React.Component {
             isActive={isActive}
             note={note}
             key={key}
-            handleNoteClick={this.handleNoteClick.bind(this)}
             handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
+            handleNoteClick={this.handleNoteClick.bind(this)}
+            handleDragStart={this.handleDragStart.bind(this)}
           />
         )
       })
@@ -376,35 +578,38 @@ class NoteList extends React.Component {
       <div className='NoteList'
         styleName='root'
         style={this.props.style}
+        onDrop={(e) => this.handleDrop(e)}
       >
         <div styleName='control'>
           <div styleName='control-sortBy'>
-            Sort by
+            <i className='fa fa-angle-down' />
             <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'>Updated</option>
+              <option value='CREATED_AT'>Created</option>
+              <option value='ALPHABETICAL'>Alphabetically</option>
             </select>
           </div>
-          <button styleName={config.listStyle === 'DEFAULT'
-              ? 'control-button--active'
-              : 'control-button'
-            }
-            onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
-          >
-            <i className='fa fa-th-large' />
-          </button>
-          <button styleName={config.listStyle === 'SMALL'
-              ? 'control-button--active'
-              : 'control-button'
-            }
-            onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
-          >
-            <i className='fa fa-list-ul' />
-          </button>
+          <div styleName='control-button-area'>
+            <button styleName={config.listStyle === 'DEFAULT'
+                ? 'control-button--active'
+                : 'control-button'
+              }
+              onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
+            >
+              <img styleName='iconTag' src='../resources/icon/icon-column.svg' />
+            </button>
+            <button styleName={config.listStyle === 'SMALL'
+                ? 'control-button--active'
+                : 'control-button'
+              }
+              onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
+            >
+              <img styleName='iconTag' src='../resources/icon/icon-column-list.svg' />
+            </button>
+          </div>
         </div>
         <div styleName='list'
           ref='list'

browser/main/SideNav/SideNav.styl

@@ -1,57 +1,84 @@
 .root
   absolute top left bottom
   width $sideNav-width
-  background-color $ui-backgroundColor
+  background-color #2E3235
   user-select none
   color $ui-text-color
+  height: 100vh
+  display: flex
+  flex-direction column
 
 .top
-  height $topBar-height
+  padding-bottom 15px
 
-.top-menu
+.top-menu-preference
   navButtonColor()
-  height $topBar-height
-  padding 0 15px
-  font-size 14px
-  width 100%
-  text-align left
+  position absolute
+  top 22px
+  right 10px
+  width 2em
+  background-color transparent
+  &:hover
+    color $ui-button-default--active-backgroundColor
+    background-color transparent
+  &:active, &:active:hover
+    color $ui-button-default--active-backgroundColor
 
+.switch-buttons
+  background-color transparent
+  border 0
+  margin 24px auto 4px 14px
+  display flex
+  text-align center
+
+.non-active-button
+  color $ui-inactive-text-color
+  font-size 16px
+  border 0
+  background-color transparent
+  transition 0.2s
+  display flex
+  text-align center
+  margin-right 4px;
+  &:hover
+    color alpha(#239F86, 60%)
+
+.active-button
+  @extend .non-active-button
+  color $ui-button-default--active-backgroundColor
+  
 .top-menu-label
   margin-left 5px
   overflow ellipsis
+  opacity 0
 
-.storageList
-  absolute left right
-  bottom 37px
-  top 160px
+.tabBody
+  flex 1
+  display flex
+  flex-direction column
+
+.tag-title
+  padding-left 15px
+  padding-bottom 13px
+  p
+    color $ui-button-default-color
+
+.tagList
   overflow-y auto
-
-.storageList-empty
-  padding 0 10px
-  margin-top 15px
-  line-height 24px
-  color $ui-inactive-text-color
-
-.navToggle
-  navButtonColor()
-  display block
-  position absolute
-  right 5px
-  bottom 5px
-  border-radius 16.5px
-  height 34px
-  width 34px
-  line-height 32px
-  padding 0
+  flex: 1
 
 .root--folded
-  @extend .root
-  width 44px
-  .storageList-empty
-    white-space nowrap
-    transform rotate(90deg)
+  height 100vh
+  width $sideNav--folded-width
+  background-color #2E3235
+  .switch-buttons
+    display none
+  .top
+    height 60px
   .top-menu
-    width 44px - 1
+    position static
+    width $sideNav--folded-width
+    height 60px
     text-align center
     &:hover .top-menu-label
       transition opacity 0.15s
@@ -60,44 +87,54 @@
     position fixed
     display inline-block
     height 30px
-    left 32px
+    left $sideNav--folded-width
     padding 0 10px
     margin-top -8px
     opacity 0
     margin-left 0
     overflow hidden
-    background-color $ui-tooltip-backgroundColor
     z-index 10
     color white
     line-height 30px
     border-top-right-radius 2px
     border-bottom-right-radius 2px
     pointer-events none
-    font-size 12px
-  .menu-button, .menu-button--active
-    text-align center
-    &:hover .menu-button-label
-      transition opacity 0.15s
-      opacity 1
+    font-size 13px
+  .top-menu-preference
+    position absolute
+    left 11px
 
-  .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="white"]
+  .root, .root--folded
+    background-color #f9f9f9
+    color $ui-text-color
+
+  .top-menu-preference
+    navWhiteButtonColor()
+    background-color transparent
+    &:hover
+      color #0B99F1
+      background-color transparent
+    &:active, &:active:hover
+      color #0B99F1
+      background-color transparent
+
+  .non-active-button
+    color $ui-inactive-text-color
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .tag-title
+    p
+      color $ui-text-color
+
+  .non-active-button
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .active-button
+    @extend .non-active-button
+    color #0B99F1
 
 body[data-theme="dark"]
   .root, .root--folded
@@ -108,12 +145,21 @@ body[data-theme="dark"]
   .top
     border-color $ui-dark-borderColor
 
-  .top-menu
+  .top-menu-preference
     navDarkButtonColor()
+    background-color transparent
+    &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color transparent
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color transparent
 
-  .storageList-empty
-    color $ui-dark-inactive-text-color
-
-  .navToggle
-    navDarkButtonColor()
+  .non-active-button
+    color alpha($ui-dark-text-color, 60%)
+    &:hover
+      color alpha(#0B99F1, 60%)
 
+  .tag-title
+    p
+      color alpha($ui-dark-text-color, 60%)

browser/main/SideNav/StorageItem.js

@@ -7,6 +7,7 @@ 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
@@ -113,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']
     })
 
@@ -131,16 +132,68 @@ 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 noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
 
-      let noteCount = noteSet != null
-        ? noteSet.size
-        : 0
+      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}
@@ -151,6 +204,9 @@ class StorageItem extends React.Component {
           folderColor={folder.color}
           isFolded={isFolded}
           noteCount={noteCount}
+          handleDrop={(e) => this.handleDrop(e, storage, folder, dispatch, location)}
+          handleDragEnter={this.handleDragEnter}
+          handleDragLeave={this.handleDragLeave}
         />
       )
     })
@@ -170,9 +226,9 @@ class StorageItem extends React.Component {
           <button styleName='header-toggleButton'
             onMouseDown={(e) => this.handleToggleButtonClick(e)}
           >
-            <i className={this.state.isOpen
-                ? 'fa fa-caret-down'
-                : 'fa fa-caret-right'
+            <img src={this.state.isOpen
+                ? '../resources/icon/icon-down.svg'
+                : '../resources/icon/icon-right.svg'
               }
             />
           </button>
@@ -181,7 +237,7 @@ class StorageItem extends React.Component {
             <button styleName='header-addFolderButton'
               onClick={(e) => this.handleAddFolderButtonClick(e)}
             >
-              <i className='fa fa-plus' />
+              <img styleName='iconTag' src='../resources/icon/icon-plus.svg' />
             </button>
           }
 

browser/main/SideNav/StorageItem.styl

@@ -1,84 +1,80 @@
 .root
   width 100%
   user-select none
+  padding-top 20px
 
 .header
   position relative
-  height 26px
+  height 36px
   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
+  display flex
+  align-items center
 
 .header--active
-  @extend .header
-  .header-info
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
+  margin-bottom 5px
+  background-color alpha($ui-button-default--active-backgroundColor, 20%)
+  transition color background-color  0.15s
+  display flex
+  align-items center
   .header-toggleButton
+  .header-info
   .header-addFolderButton
-    color white
-    &:active
-    &:hover
-    &:hover:active
-      color white
+    color #1EC38B
 
 .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-default--hover-backgroundColor, 40%)
     color $ui-text-color
-  &:active
-    color $ui-active-color
 
 .header-info
+  navButtonColor()
   display block
   width 100%
-  height 30px
+  height 36px
   padding-left 25px
-  padding-right 10px
-  line-height 26px
+  padding-right 15px
+  line-height 22px
   cursor pointer
   font-size 14px
   border none
   overflow ellipsis
   text-align left
+  font-weight 600;
   background-color transparent
-  color $ui-inactive-text-color
-  &:active
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
+  &:hover
+    color #1EC38B
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
+    transition background-color 0.15s
+  &:active, &:active:hover
+    color #1EC38B
+    background-color alpha($ui-button-default--active-backgroundColor, 20%)
 
 .header-info-path
   font-size 10px
   margin 0 5px
 
 .header-addFolderButton
+  navButtonColor()
   position absolute
-  right 0
+  right 7px
   width 25px
-  height 26px
+  height 25px
   padding 0
   border none
-  color $ui-inactive-text-color
-  background-color transparent
+  border-radius 50%
   &:hover
-    color $ui-text-color
-  &:active
-    color $ui-active-color
+    transition 0.2s
 
 .root--folded
   @extend .root
@@ -107,17 +103,78 @@
     font-size 10px
     margin 0 5px
 
-body[data-theme="dark"]
+body[data-theme="white"]
+  .header--active
+    background-color $ui-button--active-backgroundColor
+    transition color background-color  0.15s
+    .header-toggleButton
+      color $ui-text-color
+    .header-info
+      color $ui-text-color
+    .header-addFolderButton
+      color $ui-text-color
+
   .header-toggleButton
-  .header-addFolderButton
-    color $ui-dark-inactive-text-color
+    navWhiteButtonColor()
     &:hover
-      color $ui-dark-text-color
-    &:active
-      color $ui-dark-active-color
+      background-color alpha($ui-button--active-backgroundColor, 40%)
+      color $ui-text-color
+
+  .header-info
+    navWhiteButtonColor()
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+
+  .header-addFolderButton
+    navWhiteButtonColor()
+    &:hover
+      background-color alpha($ui-button--active-backgroundColor, 40%)
+      color $ui-text-color
+
+body[data-theme="dark"]
+  .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,10 +5,23 @@ import { openModal } from 'browser/main/lib/modal'
 import PreferencesModal from '../modals/PreferencesModal'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import StorageItem from './StorageItem'
+import TagListItem from 'browser/components/TagListItem'
 import SideNavFilter from 'browser/components/SideNavFilter'
+import StorageList from 'browser/components/StorageList'
+import NavToggleButton from 'browser/components/NavToggleButton'
+import EventEmitter from 'browser/main/lib/eventEmitter'
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
+
+  componentDidMount () {
+    EventEmitter.on('side:preferences', this.handleMenuButtonClick)
+  }
+
+  componentWillUnmount () {
+    EventEmitter.off('side:preferences', this.handleMenuButtonClick)
+  }
+
   handleMenuButtonClick (e) {
     openModal(PreferencesModal)
   }
@@ -33,12 +46,99 @@ class SideNav extends React.Component {
     })
   }
 
+  handleTrashedButtonClick (e) {
+    let { router } = this.context
+    router.push('/trashed')
+  }
+
+  handleSwitchFoldersButtonClick () {
+    const { router } = this.context
+    router.push('/home')
+  }
+
+  handleSwitchTagsButtonClick () {
+    const { router } = this.context
+    router.push('/alltags')
+  }
+
+  SideNavComponent (isFolded, storageList) {
+    let { location, data } = this.props
+
+    const isHomeActive = !!location.pathname.match(/^\/home$/)
+    const isStarredActive = !!location.pathname.match(/^\/starred$/)
+    const isTrashedActive = !!location.pathname.match(/^\/trashed$/)
+
+    let component
+
+    // TagsMode is not selected
+    if (!location.pathname.match('/tags') && !location.pathname.match('/alltags')) {
+      component = (
+        <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)}
+            counterTotalNote={data.noteMap._map.size}
+            counterStarredNote={data.starredSet._set.size}
+            counterDelNote={data.trashedSet._set.size}
+          />
+
+          <StorageList storageList={storageList} />
+          <NavToggleButton isFolded={isFolded} handleToggleButtonClick={this.handleToggleButtonClick.bind(this)} />
+        </div>
+      )
+    } else {
+      component = (
+        <div styleName='tabBody'>
+          <div styleName='tag-title'>
+            <p>Tags</p>
+          </div>
+          <div styleName='tagList'>
+            {this.tagListComponent(data)}
+          </div>
+        </div>
+      )
+    }
+
+    return component
+  }
+
+  tagListComponent () {
+    const { data, location } = this.props
+    let tagList = data.tagNoteMap.map((tag, key) => {
+      return key
+    })
+    return (
+      tagList.map(tag => (
+        <TagListItem
+          name={tag}
+          handleClickTagListItem={this.handleClickTagListItem.bind(this)}
+          isActive={this.getTagActive(location.pathname, tag)}
+          key={tag}
+        />
+      ))
+    )
+  }
+
+  getTagActive (path, tag) {
+    const pathSegments = path.split('/')
+    const pathTag = pathSegments[pathSegments.length - 1]
+    return pathTag === tag
+  }
+
+  handleClickTagListItem (name) {
+    const { router } = this.context
+    router.push(`/tags/${name}`)
+  }
+
   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 storageList = data.storageMap.map((storage, key) => {
       return <StorageItem
@@ -52,6 +152,7 @@ class SideNav extends React.Component {
     })
     let style = {}
     if (!isFolded) style.width = this.props.width
+    const isTagActive = location.pathname.match(/tag/)
     return (
       <div className='SideNav'
         styleName={isFolded ? 'root--folded' : 'root'}
@@ -59,35 +160,31 @@ class SideNav extends React.Component {
         style={style}
       >
         <div styleName='top'>
-          <button styleName='top-menu'
-            onClick={(e) => this.handleMenuButtonClick(e)}
-          >
-            <i className='fa fa-navicon fa-fw' />
-            <span styleName='top-menu-label'>Menu</span>
-          </button>
+          <div styleName='switch-buttons'>
+            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}>
+              <img src={isTagActive
+                  ? '../resources/icon/icon-list.svg'
+                  : '../resources/icon/icon-list-active.svg'
+                }
+              />
+            </button>
+            <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}>
+              <img src={isTagActive
+                  ? '../resources/icon/icon-tag-active.svg'
+                  : '../resources/icon/icon-tag.svg'
+                }
+              />
+            </button>
+          </div>
+          <div>
+            <button styleName='top-menu-preference'
+              onClick={(e) => this.handleMenuButtonClick(e)}
+            >
+              <img styleName='iconTag' src='../resources/icon/icon-setting.svg' />
+            </button>
+          </div>
         </div>
-
-        <SideNavFilter
-          isFolded={isFolded}
-          isHomeActive={isHomeActive}
-          handleAllNotesButtonClick={(e) => this.handleHomeButtonClick(e)}
-          isStarredActive={isStarredActive}
-          handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
-        />
-
-        <div styleName='storageList'>
-          {storageList.length > 0 ? storageList : (
-            <div styleName='storageList-empty'>No storage mount.</div>
-          )}
-        </div>
-        <button styleName='navToggle'
-          onClick={(e) => this.handleToggleButtonClick(e)}
-        >
-          {isFolded
-            ? <i className='fa fa-angle-double-right' />
-            : <i className='fa fa-angle-double-left' />
-          }
-        </button>
+        {this.SideNavComponent(isFolded, storageList)}
       </div>
     )
   }

browser/main/StatusBar/StatusBar.styl

@@ -1,12 +1,11 @@
 @import('../Detail/DetailVars')
 
 .root
-  absolute bottom left right
-  height $statusBar-height
-  background-color $ui-noteDetail-backgroundColor
-  border-top $ui-border
+  position absolute
+  bottom 10px
+  right 10px
+  z-index 100
   display flex
-  box-shadow $note-detail-box-shadow
 
 .blank
   flex 1
@@ -23,11 +22,19 @@
 
 .zoom
   navButtonColor()
-  height 24px
-  border-width 0 1px
-  border-style solid
-  border-color $ui-borderColor
-
+  color rgba(0,0,0,.54)
+  height 20px
+  display flex
+  padding 0
+  align-items center
+  background-color transparent
+  &:hover
+    color $ui-active-color
+  &:active
+    color $ui-active-color
+  span
+    margin-left 5px
+  
 .update
   navButtonColor()
   height 24px
@@ -42,12 +49,16 @@
 
 body[data-theme="dark"]
   .root
-    background-color $ui-dark-noteDetail-backgroundColor
     border-color $ui-dark-borderColor
     box-shadow none
 
   .zoom
     border-color $ui-dark-borderColor
+    background-color transparent
+    color #f9f9f9
+    &:hover
+      transition 0.15s
+      color $ui-dark-text-color
 
   .help
     navButtonColor()

browser/main/StatusBar/index.js

@@ -2,7 +2,6 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
-import LastUpdatedString from '../Detail/LastUpdatedString'
 
 const electron = require('electron')
 const { remote, ipcRenderer } = electron
@@ -56,20 +55,16 @@ class StatusBar extends React.Component {
         <button styleName='zoom'
           onClick={(e) => this.handleZoomButtonClick(e)}
         >
-          <i className='fa fa-search-plus' />&nbsp;
-          {Math.floor(config.zoom * 100)}%
+          <img src='../resources/icon/icon-zoom.svg' />
+          <span>{Math.floor(config.zoom * 100)}%</span>
         </button>
 
-        <div styleName='blank' />
-
         {status.updateReady
           ? <button onClick={this.updateApp} styleName='update'>
             <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
             </button>
           : null
         }
-
-        <LastUpdatedString date={this.props.date} />
       </div>
     )
   }

browser/main/TopBar/TopBar.styl

@@ -19,37 +19,37 @@ $control-height = 34px
 
 .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
-  background-color $ui-noteList-backgroundColor
-
 .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 18px
+    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
@@ -59,10 +59,10 @@ $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
@@ -91,9 +91,7 @@ $control-height = 34px
   width 32px
   height $control-height - 2
   navButtonColor()
-  border $ui-border
-  border-radius 32px
-  font-size 14px
+  font-size 16px
   line-height 28px
   padding 0
   &:active
@@ -114,6 +112,21 @@ $control-height = 34px
   opacity 0
   transition 0.1s
 
+body[data-theme="white"]
+  .root, .root--expanded
+    background-color $ui-white-noteList-backgroundColor
+
+  .control
+    border-color $ui-dark-borderColor
+
+  .control-search
+    background-color $ui-white-noteList-backgroundColor
+
+  .control-search-input
+    background-color $ui-white-noteList-backgroundColor
+    input
+      background-color $ui-white-noteList-backgroundColor
+
 body[data-theme="dark"]
   .root, .root--expanded
     background-color $ui-dark-noteList-backgroundColor
@@ -131,6 +144,7 @@ body[data-theme="dark"]
     background-color $ui-dark-noteList-backgroundColor
 
   .control-search-input
+    background-color $ui-dark-noteList-backgroundColor
     input
       background-color $ui-dark-noteList-backgroundColor
       color $ui-dark-text-color
@@ -144,7 +158,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
@@ -159,10 +173,14 @@ body[data-theme="dark"]
     color $ui-inactive-text-color
 
   .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

@@ -2,12 +2,12 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TopBar.styl'
 import _ from 'lodash'
-import modal from 'browser/main/lib/modal'
 import NewNoteModal from 'browser/main/modals/NewNoteModal'
-import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
-import ConfigManager from 'browser/main/lib/ConfigManager'
-import dataApi from 'browser/main/lib/dataApi'
+import NewNoteButton from 'browser/main/NewNoteButton'
+
+const { remote } = require('electron')
+const { dialog } = remote
 
 const OSX = window.process.platform === 'darwin'
 
@@ -18,11 +18,10 @@ class TopBar extends React.Component {
     this.state = {
       search: '',
       searchOptions: [],
-      searchPopupOpen: false
-    }
-
-    this.newNoteHandler = () => {
-      this.handleNewPostButtonClick()
+      isSearching: false,
+      isAlphabet: false,
+      isIME: false,
+      isConfirmTranslation: false
     }
 
     this.focusSearchHandler = () => {
@@ -31,150 +30,67 @@ class TopBar extends React.Component {
   }
 
   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
+  handleKeyDown (e) {
+    // reset states
+    this.setState({
+      isAlphabet: false,
+      isIME: false
+    })
 
-    switch (config.ui.defaultNote) {
-      case 'MARKDOWN_NOTE':
-        this.createNote('MARKDOWN_NOTE')
-        break
-      case 'SNIPPET_NOTE':
-        this.createNote('SNIPPET_NOTE')
-        break
-      case 'ALWAYS_ASK':
-      default:
-        let { dispatch, location } = this.props
-        let { storage, folder } = this.resolveTargetFolder()
-
-        modal.open(NewNoteModal, {
-          storage: storage.key,
-          folder: folder.key,
-          dispatch,
-          location
-        })
+    // When the key is an alphabet, del, enter or ctr
+    if (e.keyCode <= 90 || e.keyCode >= 186 && e.keyCode <= 222) {
+      this.setState({
+        isAlphabet: true
+      })
+    // When the key is an IME input (Japanese, Chinese)
+    } else if (e.keyCode === 229) {
+      this.setState({
+        isIME: true
+      })
     }
   }
 
-  resolveTargetFolder () {
-    let { data, params } = this.props
-    let storage = data.storageMap.get(params.storageKey)
+  handleKeyUp (e) {
+    const { router } = this.context
+    // reset states
+    this.setState({
+      isConfirmTranslation: false
+    })
 
-    // Find first storage
-    if (storage == null) {
-      for (let kv of data.storageMap) {
-        storage = kv[1]
-        break
-      }
-    }
-    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) window.alert('No folder to create a note')
-
-    return {
-      storage,
-      folder
+    // When the key is translation confirmation (Enter, Space)
+    if (this.state.isIME && (e.keyCode === 32 || e.keyCode === 13)) {
+      this.setState({
+        isConfirmTranslation: true
+      })
+      router.push('/searched')
+      this.setState({
+        search: this.refs.searchInput.value
+      })
     }
   }
 
   handleSearchChange (e) {
+    const { router } = this.context
+    if (this.state.isAlphabet || this.state.isConfirmTranslation) {
+      router.push('/searched')
+    } else {
+      e.preventDefault()
+    }
     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
-      }, () => {
-        let { location } = this.props
-        hashHistory.push({
-          pathname: location.pathname,
-          query: {
-            key: uniqueKey
-          }
-        })
-      })
-    }
-  }
-
   handleSearchFocus (e) {
     this.setState({
-      searchPopupOpen: true
+      isSearching: true
     })
   }
   handleSearchBlur (e) {
@@ -191,67 +107,13 @@ class TopBar extends React.Component {
     }
     if (!isStillFocused) {
       this.setState({
-        searchPopupOpen: false
+        isSearching: false
       })
     }
   }
 
-  createNote (noteType) {
-    let { dispatch, location } = this.props
-    if (noteType !== 'MARKDOWN_NOTE' && noteType !== 'SNIPPET_NOTE') throw new Error('Invalid note type.')
-
-    let { storage, folder } = this.resolveTargetFolder()
-
-    let newNote = noteType === 'MARKDOWN_NOTE'
-      ? {
-        type: 'MARKDOWN_NOTE',
-        folder: folder.key,
-        title: '',
-        content: ''
-      }
-      : {
-        type: 'SNIPPET_NOTE',
-        folder: folder.key,
-        title: '',
-        description: '',
-        snippets: [{
-          name: '',
-          mode: 'text',
-          content: ''
-        }]
-      }
-
-    dataApi
-      .createNote(storage.key, newNote)
-      .then((note) => {
-        dispatch({
-          type: 'UPDATE_NOTE',
-          note: note
-        })
-        hashHistory.push({
-          pathname: location.pathname,
-          query: {key: note.storage + '-' + note.key}
-        })
-        ee.emit('detail:focus')
-      })
-  }
-
-  setDefaultNote (defaultNote) {
-    let { config, dispatch } = this.props
-    let ui = Object.assign(config.ui)
-    ui.defaultNote = defaultNote
-    ConfigManager.set({
-      ui
-    })
-
-    dispatch({
-      type: 'SET_UI',
-      config: ConfigManager.get()
-    })
-  }
-
   handleOnSearchFocus () {
-    if (this.state.searchPopupOpen) {
+    if (this.state.isSearching) {
       this.refs.search.childNodes[0].blur()
     } else {
       this.refs.search.childNodes[0].focus()
@@ -259,28 +121,7 @@ class TopBar extends React.Component {
   }
 
   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>
-      })
-
+    let { config, style, data, location } = this.props
     return (
       <div className='TopBar'
         styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}
@@ -288,7 +129,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)}
@@ -299,17 +139,12 @@ class TopBar extends React.Component {
                 ref='searchInput'
                 value={this.state.search}
                 onChange={(e) => this.handleSearchChange(e)}
+                onKeyDown={(e) => this.handleKeyDown(e)}
+                onKeyUp={(e) => this.handleKeyUp(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'
@@ -320,14 +155,17 @@ class TopBar extends React.Component {
             }
 
           </div>
-          <button styleName='control-newPostButton'
-            onClick={(e) => this.handleNewPostButtonClick(e)}>
-            <i className='fa fa-plus' />
-            <span styleName='control-newPostButton-tooltip'>
-              Make a Note {OSX ? '⌘' : '^'} + n
-            </span>
-          </button>
         </div>
+        {location.pathname === '/trashed' ? ''
+        : <NewNoteButton
+          {..._.pick(this.props, [
+            'dispatch',
+            'data',
+            'config',
+            'params',
+            'location'
+          ])}
+        />}
       </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,8 @@ body
   font-family DEFAULT_FONTS
   color textColor
   font-size fontSize
-  font-weight 400
+  font-weight 200
+  -webkit-font-smoothing antialiased
 
 button, input, select, textarea
   font-family DEFAULT_FONTS
@@ -64,7 +65,7 @@ textarea.block-input
   fullsize()
 
 modalZIndex= 1000
-modalBackColor = transparentify(white, 65%)
+modalBackColor = white
 .ace_focus
   outline-color rgb(59, 153, 252)
   outline-offset 0px
@@ -86,12 +87,12 @@ modalBackColor = transparentify(white, 65%)
 body[data-theme="dark"]
   .ModalBase
     .modalBack
-      background-color alpha(black, 60%)
+      background-color $ui-dark-backgroundColor
 
 .CodeMirror
   font-family inherit !important
   line-height 1.4em
-  height 100%
+  height 96%
 .CodeMirror > div > textarea
   margin-bottom -1em
 .CodeMirror-focused .CodeMirror-selected
@@ -102,3 +103,10 @@ body[data-theme="dark"]
   background #B1D7FE
 ::selection
   background #B1D7FE
+
+.sortableItemHelper
+  z-index modalZIndex + 5
+
+body[data-theme="dark"]
+  .sortableItemHelper
+    color: $ui-dark-text-color

browser/main/index.js

@@ -23,6 +23,19 @@ 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 offsetParent = e.target.offsetParent
+  const isInfoPanel = offsetParent !== null
+    ? offsetParent.className.includes('infoPanel')
+    : false
+  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 +63,13 @@ ReactDOM.render((
         <IndexRedirect to='/home' />
         <Route path='home' />
         <Route path='starred' />
+        <Route path='searched' />
+        <Route path='trashed' />
+        <Route path='alltags' />
+        <Route path='tags'>
+          <IndexRedirect to='/alltags' />
+          <Route path=':tagname' />
+        </Route>
         <Route path='storages'>
           <IndexRedirect to='/home' />
           <Route path=':storageKey'>

browser/main/lib/AwsMobileAnalyticsConfig.js

@@ -0,0 +1,74 @@
+const AWS = require('aws-sdk')
+const AMA = require('aws-sdk-mobile-analytics')
+const ConfigManager = require('browser/main/lib/ConfigManager')
+
+const remote = require('electron').remote
+const os = require('os')
+
+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 validPlatformName = convertPlatformName(os.platform())
+
+  const mobileAnalyticsClient = new AMA.Manager({
+    appId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
+    appTitle: 'xxxxxxxxxx',
+    appVersionName: remote.app.getVersion().toString(),
+    platform: validPlatformName
+  })
+}
+
+function convertPlatformName (platformName) {
+  if (platformName === 'darwin') {
+    return 'MacOS'
+  } else if (platformName === 'win32') {
+    return 'Windows'
+  } else if (platformName === 'linux') {
+    return 'Linux'
+  } else {
+    return ''
+  }
+}
+
+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)
+      recordDynamicCustomEvent('APP_STARTED')
+      recordStaticCustomEvent()
+    }
+  })
+}
+
+function recordDynamicCustomEvent (type, options = {}) {
+  if (process.env.NODE_ENV !== 'production' || !ConfigManager.default.get().amaEnabled) return
+  try {
+    mobileAnalyticsClient.recordEvent(type, options)
+  } catch (analyticsError) {
+    if (analyticsError instanceof ReferenceError) {
+      console.log(analyticsError.name + ': ' + analyticsError.message)
+    }
+  }
+}
+
+function recordStaticCustomEvent () {
+  if (process.env.NODE_ENV !== 'production' || !ConfigManager.default.get().amaEnabled) return
+  try {
+    mobileAnalyticsClient.recordEvent('UI_COLOR_THEME', {
+      uiColorTheme: ConfigManager.default.get().ui.theme
+    })
+  } catch (analyticsError) {
+    if (analyticsError instanceof ReferenceError) {
+      console.log(analyticsError.name + ': ' + analyticsError.message)
+    }
+  }
+}
+
+module.exports = {
+  initAwsMobileAnalytics,
+  recordDynamicCustomEvent
+}

browser/main/lib/ConfigManager.js

@@ -1,9 +1,13 @@
 import _ from 'lodash'
+import RcParser from 'browser/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
 
@@ -14,28 +18,30 @@ export const DEFAULT_CONFIG = {
   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',
+    toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E'
   },
   ui: {
     theme: 'default',
+    showCopyNotification: true,
     disableDirectWrite: false,
     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: 'elegant',
+    fontFamily: win ? 'Segoe UI' : 'Lato',
+    codeBlockTheme: 'dracula',
     lineNumber: true
   }
 }
@@ -55,17 +61,17 @@ function _save (config) {
 }
 
 function get () {
-  let config = window.localStorage.getItem('config')
+  const rawStoredConfig = window.localStorage.getItem('config')
+  const storedConfig = Object.assign({}, DEFAULT_CONFIG, JSON.parse(rawStoredConfig))
+  let config = storedConfig
 
   try {
-    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)
+    const boostnotercConfig = RcParser.parse()
+    config = assignConfigValues(storedConfig, boostnotercConfig)
+
     if (!validate(config)) throw new Error('INVALID CONFIG')
   } catch (err) {
-    console.warn('Boostnote resets the malformed configuration.')
+    console.warn('Boostnote resets the invalid configuration.')
     config = DEFAULT_CONFIG
     _save(config)
   }
@@ -85,7 +91,11 @@ function get () {
       : 'default'
 
     if (config.editor.theme !== 'default') {
-      editorTheme.setAttribute('href', '../node_modules/codemirror/theme/' + config.editor.theme + '.css')
+      if (config.editor.theme.startsWith('solarized')) {
+        editorTheme.setAttribute('href', '../node_modules/codemirror/theme/solarized.css')
+      } else {
+        editorTheme.setAttribute('href', '../node_modules/codemirror/theme/' + config.editor.theme + '.css')
+      }
     }
   }
 
@@ -100,6 +110,8 @@ function set (updates) {
 
   if (newConfig.ui.theme === 'dark') {
     document.body.setAttribute('data-theme', 'dark')
+  } else if (newConfig.ui.theme === 'white') {
+    document.body.setAttribute('data-theme', 'white')
   } else {
     document.body.setAttribute('data-theme', 'default')
   }
@@ -116,7 +128,11 @@ function set (updates) {
     : 'default'
 
   if (newTheme !== 'default') {
-    editorTheme.setAttribute('href', '../node_modules/codemirror/theme/' + newTheme + '.css')
+    if (newTheme.startsWith('solarized')) {
+      editorTheme.setAttribute('href', '../node_modules/codemirror/theme/solarized.css')
+    } else {
+      editorTheme.setAttribute('href', '../node_modules/codemirror/theme/' + newTheme + '.css')
+    }
   }
 
   ipcRenderer.send('config-renew', {
@@ -124,6 +140,15 @@ function set (updates) {
   })
 }
 
+function assignConfigValues (originalConfig, rcConfig) {
+  let config = Object.assign({}, DEFAULT_CONFIG, originalConfig, rcConfig)
+  config.hotkey = Object.assign({}, DEFAULT_CONFIG.hotkey, originalConfig.hotkey, rcConfig.hotkey)
+  config.ui = Object.assign({}, DEFAULT_CONFIG.ui, originalConfig.ui, rcConfig.ui)
+  config.editor = Object.assign({}, DEFAULT_CONFIG.editor, originalConfig.editor, rcConfig.editor)
+  config.preview = Object.assign({}, DEFAULT_CONFIG.preview, originalConfig.preview, rcConfig.preview)
+  return config
+}
+
 export default {
   get,
   set,

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