Merge pull request #735 from BoostIO/feature-v0-8-12

v0.8.12

Backers.md

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

ISSUE_TEMPLATE.md

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

browser/components/CodeEditor.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
 import path from 'path'
+import copyImage from 'browser/main/lib/dataApi/copyImage'
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
@@ -83,7 +84,13 @@ export default class CodeEditor extends React.Component {
         'Cmd-T': function (cm) {
           // Do nothing
         },
-        Enter: 'newlineAndIndentContinueMarkdownList'
+        Enter: 'newlineAndIndentContinueMarkdownList',
+        'Ctrl-C': (cm) => {
+          if (cm.getOption('keyMap').substr(0, 3) === 'vim') {
+            document.execCommand('copy')
+          }
+          return CodeMirror.Pass
+        }
       }
     })
 
@@ -184,13 +191,17 @@ export default class CodeEditor extends React.Component {
     e.preventDefault()
     const imagePath = e.dataTransfer.files[0].path
     const filename = path.basename(imagePath)
-    const imageMd = `![${encodeURI(filename)}](${encodeURI(imagePath)})`
-    this.insertImage(imageMd)
+
+    copyImage(imagePath, this.props.storageKey).then((imagePath) => {
+      const imageMd = `![${filename}](${path.join('/:storage', imagePath)})`
+      this.insertImageMd(imageMd)
+    })
   }
 
-  insertImage (imageMd) {
+  insertImageMd (imageMd) {
     const textarea = this.editor.getInputField()
-    textarea.value = textarea.value.substr(0, textarea.selectionStart) + imageMd + textarea.value.substr(textarea.selectionEnd)
+    const cm = this.editor
+    textarea.value = `${textarea.value.substr(0, textarea.selectionStart)}${imageMd}${textarea.value.substr(textarea.selectionEnd)}`
   }
 
   render () {

browser/components/MarkdownEditor.js

@@ -4,19 +4,22 @@ import styles from './MarkdownEditor.styl'
 import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
 import eventEmitter from 'browser/main/lib/eventEmitter'
+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]
 
-    this.supportMdSelectionBold = ['Control', ':']
+    // ctrl + shift + ;
+    this.supportMdSelectionBold = [16, 17, 186]
 
     this.state = {
       status: 'PREVIEW',
       renderValue: props.value,
-      keyPressed: {},
+      keyPressed: new Set(),
       isLocked: false
     }
 
@@ -87,7 +90,7 @@ class MarkdownEditor extends React.Component {
 
   handleBlur (e) {
     if (this.state.isLocked) return
-    this.setState({ keyPressed: [] })
+    this.setState({ keyPressed: new Set() })
     let { config } = this.props
     if (config.editor.switchPreview === 'BLUR') {
       let cursorPosition = this.refs.code.editor.getCursor()
@@ -161,15 +164,16 @@ class MarkdownEditor extends React.Component {
 
   handleKeyDown (e) {
     if (this.state.status !== 'CODE') return false
-    const keyPressed = Object.assign(this.state.keyPressed, {
-      [e.key]: true
-    })
+    const keyPressed = this.state.keyPressed
+    keyPressed.add(e.keyCode)
     this.setState({ keyPressed })
-    let isNoteHandlerKey = (el) => { return this.state.keyPressed[el] }
-    if (!this.state.isLocked && this.state.status === 'CODE' && this.escapeFromEditor.every(isNoteHandlerKey)) {
+    let isNoteHandlerKey = (el) => { return keyPressed.has(el) }
+    if (keyPressed.size === this.escapeFromEditor.length &&
+        !this.state.isLocked && this.state.status === 'CODE' &&
+        this.escapeFromEditor.every(isNoteHandlerKey)) {
       document.activeElement.blur()
     }
-    if (this.supportMdSelectionBold.every(isNoteHandlerKey)) {
+    if (keyPressed.size === this.supportMdSelectionBold.length && this.supportMdSelectionBold.every(isNoteHandlerKey)) {
       this.addMdAroundWord('**')
     }
   }
@@ -190,9 +194,8 @@ class MarkdownEditor extends React.Component {
   }
 
   handleKeyUp (e) {
-    const keyPressed = Object.assign(this.state.keyPressed, {
-      [e.key]: false
-    })
+    const keyPressed = this.state.keyPressed
+    keyPressed.delete(e.keyCode)
     this.setState({ keyPressed })
   }
 
@@ -201,7 +204,7 @@ class MarkdownEditor extends React.Component {
   }
 
   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
@@ -211,6 +214,11 @@ class MarkdownEditor extends React.Component {
     let previewStyle = {}
     if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
 
+    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 (
       <div className={className == null
           ? 'MarkdownEditor'
@@ -221,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}
@@ -231,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)}
         />
@@ -254,6 +266,7 @@ class MarkdownEditor extends React.Component {
           onMouseUp={(e) => this.handlePreviewMouseUp(e)}
           onMouseDown={(e) => this.handlePreviewMouseDown(e)}
           onCheckboxClick={(e) => this.handleCheckboxClick(e)}
+          storagePath={storage.path}
         />
       </div>
     )

browser/components/MarkdownEditor.styl

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

browser/components/MarkdownPreview.js

@@ -8,21 +8,8 @@ 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'
 
 const { remote } = require('electron')
 const { app } = remote
@@ -60,6 +47,26 @@ code {
   font-family: ${codeBlockFontFamily.join(', ')};
 }
 
+.clipboardButton {
+  color: rgba(147,147,149,0.8);;
+  fill: rgba(147,147,149,1);;
+  border-radius: 50%;
+  margin: 7px;
+  border: none;
+  background-color: transparent;
+  outline: none;
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+}
+
+.clipboardButton:hover {
+  transition: 0.2s;
+  color: #939395;
+  fill: #939395;
+  background-color: rgba(0,0,0,0.1);
+}
+
 h1, h2 {
   border: none;
 }
@@ -73,6 +80,10 @@ h2 {
   padding-bottom: 0.2em;
   margin: 1em 0 0.37em;
 }
+
+body p {
+  white-space: normal;
+}
 `
 }
 
@@ -97,6 +108,8 @@ export default class MarkdownPreview extends React.Component {
     this.checkboxClickHandler = (e) => this.handleCheckboxClick(e)
     this.saveAsTextHandler = () => this.handleSaveAsText()
     this.saveAsMdHandler = () => this.handleSaveAsMd()
+
+    this.linkClickHandler = this.handlelinkClick.bind(this)
   }
 
   handlePreviewAnchorClick (e) {
@@ -238,9 +251,20 @@ 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, 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) => {
@@ -255,6 +279,15 @@ 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) => {
+      if (!/\/:storage/.test(el.src)) return
+      el.src = `file:///${path.join(storagePath, 'images', path.basename(el.src))}`
+    })
+
     codeBlockTheme = consts.THEMES.some((_theme) => _theme === codeBlockTheme)
       ? codeBlockTheme
       : 'default'
@@ -263,7 +296,17 @@ export default class MarkdownPreview extends React.Component {
       let syntax = CodeMirror.findModeByName(el.className)
       if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
       CodeMirror.requireMode(syntax.mode, () => {
-        let content = 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)
+          this.notify('Saved to Clipboard!', {
+            body: 'Paste it wherever you want!',
+            silent: true
+          })
+        }
+        el.parentNode.appendChild(copyIcon)
         el.innerHTML = ''
         el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
         CodeMirror.runMode(content, syntax.mime, el, {
@@ -281,7 +324,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) => {
@@ -297,7 +340,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) => {
@@ -338,6 +381,21 @@ export default class MarkdownPreview extends React.Component {
     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 (
@@ -359,5 +417,6 @@ MarkdownPreview.propTypes = {
   onMouseUp: PropTypes.func,
   onMouseDown: PropTypes.func,
   className: PropTypes.string,
-  value: PropTypes.string
+  value: PropTypes.string,
+  storagePath: PropTypes.string
 }

browser/components/ModalEscButton.js

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

browser/components/ModalEscButton.styl

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

browser/components/NoteItem.js

@@ -39,17 +39,18 @@ const TagElementList = (tags) => {
  * @param {boolean} isActive
  * @param {Object} note
  * @param {Function} handleNoteClick
- * @param {Function} handleNoteContextMenu
+ * @param {Function} handleDragStart
  * @param {string} dateDisplay
  */
-const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu }) => (
+const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleDragStart }) => (
   <div styleName={isActive
       ? 'item--active'
       : 'item'
     }
     key={`${note.storage}-${note.key}`}
     onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
-    onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+    onDragStart={e => handleDragStart(e, note)}
+    draggable='true'
   >
     <div styleName='item-wrapper'>
       {note.type === 'SNIPPET_NOTE'
@@ -88,10 +89,12 @@ 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
+  handleDragStart: PropTypes.func.isRequired,
+  handleDragEnd: PropTypes.func.isRequired
 }
 
 export default CSSModules(NoteItem, styles)

browser/components/NoteItem.styl

@@ -22,6 +22,8 @@ $control-height = 30px
     .item-bottom-tagList-item
       background-color alpha(white, 0.6)
       color $ui-text-color
+    .item-star
+      color $ui-favorite-star-button-color
   &:active
     background-color $ui-button--active-backgroundColor
     color $ui-text-color
@@ -53,6 +55,8 @@ $control-height = 30px
     color $ui-text-color
   .item-wrapper
     border-color transparent
+  .item-star
+    color $ui-favorite-star-button-color
   &:hover
     background-color $ui-button--active-backgroundColor
 
@@ -62,7 +66,7 @@ $control-height = 30px
   color $ui-inactive-text-color
 
 .item-title
-  font-size 13px
+  font-size 14px
   position relative
   top -12px
   left 20px
@@ -79,7 +83,6 @@ $control-height = 30px
   position relative
   bottom 0px
   margin-top 2px
-  height 20px
   font-size 12px
   line-height 20px
   overflow ellipsis
@@ -89,10 +92,12 @@ $control-height = 30px
   flex 1
   overflow ellipsis
   line-height 20px
+  padding-top 7px
   padding-left 2px
+  margin-right 27px
 
 .item-bottom-tagList-item
-  font-size 10px
+  font-size 11px
   margin-right 8px
   padding 0
   height 20px
@@ -105,17 +110,17 @@ $control-height = 30px
 
 .item-bottom-time
   color $ui-inactive-text-color
-  font-size 10px
+  font-size 11px
   padding-left 2px
   padding-bottom 2px
 
 .item-star
   position absolute
-  top 19px
-  left 5px
+  right 5px
+  bottom 0px
   width 34px
   height 34px
-  color $ui-favorite-star-button-color
+  color alpha($ui-favorite-star-button-color, 60%)
   font-size 12px
   padding 0
   border-radius 17px
@@ -154,7 +159,7 @@ body[data-theme="dark"]
         color $ui-dark-text-color  
 
   .item-wrapper
-    border-color $ui-dark-borderColor
+    border-color alpha($ui-dark-button--active-backgroundColor, 60%)
 
   .item--active
     border-color $ui-dark-borderColor

browser/components/NoteItemSimple.js

@@ -10,16 +10,17 @@ import styles from './NoteItemSimple.styl'
  * @param {boolean} isActive
  * @param {Object} note
  * @param {Function} handleNoteClick
- * @param {Function} handleNoteContextMenu
+ * @param {Function} handleDragStart
  */
-const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu }) => (
+const NoteItemSimple = ({ isActive, note, handleNoteClick, handleDragStart }) => (
   <div styleName={isActive
       ? 'item-simple--active'
       : 'item-simple'
     }
     key={`${note.storage}-${note.key}`}
     onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
-    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 +44,7 @@ NoteItemSimple.propTypes = {
     title: PropTypes.string.isrequired
   }),
   handleNoteClick: PropTypes.func.isRequired,
-  handleNoteContextMenu: PropTypes.func.isRequired
+  handleDragStart: PropTypes.func.isRequired
 }
 
 export default CSSModules(NoteItemSimple, styles)

browser/components/NoteItemSimple.styl

@@ -7,7 +7,7 @@ $control-height = 30px
 
 .item-simple
   position relative
-  padding 0 25px
+  padding 0 20px
   user-select none
   cursor pointer
   background-color $ui-noteList-backgroundColor
@@ -40,7 +40,7 @@ $control-height = 30px
     background-color $ui-button--active-backgroundColor
 
 .item-simple-title
-  font-size 12px
+  font-size 13px
   height 40px
   box-sizing border-box
   line-height 24px
@@ -96,7 +96,7 @@ body[data-theme="dark"]
 
   .item-simple-title
     color $ui-inactive-text-color
-    border-color $ui-dark-borderColor
+    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/SideNavFilter.js

@@ -15,7 +15,7 @@ import styles from './SideNavFilter.styl'
  */
 const SideNavFilter = ({
   isFolded, isHomeActive, handleAllNotesButtonClick,
-  isStarredActive, handleStarredButtonClick
+  isStarredActive, handleStarredButtonClick, isTrashedActive, handleTrashedButtonClick
 }) => (
   <div styleName={isFolded ? 'menu--folded' : 'menu'}>
     <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
@@ -30,6 +30,12 @@ const SideNavFilter = ({
       <i className='fa fa-star fa-fw' />
       <span styleName='menu-button-label'>Starred</span>
     </button>
+    <button styleName={isTrashedActive ? 'menu-button--active' : 'menu-button'}
+      onClick={handleTrashedButtonClick}
+    >
+      <i className='fa fa-trash fa-fw' />
+      <span styleName='menu-button-label'>Trash</span>
+    </button>
   </div>
 )
 
@@ -38,7 +44,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/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,6 +29,9 @@ const StorageItem = ({
     }
     onClick={handleButtonClick}
     onContextMenu={handleContextMenu}
+    onDrop={handleDrop}
+    onDragEnter={handleDragEnter}
+    onDragLeave={handleDragLeave}
   >
     <span styleName={isFolded
       ? 'folderList-item-name--folded' : 'folderList-item-name'
@@ -52,6 +58,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

@@ -35,7 +35,7 @@
 .folderList-item-name
   display block
   flex 1
-  padding 0 15px
+  padding 0 25px
   height 26px
   line-height 26px
   border-width 0 0 0 2px

browser/components/TodoListPercentage.js

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

browser/components/TodoListPercentage.styl

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

browser/components/markdown.styl

@@ -270,7 +270,7 @@ table
         border-right solid 1px borderColor
 
 themeDarkBackground = darken(#21252B, 10%)
-themeDarkText = #DDDDDD
+themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)
 themeDarkPreview = $ui-dark-noteDetail-backgroundColor
 themeDarkTableOdd = themeDarkPreview
@@ -288,8 +288,9 @@ body[data-theme="dark"]
     background-color alpha(lighten(brandColor, 30%), 0.2) !important
 
   code
+    color #EA6730
     border-color darken(themeDarkBorder, 10%)
-    background-color lighten(themeDarkPreview, 10%)
+    background-color lighten(themeDarkPreview, 5%)
 
   pre
     border-color lighten(#21252B, 20%)

browser/finder/NoteDetail.js

@@ -106,6 +106,11 @@ class NoteDetail extends React.Component {
     let editorIndentSize = parseInt(config.editor.indentSize, 10)
     if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
 
+    const cachedStorageList = JSON.parse(localStorage.getItem('storages'))
+    if (!_.isArray(cachedStorageList)) throw new Error('Target storage doesn\'t exist.')
+    const storage = _.find(cachedStorageList, {key: note.storage})
+    if (storage === undefined) throw new Error('Target storage doesn\'t exist.')
+
     if (note.type === 'SNIPPET_NOTE') {
       let tabList = note.snippets.map((snippet, index) => {
         let isActive = this.state.snippetIndex === index
@@ -192,6 +197,7 @@ class NoteDetail extends React.Component {
         lineNumber={config.preview.lineNumber}
         indentSize={editorIndentSize}
         value={note.content}
+        storagePath={storage.path}
       />
     )
   }

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')
 
@@ -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/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/htmlTextHelper.js

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

browser/lib/markdown.js

@@ -19,6 +19,7 @@ var md = markdownit({
   linkify: true,
   html: true,
   xhtmlOut: true,
+  breaks: true,
   highlight: function (str, lang) {
     if (lang === 'flowchart') {
       return `<pre class="flowchart">${str}</pre>`
@@ -56,6 +57,7 @@ md.use(math, {
     return output
   }
 })
+md.use(require('markdown-it-imsize'))
 md.use(require('markdown-it-footnote'))
 // Override task item
 md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
@@ -157,7 +159,8 @@ function strip (input) {
 const markdown = {
   render: function markdown (content) {
     if (!_.isString(content)) content = ''
-    return md.render(content)
+    const renderedContent = md.render(content)
+    return md.normalizeLinkText(renderedContent)
   },
   strip
 }

browser/lib/search.js

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

browser/main/Detail/FolderSelect.styl

@@ -1,7 +1,7 @@
 .root
   position relative
   border solid 1px transparent
-  line-height 34px
+  line-height 26px
   vertical-align middle
   border-radius 2px
   transition 0.15s

browser/main/Detail/InfoButton.js

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

browser/main/Detail/InfoButton.styl

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

browser/main/Detail/InfoPanel.js

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

browser/main/Detail/InfoPanel.styl

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

browser/main/Detail/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,6 +2,7 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './MarkdownNoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
+import TodoListPercentage from 'browser/components/TodoListPercentage'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
@@ -11,6 +12,12 @@ import ee from 'browser/main/lib/eventEmitter'
 import markdown from 'browser/lib/markdown'
 import StatusBar from '../StatusBar'
 import _ from 'lodash'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import TrashButton from './TrashButton'
+import InfoButton from './InfoButton'
+import InfoPanel from './InfoPanel'
+import { formatDate } from 'browser/lib/date-formatter'
 
 const electron = require('electron')
 const { remote } = electron
@@ -49,7 +56,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()
       })
     }
   }
@@ -62,45 +69,30 @@ class MarkdownNoteDetail extends React.Component {
     ee.off('topbar:togglelockbutton', this.toggleLockButton)
   }
 
-  findTitle (value) {
-    let splitted = value.split('\n')
-    let title = null
-    let isMarkdownInCode = false
+  getPercentageOfCompleteTodo (noteContent) {
+    let splitted = noteContent.split('\n')
+    let numberOfTodo = 0
+    let numberOfCompletedTodo = 0
 
-    for (let i = 0; i < splitted.length; i++) {
-      let trimmedLine = splitted[i].trim()
-      if (trimmedLine.match('```')) {
-        isMarkdownInCode = !isMarkdownInCode
-      } else if (isMarkdownInCode === false && trimmedLine.match(/^# +/)) {
-        title = trimmedLine.substring(1, trimmedLine.length).trim()
-        break
+    splitted.forEach((line) => {
+      let trimmedLine = line.trim()
+      if (trimmedLine.match(/^[\+\-\*] \[\s|x\] ./)) {
+        numberOfTodo++
       }
-    }
-
-    if (title == null) {
-      for (let i = 0; i < splitted.length; i++) {
-        let trimmedLine = splitted[i].trim()
-        if (trimmedLine.length > 0) {
-          title = trimmedLine
-          break
-        }
+      if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {
+        numberOfCompletedTodo++
       }
-      if (title == null) {
-        title = ''
-      }
-    }
+    })
 
-    title = markdown.strip(title)
-
-    return title
+    return Math.floor(numberOfCompletedTodo / numberOfTodo * 100)
   }
 
   handleChange (e) {
     let { note } = this.state
 
     note.content = this.refs.content.value
-    note.tags = this.refs.tags.value
-    note.title = this.findTitle(note.content)
+    if (this.refs.tags) note.tags = this.refs.tags.value
+    note.title = markdown.strip(findNoteTitle(note.content))
     note.updatedAt = new Date()
 
     this.setState({
@@ -129,6 +121,7 @@ class MarkdownNoteDetail extends React.Component {
           type: 'UPDATE_NOTE',
           note: note
         })
+        AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
       })
   }
 
@@ -167,6 +160,7 @@ class MarkdownNoteDetail extends React.Component {
 
   handleStarButtonClick (e) {
     let { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
 
@@ -181,14 +175,26 @@ class MarkdownNoteDetail extends React.Component {
 
   }
 
-  handleDeleteButtonClick (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) {
+  exportAsMd () {
+    ee.emit('export:save-md')
+  }
+
+  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: 'Delete a note',
+        detail: 'This work cannot be undone.',
+        buttons: ['Confirm', 'Cancel']
+      })
+      if (dialogueButtonIndex === 1) return
       let { note, dispatch } = this.props
       dataApi
         .deleteNote(note.storage, note.key)
@@ -201,9 +207,35 @@ 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) {
@@ -214,7 +246,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   getToggleLockButton () {
-    return this.state.isLocked ? 'fa-lock' : 'fa-unlock-alt'
+    return this.state.isLocked ? 'fa-lock' : 'fa-unlock'
   }
 
   handleDeleteKeyDown (e) {
@@ -234,68 +266,109 @@ class MarkdownNoteDetail extends React.Component {
     this.focus()
   }
 
+  handleInfoButtonClick (e) {
+    const infoPanel = document.querySelector('.infoPanel')
+    if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none'
+  }
+
   render () {
-    let { data, config } = 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'>
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+      </div>
+    </div>
+
+    const detailTopBar = <div styleName='info'>
+      <div styleName='info-left'>
+        <StarButton styleName='info-left-button'
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+        <div styleName='info-left-top'>
+          <FolderSelect styleName='info-left-top-folderSelect'
+            value={this.state.note.storage + '-' + this.state.note.folder}
+            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={this.getPercentageOfCompleteTodo(note.content)}
+        />
+      </div>
+      <div styleName='info-right'>
+        {(() => {
+          const faClassName = `fa ${this.getToggleLockButton()}`
+          const lockButtonComponent =
+            <button styleName='control-lockButton'
+              onFocus={(e) => this.handleFocus(e)}
+              onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
+            >
+              <i className={faClassName} styleName='lock-button' />
+              <span styleName='control-lockButton-tooltip'>
+                {this.state.isLocked ? 'Unlock' : 'Lock'}
+              </span>
+            </button>
+          return (
+            this.state.isLockButtonShown ? lockButtonComponent : ''
+          )
+        })()}
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <button styleName='control-fullScreenButton'
+          onMouseDown={(e) => this.handleFullScreenButton(e)}
+        >
+          <i className='fa fa-expand' styleName='fullScreen-button' />
+        </button>
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+        <InfoPanel
+          storageName={currentOption.storage.name}
+          folderName={currentOption.folder.name}
+          noteLink={`[${note.title}](${location.query.key})`}
+          updatedAt={formatDate(note.updatedAt)}
+          createdAt={formatDate(note.createdAt)}
+          exportAsMd={this.exportAsMd}
+          exportAsTxt={this.exportAsTxt}
+        />
+      </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'>
-            {(() => {
-              const faClassName = `fa ${this.getToggleLockButton()}`
-              const lockButtonComponent =
-                <button styleName='control-lockButton'
-                  onFocus={(e) => this.handleFocus(e)}
-                  onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
-                >
-                  <i className={faClassName} styleName='lock-button' />
-                  <span styleName='control-lockButton-tooltip'>
-                    {this.state.isLocked ? 'Unlock' : 'Lock'}
-                  </span>
-                </button>
-              return (
-                this.state.isLockButtonShown ? lockButtonComponent : ''
-              )
-            })()}
-            <button styleName='control-trashButton'
-              onClick={(e) => this.handleDeleteButtonClick(e)}
-            >
-              <svg height='14px' id='Capa_1' style={{enableBackground: 'new 0 0 753.23 753.23'}} width='14px' version='1.1' viewBox='0 0 753.23 753.23' x='0px' y='0px' xmlSpace='preserve'>
-                <g>
-                  <g id='_x34__19_'>
-                    <g>
-                      <path d='M494.308,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077c0-12.993-10.545-23.539-23.538-23.539&#xA;&#x9;&#x9;&#x9;&#x9;s-23.538,10.545-23.538,23.539v282.461C470.77,648.531,481.314,659.077,494.308,659.077z M635.538,94.154h-141.23V47.077&#xA;&#x9;&#x9;&#x9;&#x9;C494.308,21.067,473.24,0,447.23,0H306c-26.01,0-47.077,21.067-47.077,47.077v47.077h-141.23&#xA;&#x9;&#x9;&#x9;&#x9;c-26.01,0-47.077,21.067-47.077,47.077v47.077c0,25.986,21.067,47.077,47.077,47.077v423.692&#xA;&#x9;&#x9;&#x9;&#x9;c0,51.996,42.157,94.153,94.154,94.153h329.539c51.996,0,94.153-42.157,94.153-94.153V235.385&#xA;&#x9;&#x9;&#x9;&#x9;c26.01,0,47.077-21.091,47.077-47.077V141.23C682.615,115.221,661.548,94.154,635.538,94.154z M306,70.615&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993,10.545-23.539,23.538-23.539h94.154c12.993,0,23.538,10.545,23.538,23.539v23.539c-22.809,0-141.23,0-141.23,0V70.615z&#xA;&#x9;&#x9;&#x9;&#x9; M588.461,659.077c0,25.986-21.066,47.076-47.076,47.076H211.846c-26.01,0-47.077-21.09-47.077-47.076V235.385h423.692V659.077z&#xA;&#x9;&#x9;&#x9;&#x9; M612,188.308H141.23c-12.993,0-23.538-10.545-23.538-23.539s10.545-23.539,23.538-23.539H612&#xA;&#x9;&#x9;&#x9;&#x9;c12.993,0,23.538,10.545,23.538,23.539S624.993,188.308,612,188.308z M258.923,659.077c12.993,0,23.539-10.546,23.539-23.539&#xA;&#x9;&#x9;&#x9;&#x9;V353.077c0-12.993-10.545-23.539-23.539-23.539s-23.539,10.545-23.539,23.539v282.461&#xA;&#x9;&#x9;&#x9;&#x9;C235.384,648.531,245.93,659.077,258.923,659.077z M376.615,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993-10.545-23.539-23.538-23.539s-23.539,10.545-23.539,23.539v282.461C353.077,648.531,363.622,659.077,376.615,659.077z' />
-                    </g>
-                  </g>
-                </g>
-              </svg>
-            </button>
-          </div>
-        </div>
+        {location.pathname === '/trashed' ? trashTopBar : detailTopBar}
 
         <div styleName='body'>
           <MarkdownEditor
@@ -303,6 +376,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

@@ -27,8 +27,9 @@
   opacity 0
   transition 0.1s
 
-.control-trashButton
+.control-fullScreenButton
   float right
+  padding 0 0 2px 0
   topBarButtonLight()
 
 .body
@@ -53,5 +54,5 @@ body[data-theme="dark"]
   .control-lockButton-tooltip
     darkTooltip()
 
-  .control-trashButton
+  .control-fullScreenButton
     topBarButtonDark()

browser/main/Detail/NoteDetailInfo.styl

@@ -15,26 +15,26 @@ $info-margin-under-border = 27px
   float left
   padding 0 5px
   margin 0px 2px
-
 .info-left-top
   display inline-block
   height $info-height
   line-height $info-height
 
 .info-left-top-folderSelect
-  display inline-block
   padding 0 3px
   height 34px
-  line-height 34px
-  vertical-align middle
+  line-height 26px
+  display flex
+  align-items center
+  justify-content center
   border-radius 3px
-
 .info-left-button
   width 34px
   height 34px
   navButtonColor()
   color $ui-favorite-star-button-color
   font-size 14px
+  line-height 0
   margin 13px 2px
   padding 0
   border-radius 17px
@@ -44,7 +44,7 @@ $info-margin-under-border = 27px
     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
@@ -54,6 +54,27 @@ $info-margin-under-border = 27px
   bottom 1px
   padding-left 30px
 
+.undo-button
+  width 34px
+  height 34px
+  border-radius 17px
+  font-size 14px
+  margin 15px 7px
+  border none
+  color $ui-button-color
+  display flex
+  align-items center
+  justify-content center
+  fill $ui-button-color
+  background-color transparent
+  cursor pointer
+  &:active
+    border-color $ui-button--active-backgroundColor
+  &:hover
+    background-color alpha($ui-button--hover-backgroundColor, 60%)
+    .control-lockButton-tooltip
+      opacity 1
+
 body[data-theme="dark"]
   .info
     border-color $ui-dark-borderColor
@@ -73,3 +94,6 @@ body[data-theme="dark"]
 
   .info-right
     background-color $ui-dark-noteDetail-backgroundColor
+
+  .undo-button
+    topBarButtonDark()

browser/main/Detail/SnippetNoteDetail.js

@@ -15,6 +15,12 @@ import StatusBar from '../StatusBar'
 import context from 'browser/lib/context'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import _ from 'lodash'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import TrashButton from './TrashButton'
+import InfoButton from './InfoButton'
+import InfoPanel from './InfoPanel'
+import { formatDate } from 'browser/lib/date-formatter'
 
 function pass (name) {
   switch (name) {
@@ -51,7 +57,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 +72,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 +81,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 +115,7 @@ class SnippetNoteDetail extends React.Component {
           type: 'UPDATE_NOTE',
           note: note
         })
+        AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
       })
   }
 
@@ -175,6 +154,7 @@ class SnippetNoteDetail extends React.Component {
 
   handleStarButtonClick (e) {
     let { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
 
     note.isStarred = !note.isStarred
 
@@ -189,14 +169,18 @@ class SnippetNoteDetail extends React.Component {
 
   }
 
-  handleDeleteButtonClick (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) {
+  handleTrashButtonClick (e) {
+    let { note } = this.state
+    const { isTrashed } = note
+
+    if (isTrashed) {
+      let dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+        type: 'warning',
+        message: 'Delete a note',
+        detail: 'This work cannot be undone.',
+        buttons: ['Confirm', 'Cancel']
+      })
+      if (dialogueButtonIndex === 1) return
       let { note, dispatch } = this.props
       dataApi
         .deleteNote(note.storage, note.key)
@@ -209,9 +193,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) {
@@ -452,10 +461,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)
@@ -510,49 +536,79 @@ 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'>
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+      </div>
+    </div>
+
+    const detailTopBar = <div styleName='info'>
+      <div styleName='info-left'>
+        <StarButton styleName='info-left-button'
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+        <div styleName='info-left-top'>
+          <FolderSelect styleName='info-left-top-folderSelect'
+            value={this.state.note.storage + '-' + this.state.note.folder}
+            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'>
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <button styleName='control-fullScreenButton'
+          onMouseDown={(e) => this.handleFullScreenButton(e)}
+        >
+          <i className='fa fa-expand' styleName='fullScreen-button' />
+        </button>
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+        <InfoPanel
+          storageName={currentOption.storage.name}
+          folderName={currentOption.folder.name}
+          noteLink={`[${note.title}](${location.query.key})`}
+          updatedAt={formatDate(note.updatedAt)}
+          createdAt={formatDate(note.createdAt)}
+          exportAsMd={this.showWarning}
+          exportAsTxt={this.showWarning}
+        />
+      </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='control-trashButton'
-              onClick={(e) => this.handleDeleteButtonClick(e)}
-            >
-              <svg height='14px' id='Capa_1' style={{enableBackground: 'new 0 0 753.23 753.23'}} width='14px' version='1.1' viewBox='0 0 753.23 753.23' x='0px' y='0px' xmlSpace='preserve'>
-                <g>
-                  <g id='_x34__19_'>
-                    <g>
-                      <path d='M494.308,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077c0-12.993-10.545-23.539-23.538-23.539&#xA;&#x9;&#x9;&#x9;&#x9;s-23.538,10.545-23.538,23.539v282.461C470.77,648.531,481.314,659.077,494.308,659.077z M635.538,94.154h-141.23V47.077&#xA;&#x9;&#x9;&#x9;&#x9;C494.308,21.067,473.24,0,447.23,0H306c-26.01,0-47.077,21.067-47.077,47.077v47.077h-141.23&#xA;&#x9;&#x9;&#x9;&#x9;c-26.01,0-47.077,21.067-47.077,47.077v47.077c0,25.986,21.067,47.077,47.077,47.077v423.692&#xA;&#x9;&#x9;&#x9;&#x9;c0,51.996,42.157,94.153,94.154,94.153h329.539c51.996,0,94.153-42.157,94.153-94.153V235.385&#xA;&#x9;&#x9;&#x9;&#x9;c26.01,0,47.077-21.091,47.077-47.077V141.23C682.615,115.221,661.548,94.154,635.538,94.154z M306,70.615&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993,10.545-23.539,23.538-23.539h94.154c12.993,0,23.538,10.545,23.538,23.539v23.539c-22.809,0-141.23,0-141.23,0V70.615z&#xA;&#x9;&#x9;&#x9;&#x9; M588.461,659.077c0,25.986-21.066,47.076-47.076,47.076H211.846c-26.01,0-47.077-21.09-47.077-47.076V235.385h423.692V659.077z&#xA;&#x9;&#x9;&#x9;&#x9; M612,188.308H141.23c-12.993,0-23.538-10.545-23.538-23.539s10.545-23.539,23.538-23.539H612&#xA;&#x9;&#x9;&#x9;&#x9;c12.993,0,23.538,10.545,23.538,23.539S624.993,188.308,612,188.308z M258.923,659.077c12.993,0,23.539-10.546,23.539-23.539&#xA;&#x9;&#x9;&#x9;&#x9;V353.077c0-12.993-10.545-23.539-23.539-23.539s-23.539,10.545-23.539,23.539v282.461&#xA;&#x9;&#x9;&#x9;&#x9;C235.384,648.531,245.93,659.077,258.923,659.077z M376.615,659.077c12.993,0,23.538-10.546,23.538-23.539V353.077&#xA;&#x9;&#x9;&#x9;&#x9;c0-12.993-10.545-23.539-23.538-23.539s-23.539,10.545-23.539,23.539v282.461C353.077,648.531,363.622,659.077,376.615,659.077z' />
-                    </g>
-                  </g>
-                </g>
-              </svg>
-            </button>
-          </div>
-        </div>
+        {location.pathname === '/trashed' ? trashTopBar : detailTopBar}
 
         <div styleName='body'>
           <div styleName='description'>

browser/main/Detail/SnippetNoteDetail.styl

@@ -66,8 +66,9 @@
     &:active .update-icon
       color white
 
-.control-trashButton
+.control-fullScreenButton
   float right
+  padding 0 0 2px 0
   topBarButtonLight()
 
 body[data-theme="dark"]
@@ -100,5 +101,5 @@ body[data-theme="dark"]
         transition 0.15s
         color $ui-dark-text-color
 
-  .control-trashButton
+  .control-fullScreenButton
     topBarButtonDark()

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, '_')
 

browser/main/Detail/TagSelect.styl

@@ -1,7 +1,7 @@
 .root
   display inline-block
-  top 19px
   user-select none
+  height 23px
   vertical-align middle
   width 300px
   overflow-x scroll
@@ -14,7 +14,6 @@
   display inline-block
   margin 1px 3px
   padding 0
-  vertical-align middle
   height 20px
   background-color alpha($ui-tag-backgroundColor, 10%)
   border-radius 3px
@@ -49,9 +48,9 @@
 
 .newTag
   display inline-block
-  margin 0 2px
+  margin 2px 0 15px 2px
   vertical-align middle
-  height 24px
+  height 18px
   box-sizing borde-box
   border none
   background-color transparent

browser/main/Detail/TrashButton.js

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

browser/main/Detail/TrashButton.styl

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

browser/main/Detail/index.js

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

browser/main/Main.js

@@ -12,6 +12,8 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 import modal from 'browser/main/lib/modal'
 import InitModal from 'browser/main/modals/InitModal'
 import mixpanel from 'browser/main/lib/mixpanel'
+import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import eventEmitter from 'browser/main/lib/eventEmitter'
 
 function focused () {
   mixpanel.track('MAIN_FOCUSED')
@@ -21,14 +23,23 @@ class Main extends React.Component {
   constructor (props) {
     super(props)
 
+    if (process.env.NODE_ENV === 'production') {
+      mobileAnalytics.initAwsMobileAnalytics()
+    }
+
     let { config } = props
 
     this.state = {
       isRightSliderFocused: false,
       listWidth: config.listWidth,
       navWidth: config.navWidth,
-      isLeftSliderFocused: false
+      isLeftSliderFocused: false,
+      fullScreen: false,
+      noteDetailWidth: 0,
+      mainBodyWidth: 0
     }
+
+    this.toggleFullScreen = () => this.handleFullScreenButton()
   }
 
   getChildContext () {
@@ -63,11 +74,13 @@ class Main extends React.Component {
         }
       })
 
+    eventEmitter.on('editor:fullscreen', this.toggleFullScreen)
     window.addEventListener('focus', focused)
   }
 
   componentWillUnmount () {
     window.removeEventListener('focus', focused)
+    eventEmitter.off('editor:fullscreen', this.toggleFullScreen)
   }
 
   handleLeftSlideMouseDown (e) {
@@ -144,6 +157,34 @@ class Main extends React.Component {
     }
   }
 
+  handleFullScreenButton (e) {
+    this.setState({ fullScreen: !this.state.fullScreen }, () => {
+      const noteDetail = document.querySelector('.NoteDetail')
+      const noteList = document.querySelector('.NoteList')
+      const mainBody = document.querySelector('#main-body')
+
+      if (this.state.fullScreen) {
+        this.hideLeftLists(noteDetail, noteList, mainBody)
+      } else {
+        this.showLeftLists(noteDetail, noteList, mainBody)
+      }
+    })
+  }
+
+  hideLeftLists (noteDetail, noteList, mainBody) {
+    this.state.noteDetailWidth = noteDetail.style.left
+    this.state.mainBodyWidth = mainBody.style.left
+    noteDetail.style.left = '0px'
+    mainBody.style.left = '0px'
+    noteList.style.display = 'none'
+  }
+
+  showLeftLists (noteDetail, noteList, mainBody) {
+    noteDetail.style.left = this.state.noteDetailWidth
+    mainBody.style.left = this.state.mainBodyWidth
+    noteList.style.display = 'inline'
+  }
+
   render () {
     let { config } = this.props
 
@@ -173,6 +214,7 @@ class Main extends React.Component {
           </div>
         }
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
+          id='main-body'
           ref='body'
           style={{left: config.isSideNavFolded ? 44 : this.state.navWidth}}
         >

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/NoteList/NoteList.styl

@@ -17,7 +17,7 @@ $control-height = 30px
 
 .control-sortBy
   flex 1
-  padding-left 25px
+  padding-left 22px
 
 .control-sortBy-select
   appearance: none;
@@ -28,11 +28,14 @@ $control-height = 30px
   background-color transparent
   outline none
   cursor pointer
-  font-size 10px
+  font-size 11px
   &:hover
     transition 0.2s
     color $ui-text-color
 
+.control-button-area
+  margin-right 12px
+
 .control-button
   width 25px
   padding 0

browser/main/NoteList/index.js

@@ -8,6 +8,11 @@ import dataApi from 'browser/main/lib/dataApi'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import NoteItem from 'browser/components/NoteItem'
 import NoteItemSimple from 'browser/components/NoteItemSimple'
+import searchFromNotes from 'browser/lib/search'
+import fs from 'fs'
+import { hashHistory } from 'react-router'
+import markdown from 'browser/lib/markdown'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -41,10 +46,8 @@ class NoteList extends React.Component {
     this.alertIfSnippetHandler = () => {
       this.alertIfSnippet()
     }
-
-    this.jumpToTopHandler = () => {
-      this.jumpToTop()
-    }
+    this.importFromFileHandler = this.importFromFile.bind(this)
+    this.jumpNoteByHash = this.jumpNoteByHashHandler.bind(this)
 
     this.state = {
     }
@@ -56,8 +59,8 @@ class NoteList extends React.Component {
     ee.on('list:prior', this.selectPriorNoteHandler)
     ee.on('list:focus', this.focusHandler)
     ee.on('list:isMarkdownNote', this.alertIfSnippetHandler)
-    ee.on('list:top', this.jumpToTopHandler)
-    ee.on('list:jumpToTop', this.jumpToTopHandler)
+    ee.on('import:file', this.importFromFileHandler)
+    ee.on('list:jump', this.jumpNoteByHash)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -77,8 +80,8 @@ class NoteList extends React.Component {
     ee.off('list:prior', this.selectPriorNoteHandler)
     ee.off('list:focus', this.focusHandler)
     ee.off('list:isMarkdownNote', this.alertIfSnippetHandler)
-    ee.off('list:top', this.jumpToTopHandler)
-    ee.off('list:jumpToTop', this.jumpToTopHandler)
+    ee.off('import:file', this.importFromFileHandler)
+    ee.off('list:jump', this.jumpNoteByHash)
   }
 
   componentDidUpdate (prevProps) {
@@ -171,6 +174,31 @@ class NoteList extends React.Component {
     ee.emit('list:moved')
   }
 
+  jumpNoteByHashHandler (event, noteHash) {
+    // first argument event isn't used.
+    if (this.notes === null || this.notes.length === 0) {
+      return
+    }
+
+    const { router } = this.context
+    const { location } = this.props
+
+    let targetIndex = _.findIndex(this.notes, (note) => {
+      return note.storage + '-' + note.key === noteHash
+    })
+
+    if (targetIndex < 0) targetIndex = 0
+
+    router.push({
+      pathname: location.pathname,
+      query: {
+        key: this.notes[targetIndex].storage + '-' + this.notes[targetIndex].key
+      }
+    })
+
+    ee.emit('list:moved')
+  }
+
   handleNoteListKeyDown (e) {
     if (e.metaKey || e.ctrlKey) return true
 
@@ -202,6 +230,7 @@ class NoteList extends React.Component {
 
   getNotes () {
     let { data, params, location } = this.props
+    let { router } = this.context
 
     if (location.pathname.match(/\/home/)) {
       return data.noteMap.map((note) => note)
@@ -212,6 +241,19 @@ class NoteList extends React.Component {
         .map((uniqueKey) => data.noteMap.get(uniqueKey))
     }
 
+    if (location.pathname.match(/\/searched/)) {
+      const searchInputText = document.getElementsByClassName('searchInput')[0].value
+      if (searchInputText === '') {
+        router.push('/home')
+      }
+      return searchFromNotes(this.props.data, searchInputText)
+    }
+
+    if (location.pathname.match(/\/trashed/)) {
+      return data.trashedSet.toJS()
+        .map((uniqueKey) => data.noteMap.get(uniqueKey))
+    }
+
     let storageKey = params.storageKey
     let folderKey = params.folderKey
     let storage = data.storageMap.get(storageKey)
@@ -247,49 +289,6 @@ class NoteList extends React.Component {
     })
   }
 
-  handleNoteContextMenu (e, uniqueKey) {
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Delete Note',
-      click: (e) => this.handleDeleteNote(e, uniqueKey)
-    }))
-    menu.popup()
-  }
-
-  handleDeleteNote (e, uniqueKey) {
-    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
-      type: 'warning',
-      message: 'Delete a note',
-      detail: 'This work cannot be undone.',
-      buttons: ['Confirm', 'Cancel']
-    })
-    if (index === 0) {
-      let { dispatch, location } = this.props
-      let splitted = uniqueKey.split('-')
-      let storageKey = splitted.shift()
-      let noteKey = splitted.shift()
-
-      dataApi
-        .deleteNote(storageKey, noteKey)
-        .then((data) => {
-          let dispatchHandler = () => {
-            dispatch({
-              type: 'DELETE_NOTE',
-              storageKey: data.storageKey,
-              noteKey: data.noteKey
-            })
-          }
-
-          if (location.query.key === uniqueKey) {
-            ee.once('list:moved', dispatchHandler)
-            ee.emit('list:next')
-          } else {
-            dispatchHandler()
-          }
-        })
-    }
-  }
-
   handleSortByChange (e) {
     let { dispatch } = this.props
 
@@ -327,30 +326,64 @@ class NoteList extends React.Component {
       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']
       })
     }
   }
 
-  jumpToTop () {
-    if (this.notes === null || this.notes.length === 0) {
-      return
+  handleDragStart (e, note) {
+    const noteData = JSON.stringify(note)
+    e.dataTransfer.setData('note', noteData)
+  }
+
+  importFromFile () {
+    const { dispatch, location } = this.props
+
+    const options = {
+      filters: [
+        { name: 'Documents', extensions: ['md', 'txt'] }
+      ],
+      properties: ['openFile', 'multiSelections']
     }
-    let { router } = this.context
-    let { location } = this.props
 
-    const targetIndex = 0
+    const targetIndex = _.findIndex(this.notes, (note) => {
+      return note !== null && `${note.storage}-${note.key}` === location.query.key
+    })
 
-    router.push({
-      pathname: location.pathname,
-      query: {
-        key: this.notes[targetIndex].storage + '-' + this.notes[targetIndex].key
-      }
+    const storageKey = this.notes[targetIndex].storage
+    const folderKey = this.notes[targetIndex].folder
+
+    dialog.showOpenDialog(remote.getCurrentWindow(), options, (filepaths) => {
+      if (filepaths === undefined) return
+      filepaths.forEach((filepath) => {
+        fs.readFile(filepath, (err, data) => {
+          if (err) throw Error('File reading error: ', err)
+          const content = data.toString()
+          const newNote = {
+            content: content,
+            folder: folderKey,
+            title: markdown.strip(findNoteTitle(content)),
+            type: 'MARKDOWN_NOTE'
+          }
+          dataApi.createNote(storageKey, newNote)
+          .then((note) => {
+            dispatch({
+              type: 'UPDATE_NOTE',
+              note: note
+            })
+            hashHistory.push({
+              pathname: location.pathname,
+              query: {key: `${note.storage}-${note.key}`}
+            })
+          })
+        })
+      })
     })
   }
 
   render () {
-    let { location, notes, config } = this.props
+    let { location, notes, config, dispatch } = this.props
     let sortFunc = config.sortBy === 'CREATED_AT'
       ? sortByCreatedAt
       : config.sortBy === 'ALPHABETICAL'
@@ -358,6 +391,10 @@ class NoteList extends React.Component {
       : sortByUpdatedAt
     this.notes = notes = this.getNotes()
       .sort(sortFunc)
+      .filter((note) => {
+        // this is for the trash box
+        if (note.isTrashed !== true || location.pathname === '/trashed') return true
+      })
 
     let noteList = notes
       .map(note => {
@@ -381,7 +418,7 @@ class NoteList extends React.Component {
               dateDisplay={dateDisplay}
               key={key}
               handleNoteClick={this.handleNoteClick.bind(this)}
-              handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
+              handleDragStart={this.handleDragStart.bind(this)}
             />
           )
         }
@@ -392,7 +429,7 @@ class NoteList extends React.Component {
             note={note}
             key={key}
             handleNoteClick={this.handleNoteClick.bind(this)}
-            handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
+            handleDragStart={this.handleDragStart.bind(this)}
           />
         )
       })
@@ -414,22 +451,24 @@ class NoteList extends React.Component {
               <option value='ALPHABETICAL'>Alphabetical</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')}
+            >
+              <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>
         </div>
         <div styleName='list'
           ref='list'

browser/main/SideNav/SideNav.styl

@@ -1,7 +1,7 @@
 .root
   absolute top left bottom
   width $sideNav-width
-  background-color $ui-backgroundColor
+  background-color #f9f9f9
   user-select none
   color $ui-text-color
 

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
@@ -131,8 +132,54 @@ class StorageItem extends React.Component {
     }
   }
 
+  handleDragEnter (e) {
+    e.dataTransfer.setData('defaultColor', e.target.style.backgroundColor)
+    e.target.style.backgroundColor = 'rgba(129, 130, 131, 0.08)'
+  }
+
+  handleDragLeave (e) {
+    e.target.style.opacity = '1'
+    e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor')
+  }
+
+  handleDrop (e, storage, folder, dispatch, location) {
+    e.target.style.opacity = '1'
+    e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor')
+    const noteData = JSON.parse(e.dataTransfer.getData('note'))
+    const newNoteData = Object.assign({}, noteData, {storage: storage, folder: folder.key})
+    if (folder.key === noteData.folder) return
+    dataApi
+     .createNote(storage.key, newNoteData)
+     .then((note) => {
+       dataApi
+        .deleteNote(noteData.storage, noteData.key)
+        .then((data) => {
+          let dispatchHandler = () => {
+            dispatch({
+              type: 'DELETE_NOTE',
+              storageKey: data.storageKey,
+              noteKey: data.noteKey
+            })
+          }
+          eventEmitter.once('list:moved', dispatchHandler)
+          eventEmitter.emit('list:next')
+        })
+         .catch((err) => {
+           console.error(err)
+         })
+       dispatch({
+         type: 'UPDATE_NOTE',
+         note: note
+       })
+       hashHistory.push({
+         pathname: location.pathname,
+         query: {key: `${note.storage}-${note.key}`}
+       })
+     })
+  }
+
   render () {
-    let { storage, location, isFolded, data } = this.props
+    let { storage, location, isFolded, data, dispatch } = this.props
     let { folderNoteMap } = data
     let folderList = storage.folders.map((folder) => {
       let isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
@@ -151,6 +198,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}
         />
       )
     })

browser/main/SideNav/StorageItem.styl

@@ -1,15 +1,17 @@
 .root
   width 100%
   user-select none
+  padding-top 20px
 
 .header
   position relative
-  height 26px
+  height 25px
   width 100%
   margin-bottom 5px
   transition 0.15s
 
 .header--active
+  margin-bottom 5px
   background-color $ui-button--active-backgroundColor
   transition color background-color  0.15s
 
@@ -30,26 +32,29 @@
   position absolute
   left 0
   width 25px
-  height 26px
+  height 25px
   padding 0
   border none
+  border-radius 50%
   &:hover
-    background-color transparent
+    transition 0.2s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
 
 .header-info
   navButtonColor()
   display block
   width 100%
-  height 30px
-  padding-left 25px
+  height 25px
+  padding-left 23px
   padding-right 10px
-  line-height 26px
+  line-height 22px
   cursor pointer
   font-size 13px
   border none
   overflow ellipsis
   text-align left
+  background-color alpha($ui-button--active-backgroundColor, 20%)
 
 .header-info-path
   font-size 10px
@@ -60,11 +65,14 @@
   position absolute
   right 0
   width 25px
-  height 26px
+  height 25px
   padding 0
   border none
+  margin-right 5px
+  border-radius 50%
   &:hover
-    background-color transparent
+    transition 0.2s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
     color $ui-text-color
 
 .root--folded
@@ -117,10 +125,17 @@ body[data-theme="dark"]
 
   .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
@@ -129,4 +144,9 @@ body[data-theme="dark"]
 
   .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

@@ -33,12 +33,18 @@ class SideNav extends React.Component {
     })
   }
 
+  handleTrashedButtonClick (e) {
+    let { router } = this.context
+    router.push('/trashed')
+  }
+
   render () {
     let { data, location, config, dispatch } = this.props
 
     let isFolded = config.isSideNavFolded
     let isHomeActive = !!location.pathname.match(/^\/home$/)
     let isStarredActive = !!location.pathname.match(/^\/starred$/)
+    let isTrashedActive = !!location.pathname.match(/^\/trashed$/)
 
     let storageList = data.storageMap.map((storage, key) => {
       return <StorageItem
@@ -62,8 +68,8 @@ class SideNav extends React.Component {
           <button styleName='top-menu'
             onClick={(e) => this.handleMenuButtonClick(e)}
           >
-            <i className='fa fa-navicon fa-fw' />
-            <span styleName='top-menu-label'>Menu</span>
+            <i className='fa fa-wrench fa-fw' />
+            <span styleName='top-menu-label'>Preferences</span>
           </button>
         </div>
 
@@ -72,7 +78,9 @@ class SideNav extends React.Component {
           isHomeActive={isHomeActive}
           handleAllNotesButtonClick={(e) => this.handleHomeButtonClick(e)}
           isStarredActive={isStarredActive}
+          isTrashedActive={isTrashedActive}
           handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
+          handleTrashedButtonClick={(e) => this.handleTrashedButtonClick(e)}
         />
 
         <div styleName='storageList'>

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
@@ -68,8 +67,6 @@ class StatusBar extends React.Component {
             </button>
           : null
         }
-
-        <LastUpdatedString date={this.props.date} />
       </div>
     )
   }

browser/main/TopBar/TopBar.styl

@@ -19,26 +19,25 @@ $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 16px
+    padding-bottom 2px
     background-color $ui-noteList-backgroundColor
 
 .control-search-optionList
@@ -92,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
@@ -132,6 +129,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

browser/main/TopBar/index.js

@@ -9,6 +9,9 @@ import ee from 'browser/main/lib/eventEmitter'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import dataApi from 'browser/main/lib/dataApi'
 
+const { remote } = require('electron')
+const { dialog } = remote
+
 const OSX = window.process.platform === 'darwin'
 
 class TopBar extends React.Component {
@@ -18,7 +21,7 @@ class TopBar extends React.Component {
     this.state = {
       search: '',
       searchOptions: [],
-      searchPopupOpen: false
+      isSearching: false
     }
 
     this.newNoteHandler = () => {
@@ -41,7 +44,17 @@ class TopBar extends React.Component {
   }
 
   handleNewPostButtonClick (e) {
-    let { config } = this.props
+    let { config, location } = this.props
+
+    if (location.pathname === '/trashed') {
+      dialog.showMessageBox(remote.getCurrentWindow(), {
+        type: 'warning',
+        message: 'Cannot create new note',
+        detail: 'You cannot create new note in trash box.',
+        buttons: ['OK']
+      })
+      return
+    }
 
     switch (config.ui.defaultNote) {
       case 'MARKDOWN_NOTE':
@@ -87,79 +100,17 @@ class TopBar extends React.Component {
   }
 
   handleSearchChange (e) {
+    let { router } = this.context
+    router.push('/searched')
     this.setState({
       search: this.refs.searchInput.value
     })
   }
 
-  getOptions () {
-    let { data } = this.props
-    let { search } = this.state
-    let notes = data.noteMap.map((note) => note)
-    if (search.trim().length === 0) return []
-    let searchBlocks = search.split(' ')
-    searchBlocks.forEach((block) => {
-      if (block.match(/^!#.+/)) {
-        let tag = block.match(/^!#(.+)/)[1]
-        let regExp = new RegExp(_.escapeRegExp(tag), 'i')
-        notes = notes
-          .filter((note) => {
-            if (!_.isArray(note.tags)) return false
-            return note.tags.some((_tag) => {
-              return _tag.match(regExp)
-            })
-          })
-      } else if (block.match(/^!.+/)) {
-        let block = block.match(/^!(.+)/)[1]
-        let regExp = new RegExp(_.escapeRegExp(block), 'i')
-        notes = notes.filter((note) => {
-          if (!_.isArray(note.tags) || !note.tags.some((_tag) => {
-            return _tag.match(regExp)
-          })) {
-            return true
-          }
-          if (note.type === 'SNIPPET_NOTE') {
-            return !note.description.match(regExp)
-          } else if (note.type === 'MARKDOWN_NOTE') {
-            return !note.content.match(regExp)
-          }
-          return false
-        })
-      } else if (block.match(/^#.+/)) {
-        let tag = block.match(/#(.+)/)[1]
-        let regExp = new RegExp(_.escapeRegExp(tag), 'i')
-        notes = notes
-          .filter((note) => {
-            if (!_.isArray(note.tags)) return false
-            return note.tags.some((_tag) => {
-              return _tag.match(regExp)
-            })
-          })
-      } else {
-        let regExp = new RegExp(_.escapeRegExp(block), 'i')
-        notes = notes.filter((note) => {
-          if (_.isArray(note.tags) && note.tags.some((_tag) => {
-            return _tag.match(regExp)
-          })) {
-            return true
-          }
-          if (note.type === 'SNIPPET_NOTE') {
-            return note.description.match(regExp)
-          } else if (note.type === 'MARKDOWN_NOTE') {
-            return note.content.match(regExp)
-          }
-          return false
-        })
-      }
-    })
-
-    return notes
-  }
-
   handleOptionClick (uniqueKey) {
     return (e) => {
       this.setState({
-        searchPopupOpen: false
+        isSearching: false
       }, () => {
         let { location } = this.props
         hashHistory.push({
@@ -174,7 +125,7 @@ class TopBar extends React.Component {
 
   handleSearchFocus (e) {
     this.setState({
-      searchPopupOpen: true
+      isSearching: true
     })
   }
   handleSearchBlur (e) {
@@ -191,7 +142,7 @@ class TopBar extends React.Component {
     }
     if (!isStillFocused) {
       this.setState({
-        searchPopupOpen: false
+        isSearching: false
       })
     }
   }
@@ -251,7 +202,7 @@ class TopBar extends React.Component {
   }
 
   handleOnSearchFocus () {
-    if (this.state.searchPopupOpen) {
+    if (this.state.isSearching) {
       this.refs.search.childNodes[0].blur()
     } else {
       this.refs.search.childNodes[0].focus()
@@ -260,27 +211,6 @@ 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>
-      })
-
     return (
       <div className='TopBar'
         styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}
@@ -288,7 +218,6 @@ class TopBar extends React.Component {
       >
         <div styleName='control'>
           <div styleName='control-search'>
-            <i styleName='control-search-icon' className='fa fa-search fa-fw' />
             <div styleName='control-search-input'
               onFocus={(e) => this.handleSearchFocus(e)}
               onBlur={(e) => this.handleSearchBlur(e)}
@@ -301,15 +230,8 @@ class TopBar extends React.Component {
                 onChange={(e) => this.handleSearchChange(e)}
                 placeholder='Search'
                 type='text'
+                className='searchInput'
               />
-              {this.state.searchPopupOpen &&
-                <div styleName='control-search-optionList'>
-                  {searchOptionList.length > 0
-                    ? searchOptionList
-                    : <div styleName='control-search-optionList-empty'>Empty List</div>
-                  }
-                </div>
-              }
             </div>
             {this.state.search > 0 &&
               <button styleName='left-search-clearButton'
@@ -322,7 +244,7 @@ class TopBar extends React.Component {
           </div>
           <button styleName='control-newPostButton'
             onClick={(e) => this.handleNewPostButtonClick(e)}>
-            <i className='fa fa-plus' />
+            <i className='fa fa-pencil-square-o' />
             <span styleName='control-newPostButton-tooltip'>
               Make a Note {OSX ? '⌘' : '^'} + n
             </span>

browser/main/index.js

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

browser/main/lib/AwsMobileAnalyticsConfig.js

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

browser/main/lib/ConfigManager.js

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 
 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')
@@ -14,6 +15,7 @@ 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'
@@ -24,18 +26,18 @@ export const DEFAULT_CONFIG = {
     defaultNote: 'ALWAYS_ASK' // 'ALWAYS_ASK', 'SNIPPET_NOTE', 'MARKDOWN_NOTE'
   },
   editor: {
-    theme: 'default',
+    theme: 'base16-light',
     keyMap: 'sublime',
     fontSize: '14',
-    fontFamily: 'Monaco, Consolas',
+    fontFamily: win ? 'Segoe UI' : 'Monaco, Consolas',
     indentType: 'space',
     indentSize: '2',
     switchPreview: 'BLUR' // Available value: RIGHTCLICK, BLUR
   },
   preview: {
     fontSize: '14',
-    fontFamily: 'Lato',
-    codeBlockTheme: 'elegant',
+    fontFamily: win ? 'Segoe UI' : 'Lato',
+    codeBlockTheme: 'dracula',
     lineNumber: true
   }
 }

browser/main/lib/dataApi/copyImage.js

@@ -0,0 +1,36 @@
+const fs = require('fs')
+const path = require('path')
+const _ = require('lodash')
+const sander = require('sander')
+
+/**
+ * @description To copy an image and return the path.
+ * @param {String} filePath
+ * @param {String} storageKey
+ * @return {String} an image path
+ */
+function copyImage (filePath, storageKey) {
+  return new Promise((resolve, reject) => {
+    try {
+      const cachedStorageList = JSON.parse(localStorage.getItem('storages'))
+      if (!_.isArray(cachedStorageList)) throw new Error('Target storage doesn\'t exist.')
+      const storage = _.find(cachedStorageList, {key: storageKey})
+      if (storage === undefined) throw new Error('Target storage doesn\'t exist.')
+      const targetStorage = storage
+
+      const inputImage = fs.createReadStream(filePath)
+      const 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/createNote.js

@@ -10,6 +10,7 @@ function validateInput (input) {
   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':

browser/main/lib/dataApi/init.js

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

browser/main/lib/dataApi/resolveStorageNotes.js

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

browser/main/lib/dataApi/updateNote.js

@@ -21,6 +21,10 @@ function validateInput (input) {
     validatedInput.isStarred = !!input.isStarred
   }
 
+  if (input.isTrashed != null) {
+    validatedInput.isTrashed = !!input.isTrashed
+  }
+
   validatedInput.type = input.type
   switch (input.type) {
     case 'MARKDOWN_NOTE':
@@ -101,6 +105,7 @@ function updateNote (storageKey, noteKey, input) {
         noteData.createdAt = new Date()
         noteData.updatedAt = new Date()
         noteData.isStarred = false
+        noteData.isTrashed = false
         noteData.tags = []
       }
 

browser/main/lib/modal.js

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

browser/main/modals/CreateFolderModal.js

@@ -4,6 +4,8 @@ import styles from './CreateFolderModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import consts from 'browser/lib/consts'
+import ModalEscButton from 'browser/components/ModalEscButton'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 class CreateFolderModal extends React.Component {
   constructor (props) {
@@ -47,6 +49,7 @@ class CreateFolderModal extends React.Component {
   }
 
   confirm () {
+    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_FOLDER')
     if (this.state.name.trim().length > 0) {
       let { storage } = this.props
       let input = {
@@ -77,11 +80,7 @@ class CreateFolderModal extends React.Component {
         <div styleName='header'>
           <div styleName='title'>Create new folder</div>
         </div>
-        <button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}>
-          <div styleName='close-mark'>×</div>
-          <div styleName='close-text'>esc</div>
-        </button>
-
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
         <div styleName='control'>
           <div styleName='control-folder'>
             <div styleName='control-folder-label'>Folder name</div>

browser/main/modals/CreateFolderModal.styl

@@ -15,21 +15,6 @@
   background-color $ui-backgroundColor
   color $ui-text-color
 
-.close-mark
-  font-size 15px
-
-.close
-  height 70px
-  position absolute
-  background-color transparent
-  color $ui-inactive-text-color
-  border none
-  top 7px
-  right 30px
-  text-align center
-  width top-bar--height
-  height top-bar--height
-
 .control-folder-label
   text-align left
   font-size 12px
@@ -85,12 +70,7 @@ body[data-theme="dark"]
     border 1px solid #C9C9C9 // TODO: use variable.
     color white
 
-  .closeButton
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-    colorDarkDefaultButton()
-
-  .description
+   .description
     color $ui-inactive-text-color
 
   .control-confirmButton

browser/main/modals/InitModal.js

@@ -5,6 +5,7 @@ import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import { hashHistory } from 'react-router'
 import _ from 'lodash'
+import ModalEscButton from 'browser/components/ModalEscButton'
 
 const CSON = require('@rokt33r/season')
 const path = require('path')
@@ -102,7 +103,7 @@ class InitModal extends React.Component {
           } else {
             return dataApi
               .createFolder(data.storage.key, {
-                color: '#6AA5E9',
+                color: '#1278BD',
                 name: 'Default'
               })
               .then((_data) => {
@@ -121,19 +122,6 @@ class InitModal extends React.Component {
             notes: data.notes
           })
 
-          let defaultMarkdownNote = dataApi
-            .createNote(data.storage.key, {
-              type: 'MARKDOWN_NOTE',
-              folder: data.storage.folders[0].key,
-              title: 'Welcome to Boostnote :)',
-              content: '# Welcome to Boostnote :)\nThis is a markdown note.\n\nClick to edit this note.'
-            })
-            .then((note) => {
-              store.dispatch({
-                type: 'UPDATE_NOTE',
-                note: note
-              })
-            })
           let defaultSnippetNote = dataApi
             .createNote(data.storage.key, {
               type: 'SNIPPET_NOTE',
@@ -144,12 +132,12 @@ class InitModal extends React.Component {
                 {
                   name: 'example.html',
                   mode: 'html',
-                  content: '<html>\n<body>\n<h1 id=\'hello\'>Hello World</h1>\n</body>\n</html>'
+                  content: '<html>\n<body>\n<h1 id=\'hello\'>Enjoy Boostnote!</h1>\n</body>\n</html>'
                 },
                 {
                   name: 'example.js',
                   mode: 'javascript',
-                  content: 'var html = document.getElementById(\'hello\').innerHTML\n\nconsole.log(html)'
+                  content: 'var boostnote = document.getElementById(\'enjoy\').innerHTML\n\nconsole.log(boostnote)'
                 }
               ]
             })
@@ -159,6 +147,19 @@ class InitModal extends React.Component {
                 note: note
               })
             })
+          let defaultMarkdownNote = dataApi
+            .createNote(data.storage.key, {
+              type: 'MARKDOWN_NOTE',
+              folder: data.storage.folders[0].key,
+              title: 'Welcome to Boostnote!',
+              content: '# Welcome to Boostnote! \n### _Click to edit this note._\n\n---\n\nBoostnote is an *open source* note-taking app. \nRepository is published on [GitHub](https://github.com/BoostIO/Boostnote), and tweeting everyday on [@Boostnoteapp](https://twitter.com/boostnoteapp)!\n\n## Features \n- [x] No Internet and Registration Required. \n- [ ] Quick search and copy the content of note. `macOS: Cmd + Alt + S / windows: Ctrl + Alt + S` \n- [ ] Markdown & Snippet note. \n- [ ] Available for `vim` and `emacs` mode. \n- [ ] Choose your favorite theme on UI, Editor and Code Block! \n--- \n\n- Copy Codeblock on Makrdown Preview.\n```javascript\nvar boostnote = document.getElementById(\'enjoy\').innerHTML\n\nconsole.log(boostnote)\n```'
+            })
+            .then((note) => {
+              store.dispatch({
+                type: 'UPDATE_NOTE',
+                note: note
+              })
+            })
 
           return Promise.resolve(defaultSnippetNote)
             .then(defaultMarkdownNote)
@@ -199,6 +200,7 @@ class InitModal extends React.Component {
         <div styleName='header'>
           <div styleName='header-title'>Initialize Storage</div>
         </div>
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
         <div styleName='body'>
           <div styleName='body-welcome'>
             Welcome!

browser/main/modals/InitModal.styl

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

browser/main/modals/NewNoteModal.js

@@ -4,6 +4,8 @@ import styles from './NewNoteModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
+import ModalEscButton from 'browser/components/ModalEscButton'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 class NewNoteModal extends React.Component {
   constructor (props) {
@@ -22,6 +24,8 @@ class NewNoteModal extends React.Component {
   }
 
   handleMarkdownNoteButtonClick (e) {
+    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_MARKDOWN')
+    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
     let { storage, folder, dispatch, location } = this.props
     dataApi
       .createNote(storage, {
@@ -52,6 +56,8 @@ class NewNoteModal extends React.Component {
   }
 
   handleSnippetNoteButtonClick (e) {
+    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_SNIPPET')
+    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
     let { storage, folder, dispatch, location } = this.props
 
     dataApi
@@ -102,11 +108,7 @@ class NewNoteModal extends React.Component {
         <div styleName='header'>
           <div styleName='title'>Make a Note</div>
         </div>
-        <button styleName='closeButton' onClick={(e) => this.handleCloseButtonClick(e)}>
-          <div styleName='close-mark'>×</div>
-          <div styleName='close-text'>esc</div>
-        </button>
-
+        <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
         <div styleName='control'>
           <button styleName='control-button'
             onClick={(e) => this.handleMarkdownNoteButtonClick(e)}
@@ -117,7 +119,7 @@ class NewNoteModal extends React.Component {
               className='fa fa-file-text-o'
             /><br />
             <span styleName='control-button-label'>Markdown Note</span><br />
-            <span styleName='control-button-description'>It is good for any type of documents. Check List, Code block and Latex block are available.</span>
+            <span styleName='control-button-description'>This format is for creating text documents. Checklists, code blocks and Latex blocks are available.</span>
           </button>
 
           <button styleName='control-button'
@@ -129,7 +131,7 @@ class NewNoteModal extends React.Component {
               className='fa fa-code'
             /><br />
             <span styleName='control-button-label'>Snippet Note</span><br />
-            <span styleName='control-button-description'>This format is specialized on managing snippets like Gist. Multiple snippets can be grouped as a note.
+            <span styleName='control-button-description'>This format is for creating code snippets. Multiple snippets can be grouped into a single note.
             </span>
           </button>
 

browser/main/modals/NewNoteModal.styl

@@ -13,25 +13,10 @@
   border-bottom solid 1px $ui-borderColor
   color $ui-text-color
 
-.closeButton
-  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
-
 .control
   padding 25px 15px 15px
   text-align center
 
-.close-mark
-  font-size 15px
-
 .control-button
   width 220px
   height 220px

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -139,6 +139,7 @@ class HotkeyTab extends React.Component {
                 <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
                 <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
                 <li><code>Control</code> (or <code>Ctrl</code> for short)</li>
+                <li><code>Shift</code></li>
               </ul>
             </div>
           }

browser/main/modals/PreferencesModal/InfoTab.js

@@ -1,6 +1,9 @@
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoTab.styl'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import store from 'browser/main/store'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 const electron = require('electron')
 const { shell, remote } = electron
@@ -11,6 +14,7 @@ class InfoTab extends React.Component {
     super(props)
 
     this.state = {
+      config: this.props.config
     }
   }
 
@@ -19,6 +23,28 @@ class InfoTab extends React.Component {
     e.preventDefault()
   }
 
+  handleConfigChange (e) {
+    const newConfig = { amaEnabled: this.refs.amaEnabled.checked }
+
+    this.setState({ config: newConfig })
+  }
+
+  handleSaveButtonClick (e) {
+    let newConfig = {
+      amaEnabled: this.state.config.amaEnabled
+    }
+
+    ConfigManager.set(newConfig)
+
+    store.dispatch({
+      type: 'SET_CONFIG',
+      config: newConfig
+    })
+    if (!newConfig.amaEnabled) {
+      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('DISABLE_AMA')
+    }
+  }
+
   render () {
     return (
       <div styleName='root'>
@@ -47,9 +73,9 @@ class InfoTab extends React.Component {
             >Boostnote Shop</a> : Products are shipped to all over the world 🌏
           </li>
           <li>
-            <a href='https://www.patreon.com/boostnote'
+            <a href='https://salt.bountysource.com/teams/boostnote'
               onClick={(e) => this.handleLinkClick(e)}
-            >Donate via Patreon</a> : Thank you for your support 🎉
+            >Donate via Bountysource</a> : Thank you for your support 🎉
           </li>
           <li>
             <a href='https://github.com/BoostIO/Boostnote/issues'
@@ -68,6 +94,18 @@ class InfoTab extends React.Component {
             License: GPL v3
           </li>
         </ul>
+        <hr />
+        <div styleName='policy'>Data collection policy</div>
+        <p>We collect only the number of DAU for Boostnote and DO NOT collect any detail information</p>
+        <p>such as your note content. You can see how it works on <a href='https://github.com/BoostIO/Boostnote' onClick={(e) => this.handleLinkClick(e)}>GitHub</a>.</p>
+        <p>These data are only used for Boostnote improvements.</p>
+        <input onChange={(e) => this.handleConfigChange(e)}
+          checked={this.state.config.amaEnabled}
+          ref='amaEnabled'
+          type='checkbox'
+        />
+        Enable to send analytics to our servers<br />
+        <button styleName='policy-submit' onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
       </div>
     )
   }

browser/main/modals/PreferencesModal/InfoTab.styl

@@ -42,6 +42,13 @@
     color #4E8EC6
     text-decoration none
 
+.policy
+  font-size 20px
+  margin-bottom 10px
+
+.policy-submit
+  margin-top 10px
+
 body[data-theme="dark"]
   .root
     color alpha($tab--dark-text-color, 80%)

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -20,17 +20,6 @@ top-bar--height = 50px
     font-size 18px
     line-height top-bar--height
 
-.top-bar-close
-  position absolute
-  background-color transparent
-  color $ui-inactive-text-color
-  border none
-  top 0
-  right 0
-  text-align center
-  width top-bar--height
-  height top-bar--height
-
 .nav
   absolute top left right
   top top-bar--height

browser/main/modals/PreferencesModal/UiTab.js

@@ -216,6 +216,7 @@ class UiTab extends React.Component {
               >
                 <option value='sublime'>default</option>
                 <option value='vim'>vim</option>
+                <option value='emacs'>emacs</option>
               </select>
               <span styleName='note-for-keymap'>Please reload boostnote after you change the keymap</span>
             </div>

browser/main/modals/PreferencesModal/index.js

@@ -5,6 +5,7 @@ import HotkeyTab from './HotkeyTab'
 import UiTab from './UiTab'
 import InfoTab from './InfoTab'
 import StoragesTab from './StoragesTab'
+import ModalEscButton from 'browser/components/ModalEscButton'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './PreferencesModal.styl'
 
@@ -43,7 +44,12 @@ class Preferences extends React.Component {
 
     switch (this.state.currentTab) {
       case 'INFO':
-        return <InfoTab />
+        return (
+          <InfoTab
+            dispatch={dispatch}
+            config={config}
+          />
+        )
       case 'HOTKEY':
         return (
           <HotkeyTab
@@ -115,12 +121,9 @@ class Preferences extends React.Component {
         onKeyDown={(e) => this.handleKeyDown(e)}
       >
         <div styleName='top-bar'>
-          <p>Your menu for Boostnote</p>
+          <p>Your preferences for Boostnote</p>
         </div>
-        <button styleName='top-bar-close' onClick={(e) => this.handleEscButtonClick(e)}>
-          <div styleName='top-bar-close-mark'>×</div>
-          <div styleName='top-bar-close-text'>esc</div>
-        </button>
+        <ModalEscButton handleEscButtonClick={(e) => this.handleEscButtonClick(e)} />
         <div styleName='nav'>
           {navButtons}
         </div>

browser/main/modals/RenameFolderModal.js

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

browser/main/modals/RenameFolderModal.styl

@@ -13,17 +13,6 @@
   border-bottom solid 1px $ui-borderColor
   color $ui-text-color
 
-.closeButton
-  position absolute
-  top 10px
-  right 10px
-  height 30px
-  width 0 25px
-  border $ui-border
-  border-radius 2px
-  color $ui-text-color
-  colorDefaultButton()
-
 .control
   padding 25px 15px 15px
   text-align center
@@ -65,12 +54,7 @@ body[data-theme="dark"]
     border-color $ui-dark-borderColor
     color $ui-dark-text-color
 
-  .closeButton
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-    colorDarkDefaultButton()
-
-  .description
+   .description
     color $ui-inactive-text-color
 
   .control-input

browser/main/store.js

@@ -11,7 +11,8 @@ function defaultDataMap () {
     starredSet: new Set(),
     storageNoteMap: new Map(),
     folderNoteMap: new Map(),
-    tagNoteMap: new Map()
+    tagNoteMap: new Map(),
+    trashedSet: new Set()
   }
 }
 
@@ -24,7 +25,8 @@ function data (state = defaultDataMap(), action) {
         state.storageMap.set(storage.key, storage)
       })
 
-      action.notes.forEach((note) => {
+      action.notes.some((note) => {
+        if (note === undefined) return true
         let uniqueKey = note.storage + '-' + note.key
         let folderKey = note.storage + '-' + note.folder
         state.noteMap.set(uniqueKey, note)
@@ -33,6 +35,10 @@ function data (state = defaultDataMap(), action) {
           state.starredSet.add(uniqueKey)
         }
 
+        if (note.isTrashed) {
+          state.trashedSet.add(uniqueKey)
+        }
+
         let storageNoteList = state.storageNoteMap.get(note.storage)
         if (storageNoteList == null) {
           storageNoteList = new Set(storageNoteList)
@@ -77,6 +83,15 @@ function data (state = defaultDataMap(), action) {
           }
         }
 
+        if (oldNote == null || oldNote.isTrashed !== note.isTrashed) {
+          state.trashedSet = new Set(state.trashedSet)
+          if (note.isTrashed) {
+            state.trashedSet.add(uniqueKey)
+          } else {
+            state.trashedSet.delete(uniqueKey)
+          }
+        }
+
         // Update storageNoteMap if oldNote doesn't exist
         if (oldNote == null) {
           state.storageNoteMap = new Map(state.storageNoteMap)
@@ -162,6 +177,11 @@ function data (state = defaultDataMap(), action) {
             state.starredSet.delete(originKey)
           }
 
+          if (originNote.isTrashed) {
+            state.trashedSet = new Set(state.trashedSet)
+            state.trashedSet.delete(originKey)
+          }
+
           // From storageNoteMap
           state.storageNoteMap = new Map(state.storageNoteMap)
           let noteSet = state.storageNoteMap.get(originNote.storage)
@@ -198,6 +218,15 @@ function data (state = defaultDataMap(), action) {
           }
         }
 
+        if (oldNote == null || oldNote.isTrashed !== note.isTrashed) {
+          state.trashedSet = new Set(state.trashedSet)
+          if (note.isTrashed) {
+            state.trashedSet.add(uniqueKey)
+          } else {
+            state.trashedSet.delete(uniqueKey)
+          }
+        }
+
         // Update storageNoteMap if oldNote doesn't exist
         if (oldNote == null) {
           state.storageNoteMap = new Map(state.storageNoteMap)
@@ -282,6 +311,11 @@ function data (state = defaultDataMap(), action) {
             state.starredSet.delete(uniqueKey)
           }
 
+          if (targetNote.isTrashed) {
+            state.trashedSet = new Set(state.trashedSet)
+            state.trashedSet.delete(uniqueKey)
+          }
+
           // From folderNoteMap
           let folderKey = targetNote.storage + '-' + targetNote.folder
           state.folderNoteMap = new Map(state.folderNoteMap)
@@ -347,6 +381,11 @@ function data (state = defaultDataMap(), action) {
                 state.starredSet.delete(noteKey)
               }
 
+              if (note.isTrashed) {
+                state.trashedSet = new Set(state.trashedSet)
+                state.trashedSet.delete(noteKey)
+              }
+
               // Delete key from tag map
               state.tagNoteMap = new Map(state.tagNoteMap)
               note.tags.forEach((tag) => {

browser/styles/index.styl

@@ -160,8 +160,7 @@ topBarButtonLight()
   height 34px
   border-radius 17px
   font-size 14px
-  margin 13px 7px
-  padding-top 7px
+  margin 15px 7px
   border none
   color $ui-button-color
   fill $ui-button-color
@@ -169,20 +168,20 @@ topBarButtonLight()
   &:active
     border-color $ui-button--active-backgroundColor
   &:hover
-    background-color $ui-button--hover-backgroundColor
+    background-color alpha($ui-button--hover-backgroundColor, 60%)
     .control-lockButton-tooltip
       opacity 1
 
 // Dark theme
 $ui-dark-active-color = #3A404C
 $ui-dark-borderColor = lighten(#21252B, 20%)
-$ui-dark-backgroundColor = #1D1D1D
-$ui-dark-noteList-backgroundColor = #181818
-$ui-dark-noteDetail-backgroundColor = #0D0D0D
+$ui-dark-backgroundColor = #1E2124
+$ui-dark-noteList-backgroundColor = #282C30
+$ui-dark-noteDetail-backgroundColor = #2D3033
 $ui-dark-tag-backgroundColor = #3A404C
 $dark-background-color = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-text-color = #DDDDDD
-$ui-dark-button--active-color = white
+$ui-dark-button--active-color = #f4f4f4
 $ui-dark-button--active-backgroundColor = #3A404C
 $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)
@@ -232,10 +231,12 @@ topBarButtonDark()
   color $ui-dark-topbar-button-color
   &:hover
     background-color $dark-default-button-background--hover
+    color $ui-dark-tooltip-text-color
   &:active
     border-color $ui-dark-button--focus-borderColor
   &:active:hover
     background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-tooltip-text-color
   &:focus
     border-color $ui-button--focus-borderColor
 

contributing.md

@@ -1,33 +1,69 @@
-# Contributing to Boostnote
+# Contributing to Boostnote (English)
 
-## When you open an issue of a bug report
+### When you open an issue of a bug report
 There are no issue template. But there is a request.
 
 **Please paste screenshots of Boostnote with developer tool open**
 
 Thank you for your help in advance.
 
-## About copyright of Pull Request
+### About copyright of Pull Request
 
-If you make a pull request, It means you agree to transfer the copyright of the code changes to MAISIN&CO.
+If you make a pull request, It means you agree to transfer the copyright of the code changes to Maisin&Co.
 
 It doesn't mean Boostnote will become a paid app. If we want to earn some money, We will try other way, which is some kind of cloud storage, Mobile app integration or some SPECIAL features.
 Because GPL v3 is too strict to be compatible with any other License, We thought this is needed to replace the license with much freer one(like BSD, MIT) somewhen.
 
 ---
 
-# Contributing to Boostnote(Japanese)
+# Contributing to Boostnote (Russian)
 
-## バグレポートに関してのissueを立てる時
+### Когда у вас появляется сообщение об ошибке
+У нас нет шаблона, по которому вы должны описать ошибку. Просто расскажите, как вы получили ее
+
+**Вставьте скриншот Boostnote с открытым инструментом разработчика (dev tools)**
+
+Благодарим Вас за помощь!
+
+### Об авторских правах Pull Request
+
+Если вы делаете pull request, значит вы согласны передать авторские права на изменения кода в Maisin&Co.
+
+Это не означает, что Boostnote станет платным приложением. Если мы захотим заработать немного денег, мы найдем другой способ. Например, использование облачного хранилища, интеграцией мобильных приложений или другими специальными функциями.
+Так как лицензия GPL v3 слишком строгая, чтобы быть совместимой с любой другой лицензией, мы думаем, что нужно заменить лицензию на более свободную (например, BSD, MIT).
+
+---
+
+# Contributing to Boostnote (Korean)
+
+### 버그 리포트를 보고할 때
+이슈의 양식은 없습니다. 하지만 부탁이 있습니다.
+
+**개발자 도구를 연 상태의 Boostnote 스크린샷을 첨부해주세요**
+
+도움을 주셔서 감사합니다.
+
+### Pull Request의 저작권에 관하여
+
+당신이 pull request를 요청하면, 코드 변경에 대한 저작권을 Maisin&Co에 양도한다는 것에 동의한다는 의미입니다.
+
+이것은 Boostnote가 유료화가 되는 것을 의미하는 건 아닙니다. 만약 우리가 자금이 필요하다면, 우리는 클라우드 연동, 모바일 앱 통합 혹은 특수한 기능 같은 것을 사용해 수입 창출을 시도할 것입니다.
+GPL v3 라이센스는 다른 라이센스와 혼합해 사용하기엔 너무 엄격하므로, 우리는 BSD, MIT 라이센스와 같은 더 자유로운 라이센스로 교체하는 것을 생각하고 있습니다.
+
+---
+
+# Contributing to Boostnote (Japanese)
+
+### バグレポートに関してのissueを立てる時
 イシューテンプレートはありませんが、1つお願いがあります。
 
 **開発者ツールを開いた状態のBoostnoteのスクリーンショットを貼ってください**
 
 よろしくお願いします。
 
-## Pull requestの著作権について
+### Pull requestの著作権について
 
-Pull requestをすることはその変化分のコードの著作権をMAISIN&CO.に譲渡することに同意することになります。
+Pull requestをすることはその変化分のコードの著作権をMaisin&Co.に譲渡することに同意することになります。
 
 アプリケーションのLicenseをいつでも変える選択肢を残したいと思うからです。
 これはいずれかBoostnoteが有料の商用アプリになる可能性がある話ではありません。

docs/build.md

@@ -1,5 +1,11 @@
 # Build
 
+## Environments
+* npm: 4.x
+* node: 7.x
+
+You should use `npm v4.x` because `$ grand pre-build` fails on `v5.x`.
+
 ## Development
 
 We use Webpack HMR to develop Boostnote.

docs/ru/build.md

@@ -0,0 +1,57 @@
+# Сборка
+
+## Используемые инструменты
+* npm: 4.x
+* node: 7.x
+
+Вы должны использовать `npm v4.x`, так как `$ grand pre-build` не работает в `v5.x`.
+
+## Разработка
+
+Мы используем Webpack HMR при разработке Boostnote.
+Выполнение следующих команд в корне проекта запустит Boostnote с настройками по умолчанию.
+
+Установите необходимые пакеты с помощью yarn.
+
+```
+$ yarn
+```
+
+Соберите и запустите.
+
+```
+$ yarn run dev-start
+```
+
+Эта команда выполняет `yarn run webpack` и `yarn run hot` параллельно. Результат будет такой же, если вы выполните эти две команды раздельно.
+
+`Webpack` будет следить за изменениями в коде и будет применять их автоматически.
+
+Если возникает следующая ошибка: `Failed to load resource: net::ERR_CONNECTION_REFUSED`, пожалуйста, перезапустите Boostnote.
+
+![net::ERR_CONNECTION_REFUSED](https://cloud.githubusercontent.com/assets/11307908/24343004/081e66ae-1279-11e7-8d9e-7f478043d835.png)
+
+> ### Примечание
+> В некоторых случаях вам необходимо обновить приложение вручную.
+> 1. При редактировании метода конструктора компонента
+> 2. При добавлении нового класса CSS (аналогично 1: Класс CSS перезаписывается каждым компонентом. Этот процесс выполняется в методе Constructor.)
+
+## Деплой
+
+Мы используем Grunt для автоматического деплоя.
+Вы можете создать задачу, используя `grunt`. Однако мы не рекомендуем этого делать, так как задача по умолчанию включает в себя код и аутентификацию.
+
+Мы подготовили отдельный скрипт, который просто создает исполняемый файл:
+
+```
+grunt pre-build
+```
+
+Вы найдете исполняемый файл в папке `dist`. Обратите внимание: автоматическое обновление не будет работать, потому что приложение не подписано.
+
+Если вам необходимо, вы можете использовать код или аутентификацию с помощью этого исполняемого файла.
+
+---
+
+Special thanks:
+Translated by @AlexanderBelkevich

docs/ru/debug.md

@@ -0,0 +1,25 @@
+# Как отладить Boostnote (приложение Electron)
+Boostnote - это программа, сделанная с помощью Electron, поэтому она базируется на Chromium. Разработчики могут использовать `Developer Tools` в Google Chrome для отладки.
+
+Вы можете переключиться в `Developer Tools` следующим образом:
+![how_to_toggle_devTools](https://cloud.githubusercontent.com/assets/11307908/24343585/162187e2-127c-11e7-9c01-23578db03ecf.png)
+
+`Developer Tools` будет выглядеть следующим образом:
+![Developer_Tools](https://cloud.githubusercontent.com/assets/11307908/24343545/eff9f3a6-127b-11e7-94cf-cb67bfda634a.png)
+
+Возможные ошибки отображаются во вкладке `console`.
+
+## Отладка
+Например, вы можете использовать `debugger`, чтобы установить точку остановы следующим образом:
+
+![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png)
+
+Это всего лишь пример. Вы можете использовать любой свой способ отладки. Тот, который вам будет удобен.
+
+## Рекомендации
+* [Официальная документация Google Chrome об отладке](https://developer.chrome.com/devtools)
+
+---
+
+Special thanks:
+Translated by @AlexanderBelkevich

gruntfile.js

@@ -259,6 +259,8 @@ module.exports = function (grunt) {
       case 'osx':
         grunt.task.run(['compile', 'pack:osx'])
         break
+      case 'linux':
+        grunt.task.run(['compile', 'pack:linux'])
     }
   })
 

lib/finder.html

@@ -32,6 +32,7 @@
   <script src="../node_modules/codemirror/addon/mode/loadmode.js"></script>
   <script src="../node_modules/codemirror/keymap/sublime.js"></script>
   <script src="../node_modules/codemirror/keymap/vim.js"></script>
+  <script src="../node_modules/codemirror/keymap/emacs.js"></script>
   <script src="../node_modules/codemirror/addon/runmode/runmode.js"></script>
 
   <script src="../node_modules/raphael/raphael.min.js"></script>

lib/main-menu.js

@@ -92,6 +92,20 @@ const file = {
     {
       type: 'separator'
     },
+    {
+      label: 'Import from',
+      submenu: [
+        {
+          label: 'Plain Text, MarkDown (.txt, .md)',
+          click () {
+            mainWindow.webContents.send('import:file')
+          }
+        }
+      ]
+    },
+    {
+      type: 'separator'
+    },
     {
       label: 'Delete Note',
       accelerator: macOS ? 'Control+Backspace' : 'Control+Delete',
@@ -178,18 +192,11 @@ const view = {
     },
     {
       label: 'Previous Note',
-      accelerator: 'Control+U',
+      accelerator: 'Control+K',
       click () {
         mainWindow.webContents.send('list:prior')
       }
     },
-    {
-      label: 'Jump to Top',
-      accelerator: 'Control+G',
-      click () {
-        mainWindow.webContents.send('list:jumpToTop')
-      }
-    },
     {
       type: 'separator'
     },

lib/main.html

@@ -7,6 +7,7 @@
   <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
   <link rel="shortcut icon" href="../resources/favicon.ico">
   <link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
+  <link rel="stylesheet" href="../node_modules/codemirror/addon/dialog/dialog.css">
   <title>Boostnote</title>
 
   <style>
@@ -59,10 +60,18 @@
   <script src="../node_modules/codemirror/addon/mode/loadmode.js"></script>
   <script src="../node_modules/codemirror/keymap/sublime.js"></script>
   <script src="../node_modules/codemirror/keymap/vim.js"></script>
+  <script src="../node_modules/codemirror/keymap/emacs.js"></script>
   <script src="../node_modules/codemirror/addon/runmode/runmode.js"></script>
 
   <script src="../node_modules/codemirror/addon/edit/continuelist.js"></script>
 
+  <script src="../node_modules/codemirror/addon/search/search.js"></script>
+  <script src="../node_modules/codemirror/addon/search/searchcursor.js"></script>
+  <script src="../node_modules/codemirror/addon/scroll/annotatescrollbar.js"></script>
+  <script src="../node_modules/codemirror/addon/search/matchesonscrollbar.js"></script>
+  <script src="../node_modules/codemirror/addon/search/jump-to-line.js"></script>
+  <script src="../node_modules/codemirror/addon/dialog/dialog.js"></script>
+
   <script src="../node_modules/raphael/raphael.min.js"></script>
   <script src="../node_modules/flowchart.js/release/flowchart.min.js"></script>
   <script>
@@ -86,5 +95,10 @@
     scriptEl.setAttribute('src', scriptUrl)
     document.body.appendChild(scriptEl)
   </script>
+  <style>
+    .ace_search {
+      background-color: #d9d9d9;
+    }
+  </style>
 </body>
 </html>

package.json

@@ -1,8 +1,8 @@
 {
   "name": "boost",
-  "version": "0.8.8",
-  "description": "Boostnote",
+  "version": "0.8.12",
   "main": "index.js",
+  "description": "Boostnote",
   "license": "GPL-3.0",
   "scripts": {
     "start": "electron ./index.js",
@@ -49,6 +49,8 @@
   "dependencies": {
     "@rokt33r/markdown-it-math": "^4.0.1",
     "@rokt33r/season": "^5.3.0",
+    "aws-sdk": "^2.48.0",
+    "aws-sdk-mobile-analytics": "^0.9.2",
     "codemirror": "^5.19.0",
     "electron-config": "^0.2.1",
     "electron-gh-releases": "^2.0.2",
@@ -62,6 +64,7 @@
     "markdown-it-checkbox": "^1.1.0",
     "markdown-it-emoji": "^1.1.1",
     "markdown-it-footnote": "^3.0.0",
+    "markdown-it-imsize": "^2.0.1",
     "md5": "^2.0.0",
     "mixpanel": "^0.4.1",
     "moment": "^2.10.3",
@@ -87,6 +90,7 @@
     "babel-preset-react-hmre": "^1.0.1",
     "babel-register": "^6.11.6",
     "concurrently": "^3.4.0",
+    "copy-to-clipboard": "^3.0.6",
     "css-loader": "^0.19.0",
     "devtron": "^1.1.0",
     "dom-storage": "^2.0.2",
@@ -100,6 +104,7 @@
     "grunt-electron-installer": "^1.2.0",
     "history": "^1.17.0",
     "jsdom": "^9.4.2",
+    "json-loader": "^0.5.4",
     "merge-stream": "^1.0.0",
     "nib": "^1.1.0",
     "react-color": "^2.2.2",

readme-ja.md

@@ -1,40 +0,0 @@
-<h1 align="center">
-  <a href="https://github.com/BoostIO/Boostnote"><img src="./resources/app.png" alt="Boostnote" width="180"></a>
-  <br>
-  Boostnote
-  <br>
-  <br>
-</h1>
-<h4 align="center">クールなプログラマーの為の、オープンソースのノートアプリ </h4>
-<h5 align="center">macOS, Windows, Linuxで利用できます。</h5>
-<h5 align="center">Built with Electron, React + Redux, Webpack and CSSModules</h5>
-
-![Boostnote app screenshot](./resources/repository/top.png)
-
-[![Build Status](https://travis-ci.org/BoostIO/Boostnote.svg?branch=master)](https://travis-ci.org/BoostIO/Boostnote)
-
-## Author & Maintainer
-- [Rokt33r](https://github.com/rokt33r)
-- [sota1235](https://github.com/sota1235)
-- [Kohei TAKATA](https://github.com/kohei-takata)
-- [asmsuechan](https://github.com/asmsuechan)
-- [Kazu Yokomizo](https://github.com/kazup01)
-
-## Contributors
-[Great contributors](https://github.com/BoostIO/Boostnote/graphs/contributors) :tada:
-
-## slack group
-私たちにはslack groupもあります！世界中のプログラマー達と、Boostnoteについてディスカッションをしましょう！ <br>
-[こちらから](https://boostnote-group.slack.com/shared_invite/MTcxMjIwODk5Mzk3LTE0OTI1NjQxNDUtMTkwZTBjOWFkMg)
-
-## More Information
-* Website: http://boostnote.io/
-* Roadmap(upcoming features and bug fixes): https://github.com/BoostIO/Boostnote/wiki/List-of-the-requested-features
-* Boostnote Shop(Products are shipped to all over the world :+1:): https://boostnote.paintory.com/
-* Donation: [Patreon](https://www.patreon.com/boostnote)
-* Development: https://github.com/BoostIO/Boostnote/blob/master/docs/build.md
-* Copyright (C) 2017 Maisin&Co.
-
-## License
-
-[GPL v3](./LICENSE).

readme.md

@@ -6,7 +6,7 @@
   <br>
 </h1>
 <h4 align="center">Note-taking app for programmers. </h4>
-<h5 align="center">macOS, Windows and Linux</h5>
+<h5 align="center">macOS, Windows and Linux. Android and iOS apps will be released soon!</h5>
 <h5 align="center">Built with Electron, React + Redux, Webpack and CSSModules</h5>
 
 ![Boostnote app screenshot](./resources/repository/top.png)
@@ -25,13 +25,12 @@
 
 ## Slack Group
 Let's talk about Boostnote's great features, new feature requests and things like Japanese gourmet. 🍣 <br>
-[Join us](https://boostnote-group.slack.com/shared_invite/MTcxMjIwODk5Mzk3LTE0OTI1NjQxNDUtMTkwZTBjOWFkMg)
+[Join us](https://join.slack.com/t/boostnote-group/shared_invite/MjE3NDcwODQ3NTkwLTE1MDA4NjQ3ODktM2IxOTk4ZTNjYQ)
 
 ## More Information
 * [Website](https://boostnote.io)
-* [Boostnote Shop](https://boostnote.paintory.com/) : Products are shipped to all over the world 🌏
-* [Donate via Patreon](https://www.patreon.com/boostnote) : Thank you for your support 🎉
-* [GitHub Issues](https://github.com/BoostIO/Boostnote/issues) : We'd love to hear your feedback 🙌
+* [Boostnote Team](https://boostnote.io/team/) : Boostnote for the creative hacker teams. Share your markdown notes and snippets instantly with your team. **We will release it at August!** 🏃💨
+* [Support us via Bountysource](https://salt.bountysource.com/teams/boostnote) : Thank you for your support 🎉
 * [Development](https://github.com/BoostIO/Boostnote/blob/master/docs/build.md) : Development configurations for Boostnote 🚀
 * Copyright (C) 2017 Maisin&Co.
 

tests/date-formatter-test.js

@@ -2,11 +2,11 @@
  * @fileoverview Unit test for browser/lib/date-formatter.js
  */
 const test = require('ava')
-const { getLastUpdated } = require('browser/lib/date-formatter')
+const { formatDate } = require('browser/lib/date-formatter')
 
 test(t => {
   t.throws(
-    () => getLastUpdated('invalid argument'),
+    () => formatDate('invalid argument'),
     'Invalid argument.'
   )
 })

tests/fixtures/TestDummy.js

@@ -175,5 +175,6 @@ module.exports = {
   dummyFolder,
   dummyBoostnoteJSONData,
   dummyStorage,
-  dummyLegacyStorage
+  dummyLegacyStorage,
+  dummyNote
 }

tests/lib/find-title-test.js

@@ -0,0 +1,25 @@
+/**
+ * @fileoverview Unit test for browser/lib/findTitle
+ */
+
+const test = require('ava')
+const { findNoteTitle } = require('browser/lib/findNoteTitle')
+
+// Unit test
+test('findNoteTitle#find  should return a correct title (string)', t => {
+  // [input, expected]
+  const testCases = [
+    ['# hoge\nfuga', '# hoge'],
+    ['# hoge_hoge_hoge', '# hoge_hoge_hoge'],
+    ['hoge\n====\nfuga', 'hoge'],
+    ['====', '===='],
+    ['```\n# hoge\n```', '```'],
+    ['hoge', 'hoge']
+  ]
+
+  testCases.forEach(testCase => {
+    const [input, expected] = testCase
+    t.is(findNoteTitle(input), expected, `Test for find() input: ${input} expected: ${expected}`)
+  })
+})
+

tests/lib/html-text-helper-test.js

@@ -0,0 +1,54 @@
+/**
+ * @fileoverview Unit test for browser/lib/htmlTextHelper
+ */
+const test = require('ava')
+const htmlTextHelper = require('browser/lib/htmlTextHelper')
+
+// Unit test
+test('htmlTextHelper#decodeEntities should return encoded text (string)', t => {
+  // [input, expected]
+  const testCases = [
+    ['&lt;a href=', '<a href='],
+    ['var test = &apos;test&apos;', 'var test = \'test\''],
+    ['&lt;a href=&apos;https://boostnote.io&apos;&gt;Boostnote', '<a href=\'https://boostnote.io\'>Boostnote'],
+    ['&lt;\\\\?php\n var = &apos;hoge&apos;;', '<\\\\?php\n var = \'hoge\';'],
+    ['&amp;', '&'],
+    ['a&#36;&apos;', 'a\\$\'']
+  ]
+
+  testCases.forEach(testCase => {
+    const [input, expected] = testCase
+    t.is(htmlTextHelper.decodeEntities(input), expected, `Test for decodeEntities() input: ${input} expected: ${expected}`)
+  })
+})
+
+test('htmlTextHelper#decodeEntities() should return decoded text (string)', t => {
+  // [input, expected]
+  const testCases = [
+    ['<a href=', '&lt;a href='],
+    ['var test = \'test\'', 'var test = &apos;test&apos;'],
+    ['<a href=\'https://boostnote.io\'>Boostnote', '&lt;a href=&apos;https://boostnote.io&apos;&gt;Boostnote'],
+    ['<?php\n var = \'hoge\';', '&lt;&#63;php\n var = &apos;hoge&apos;;'],
+    ['a$\'', 'a&#36;&apos;']
+  ]
+
+  testCases.forEach(testCase => {
+    const [input, expected] = testCase
+    t.is(htmlTextHelper.encodeEntities(input), expected, `Test for encodeEntities() input: ${input} expected: ${expected}`)
+  })
+})
+
+// Integration test
+test(t => {
+  const testCases = [
+    'var test = \'test\'',
+    '<a href=\'https://boostnote.io\'>Boostnote',
+    '<Component styleName=\'test\' />'
+  ]
+
+  testCases.forEach(testCase => {
+    const encodedText = htmlTextHelper.encodeEntities(testCase)
+    const decodedText = htmlTextHelper.decodeEntities(encodedText)
+    t.is(decodedText, testCase, 'Integration test through encodedText() and decodedText()')
+  })
+})

tests/lib/search-test.js

@@ -0,0 +1,36 @@
+import test from 'ava'
+import searchFromNotes from 'browser/lib/search'
+import { dummyNote } from '../fixtures/TestDummy'
+import _ from 'lodash'
+
+const pickContents = (notes) => notes.map((note) => { return note.content })
+
+let noteList = { noteMap: [] }
+let note1, note2
+
+test.before(t => {
+  const data1 = { type: 'MARKDOWN_NOTE', content: 'content1', tags: ['tag1'] }
+  const data2 = { type: 'MARKDOWN_NOTE', content: 'content1\ncontent2', tags: ['tag1', 'tag2'] }
+  note1 = dummyNote(data1)
+  note2 = dummyNote(data2)
+
+  noteList.noteMap = [note1, note2]
+})
+
+test('it can find notes by tags or words', t => {
+  // [input, expected content (Array)]
+  const testCases = [
+    ['#tag1', [note1.content, note2.content]],
+    ['#tag1 #tag2', [note2.content]],
+    ['#tag1 #tag2 #tag3', []],
+    ['content1', [note1.content, note2.content]],
+    ['content1 content2', [note2.content]],
+    ['content1 content2 content3', []]
+  ]
+
+  testCases.forEach((testCase) => {
+    const [input, expectedContents] = testCase
+    const results = searchFromNotes(noteList, input)
+    t.true(_.isEqual(pickContents(results).sort(), expectedContents.sort()))
+  })
+})

webpack-production.config.js

@@ -15,6 +15,10 @@ var config = Object.assign({}, skeleton, {
         test: /\.styl$/,
         exclude: /(node_modules|bower_components)/,
         loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[path]!stylus?sourceMap'
+      },
+      {
+        test: /\.json$/,
+        loader: 'json'
       }
     ]
   },

webpack.config.js

@@ -13,6 +13,10 @@ var config = Object.assign({}, skeleton, {
         test: /\.styl$/,
         exclude: /(node_modules|bower_components)/,
         loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[path]!stylus?sourceMap'
+      },
+      {
+        test: /\.json$/,
+        loader: 'json'
       }
     ]
   },